#main_visual {display:flex; align-items:center; height:100vh; text-align:center; color:#fff; background:url('../images/main/main_visual7.jpg') no-repeat center/cover;}
#main_visual .cbox {position:relative; top:80px; width:100% !important;}
#main_visual h2 {font-size:7rem; font-weight:700; line-height:1.2;}
#main_visual h2 span {color:#1eb7f5;}
#main_visual .stit {margin-top:3rem; font-size:3rem;}
#main_visual ul {display:flex; margin-top:14rem; font-size:2rem; line-height:1.5;}
#main_visual li {width:33.33%; word-break:keep-all;}
#main_visual li::before {display:block; position:relative; width:12rem; height:12rem; margin:0 auto 4rem; background:url('../images/main/main_visual_icon.png') no-repeat 0 0; background-size:100% auto; content:'';}
#main_visual li:nth-child(2)::before {background-position:0 10%;}
#main_visual li:nth-child(3)::before {background-position:0 20%;}
/* ani */
#main_visual h2 {transform:translateY(5rem); opacity:0; transition:all 1s 0.5s;}
#main_visual .stit {transform:translateY(5rem); opacity:0; transition:all 1s 0.7s;}
#main_visual ul {transform:translateY(5rem); opacity:0; transition:all 1s 0.9s;}
#main_visual.play h2,
#main_visual.play .stit,
#main_visual.play ul {opacity:1; transform:translateY(1rem);}
@media (max-width:1300px){
	/* 80% */
	#main_visual h2 {font-size:5.6rem;}
	#main_visual .stit {margin-top:2.5rem; font-size:2.4rem;}
	#main_visual ul {margin-top:10rem; font-size:1.6rem;}
	#main_visual li::before {width:10rem; height:10rem; margin-bottom:3.2rem;}
}
@media (max-width:991.98px){
	/* 70% */
	#main_visual h2 {font-size:5rem;}
	#main_visual .stit {margin-top:2rem; font-size:2.1rem;}
	#main_visual li::before {width:8rem; height:8rem; margin-bottom:2.5rem;}	
	#main_visual li:nth-child(2) br {display:none;}
}
@media (max-width:500px){
	/* 60% */
	#main_visual h2 {font-size:4rem;}
	#main_visual ul {margin-top:5rem;}
	#main_visual li {width:30%;}
	#main_visual li:nth-child(2) {width:40%;}
}

.top {display:flex; align-items:center; justify-content:space-between; margin-bottom:6rem;}
.mtit {font-size:4rem; font-weight:700; line-height:1;}
.btn_more {position:relative; width:6.4rem; height:6.4rem; border-radius:100%; background:url('../images/main/icon_list_more.png') no-repeat center/contain;}
.btn_more::before {position:absolute; top:0; left:0; right:0; bottom:0; background:url('../images/main/icon_list_more_on.png') no-repeat center/contain; content:''; opacity:0; transition:all 0.4s;}
.pc .btn_more:hover::before {opacity:1;}

.section {padding:13rem 0;}

@media (max-width:991.98px){
	.top {margin-bottom:4rem;}
	.mtit {font-size:2.8rem;}
	.btn_more {width:5rem; height:5rem;}

	.section {padding:9rem 0;}
	.m_none {display:none;}
}
@media (max-width:500px){
	.top {margin-bottom:3.6rem;}
}

