@charset "UTF-8";
/*color*/
/* セクションの背景に敷くベージュ（ACCESS など） */
/* セクションの背景に敷くグリーン（LOCATION など） */
/* guideline */
/*font-family*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/* SP下部の固定ナビ（.sp-nav-bar）の高さ。768px以上では非表示 */
/* 背景固定ブロック（.c-fixbg）の高さ ＝ MVの高さ
   .s-mv / .s-park内 / .s-cg で共通。変えるときは _base.scss の --fixbg-h を修正。
   $extra … その分だけ窓を下に伸ばす（MV→CONCEPTのフェード用）
   $mult  … 画面◯個ぶんの高さにする（次のセクションを重ねたい時に使う） */
/* MV → CONCEPT のフェード帯の高さ
   ・MVの窓（.s-mv）をこの分だけ下に伸ばす
   ・s-concept をこの分だけ上に引き上げて、グラデーションで映像を消す
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* ページタイトル欄（.p-pagettl）の高さ
   ・下に続く画像（.p-pagettl-image）が、画面に貼りつける画像の高さを
     計算するのに使う。高さを変えるときはここだけ直せばよい
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* media query */
/* ------------------------------------------------------------
    LAYOUT
------------------------------------------------------------ */
/* ------------------------------------------------------------
    MV
    デザイン基準幅：SP 〜767 / PC 768〜
------------------------------------------------------------ */
/* 位置・高さ・背景固定の仕組みは共通コンポーネント .c-fixbg 側（_component.scss）。
   ここではMV固有（動画のSP/PC出し分け・コントロール）だけを指定する。 */
