@charset "utf-8";

#loading{ position:fixed; top:0; left:0; width:100%; height:100%; background:#cccece; z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .8s ease; }
#loading.done{ opacity:0; pointer-events:none; }
.loading-inner{ width:88%; max-width:1200px; display:flex; justify-content:space-between; }
.l-left,.l-right{ font-size:140%; color:#442f12; margin-top: .6em; opacity:0; animation: l-fadein 1.2s ease forwards; }
.l-left{ animation-delay: .5s; }
.l-right{ animation-delay: .5s; }
.l-center{ text-align:center; margin-top: .3em; opacity:0; animation: l-fadein 1.2s ease forwards; }
@keyframes l-fadein{ from{ opacity:0; } to{ opacity:1; } }
.l-mask{ overflow:hidden; height:2.4em; }
.l-tape{ display:flex; flex-direction:column; }
.l-item{ height:2.2em; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.l-item-logo img{ height:2em; width:auto; display:block; }
.l-item-num{ font-size:110%; color:#442f12; }

#main{ width:100%; margin:0 auto; font-style: italic; }
#main .main-mv ~ *{ position:relative; z-index:1; background-color:#fff; padding-top: 5em; }
/*#main .main-mv + section{ opacity:0; animation:fade .8s 1.2s ease forwards; }*/
#main .main-mv{ position:relative; max-width:1300px; margin: 0 auto; min-height: 50svh;}
#main .main-mv video{ position:fixed; top:0; left:50%; width:100%;  height:auto; z-index:-1; max-width:1300px; opacity:0; }
body.loaded #main .main-mv video{ animation:mvVideoIn 1s .2s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
#main .main-mv h1{ position:absolute; left:5%; top:50%; transform:translateY(-50%); font-size: 600%; z-index: 2; font-weight: 500; line-height: 1; font-style: normal; opacity:0; color: #fff; }
body.loaded #main .main-mv h1{ animation:fade 1.2s .8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
#main .main-mv h1 span{ display:block; font-size:50%; margin-top:0.2em; }

#main .main-ph{ max-width: 1094px; margin: 0 auto; overflow:hidden; position:relative; }
#main .main-ph > img{ opacity:0; transition:1s .5s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(1.3) translateY(4em); filter:blur(1em); }

#main .main-ph.play > img{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
#main .main-ph h1{ position:absolute; left:5%; bottom:10%; width:100%; text-align:center; opacity:0;   }
#main .main-ph h1 img{ width:auto; height:130px; }
#main .main-ph.play h1{ animation:fade 1s 1s ease forwards; }
#main .main-ph + .txt-area{ margin-bottom:8em; }


#main .txt-area{ font-size: 110%; color: #442f12; margin-top: 1em;}
#main .txt-area.terra{ color: #bc6150;}
#main .txt-area h2{ font-size: 400%; line-height: 1.2; font-style: normal; font-weight: 500; }
#main .txt-area h2.l{font-size: 500%; }
#main .txt-area h2.dark{ color: #442f12; }
#main ul.price{ padding:0; margin-top: 1em; font-size: 120%; color: #442f12;}
#main ul.price.flex{ display:flex; gap:.5em 1em; justify-content:center; flex-wrap:wrap; }
#main ul.price li{ font-size:100%; }
#main ul.price span{ display:inline-block; margin-left:.6em; }
#main ul.price a{ display:inline-block; padding:.1em .1em; position:relative; color: #442f12; }
#main ul.price a:before{ content:""; position:absolute; left:0; bottom:2px; width:0; height:1px; background:#442f12; transition:.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
#main ul.price a:hover:before{ width:100%; left:0; }
#main ul.price span.sub{ display:block; font-size:90%; margin-left:0; }
#drop2{ background:url(../img/drop/drop2_4.jpg) no-repeat center left; }

#main section{ padding: 5em 0 1px; }
#main section.sec2{ background: #cccece; padding-top: 1px; position: relative; z-index: 1; }
#main section.sec3,#main section.sec4{ padding-top: 10em;}
#main p{ font-size: 120%;}
#main .ph{ margin:0 auto 10em; max-width:1000px; width: 90%; }
#main .ph.full{ max-width:none; width: 100%; }
#main .ph.flex{ display:flex; padding: 0 1em; gap:1em; justify-content:space-between; align-items: flex-start; width: 100%; }
#main .ph.full.flex{ overflow:hidden; display:block !important; padding:0; margin-bottom:0; }
#main .ph.full.flex .marquee-inner{ display:flex; animation:marqueeScroll 25s linear infinite; animation-play-state:paused; }
#main .ph.full.flex.play .marquee-inner{ animation-play-state:running; }
#main .ph.full.flex figure{ width:calc(100vw / 3); flex-shrink:0; overflow:hidden; margin:0 2em 0 0; opacity:0; animation:none !important; }
#main .ph.full.flex .marquee-inner figure:nth-child(n+4){ opacity:1; }
#main .ph.full.flex figure img{ opacity:1 !important; animation:none !important; width:100%; height:auto; display:block; }
#main .ph.full.flex.play .marquee-inner figure:nth-child(1){ animation:fade 1.2s 0s ease forwards !important; }
#main .ph.full.flex.play .marquee-inner figure:nth-child(2){ animation:fade 1.2s .2s ease forwards !important; }
#main .ph.full.flex.play .marquee-inner figure:nth-child(3){ animation:fade 1.2s .4s ease forwards !important; }
#main .ph.wid,#main .ph-fl.wid{ max-width:1400px; }
#main .ph.wid2,#main .ph-fl.wid2{ max-width:1200px; }
#main .ph.wid3,#main .ph-fl.wid3{ max-width:1100px; }
#main .border1,#main .border2{ position: relative;}
#main .border1::before,#main .border2::before{ position: absolute; content: ""; width: 100%; height: 100%; border: 0px solid #9b3c2f; display: block; z-index: 3; top: 0; left: 0; box-sizing: border-box; pointer-events: none; }
#main .play .border1::before,#main .play .border2::before{ transition: border-width 1s .6s ease; border-width: 6px; }
#main .border3:before,
#main .border3:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #508767;
  top: 0;
  pointer-events: none;
  z-index: 3;
}
#main .border3:before {
  left: 0;
  width: 0;
  height: 1em;
}
#main .border3:after {
  right: 0;
  width: 1em;
  height: 0;
}
#main .play .border3:before {
  width: 100%;
  transition: width 0.2s 1.3s linear;
}
#main .play .border3:after {
  height: 100%;
  transition: height 0.2s 1.5s linear;
}
#main .play .border3 span:before {
  width: 100%;
  transition: width 0.2s 1.7s linear;
}
#main .play .border3 span:after {
  height: 100%;
  transition: height 0.2s 1.9s linear;
}
#main .border3 span:before,
#main .border3 span:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #508767;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}
#main .border3 span:before {
  right: 0;
  width: 0;
  height: 1em;
}
#main .border3 span:after {
  left: 0;
  width: 1em;
  height: 0;
}

