/* ==========================================================================
   Variables
   ========================================================================== */
:root {
  --sp-width: 390px;
  --vh: 1vh; /* JS側で実際のビューポート高さに補正する */
  --frame-wide-bp: 1200px; /* このPC幅以上でフレームを右寄せにする */
  --pc-hero-width: 474px; /* PC背景コンテンツ(hero)の幅 */
  --pc-gap: 80px; /* hero〜SPフレーム間の余白 */
  /* hero + gap + SPフレームをひとかたまりとして画面中央に配置するための
     左右の余白。画面が広くなるほどこの余白も広がり、heroとフレームの
     位置関係(間隔)は常に一定に保たれる。 */
  --pc-total-width: calc(var(--pc-hero-width) + var(--pc-gap) + var(--sp-width));
  --pc-side-margin: calc((100vw - var(--pc-total-width)) / 2);
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* タップ時の水色ハイライトを無効化 */
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Layout: SPフレーム
   モバイル実機ではただの通常ページ(bodyがそのままスクロール)。
   PC幅(--sp-widthを超える画面)になったら、フレームだけを画面内に固定表示し、
   フレーム内だけがスクロールする。
   - 391px 〜 (--frame-wide-bp未満): 画面中央に配置
   - --frame-wide-bp以上: hero(PC背景コンテンツ)+ --pc-gap + フレームを
     ひとかたまりとして画面中央に配置(--pc-side-margin参照)
   ========================================================================== */
.l-frame {
  width: 100%;
  max-width: var(--sp-width);
  margin: 0 auto;
  background: #fff;
  position: relative;
}

@media (max-width: 389.98px) {
  /* --sp-width(390px)基準でデザインされているため、それより狭い画面では
     レイアウトを組み替えず、比率を保ったままzoomで縮小して収める */
  .l-frame {
    width: var(--sp-width);
    zoom: calc(100vw / var(--sp-width));
  }
}

.l-bg {
  display: none;
}

@media (min-width: 391px) {
  html,
  body {
    height: 100%;
    overflow: hidden; /* 外側(PC背景)はスクロールさせない */
  }

  body {
    display: flex;
    justify-content: center; /* 狭いPC幅ではセンター配置 */
  }

  .l-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #65737f;
  }

  .l-frame {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: var(--sp-width);
    height: 100%;
    max-width: var(--sp-width);
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  }
}

@media (min-width: 1200px) {
  body {
    justify-content: flex-end; /* hero+フレームのかたまりを画面中央に置くための右余白 */
    padding-right: var(--pc-side-margin);
  }
}

/* ==========================================================================
   PC幅(1200px以上)で.l-bg内に表示される装飾コンテンツ
   SPフレームと同内容のため装飾要素(aria-hidden)として実装
   ========================================================================== */
.l-pc-kv {
  display: none;
}

@media (min-width: 1200px) {
  .l-bg {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    /* 左端はheroの位置(--pc-side-margin)に固定。SPフレームとは常に
       --pc-gap分の間隔を保ったまま、かたまりごと画面中央に寄る。 */
    padding: 64px 0 0 var(--pc-side-margin);
    overflow: hidden; /* スクロールさせず、収まらない分は詰めた余白で吸収する */
    box-sizing: border-box;
  }

  .l-pc-kv {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--pc-hero-width);
    max-width: 100%;
  }
}

.l-pc-kv__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 1px;
}

.l-pc-kv__title {
  position: relative;
  width: 100%;
  height: 96px;
  margin-bottom: 14px; /* タイトル直下だけ他より広めの余白にする(hero gapに加算) */
}

.l-pc-kv__title-main {
  position: absolute;
  inset: 0 0 45.41% 0;
  width: 100%;
  height: auto;
}

.l-pc-kv__title-sub {
  position: absolute;
  inset: 70.09% 12.36% 0 10.8%;
  width: calc(100% - 10.8% - 12.36%);
  height: auto;
  margin-top: 0px;
}

