@charset "UTF-8";

body { margin: 0; }
.l-container { width: 100%; }
.l-footer, .pc-footer { margin: 0; padding: 0; }
.l-container::after { content: ""; }

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

.feature { --rv-ease: cubic-bezier(.33, 1, .68, 1); --rv-step: .4s;

  --pop-ease: cubic-bezier(.19, 1, .22, 1.1); --pop-step: .06s; --pop-rise: 50%; }
html.js-anim .feature .js-reveal { --dly: calc(var(--d, 0) * var(--rv-step)); }

html.js-anim .feature .ani-fade-up { translate: 0 1.5rem; opacity: 0;
  transition: translate .6s var(--rv-ease) var(--dly), opacity .6s var(--rv-ease) var(--dly); }
html.js-anim .feature .ani-fade-up.is-inview { translate: 0; opacity: 1; }

html.js-anim .feature .ani-clip-r { --rv-clip: inset(0 100% 0 0); }
html.js-anim .feature .ani-clip-l { --rv-clip: inset(0 0 0 100%); }
html.js-anim .feature .ani-clip-t { --rv-clip: inset(100% 0 0 0); }
html.js-anim .feature .ani-clip-b { --rv-clip: inset(0 0 100% 0); }
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b) > :is(img, .rvIn),
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b) > a > img,
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b)::before {
  clip-path: var(--rv-clip); transition: clip-path 1s var(--rv-ease) var(--dly); }
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b).is-inview > :is(img, .rvIn),
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b).is-inview > a > img,
html.js-anim .feature :is(.ani-clip-r, .ani-clip-l, .ani-clip-t, .ani-clip-b).is-inview::before {
  clip-path: inset(0); }

html.js-anim .feature .ani-pop path { opacity: 0; translate: 0 var(--pop-rise);
  transition: opacity .7s var(--pop-ease) calc(var(--index, 0) * var(--pop-step)),
              translate .7s var(--pop-ease) calc(var(--index, 0) * var(--pop-step)); }
html.js-anim .feature .ani-pop.is-inview path { opacity: 1; translate: 0; }

html.js-anim .feature .mint__Plane path {
  transition-delay: calc(var(--d, 0) * var(--rv-step) + .6s); }

.feature .ani-pop .i0 { --index: 0; }
.feature .ani-pop .i1 { --index: 1; }
.feature .ani-pop .i2 { --index: 2; }
.feature .ani-pop .i3 { --index: 3; }
.feature .ani-pop .i4 { --index: 4; }
.feature .ani-pop .i5 { --index: 5; }
.feature .ani-pop .i6 { --index: 6; }
.feature .ani-pop .i7 { --index: 7; }
.feature .ani-pop .i8 { --index: 8; }
.feature .ani-pop .i9 { --index: 9; }
.feature .ani-pop .i10 { --index: 10; }
.feature .ani-pop .i11 { --index: 11; }
.feature .ani-pop .i12 { --index: 12; }
.feature .ani-pop .i13 { --index: 13; }
.feature .ani-pop .i14 { --index: 14; }
.feature .ani-pop .i15 { --index: 15; }
.feature .ani-pop .i16 { --index: 16; }
.feature .ani-pop .i17 { --index: 17; }
.feature .ani-pop .i18 { --index: 18; }
.feature .ani-pop .i19 { --index: 19; }
.feature .ani-pop .i20 { --index: 20; }
.feature .ani-pop .i21 { --index: 21; }
.feature .ani-pop .i22 { --index: 22; }
.feature .ani-pop .i23 { --index: 23; }
.feature .ani-pop .i24 { --index: 24; }
.feature .ani-pop .i25 { --index: 25; }
.feature .ani-pop .i26 { --index: 26; }
.feature .ani-pop .i27 { --index: 27; }
.feature .ani-pop .i28 { --index: 28; }
.feature .ani-pop .i29 { --index: 29; }
.feature .ani-pop .i30 { --index: 30; }
.feature .ani-pop .i31 { --index: 31; }
.feature .ani-pop .i32 { --index: 32; }
.feature .ani-pop .i33 { --index: 33; }

