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.js-anim .js-reveal { opacity: 0; transform: translateY(10rem); transition: opacity 1.1s ease, transform 1.1s ease; }
html.js-anim .js-reveal.is-inview { opacity: 1; transform: none; }

html.js-anim .js-reveal.-flip { transform: none; transition: none; }
.feature .flip__media { position: relative; overflow: clip; }
.feature .flip__cover { position: absolute; inset: 0 -1% 0 0; background: var(--cover, #fffffd); transform-origin: right center;
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); pointer-events: none; z-index: 1; }
.feature .flip__media img { transition: scale 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .25s; }
html.js-anim .js-reveal.-flip .flip__media img { scale: 1.3; }
html.js-anim .js-reveal.-flip.is-inview .flip__media img { scale: 1; }
html.js-anim .js-reveal.-flip.is-inview .flip__cover { transform: scaleX(0); }
html:not(.js-anim) .flip__cover, .is-noanim .flip__cover { display: none; }
.is-noanim .js-reveal { transform: none !important; }
.is-noanim .flip__media img { transition: none !important; scale: 1 !important; }

.js-wipe { transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1) var(--d, 0s); }
.js-wipe.-fromLeft   { clip-path: inset(0 100% 0 0); }
.js-wipe.-fromRight  { clip-path: inset(0 0 0 100%); }
.js-wipe.-fromTop    { clip-path: inset(0 0 100% 0); }
.js-wipe.-fromBottom { clip-path: inset(100% 0 0 0); }

.js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
.js-wipe.is-inview   { clip-path: inset(0); }

.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }

.is-noanim .js-reveal, .is-noanim .js-anime { transition: none !important; opacity: 1 !important; }
.is-noanim .mv__box, .is-noanim .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: 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 { transform: none !important; }
  html:not(.is-forceanim) .flip__cover { display: none; }
  html:not(.is-forceanim) .flip__media img { transition: none !important; scale: 1 !important; }

  html:not(.is-forceanim) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .mv__box, html:not(.is-forceanim) .leftcont__box { transition: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

  html:not(.is-forceanim) { scroll-behavior: auto; }
}

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

  font-family: source-han-sans-japanese, "Yu Gothic", "游ゴシック", meiryo, メイリオ, sans-serif;
  font-weight: 400; font-style: normal;

  font-size: 2rem;

  text-spacing-trim: space-all;
  line-break: strict;
  background: #fffffd;  }
.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: #000; 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: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 .frame-main__inner { display: flow-root; width: 100%; margin: auto; background: #fff; }