.s-mv {
  /* 窓をフェード帯のぶんだけ下に伸ばし、s-conceptの上端まで映像を見せる。
     伸ばした分は .s-concept の margin-top（マイナス）で引き上げて相殺している。 */
  height: calc(var(--fixbg-h) * 1 + clamp(64px, -7.3142857143px + 18.2857142857vw, 256px));
  /* ▼ SP・縦長デバイスのときだけ、MVの枠を 375:597 の縦横比で止める ─────────
     ・min() を使っているので「375:597 で計算した高さ」が今の画面の高さより
       低いときだけ効く。画面が 375:597 より横長（＝縦に余裕がない機種）では
       これまで通り画面いっぱいのまま。
     ・枠が短くなったぶん、下の CONCEPT が最初の画面から少し見える。
     ・SPでは CONCEPT が映像に重ならず、映像の下端に隣接する
       （PCはこれまで通り、フェード帯が映像の下端に重なって溶ける見せ方）。
     ・動画も静止画もこの枠のサイズで表示される
       （幅・高さの指定は .c-fixbg__media 側。枠に合わせて中央基準で切り取り）
     ・上書きしているのは .s-mv の中だけなので、
       他のセクションの固定背景（.s-park / .s-cg など）の見た目は変わらない。 */
}
@media only screen and (max-width: 767px) {
  .s-mv {
    /* 375:597 で計算した高さ ＝ 画面の幅 × 597 ÷ 375 */
    --mv-ratio-h: calc(100vw * 597 / 375);
    /* 画面に貼りつく映像の高さ（.c-fixbg__media が参照している）。
       「画面いっぱいの高さ」と「375:597 の高さ」の低い方 */
    --fixbg-media-h: min(var(--fixbg-media-h-base), var(--mv-ratio-h));
    /* SKIPボタン・キャプションの持ち上げ量。
       映像の下端が「今見えている画面の下」よりはみ出しているぶんだけ上げる。
       はみ出していなければ 0 ＝ 枠の下端に置く */
    --fixbg-media-gap: max(0px, calc(var(--fixbg-media-h) - 100dvh + 70px));
    /* 窓（＝MVとして見える範囲）の高さ ＝ 映像の高さ ＋ フェード帯のぶん。
       .s-concept は margin-top のマイナスでフェード帯のぶんだけ上に戻るので、
       結果として CONCEPT の先頭が映像の下端にぴったり隣接する（＝重ならない）。
       ※フェード帯は映像の下ではなく背景色の上に乗るので、見た目は無地の余白 */
    height: calc(var(--fixbg-media-h) + clamp(64px, -7.3142857143px + 18.2857142857vw, 256px));
  }
}
.s-mv {
  /* ▲ ────────────────────────────────────── */
  /* 動画：SP/PCの出し分け（cover表示は .c-fixbg__media 側で指定済み） */
}
.s-mv__video {
  display: none;
  /* SP用（〜767px） */
}
.s-mv__video--sp {
  display: block;
}
@media only screen and (min-width: 768px) {
  .s-mv__video--sp {
    display: none;
  }
}
.s-mv__video {
  /* PC用（768px〜）※JS側の判定幅（768px）と揃える */
}
@media only screen and (min-width: 768px) {
  .s-mv__video--pc {
    display: block;
  }
}
.s-mv {
  /* 動画 → 静止画のクロスフェード
     ・切り替えのタイミングと秒数は top.js の MV_STILL で調整する
       （秒数はJSから --mv-fade / --mv-skip というCSS変数で渡している）
     ・.is-still が付いている間＝静止画を表示中 */
}
.s-mv__video, .s-mv__still, .s-mv__cap {
  -webkit-transition: opacity var(--mv-fade, 1.2s) linear;
  transition: opacity var(--mv-fade, 1.2s) linear;
}
.s-mv__still {
  /* 動画にぴったり重ねる（画像のcover表示は .c-fixbg__media 側で指定済み） */
  position: absolute;
  inset: 0;
  opacity: 0;
}
.s-mv {
  /* 静止画に重ねるキャッチコピー
     位置はFigmaの MV--sp（400×800）／MV--pc（1440×720）の比率をそのまま％にしている。
     ％なので、画面の縦横が変わっても design と同じ位置関係を保つ。 */
}
.s-mv__copy {
  position: absolute;
  z-index: 1;
  top: 22.25%; /* SP：178 ÷ 800 */
  left: 0;
  right: 0;
  text-align: center;
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #222222;
  font-size: clamp(2.9rem, 2.64rem + 0.6666666667vw, 3.6rem);
  opacity: 0;
  -webkit-transition: opacity var(--mv-copy, 1.2s) linear;
  transition: opacity var(--mv-copy, 1.2s) linear;
  /* SP：「千里丘陵、」で改行して2行 */
}
.s-mv__copy span {
  display: block;
}
@media only screen and (min-width: 768px) {
  .s-mv__copy {
    /* PC：1行で、画面の左寄せ */
    top: 28.5%; /* PC：205 ÷ 720 */
    left: 7.3%; /* PC：105 ÷ 1440 */
    right: auto;
    text-align: left;
  }
}
@media only screen and (min-width: 1000px) {
  .s-mv__copy span {
    display: inline;
  }
}
.s-mv.is-still .s-mv__still,
.s-mv.is-still .s-mv__cap {
  opacity: 1;
}
.s-mv.is-still .s-mv__video {
  opacity: 0;
}
.s-mv.is-still {
  /* 静止画に切り替わってから、少し遅れてコピーが出る */
}
.s-mv.is-still .s-mv__copy {
  opacity: 1;
  -webkit-transition-delay: var(--mv-copy-delay, 1.4s);
          transition-delay: var(--mv-copy-delay, 1.4s);
}
.s-mv {
  /* SKIPボタンで切り替えた時だけ、待たせないよう短い秒数にする */
}
.s-mv.is-skip .s-mv__video,
.s-mv.is-skip .s-mv__still,
.s-mv.is-skip .s-mv__cap {
  -webkit-transition-duration: var(--mv-skip, 0.4s);
          transition-duration: var(--mv-skip, 0.4s);
}
.s-mv.is-skip.is-still .s-mv__copy {
  -webkit-transition-delay: var(--mv-copy-delay-skip, 0.6s);
          transition-delay: var(--mv-copy-delay-skip, 0.6s);
}
.s-mv {
  /* コントロール（右下）とキャプション（左下）
     .c-fixbg__media（＝画面に固定される層）の中に置いているので、
     動画と一緒に画面へ貼り付き、MVが通り過ぎると一緒に切り取られる。 */
}
.s-mv__controls, .s-mv__cap {
  position: absolute;
  /* __media の高さは固定なので、アドレスバーのぶん（--fixbg-media-gap）を足して
     常に「今見えている画面の下」に置く。※中身は _base.scss を参照 */
  bottom: calc(var(--fixbg-media-gap) + clamp(12px, 7.5428571429px + 1.1428571429vw, 24px));
  z-index: 2;
  pointer-events: auto; /* 親の .c-fixbg__media で none にしているため戻す */
}
.s-mv__cap {
  bottom: calc(var(--fixbg-media-gap) + clamp(4px, 2.5142857143px + 0.380952381vw, 8px));
}
.s-mv__controls {
  right: clamp(12px, 7.5428571429px + 1.1428571429vw, 24px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.s-mv {
  /* 静止画のキャプション（外観完成予想図）
     イレギュラー：右下はSKIPボタンとぶつかるので左下に置く。
     見た目は .c-cap--w-sh（白文字＋影）を使い、位置指定だけ打ち消している。 */
}
.s-mv__cap {
  left: clamp(4px, 2.5142857143px + 0.380952381vw, 8px);
  right: auto;
  width: auto;
  text-align: left;
  opacity: 0;
}
.s-mv__btn {
  display: block;
  cursor: pointer;
  /* 表示の出し分け：.is-active あり＝ON側／なし＝OFF側 */
}
.s-mv__btn .s-mv__state--on {
  display: none;
}
.s-mv__btn .s-mv__state--off {
  display: block;
}
.s-mv__btn.is-active .s-mv__state--on {
  display: block;
}
.s-mv__btn.is-active .s-mv__state--off {
  display: none;
}
.s-mv__btn {
  /* SKIP / REPLAY */
}
.s-mv__btn--skip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: clamp(58px, 54.2857142857px + 0.9523809524vw, 68px);
  height: clamp(32px, 29.0285714286px + 0.7619047619vw, 40px);
  padding-inline: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
  border-radius: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #444444;
  font-size: clamp(1.4rem, 1.3257142857rem + 0.1904761905vw, 1.6rem);
}
.s-mv__btn {
  /* 音声ON/OFF ※アイコンSVGに白丸の背景を含む */
}
.s-mv__btn--mute {
  width: clamp(32px, 29.0285714286px + 0.7619047619vw, 40px);
  height: clamp(32px, 29.0285714286px + 0.7619047619vw, 40px);
}
.s-mv__btn--mute img {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
    CONCEPT
------------------------------------------------------------ */
.s-concept {
  /* MVの上に重ねて、__fade のグラデーションで映像を背景色に溶かす。
     MV側（.s-mv）は同じ分だけ窓を下に伸ばしてある。 */
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(64px, -7.3142857143px + 18.2857142857vw, 256px));
  padding-bottom: clamp(64px, 40.2285714286px + 6.0952380952vw, 128px);
  /* MVの映像 → 背景色 へのフェード帯 */
}
.s-concept__fade {
  height: clamp(64px, -7.3142857143px + 18.2857142857vw, 256px);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(245, 245, 245, 0)), color-stop(95%, #F5F5F5));
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, #F5F5F5 95%);
  pointer-events: none;
}
.s-concept__cont {
  background-color: #F5F5F5;
  margin-top: -2px;
}
.s-concept__in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(32px, 23.0857142857px + 2.2857142857vw, 56px);
  text-align: center;
}
.s-concept__hd {
  /* 文字サイズ等は共通の .c-heading--l。余白はgapで揃えるため打ち消す */
  margin-bottom: 0;
  /* SP：「御堂筋線直通」「×」「公園近接プロジェクト」を3行に */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-concept__hd {
    /* PC：1行に並べ、区切りはスペースではなくgapで作る
       （0.35em＝PC時に約12.5px。文字サイズに追従して伸縮する） */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.35em;
  }
}
.s-concept__catch {
  width: clamp(300px, 173.7142857143px + 32.380952381vw, 640px);
}
.s-concept__catch img {
  width: 100%;
  height: auto;
}
.s-concept__lead {
  font-size: clamp(1.6rem, 1.3028571429rem + 0.7619047619vw, 2.4rem);
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #444444;
}
.s-concept__link {
  text-align: center;
  margin-top: clamp(16px, 10.0571428571px + 1.5238095238vw, 32px);
}

