@charset "utf-8";

@media print{
  
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  text-align: center;
}
#loading .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; display:none; }
#loading .logo img{ max-width:180px; width: 40%; margin:0 auto 3rem; display:block; position:relative; }
#loading .logo p{ color:#000; letter-spacing:0; font-size:110%; opacity:0; transition:opacity .5s; }
#loading .logo p.on{ opacity:1; }
#loading .logo p #loading_text{ color:#000; display:inline-block; }
#loading .logo p #loading_text svg{ display:none !important; }

#kv{ height:100svh; width:100%; overflow:hidden; position:relative; z-index:1; background:url(../img/open1.webp) center center; background-size:cover; }
#kv picture{ width:100%; height: 100%; clip-path: inset(0 0 0 100%); display:block; }
#kv picture.on{ animation: insetWipeIn .8s cubic-bezier(0.33, 1, 0.68, 1) 1s 1 normal both; }
#kv picture img{ object-fit:cover; width:100%; height:100%; }
#kv h1{ position:absolute; width:80%; max-width:1000px; bottom:20%; left:50%; transform:translateX(-50%); opacity:0; }
#kv h1.on{ animation: fadetxt .8s 1s ease-out forwards; }

#about{ background:#fff; padding:10rem 5%; position:relative; z-index:1; }
#about h2{ font-size:150%; margin-bottom:3rem; }
#about h2 b{ font-size:400%; display:block; line-height:1; }
#about h2 span{ letter-spacing:0; }
#about p{ margin:2rem auto; }
#about .map,#about .ph{ max-width:800px; width: 80%; margin:4rem auto; }


.cls-2 {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke: #be462a;
  stroke-width: 2;
}
.map.play .cls-2 { animation: draw 2.5s ease-out forwards; }
@keyframes draw {
    0%   { stroke-dashoffset: 1; opacity: 0; }
    1%   { opacity: .3; }
    100% { stroke-dashoffset: 0; opacity: .3; }
  }

#mov-area{ position:fixed; top:0; left:0; width:100%; height:100svh; overflow:hidden; }
#mov-area .mov{ height:100%; width:100%; }
#mov-area .mov img,#mov-area .mov video{ object-fit:cover; width:100%; height:100%; }
#mov-area h2{ font-size:150%; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; width:90%; }
#mov-area h2 b{ font-size:350%; display:block; line-height:1.5; letter-spacing:0; }
#mov-area h2 span{ font-size:130%; }

#overview{ position:relative; z-index:1; background:#edece6; margin-top:200svh; }
#overview .overview-in{ display: flex; height: auto; }
#overview .picture{ width: 50%; position: sticky; top: 0; height:100svh; overflow:hidden; }
#overview .picture-item-top{ width:100%; height:100%; overflow:hidden; }
#overview .picture-item-top img{ object-fit: cover; width: 100%; height: 100%; object-position:top center; transition:opacity 1s,filter 1s,transform 1s; }
#overview .picture-item-top.on img{ /*animation: fadeimg3 1.5s ease forwards;*/ opacity:0; transform:scale(1.5); filter:blur(3rem); }
#overview .picture-item{ width:100%; height: 100%; position:absolute; left:0; top:0; opacity:0; transition:opacity .8s; }
#overview .picture-item img{ object-fit: cover; width: 100%; height: 100%; object-position:top center; }
#overview .picture-item img.c{ object-position:center center; }
#overview .picture-item.on{ opacity:1; }
#overview .text{ width:50%; padding:0 0 5% 0; }
#overview .text .sec{ margin:14rem 5%; }
#overview .text h2{ letter-spacing:0; margin-bottom:3rem; }
#overview .text h2 b{ display:block; font-size:550%; line-height:1; }
#overview .text h2 span{ font-size:120%; }
#overview .text p{ margin:4rem 0; font-size:90%; line-height:3; }
#overview .text h3{ position:relative; padding-bottom:3rem; }
#overview .text h3:before{ content:""; position:absolute; left:calc(50% - 9px); bottom:0; width:18px; height:10px; background:url(../img/arr.svg) no-repeat center center; background-size:contain; }
#overview .text h3 b{ font-size:240%; line-height:1; }
#overview .text h3 span{ display:block; font-weight:500; }
#overview h4.func{ display:inline-block; background:#fff; line-height:1; padding:.2em 1em; position:relative; margin-bottom:2rem; }
#overview h4.func:before,#overview h4.func:after{ content:""; position:absolute; left:-15px; top:calc(50% - 5px); width:10px; height:10px; background:url(../img/arr.svg) no-repeat center center; background-size:contain; transform:rotate(-90deg); }
#overview h4.func:after{ transform:rotate(90deg); left:auto; right:-15px; }