.l-pc-kv__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.l-pc-kv__photo {
  flex: 1 1 auto; /* lead分を除いた残り幅いっぱいに広げ、右側の余白をなくす */
  min-width: 0;
  height: 219px;
  object-fit: cover;
}

.l-pc-kv__lead {
  flex-shrink: 0;
  width: 85px;
  height: 220px;
}

.l-pc-kv__info {
  display: flex;
  flex-direction: column;
  width: 347px;
  max-width: 100%;
}

.l-pc-kv__info-row {
  display: flex;
  align-items: center;
  gap: 23px;
  padding: 10px 0;
}

.l-pc-kv__info-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 42px;
  border-bottom: 2px solid #b1cad7;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.8px;
}

.l-pc-kv__info-value {
  margin: 0;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.85px;
}

.l-pc-kv__info-value small {
  display: block;
  /* margin-top: 4px; */
  font-size: 14px;
  font-weight: 500;
}

.l-pc-kv__datetime {
  position: relative;
  height: 58px;
  aspect-ratio: 267.602 / 40.552;
  max-width: 100%;
}

.l-pc-kv__datetime-dates {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.l-pc-kv__datetime-time {
  position: absolute;
  left: 82.25%;
  top: 28.48%;
  height: 59.98%;
  width: auto;
  margin-left: 30px;
}

.l-pc-kv__info-tel {
  margin: 0;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
}

.l-pc-kv__info-tel a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .l-pc-kv__info-tel a:hover {
    color: #bfcfdc;
    transform: scale(1.05);
  }
}

.l-pc-kv__info-tel a:active {
  transform: scale(0.97);
}

.l-pc-kv__info-tel strong {
  margin-left: 2px;
  font-size: 28px;
  font-weight: 700;
}

.l-pc-kv__floor-icon {
  position: absolute;
  right: 13px;
  top: 356px;
  width: 73px;
  height: 76px;
}

.l-pc-kv__floor-icon-graphic {
  position: absolute;
  inset: 2.61% 30.68% 4.35% 0;
  width: calc(100% - 30.68%);
  height: auto;
}

.l-pc-kv__floor-icon-label {
  position: absolute;
  inset: 0 0 0 74.62%;
  width: calc(100% - 74.62%);
  height: 100%;
}

.l-pc-kv__cta {
  /* margin-top: 60px; */
  padding: 40px 18px;
  background: #bfcfdc;
  box-sizing: border-box;
}

.l-pc-kv__cta-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 527px;
  max-width: 100%;
}

@media (min-width: 1200px) {
  /* Figma仕様: 水色の帯は画面の背景いっぱいに広がる(左は画面端まで、
     右はSPフレーム下に隠れる位置まで)。中身(cta-inner)は幅527pxを保ったまま
     heroと同じ左端位置で揃え、テキストがSPフレームと重ならないようにする。 */
  .l-pc-kv__cta {
    width: 100vw;
    margin-left: calc(-1 * var(--pc-side-margin));
    padding-left: var(--pc-side-margin);
  }
}

.l-pc-kv__cta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #000;
}

.l-pc-kv__cta-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.l-pc-kv__cta-item img {
  flex-shrink: 0;
  width: 80px;
  height: auto;
  object-fit: contain;
}

.l-pc-kv__cta-item p {
  margin: 0;
  color: #231815;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.8;
}

.l-pc-kv__cta-item p span {
  color: #000;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.p-footer {
  display: flex;
  flex-direction: column;
  gap: 33px;
  padding: 35px 30px;
  background: #2c71b8;
}

.p-footer__top {
  display: flex;
  flex-direction: column;
  gap: 33px;
  width: 100%;
}

.p-footer__logo {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
}

.p-footer__info p {
  margin: 0 0 20px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}

.p-footer__info p:last-child {
  margin-bottom: 0;
}

.p-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  width: 100%;
}

.p-footer__social-heading {
  display: block;
  width: 96px;
  height: auto;
}

