@charset "UTF-8";

body { margin: 0; }

.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 { --reveal-dur: 2s; }
html.js-anim .js-reveal { opacity: 0; transition: opacity var(--reveal-dur) cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.is-inview { opacity: 1; }
html.js-anim .js-reveal.-blur { filter: blur(2rem); transform: scale(1.01); transition: filter var(--reveal-dur) ease, opacity var(--reveal-dur) ease, transform var(--reveal-dur) ease; }
html.js-anim .js-reveal.-blur.is-inview { filter: blur(0); opacity: 1; transform: scale(1); }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .js-reveal.-blur { filter: none !important; transform: none !important; }
.is-noanim .rnd span { transition: none !important; opacity: 1 !important; }
.is-noanim .switch-img { transition: none !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) .js-reveal.-blur { filter: none !important; transform: none !important; }
  html:not(.is-forceanim) .rnd span { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

.feature { box-sizing: border-box; color: #777; margin: 0 auto; position: relative; width: 100%;

  font-family: "indivisible", sans-serif;
  font-weight: 500; font-style: normal;
  font-size: 2.4rem;
  letter-spacing: .02em;
  text-spacing-trim: space-all;
  line-break: strict;
  background: #fff; }
.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 a { color: inherit; text-decoration: none; }

@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:has(> img[src$=".jpg"]) { background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
  .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 ul { list-style: none; }

.feature .s { font-family: "snell-roundhand-lt-std", sans-serif; font-weight: 700; }

.feature .ttl, .feature .mv__ttl, .feature .mv__sub, .feature .look21__ttl, .feature .look21__sub,
.feature .look26__ttl, .feature .rnd, .feature .leftcont__ttl, .feature .leftcont__sub {
  color: #fff; white-space: nowrap;

  text-shadow: 0 0 .6rem rgba(255, 246, 185, .85), 0 0 1.6rem rgba(255, 234, 130, .55), 0 0 3rem rgba(255, 234, 130, .28); }

.feature .txt04, .feature .txt05, .feature .txt07 {
  text-shadow: 0 0 .6rem rgba(255, 232, 135, .93), 0 0 1.6rem rgba(255, 220, 95, .72), 0 0 3rem rgba(255, 220, 95, .42); }

.feature .txt06, .feature .txt12 { text-shadow: 0 0 .5rem rgba(255, 246, 200, .6), 0 0 1.2rem rgba(255, 236, 160, .3); }

.feature .rnd { text-shadow: 0 0 .5rem rgba(160, 228, 255, .8), 0 0 1.4rem rgba(160, 202, 234, .8), 0 0 2.6rem rgba(160, 202, 234, 0.4); }

.feature .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; position: relative; z-index: 0; }

.feature .frame-main__inner { overflow-x: clip; }

.feature :where(.frame-main__inner > div, .frame-main__inner section) { position: relative; }
.feature section { display: flow-root; }

.feature .ph { display: block; position: relative; }
.feature .ph img { width: 100%; }

.feature .mv__box { display: block; position: relative; }
.feature .look03 { margin-top: 0rem; width: 75rem; }
.feature .mv__ttl { position: absolute; top: 36.607rem; left: 0; right: 0; text-align: center; font-size: 10.8rem; line-height: 16.401rem; }
.feature .mv__ttl .s { font-size: 13.8rem; }
.feature .mv__sub { position: absolute; top: 52.742rem; left: 0; right: 0; text-align: center; font-size: 3.2rem; line-height: 3.478rem; }

.feature .band { position: absolute; left: 0; width: 100%; overflow-x: clip; pointer-events: none; }
.feature .band img { width: 82.2rem; max-width: none; margin-left: -3.6rem; }

.feature .band.-top { background: linear-gradient(rgba(246, 238, 215, 0) 1.2rem, #f6eed7 6rem); }
.feature .band.-mid { background: linear-gradient(#f6eed7 .3rem, #fff 6.3rem); }
.feature .band.-tail { background: linear-gradient(#fff .6rem, #f6eed7 6.6rem); }
.feature .band.-top { top: -6.6rem; height: 13.2rem; z-index: 1; }
.feature .band.-mid { top: 205.9rem; height: 13.2rem; z-index: 1; }
.feature .band.-tail { top: -6.6rem; height: 13.3rem; }

.feature .lines { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; }
.feature .line { position: absolute; left: 0; width: 100%; overflow-x: clip; z-index: 1; }
.feature :is(.asset01, .asset02, .asset03, .asset04, .look14, .look21, .look24, .look25, .look26) { z-index: 2; }
.feature .line__svg { display: block; position: relative; overflow: visible; }
.feature .line.-n01 { top: 14.423rem; height: 193.4rem; }
.feature .line.-n01 .line__svg { left: -22.378rem; width: 114.96rem; height: 193.4rem; }
.feature .line.-n02 { top: 210.799rem; height: 148.79rem; z-index: 2; }
.feature .line.-n02 .line__svg { left: -13.988rem; width: 105.46rem; height: 148.79rem; }
.feature .line.-n03 { top: 584.216rem; height: 178.23rem; }
.feature .line.-n03 .line__svg { left: -20.047rem; width: 117.66rem; height: 178.23rem; }
.feature .line.-n04 { top: 1079.423rem; height: 295.37rem; }
.feature .line.-n04 .line__svg { left: -18.958rem; width: 121.35rem; height: 295.37rem; }

.feature .switcher { position: relative; }
.feature .switcher .switch-img { display: block; transition: opacity 1.2s ease; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
.feature .switcher .switch-img:not(.is-current) { opacity: 0; pointer-events: none; }
.feature .switcher .switch-img.is-current { opacity: 1; }
.feature .switcher .switch-img img { width: 100%; height: 100%; object-fit: cover; }

.feature .ttl { font-size: 6.2rem; line-height: 13.592rem; z-index: 3; pointer-events: none; }
.feature .ttl .s { font-size: 6.6rem; }
.feature .ttl .s.-num { font-size: 11.4rem; }

.feature .ttl > span { position: relative; }
.feature .ttl .-t { top: -.8rem; }
.feature .ttl .-l { top: -.4rem; }
.feature .ttl .-e, .feature .ttl .-dot { top: .2rem; }

.feature .ttl { translate: .3rem -1.45rem; }

.feature .txt04, .feature .txt07 { translate: 0 -1.45rem; }
.feature .ttl .s.-num { top: .8rem; left: .3rem; }

.feature .mv__ttl .s, .feature .look21__ttl .s, .feature .look26__ttl .s { position: relative; }
.feature .mv__ttl .s { top: -1.4rem; }
.feature .mv__ttl .s:first-child { top: -1.2rem; }
.feature .look21__ttl .s:nth-child(1) { top: -.6rem; }
.feature .look21__ttl .s:nth-child(2) { top: -.9rem; }
.feature .look21__ttl .s:nth-child(3) { top: -1rem; }
.feature .look26__ttl .s { top: -.7rem; }
.feature .look21__ttl { translate: 0 -.4rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 2.4rem;
  margin-left: auto; margin-right: auto; font-size: 2.4rem; line-height: 1.75; color: #777; }

.feature .credit { position: relative; z-index: 4; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { color: #777; }

.feature .sec01::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 212.5rem; background: #f6eed7; z-index: -1; }
.feature .asset01 { margin-top: 12rem; margin-left: 3rem; width: 69rem; }
.feature .txt03 { position: absolute; top: 1.171rem; left: 4rem; }
.feature .asset02 { margin-top: 6rem; margin-left: 6rem; width: 63rem; }
.feature .credit01 { margin-top: 3.131rem; max-width: 41.4297rem; height: 4.2000rem; }

.feature .txt04 { margin-top: 19.972rem; padding-left: 27.057rem; position: relative; }
.feature .style2-img { margin-top: -0.143rem; }
.feature .credit02 { margin-top: 3.271rem; max-width: 66.9094rem; height: 4.2000rem; }

.feature .grp3 { margin-top: 11.185rem; position: relative; }
.feature .look13 { width: 45rem; z-index: 3; }
.feature .txt05 { position: absolute; top: 27.071rem; left: 50.453rem; }
.feature .look14 { background: #fff; margin-top:-18rem; margin-left: 16rem; width: 59rem; }
.feature .look15 { margin-top: 6.07rem; margin-left: 2rem; width: 71rem; }
.feature .credit03 { margin-top: 3.19rem; max-width: 67.0352rem; height: 8.4000rem; }

.feature .asset03 { margin-top: 11.337rem; width: 65rem; }
.feature .txt06 { position: absolute; top: 1.571rem; left: 3rem; }
.feature .look17 { margin-top: 6.103rem; margin-left: 6rem; width: 69rem; }
.feature .credit04 { margin-top: 3.181rem; max-width: 66.3164rem; height: 8.4000rem; }

.feature .txt07 { margin-top: 7.791rem; padding-left: 27.077rem; position: relative; }
.feature .asset04 { margin-top: -0.063rem; width: 75rem; }
.feature .credit05 { margin-top: 3.131rem; max-width: 57.6648rem; height: 12.6000rem; }

.feature .look18 { margin-top: 11.17rem; margin-left: 5rem; width: 65rem; }

.feature .rnd { position: absolute; font-size: 5.6rem; z-index: 2; transform: translateX(-50%); }

.feature .rnd span { position: relative; top: var(--y, 0); }
.feature .txt08 span:nth-child(1) { --y: .2rem; }
.feature .txt08 span:nth-child(2) { --y: -.8rem; }
.feature .txt08 span:nth-child(4) { --y: .4rem; }
.feature .txt08 span:nth-child(6) { --y: .8rem; }
.feature .txt08 span:nth-child(8) { --y: -.8rem; }
.feature .txt09 span:nth-child(1) { --y: .8rem; }
.feature .txt09 span:nth-child(2) { --y: -.2rem; }
.feature .txt09 span:nth-child(3) { --y: -.8rem; }
.feature .txt09 span:nth-child(4) { --y: .4rem; }
.feature .txt09 span:nth-child(6) { --y: -.2rem; }
.feature .txt09 span:nth-child(7) { --y: .2rem; }
.feature .txt09 span:nth-child(8) { --y: 1rem; }
.feature .txt09 span:nth-child(9) { --y: 1.6rem; }
.feature .txt09 span:nth-child(10) { --y: 1rem; }
.feature .txt09 span:nth-child(11) { --y: .2rem; }
.feature .txt09 span:nth-child(12) { --y: -.2rem; }
.feature .txt09 span:nth-child(13), .feature .txt09 span:nth-child(14) { --y: -1.2rem; }
.feature .txt08 { top: 6.273rem; left: 11.85rem; line-height: 7.687rem; }

.feature .txt09 { top: 71.352rem; left: 42.911rem; line-height: 8.887rem; }
html.js-anim .feature .rnd span { opacity: 0; transition: opacity 1s; }
html.js-anim .feature .rnd span.is-on { opacity: 1; }

.feature .look21 { margin-top: 23.906rem; margin-left: 2rem; width: 71rem; }
.feature .look21__ttl { position: absolute; top: 6.959rem; left: 0; right: 0; text-align: center; font-size: 8.4rem; line-height: 12.522rem; }
.feature .look21__ttl .s { font-size: 10.6rem; }
.feature .look21__sub { position: absolute; top: 19.839rem; left: 0; right: 0; text-align: center; font-size: 3rem; line-height: 3.261rem; }
.feature .credit06 { margin-top: 3.201rem; max-width: 25.2094rem; height: 4.2000rem; }

.feature .look23 { margin-top: 11.193rem; width: 75rem; }
.feature .txt12 { position: absolute; top: 2.371rem; left: 49.361rem; }
.feature .look24 { margin-top: 6.1rem; margin-left: 3rem; width: 51rem; }
.feature .look25 { margin-top: 6rem; margin-left: 9rem; width: 63rem; }
.feature .credit07 { margin-top: 3.131rem; max-width: 53.5000rem; height: 12.6000rem; }

.feature .look26__clip { width: 100%; overflow-x: clip; }
.feature .look26 { margin-top: 11.38rem; margin-left: -5rem; width: 85rem; }
.feature .look26 img { max-width: none; }
.feature .look26__ttl { position: absolute; top: 38.024rem; left: 0; right: 0; text-align: center; font-size: 5.8rem; line-height: 8.526rem; }
.feature .look26__ttl .s { font-size: 7.2rem; }
.feature .txt14 { margin-top: 10.531rem; text-align: center; font-size: 2.4rem; line-height: 1.75; color: #777; }

.feature .sec09 { padding-bottom: 10.86rem; }

.feature .bg-tail { position: absolute; left: 0; bottom: 0; width: 100%; height: 487.6rem; background: #f6eed7; z-index: -1; }

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

  html { font-size: 0.6666667vw; }

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

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

  .feature .frame { display: flex; align-items: stretch; justify-content: center; }
  .feature .frame-main { flex: 0 0 auto; width: 75rem; }

  .feature .band.-top { display: none; }

  .feature .frame-side { position: relative; flex: 1 1 0; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); }

  .feature .frame-side.-mv { flex: 1 1 0; min-width: 0; }
  .feature .frame-side.-mv .frame-side__inner { --rail-h: calc(100vh - var(--rail-top));
    height: var(--rail-h); width: 100%; margin-bottom: 0; }
  .feature .leftcont__box { display: block; position: relative; height: var(--rail-h); }

  html.js-anim .feature .leftcont__box.js-reveal.-blur:not(.is-inview) { filter: blur(calc(10 * var(--pcu))); }
  .feature .leftcont__thum { height: var(--rail-h); width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }

  .feature .leftcont__ttl { position: absolute; top: calc(var(--rail-h) * 0.40574); left: 0; right: 0; text-align: center;
    font-size: calc(84 * var(--pcu)); line-height: calc(125.22 * var(--pcu)); }
  .feature .leftcont__ttl .s { font-size: calc(106 * var(--pcu)); position: relative; top: calc(-10 * var(--pcu)); }
  .feature .leftcont__ttl .s:first-child { top: calc(-8 * var(--pcu)); }
  .feature .leftcont__sub { position: absolute; top: calc(var(--rail-h) * 0.56661); left: 0; right: 0; text-align: center;
    font-size: calc(22 * var(--pcu)); line-height: calc(23.91 * var(--pcu)); }
  .feature .leftcont__ttl, .feature .leftcont__sub { text-shadow: 0 0 calc(4 * var(--pcu)) rgba(255, 246, 170, .95), 0 0 calc(11 * var(--pcu)) rgba(255, 228, 110, .75), 0 0 calc(21 * var(--pcu)) rgba(255, 228, 110, .45); }
}

.feature img.ttl-img { position: absolute; left: 0; top: 0; max-width: none; height: auto; pointer-events: none; }
.feature .txt04, .feature .txt07 { height: 14.99rem; }
.feature .ttl-img.ttl-fv-sp { left: 2.7rem; top: -1.706rem; width: 69.5rem; }
.feature .ttl-img.ttl-style1 { left: -3.9rem; top: 0.981rem; width: 27.3rem; }
.feature .ttl-img.ttl-style2 { left: 23.2rem; top: 1.278rem; width: 28.4rem; }
.feature .ttl-img.ttl-style3 { left: -3.85rem; top: 1.081rem; width: 28.1rem; }
.feature .ttl-img.ttl-style4 { left: -3.3rem; top: 0.181rem; width: 28.1rem; }
.feature .ttl-img.ttl-style5 { left: 23.2rem; top: 1.178rem; width: 28.6rem; }
.feature .ttl-img.ttl-bag { left: 7.7rem; top: -1.556rem; width: 55.6rem; }
.feature .ttl-img.ttl-style6 { left: -3.859rem; top: -0.719rem; width: 29.2rem; }
.feature .ttl-img.ttl-check { left: 17.6rem; top: -1.822rem; width: 49.6rem; }

.feature .ttl-img.ttl-fv-pc { left: calc(72 * var(--pcu)); top: calc(-20.6 * var(--pcu)); width: calc(555 * var(--pcu)); }