@charset "utf-8";


body {overflow:hidden;}
.m-tt {font-weight:700; font-size:3.5rem;}

.part-1 {width:100%; height:100vh; position:relative;}
.part-1 .main-visual {width:inherit; height:inherit; position:relative; z-index:1;}
.part-1 .vis-item {width:100%; height:100vh; background-repeat:no-repeat; background-position:bottom center; background-size:cover;}
.part-1 .vis-item canvas {width:100%; height:100vh; position:absolute; top:0; left:0; z-index:2;}
.part-1 .vis-1 {background-image:url("../image/main/bg_main_visual1.jpg");}
.part-1 .vis-2 {background-image:url("../image/main/bg_main_visual2.jpg");}
.part-1 .vis-3 {background-image:url("../image/main/bg_main_visual3.jpg");}
.part-1 .vis-4 {background-image:url("../image/main/bg_main_visual4.jpg");}
.part-1 .vis-5 {background-image:url("../image/main/bg_main_visual5.jpg");}
.part-1 .main-title {width:100%; height:auto; text-align:center; position:absolute; top:11.875rem; left:0; z-index:2; font-weight:700;}
.part-1 .main-title h2 {opacity:0; font-size:3rem; letter-spacing:-0.06em;}
.part-1 .main-title p {opacity:0; font-size:6rem; padding-top:1rem;}
.part-1 .main-title .bt-lnk {display:inline-block; margin-top:2rem;}
.part-1 .main-title .bt-lnk .i-plus {position:absolute; top:50%; right:1.25rem; transform:translateY(-50%);}