#main .ph.l{ margin-left:12em; }
#main .ph.r{ text-align: right;}
#main .ph-fr{ display:flex; gap:2em; justify-content: flex-end; align-items: flex-start; margin:10em auto; max-width:1000px;  width: 90%; }
#main .ph-fl{ display:flex; gap:2em; justify-content:space-between;  align-items: flex-start; margin:10em auto; max-width:1000px; width: 90%; }
#main .ph-fl.left{ justify-content:flex-start; align-items: flex-end; } 
#main .ph-fr.right{ justify-content:flex-end; align-items: flex-end; margin:10em 2% 10em auto; max-width:1100px; }
#main .ph-fl.row{ flex-direction:row-reverse; }
#main .ph-fl.ac{ align-items:center; }
#main .ph figure{ position:relative; z-index: 1; }
#main .ph figure,#main .ph-fl figure,#main .ph-fr figure{ overflow:hidden; opacity:0; position:relative; }
#main .ph-fl figure.no{ opacity:1; }
#main .ph-fl figure.type1,#main .ph-fl .type1{ margin-top:6em; }
#main .ph-fl figure.type2{ margin-top:12em; }
#main .ph-fl figure.type3{ margin-top:16em; }
#main .ph img,#main .ph video,#main .ph-fl :not(.no) img,#main .ph-fr :not(.no) img{ opacity:0; }
#main .ph.play figure,#main .ph-fl.play figure:not(.no),#main .ph-fr.play figure{ animation:translateY 1s ease-out forwards; }
#main .ph.play img,#main .ph-fl.play :not(.no) img,#main .ph-fr.play :not(.no) img{ animation:fade-effect2 2s ease forwards; }
#main .ph-fl.play :nth-child(2) img,#main .ph-fr.play :nth-child(2) img{ animation-delay:.5s; }
#main .ph-fl.play :nth-child(2),#main .ph-fr.play :nth-child(2){ animation-delay:.5s; }
#main .ph.flex :nth-child(2){ animation-delay:.25s; }
#main .ph.flex :nth-child(3){ animation-delay:.5s; }
#main .ph.video{ max-width: 450px; width: 65%; aspect-ratio: 9 / 16; overflow: hidden;  }
#main .ph video{ width:100%; height:100%; object-fit: cover; object-position: 50% 50%; margin:0 auto; display: block; opacity:0; outline: 3px solid #fff; outline-offset: -1px;  }
#main .ph.play figure video{ animation:fade-effect2 2s ease forwards; }
#main .ph ul.price,#main .ph-fl ul.price,#main .ph-fr ul.price,
#main .ph .txt-area,#main .ph-fl .txt-area,#main .ph-fr .txt-area,
#main .ph > p{ opacity:0; }
#main .ph.play ul.price,#main .ph-fl.play ul.price,#main .ph-fr.play ul.price,
#main .ph.play .txt-area,#main .ph-fl.play .txt-area,#main .ph-fr.play .txt-area,
#main .ph.play > p{ animation:fade 1s .6s ease forwards; }
#main .ph-fl.play .txt-area:has(~ figure),
#main .ph-fr.play .txt-area:has(~ figure),
#main .ph.play .txt-area:has(~ figure){ animation-delay:0s; }
#main .ph.after-h1.play ul.price,
#main .ph.after-h1.play .txt-area,
#main .ph.after-h1.play > p{ animation-delay:0s; }
#main .play figure.left{ animation-name:translateLeft !important; }
#main .play figure.right{ animation-name:translateRight !important; }
#main .w800{ max-width:800px; width: 80%; }
#main .w95{ width:95%; }
#main .w90{ width:90%; }
#main .w80{ width:80%; }
#main .w75{ width:75%; }
#main .w70{ width:70%; }
#main .w65{ width:65%; }
#main .w60{ width:60%; }
#main .w50{ width:50%; }
#main .w40{ width:40%; }
#main .tar{ text-align:right; }
#main .tac{ margin: 0% auto !important; }