/* ------------------------------------------------------------
    ACCESS
------------------------------------------------------------ */
.s-access {
  background-color: #F0EDE7;
  padding-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  padding-bottom: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  /* 見出し（TRAIN ACCESS ＋ 日本語のリード） ------------------------------ */
}
.s-access__hd-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
  margin-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
}
.s-access__hd {
  /* .c-heading--s をベース */
  margin-bottom: 0;
}
.s-access {
  /* 駅の写真＋所要時間 ------------------------------ */
}
.s-access__stations {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
  margin-top: clamp(40px, 31.0857142857px + 2.2857142857vw, 64px);
}
.s-access {
  /* 1段（横は写真どうしを隙間なしで並べる。
     折り返して2行になるSPだけ、上下に余白が入る） */
}
.s-access__row {
  display: -ms-grid;
  display: grid;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  row-gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
  /* 1段目：SP1列 → PC3列 */
}
.s-access__row--l {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 768px) {
  .s-access__row--l {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
.s-access__row {
  /* 2段目：SP2列 → PC4列 */
}
.s-access__row--s {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (min-width: 768px) {
  .s-access__row--s {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
.s-access__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
}
.s-access {
  /* 写真（上に駅名の英字が乗る） */
}
.s-access__ph {
  position: relative;
  /* 画像ファイルの比率（440:296）。読み込み前から高さを確保してガタつきを防ぐ */
  aspect-ratio: 440/296;
  overflow: hidden;
  /* このセクションだけは例外的に、スマホでもPC用の写真を使う（画質優先） */
}
.s-access__ph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.s-access__ph {
  /* 白い駅名を読みやすくするための暗いオーバーレイ */
}
.s-access__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.24);
}
.s-access__ph .c-cap--w-sh {
  z-index: 1; /* オーバーレイより前面へ */
}
.s-access {
  /* 写真の上に乗る駅名（英字） */
}
.s-access__en {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  width: 100%;
  text-align: center;
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: clamp(2.4rem, 2.4rem + 0vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #fff;
}
.s-access {
  /* 写真の下：駅名（和文）＋所要時間 */
}
.s-access__data {
  text-align: center;
}
.s-access__station {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.s-access__time {
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.s-access__time .num {
  font-size: clamp(2.8rem, 2.3542857143rem + 1.1428571429vw, 4rem);
}
.s-access__time .u {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
}
.s-access__time-day {
  font-size: clamp(1rem, 0.9628571429rem + 0.0952380952vw, 1.1rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-top: 2px;
  color: #666;
}
.s-access {
  /* 2段目はSPで2列に入るぶん、文字を少し小さくする（PCでは1段目と同じ大きさ） */
}
.s-access__row--s .s-access__en {
  font-size: clamp(1.7rem, 1.44rem + 0.6666666667vw, 2.4rem);
}
.s-access__row--s .s-access__station {
  font-size: clamp(1.6rem, 1.3028571429rem + 0.7619047619vw, 2.4rem);
}
.s-access__row--s .s-access__time .num {
  font-size: clamp(2.4rem, 1.8057142857rem + 1.5238095238vw, 4rem);
}
.s-access__row--s .s-access__time .u {
  font-size: clamp(1.4rem, 1.0285714286rem + 0.9523809524vw, 2.4rem);
}
.s-access {
  /* 交通アクセスページへのリンク ------------------------------ */
}
.s-access__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: clamp(40px, 31.0857142857px + 2.2857142857vw, 64px);
}

/* ------------------------------------------------------------
    PARK
------------------------------------------------------------ */
.s-park {
  background-color: #E7EBE5;
  /* デザイン指定の白い区切り線（上のACCESSセクションとの境目） */
  border-top: 1px solid #fff;
  padding-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  padding-bottom: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  /* 見出し（LOCATION ＋ 日本語のリード）。ACCESSセクションと同じ作り */
}
.s-park__hd-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
  margin-top: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  margin-bottom: clamp(40px, 31.0857142857px + 2.2857142857vw, 64px);
}
.s-park__hd {
  /* .c-heading--s をベース */
  margin-bottom: 0;
}
.s-park {
  /* 背景固定ブロックの下 ------------------------------ */
}
.s-park__in {
  width: 90%;
  max-width: 984px;
  margin-inline: auto;
  margin-top: clamp(32px, 20.1142857143px + 3.0476190476vw, 64px);
}
@media only screen and (min-width: 768px) {
  .s-park__in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.s-park {
  /* 写真2枚（PCデザインの左右のズレをSPでも踏襲） */
}
.s-park__photos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 13.0285714286px + 0.7619047619vw, 24px);
}
@media only screen and (min-width: 768px) {
  .s-park__photos {
    width: 60.98%; /* 600 / 984 */
  }
}
.s-park__ph {
  width: 77.33%; /* 464 / 600 */
}
.s-park__ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 464/280; /* 読み込み前から高さを確保 */
}
.s-park__ph {
  /* 2枚目は右寄せ。キャプションも写真の右端にそろう */
}
.s-park__ph:nth-child(even) {
  margin-left: auto;
}
.s-park {
  /* 現地周辺イメージイラスト */
}
.s-park__map {
  width: 70%;
  max-width: 360px; /* SP：大きくしすぎない */
  margin: clamp(8px, -3.8857142857px + 3.0476190476vw, 40px) auto 0;
}
@media only screen and (min-width: 768px) {
  .s-park__map {
    width: 32.52%; /* 320 / 984 */
    max-width: none; /* PCは幅%で決めるので上限を解除 */
    margin: 0;
  }
}
.s-park__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320/418; /* 読み込み前から高さを確保 */
}
.s-park {
  /* 周辺環境ページへのリンク ------------------------------ */
}
.s-park__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: clamp(40px, 31.0857142857px + 2.2857142857vw, 64px);
}

