@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 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
html.js-anim .js-reveal.is-inview { opacity: 1; }

.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) .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: #3B3F3F; margin: 0 auto; position: relative; width: 100%;
  font-family: hiragino-kaku-gothic-pron, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", meiryo, メイリオ, sans-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: #3B3F3F; 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;
  padding-bottom: 0; }

.feature :where(.mv, .sec > *) { position: relative; }

.feature .mv { margin-top: 0rem; }
html.js-anim .feature .mv__box { opacity: 0; transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
html.js-anim .feature .mv__box.is-inview { opacity: 1; }
.feature .mv__box { position: relative; }
.feature .mv__thum img { width: 75rem; }
.feature .mv__ttl { position: absolute; top: 75.084rem; left: 0; right: 0; text-align: center; white-space: nowrap;
  font-family: "norman-variable", serif; font-variation-settings: "wght" 400; font-weight: 400;
  font-size: 7rem; line-height: 1.087; letter-spacing: 0; color: #fff; }

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

.feature .photo.-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: .8rem solid var(--frame, #DFECED); }

.feature .fade-slider .splide__slide { width: 100%; }

.feature .section-heading { font-family: "norman-variable", serif; font-variation-settings: "wght" 400; font-weight: 400;
  font-size: 6rem; line-height: 1.087; color: #3B3F3F; white-space: nowrap; z-index: 1;
  pointer-events: none; }

.feature .section-heading.-v { position: absolute; writing-mode: vertical-rl; text-orientation: sideways; line-height: 1.087; }
.feature .section-heading.-ccw { transform: rotate(180deg); }
.feature .vertical-label { position: absolute; writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap;
  font-family: "norman-variable", serif; font-variation-settings: "wght" 400; font-weight: 400;
  font-size: 2.2rem; line-height: 1.087; letter-spacing: 0; color: #3B3F3F; z-index: 1; }

.feature .mv__ttl, .feature .section-heading, .feature .vertical-label { line-height: .553; padding-bottom: .534em; }
.feature .section-heading.-v, .feature .vertical-label { line-height: .553; padding-bottom: 0; padding-left: .534em; }

.feature .look05, .feature .look09, .feature .look13 { overflow-x: clip; }

.feature .section-heading:not(.-v) { display: flex; justify-content: center; }

.feature .section-heading.-v { display: flex; justify-content: center; }

.feature .credit { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  column-gap: .91rem;
  position: relative; margin-left: auto; margin-right: auto;
  font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; font-style: normal;
  font-size: 2.2rem; line-height: 3.96rem; letter-spacing: .05em; color: #3B3F3F; }
.feature .credit .item { white-space: nowrap; }
.feature .credit .link { color: #3B3F3F; cursor: pointer; }
.feature .credit .item.-noline { border-bottom: none; }

.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; }

.feature .slider01 { overflow: hidden; position: relative; z-index: 0; }
.feature .slider01 .swiper-wrapper { display: flex; margin: 0; padding: 0; list-style: none; }
.feature .slider01 .swiper-slide { flex-shrink: 0; width: 54rem; position: relative; }
.feature .slider01 .swiper-slide a { display: block; }
.feature .slider01 .swiper-slide img { width: 100%; }

.feature .allitems a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border: 1px solid #3B3F3F; color: #3B3F3F;
  font-family: "norman-variable", serif; font-variation-settings: "wght" 500; font-weight: 500;
  font-size: 3rem; line-height: 1.087; letter-spacing: .05em;
  box-sizing: border-box; padding-bottom: .4em;  }

.feature .look02 { margin-top: 18rem; }
.feature .look02__photo { margin-left: 5rem; width: 70rem; }
.feature .ttl02 { margin-top: -2.733rem; padding-left: 37.168rem; width: 70.684rem; letter-spacing: .05em; }
.feature .look03 { margin-top: 11.911rem; }
.feature .look03__photo { width: 58rem; --frame: #DFECED; }
.feature .credit01 { margin-top: 3.294rem; max-width: 42.2658rem; left: -8.5rem; height: 7.9200rem; }
.feature .look04 { margin-top: 19.388rem; }
.feature .look04__photo { margin-left: 12.5rem; width: 50rem; }
.feature .credit02 { margin-top: 3.294rem; max-width: 19.7547rem; height: 3.9600rem; }
.feature .look05 { margin-top: 19.348rem; }
.feature .look05__photo { width: 70rem; }
.feature .look05__ttl { top: 1.605rem; left: 66.239rem; height: 33.870rem; letter-spacing: .05em; }
.feature .look06 { margin-top: 12rem; }
.feature .look06__photo { margin-left: 20rem; width: 50rem; }
.feature .look06__lbl01 { top: .032rem; left: 15.753rem; }
.feature .look06__lbl02 { top: 23.047rem; left: 15.753rem; }
.feature .look06__lbl03 { top: 63.979rem; left: 15.753rem; }
.feature .credit03 { margin-top: 3.294rem; max-width: 40.6048rem; left: 7.5rem; height: 7.9200rem; }
.feature .ttl07 { margin-top: 19.522rem; padding-left: 3.331rem; width: 27.127rem; letter-spacing: 0; }
.feature .look07 { margin-top: -2.856rem; }
.feature .look07__photo { width: 75rem; }
.feature .credit04 { margin-top: 3.294rem; max-width: 55.9148rem; height: 7.9200rem; }
.feature .look08 { margin-top: 19.498rem; }
.feature .look08__photo { margin-left: 6rem; width: 50rem; --frame: #F4F4E6; }
.feature .credit05 { margin-top: 3.294rem; max-width: 22.7203rem; left: -6.5rem; height: 3.9600rem; }
.feature .look09 { margin-top: 19.448rem; }
.feature .look09__photo { margin-left: 7rem; width: 68rem; }
.feature .look09__ttl { top: 2.986rem; left: 3.297rem; height: 34.097rem; letter-spacing: .05em; }
.feature .look10 { margin-top: 12rem; }
.feature .look10__photo { margin-left: 3rem; width: 58rem; }
.feature .look10__lbl01 { top: 1.031rem; left: 62.953rem; }

.feature .look10__lbl02 { top: 66.535rem; left: 62.953rem; }
.feature .look10__lbl03 { top: 73.75rem; left: 62.953rem; }
.feature .credit06 { margin-top: 3.294rem; max-width: 54.7638rem; left: -5.5rem; height: 3.9600rem; }
.feature .ttl12 { margin-top: 19.473rem; padding-left: 37.122rem; width: 71.688rem; letter-spacing: .05em; }
.feature .look11 { margin-top: -3.737rem; }
.feature .look11__photo { width: 70rem; }
.feature .look12 { margin-top: 12.2rem; }
.feature .look12__photo { margin-left: 12.5rem; width: 50rem; }
.feature .credit07 { margin-top: 3.27rem; max-width: 52.8075rem; height: 3.9600rem; }
.feature .look13 { margin-top: 19.472rem; }
.feature .look13__photo { margin-left: 3rem; width: 60rem; --frame: #EAE4E6; }
.feature .look13__ttl { z-index: 3;  top: 1.141rem; left: 58.962rem; height: 25.362rem; letter-spacing: .05em; }
.feature .credit08 { margin-top: 3.194rem; max-width: 19.4125rem; left: -4.5rem; height: 3.9600rem; }
.feature .look14 { margin-top: 19.158rem; }
.feature .look14__photo { margin-left: 5.5rem; width: 64rem; --frame: #EFEAE6; }
.feature .slider01 { margin-top: 12.3rem; }
.feature .credit09 { margin-top: 3.294rem; max-width: 53.3075rem; height: 3.9600rem; }
.feature .allitems { margin-top: 17.458rem; margin-left: 12.5rem; width: 50rem; height: 10rem;
  margin-bottom: 20rem; }
.feature .pagetop { margin-top: 19.9rem; margin-left: 64.183rem; width: 6.817rem; }
.feature .pagetop { display: none; }

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

  html { font-size: min(0.466667vw, 6.53333px); }

  .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; }

  .feature .frame-main { flex: 1 1 0; min-width: 0; }
  .feature .frame-main__inner { width: 75rem; margin: 0 auto; }
  .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; }
  html.js-anim .feature .leftcont__box { opacity: 0; transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
  html.js-anim .feature .leftcont__box.is-inview { opacity: 1; }
  .feature .leftcont__box { position: relative; }
  .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.0812);
    text-align: center; white-space: nowrap;
    font-family: "norman-variable", serif; font-variation-settings: "wght" 400; font-weight: 400;
    font-size: calc(65.33 * var(--pcu)); line-height: .553; padding-bottom: .534em;
    letter-spacing: 0; color: #fff; }
}