@charset "UTF-8";
#Billboard {position: relative;background: transparent url("../img/index/slide_01.webp") no-repeat 50% / cover;}
#Billboard .swiper-button-next,
#Billboard .swiper-button-prev {margin: 0;width: 3em;height: 3em;background-size: 30% auto;background-position: 50%;}
#Billboard .swiper-button-prev,
#Billboard .swiper-container-rtl .swiper-button-next {left:0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
#Billboard .swiper-button-next,
#Billboard .swiper-container-rtl .swiper-button-prev {right:0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}
/*
#Billboard .swiper-slide {overflow: hidden;}
#Billboard .swiper-slide img {transform: scale(1) rotate(0deg);filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: filter transform;}
#Billboard .swiper-slide-active img,
#Billboard .swiper-slide-duplicate-active img,
#Billboard .swiper-slide-prev img {filter: contrast(1) brightness(1) grayscale(0);transform: scale(1.05) rotate(1deg);transition: filter var(--easing) 2000ms, transform var(--easing) 10000ms;}
#Billboard .swiper-slide.scene-01::before {content: "";position: absolute;top: 5em;bottom: 0;left: 0;right: 0;background: transparent url("../img/common/logo_01.svg") no-repeat 50% / auto 6em;z-index: 2;mix-blend-mode: soft-light;}
#Billboard .swiper-slide.scene-01::after {content: "";position: absolute;top: 5em;bottom: 0;left: 0;right: 0;background: transparent url("../img/common/logo_01.svg") no-repeat 50% / auto 6em;z-index: 3;opacity: 0.6;}
*/
#Billboard .swiper-slide .typeWriter {position: absolute;bottom: calc(50% - 1.25em);left: 0;right: 0;z-index: 2;text-align: center;font-size: 300%;font-family: var(--serif);white-space: nowrap;letter-spacing: 0.15em;color: #fff;transition: letter-spacing var(--easing) 10000ms;}
#Billboard .swiper-slide.scene-01 .typeWriter > span:nth-last-of-type(2) {font-size: 175%;line-height: 1;}
#Billboard .swiper-slide-active .typeWriter,
#Billboard .swiper-slide-duplicate-active .typeWriter,
#Billboard .swiper-slide-prev .typeWriter {letter-spacing: 0.25em;}
#Billboard .swiper-slide-active .typeWriter > span {opacity: 1;}
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .merit {position: relative;z-index: 2;background: transparent url("../img/index/bg_01.webp") no-repeat 50% / cover;}

#Main .fit-content .panel .ttl-style-01 {margin-bottom: 1em;text-align: center;font-size: 150%;font-family: var(--serif);white-space: nowrap;color: #fff;}
#Main .fit-content .panel .ttl-style-01 span {display: block;margin-bottom: 0.5em;background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 68%) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 400%;font-weight: 400;font-family: var(--garamond);line-height: 1;letter-spacing: 0.1em;}
#Main .fit-content .panel .ttl-style-01,
#Main .fit-content .panel .lead {opacity: 0;transform: translateY(30px);transition: opacity 1.8s 1s ease, transform 1.8s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
#Main .fit-content .panel .lead {max-width: 46em;margin: 0 auto;font-size: 93.75%;color: #3a3533;}
#Main .fit-content .panel .more {opacity: 0;transform: translateY(30px);transition: opacity 1.8s 1s ease, transform 1.8s 1s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
#Main .fit-content .panel .more a {position: relative;max-width: 14em;margin: 3em auto 0;padding: 1em;border: 1px solid #fff;border-radius: 3em;text-align: center;line-height: 1;font-family: var(--serif);}
#Main .fit-content .panel .more a::after {content: "";position: absolute;bottom: 50%;right: 1em;width: 2em;height: 50%;background: transparent url("../img/common/icon_arrow.svg") no-repeat 100% 100% / contain;filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(48deg) brightness(108%) contrast(100%);}

#Main .fit-content .panel.staging .ttl-style-01,
#Main .fit-content .panel.staging .lead,
#Main .fit-content .panel.staging .more {opacity: 1;transform: translateY(0);}