.feature .rvIn { display: block; }
.feature :is(.mint__Fly, .mq) > .rvIn { position: absolute; inset: 0; }

.feature .fv__Logo.-newera { --d: 1; }
.feature .fv__Logo.-celford { --d: 2; }
.feature .mint__Ttl { --d: 1; }
.feature .mint__Ttl2 { --d: 2; }
.feature .mint__Copy, .feature .mint__Lead { --d: 3; }
.feature .mint__Fly { --d: 4; }
.feature .mint__Globe { --d: 5; }

.feature .lookttl__Line:nth-child(1) { --d: 1; }
.feature .lookttl__Line:nth-child(2) { --d: 2; }
.feature .lookttl__Line:nth-child(3) { --d: 3; }
.feature .lookttl__Lead { --d: 4; }

.feature .thumbs { --rv-step: .3s; }
.feature .thumbs .thumb:nth-child(2) { --d: 1; }
.feature .thumbs .thumb:nth-child(3) { --d: 2; }

.is-noanim .feature .js-reveal { transition: none !important; opacity: 1 !important;
  clip-path: none !important; translate: none !important; }
.is-noanim .feature .js-reveal :is(img, .rvIn, path),
.is-noanim .feature .js-reveal::before { transition: none !important; clip-path: none !important;
  opacity: 1 !important; translate: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .feature .js-reveal { transition: none !important; opacity: 1 !important;
    clip-path: none !important; translate: none !important; }
  html:not(.is-forceanim) .feature .js-reveal :is(img, .rvIn, path),
  html:not(.is-forceanim) .feature .js-reveal::before { transition: none !important; clip-path: none !important;
    opacity: 1 !important; translate: none !important; }
  html:not(.is-forceanim) .feature .railttl__Item { transition: none !important; }
}

.feature { box-sizing: border-box; color: #000002; margin: 0 auto; overflow: clip; position: relative; width: 100%;
  font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal;

  background: #DFF4F4;

  --header-h: var(--cms-header-h, 80px);
  --pcu: 0.0714286vw;  }

