@font-face {font-family: 'KapraNeueMedium'; src: url("/assets/special/spring_summer_lifestyle_22ss_02/font/KapraNeueMedium.eot");}
@font-face {font-family: 'KapraNeueMedium'; src: url("/assets/special/spring_summer_lifestyle_22ss_02/font/KapraNeueMedium.ttf") format("truetype")}
@font-face {font-family: 'din'; src: url("/assets/special/spring_summer_lifestyle_22ss_02/font/DINAlternateBold.eot");}
@font-face {font-family: 'din'; src: url('/assets/special/spring_summer_lifestyle_22ss_02/font/DINAlternateBold.ttf');}
html {height: -webkit-fill-available;}
body {min-height: 100vh;  min-height: -webkit-fill-available; background: transparent;}
header {position:fixed; z-index: 1;}
.header-outer-contents {position:fixed; z-index:2;right:0; top:0; padding:27px 24px 0 0; text-align: right; color:#57c3f1;}
.o-header.is-top .o-header_inner {background: rgba(255,255,255,0.8); border-bottom: none;}
a.contact-btn {width: auto; background: #57c3f1; padding: 12px 32px; border-radius: 23px; color: #fff; line-height: 1; display: block; border:2px solid #ffffff; -webkit-transition: .3s ease; transition: .3s ease; font-weight: bold;}
a.contact-btn:hover {color:#57c3f1; background:#fff; border:2px solid #57c3f1; text-decoration: none;}
h1,h2,h3,h4,h5 p {font-family: Arial, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif; }
.a-txt.-lead {font-size: 1vw; color:#ffffff; /**text-shadow: 1px 0px 5px #000;**/}
.a-txt.-lead .txt-wrap { color: #fff; position: absolute; margin: 0; top: 50%;  left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%;}
.a-txt.-lead .txt-wrap img {width: 400px; margin: 54px 0 0;}
.intro-half {display: flex; width:100%; text-align:center; padding: 120px; box-sizing: border-box; height: 100%;}
h2 {font-size:4vw; font-family:'KapraNeueMedium'; color:#ffffff; padding: 0 32px;}
h3 {line-height: 1; margin: 8px 0; font-size:28px; color: #000000; font-family:'KapraNeueMedium';}
.click-wrap {margin-top: 4px;}
.clickhere {color: #000;
  background-color:#fff;
      position: relative;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
    text-align: center; font-size: 24px; transition: all 1s;}
.texts {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.texts p {margin:0; line-height: 1.25; font-family:'din';font-size: 18px;}
.arrow-down {width: 64px; display: block; margin: 24px auto 0;}
.modal_open:hover .clickhere, .modal_open:hover .category-txt {opacity:.6;}
footer {padding: 80px 20px 20px;display: flex; align-items: center;background:#ffffff;}
footer .footer-inner {width:100%;}
footer .footer-inner p {color:#000000; font-size: 12px;}
footer table a {font-family:'KapraNeueMedium'; font-size:2vw; color:#000000;}
footer table a:hover {color:#000000; text-decoration:none;}
footer table .current {line-height: 2px; width: 24px; background: #000000; margin: 0 auto;}
footer table td {vertical-align: top; text-align: center;padding-right: 24px;}
footer .footer-inner img {width:120px;}
footer .footer-inner:last-of-type {text-align: right;}
.lineup-link {background: #000000; color: #ffffff; padding: 8px; display: block; width:100%; max-width: 400px; text-align: center; font-family: 'KapraNeueMedium'; font-size: 1.5vw; margin: 0 auto; transition: all 1s; position: relative;box-sizing: border-box;}
.lineup-link:hover {color:#ffffff; text-decoration:none; opacity:.8;}
.lineup-link:after {content: ''; display: inline-block; width: 50px; height: 36px; opacity:0.8;
    background-image: url(/assets/special/spring_summer_lifestyle_22ss_02/img/arrow-right.svg); background-size: contain;
    vertical-align: middle; position: absolute;
    right: 0px;  top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); background-repeat:no-repeat;}
.o-main {min-width: 100%;padding: 0; background: #fff;}
.o-kv.-groupTop .a-scrolldown, .o-kv.-groupProject .a-scrolldown {bottom: 48px; height: auto; left: 0; position: absolute; right: 0; text-align: center; width: auto;}
.-groupTop {width: 100%; max-width: 100% ; height: 100px; position: absolute; bottom: 0; margin-top: 0; left: 0; margin: 0!important;}
.o-kv.-groupTop .a-scrolldown_txt {font-size:1.3rem; transform: none; color:#ffffff;}
.o-header_inner {max-width: 100%;}
.is-show .o-header_inner, .o-header_inner:hover {width:100%; max-width: 100%; right: initial; overflow:hidden; background:rgba(255,255,255,0.8);}
.top-main-message {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); 
    width: 100%;}
.to-spring {position: fixed; right:24px; bottom:24px; z-index:10;}
.to-spring img {width:200px;}
.top-main-message h1 {font-family: 'KapraNeueMedium'; font-size: 3vw; text-align: center; padding: 32px 72px; color: #fff; margin: 0; line-height: 1.2; font-weight: normal;}
.top-main-message img {width: 30vw; margin: 0 auto; display: block;}
.sub-title {font-size:4rem; letter-spacing: 1px; line-height: 1.5; position:relative; margin: 0 auto 120px; font-weight:bold;}
.sub-title::after {background-color: #57c3f1; bottom: -16px; content: ''; display: block; height: 8px; left: 50%; transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); position: absolute; width: 32px;}
.fv{ background-image:url(/assets/special/spring_summer_lifestyle_22ss_02/img/kv-pc.jpg);background-position-y: top; background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; width: 100%; height: 100vh;  justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index:-1; background-position-x: center;}
.fv p{ color: #fff; line-height: 2; text-align: center;}
.overlay{ width: 100%; padding-top: 100vh; background: #000000; opacity: 0; position: relative; 
}

.a-txt {display: flex; background-image:url(/assets/special/spring_summer_lifestyle_22ss_02/img/main-text.jpg);background-position: center; background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;}
.main-text {width: 100vw; position: relative; display: flex; margin: 0 auto; align-items: center; height: 100%; box-sizing: border-box;}

.social-wrap {position: fixed; right: 24px; top: 140px; z-index:1;}
.social-links {width:28px; display:block; margin-bottom:32px;}
.o-serviceGroup {background:#ffffff;}

.a-btnIcon, .a-btnIcon.is-disabled, .a-btnIcon[aria-disabled='true'] {background:#fff;}
.a-btnIcon.-prev svg, .a-btnIcon.-next svg {stroke:#57c3f1; width:21px; height:21px;}

.full div {background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; margin: 0;}

.modal_box {position: fixed; z-index: 7777; display: none; width: 100%; max-width: 100%; height:100vh; overflow-x:hidden; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none margin: 0; text-align: center; background: #ffffff; box-sizing: border-box; top:0!important; left:0!important; color:#fff;}
.modal_box::-webkit-scrollbar {display:none;}
.a-groupPanel {width:100%;}
.modal_open {cursor:pointer; width:100%; position: relative; display: block;}
.modal_open img {width:100%; transition: all 1s;}
.modal_open p.hover-message {transition: all 1s;}
.modal_box .modal_open.next {border: none; position: absolute; color: #000000;top: 50%; right:24px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); width: initial; z-index:100;}
.modal_box .modal_open.prev {border: none; position: absolute; color: #000000;top: 50%; left:24px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); width: initial; z-index:100;}
.modal_box .modal_open.prev, .modal_box .modal_open.next {display:none;}
.modal_box .modal_open.next img, .modal_box .modal_open.prev img {width:32px;}
.modal_close {position: fixed; top: 32px; right: 27px; display: block; width: 112px; font-size: 46px; color: #000; line-height: 62px; text-align: center; z-index: 10000; width: 32px;}
.modal_close i {line-height: 62px; vertical-align: bottom;}
.modal-wrap {position:relative; width: 100%; height: 100%;}
.modal-inside {width: 100%; max-width: 90%; position: absolute; top: 50%; left:50%; text-align: left; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.moda-titlespace {display:flex; align-items: center;}
.modal-inside .modal-children {width:25%; height:90vh; position: relative;}
.modal-inside .modal-children:nth-of-type(1) {overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none; }
.modal-inside .modal-children::-webkit-scrollbar{display: none;}

.modal-inside .modal-children:nth-of-type(1)::-webkit-scrollbar { display:none;}
.modal-inside .modal-children:nth-of-type(2) {width:50%;}
.modal-inside .modal-children p {font-size:16px; color:#000000;}
.category-txt {font-family:'KapraNeueMedium'; font-size: 4vw; position:absolute; top:24px; left:24px; margin:0; color:#ffffff; transition: all 1s;}

.modal-children p:nth-of-type(3n) {margin-bottom:40px; font-size: 14px;}
.modal-children table td:last-of-type {padding-left:24px;}
.modal-inside .modal-children:nth-of-type(2) img {max-width: 100%; max-height: 100%; width: auto; height: auto;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.modal-inside .modal-children:first-of-type img {width: 64px; height: auto; display: block; margin: 12px 0 4px;}
.modal-inside p {font-size: 1.75rem; margin:0;}
.modal-inside hr {margin:32px 0 24px;}
.modal-inside a {font-size: 21px; font-family:'din';line-height: 1; color: #000000; padding: 12px 0 2px; margin-bottom:4px; transition: 0.75s; display: inline-block; border-bottom: 1px solid #000000; transition: all 1s;}
.modal-inside a:hover {text-decoration:none; opacity:0.6;}
.modal-inside .modal-children table p {font-size:14px;}

.company-wrapper {display:flex;flex-wrap: wrap; justify-content: flex-start; align-items: center; padding-top: 80px;}
.company-each {margin:0; width:33.333%; padding: 10px; box-sizing: border-box;}
.company-each:last-of-type {text-align: center; width: 66.666%;}
.company-each:last-of-type img {width:20%;}
.company-each:last-of-type p {margin:80px 0 0; color: #000;}
.a-btn.-back.-full {text-decoration: none;}

.hover-message {display:none; position:absolute; margin:0;top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); color:#ffffff; z-index: 100;font-family: 'KapraNeueMedium'; font-size: 2vw; }
.modal_open:hover img {filter: brightness(0.5);}
.modal_open:hover .hover-message {display:initial; width: 100%; text-align: center;}

.menu, .menu span { display: inline-block; -webkit-transition: all .4s; transition: all .4s; box-sizing: border-box;}
.menu.active p {color:#ffffff;}
.menu.active span {background-color:#000;}
.menu {position: fixed; top: 16px; right: 16px; width: 64px; height: 64px; z-index: 10; border: none; background: transparent; padding: 0;}
.menu p { text-align: center; margin-top: -32px; font-size: 12px;   position: fixed;}
.menu span { position: absolute; right: 0; width: 100%; height: 2px; background-color: #000; z-index: 10;}
.menu span:nth-of-type(1) { top: 16px; width: 42px; right: 10px;}
.menu span:nth-of-type(2) { bottom: 32px; width: 42px; right: 10px;}
.menu span:nth-of-type(3) { bottom: 18px;  width: 42px; right: 10px;}
.menu.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg);   top: 22px;}
.menu.active span:nth-of-type(3) { -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); bottom: 30px; width: 42px;}
.menu.active span:nth-of-type(2) {display:none;}
#nav { position: fixed; top: 0; right: 0; z-index: 10; width: 100%; height: 100vh; opacity: 0; background-color: #ffffff; transition: all 0.3s ease-in-out; visibility: hidden;   overflow-y: scroll;}
#nav.active { right: 0; opacity: 1; -moz-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); visibility: visible;}
#nav ul { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#nav ul li { list-style-type: none;}
#nav ul li a { display: block; margin: 20px 0; transition: all 0.2s ease-in-out; text-align: center; text-decoration: none; color: #000000; font-size: 26px; letter-spacing: 0.05em; line-height: 1.25; font-weight: 700;}
#nav ul li:last-of-type a {margin-top:56px;}
#nav ul li a h2 {color:#000000; font-size: 3vw;}
#nav ul li a img {    width: 90px; margin: 0 auto 0;}
#nav ul li a:hover {   opacity:0.75;}

.sp {display:none!important;}
.pc {display:initial!important;}

@media screen and (max-width: 749px) {
.pc {display:none!important;}
.sp {display:initial!important;}
.slick-slider-wrap {background-image:url(/assets/special/spring_summer_lifestyle_22ss_02/img/kv-sp.jpg);}
.a-txt {background-image:none;}
.a-txt.-lead, .modal-inside p {line-height: 2.4;}
h3 {font-size: 28px;}
a.contact-btn {padding: 9px 29px;}
.a-btn.-full {margin:0;}
.header-outer-contents {padding: 10px 10px 0 0;}
h1 {font-size: 8vw; padding: 12px 21px; top: 36%;}
.social-wrap {top: 100px; right: 21px;}
.o-kv.-groupTop .a-scrolldown_txt {color: #fff;}
.o-kv.-groupProject {padding: 0 0 124px;}
.o-kv.-groupProject .a-txt {padding:0 28px; line-height: 2.4;}
.a-txt.-lead.movie-caption {font-size:1.45rem; line-height:2;}
.m-txtContent>:last-child:not(.m-grid.-gallery) {padding-left:28px; padding-right:28px;}
.o-kv.-groupProject:first-of-type {padding-top: 124px;}
.o-serviceGroup_carouselInner {padding: 0;}
.overlay h2, .main-text .a-txt.-lead {text-align:left; padding: 20px;}
.overlay h2 {padding-top:60px;}
.main-text .a-txt.-lead {margin-top:0; font-size: 2.75vw; text-align: center; padding:0;}
.moda-titlespace {flex-wrap:wrap;}
.modal_close {top: 18px; right: 18px;}
.modal-inside.modal0 {height:80vh;}
#modal0 .modal-inside {max-width: 100%;}
.modal-inside img {width: 100%;}
.youtube-wrap {margin-top:60px;}
.a-txt.-lead.movie-caption {margin-top: 48px; font-size: 1.5rem;}
.o-serviceGroup {padding-bottom:0;}
.sub-title {margin-bottom:80px;}
/**.main-text {padding:140px 0; display:block;}**/
.a-groupPanel {width: 100%;}
.company-wrapper {flex-wrap: wrap; justify-content: center;margin-top: 0;}
.company-each {width: 50%; margin:0; padding-top:0;}
.company-each:nth-of-type(odd) {padding-right:5px;}
.company-each:nth-of-type(even) {padding-left:5px;}
.top-main-message img { width: 70vw;}
.to-spring img {    width: 160px;}
.top-main-message h1 {font-size: 7vw; line-height: 1.25; padding: 26px 0 0;}
.intro-half {width:100%; height:auto;padding: 40px;}
.a-txt.-lead .txt-wrap {position:initial; top:initial; left:initial; transform:none; -webkit-transform:none; -ms-transform:none;}
.a-txt.-lead .txt-wrap img {margin: 80px auto 40px; display: block; }
.a-txt.-lead .txt-wrap img:last-of-type {width:80%;}
.category-txt {font-size: 14vw;}
.hover-message {font-size: 6vw;}
h2 {font-size: 12vw;}
.modal-inside {position: initial; transform:none; -webkit-transform:none; -ms-transform:none; margin: 72px auto; max-width: calc(100% - 40px);}
.modal-inside .modal-children, .modal-inside .modal-children:nth-of-type(2) {width:100%; height: auto;}
.modal-inside .modal-children {order: 2; margin: 24px 0 72px;}
.modal-inside .modal-children:nth-of-type(2) {order:1; margin:0;}
.modal-inside .modal-children:nth-of-type(2) img { position: initial; transform: none; -webkit-transform: none; -ms-transform: none;height: auto;}
.-groupTop {display:none;}
footer {display:block;    padding-top: 0; }
footer .footer-inner {width:100%; padding-top: 72px; margin-top: 0;text-align: center;}
footer table a {font-size: 32px;}
footer .footer-inner:last-of-type {text-align:center;}
footer .footer-inner p {text-align:center;}
footer .footer-inner table {margin:0 auto;}
.lineup-link {font-size: 24px; max-width:100%;}
#nav ul li a h2 {font-size: 48px; }
.click-wrap {top: 120px;}
.clickhere{width: 64px; height: 64px;}
.texts p {font-size: 14px;}
.company-each:last-of-type {padding:80px 0;}
.company-each:last-of-type img {width: 40%;}
.fv{ background-image:url(/assets/special/spring_summer_lifestyle_22ss_02/img/kv-sp.jpg);}
.main-text-wrap {height:auto;}
.main-text {height:auto; padding: 40px 0;}
.a-txt.-lead .txt-wrap img {margin: 60px auto 20px;}
}