/* ------------------------------------------------------------
    USP
------------------------------------------------------------ */
/* 航空写真の上に3つの訴求を重ねるセクション。
   ・〜767　　　：縦積み（SPデザイン）
   ・768〜999　 ：横3カラム。注釈（約490m 等）は改行して下段へ
   ・1000〜　　 ：PCデザイン通り（注釈も同じ行に収める）
   文字サイズは1か所（--usp-size）で決めて、他はemで追従させている。 */
.s-usp {
  /* ピン留め中にCG（後ろのセクション）が手前に出てこないようにする。
     ・z-index … CGより手前に置く
     ・background-color … 上部の余白からCGが透けないようにする
     ・min-height … 画面いっぱいを覆わせる。足りないと、ピン留め中に
       上端にすき間ができてCGが覗いてしまう */
  position: relative;
  z-index: 1;
  background-color: #F5F5F5;
  min-height: 100lvh;
  /* 端数で下端に1本線が出るのを防ぐ（背景色を2px下へ伸ばす） */
  -webkit-box-shadow: 0 2px 0 #F5F5F5;
          box-shadow: 0 2px 0 #F5F5F5;
  padding-top: clamp(40px, 25.1428571429px + 3.8095238095vw, 80px);
  /* 航空写真 ------------------------------ */
}
.s-usp__ph {
  position: relative;
}
.s-usp__ph picture {
  display: block;
}
.s-usp__ph img {
  display: block;
  width: 100%;
  /* SP：画面幅が広がっても写真が縦に伸びすぎないよう高さを抑え、
     あふれた分は写真の「上側」を切り取る（object-position: bottom）。
     ▼調整はここの2つの数値だけでOK（左＝390px時 / 右＝1440px換算の高さ）
       数値を小さくするほど上が多く切り取られます。
       現在の設定＝390pxで768px（切り取りなし）、767pxで約1031px */
  height: clamp(768px, 496.1142857143px + 69.7142857143vw, 1500px);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}
