@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.785714vw; }

html.js-anim .js-reveal { opacity: 0; transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
html.js-anim .js-reveal.is-inview { opacity: 1; }

html.js-anim .js-reveal.-up { transition: none; animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0s) both paused; }
html.js-anim .js-reveal.-up.is-inview { animation-play-state: running; }
@keyframes fadeup {
  0% { opacity: 0; transform: translateY(3rem); }
  80% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

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

.js-wipe.-fromLeft, .js-wipe.-fromRight { transition-duration: 1s; }
html.js-anim .js-wipe-box.is-inview > .js-wipe { clip-path: inset(0); }
html.js-anim .js-wipe.is-inview { clip-path: inset(0); }
.js-wipe-box { position: relative; }
.js-wipe-box > .js-wipe { display: block; }

.feature .bld__a, .feature .bld__b { transition: transform 1s cubic-bezier(0.33, 1, 0.68, 1); will-change: transform; }
html.js-anim .feature .bld__a { transform: translateX(-100%); }
html.js-anim .feature .bld__b { transform: translateX(100%); }
html.js-anim .feature .bld.is-inview .bld__a { transform: none; }
html.js-anim .feature .bld.is-inview .bld__b { transform: none; transition-delay: .8s; }

.is-noanim .js-reveal, .is-noanim .js-anime { animation: none !important; transition: none !important; opacity: 1 !important; }
.is-noanim .js-wipe { transition: none !important; clip-path: none !important; }
.is-noanim .feature .bld__a, .is-noanim .feature .bld__b { transition: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal, html:not(.is-forceanim) .js-anime { animation: none !important; transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) .js-wipe { transition: none !important; clip-path: none !important; }
  html:not(.is-forceanim) .feature .bld__a, html:not(.is-forceanim) .feature .bld__b { transition: none !important; transform: none !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

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

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, sans-serif;
  font-weight: 400; font-style: normal; font-size: 1.6rem; letter-spacing: 0;
  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, .feature .frame > .pc { 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 a:has(img) { display: block; }

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

.feature :where(.secA, .secB, .secC, .secD, .secE) > * { position: relative; }

.feature .bg-band-sheet { position: relative; z-index: 0; }
.feature .bg-band-sheet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: var(--band-top, 0);
  background: var(--band-bg, #F7F4EA);
  z-index: -1;
}

.feature .lead { text-align: center; font-size: 1.6rem; line-height: 2.13; }

.feature .logoset { position: relative; aspect-ratio: 291.65 / 139.5; }
.feature .logoset__pd { position: absolute; left: 0; top: 0; width: 100%; }
.feature .logoset__x { position: absolute; left: 46.494%; top: 44.158%; width: 8.263%; aspect-ratio: 1; }
.feature .logoset__x::before, .feature .logoset__x::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 141.42%; height: max(1px, 8.3%); background: #505050; transform: translate(-50%, -50%) rotate(45deg); }
.feature .logoset__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.feature .logoset__cf { position: absolute; left: 9.943%; top: 73.047%; width: 79.75%; }

.feature .win { display: block; position: relative; width: 100%; height: 100%; overflow: clip; }
.feature .win img { position: absolute; max-width: none; }

.feature .win.-beige { border-radius: 4.5rem 4.5rem 0 0; }
.feature .win.-navy { border-radius: 0 0 5rem 5rem; }
.feature .win.-beige::after, .feature .win.-navy::after { content: ""; position: absolute; inset: 0; z-index: 1;
  border: .3rem solid #B19D86; border-radius: inherit; pointer-events: none; }
.feature .win.-navy::after { border-color: #253088; }

.feature .win.-white { border: 1rem solid #fff; }

.feature a.win.-white { background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.feature .win.-oval, .feature .win.-circle { border-radius: 50%; }

.feature .movie { position: relative; width: 40rem; height: 71.111rem; margin-left: 8rem; }
.feature .movie__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature .snd { position: absolute; left: 2.355rem; bottom: .58rem; z-index: 1; width: 9.7rem; height: 3.2rem;
  display: flex; justify-content: space-between; align-items: center; }

.feature .snd__btn { --hit: 1rem; padding: var(--hit); margin: calc(var(--hit) * -1);
  font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 1.4rem; line-height: calc(32 / 14); letter-spacing: .08em;
  color: #fff; background: none; cursor: pointer; opacity: .5; }
.feature .snd__btn.is-current { opacity: 1; }

.feature .snd__btn { position: relative; }
.feature .snd__btn::before { content: ""; position: absolute; top: 50%; background: center / 100% 100% no-repeat; pointer-events: none; }
.feature .snd__btn[data-snd="on"]::before { left: calc(var(--hit) - 1.35rem); width: .708rem; height: 1.428rem; margin-top: -.714rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.08 14.28'%3E%3Cpath d='M.8 3.6a5 5 0 0 1 0 7.08M3.2.6a8.6 8.6 0 0 1 0 13.08' fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.feature .snd__btn[data-snd="off"]::before { left: calc(var(--hit) - 1.4rem); width: .99rem; height: .99rem; margin-top: -.495rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.9 9.9'%3E%3Cpath d='M.5.5l8.9 8.9M9.4.5L.5 9.4' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E"); }

.feature .car { height: 43.5rem; }
.feature .car .swiper-slide { width: 31.7rem; height: 43.5rem; }
.feature .card { display: block; position: relative; width: 32rem; height: 43.5rem; border-radius: 4.5rem 4.5rem 0 0; overflow: clip; }
.feature .card::after { content: ""; position: absolute; inset: 0; z-index: 1; border: .3rem solid #B19D86; border-radius: inherit; pointer-events: none; }
.feature .card.-navy::after { border-color: #253088; }
.feature .card img { position: absolute; max-width: none; }

.feature .card .-a82 { left: -1.37rem; top: 0; width: 34.74rem; }
.feature .card .-a81 { left: -1.37rem; top: -3.43rem; width: 37.483rem; }
.feature .card .-a101 { left: -1.37rem; top: 0; width: 34.74rem; }
.feature .card .-a100 { left: -1.37rem; top: -1.73rem; width: 36.083rem; }

.feature .js-slider { position: relative; overflow: hidden; 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; height: 100%; position: relative; transition-property: transform; }

.feature .bld { position: relative; height: 55.5rem; overflow: clip; }
.feature .bld__a, .feature .bld__b { position: absolute; inset: 0; }
.feature .bld__b { z-index: 1; }
.feature .bld img { position: absolute; max-width: none; }
.feature .bld .-towerbridge { left: 31.887rem; top: -1.91rem; width: 31.576rem; }
.feature .bld .-parliament  { left: .361rem; top: -1rem; width: 30.922rem; }
.feature .bld .-gherkin     { left: 48.5rem; top: 15.73rem; width: 13.351rem; }
.feature .bld .-column      { left: -.449rem; top: 16.06rem; width: 28.632rem; }
.feature .bld .-tree1       { left: 18.64rem; top: 18.49rem; width: 12.905rem; }
.feature .bld .-busfront    { left: 33.908rem; top: 19.01rem; width: 9.61rem; }
.feature .bld .-taxiside    { left: -8.232rem; top: 20.58rem; width: 15.731rem; border-radius: 4.4rem; }
.feature .bld .-tower       { left: -11.072rem; top: 31.57rem; width: 16.186rem; }
.feature .bld .-tree2       { left: 40.685rem; top: 34.16rem; width: 13.682rem; }
.feature .bld .-busside     { left: 18.583rem; top: 34.88rem; width: 15.375rem; }
.feature .bld .-taxifront   { left: 33.176rem; top: 41.43rem; width: 10.321rem; border-radius: 18.4rem; }
.feature .bld .-tree3       { left: 3.276rem; top: 41.73rem; width: 12.905rem; }
.feature .bld .-post        { left: 18.39rem; top: 46.56rem; width: 4.84rem; }

.feature .cpanel { position: relative; }
.feature .panel__bg { position: absolute; inset: 0; border-radius: 5rem 5rem 0 0; }
.feature .red .panel__bg { background: url(../img/asset-83.svg) center / 100% 100% no-repeat, #D92E2E; }
.feature .blue .panel__bg { background: url(../img/asset-95.svg) center / 100% 100% no-repeat, #253088; }
.feature .panel__ph { position: absolute; z-index: 1; }
.feature .panel__txt { position: absolute; left: 0; right: 0; z-index: 1; color: #fff; }
.feature .cpanel .credit { margin-top: 1.36rem; }

.feature .red__credit { max-width: 40.5063rem; height: 4.4rem; }
.feature .blue__credit { max-width: 40.5063rem; height: 4.4rem; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  column-gap: 1.4rem; line-height: 2.2rem; margin-left: auto; margin-right: auto; max-width: 37.2rem; }

.feature .credit .item { position: relative; font-size: 1.4rem; line-height: 2.2rem; white-space: nowrap; }
.feature .credit .link { font-size: 1.4rem; color: inherit; }
.feature .credit .item.-noline .link { text-decoration: none; }

.feature .fv { --fv-y: 0rem; position: relative; height: 79.3rem; overflow: clip; }
.feature .fv__photo { position: absolute; inset: 0; }
.feature .fv__photo img { position: absolute; left: -1.397rem; top: calc(-.7rem + var(--fv-y)); width: 63.995rem; max-width: none; }

.feature .fv__ttl { position: absolute; left: 2.5rem; top: calc(5.34rem + var(--fv-y)); width: 29.165rem; z-index: 1; }

.feature .fv__ttl > .js-wipe { --d: .2s; transition-duration: 1s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }

.feature .fv__rel { position: absolute; left: 52.5rem; top: calc(21.7rem + var(--fv-y)); width: 1.45rem; z-index: 1; }
.feature .fv__rel > .js-wipe { --d: 1.2s; }

.feature .body-rest { position: relative; display: flow-root; }
.feature .topmark-rail { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.feature .topmark { position: sticky; top: calc(var(--cms-header-h, 0px) + 3rem);
  margin-top: 32.4rem; margin-left: 52.5rem; width: 1.2rem; margin-bottom: 10rem; }
.feature .topmark__btn { display: block; pointer-events: auto; }
.feature .topmark__arrow { display: block; width: .93rem; height: 3.7rem; margin-left: .14rem; }

.feature .topmark__txt { display: block; margin-top: .3rem; writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap;
  font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 1.4rem; line-height: 1; letter-spacing: .08em; color: #000002; }

.feature .movie01 { margin-top: 7rem; }

.feature .secA { display: flow-root; --band-top: 7rem; }

.feature .secA__ill { position: absolute; left: 9.846rem; top: -4.48rem; width: 41.65rem; z-index: 1; }

.feature .secA__logo { margin-top: 54.128rem; margin-left: 20.5rem; width: 14.851rem; z-index: 2; }
.feature .secA__logo > .js-wipe { --d: .8s; }
.feature .secA__lead { margin-top: 2.856rem; color: #464646; }
.feature .bld01 { margin-top: 5.3rem; }

.feature .secA__ph { margin-top: 8rem; margin-left: 8rem; width: 40rem; height: 54.5rem; }
.feature .secA__ph img { left: -1.712rem; top: 0; width: 43.425rem; }
.feature .car01 { margin-top: 4.7rem; }
.feature .secA__txt { margin-top: 2.6rem; color: #253088; }
.feature .secA__credit { max-width: 40.5063rem; height: 4.4000rem; margin-top: 1.4rem; color: #253088; }

.feature .red { margin-top: 7.8rem; margin-left: 5.5rem; width: 45rem; height: 128.2rem; }
.feature .red .panel__ph { left: 5rem; width: 35rem; height: 44rem; --d: .2s; }
.feature .red .panel__ph.-top { top: 5.4rem; }
.feature .red .panel__ph.-top img { left: -.5rem; top: -.5rem; width: 34.6rem; }
.feature .red .panel__txt { top: 52.6rem; }
.feature .red .panel__ph.-bottom { top: 78.7rem; }
.feature .red .panel__ph.-bottom img { left: -1.086rem; top: -.5rem; width: 34.586rem; }
.feature .panel__ph > .js-wipe, .feature .panel__txt > .js-wipe { --d: .2s; }

.feature .cpanel .js-wipe { transition-duration: 1s; }

.feature .secB { display: flow-root; position: relative; z-index: 1; }

.feature .secB__line { position: absolute; left: 6.3rem; top: 22.5rem; width: 49.7rem; z-index: 1; }
.feature .secB__line > .js-wipe { --d: 1.6s; }
.feature .secB__line img { width: 100%; }
.feature .secB__logo { position: absolute; left: 13.149rem; top: 18.06rem; width: 14.851rem; z-index: 2; }
.feature .secB__logo > .js-wipe { --d: .8s; }

.feature .secB__ill { position: absolute; left: 24.28rem; top: 6rem; width: 24.54rem; height: 34.1rem; z-index: 3; }
.feature .secB__ill img { left: -3.8rem; top: -15.44rem; width: 32.029rem; }

.feature .secB__ph { margin-top: 37.8rem; height: 70rem; }
.feature .secB__ph img { left: -5.1rem; top: -13.5rem; width: 71.4rem; }
.feature .secB__txt { margin-top: 3.6rem; color: #D92E2E; }
.feature .secB__credit { max-width: 40.5063rem; height: 4.4000rem; margin-top: 1.4rem; color: #D92E2E; }

.feature .circ { margin-top: 7.8rem; height: 111.2rem; }
.feature .circ__a { position: absolute; left: 0; top: 0; width: 48rem; height: 48rem; }
.feature .circ__a img { left: 0; top: -4.13rem; width: 48rem; }
.feature .circ__b { position: absolute; left: 8rem; top: 49.8rem; width: 48rem; height: 61.4rem; --d: .4s; }

.feature .secB__ill, .feature .circ__line, .feature .circ__cut, .feature .secD__dog1, .feature .secD__dog2 { pointer-events: none; }
.feature .circ__c2 { position: absolute; left: 0; top: 13.4rem; width: 48rem; height: 48rem; }
.feature .circ__c2 img { left: -4.1rem; top: -17.2rem; width: 52.8rem; }
.feature .circ__cut { position: absolute; left: 12.5rem; top: 0; width: 18.1rem; height: 22.7rem; }
.feature .circ__cut img { left: -16.6rem; top: -3.8rem; width: 52.8rem; }
.feature .circ__line { position: absolute; left: 34.7rem; top: 38.97rem; width: 21.3rem; z-index: 1; }
.feature .circ__line > .js-wipe { --d: 1.2s; }
.feature .circ__line img { width: 100%; }
.feature .secB__txt2 { margin-top: 3.6rem; color: #253088; }
.feature .secB__credit2 { max-width: 40.5063rem; height: 4.4000rem; margin-top: 1.4rem; color: #253088; }

.feature .secC { display: flow-root; --band-top: 33.7rem; }

.feature .secC__line { position: absolute; left: 0; top: 18.8rem; width: 52.3rem; z-index: 1; }
.feature .secC__line > .js-wipe { --d: 1.6s; }
.feature .secC__line img { width: 100%; }

.feature .secC__ill { position: absolute; left: 6.537rem; top: -1.9rem; width: 32.3rem; z-index: 2; }
.feature .secC__logo { position: absolute; left: 30.885rem; top: 13.96rem; width: 14.851rem; z-index: 2; }
.feature .secC__logo > .js-wipe { --d: .8s; }
.feature .movie02 { margin-top: 40.7rem; }

.feature .blue { margin-top: 7.989rem; margin-left: 5.5rem; width: 45rem; height: 135.4rem; }
.feature .blue .panel__ph { left: 5.1rem; width: 34.7rem; height: 44.8rem; }
.feature .blue .panel__ph.-top { top: 7.1rem; }
.feature .blue .panel__ph.-top img { left: -2.5rem; top: -3.9rem; width: 38.7rem; }
.feature .blue .panel__txt { top: 56.2rem; }
.feature .blue .panel__ph.-bottom { top: 83.5rem; }
.feature .blue .panel__ph.-bottom img { left: -1.357rem; top: -.44rem; width: 35.324rem; }

.feature .secD { display: flow-root; position: relative; z-index: 1; }

.feature .secD__dog1 { position: absolute; left: 39.8rem; top: -3.2rem; width: 13.2rem; height: 21rem; overflow: clip; z-index: 2; }
.feature .secD__dog1 img { position: absolute; left: -14rem; top: -6.5rem; width: 45.2rem; max-width: none; }

.feature .secD__ph { margin-top: 0rem; height: 70rem; }
.feature .secD__ph img { left: -3.9rem; top: -3.933rem; width: 59.9rem; }
.feature .car02 { margin-top: 5rem; }

.feature .secD__dog2 { position: absolute; left: 14.8rem; top: 115rem; width: 13.2rem; height: 20rem; overflow: clip; z-index: 2; }
.feature .secD__dog2 img { position: absolute; left: -16rem; top: -7.1rem; width: 45rem; max-width: none; }
.feature .secD__txt { margin-top: 19.3rem; color: #253088; }
.feature .secD__credit { max-width: 40.5063rem; height: 4.4000rem; margin-top: 1.4rem; color: #253088; }
.feature .movie03 { margin-top: 7.8rem; }

.feature .secE { display: flow-root; --band-top: 14.589rem; padding-bottom: 9.7rem; }

.feature .secE__ill { position: absolute; left: 7.975rem; top: 7.999rem; width: 40.05rem; z-index: 1; }

.feature .secE__all { margin-top: 64.289rem; margin-left: 12.2rem; width: 31.689rem; z-index: 2; }
.feature .secE__all > .js-wipe { --d: .8s; }

.feature .secE__all img { width: 100%; }
.feature .secE__copy { margin-top: 1.911rem; text-align: center; font-size: 2rem; line-height: 1.2; color: #505050; }
.feature .bld02 { margin-top: 4.9rem; }

@media screen and (min-width: 751px) {
  html { font-size: 0.714286vw; }

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

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

  .feature .frame { display: flex; align-items: stretch; justify-content: center;
    width: calc(1120 * var(--pcu)); margin: 0 auto; background: #fff; }
  .feature .frame-main { flex: 0 0 auto; width: 56rem; }

  .feature .frame-side { position: relative; flex: 0 0 auto; width: calc(560 * var(--pcu)); overflow-y: clip; }
  .feature .frame-side__inner { position: sticky; top: var(--rail-top); width: 100%; margin-bottom: 0; }
  .feature .movie-rail { width: 100%; height: min(calc(995.56 * var(--pcu)), calc(100vh - var(--rail-top))); margin: 0; }

  .feature .movie-rail .snd { left: calc(23.55 * var(--pcu)); bottom: calc(5.76 * var(--pcu));
    width: calc(97 * var(--pcu)); height: calc(32 * var(--pcu)); }
  .feature .movie-rail .snd__btn { font-size: calc(14 * var(--pcu)); }

  .feature .fv { --fv-y: .7rem; height: 80rem; }

  .feature .secA { --band-top: 0rem; }

  .feature .secA__ill { top: -4.68rem; }
  .feature .secA__logo { margin-top: 53.94rem; }

  .feature .secE { padding-bottom: 7rem; }

  .feature .topmark { margin-top: 49.6rem; }
}