.p-footer__social-links {
  display: flex;
  align-items: center;
  gap: 13px;
}

.p-footer__social-links a {
  display: block;
  border-radius: 50%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.p-footer__social-links img {
  display: block;
  width: 43px;
  height: 43px;
}

@media (hover: hover) and (pointer: fine) {
  .p-footer__social-links a:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  }
}

.p-footer__social-links a:active {
  transform: scale(0.95);
  opacity: 0.85;
}

.p-footer__copyright {
  margin: 0;
  width: 100%;
  color: #fff;
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-size: 10px;
  text-align: center;
}

/* ==========================================================================
   Header
   ========================================================================== */
.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 10px;
  background: #fff;
}

.p-header__logo {
  flex-shrink: 0;
  width: 152.805px;
  height: 25.334px;
  overflow: hidden;
}

.p-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-header__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.p-header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.p-header__btn--contact {
  padding: 0 10px;
  background: rgb(41, 67, 107);
  color: #fff;
  font-size: 16px;
  letter-spacing: 1.6px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.p-header__btn--map {
  padding: 0 15px;
  background: #bfcfdc;
  color: #231815;
  font-size: 18px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-header__btn--contact:hover {
    background: #2c71b8;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  }

  .p-header__btn--map:hover {
    background: #a9c0d2;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  }
}

.p-header__btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.p-section {
  padding: 40px 16px;
  border-bottom: 1px solid #eee;
}

/* ==========================================================================
   KV(ファーストビュー)
   ========================================================================== */
.p-kv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 0 10px 30px;
  overflow: hidden;
  background: #65737f;
}

.p-kv__step {
  position: absolute;
}

.p-kv__step--a {
  top: 556px;
  left: 329px;
  width: 100px;
  height: 115px;
}

.p-kv__step--b {
  top: 464px;
  left: -69px;
  width: 131px;
  height: 114px;
}

.p-kv__step--c {
  top: 402px;
  left: 271px;
  width: 101px;
  height: 88px;
  transform: rotate(180deg) scaleY(-1);
}

.p-kv__bar {
  position: absolute;
  top: 578px;
  left: 0;
  width: 115px;
  height: 11px;
  background: rgba(255, 255, 255, 0.2);
}

.p-kv__photo {
  flex-shrink: 0;
  width: calc(100% + 20px);
  max-width: calc(100% + 20px); /* 共通のimg{max-width:100%}が効いて幅が縮むのを防ぐ */
  margin: 0 -10px;
  height: 186px;
  object-fit: cover;
}

.p-kv__title {
  position: relative;
  flex-shrink: 0;
  width: 330px;
  height: 67px;
}

.p-kv__title-main {
  position: absolute;
  inset: 0 0 45.41% 0;
  width: 100%;
  height: auto;
}

.p-kv__title-sub {
  position: absolute;
  inset: 70.09% 12.36% 0 10.8%;
  width: calc(100% - 10.8% - 12.36%);
  height: auto;
}

.p-kv__content {
  position: relative;
  flex-shrink: 0;
  width: 390px;
  height: 251px;
}

.p-kv__lead {
  position: absolute;
  top: 0;
  left: 30px;
  width: 86px;
  height: 220px;
}

.p-kv__collage-main {
  position: absolute;
  top: 0;
  left: 149px;
  width: 241px;
  height: 143px;
  object-fit: cover;
}

.p-kv__collage-sub {
  position: absolute;
  top: 163px;
  left: 252px;
  width: 138px;
  height: 88px;
  object-fit: cover;
}

.p-kv__floor-icon {
  position: absolute;
  inset: 64.94% 40.26% 0.8% 38.21%;
}

.p-kv__floor-icon-graphic {
  position: absolute;
  inset: 2.61% 30.68% 4.35% 0;
  width: calc(100% - 30.68%);
  height: auto;
}

.p-kv__floor-icon-label {
  position: absolute;
  inset: 0 0 0 74.62%;
  width: calc(100% - 74.62%);
  height: 100%;
}

.p-kv__address {
  flex-shrink: 0;
  width: 326px;
  height: 22px;
}

/* ==========================================================================
   CTA(来場予約特典)
   ========================================================================== */
.p-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 50px 30px;
  background: #bfcfdc;
}

.p-cta__datebadge {
  flex-shrink: 0;
  width: 100%;
  max-width: 330px;
  height: auto;
}

.p-cta__divider {
  flex-shrink: 0;
  width: 100%;
  max-width: 330px;
  height: 1px;
  background: #65737f;
}

.p-cta__row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.p-cta__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 264px;
  color: #111;
}