#main figure.sc1{ top:0; }

#main .ph.txt-overlay{ position:relative; container-type:inline-size; }
#main .ph.txt-overlay.left{ transform: translateX(25%);}
#main .ph.txt-overlay .overlay-txt{ position:absolute; right:-.5em; top:0; height:100%; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; font-size:13.5cqw; line-height:1; color:#fff; font-style:normal; pointer-events:none; z-index:2; padding:0 .1em; clip-path:inset(0 0 100% 0); }
#main .ph.txt-overlay.play .overlay-txt{ animation:revealDown 2s .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
#main .ph.txt-overlay.left .overlay-txt{ right:auto; left:-1.2em; }
#main .ph.txt-overlay .overlay-txt.dark{ color:#442f12; }

#main .end-txt{margin: 5em auto; text-align: center; width: 80%; font-size: 100%;}
#sec1_ph67{ align-items: flex-end; }
#sec1_ph67 .ph67-right{ position: relative; }
#sec1_ph67 .ph67-right ul.price{ position: absolute; right: calc(100% + 1em); bottom: 0; white-space: nowrap; }
.online-store-btn{ display:block; width:40%; max-width:360px; min-width:200px; margin:3em auto 6em; padding:1.2em 0; border:1px solid #442f12; color:#442f12; text-align:center; font-size:105%; letter-spacing:.35em; text-decoration:none; transition:background .3s, color .3s,border-color .3s; }
.online-store-btn:hover{ background:#442f12; color:#fff; border-color: #442f12; }

.sec2_ph8{ transform: scale(1.2); transform-origin: bottom left;}
.sec2-cover-wrap{ position: relative; overflow: visible; padding-top: 0 !important; background: #cccece !important; }
.sec2-cover-spacer{ height: 100svh; }
#sec2_ph1{ margin: 0 !important; padding-top: 0 !important; position: sticky !important; top: 0; z-index: 1; }
#sec2_ph1 figure,#sec2_ph2 figure{ width: 100%; height: 100svh; overflow: hidden;}
#sec2_ph2{ height: 100svh; display: flex; align-items: center; justify-content: center;}
#sec2_ph1 figure img,#sec2_ph2 figure img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#sec2_ph1.play figure{ animation:fade 1s ease-out forwards !important; }
#sec2_ph2{ background: none!important; padding: 0 !important; margin-bottom: 0 !important; position: relative; z-index: 2; }
#sec2_ph2 figure img{ object-fit: contain;}
.sec3-ph6-wrap{ height: 400vh; padding-top: 0 !important;}
#sec3_ph6{ position: sticky !important; top: 0 !important; height: 100svh !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: none !important; max-width: none !important; overflow: visible; display: flex !important; align-items: center; justify-content: center; }
#sec3_ph6 figure{ width: 100%; height: 100%; overflow: hidden; clip-path: inset(25%); }
#sec3_ph6 figure img{ width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; animation: none !important; transform: scale(0.8); transform-origin: center center; }

#sec3_ph1 .txt-area{ width: 80%; margin: 1em auto 0; max-width: 30em;}

#main .ph.c1{ width:70%; max-width:750px; margin: 10em auto; }
#main .ph.c2{ width:70%; margin:-12em 0 0 30%; text-align:right; position: relative; z-index: 1; overflow: hidden;}
#main .ph-fl .bg{ position:relative; }
#main .ph-fl .c3:before{ content: ""; z-index:-1; position:absolute; left:-1.5em; top:-1.5em; width:100%; height:100%; background:url(../img/connect/connect1_3_bg.png) left top no-repeat; background-size:contain; opacity:0;  }
#main .ph-fl .c4{ margin-top:10em; }
#main .ph-fl .c4:before{ content: ""; z-index:-1; position:absolute; left:1.5em; top:1.5em; width:100%; height:100%; background:url(../img/connect/connect1_4_bg.png) left top no-repeat; background-size:contain; opacity:0;  }
#main .ph.c5 { text-align:center; position:relative; display:table; margin:0 auto; }
#main .ph.c5:before{ content: ""; z-index:-1; position:absolute; left:-1.3em; top:-1.2em; width:calc(100% + 2.5em); height:calc(100% + 1.8em); background:url(../img/connect/connect1_5_bg.png) left top no-repeat; background-size:100% 100%; opacity:0;  }
#main .ph-fl .c2-2{ margin-top:8em; }
#main .ph-fl .c2-2:before{ content: ""; z-index:-1; position:absolute; left:-1.2em; top:-1.2em; width:calc(100% + 2.4em); height:calc(100% + 2.4em); background:url(../img/connect/connect2_2_bg.png) left top no-repeat; background-size:100%; opacity:0;  }
#main .ph-fl .c2-3{ margin-left:5em; width:135%; max-width:632px; }
#main .ph-fl .c2-4{ transform:translateX(-8em); z-index:-1; width:105%; }
#main .ph-fr .c2-5{ position:relative; width:80%; }
#main .ph-fr .c2-5 .txt{ position:absolute; left:-30%; top: 50%; transform: translateY(-50%); z-index:1; mix-blend-mode: multiply; }
#main .ph-fr .c2-5 .txt img{ opacity:0; }
#main .ph-fr.play .c2-5 .txt img{ animation:fade 1.5s 1s ease forwards;  }
#main .ph-fl .c2-6{ left:3em; }

#main .ph-fl.play .c3:before{ animation:fade 1.5s 1s ease forwards; }
#main .ph-fl.play .c4:before{ animation:fade 1.5s 1.5s ease forwards; }
#main .ph.play.c5:before{ animation:fade-effect3 1.5s .5s ease forwards; }
#main .ph-fl.play .c2-2:before{ animation:fade 1.5s 1s ease forwards; }

.end{ position:relative; }
.end img.tit{ height:80px; width:auto; position:absolute; bottom:2.5em; left:50%; transform:translateX(-50%); }


@keyframes translateY {
  0% {transform:translateY(5rem); opacity: 0; }
  100% {transform:translateY(0); opacity: 1;}
}
@keyframes translateLeft {
  0% {transform:translateX(-6em); opacity: 0; }
  100% {transform:translateX(0); opacity: 1;}
}
@keyframes translateRight {
  0% {transform:translateX(6em); opacity: 0; }
  100% {transform:translateX(0); opacity: 1;}
}
@keyframes border {
  0% { border-width:0; }
  100% {border-width:1em;}
}
@keyframes fade-effect2 {
  0% { opacity: 0; transform:scale(1.15); }
  30% { opacity: 1;}
  100% {opacity: 1; transform:scale(1);}
}
@keyframes fade-effect3 {
  0% { opacity: 0; transform:scale(.9); }
  100% {opacity: 1; transform:scale(1);}
}
@keyframes fade {
  0% {opacity: 0; }
  100% {opacity: 1;}
}


@keyframes mvVideoIn {
  0%   { opacity:0; transform:translateX(-50%) translateY(0) scale(1.06); }
  100% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
@keyframes slideInH1 {
  0%   { opacity:0; transform:translateY(1em); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes revealDown {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0% 0); }
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--marquee-offset, -50%)); }
}
@keyframes fadeimg {
  0% { opacity:1; }
  1% {opacity:.6;}
  100% {opacity:1; }
}


@media screen and (max-width: 1440px) {
  .under-tit{ font-size:85%; }
  #local-nav ul{ padding:25px; }
}
@media screen and (max-width: 1200px) {
  #main .main-ph h1 img{ height:10em; }
  #main .ph.l { margin-left: auto; }
  #main .ph.txt-overlay.left{ transform: translateX(15%);}
}

@media screen and (max-width: 810px) {
  #main .ph,#main .ph-fr,#main .ph-fl{ margin:0 auto 5em; }
  #main .ph.full.flex figure{ width:50vw; }

  #main .ph.txt-overlay .overlay-txt { font-size: 13cqw; }
  #main section.sec2{ padding-top: 5em;}

}
@media screen and (max-width: 600px) {
  #main ul.price li.tit{ width:100%; text-align: center; }
  #main{ border-width:2em; }
  #main .main-mv{ max-width:none;  }
  #main .main-mv video.sp{ width:90vw; height:auto;  }
  #main h2{ font-size: 200%;}
  #main section.sec2{ padding-top: 0;}
  #sec3_ph6 figure{ clip-path: inset(20%); }
  #main .border1,#main .border2{ border-width:.6em; }
  #foot-nav { width:90%; margin:0 auto; padding-top:0; }

  #main .main-mv h1 { font-size: 450%; left: 10%;}

  #main .ph-fl.block{ display:block; }
  #main .ph-fl.block figure.d1{ width:60%; margin-left:5%; }
  #main .ph-fl.block figure.d2{ width:65%; margin:3em 0 3em 35%; }
  #main .ph-fl.block figure.d3{ width:70%; margin:0 auto; }
  #main .ph-fl.block figure.d4{ width:65%; margin:3em 0 3em 35%; }
  #main .ph-fl.block figure.d5{ width:60%; margin-left:40%; }
  #main .ph-fl.block figure.d6{ width:70%; margin:3em 0 3em 5%; }
  #main .ph-fl.block figure.d7{ width:60%; margin-left:0; }
  #main .ph-fl.block figure.d8{ width:70%; margin:3em 0 3em 30%; }
  #main .ph-fl.block figure.d9{ width:60%; margin:3em 0 3em 5%; }
  #main .ph-fl.block .d10{ width:80%; margin:6em 0 3em 10%; }

  #main .play .border1::before,#main .play .border2::before { border-width: 3px;}
  #main .border3:before,#main .border3 span:before { height: .6em;}
  #main .border3:after,#main .border3 span:after { width: .6em; }

  #main .ph-fl,#main .ph-fr { flex-direction: column; gap: 1em;}
  #main .sprow{ flex-direction: column-reverse !important;  gap: 2em;}
  #main .spleft{ align-items: flex-start !important;}
  #main .spright{ align-items: flex-end !important;}
  #main .ph-fr.right {
    justify-content: flex-end;
    align-items: center;
    margin: 10em auto;
}
  #main .ph-fl figure.type3 { margin-top: 0; }
  #main .ph-fl.play div:nth-child(2){ margin-left: auto; }
  #main .txt-area h2.l,#main .txt-area h2 {  font-size: 350%; }

  #sec2_ph1{ background: linear-gradient(to bottom, #fff 0%, #fff 50%, #cccece 60%, #cccece 100%) !important; }
#sec2_ph1 figure img{ object-fit: contain; }
#sec2_ph2 figure img{ object-fit: cover; }
  #sec1_ph9{ margin-bottom: 0 !important;}
  

  #sec3_ph3{ width: 80% !important;}
  #sec1_ph5{ width: 80% !important;}
  #sec1_ph67 .ph67-right ul.price{ position: static; }
  .sec2_ph8{ transform: scale(1.1);}
  


#main .w95{ width:95%; }
#main .w90{ width:90%; }
#main .w80{ width:80%; }
#main .w75{ width:75%; }
#main .w70{ width:80%; }
#main .w65{ width:75%; }
#main .w60{ width:70%; }
#main .w50{ width:70%; }
#main .w40{ width:70%; }


}