#Main .block-index-01 .panel[data-panel="01"] .ttl-style-01 {color: #67473d;}
#Main .block-index-01 .panel[data-panel="01"] .ttl-style-01 span {-webkit-text-fill-color: #928179;margin-bottom: -0.5em;opacity: 0.18;}
#Main .block-index-01 .panel[data-panel="01"] .more a {background-color: rgb(255 255 255 / 60%);color: #a3948f;}
#Main .block-index-01 .panel[data-panel="01"] .more a:after {filter: invert(67%) sepia(6%) saturate(626%) hue-rotate(329deg) brightness(89%) contrast(86%);}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .merit figure {max-width: 1000px;width: calc(100% - 4em);margin: 0 auto;padding: 1.5em 0;}

  #Main .fit-content {position: relative;width: 100%;overflow: visible;}
  #Main .fit-content .panels {position: fixed;top: 0;left: 0;width: 100%;overflow: hidden;transform: translateY(0);will-change: transform;}
  #Main .fit-content .panel {position: relative;width: 100%;height: 100vh;padding-bottom: 100vh;will-change: transform;transition: transform 0s;}
  #Main .fit-content .panel figure img {min-height: 100vh;object-position: 50% 100%;object-fit: cover;}
  #Main .fit-content .panel footer {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;padding: 0 2em;}
  #Main .fit-content .panel .container {width: 100%!important;height: 100%;max-width: 100%!important;padding: 0!important;position: relative;display: flex;flex-direction: column;}
  #Main .block-index-01 .panel[data-panel="04"] figure {position: relative;}
  #Main .block-index-01 .panel[data-panel="04"] figure::before {content: "";position: absolute;top: 100%;right: 0;left: 50%;bottom: 0;background-color: #ddd8d6;z-index: 2;mix-blend-mode: hard-light;transition: top var(--easing) 600ms;}
  #Main .block-index-01 .panel[data-panel="04"] footer {left: 75%;}
  #Main .block-index-01 .panel[data-panel="04"] .ttl-style-01 {text-align: left;color: #67473d;}
  #Main .block-index-01 .panel[data-panel="04"] .ttl-style-01 span {background: linear-gradient(0deg, #906355 0%, #3e2c27 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
  #Main .block-index-01 .panel[data-panel="04"] .more a {background-color: #fff;border: 1px solid #a3948f;margin: 3em 0 0;color: #a3948f;}
  #Main .block-index-01 .panel[data-panel="04"] .more a:after {filter: invert(67%) sepia(6%) saturate(626%) hue-rotate(329deg) brightness(89%) contrast(86%);}
  #Main .block-index-01 .panel[data-panel="04"].staging figure::before {top: 0;}
  #Main .block-index-01 .panel[data-panel="05"] figure {position: relative;}
  #Main .block-index-01 .panel[data-panel="05"] figure::before {content: "";position: absolute;top: 100%;right: 50%;left: 0;bottom: 0;background-color: whitesmoke;z-index: 2;mix-blend-mode: hard-light;transition: top var(--easing) 600ms;}
  #Main .block-index-01 .panel[data-panel="05"] footer {left: 25%;}
  #Main .block-index-01 .panel[data-panel="05"] .ttl-style-01 {text-align: left;color: #67473d;}
  #Main .block-index-01 .panel[data-panel="05"] .ttl-style-01 span {background: linear-gradient(0deg, #906355 0%, #3e2c27 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
  #Main .block-index-01 .panel[data-panel="05"] .more a {background-color: #fff;border: 1px solid #a3948f;margin: 3em 0 0;color: #a3948f;}
  #Main .block-index-01 .panel[data-panel="05"] .more a:after {filter: invert(67%) sepia(6%) saturate(626%) hue-rotate(329deg) brightness(89%) contrast(86%);}
  #Main .block-index-01 .panel[data-panel="05"].staging figure::before {top: 0;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  #Main .block-index-01 .panel[data-panel="04"] footer {left: 50%;}
  #Main .block-index-01 .panel[data-panel="04"] figure::before {left: 0;}
  #Main .block-index-01 .panel[data-panel="04"] .ttl-style-01 {text-align: center;}
  #Main .block-index-01 .panel[data-panel="04"] .more a {margin: 3em auto 0;}
  #Main .block-index-01 .panel[data-panel="05"] footer {left: 50%;}
  #Main .block-index-01 .panel[data-panel="05"] figure::before {background-color: gainsboro;mix-blend-mode: screen;right: 0;}
  #Main .block-index-01 .panel[data-panel="05"] .ttl-style-01 {text-align: center;}
  #Main .block-index-01 .panel[data-panel="05"] .more a {margin: 3em auto 0;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  html,body {overflow-x: hidden;}

  #Billboard .swiper-slide img {object-fit: cover;height: 100dvh;}
  #Billboard .swiper-slide .typeWriter {bottom: 50%;right: inherit;left: 50%;transform: translate(-50%, 50%);font-size: 175%;letter-spacing: 0;}
  #Billboard .swiper-slide-active .typeWriter,
  #Billboard .swiper-slide-duplicate-active .typeWriter,
  #Billboard .swiper-slide-prev .typeWriter {letter-spacing: 0.1em;}
  /*
  #Billboard .swiper-slide.scene-01::before,
  #Billboard .swiper-slide.scene-01::after {background-size: auto 3em;}
  */

  #Main .fit-content {position: relative;height: auto!important;}
  #Main .fit-content .panels,
  #Main .fit-content .panel {transform: translateY(0)!important;}
  #Main .fit-content .panel figure {position: absolute;top: 0;bottom: 0;}
  #Main .fit-content .panel figure > div {height: 100%;}
  #Main .fit-content .panel figure > div img {object-fit: cover;height: 100%;mix-blend-mode: multiply;}
  #Main .fit-content .panel footer {padding: 4em 1.5em;}
  #Main .fit-content .panel .ttl-style-01 {margin-bottom: 2em;font-size: 125%;}
  #Main .fit-content .panel .ttl-style-01 span {margin-bottom: 0.75em;font-size: 200%;}
  #Main .fit-content .panel .lead {font-size: 93.75%;}
  #Main .fit-content .panel .container {position: relative;min-height: 100vh;display: flex;align-items: center;justify-content: center;}

  #Main .block-index-01 .panel[data-panel="04"] figure,
  #Main .block-index-01 .panel[data-panel="05"] figure {background-color: #888;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}