.p-cta__text p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.84px;
}

.p-cta__text p:first-child {
  font-size: 13px;
}

.p-cta__accent {
  color: #000;
  font-weight: 700;
}

.p-cta__price {
  font-size: 22px;
  letter-spacing: 1.32px;
}

.p-cta__note {
  margin: 8px 0 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.6px;
  color: #111;
}

.p-cta__note--wide {
  width: 100%;
  max-width: 330px;
  line-height: 18px;
}

.p-cta__gift-tag {
  flex-shrink: 0;
  width: 66px;
  height: 41px;
}

.p-cta__badge {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 330px;
  height: 33px;
}

.p-cta__badge::before,
.p-cta__badge::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #231815;
}

.p-cta__badge-bubble {
  position: relative;
  flex-shrink: 0;
  width: 130px;
  height: 33.412px;
}

.p-cta__badge-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-cta__badge-text {
  position: absolute;
  left: 39px;
  top: 0;
  line-height: 24px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.p-cta__more {
  width: 100%;
}

.p-cta__row--more {
  width: 100%;
  max-width: 330px;
}

.p-cta__text--more {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.p-cta__text--more p {
  line-height: 22px;
}

.p-cta__small {
  font-size: 10px !important;
}

.p-cta__harada {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 129px;
}

.p-cta__present-text {
  width: 107px;
  height: 33px;
}

.p-cta__harada-collage {
  width: 119px;
  height: 85px;
}

.p-cta__construction {
  width: 100%;
  max-width: 328px;
}

.p-cta__construction-full {
  display: block;
  width: 100%;
  height: auto;
}

.p-cta__button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 330px;
  height: 53px;
  background: #29436b;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 3.6px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-cta__button:hover {
    background: #2c71b8;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(41, 67, 107, 0.35);
  }
}

.p-cta__button:active {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.95);
}

/* ==========================================================================
   FEATURE(部屋ごとの特徴)
   ========================================================================== */
.p-feature {
  padding: 50px 0 40px;
  background: #65737f;
}

.p-feature__title {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 30px;
}

.p-feature__title::before,
.p-feature__title::after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background: #fff;
}

.p-feature__title span {
  flex-shrink: 0;
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-size: 30px;
  color: #fff;
  white-space: nowrap;
}

.p-feature__subtitle {
  margin: 30px 0 0;
  padding: 0 30px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 34px;
  color: #fff;
}

.p-feature__subtitle-accent {
  color: #bfcfdc;
}

.p-feature__list {
  display: flex;
  flex-direction: column;
}

.p-feature__floor {
  margin: 48px 30px 4px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #bfcfdc;
  color: #65737f;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

.p-feature__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  margin-bottom: 4px;
}

/* フロアバッジのないカード(同じ階の続き)は、直前のカードとの間に控えめな余白を入れる */
.p-feature__head:first-child {
  margin-top: 20px;
}

.p-feature__letter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  background: #231815;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 22px;
}

.p-feature__card-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}

.p-feature__media {
  display: flex;
  padding: 0 30px;
}

.p-feature__photo {
  flex-shrink: 0;
  width: 200px;
  height: 144px;
  display: block;
  object-fit: cover;
}

.p-feature__photo-crop {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 144px;
  overflow: hidden;
}