.part-1 .btn-more{display:inline-block;position:relative;color:#000;cursor:hand;text-align:center;border:0 solid #eee;border-radius:50px;background:rgba(255,255,255,0.5);overflow:hidden!important;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:10;margin:40px 4px 0;padding:25px 100px;}
.part-1 .btn-more:hover{color:#fff!important;}
.part-1 .btn-more::before{content:'';width:0;height:100%;display:block;background:var(--main-color);position:absolute;-ms-transform:skewX(-20deg);-webkit-transform:skewX(-20deg);transform:skewX(-20deg);left:-10%;opacity:1;top:0;z-index:-12;-moz-transition:all .7s cubic-bezier(0.77,0,0.175,1);-o-transition:all .7s cubic-bezier(0.77,0,0.175,1);-webkit-transition:all .7s cubic-bezier(0.77,0,0.175,1);transition:all .7s cubic-bezier(0.77,0,0.175,1);box-shadow:2px 0 14px rgba(0,0,0,.6);}
.part-1 .btn-more::after{content:'';width:0;height:100%;display:block;background:#fff;position:absolute;-ms-transform:skewX(-20deg);-webkit-transform:skewX(-20deg);transform:skewX(-20deg);left:-10%;opacity:0;top:0;z-index:-15;-webkit-transition:all .94s cubic-bezier(.2,.95,.57,.99);-moz-transition:all .4s cubic-bezier(.2,.95,.57,.99);-o-transition:all .4s cubic-bezier(.2,.95,.57,.99);transition:all .4s cubic-bezier(.2,.95,.57,.99);box-shadow:2px 0 14px rgba(0,0,0,.6);}
.part-1 .btn-more:hover::before,.btn-more:hover::before{opacity:1;width:116%;}
.part-1 .btn-more:hover::after,.btn-more:hover::after{opacity:1;width:120%;}



.part-2 {width:100%; height:auto; display:flex; flex-direction:column; justify-content:center; text-align:center;}
.part-2 ul {width:100%; height:auto; padding:0 14vw; margin-top:6rem; display:flex; justify-content:space-between;}
.part-2 ul li {flex:1;opacity:0;  position: relative; transition: all 0.2s linear;  padding:0 1rem; display:flex; flex-direction:column; justify-content:center; min-height:30rem; background-repeat:no-repeat; background-position:center; background-size:cover; color:#fff; font-weight:700; box-shadow:.5rem .5rem 1rem rgba(0,0,0,.2); opacity:0;}
.part-2 ul li::before {content:''; width: 100%; height:100%; position: absolute; left:0; top:0; background: #000; opacity:0;z-index:-1; transition: all 0.2s linear;}
.part-2 ul li:hover::before {opacity:.7; transition: all 0.2s linear;}
.part-2 ul li h3 {font-size:2rem;}
.part-2 ul li h4 {margin-top:1.5rem; font-size:1.4rem;}
.part-2 ul li p {margin-top:3.5rem; font-weight:300; font-size:1.2rem; white-space:pre-line; line-height:1.4;}
.part-2 ul li:nth-child(1) {background-image:url("../image/main/img_specific1.jpg");}
.part-2 ul li:nth-child(2) {background-image:url("../image/main/img_specific2.jpg"); margin:0 5rem;}
.part-2 ul li:nth-child(3) {background-image:url("../image/main/img_specific3.jpg");}

.part-3 {background:url("../image/main/bg_product.jpg") center / cover no-repeat #efefef; display:flex; flex-direction:column; justify-content:center; align-items:flex-end;}
.part-3 .inner {width:50%; padding-left:9vw;}
.part-3 .inner ul {width:100%; height:auto; margin-top:4rem; font-size:2.5rem; letter-spacing:0;}
.part-3 .inner ul li {margin-top:3.5rem; opacity:0;}
.part-3 .inner ul li a {display:block; width:100%; height:auto;}
.part-3 .inner ul li a svg {vertical-align:middle; margin-top:-1rem; margin-right:1.5rem; fill:#111; }

.part-3 .inner ul li a .i-more {display:inline-block; vertical-align:middle; margin-left:2rem; transition:all .3s;}
.part-3 .inner ul li a:hover {font-weight:700;}
.part-3 .inner ul li a:hover .i-more {margin-left:3rem;}
.part-3 .inner ul li a:hover svg {fill:var(--main-color);}
.part-4 {}
.part-4 .roll-bnn, .part-4 .inner {float:left; width:50%; height:100vh;}
.part-4 .roll-bnn {position:relative; text-align:right;}
.part-4 .roll-bnn .roll-item {width:100%; height:100vh; background-repeat:no-repeat; background-position:center; background-size:cover;}
.part-4 .roll-bnn .roll-item a {display:block; width:100%; height:100%; color:#fff !important;}
.part-4 .roll-bnn .tt-box {position:absolute; bottom:7vw; right:5vw;}
.part-4 .roll-bnn .tt-box span {display:block; font-weight:500; font-size:1.5rem; letter-spacing:.1em; text-transform:uppercase; opacity:0;}
.part-4 .roll-bnn .tt-box h3 {font-weight:700; font-size:3.5rem; margin:1rem 0; opacity:0;}
.part-4 .roll-bnn .tt-box h3 small {font-weight:500; font-size:1.5rem;}
.part-4 .roll-bnn .tt-box h3 svg {vertical-align:middle;}
.part-4 .roll-bnn .tt-box p {font-size:1.25rem; line-height:1.4; white-space:pre-line; opacity:0;}
.part-4 .roll-bnn .roll-1 {background-image:url("../image/main/img_saver1.jpg");}
.part-4 .roll-bnn .roll-2 {background-image:url("../image/main/img_saver2.jpg");}
.part-4 .roll-bnn .roll-3 {background-image:url("../image/main/img_saver3.jpg");}
.part-4 .roll-bnn .slick-active .tt-box span {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-4 .roll-bnn .slick-active .tt-box h3 {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-4 .roll-bnn .slick-active .tt-box p {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
.part-4 .roll-bnn .slick-dots {padding-right:5vw; position:absolute; bottom:5vw; right:0; z-index:1;}
.part-4 .roll-bnn .slick-dots li {display:inline-block;}
.part-4 .roll-bnn .slick-dots li button {width:4px; height:4px; border-radius:100%; margin-left:1.25rem; background-color:#fff; opacity:.5; vertical-align:middle; transition:all .3s; font-size:0;}
.part-4 .roll-bnn .slick-dots li.slick-active button {width:10px; height:10px; opacity:1;}
.part-4 .inner {overflow:hidden;}
.part-4 .inner .writing, .part-4 .inner .foot-wrap {width:100%; height:50vh; padding-left:5vw;}
.part-4 .inner .writing {font-size:3.5rem; letter-spacing:-0.05em; display:flex; align-items:center;}
.part-4 .inner .foot-wrap {padding:5vw; background-color:#f3f3f3;}

@media screen and (max-width: 1366px) {
	.part-2 ul {padding:0 2rem;}
	.part-2 ul li:nth-child(2) {margin:0 2.5rem;}
	.part-2 ul li p {font-size:1.2rem;}

	.part-4 .inner .writing {font-size:3rem;}
}
@media screen and (max-width: 1194px) {
	.m-tt {font-size:3rem;}
	.part-2 ul li p {white-space:normal;}

	.part-3 {padding:5rem 0; position:relative; z-index:1; background-position:left center;}
	.part-3:after {content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.2); position:absolute; top:0; left:0; z-index:-1;}
	.part-3 .inner {width:100%; padding-left:0; text-align:center; color:#fff;}
	.part-3 .inner ul {font-size:2rem;}
	.part-3 .inner ul li {display:inline-block; width:25%; margin:0 1rem;}
	.part-3 .inner ul li a {padding:1.5rem 0 3rem; border-radius:2rem; background-color:rgba(0,0,0,.3);}
	.part-3 .inner ul li a svg {display:block;  margin:0 auto 1rem;}
	.part-3 .inner ul li a .i-more {display:block; margin:1.5rem auto 0;}
	.part-3 .inner ul li a:hover {background-color:#fff; box-shadow:1rem 1rem 1rem rgba(0,0,0,.2);}
	.part-3 .inner ul li a:hover .i-more {margin-left:auto;}

	.foot-wrap .f-sitemap li:not(:last-child) {margin-right:2.2rem;}
}
@media screen and (max-width: 926px) {
	body {overflow:visible;}
	#max_footer {display: none !important;} 
	.main-wrap > .swiper-wrapper {flex-direction:column;}
	.part-1, .part-1 .vis-item {height:100vh; background-position:center;}
	.part-1 .vis-item canvas {height:80vh;}
	.part-1 .vis-1 {background-image:url("../image/main/bg_main_visual1_m.jpg");}
	.part-1 .vis-2 {background-image:url("../image/main/bg_main_visual2_m.jpg");}
	.part-1 .vis-3 {background-image:url("../image/main/bg_main_visual3_m.jpg");}
	.part-1 .vis-4 {background-image:url("../image/main/bg_main_visual4_m.jpg");}
	.part-1 .vis-5 {background-image:url("../image/main/bg_main_visual5.jpg");}
	.part-1 .main-title h2 {font-size:1.5rem;}
	.part-1 .main-title p {font-size:3rem}
	.part-1 .btn-more {padding:1em 3em;}

	.m-tt {font-size:2rem;}
	.part-2 {padding:5rem 0;}
	.part-2 ul {margin-top:3rem; flex-direction:column;}
	.part-2 ul li {padding:4rem 1rem; min-height:100%;}
	.part-2 ul li h3 {font-size:2rem;}
	.part-2 ul li h4 {margin-top:1rem; font-size:1.4rem;}
	.part-2 ul li p {font-size:.9rem; margin-top:2rem;}
	.part-2 ul li:nth-child(2) {margin:2rem 0;}

	.part-3 {height: 100vh !important;}
	.part-3 .inner ul {font-size:1.2rem; margin-top:3rem;}
	.part-3 .inner ul li a svg {width:60px !important;  fill:#fff; }


	.part-4 .roll-bnn, .part-4 .inner {float:none; width:100%; height:auto;}
	.part-4 .roll-bnn, .part-4 .roll-bnn .roll-item {height:400px;}
	.part-4 .roll-bnn .tt-box {bottom:4rem;}
	.part-4 .roll-bnn .tt-box span, .part-4 .roll-bnn .tt-box p {font-size:1rem;}
	.part-4 .roll-bnn .slick-dots {bottom:2rem;}
	.part-4 .inner .writing, .part-4 .inner .foot-wrap {height:auto; padding:3rem 1.25rem;}
	.part-4 .inner .writing {font-size:1.5rem; padding-bottom:0;}
	.part-4 .inner .foot-wrap {background-color:#fff;}
}
@media screen and (max-width: 926px) and (orientation:landscape) {
	.part-1, .part-1 .vis-item {height:100vh; background-position:50% 80%;}
	.part-1 .main-title {top:7rem;}
}
@media screen and (max-width: 568px) and (orientation:portrait) {

	
	.part-2 ul li h3 {font-size:1.7rem;}
	.part-2 ul li h4 {font-size:1.2rem; font-weight: 400;}

	.part-3 .inner {padding:0 2rem;}
	.part-3 .inner ul {text-align:left;}
	.part-3 .inner ul li {display:block; width:100%; margin:1rem 0; position:relative;}
	.part-3 .inner ul li a {padding:2rem 2rem;display:flex;align-items: center}
	.part-3 .inner ul li a svg {display:inline-block;  margin:0 1em 0 0; fill:#fff;}
	.part-3 .inner ul li a .i-more {width:2.4rem; margin:0; position:absolute; top:50%; right:2rem; transform:translateY(-50%);}
	.part-3 .inner ul li a .i-more:after {width:2.4rem;}
}

/* effect */
@keyframes fadeInUp { from {opacity:0; -webkit-transform:translate3d(0, 40px, 0); transform:translate3d(0, 40px, 0);} to {opacity:1; -webkit-transform:none; transform:none; } } 
@keyframes fadeInLeft { from {opacity:0; -webkit-transform:translate3d(-40px, 0, 0); transform:translate3d(-40px, 0, 0);} to {opacity:1; -webkit-transform:none; transform:none; } } 
@keyframes fadeInRight { from {opacity:0; -webkit-transform:translate3d(40px, 0, 0); transform:translate3d(40px, 0, 0);} to {opacity:1; -webkit-transform:none; transform:none; } }
.main-vis-wrap.swiper-slide-active .part-1 .main-title h2 {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.main-vis-wrap.swiper-slide-active .part-1 .main-title p {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}

.part-2.swiper-slide-active .m-tt {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.part-2.swiper-slide-active ul li:nth-child(1) {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-2.swiper-slide-active ul li:nth-child(2) {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .5s forwards;}
.part-2.swiper-slide-active ul li:nth-child(3) {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) .7s forwards;}
.part-3.swiper-slide-active .m-tt {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.part-3.swiper-slide-active .inner ul li:nth-child(1) {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-3.swiper-slide-active .inner ul li:nth-child(2) {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-3.swiper-slide-active .inner ul li:nth-child(3) {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) .3s forwards;}
.part-4.swiper-slide-active .roll-bnn {animation:fadeInLeft .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.part-4.swiper-slide-active .inner .writing {animation:fadeInUp .8s cubic-bezier(.28,.06,.36,.86) forwards;}
.part-4.swiper-slide-active .inner .foot-wrap {animation:fadeInRight .8s cubic-bezier(.28,.06,.36,.86) forwards;}