.feature .frame-main__inner { background: #fffffd; }
.feature .sec { position: relative; display: flow-root; isolation: isolate; }
.feature .sec01 { background: #e4eef4; --cover: #e4eef4; }
.feature .sec02 { background: #fffffd; --cover: #fffffd; isolation: isolate; }
.feature .sec03 { background: #e4eef4; --cover: #e4eef4; isolation: isolate; }
.feature .sec04 { background: #fffffd; --cover: #fffffd; }

.feature .sec02::before, .feature .sec03::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  background-repeat: repeat; background-position: 0 0; background-size: 50rem; pointer-events: none; }

.feature .sec02::before { height: 234.5rem; background-image: url(../img/pattern01.png); opacity: .8; background-size: 49.5rem; background-position: 3.2rem 32.8rem; }
.feature .sec03::before { height: 393.3rem; background-image: url(../img/pattern02.jpg); background-size: 49.5rem; background-position: 3.2rem 23.7rem; }

.feature .js-rise { --rise-lift: 25svh; position: sticky; top: calc(var(--rise-top, -99999px) - var(--rise-lift)); }

.feature a.photo { display: block; background: #fff; }
.feature a.photo.-clear { background: none; }
.feature .photo img, .feature .flip__media img { width: 100%; }
.feature .logo { margin-left: auto; margin-right: auto; }
.feature .line { margin-left: auto; margin-right: auto; width: 67.4rem; }

.feature .vtext { position: absolute; writing-mode: vertical-rl; text-orientation: sideways; white-space: pre; z-index: 2; pointer-events: none;
  font-family: itc-avant-garde-gothic-pro, sans-serif; font-weight: 500; font-style: normal;
  font-size: 2.6rem; line-height: 4.394rem; letter-spacing: .05em; color: #5a5f66; }
.feature .vtext.-wl { font-size: 3.2rem; line-height: 4.416rem; color: #fffefa; }

.feature .lead-txt { text-align: center;
  font-size: 2.6rem; line-height: 5.85rem; letter-spacing: .15em; color: #5a5f66; font-feature-settings: "palt"; }

.feature .credit { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 2.2rem;
  font-family: itc-avant-garde-gothic-pro, sans-serif; font-weight: 300; font-style: normal;
  font-size: 2.2rem; line-height: 4.4rem; letter-spacing: .05em; color: #a7c8d1; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { color: inherit; }

.feature .credit .credit-break { flex-basis: 100%; height: 0; overflow: hidden; list-style: none; }
.feature .credit.-center { justify-content: center; margin-left: auto; margin-right: auto; }
.feature .credit.-right { justify-content: flex-end; }
.feature .credit.-white { color: #fffefa; }

.feature .credit.-line .item { border-bottom: .1rem solid; line-height: 2.1rem; padding-top: 1.3rem; }

.feature .asset01 { width: 27.096rem; margin-top: 10rem; }
.feature .asset02 { width: 4rem; margin-top: 4rem; }
.feature .asset03 { width: 47.1rem; margin-top: 4rem; }
.feature .look01 { margin-top: 8rem; }
.feature .txt03 { margin-top: 12.375rem; }

.feature .lead__more { max-height: 0; overflow: clip; transition: max-height .5s ease-in-out; }
.feature .lead__more.is-open { max-height: 150rem; }
.feature .lead__more-inner { padding-bottom: 1.5rem; }
.feature .lead__more .lead-txt { margin-top: 3.2rem; }
.feature .leadbtn { margin-top: 2.3rem; }
.feature .lead__btn { display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 15rem; height: 10.5rem; margin: 0 auto; background: none; cursor: pointer; color: #5a5f66;
  font-family: libre-bodoni, serif; font-weight: 400; font-style: normal; font-size: 4rem; line-height: 7rem; letter-spacing: .01em; }
.feature .lead__btn img { width: 5rem; }
.feature .lead__btn .-up, .feature .lead__btn .-close { display: none; }
.feature .lead__btn.is-open .-up, .feature .lead__btn.is-open .-close { display: block; }
.feature .lead__btn.is-open .-down, .feature .lead__btn.is-open .-more { display: none; }
.feature .asset05 { margin-top: 8rem; }
.feature .txt05 { margin-top: 5.9rem; text-align: center; font-size: 3.2rem; line-height: 7.2rem; letter-spacing: .15em; font-feature-settings: "palt"; }
.feature .txt06 { margin-top: -0.55rem;  text-align: center; font-family: libre-bodoni, serif; font-weight: 500;
  font-size: 6rem; line-height: 10.5rem; letter-spacing: .05em; }
.feature .txt07 { margin-top: -0.7rem; text-align: center; font-size: 2.8rem; line-height: 6.3rem; letter-spacing: .1em; }
.feature .asset06 { margin-top: 6.25rem; }

.feature .look02 { position: relative; margin-top: 15.9rem; width: 62rem; }
.feature .txt08 { top: 38.7rem; left: 63.636rem; }
.feature .box03 { margin-top: 8.1rem; margin-left: 13.5rem; width: 61.5rem; padding: 1.5rem 0 1.5rem 1.5rem; background: #5a5f66; }
.feature .credit01 { margin-top: 2.9rem; margin-left: 13.5rem; max-width: 51.8758rem; height: 8.8000rem; }

.feature .circle { position: relative; margin-top: 16.9rem; height: 67.5rem; overflow-x: clip; }
.feature .circle__item { position: absolute; top: 0; width: 54rem; }
.feature .look04 { left: -47.5rem; }
.feature .look05 { left: 10.5rem; }
.feature .look06 { left: 68.5rem; }
.feature .credit02 { position: absolute; top: 57rem; left: 0; right: 0; max-width: 21.1875rem; height: 4.4000rem; }
.feature .look07 { margin-top: 22rem; }

.feature .asset07 { width: 22.424rem; margin-top: 8rem; }
.feature .asset08 { width: 4rem; margin-top: 3.5rem; }
.feature .asset09 { width: 41.212rem; margin-top: 3.5rem; }
.feature .look08 { margin-top: 8rem; width: 69rem; }
.feature .look09 { margin-top: 3.1rem; margin-left: 8rem; width: 67rem; }
.feature .credit03 { margin-top: 3rem; margin-left: 8rem; max-width: 69.4133rem; height: 13.2000rem; }
.feature .look10 { margin-top: 20.9rem; }
.feature .look11 { margin-top: 12rem; margin-left: 5rem; width: 65rem; }
.feature .credit04 { margin-top: 3rem; max-width: 35.7500rem; height: 8.8000rem; }

.feature .frame12 { position: relative; margin-top: 15.4rem; height: 95.5rem; }

.feature .look13 { position: absolute; top: 0; left: 8.8rem; width: 63rem; z-index: 1; pointer-events: none; }
.feature .look12 { position: absolute; top: 5.5rem; left: 15rem; width: 60rem; }
.feature .look14 { margin-top: 6rem; width: 70rem; }
.feature .credit05 { margin-top: 3rem; margin-left: 4rem; max-width: 46.4547rem; height: 8.8000rem; }

.feature .cover16 { position: relative; margin-top: 18.9rem; }
.feature .look17 { position: absolute; top: 11.25rem; left: 7.5rem; width: 60rem; }
.feature .look18 { position: relative; margin-top: 12rem; margin-left: 12rem; width: 63rem; }
.feature .txt09 { top: -0.1rem; left: -6.332rem; }
.feature .look19 { margin-top: 3rem; width: 48rem; }
.feature .sw20 { margin-top: -14rem; margin-left: 5rem; width: 70rem; }
.feature .credit06 { margin-top: 2.9rem; margin-left: 5rem; max-width: 58.9703rem; height: 8.8000rem; }
.feature .look22 { margin-top: 20.9rem; }

.feature .switcher { position: relative; }
.feature .switcher .switch-img { transition: opacity 1.2s ease; }
.feature .switcher .switch-img + .switch-img { position: absolute; inset: 0; }
html.js-anim .switcher .switch-img:not(.is-current) { opacity: 0; pointer-events: none; }
html:not(.js-anim) .switcher .switch-img + .switch-img { display: none; }

.feature .asset10 { width: 22.424rem; margin-top: 8rem; }
.feature .asset11 { width: 4rem; margin-top: 3.5rem; }
.feature .asset12 { width: 41.212rem; margin-top: 3.5rem; }
.feature .sw23 { margin-top: 8rem; }
.feature .box25 { margin-top: 12.1rem; width: 65.5rem; padding: 1.5rem 1.5rem 1.5rem 0; background: #fffefa; }
.feature .credit07 { margin-top: 2.9rem; margin-left: 4rem; max-width: 42.0641rem; height: 13.2000rem; }
.feature .sw26 { margin-top: 18.9rem; margin-left: 7.5rem; width: 60rem; }
.feature .txt10 { top: 2.5rem; left: 54.495rem; }
.feature .txt11 { top: 68rem; left: 1.295rem; }
.feature .look28 { margin-top: 6rem; }
.feature .credit08 { margin-top: 3rem; max-width: 71.5133rem; height: 8.8000rem; }
.feature .frame30 { position: relative; margin-top: 18.928rem; height: 85.445rem; }
.feature .look29 { position: absolute; top: 0; left: 2.825rem; width: 69.394rem; }
.feature .look30 { position: absolute; top: 3.97rem; left: 6.5rem; width: 62rem; }
.feature .credit09 { position: absolute; top: 68.87rem; left: 0; right: 0; max-width: 28.8539rem; height: 8.8000rem; z-index: 2; }
.feature .sec03end { margin-top: 20.027rem; }

.feature .look31 { margin-top: 0rem; }

.feature .pair32 { position: relative; margin-top: 6rem; height: 90rem; overflow-x: clip; }
.feature .pair32__item { position: absolute; top: 0; width: 60rem; }
.feature .look32 { left: -42rem; }
.feature .look33 { left: 21rem; }
.feature .credit10 { margin-top: 2.9rem; margin-left: auto; margin-right: 4rem; max-width: 48.9727rem; height: 8.8000rem; }

.feature .box34 { position: relative; margin-top: 18.9rem; width: 62.5rem; }
.feature .box34__in { padding: 1.5rem 1.5rem 1.5rem 0; background: #5a5f66; }
.feature .txt12 { top: -0.1rem; left: 64.068rem; }
.feature .look35 { margin-top: 8rem; margin-left: 5rem; width: 70rem; }
.feature .look36 { margin-top: 12rem; margin-left: 10.5rem; width: 54rem; }
.feature .credit11 { margin-top: 2.9rem; max-width: 67.0203rem; height: 13.2000rem; }
.feature .look37 { position: relative; margin-top: 16.9rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit12 { position: absolute; top: 53rem; left: 0; right: 0; max-width: 44.3508rem; height: 8.8000rem; z-index: 2; }

.feature .descbox { position: relative; margin-top: 18rem; margin-left: 2.5rem; width: 70rem; height: 95.8rem; background: #bfd4db; }
.feature .asset13 { position: absolute; top: 12rem; left: 12.039rem; width: 45.922rem; }
.feature .txt13 { position: absolute; top: 28.175rem; left: 6.5rem; width: 57.39rem; text-align: justify;
  font-size: 2.6rem; line-height: 5.85rem; letter-spacing: .15em; color: #fffefa; font-feature-settings: "palt"; }

.feature .asset14 { margin-top: 18rem; margin-left: 5.5rem; width: 64rem; }
.feature .asset13 img, .feature .asset14 img { width: 100%; }
.feature .pageend { margin-top: 18rem; height: 0; }

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

  html { font-size: min(calc(100vw * 6.8 / 1400), 6.8px); }

  .feature .pc { display: block; }
  .feature .sp { display: none; }

  .feature .frame > .pc { display: contents; }

  .feature { --pcu: min(calc(100vw / 1400), 1px); --rail-top: 80px; background: #dae8ef; }

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

  .feature .frame-side__inner { position: sticky; top: var(--rail-top); height: calc(100vh - var(--rail-top));
    display: flex; align-items: center; justify-content: center;
    background: url(../img/pc/pc-pattern.png) 0 0 / calc(347 * var(--pcu)) repeat; }
  .feature .side__logo { width: calc(255.58 * var(--pcu)); }
  .feature .side__btn { display: block; width: calc(280 * var(--pcu)); }
  .feature .side__logo img, .feature .side__btn img { width: 100%; }
}