@charset "UTF-8";
.sp{
	display: block !important;
}
@media only screen and (min-width: 768px) {
	.sp{
		display: none !important;
	}
	body{
		min-width: 1300px;
		overflow: auto;
	}
}
.mainContent {
	font-size: 1.3rem;
}
@media only screen and (min-width: 768px) {
	.mainContent {
		font-size: 1.6rem;
	}
}

/* ------------------------- */
/*header*/
/* ------------------------- */
header{
	padding-bottom: 15px;
	position: relative;
	z-index: 10;
}
header h1 {
	margin: 18px 0 0 15px;
	width: 32.87%;
	display: inline-block;
}
header .menuBtn{
	margin: 14px 15px 0 0;
	float: right;
}
header nav{
	clear: both;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}
header nav ul{
	width: 100%;
	padding-bottom: 50px;
	background: #fff;
}
header nav ul li{
	text-align: center;
	border-bottom: 1px solid #e50012;
}
header nav ul li a{
	display: block;
	padding: 15px 0 ;
	font-size: 2.0rem;
}
@media only screen and (min-width: 768px) {
	header {
		margin: 36px auto 0;
		width: 1300px;
	}
	header h1{
		margin:0; 
	}
	header nav{
		display: block !important;
		float: right;
		position: relative;
		left: auto;
		top: auto;
		clear: none;
	}
	header nav ul li{
		display: inline-block;
		border: none;
		margin-left: 40px;
	}
	header nav ul li a{
	font-size: 1.8rem;
		display: inline;
		
	}
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 25px;
	height: 25px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e50012;
  border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 11px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger {
  -webkit-animation: menu-close .6s;
  animation: menu-close .6s;
}
.menu-trigger.active {
  -webkit-animation: menu-open .6s;
  animation: menu-open .6s;
}
@-webkit-keyframes menu-close {
  30% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@keyframes menu-close {
  30% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes menu-open {
  30% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@keyframes menu-open {
  30% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(7px) rotate(-45deg);
  transform: translateY(7px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
}

/* ------------------------- */
/*footer*/
/* ------------------------- */
footer{
	margin-top: 50px;
	padding: 33px 0 20px;
	border-top: 2px solid #e50112;
	font-size: 1.3rem;
}
footer .logo{
	width: 55.6%;
	margin: 0 auto;
}
footer nav {
	margin-top: 20px;
	text-align: center;
}
footer nav ul li{
	width: 49%;
	display: inline-block;
}
footer small{
	display: block;
	margin-top: 45px;
	font-size: 1.1rem;
	text-align: center;
}
@media only screen and (min-width: 768px) {
	footer {
		margin-top: 60px;
		font-size: 1.6rem;
		border-width: 4px;
	}
	footer .outer{
		width: 1300px;
		margin: 0 auto;
	}
	footer .logo{
		display: table-cell;
		vertical-align: middle;
		width: 350px;
	}
	footer nav {
		margin: 0;
		display: table-cell;
		vertical-align: middle;
		text-align: right;
		width: 950px;
	}
	footer nav ul li{
		width: auto;
		margin-left: 40px;
	}
	footer small{
		clear: both;
		margin-top: 35px;
		text-align: left;
		font-size: 1.6rem;
	}
}
/* ------------------------- */
/*index*/
/* ------------------------- */
.mainContent h2{
	font-family: 'Noto Sans JP';
	font-weight:bold;
	font-size: 1.8rem;
}
.mainContent h2 span{
	margin-bottm: 15px;
	display: block;
	font-size: 3.0rem;
	color: #e50012;
}
@media only screen and (min-width: 768px) {
	.mainContent h2{
		font-size: 3.0rem;
	}
	.mainContent h2 span{
		font-size: 6.0rem;
	}
}
.mainContent .arrow{
	margin: -25px auto 15px;
	height: 50px;
	width: 1px;
	background: #000;
	position: relative;
	z-index: 2;
}
.mainContent .btn_link a{
	padding: 10px;
	display: block;
	border-radius: 30px;
	font-size: 1.84rem;
	text-align: center;
	position: relative;
	font-weight: bold;
}
.mainContent .btn_link a:after{
	padding: 12px 0;
	display: block;
	position: absolute;
	right: 4.91%;
	top: 0;
	font-size: 1.5rem;
	content: "＞";
}
.mainContent #mv{
	width: 100%;
	height: 100%;
	padding-top: 82.666%;
	overflow: hidden;
	background: url("file:///C|/Users/niitani/AppData/Local/Temp/ffftp00001664/images/top/mv_sp.jpg") top right no-repeat;
	background-size:  100% auto;
	position: relative;
}
.mainContent #mv .copy {
	position: absolute;
	left: 10px;
	top: 27.33%;
	/*top: 27.33%;
	width: 37.73%;*/
}
.mainContent #mv .copy h2 {
	font-size: 2.0rem;
	line-height: 1.65;
}
.mainContent #mv .copy h2:before {
	margin-bottom: 25px;
	content: "";
	width: 27px;
	height: 2px;
	background: #e50012;
	display: block;
}

@media only screen and (min-width: 768px) {
	.mainContent .arrow{
		margin: -50px auto 50px;
		height: 100px;
		width: 2px;
	}
	.mainContent #mv{
		height: 739px;
		padding-top: 0;
		background: url("../images/top/mv.jpg") top center no-repeat;
		background-size:auto auto;
	}
	.mainContent #mv .copy {
		margin: 206px auto 0;
		width:	1300px;
		position: relative;
		top: auto;
		left: auto;
	}
	.mainContent #mv .copy h2 {
		font-size: 5.0rem;
	}
	.mainContent #mv .copy h2:before {
		margin-bottom: 40px;
		width: 60px;
		height: 4px;
	}
}
/* ---------------- */
.mainContent .outer{
	padding-right: 20px;
	padding-left: 20px;
}
@media only screen and (min-width: 768px) {
	.mainContent .outer{
		padding-right: 0;
		padding-left: 0;
	}
	.mainContent .inner{
		width: 1300px;
		margin: 0 auto;
	}
}
/* ----------------------- */
/* mission */
.mainContent #mission {
	padding-top: 30px;
	padding-bottom: 20px;
	background: #f5f5f5;
	overflow: hidden;
}
.mainContent #mission h2 {
	margin-bottom: 35px;
}
.mainContent #mission p {
	margin-bottom: 20px;
}
.mainContent #mission p:last-child {
	margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
	.mainContent #mission {
		padding: 100px 0 65px;
	}
	.mainContent #mission .txt {
		margin-left: 100px;
		width: 460px;
		float: left;
	}
	.mainContent #mission h2 {
		margin-bottom: 75px;
	}
	.mainContent #mission p {
		margin-bottom: 30px;
	}
	.mainContent #mission .ph {
		margin-top: -35px;
		float: right;
	}
}
/* ----------------------- */
/* product */
.mainContent #product {
	padding-bottom: 41px;
}
.mainContent #product h2 {
	margin-bottom: 20px;
	text-align: center;
}
.mainContent #product h2 +p {
	text-align: center;
	margin: 0 20px;
}
.mainContent #product .bg {
	background: url("file:///C|/Users/niitani/AppData/Local/Temp/ffftp00001664/images/top/bg_product_item_sp.png") top left no-repeat;
	background-size: 100% auto;
}
.mainContent #product .itemBox {
	margin-top: 35px;
	padding: 0 0 12px;
	/*padding: 0 35px 12px;*/
}
.mainContent #product .ph {
	height: auto;
	margin: 0 auto;
	padding: 0 35px;
}
.mainContent #product .inbg{
	padding: 0 35px;
}
.mainContent #product .itemBox h3{
	margin-top: 27px;
	/*width: 54.42%;*/
	padding-left: 15px;
	border-left: 3px solid #0baf8f;
	font-family: 'Noto Sans JP';
	font-size: 1.3rem;
	text-align: left;
	line-height: 1.0;
}
.mainContent #product .itemBox h3 span{
	margin-bottom: 10px;
	display: block;
	font-size: 2.5rem;
	color: #e50012;
	font-weight:bold;
}
.mainContent #product .itemBox h4{
	font-size: 1.7rem;
	font-weight: normal;
}
.mainContent #product .itemBox p{
	margin-top: 25px;
}
.mainContent #product .itemBox p:first-child{
	margin-top: 0;
}
.mainContent #product .btn_link{
	/*margin: 10px 35px 0;*/
	margin: 30px 0 0;
}
.mainContent #product .btn_link a{
	border: 1px solid #353535;
}
.mainContent #product #item-Force .inbg {
	background: url("file:///C|/Users/niitani/AppData/Local/Temp/ffftp00001664/images/top/bg_product_item-force_sp.png") right top no-repeat;
	/*background-size: 21.73% auto;*/
	background-size: auto 90%;
}
.mainContent #product #item-Force .ph {
	width: 70.49%;
}
.mainContent #product #item-ghpre .inbg{
	background: url("file:///C|/Users/niitani/AppData/Local/Temp/ffftp00001664/images/top/bg_product_item-ghpre_sp.png") left top no-repeat;
	/*background-size: 26.26% auto;*/
	background-size: auto 90%;
}
.mainContent #product #item-ghpre .ph {
	width: 80.16%;
}
.mainContent #product #item-zelux .inbg{
	background: url("file:///C|/Users/niitani/AppData/Local/Temp/ffftp00001664/images/top/bg_product_item-zelux_sp.png") right top no-repeat;
	/*background-size: 16.4% auto;*/
	background-size: auto 90%;
}
.mainContent #product #item-zelux .ph {
	width: 80.63%;
}
@media only screen and (min-width: 768px) {
	.mainContent #product .bg {
		background: url("../images/top/bg_product_item.png") top center no-repeat;
		background-size: auto auto;
	}
	.mainContent #product h2 {
		margin: 0 auto 40px;
		text-align: center;
	}
	.mainContent #product .itemBox {
		margin: 0 auto;
		padding: 0 0 150px;
		overflow: hidden;
		width: 1190px;
		clear: both;
	}
	.mainContent #product .itemBox .ph {
		margin-left: 100px;
		padding: 0;
		float: left;
		display: inline-block;
		width: auto !important;
	}
	.mainContent #product .itemBox.even .ph{
		float: right;
		margin-left: 0;
	}
	.mainContent #product .itemBox .txtBox {
		float: right;
		padding: 0;
		width: 550px;
	}
	.mainContent #product .itemBox.even .txtBox{
		padding-left: 100px;
		float: left;
	}
	.mainContent #product .itemBox h3{
		margin-top: 0;
		font-size: 2.0rem;
	}
	.mainContent #product .itemBox h3 span{
		margin-bottom: 10px;
		font-size: 3.6rem;
	}
	.mainContent #product .itemBox h4{
		margin-top: 40px;
		font-size: 2.0rem;
	}
	.mainContent #product .itemBox .txtBox .btn_link{
		margin: 60px 0 0;
		width: 330px;
	}
	.mainContent #product .itemBox .txtBox .btn_link a{
		line-height: 50px;
		padding: 0;
	}
	.mainContent #product .itemBox .txtBox .btn_link a:after{
		padding: 0;
	}
	.mainContent #product .inbg{
		background: none !important;
		padding: 0 !important;
	}
	.mainContent #product #item-Force {
		margin-top: 150px;
		background: url("../images/top/bg_product_item-force.png") right top no-repeat;
		background-size: auto auto;
	}
	.mainContent #product #item-Force .txtBox {
		margin-top: 27px;
	}
	.mainContent #product #item-ghpre {
		clear: both;
		background: url("../images/top/bg_product_item-Kaikatsu") left top no-repeat;
		background-size: auto auto;
	}
	.mainContent #product #item-zelux {
		padding-bottom: 185px;
		background: url("../images/top/bg_product_item-zelux.png") right top no-repeat;
		background-size: auto auto;
	}
	.mainContent #product #item-zelux .ph {
		margin-left: 65px !important;
	}
}
/* ----------------------- */
/* company */
.mainContent #company {
	padding: 35px 0 0 0;
	background: #f5f5f5;
}
.mainContent #company dl {
	margin-top: 40px;
	overflow: hidden;
}
.mainContent #company .txtBox { margin: 0 20px;}
.mainContent #company dl dt {
	margin-top: 20px;
	float: left;
	clear: both;
	width: 18.75%;
}
.mainContent #company dl dd {
	margin-top: 20px;
	padding-left: 18.75%;
}
.mainContent #company dl dt:first-of-type ,
.mainContent #company dl dd:first-of-type {
	margin-top: 0;
}
.mainContent #company .ph {
	margin: 30px 0 0;
}
@media only screen and (min-width: 768px) {
	.mainContent #company{
		padding: 0;
	}
	.mainContent #company .inner{
		margin: 0 auto;
		width: 1300px;
		overflow: hidden;
		display: table;
	}
	.mainContent #company .txtBox {
		padding-left: 100px;
		vertical-align: middle;
		display: table-cell;
	}
	.mainContent #company .ph {
		width: 650px;
		vertical-align: middle;
		display: table-cell;
	}
}
/* ----------------------- */
/* company */
.mainContent #contact {
	padding-top: 67px;
	text-align: center;
}
.mainContent #contact p {
	margin-top: 25px;
}
.mainContent #contact .btn_link{
	margin: 27px 0 0;
}
.mainContent #contact .btn_link a{
	color: #fff;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e50012+1,ff7800+100 */
	background: #e50012; /* Old browsers */
	background: -moz-linear-gradient(left,  #e50012 1%, #ff7800 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #e50012 1%,#ff7800 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #e50012 1%,#ff7800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50012', endColorstr='#ff7800',GradientType=1 ); /* IE6-9 */
}
@media only screen and (min-width: 768px) {
	.mainContent #contact p {
		margin-top: 40px;
	}
	.mainContent #contact .btn_link{
		width: 394px;
		margin: 40px auto 0;
	}
	.mainContent #contact .btn_link a {
		padding: 0;
		line-height: 60px;
	}
	.mainContent #contact .btn_link a:after {
		padding: 0;
	}
}

/* ----------------- */
.modal{
    display: none;
    height: 100vh;
	height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
	height: 100%;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    position: absolute;
    top: 40%;
    transform: translate(-50%,-40%);
    width: 60%;
	padding: 30px;
}
.modal__content .box{
	max-height: 60vh;
	overflow-y: scroll;
}

.modal__content .txt h3{
	margin-bottom: 15px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 1.8rem;
}
.modal__content .txt p{
	font-size: 1.6rem;
}
.modal__content .btn{
	position: fixed;
	right: 0;
	top: 0;
}
.js-modal-close span{
	background: #e50112;
	display: inline-block;
	color: #fff;
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
}
@media only screen and (min-width: 768px) {
	.modal__content{
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.modal__content .txt h3{
		font-size: 1.6em;
	}
	.modal__content .txt p{
		font-size: 1.3rem;
	}
	.modal__content .box{
		max-height: 70vh;
	}
}