ul.func{ display:flex; justify-content:center; align-items:center; gap:2rem; }
ul.func li{  }

#wearing{ position:relative; z-index:1; background:#fff; }
.w-item{ background:#fff; /*position:sticky; top: 0;*/ padding: 1px 5%; min-height: 100svh;   }
.w-item.type2{ min-height:1rem; padding: 5rem 5%; }
.w-item-in{ display:flex; align-items:center; justify-content:center; padding: 3rem 0; gap:5%; min-height:95svh; }
.w-item .video{ height: 60svh; font-family: "DINPro-Bold"; letter-spacing:0; line-height:1.3; position:relative; } 
.w-item .video img,.w-item .video video{ height: 100%; width: auto; } 
.w-item .video p{ position: absolute; }
.w-item .video p.v1{ bottom:calc(100% + .6em); width:100%; }
.w-item .video p.v2{ top:calc(100% + .6em); width:100%; }
.w-item .video p.v3{ right:calc(100% + .6em); top: 0; height: 100%; writing-mode: vertical-lr; transform:rotate(180deg); }
.w-item .text{ width:50%; }
.w-item .text h3{ font-family: "DINPro-Medium"; letter-spacing:0; }
.w-item .text h3 span{ display:block; }
.w-item .text h3 b{ display:block; font-size:250%; line-height:1.2; }
.w-item .text h3 + p{ font-weight:500; font-size:90%;  }
.w-item .text p{ font-size:85%; margin:.5rem 0 3rem; }

a.link{ position: relative; background:#534542; color:#fff; padding:1rem 2rem; margin:0 auto; width:80%; max-width:400px; display:block; }
a.link:before{ content: ""; transition:width .3s cubic-bezier(0.33, 1, 0.68, 1); width:0; left:0; top:0; position:absolute; background:#000; height:100%; }
a.link:hover:before{ width:100%; }
a.link span{ position:relative; z-index:1; }
.w-item a.link{ margin-bottom:8rem; }

#shop{ z-index:1; background:#fff; padding:10rem 5% 10rem; position:relative; }
#shop > a.link{ margin-bottom:10rem; }
#shop h2{ letter-spacing:0; margin-bottom:3rem; font-size:240%; }
#shop li{ margin:3rem auto; }
#shop li h3{ margin-bottom:.3rem; font-size:90%; }



.js-scroll-overlap {
  position: relative;
}
.js-scroll-overlap:not(.is-disabled) {
  --sticky-offset: -1px;
  --overlay-opacity: 0;
  position: sticky;
  top: var(--sticky-offset);
}
.js-scroll-overlap[data-is-overlay="true"]:not(.is-disabled)::after {
  content: "";
  opacity: var(--overlay-opacity);
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}
.js-scroll-overlap[data-is-overlay="true"]:not(.is-disabled).is-active::after {
  will-change: opacity;
}
.relative {
  position: relative;
}





.view{ position: relative; width:18em; line-height:1.5; padding:1.3em 0; background-color:#ABA7A7; font-size:1.2em; overflow:hidden; border:1px solid #ABA7A7; transition:.5s; }
.view:before{ content:""; position:absolute; right:.5em; top:calc(50% - .5em); background:url(../img/arr.svg) no-repeat center center; background-size: contain; width:1em; height:1em; }
.view:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;  }
.view > span{ display:block; position:relative; overflow:hidden; }
.view > span > span{ display:block; position:relative; transition:.5s; }
.view > span > span:before,.view > span > span:after{ content:"VIEW MORE"; display:block; transition:.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
.view > span > span:after{ content:"VIEW MORE"; position:absolute; left:50%; top:1.5em; display: block; transform: translateX(-50%); opacity:0; width:100%;  }

.on .view { background-color:#fff; border-color:#000; }
.on .view > span > span:before{ opacity:0; }
.on .view > span > span:after{ opacity:1; }
.on .view > span > span{ transform: translateY(-1.5em); }
.on .view:before{ animation: viewarr 1s ease forwards; }


@keyframes fadetxt {
  0% {opacity: 0; bottom:calc(20% - 2em); }
  100% {opacity: 1; bottom:20%;}
}
@keyframes scaleimg {
  0% {transform:scale(1.1); }
  100% {transform:scale(1);}
}
@keyframes slideimg {
  0% {left:100%; }
  40% {left:0;}
  50% {left:0;}
  80% {opacity: 1}
  100% {left:-100%; opacity: .5}
}
@keyframes fadeimg {
  0% { opacity:0; }
  50% {opacity:0; transform:scale(1.4);}
  80% {opacity:0.6;}
  100% {opacity:1; transform:scale(1.0); }
}
@keyframes fadeimg2 {
  0% {opacity:0; transform:scale(1.4);}
  100% {opacity:1; transform:scale(1.0); border-radius: 10em; }
}
@keyframes fadeimg3 {
  0% {opacity:1; transform:scale(1);}
  100% {opacity:0; transform:scale(1.5); filter:blur(3rem); }
}
@keyframes fade2 {
  0% { opacity:0; }
  45% {opacity:0; }
  55% {opacity:1; }
  90% {opacity:1;}
  100% {opacity:0; }
}
@keyframes insetWipeIn {
    0% {
        clip-path: inset(0 100% 0 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}

@media screen and (max-width: 1600px) {
  #overview .picture{ width: 45%;}
  #overview .text{ width:55%; }
}
@media screen and (max-width: 1280px) {
  .w-item .text{ width:60%; }
  #about{ padding:8rem 5%; }
  #overview .text .sec{ margin:12rem 5%; }
  #overview .text p{ margin:3rem 0; }
}

@media screen and (max-width: 810px) {
  #mov-area h2 b { font-size:270%; line-height:1.2; }
  #overview .picture { display:none; }
  #overview .text { width:100%; }
  #overview .text p { font-size:100%; line-height:2; margin:2rem 0; }
  #overview .text .sec { margin: 6rem 5%; }
  #overview .text > .ph-item{  }
  #overview .text .sec .ph-item{ max-width:500px; margin:3rem auto; }
  .w-item-in { display:block; font-size:120%; }
  .w-item .video { height:auto; width:70%; margin:8rem auto; max-width:400px; }
  .w-item .video img, .w-item .video video { width:100%; height:auto; }
  .w-item .text { width:100%; padding-bottom:10rem; }
  
}
@media screen and (max-width: 600px) {
  #about h2 b { font-size:340%; }
  #about{ padding:5rem 5%; }
  #overview { margin-top: 150svh; }
  #overview .text h2 b { font-size:450%; }
  #overview .text .sec { margin: 4rem 5%; }
  .w-item .text h3 b { font-size:190%; }
  .w-item .video { margin:5rem auto; }
  .w-item .text p { margin-bottom:2rem; }
  .w-item .text { padding-bottom:6rem; }
  ul.func.f3 { flex-wrap: wrap; }
   ul.func.f3 li{ max-width:25%; }

   .w-item a.link{ margin-bottom:4rem; }
  #shop{ padding:4rem 5%; }
  #shop > a.link{ margin-bottom:4rem; }
  #shop h2{ margin-bottom:2rem; }
  #shop li{ margin:2.5rem auto; }
  
}