@charset "UTF-8";

body { margin: 0; }

.efs-system-notification { display: none !important; }

.l-container { width: 100%; }
.l-footer,.pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }
sup, sub { position: static; top: auto; }

html { scroll-behavior: smooth; font-size: 1.3333333vw; }

html.js-anim .js-reveal { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
html.js-anim .js-reveal.is-inview { opacity: 1; }
.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #3a0519; margin: 0 auto; position: relative; width: 100%;
  font-family: "pragmatica-1", "toppan-bunkyu-gothic-pr6n-1", sans-serif;
  font-weight: 400; font-style: normal;
  font-size: 2rem;
  text-spacing-trim: space-all;
  line-break: strict;
  background-color: #feebe9;
  transition: background-color .8s ease; }
.feature.is-bg-b { background-color: #f0eeea; }
.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: 50px; }
.feature h1, .feature h2, .feature h3, .feature h4, .feature h5, .feature h6,
.feature strong, .feature b { font-weight: inherit; }
.feature .pc { display: none; }

.feature .frame-side { display: none; }
.feature a { color: #3a0519; text-decoration: none; display: block; }
@media (hover: hover) {
  .feature a img, .feature a:not(:has(img:not([alt=""]))), .feature button { transition: opacity .3s; }
  .feature a:has(img:not([alt=""])):hover img { opacity: .7; }
  .feature a:not(:has(img:not([alt=""]))):hover, .feature button:hover { opacity: .7; text-decoration: none; }
}
.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }
.feature video { display: block; }
.feature ul { list-style: none; }

.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: transparent; }

.feature .frame-main__inner > *, .feature .sec-a > *, .feature .sec-b > *, .feature .sec-c > * { position: relative; }