.feature * { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; scroll-margin-top: var(--header-h); }
.feature .sp { display: none; }
.feature a { color: #000002; text-decoration: none; }
.feature ul { list-style: none; }

.feature img { display: block; vertical-align: bottom; max-width: 100%; height: auto; }

.feature sup { font-size: .6em; vertical-align: super; line-height: 0;
  position: static; top: auto; }

.feature .cap a, .feature .photo a, .feature .thumb a {
  display: block; background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
@media (hover: hover) {
  .feature a img { transition: opacity .6s; }
  .feature a:hover img { opacity: .7; }
  .feature .credit .link { transition: opacity .6s; }
  .feature .credit .link:hover { opacity: .6; }
}

.feature .frame { display: flex; align-items: stretch; justify-content: center;
  width: calc(1120 * var(--pcu)); margin: 0 auto;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) 100% no-repeat; }

.feature .frame > .pc { display: contents; }
.feature .frame-side { position: relative; flex: 0 0 auto; width: 50%; }

.feature .frame-side__Inner { position: sticky; top: var(--header-h); width: 100%;
  padding-bottom: calc(50 * var(--pcu)); }
.feature .frame-main { flex: 0 0 auto; width: 50%; }

.feature .frame-main__Inner { overflow-x: clip; display: flow-root; width: 28rem; margin: auto;
  background: linear-gradient(#fff, #fff) center / calc(100% - 2px) 100% no-repeat; }

.feature :where(.frame-main__Inner > *, .frame-main__Inner section > *, .frame-main__Inner .sp > *, .frame-main__Inner .pc > *) { position: relative; }

.feature .frame-side__Inner .fv { width: 100%; }

.feature .railttl { position: relative; margin-top: calc(50 * var(--pcu)); margin-left: calc(101 * var(--pcu)); width: calc(400 * var(--pcu)); height: calc(110 * var(--pcu)); }
.feature .railttl__Item { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .6s var(--rv-ease); }
.feature .railttl__Item.is-shown { opacity: 1; }
.feature .railttl__Item img { width: 100%; }
.feature .railttl__Item:nth-child(1) { width: calc(357.51 * var(--pcu)); }
.feature .railttl__Item:nth-child(2) { width: calc(209.24 * var(--pcu)); }
.feature .railttl__Item:nth-child(3) { width: calc(250.17 * var(--pcu)); }

.feature .fv { position: relative; overflow: clip; aspect-ratio: 7 / 8; }
.feature .fv__Thum { position: absolute; inset: 0; }
.feature .fv__Thum img { position: absolute; left: -1.6071%; top: -25.7031%; width: 107.8571%; height: auto; max-width: none; }

.feature .fv__Logo { position: absolute; top: 58.2969%; }
.feature .fv__Logo.-newera { left: 5.3571%; width: 46.4230%; }
.feature .fv__Logo.-celford { left: 55.6189%; width: 38.9239%; }
.feature .fv__Logo img { width: 100%; }

.feature .mint { width: 24rem; height: 27.45rem; margin-top: -1.5rem;
  border-radius: 0 1.5rem 1.5rem 0; }
.feature .mint::before { content: ""; position: absolute; inset: 0;
  background: #7EC6C6; border-radius: inherit; }

@media screen and (min-width: 769px) {
  .feature .mint { margin-top: 0; }
}

.feature .mint__Ttl { position: absolute; top: 1.5rem; left: 3rem; width: 16.0555rem; }
.feature .mint__Ttl2 { position: absolute; top: 3.92rem; left: 3rem; width: 18.7055rem; }
.feature .mint__Ttl img, .feature .mint__Ttl2 img { width: 100%; }

.feature .mint__Copy { position: absolute; top: 6.2rem; left: 3rem;
  font-family: "Shippori Mincho", serif; font-size: 1.2rem; line-height: 1.42; color: #000; }
.feature .mint__Lead { position: absolute; top: 13.85rem; left: 3rem; width: 17.6rem;
  font-family: "Shippori Mincho", serif; font-size: .8rem; line-height: 1.75; color: #000; }

.feature .mint__Fly { position: absolute; top: 9.6rem; left: 4.15rem; width: 19.755rem; height: 2.9rem; }

.feature .mint__Plane { position: absolute; left: 0; top: 0; width: 1.575rem; }

.feature .mint__Plane svg { display: block; width: 100%; height: auto; overflow: visible; }
.feature .mint__Line { position: absolute; left: 1.8615rem; top: 1.2rem; width: 17.8825rem; }
.feature .mint__Globe { position: absolute; top: 21.75rem; left: 20.7055rem; width: 2rem; }
.feature .mint__Globe img { width: 100%; }

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

.feature .topmark { position: sticky; top: calc(var(--header-h) + 1.5rem); z-index: 3;
  margin-top: 2.4rem; margin-left: 26.051rem; width: .991rem; }
.feature .topmark__Btn { display: block; width: 100%; aspect-ratio: 19.6 / 74.286;
  text-decoration: none; cursor: pointer; pointer-events: auto; }
.feature .topmark__Btn svg { display: block; width: 100%; height: 100%; }

.feature .cap { width: 21.95rem; height: 14.55rem; margin-top: 1.15rem; margin-left: 3.65rem; overflow: clip; }
.feature .cap img { width: 100%; }

.feature .mq { position: relative; }
.feature .mq svg { position: absolute; top: 0; display: block; height: auto; overflow: hidden; }
.feature .mq01 { height: 4.35rem; margin-top: 0.05rem; }
.feature .mq01 svg { left: 0; width: 20.1rem; }
.feature .mq02 { height: 4.05rem; margin-top: 3.15rem; }
.feature .mq02 svg { left: 5.05rem; width: 22.95rem; }
.feature .mq03 { height: 4.2rem; margin-top: 2.5rem; }
.feature .mq03 svg { left: 0; width: 20.1rem; }

.feature .lookttl { position: relative; }

.feature .lookttl__Bar { position: absolute; display: block; width: 1.1rem; }
.feature .lookttl__Bar::before { content: ""; position: absolute; inset: 0; background: #7EC6C6; }
.feature .lookttl__Img { position: absolute; top: 0; }
.feature .lookttl__Img img { width: 100%; }

.feature .lookttl__Line { position: absolute; left: 0; top: 0; width: 100%; }

.feature .lookttl__Lead { position: absolute; font-family: "Shippori Mincho", serif;
  font-size: .9rem; line-height: 1.444; color: #000002; }

.feature .lookttl01 { height: 12.2rem; margin-top: 0.65rem; }
.feature .lookttl01 .lookttl__Bar { left: 2rem; top: 0; height: 12.2rem; }
.feature .lookttl01 .lookttl__Img { left: 4rem; width: 22.3445rem; aspect-ratio: 894 / 245; }
.feature .lookttl01 .lookttl__Line:nth-child(2) { top: 37.1429%; }
.feature .lookttl01 .lookttl__Line:nth-child(3) { top: 73.0612%; }
.feature .lookttl01 .lookttl__Lead { top: 6.6rem; left: 4rem; width: 13.5rem; }

.feature .lookttl02 { height: 12.05rem; margin-top: 0.4rem; }
.feature .lookttl02 .lookttl__Bar { left: 24.9rem; top: .05rem; height: 12rem; }
.feature .lookttl02 .lookttl__Img { left: 10.9225rem; width: 13.0775rem; aspect-ratio: 524 / 251; }
.feature .lookttl02 .lookttl__Line:nth-child(2) { top: 36.2550%; }
.feature .lookttl02 .lookttl__Line:nth-child(3) { top: 73.7052%; }
.feature .lookttl02 .lookttl__Lead { top: 6.65rem; left: 11.4rem; width: 12.6rem; text-align: right; }

.feature .lookttl03 { height: 10.75rem; margin-top: 0.8rem; }

.feature .lookttl03 .lookttl__Bar { left: 2rem; top: .05rem; height: 10.7rem; }
.feature .lookttl03 .lookttl__Img { left: 4rem; width: 15.6355rem; aspect-ratio: 626 / 251; }
.feature .lookttl03 .lookttl__Line:nth-child(2) { top: 36.2550%; }
.feature .lookttl03 .lookttl__Line:nth-child(3) { top: 73.7052%; }
.feature .lookttl03 .lookttl__Lead { top: 6.65rem; left: 4rem; width: 14.4rem; }

.feature .photo { position: relative; overflow: clip; }
.feature .photo img { position: absolute; max-width: none;
  left: var(--px, 0); top: var(--py, 0); width: var(--pw, 100%); }
.feature .photo.-big { width: 28rem; height: 35rem; margin-top: 0; }

.feature .lookttl + .photo { margin-top: -1px; padding-top: 1px; height: calc(35rem + 1px); }
.feature .sec02 .photo.-big { --px: 0; --py: -1.15rem; --pw: 28rem; }
.feature .sec03 .photo.-big { --px: 0; --py: 0; --pw: 28rem; }
.feature .sec04 .photo.-big { --px: -1.25rem; --py: -4.024rem; --pw: 29.25rem; }

.feature .pale { position: relative; background: #DFF4F4; border-radius: 0 0 2.5rem 2.5rem; }
.feature .sec02 .pale { height: 48.75rem; }
.feature .sec03 .pale { height: 50.15rem; }
.feature .sec04 .pale { height: 47.5rem; }

.feature .photo.-mid { position: absolute; top: 2rem; left: 4rem; width: 20rem; height: 27.5rem; }
.feature .sec02 .photo.-mid { --px: -3.3305rem; --py: -6.34rem; --pw: 26.1365rem; }
.feature .sec03 .photo.-mid { --px: -1.643rem; --py: -6.175rem; --pw: 25.299rem; }
.feature .sec04 .photo.-mid { --px: -.6rem; --py: -.595rem; --pw: 21.2rem; }

.feature .thumbs { position: absolute; top: 31.5rem; left: 0; width: 28rem; height: 12.3rem; }
.feature .thumb { position: absolute; top: 0; overflow: clip; left: var(--wx); width: var(--ww); height: var(--wh); }
.feature .thumb img { position: absolute; max-width: none;
  left: var(--px); top: var(--py); width: var(--pw); }

.feature .sec02 .thumb { --ww: 8.45rem; --wh: 9.7rem; --py: -1.35rem; }
.feature .sec02 .thumb:nth-child(1) { --wx: 1.35rem; --px: -.35rem; --pw: 9.2rem; }
.feature .sec02 .thumb:nth-child(2) { --wx: 9.8rem; --px: -.4rem; --pw: 9.25rem; }
.feature .sec02 .thumb:nth-child(3) { --wx: 18.25rem; --px: -.35rem; --pw: 9.2rem; }

.feature .sec03 .thumb { --wh: 12.3rem; --py: -.35rem; --pw: 9.75rem; }
.feature .sec03 .thumb:nth-child(1) { --wx: 1.5rem; --ww: 8.25rem; --px: -.75rem; }
.feature .sec03 .thumb:nth-child(2) { --wx: 9.85rem; --ww: 8.3rem; --px: -.75rem; }
.feature .sec03 .thumb:nth-child(3) { --wx: 18.2rem; --ww: 8.3rem; --px: -.7rem; }

.feature .sec04 .thumb { --ww: 8.65rem; --wh: 8.7rem; --py: -1.9rem; }
.feature .sec04 .thumb:nth-child(1) { --wx: 1.25rem; --px: -.35rem; --pw: 9.25rem; }
.feature .sec04 .thumb:nth-child(2) { --wx: 9.7rem; --px: -.35rem; --pw: 9.3rem; }
.feature .sec04 .thumb:nth-child(3) { --wx: 18.15rem; --px: -.3rem; --pw: 9.25rem; }

.feature .credit { position: absolute; left: 50%; width: 15.5rem;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .4rem; row-gap: 0;
  transform: translateX(-50%); }

.feature .credit .item { font-size: .8rem; line-height: 1.5; margin-bottom: -.05rem; }
.feature .credit .link { font-family: "Noto Serif JP", serif; font-size: .8rem; color: #8E8E8E;
  border-bottom: .05rem solid #8E8E8E; }

.feature .sec02 .credit { top: 42.5rem; width: 16.5rem; }
.feature .sec03 .credit { top: 43.8rem; }
.feature .sec04 .credit { top: 41.25rem; }

.feature .sec07 { padding-bottom: 4.2rem; }
.feature .sec07__Logo { width: 12.9935rem; margin-top: 2.5rem; margin-left: 7.1rem; }
.feature .sec07__Logo img { width: 100%; }
.feature .sec07__Txt { width: 20rem; margin-top: 0.7775rem; margin-left: 3.6rem;
  font-size: .8rem; line-height: 1.75; color: #8E8E8E; }

.feature .sec07__Allitems { width: 13.05rem; margin-top: 4.4rem; margin-left: 7.5rem; }
.feature .sec07__Allitems img { width: 100%; }

.feature .sec07__Staff { width: 13rem; margin-top: 1.05rem; margin-left: auto; margin-right: auto;
  text-align: center;
  font-family: "Bodoni Moda", serif; font-style: italic; font-size: .7rem; line-height: 1.43; color: #000002; }

@media screen and (max-width: 768px) {
  html { font-size: 3.571429vw; }

  .feature { --header-h: var(--cms-header-h, 51px); }

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

  .feature .frame { display: block; width: 100%; background: #fff; }
  .feature .frame-main { width: 100%; }
  .feature .frame-main__Inner { width: 100%; background: #fff; }
}