@media only screen and (min-width: 768px) {
  .s-usp__ph img {
    /* PCは切り取らず、画像そのままの比率で表示 */
    height: auto;
    aspect-ratio: 1440/820; /* 読み込み前から高さを確保 */
  }
}
.s-usp__ph {
  /* キャプション（現地周辺航空写真）
     イレギュラー：PCは右下だと追従ボタン（.fix-cv-btn）と重なるので左下に置く。
     SPは追従ボタンが出ないので、これまでどおり右下のまま。 */
}
@media only screen and (min-width: 768px) {
  .s-usp__ph > .c-cap--w-sh {
    text-align: left;
  }
}
.s-usp {
  /* 写真上側の青みのモヤ（Figmaの Rectangle 43） */
}
.s-usp__haze {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 55%;
  opacity: 0.64;
  background: -webkit-gradient(linear, left top, left bottom, from(#B4DAFF), color-stop(60%, #B4DAFF), to(rgba(180, 219, 255, 0)));
  background: linear-gradient(to bottom, #B4DAFF 0%, #B4DAFF 60%, rgba(180, 219, 255, 0) 100%);
  pointer-events: none;
}
.s-usp {
  /* 3つの訴求 ------------------------------ */
}
.s-usp__list {
  position: absolute;
  left: 0;
  top: clamp(40px, 25.1428571429px + 3.8095238095vw, 80px);
  width: 100%;
  /* 左右が透ける白帯 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.72)), color-stop(80%, rgba(255, 255, 255, 0.72)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 20%, rgba(255, 255, 255, 0.72) 80%, rgba(255, 255, 255, 0) 100%);
  padding-block: clamp(32px, 26.0571428571px + 1.5238095238vw, 48px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(36px, 25.6px + 2.6666666667vw, 64px);
  /* 文字サイズの基準（「桃山台」「全邸パークビュー」の大きさ） */
  --usp-size: min(3.2rem, 8.2vw);
  font-size: var(--usp-size);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-usp__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    /* 3カラムが画面幅に収まるよう、狭い時は文字を縮める（社内ルール2-3）
       1250px以上でデザイン実寸の40pxになる */
    --usp-size: min(4rem, 3.6vw);
  }
}
.s-usp__item {
  position: relative;
  /* 項目の間の区切り線（SPは横線80px／PCは縦線） */
}
.s-usp__item + .s-usp__item::before {
  content: "";
  position: absolute;
  background-color: rgba(68, 68, 68, 0.32);
  left: 50%;
  top: calc(clamp(18px, 12.8px + 1.3333333333vw, 32px) * -1);
  width: 80px;
  height: 1px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  .s-usp__item + .s-usp__item::before {
    left: calc(clamp(18px, 12.8px + 1.3333333333vw, 32px) * -1);
    top: 50%;
    bottom: 0;
    width: 1px;
    height: 2.2em;
    -webkit-transform: translateX(0) translateY(-50%);
            transform: translateX(0) translateY(-50%);
  }
}
.s-usp {
  /* 「北大阪急行」「住居専有面積」 */
}
.s-usp__label {
  font-size: 0.375em;
  margin-bottom: 0.3em;
}
@media only screen and (min-width: 768px) {
  .s-usp__label {
    font-size: 0.4em;
  }
}
.s-usp {
  /* 「竹見公園近接」 */
}
.s-usp__sub {
  font-size: 0.48em;
  margin-bottom: 0.3em;
}
@media only screen and (min-width: 768px) {
  .s-usp__sub {
    font-size: 0.5em;
  }
}
.s-usp {
  /* 大きい文字の行
     ※flexで揃えると文字サイズ違いのベースラインがずれるため、
       inline（自然改行）のまま text-align で中央寄せしている。 */
}
.s-usp__main {
  text-align: center;
}
.s-usp__main .is-lg {
  font-size: 1em;
  color: #8F7946;
}
.s-usp__main .is-sm {
  font-size: 0.5em;
}
@media only screen and (min-width: 768px) {
  .s-usp__main .is-sm {
    font-size: 0.6em;
  }
}
.s-usp__main .is-num {
  font-size: 1.125em;
  color: #8F7946;
}
@media only screen and (min-width: 768px) {
  .s-usp__main .is-num {
    font-size: 1.1em;
  }
}
.s-usp {
  /* 「（約490m）」「（75㎡台～132㎡台）」
     ※縦位置の微調整用に vertical-align を置いています。数値を変えて調整してください。 */
}
.s-usp__note {
  font-size: 0.3125em;
  letter-spacing: 0.04em;
  color: #666666;
  vertical-align: baseline;
}
@media only screen and (min-width: 768px) {
  .s-usp__note {
    /* 768〜999：1行に収まらないので改行して下段へ */
    display: block;
    font-size: 0.3em;
    margin-top: 0.4em;
  }
}
@media only screen and (min-width: 1000px) {
  .s-usp__note {
    /* 1000〜：デザイン通り同じ行に戻す */
    display: inline;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------
    CG
------------------------------------------------------------ */
/* セクション自体が背景固定ブロック（.c-fixbg）。
   s-cta が重なっている間もCG画像を見せたいので、窓を s-cta の高さぶん
   （＝画面1つぶん）下に伸ばして、画面2つぶんの高さにしている。
   伸ばした分は .s-cta の margin-top（マイナス）で相殺。 */
.s-cg {
  /* ▼CGが全画面になってから s-cta が上がってくるまでの“遊び”
       大きくするほど、CGだけを見ている時間が長くなる */
  height: calc(var(--fixbg-h) * 2 + 100vh);
}

/* ------------------------------------------------------------
    CTA
------------------------------------------------------------ */
.s-cta {
  /* 高さはMV（.s-mv）と同じ */
  height: calc(var(--fixbg-h) * 1 + 0px);
  /* s-cg の上に重ねる。背景が半透明なのでCG画像が透けて見える。
     s-cg 側は同じ分だけ窓を下に伸ばしてある。 */
  margin-top: calc(-1 * var(--fixbg-h));
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.72);
  color: #fff;
}
.s-cta__in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, 15.0857142857px + 2.2857142857vw, 48px);
}
.s-cta__ttl {
  font-size: clamp(2.4rem, 1.8057142857rem + 1.5238095238vw, 4rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.s-cta {
  /* ボタン本体は共通コンポーネント（_component.scss）：
     .c-btn--arr--ghost--w（白い丸矢印ボタン） */
}
.s-cta__notes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  font-size: clamp(1.4rem, 1.2514285714rem + 0.380952381vw, 1.8rem);
  line-height: 1.4;
  letter-spacing: 0.08em;
}
.s-cta__notes-hl {
  color: #B59A5B;
}
/*# sourceMappingURL=top.css.map */