@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.js-anim .js-reveal { opacity: 0; transition: opacity .8s ease-in-out .3s; }
html.js-anim .js-reveal.is-inview { opacity: 1; }

html.js-anim .js-reveal.-d2 { transition-delay: .6s; }
html.js-anim .js-reveal.-d3 { transition-delay: .9s; }

.is-noanim .js-reveal { transition: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.is-forceanim) .js-reveal { transition: none !important; opacity: 1 !important; }
  html:not(.is-forceanim) { scroll-behavior: auto; }
}

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

  font-family: "ryo-text-plusn", serif;
  font-weight: 400; font-style: normal; font-size: 2rem;
  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: #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; }

:where(.feature .mv, .feature .lead, .feature .camp, .feature .looks, .feature .tail, .feature .rule) { position: relative; }

.feature .lk01 { margin-top: 10rem; margin-left: 8.5rem; width: 58rem; position: relative; }
.feature .mv__thum img { width: 100%; }

.feature .mv__ttl { position: absolute; inset: 0; pointer-events: none; color: #000; }

.feature .mv__ttl .mv__ttl-img { position: absolute; left: 1rem; top: 61.038rem; width: 40rem; }

.feature .lead { text-align: center; }
.feature .lead__sub { margin-top: 9.024rem; font-family: "cormorant-infant", serif; font-weight: 400; font-size: 3.4rem; line-height: 1.2; white-space: nowrap; }

.feature .lead__wide { letter-spacing: .025em; }
.feature .lead__ttl { margin-top: -0.747rem; font-family: "cormorant", serif; font-weight: 400; font-size: 4.88rem; line-height: 1.75; letter-spacing: .005em; }
.feature .lead__txt { margin-top: -0.462rem; font-family: "ryo-text-plusn", serif; font-weight: 400; font-size: 1.8rem; line-height: 1.94; }

.feature .rule { display: block; width: 69rem; height: 0; margin-left: 3rem; border-top: max(1px, .1rem) solid #000; }
.feature .rule01 { margin-top: 9.171rem; }
.feature .rule02 { margin-top: 3.72rem; }

.feature .camp { text-align: center; }
.feature .camp__sub { margin-top: 3.839rem; font-family: "ivypresto-display", serif; font-weight: 300; font-size: 1.8rem; line-height: 1.2; letter-spacing: .08em; }

.feature .camp__ttl { margin-top: 0.368rem;  display: flex; justify-content: center; align-items: baseline; white-space: nowrap;
  font-family: "ivypresto-display", serif; font-weight: 300; line-height: 4.8rem; }
.feature .camp__point { font-size: 3.2rem; letter-spacing: .065em; }
.feature .camp__num { margin-left: .218rem; font-size: 4rem; letter-spacing: .045em; }
.feature .camp__pct { font-size: 3.2rem; }
.feature .camp__word { margin-left: .515rem; font-size: 3.2rem; letter-spacing: .045em; }
.feature .camp__date { margin-top: 1.7rem; font-family: "ivypresto-display", serif; font-weight: 300; font-size: 1.8rem; line-height: 1.2; letter-spacing: .1em; }
.feature .camp__tilde { font-family: "Noto Sans JP", sans-serif; font-weight: 400; }

.feature .lk { position: relative; }

.feature .lk > a { display: block; background: linear-gradient(#fff, #fff) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.feature .lk img { width: 100%; }
.feature .js-reveal-group { display: flow-root; }

.feature .js-slider .splide__track { overflow: hidden; position: relative; z-index: 0; }
.feature .js-slider .splide__list { display: flex; margin: 0; padding: 0; }
.feature .js-slider .splide__slide { flex-shrink: 0; list-style-type: none; margin: 0; position: relative; width: 100%; }
.feature .js-slider .splide__slide a { display: block; }

.feature .credit { position: absolute; z-index: 1; font-family: "cinzel", serif; font-weight: 400; font-size: 1.8rem; line-height: 1.44; letter-spacing: 0; color: #000; }
.feature .credit .item { display: block; white-space: nowrap; }
.feature .credit .link { color: #000; }
.feature .lk04 { margin-top: 11.954rem; margin-left: 21rem; width: 33rem; }

.feature .credit01 { bottom: -0.528rem; text-align: right; right: 41.396rem; }
.feature .lk05 { margin-top: 8rem; margin-left: 25.5rem; width: 40rem; }
.feature .lk06 { margin-top: 11.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit02 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; left: 40.6885rem; bottom: -0.1rem; }
.feature .lk07 { margin-top: 4rem; margin-left: 17.5rem; width: 40rem; }
.feature .lk08 { margin-top: 11.95rem; margin-left: 35.49rem; width: 30rem; }
.feature .credit03 { bottom: -0.594rem; left: 31.384rem; }
.feature .lk09 { margin-top: -16.935rem; margin-left: 9.519rem; width: 30rem; }
.feature .lk10 { margin-top: 3.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .lk11 { margin-top: 12rem; margin-left: 9.5rem; width: 30rem; }
.feature .credit04 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; left: 30.6765rem; bottom: -0.1rem; }
.feature .lk12 { margin-top: -37.662rem; margin-left: 27.464rem; width: 30rem; }
.feature .lk13 { margin-top: 3.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .lk14 { margin-top: 11.98rem; margin-left: 3rem; width: 48.6rem; }
.feature .lk15 { margin-top: -22.585rem; margin-left: 42rem; width: 30rem; mix-blend-mode: multiply; pointer-events: none; }
.feature .grp03 { isolation: isolate; }
.feature .lk16 { margin-top: -11.59rem; margin-left: 7.5rem; width: 60rem; }
.feature .credit05 { top: 79.218rem; text-align: right; right: 0rem; }
.feature .lk17 { margin-top: 4rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit06 { top: 79.245rem; left: 0rem; }
.feature .lk18 { margin-top: 17.467rem; margin-left: 9.5rem; width: 56rem; }
.feature .lk19 { margin-top: 17.771rem; margin-left: 17.5rem; width: 40rem; }
.feature .credit07 { top: 86.418rem; text-align: right; right: -0.1rem; }
.feature .lk20 { margin-top: 3.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .lk21 { margin-top: 17.437rem; margin-left: 3rem; width: 40rem; }
.feature .lk22 { margin-top: -21.19rem; margin-left: 46.2rem; width: 25.8rem; }
.feature .credit08 { bottom: -0.603rem; left: 41.411rem; }
.feature .lk23 { margin-top: 3.95rem; margin-left: 9.5rem; width: 40rem; }
.feature .lk24 { margin-top: 11.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit09 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; right: 41.15rem; bottom: -0.105rem; }
.feature .lk25 { margin-top: 4rem; margin-left: 25.5rem; width: 40rem; }
.feature .lk26 { margin-top: 11.95rem; margin-left: 42rem; width: 30rem; }
.feature .lk27 { margin-top: -33.05rem; margin-left: 3rem; width: 30rem; }
.feature .credit10 { bottom: -0.514rem; text-align: right; right: 31.393rem; }
.feature .lk28 { margin-top: -8.05rem; margin-left: 37.5rem; width: 30rem; }
.feature .credit11 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; left: 40.685rem; bottom: -0.096rem; }
.feature .lk29 { margin-top: 11.95rem; margin-left: 17.5rem; width: 40rem; }
.feature .lk30 { margin-top: 3.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit12 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; right: 33.3125rem; bottom: -0.092rem; }
.feature .lk31 { margin-top: 12.104rem; margin-left: 33.3rem; width: 32.2rem; }
.feature .lk32 { margin-top: 3.95rem; margin-left: 9.5rem; width: 30rem; }
.feature .lk33 { margin-top: 11.95rem; margin-left: 9.5rem; width: 56rem; }
.feature .credit13 { writing-mode: vertical-rl; text-orientation: sideways; text-align: right; right: 41.0891rem; bottom: -0.104rem; }
.feature .lk34 { margin-top: 4rem; margin-left: 17.5rem; width: 40rem; }
.feature .lk35 { margin-top: 11.95rem; margin-left: 23.4rem; width: 48.6rem; }
.feature .lk36 { margin-top: 4rem; margin-left: 3rem; width: 29.2rem; }
.feature .credit14 { bottom: -0.534rem; text-align: right; right: 38.186rem; }
.feature .lk37 { margin-top: -25.953rem; margin-left: 35.194rem; width: 36.8rem; }
.feature .lk38 { margin-top: 11.95rem; margin-left: 9.331rem; width: 56rem; }
.feature .credit15 { top: 60.881rem; text-align: right; right: -0.098rem; }
.feature .lk39 { margin-top: 3.996rem; margin-left: 17.5rem; width: 40rem; }

.feature .checkall { margin-top: 22.761rem; text-align: center; font-family: "cinzel", serif; font-weight: 400; font-size: 2.6rem; line-height: 1.2; }
.feature .checkall__link { position: relative; display: inline-block; }

.feature .checkall__link::after { content: ""; position: absolute; left: 50%; top: calc(100% + .415rem); width: 18rem; margin-left: -9rem; border-top: max(1px, .1rem) solid #808080; }
.feature .staff { margin-top: 8.318rem; font-family: "cinzel", serif; font-weight: 400; font-size: 2.2rem; line-height: 1.82; text-align: center; }

.feature .tail { padding-bottom: 7.426rem; }

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

  html { font-size: 0.552381vw; }

  .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: 1 1 0; min-width: 0; }
  .feature .frame-main__inner { width: 75rem; }

  .feature .frame-side { 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; }
  .feature .leftcont__box { position: relative; height: 100%; }
  .feature .leftcont__thum { height: var(--rail-h); width: 100%; }
  .feature .leftcont__thum img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .feature .leftcont__ttl { position: absolute; left: 0; right: 0; bottom: calc(var(--rail-h) * 0.15201);
    height: calc(196.17 * var(--pcu)); pointer-events: none; color: #000; }

  .feature .leftcont__ttl .leftcont__ttl-img { position: absolute; top: calc(-10.35 * var(--pcu)); left: calc(50% - 190 * var(--pcu)); width: calc(380 * var(--pcu)); max-width: none; }

  .feature .lead__sub { font-size: 3.1035rem; line-height: 4.08rem; }
  .feature .lead__ttl { font-size: 4.526rem; line-height: 8.54rem; }
  .feature .lead__txt { font-size: 1.5517rem; line-height: 2.26; }

}