.feature .ttl01 { margin-top: 4.43rem; }
.feature .mv__ttl { width: 32.7548rem; margin-left: 20.72rem; }
.feature .mv__ttl img { width: 100%; }
.feature .fvmovie { margin-top: 1.845rem; }
.feature .mv__movie { position: relative; width: 70.2rem; height: 124.8rem; margin-left: 2.4rem; }
.feature .mv__video { width: 100%; height: 100%; object-fit: cover; background: #ddd; }

.feature .mv__movie::after { content: ""; position: absolute; inset: 0; border: .2rem solid #3a0519; pointer-events: none; }
.feature .logo01 { margin-top: 6rem; }
.feature .mv__logo { width: 62.8638rem; margin-left: 6.418rem; }
.feature .mv__logo img { width: 100%; }
.feature .txt02 { margin-top: 8.8rem; }
.feature .mv__txt, .feature .body-txt { text-align: center; font-size: 2.4rem; line-height: 4.8rem; letter-spacing: .05em; }

.feature .-svg { display: flow-root; }
.feature .-svg img { width: var(--w); margin: var(--t) 0 0 var(--l); }
.feature .txt02.-svg { height: 33.6rem; --w: 60.1922rem; --t: 1.275rem; --l: 7.304rem; }
.feature .txt03.-svg { height: 19.2rem; --w: 53.6402rem; --t: 1.295rem; --l: 10.53rem; }
.feature .txt04.-svg { height: 38.4rem; --w: 48.6244rem; --t: 1.29rem; --l: 13.188rem; }

.feature .look img { width: 100%; }
.feature .look07 { margin-top: 10.7rem; }
.feature .look07 { width: 75rem; }

.feature .icons { margin-top: 10.1rem; }
.feature .icons { width: 39rem; height: 11.8rem; margin-left: 18rem; }
.feature .icons img { position: absolute; width: 10rem; }
.feature .icons__warm { left: 0; top: .9rem; }
.feature .icons__water { left: 14.5rem; top: 0; }
.feature .icons__wind { left: 29rem; top: 1.65rem; }
.feature .txt03 { margin-top: 5.3rem; }

.feature .sl1 { margin-top: 8.8rem; }
.feature .sl1 { width: 66rem; }
.feature .sl1__slider img { width: 100%; }
.feature .sl1__slider .swiper-slide { transition-property: opacity; transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }

.feature .sl1__slider .swiper-slide a { background: #fff; }
.feature .sl1__bars { position: absolute; top: 2rem; left: 51.8rem; z-index: 1; display: flex; }
.feature .sl1__bar { position: relative; width: 5.5rem; height: .3rem; background: rgba(58, 5, 25, .3); border-radius: 0; opacity: 1; }
.feature .sl1__bar + .sl1__bar { margin-left: 1.2rem; }
.feature .sl1__bar::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #3a0519; }
.feature .sl1__bar.is-active::before { animation: sl1-bar var(--bar-dur, 3.5s) linear forwards; }
@keyframes sl1-bar { from { width: 0; } to { width: 100%; } }
.is-noanim .feature .sl1__bar.is-active::before { animation: none; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .sl1__bar.is-active::before { animation: none; width: 100%; }
}

.feature .credit { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 2rem; line-height: 4.6rem; }
.feature .credit .item { display: inline-block; position: relative; margin-right: 0; border-bottom: none; line-height: 4.6rem; padding-bottom: 0; color: #3a0519;
  font-family: "pragmatica-1", sans-serif; font-weight: 300; font-style: normal;
  white-space: nowrap; }
.feature .credit .link { font-size: 2.2rem; color: #3a0519; font-family: "pragmatica-1", sans-serif; font-weight: 300; font-style: normal; letter-spacing: .045em; }
.feature .credit .price { margin-left: .25em; }
.feature .credit .item.-mr0, .feature .credit .item:last-child { margin-right: 0; }
.feature .credit .item.-noline { border-bottom: none; }
.feature .credit01 { margin-top: 2.901rem; max-width: 45.8234rem; height: 13.8000rem; }
.feature .credit01 { margin-left: 3rem; justify-content: flex-start; }
.feature .credit02 { margin-top: 2.401rem; max-width: 59.6656rem; height: 13.8000rem; }
.feature .credit02 { margin-left: auto; margin-right: auto; justify-content: center; }
.feature .credit03 { margin-top: 2.901rem; max-width: 57.95rem; height: 18.4000rem; }
.feature .credit03 { margin-left: 15rem; justify-content: flex-start; }
.feature .credit04 { margin-top: 2.801rem; max-width: 65.1719rem; height: 18.4000rem; }
.feature .credit04 { margin-left: auto; margin-right: auto; justify-content: center; }

.feature .pin1 { margin-top: 14.901rem; }
.feature .pin1 { width: 70.5rem; margin-left: 2.25rem; display: flow-root; }
.feature .stack { --header-h: 51px; --under-h: 94rem; --v: 86rem;
  --stack-h: var(--under-h);
  --stack-top: calc((100svh + var(--header-h)) / 2 - var(--stack-h) / 2);
  --pin: calc(var(--stack-top) + var(--under-h));
  --runway: calc(100svh - var(--pin) + var(--v)); }
.feature .stack-stick { position: sticky; top: calc(var(--pin) - var(--stick-h, 99999px)); }
.feature .stack-runway { height: 0; }
.has-stack-js .feature .stack-runway { height: var(--runway); }
.is-noanim .feature .stack-runway { height: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .stack-runway { height: 0 !important; }
}
.feature .pin__under img { width: 100%; }
.feature .pin__over { position: relative; z-index: 1; width: 58.5rem; margin: -86rem 0 8rem 6rem; }
.feature .pin__over img { width: 100%; }

.feature .pin__overlink { background: #fff; }

.feature .pin__over::after { content: ""; position: absolute; inset: 0; border: .2rem solid #3a0519; pointer-events: none; }

.is-noanim .feature .pin__over { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .pin__over { visibility: hidden; }
}

.feature .look15 { margin-top: 7.94rem; }
.feature .look15 { width: 10rem; margin-left: auto; margin-right: auto; }
.feature .look15 img { width: 100%; }
.feature .txt04 { margin-top: 5.3rem; }

.feature .sec-b { position: relative; z-index: 0; }
.feature .sec-b::before { content: ""; position: absolute; left: 0; right: 0; top: var(--band-top, -8rem); bottom: var(--band-bottom, -14.9rem); background: #f0eeea; z-index: -1; transition: opacity .8s ease; }

.has-bg-switch .feature .sec-b::before { opacity: 0; }
.feature .look16 { margin-top: 23.001rem; }
.feature .look16 { width: 69rem; }
.feature .look17 { margin-top: 2.1rem; }
.feature .look17 { width: 60rem; margin-left: 15rem; }
.feature .frame19 { margin-top: 14.901rem; }
.feature .frame19 { width: 72rem; margin-left: 1.5rem; }

.feature .frame19::after { content: ""; position: absolute; inset: 0; border: .2rem solid #3a0519; pointer-events: none; }

.feature .sl2 { margin-top: 8rem; }
.feature .sl2 { width: 75rem; }

.feature .js-slider { position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
:where(.feature .js-slider) .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; box-sizing: content-box; transition-property: transform; }
:where(.feature .js-slider) .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; }
.feature .sl2 .sl2__slide { width: 52.5rem; margin-right: 2rem; }
.feature .sl2 .sl2__slide img { width: 100%; }

.feature .btnall { margin-top: 29.901rem; }
.feature .btnall { width: 56rem; height: 11.2rem; margin-left: auto; margin-right: auto; }
.feature .btnall__link { position: relative; width: 100%; height: 100%; background: #3a0519; }

.feature .btnall__txt { position: absolute; left: 7.3rem; top: 4.2rem; width: 41.4855rem; }
.feature .txt06 { margin-top: 9.1rem; }
.feature .staff { text-align: center; font-size: 2.4rem; line-height: 4.2rem; letter-spacing: .045em; font-weight: 300; }

.feature .staff__dash:first-child { margin-right: .2em; }
.feature .staff__dash:last-of-type { margin-left: .2em; }

.feature .sec-c { padding-bottom: 14.3rem; }

@media screen and (min-width: 751px) {

  html { font-size: min(0.4380953vw, 6.1333343px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }
  .feature .frame > .pc { display: contents; }

  .feature {
             --pcu: 0.0714286vw;
             --rail-top: 80px;

             --u: calc((100vh - var(--rail-top)) / 896); }

  @media (orientation: portrait) { .feature { --u: var(--pcu); } }
  .feature .stack { --header-h: 80px; }

  .feature .frame { display: flex; align-items: stretch; justify-content: flex-start; }

  .feature .frame-main { flex: 0 0 auto; width: 75rem; margin-left: auto; margin-right: auto; }
  .feature .frame-side { display: block; position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); margin-bottom: calc(80 * var(--pcu)); }

  .feature .frame-side.-mv { flex: 0 0 auto; width: 50%; }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - var(--rail-top));
    height: var(--rail-h); width: 100%; margin-bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; }

  .feature .pcfv__ttl { margin-left: calc(-5 * var(--u)); }
  .feature .pcfv__ttl img { height: calc(10.304 * var(--u)); width: auto; display: block; }
  .feature .pcfv__movie { position: relative; width: calc(420 * var(--u)); height: calc(746.67 * var(--u)); margin-top: calc(10.49 * var(--u)); }
  .feature .pcfv__video { width: 100%; height: 100%; object-fit: cover; background: #ddd; }

  .feature .pcfv__movie::after { content: ""; position: absolute; inset: 0; border: calc(1.1 * var(--u)) solid #3a0519; pointer-events: none; }

  .feature .pcfv__logo { margin-top: calc(35.14 * var(--u)); margin-left: calc(4 * var(--u)); margin-bottom: calc(5.6 * var(--u)); }
  .feature .pcfv__logo img { height: calc(34.69 * var(--u)); width: auto; display: block; }
}