.p-feature__photo--f {
  position: absolute;
  top: -39.88%;
  left: -18.18%;
  width: 137.01%;
  height: 149.14%;
  max-width: none;
}

.p-feature__plan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0px;
  background: #65737f;
}

.p-feature__plan-img {
  display: block;
  width: 100%;
  max-width: 137px;
  height: 86px;
  object-fit: cover;
}

.p-feature__zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  border-radius: 4px;
  background: #fff;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.p-feature__zoom-label {
  color: #65737f;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 11px;
  transition: color 0.25s ease;
}

.p-feature__zoom-action {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65737f;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 13px;
  transition: color 0.25s ease;
}

.p-feature__zoom-action img {
  transition: filter 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-feature__zoom:hover {
    background: #2c71b8;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  }

  .p-feature__zoom:hover .p-feature__zoom-label,
  .p-feature__zoom:hover .p-feature__zoom-action {
    color: #fff;
  }

  .p-feature__zoom:hover .p-feature__zoom-action img {
    filter: brightness(0) invert(1);
  }
}

.p-feature__zoom:active {
  transform: translateY(0) scale(0.97);
}

.p-feature__desc {
  margin: 13px 30px 0;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}

.p-feature__overview {
  margin: 48px 30px 0;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  padding-top: 20px;
  border-top: solid 0.2px #ffffff;
}

.p-feature__overview--noborder {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.p-feature__bels {
  display: block;
  width: calc(100% - 60px);
  max-width: 330px;
  height: auto;
  margin: 48px 30px 0;
  padding-top: 20px;
  border-top: solid 0.2px #ffffff;
}

/* ==========================================================================
   スライダー(施工事例オートスクロール)
   ========================================================================== */
.p-slider {
  overflow: hidden;
  padding: 21px 0;
  background: #fff;
}

.p-slider__track {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  animation: p-slider-scroll 32s linear infinite;
}

.p-slider__item {
  flex-shrink: 0;
  width: 122px;
  height: 115px;
  overflow: hidden;
}

.p-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes p-slider-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-slider__track {
    animation: none;
  }
}

/* ==========================================================================
   MAP(アクセス情報)
   ========================================================================== */
.p-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 50px 0;
  background: #fff;
}

.p-map__title {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 330px;
}

.p-map__title::before,
.p-map__title::after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background: #65737f;
}

.p-map__title span {
  flex-shrink: 0;
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-size: 30px;
  color: #65737f;
  white-space: nowrap;
}

.p-map__heading {
  margin: 0;
  width: 331px;
  max-width: 100%;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.8px;
  color: #000;
}

.p-map__address {
  margin: 0;
  width: 331px;
  max-width: 100%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.8px;
  color: #000;
}

.p-map__graphic {
  display: block;
  width: 100%;
  max-width: 388px;
  height: auto;
}

.p-map__link {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: #2c71b8;
  text-decoration: underline;
  text-align: center;
  transition: color 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-map__link:hover {
    color: #1a4d80;
    opacity: 0.8;
  }
}

.p-map__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: center;
}

.p-map__contact-label {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 14px;
  color: #231815;
}

.p-map__contact-tel {
  display: inline-block;
  font-family: "Noto Serif", serif;
  font-weight: 800;
  font-size: 28px;
  color: #65737f;
  text-decoration: underline;
  transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-map__contact-tel:hover {
    color: #2c71b8;
    transform: scale(1.05);
  }
}

.p-map__contact-hours {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 12px;
  color: #231815;
}

/* ==========================================================================
   Modal(間取り図拡大)
   ========================================================================== */
.c-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--sp-width);
  transform: translateX(-50%);
  z-index: 90; /* .p-headerのz-index(100)より低くし、ヘッダーを常に前面に見せる */
  display: flex;
  justify-content: center;
  background: rgba(99, 113, 125, 0.92);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.c-modal.is-active {
  visibility: visible;
  opacity: 1;
}