#product01,
#product03 {background:url('../images/main/product_bg.jpg') #e3e4e9 no-repeat center top;}
.product_swiper .inbox {position:relative;}
.product_swiper .img {position:relative;}
.product_swiper .img::before {display:block; padding-bottom:100%; content:'';}
.product_swiper .img img {position:absolute; top:0; left:0; width:100%; height:100%;}
.product_swiper .tcont {padding:3rem 0 2.5rem; font-size:1rem;}
.product_swiper .tcont .ca {overflow:hidden; font-size:1.3em; color:#919191; font-weight:700; line-height:1; white-space:nowrap; text-overflow:ellipsis;}
.product_swiper .tcont .tit {overflow:hidden; margin-top:1rem; font-size:1.7em; color:#222222; font-weight:600; word-break:keep-all; line-height:1.294;}
.product_swiper .ovr {display:flex; align-items:center; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #babbc1; text-align:center; background:#fff; box-shadow:0.7rem 0.7rem 0 0 rgba(0,0,0,0.05); opacity:0; transition:all 0.4s;}
.product_swiper .ovr > div {width:100%; padding:14rem 2rem 0; transform:translateY(30px); background:url('../images/main/product_icon.png') no-repeat center 0; background-size:10.1rem auto; transition:all 0.4s;}
.product_swiper .ovr .ca {overflow:hidden; font-size:1.4rem; color:#1eb7f5; font-weight:700; line-height:1; white-space:nowrap; text-overflow:ellipsis;}
.product_swiper .ovr .tit {overflow:hidden; margin-top:1.7rem; max-height:5.2rem; font-size:2.2rem; color:#222222; font-weight:700; line-height:2.6rem; white-space: normal; word-wrap: break-word; word-break:keep-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.product_swiper .ovr .txt {margin-top:1rem; font-size:1.4rem; color:#939393; max-height:6rem; line-height:2rem; white-space: normal; word-wrap: break-word; word-break:keep-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.pc .product_swiper .inbox:hover .ovr {opacity:1;}
.pc .product_swiper .inbox:hover .ovr > div {transform:translateY(0);}

    
@media (min-width:992px){
	.product_swiper .swiper-container {margin:0 -3rem -11rem;}
	.product_swiper .swiper-wrapper {display:flex; flex-wrap:wrap;}
	.product_swiper .swiper-wrapper .swiper-slide {width:25%; padding:0 3rem 11rem;}

	@media (max-width:1200px){
		.product_swiper .swiper-container {margin:0 -2rem -11rem;}
		.product_swiper .swiper-wrapper .swiper-slide {width:33.333%; padding:0 2rem 11rem;}
		.product_swiper .swiper-wrapper .swiper-slide:nth-child(7),
		.product_swiper .swiper-wrapper .swiper-slide:nth-child(8) {display:none;} 
	}
}
@media (max-width:991.98px){
	#product01,
	#product03 {background-size:400% auto;}
	.product_swiper {margin-right:-2rem;}
	.product_swiper .swiper-slide {width:30rem;}
	.product_swiper .inbox {margin-right:3rem;}
	.product_swiper .ovr {display:none;}

	.product_swiper .tcont {font-size:1.1rem;}
}


#movie {background:url('../images/main/movie_bg.jpg') no-repeat center/cover;}
#movie .mtit {color:#fff;}
#movie .mbox {position:relative; max-width:1100px; margin:auto;}
#movie .mbox::before {display:block; padding-bottom:56.2%; content:'';}
#movie .mbox iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

#contact {background:#e3e4e9;}
#contact .cbox {display:flex; word-break:keep-all;}
#contact .cbox > div {flex:1;}
#contact .form {margin-left:6rem;}
#contact h2 {font-size:12rem; color:#1a2b56; font-weight:700; line-height:1;}
#contact .t01 {margin-top:4.5rem; font-size:1.8rem; line-height:1.6666;}
#contact .t02 {display:inline-block; margin-top:5rem; padding-bottom:0.3rem; border-bottom:1px solid #151d2a; font-size:3rem; color:#1a2b56; font-weight:700;}
#contact .info {display:flex; align-items:center;}
#contact .info::before {width:5.2rem; height:5.2rem; background:no-repeat center/contain; content:'';}
#contact .tel {margin-top:14rem;}
#contact .tel::before {background-image:url('../images/common/icon_tel.png');}
#contact .mail {margin-top:1.3rem;}
#contact .mail::before {background-image:url('../images/common/icon_mail.png');}
#contact .info span {margin:0 1.3rem; font-size:1.8rem;}
#contact .info strong {font-size:3rem; font-weight:700; color:#1a2b56;}
#contact .mail strong {color:#1eb7f5;}
#contact .frow {position:relative;}
#contact .frow+.frow {margin-top:25px;}
#contact .frow .label {position:absolute; top:0; left:0; padding-left:28px; font-size:16px; color:#222222; line-height:55px; font-weight:700;}
#contact .frow input[type="text"] {width:100%; height:55px; padding-left:140px; border:0; border-radius:5px; font-size:15px; color:#222; vertical-align:top;}
#contact .frow textarea {width:100%; height:175px; padding:18px 0; padding-left:140px; border:0; border-radius:5px; font-size:15px; color:#222; resize: none; vertical-align:top;}
#contact .frow input[type="text"]:focus,
#contact .frow textarea:focus {-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 5px  rgba(0,0,0,0.1); box-shadow: 0 0 5px  rgba(0,0,0,0.1); border: 1px solid #1eb7f5 !important;}
#contact .rtxt {position:absolute; right:20px; bottom:15px; font-size:12px;}
#contact .btn_submit {width:100%; height:55px; border-radius:5px; font-size:20px; color:#fff; font-weight:700; background:#1a2b56;}
.inp_chk {position: relative; display:inline-flex; align-items: center; vertical-align: middle; cursor: pointer; padding:15px 0;}
.inp_chk input {position: absolute; top:-1px; left:0; opacity: 0;}
.inp_chk .txt {position:relative; padding-left:26px; cursor: pointer; font-size:16px; color:#000; font-weight:400;}
.inp_chk .txt::before {position:absolute; top:50%; left:0; width:18px; height:18px; margin-top:-9px; border:1px solid #000000; background:#fff; content:'';}
.inp_chk .txt::after {position:absolute; top: 50%; left: 3px; width: 15px; height: 7px; margin-top: -2px; border-style: solid; border-color: #000; border-width: 0 0 2px 2px; background-color: transparent; transform: rotate(-45deg) scale(0); transition: none; content:'';}
.inp_chk input:checked + .txt::after {transform: rotate(-45deg) scale(1) translate(29%, -43%); transition: transform 200ms ease-out;}
.inp_chk.t_none {padding:0;}
.inp_chk.t_none .txt {width:18px; height:18px; padding:0;}
@media (max-width:1300px){
	#contact h2 {font-size:9rem;}
	#contact .t01 {margin-top:2rem;}
	#contact .t02 {margin-top:3rem; font-size:2.4rem;}
	#contact .tel {margin-top:5rem;}
}
@media (max-width:991.98px){
	#contact .cbox {flex-wrap:wrap;}
	#contact .cbox > div {flex:initial; width:100%;}
	#contact h2 {font-size:6rem;}
	#contact .form {margin-left:0rem; margin-top:6rem;}
	#contact .frow+.frow {margin-top:15px;}
}
@media (max-width:500px){
	#contact .frow .label {padding-left:17px; line-height:50px;}
	#contact .frow input[type="text"] {padding-left:120px; height:50px;}
	#contact .frow textarea {padding:15px 0; padding-left:120px; height:150px}
}