.c-modal__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.c-modal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
  transition: color 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-modal__close:hover {
    color: #bfcfdc;
    transform: rotate(90deg) scale(1.1);
  }
}

.c-modal__close:active {
  transform: scale(0.9);
}

/* ==========================================================================
   土地分譲(構造見学会/新価格)
   ========================================================================== */
.p-land {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 0;
  background: #dcdddd;
}

.p-land-panel {
  display: flex;
  justify-content: center;
  padding: 50px 0;
  background: #fff;
}

.p-land__title {
  position: relative;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 330 / 118;
}

.p-land__title-badge-grid {
  position: absolute;
  left: 27.82%;
  top: 0.22%;
  width: 45.33%;
  height: auto;
}

.p-land__title-badge-text {
  position: absolute;
  left: 31.15%;
  top: 7.03%;
  width: 39.81%;
  height: auto;
}

.p-land__title-heading {
  position: absolute;
  left: 0.01%;
  top: 36.59%;
  width: 99.98%;
  height: auto;
}

.p-land__photos {
  position: relative;
  width: 100%;
  max-width: 330px;
  aspect-ratio: 330 / 170;
  overflow: hidden;
}

.p-land__photo {
  position: absolute;
  overflow: hidden;
}

.p-land__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-land__photo--main {
  top: 0.52%;
  right: 0;
  bottom: 28.54%;
  left: 9.26%;
  clip-path: polygon(91.61% 100%, 0% 100%, 8.39% 0%, 100% 0%);
}

.p-land__photo--a {
  top: 61.41%;
  right: 18.68%;
  bottom: 0;
  left: 48.32%;
  clip-path: polygon(90.11% 100%, 0% 100%, 9.9% 0%, 100% 0%);
}

.p-land__photo--b {
  top: 61.41%;
  right: 66.5%;
  bottom: 0;
  left: 0.52%;
  clip-path: polygon(90.11% 100%, 0% 100%, 9.91% 0%, 100% 0%);
}

.p-land__photo--c {
  top: 61.41%;
  right: 49.92%;
  bottom: 0;
  left: 31.69%;
  clip-path: polygon(82.26% 100%, 0% 100%, 17.74% 0%, 100% 0%);
}

.p-land__photo--d {
  top: 61.41%;
  right: 2.1%;
  bottom: 0;
  left: 79.51%;
  clip-path: polygon(82.26% 100%, 0% 100%, 17.74% 0%, 100% 0%);
}

.p-land__desc {
  margin: 0;
  width: 100%;
  max-width: 331px;
  padding: 0 20px;
  color: #3e3a39;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1.6;
}

.p-land__overview {
  margin: 0;
  width: 100%;
  max-width: 331px;
  padding: 0 20px;
  color: #3e3a39;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
}

.p-land__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.p-land__pricebadge {
  position: relative;
  width: 100%;
  max-width: 366px;
  aspect-ratio: 366 / 79;
}

.p-land__pricebadge-shape {
  position: absolute;
  left: 4.92%;
  right: 4.92%;
  top: 0;
  bottom: 0;
  width: auto;
  height: 100%;
}

.p-land__pricebadge-text {
  position: absolute;
  left: 26.78%;
  right: 26.78%;
  top: 50%;
  transform: translateY(-50%);
  height: 83.54%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.p-land__pricebadge-label {
  width: 71.89%;
  height: auto;
}

.p-land__pricebadge-divider {
  width: 84.22%;
  height: auto;
}

.p-land__pricebadge-heading {
  width: 75.07%;
  height: auto;
}

.p-land__price-plan-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: 330px;
}

.p-land__price-block {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 204px;
}

.p-land__price-block img {
  display: block;
  width: 100%;
  height: auto;
}

.p-land__siteplan {
  flex-shrink: 0;
  width: 121px;
  height: 67.5px;
  border: 0.5px solid #000;
  overflow: hidden;
}

.p-land__siteplan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-land__fineprint {
  margin: 0;
  width: 100%;
  max-width: 331px;
  color: #231815;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
}