@charset "UTF-8";
/*color*/
/* guideline */
/*font-family*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/* media query */
/* ------------------------------------------------------------
    LAYOUT
------------------------------------------------------------ */
/* ------------------------------------------------------------
    MV
    デザイン基準幅：SP 〜767 / PC 768〜
    ・写真／ラベル／キャッチを別レイヤーで重ねる（後からアニメーションを足せるように）
    ・高さは写真の縦横比（SP 1560:2336 / PC 2880:1620）で決まり、幅に応じて伸縮する
------------------------------------------------------------ */
.s-mv {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* キャッチのサイズを「セクション幅」基準にするための箱（cqw の基準） */
  container-type: inline-size;
  /* --- 写真・桜・ラベル共通：素の縦横比のまま伸縮 ---
     3枚とも同じ寸法の画像なので、同じ指定で重ねればぴったり合う */
}
.s-mv__ph, .s-mv__sakura, .s-mv__prot {
  display: block;
}
.s-mv__ph img, .s-mv__sakura img, .s-mv__prot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1560/2336; /* mv-ph--sp.webp */
}
@media only screen and (min-width: 768px) {
  .s-mv__ph img, .s-mv__sakura img, .s-mv__prot img {
    aspect-ratio: 2880/1620; /* mv-ph--pc.webp */
  }
}
.s-mv {
  /* 桜・施設名ラベル：写真にぴったり重ねる
     重なり順は下から 航空写真 → 桜 → 施設名ラベル（HTMLの並び順どおり） */
}
.s-mv__sakura, .s-mv__prot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s-mv {
  /* 桜レイヤーは「黒背景に花びら」の画像（透過なし）で書き出されている。
     screen 合成にすると黒い部分が消えて花びらだけが光るように重なる。
     ※画像を透過ありに差し替える場合は、この指定は不要になります。 */
}
.s-mv__sakura {
  mix-blend-mode: screen;
}
.s-mv {
  /* キャッチコピー
     外側（__catch）＝位置決めだけを担当。JSからは触らない。
     内側（__catch-in）＝文字組み＋アニメーション対象。transform が空なので、
     GSAPで自由に動かしても位置が崩れない。

     ★Safari対策（Safari 26 で実測・確認済み）：
       以前は外側を「left:50% ＋ translateX(-50%)」で中央に置いていたが、
       Safariは「幅が中身で決まる箱」の中身が縦書きだけだと、その箱の幅を 0 と計算する。
       幅が0だと translateX(-50%) も 0 になって効かず、中身が右へはみ出して
       文字が中央から右に「文字幅の半分」ずれてしまう（Chromeでは起きない）。
       → 外側の幅を100%に確定させ、flexで中央寄せする形に変更（幅の自動計算をやめる）。 */
}
.s-mv__catch {
  position: absolute;
  left: 0;
  width: 100%;
  top: 13.36%; /* SP：78 / 584 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .s-mv__catch {
    top: 6.9%; /* PC：56 / 810 */
  }
}
.s-mv {
  /* 縦書き。字送りは Figma の行送り 1.25 相当（= letter-spacing 0.25em） */
}
.s-mv__catch-in {
  display: block;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-font-feature-settings: "vrt2" 1;
          font-feature-settings: "vrt2" 1;
  white-space: nowrap;
  color: #fff;
  line-height: 1;
  /* ★Safari対策：縦書き1行ぶんの幅を明示する。
     縦書きでは「1行の幅 ＝ line-height」なので、line-height:1 なら 1em。
     上の外側の対策と、どちらか片方でも直るが、念のため両方入れている。
     ※改行して2行にする場合は 2em、line-height を変えたらその倍数に直すこと。 */
  width: 1em;
  letter-spacing: 0.25em;
  font-size: 16.41vw; /* 古いブラウザ用フォールバック */
  font-size: 16.41cqw; /* SP：64 / 390 */
}
@media only screen and (min-width: 768px) {
  .s-mv__catch-in {
    font-size: 5.5556vw;
    font-size: 5.5556cqw; /* PC：80 / 1440 */
  }
}
.s-mv {
  /* 写真キャプション .s-mv__cap の位置は _component.scss の .c-cap--w-sh に任せる */
}

/* ------------------------------------------------------------
    USP
    ・モバイルファースト：SPの指定を土台に、min-width のメディアクエリで上書き
    ・〜767px：1項目めで改行して 1段目1項目 / 2段目2項目
    ・768px〜：3項目を横並び＋縦罫
      タブレット幅だとデザイン実寸のままでは1行に収まらないので、
      768〜1055px は min() + vw で全体を等比縮小し、1056px以上でデザイン実寸に固定する。
      （$usp-fs-full = 縮小をやめる幅。ここを変えると縮小の効き具合を調整できます）
------------------------------------------------------------ */
/* デザイン実寸(px) → $usp-fs-full の幅でちょうどその実寸になる vw 値 */
.s-usp {
  background-color: rgba(164, 139, 82, 0.16);
  padding-block: clamp(24px, 21.0285714286px + 0.7619047619vw, 32px);
  /* 桜の花びら（.s-sakura／z-index:2）より前面に出す */
  position: relative;
  z-index: 3;
}
.s-usp__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; /* 縦罫を行の高さいっぱいに伸ばすため */
  row-gap: 16px; /* SPで2段になったときの段間（PCは1段なので効かない） */
}
.s-usp__item {
  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-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(2px, 1.2571428571px + 0.1904761905vw, 4px);
  padding-inline: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
  text-align: center;
  white-space: nowrap;
  /* SP：1項目め（「大阪梅田」駅16～20分）で改行して 1段目1項目 / 2段目2項目 */
}
.s-usp__item:first-child {
  width: 100%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.s-usp__item {
  /* 縦罫は2段目の2つ目（＝3項目め）の左だけ */
}
.s-usp__item:nth-child(3) {
  border-left: 1px solid rgba(68, 68, 68, 0.32);
}
.s-usp__item {
  /* PC：3項目を横並びにして、2項目め以降の左に縦罫 */
}
@media only screen and (min-width: 768px) {
  .s-usp__item:first-child {
    width: auto;
  }
  .s-usp__item + .s-usp__item {
    border-left: 1px solid rgba(68, 68, 68, 0.32);
  }
}
.s-usp {
  /* 小見出し（阪急宝塚線「岡町」駅徒歩9分） */
}
.s-usp__lead {
  font-size: clamp(1.4rem, 1.3257142857rem + 0.1904761905vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #222222;
}
.s-usp {
  /* 訴求の本体（大きい文字の行） */
}
.s-usp__main {
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #222222;
}
.s-usp {
  /* 最小サイズは、375px幅の端末でも1行に収まる値にしています */
}
.s-usp__lg { /* 「大阪梅田」／南向き */
  font-size: clamp(3rem, 2.6285714286rem + 0.9523809524vw, 4rem);
  color: #826A34;
}
.s-usp__num { /* 16／20／72.8 */
  font-size: clamp(3.2rem, 2.7542857143rem + 1.1428571429vw, 4.4rem);
  line-height: 1.1;
  color: #826A34;
}
.s-usp__sub, .s-usp__sub--gold { /* 地上・階建・総戸数・戸・平均・㎡・中心 */
  font-size: clamp(2rem, 1.8514285714rem + 0.380952381vw, 2.4rem);
}
.s-usp__sub--gold { /* 「～」 */
  color: #826A34;
}
.s-usp {
  /* 補足（面積の幅・南向きの根拠） */
}
.s-usp__notes {
  font-size: clamp(1rem, 0.9257142857rem + 0.1904761905vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #444444;
}
.s-usp {
  /* PC（768px〜）の文字サイズ
     min(デザイン実寸, ○vw) の形。$usp-fs-full 未満では vw 側が効いて
     5種類が同じ比率で縮み、3カラムがタブレット幅でも1行に収まる。 */
}
@media only screen and (min-width: 768px) {
  .s-usp__lead {
    font-size: min(1.6rem, 1.5151515152vw);
  }
  .s-usp__lg {
    font-size: min(4rem, 3.7878787879vw);
  }
  .s-usp__num {
    font-size: min(4.4rem, 4.1666666667vw);
  }
  .s-usp__sub, .s-usp__sub--gold {
    font-size: min(2.4rem, 2.2727272727vw);
  }
  .s-usp__notes {
    font-size: min(1.2rem, 1.1363636364vw);
  }
}

/* ------------------------------------------------------------
    CTA
------------------------------------------------------------ */
.s-cta {
  margin-top: clamp(40px, 25.1428571429px + 3.8095238095vw, 80px);
  /* 桜の花びら（.s-sakura／z-index:2）より前面に出す */
  position: relative;
  z-index: 3;
}
.s-cta__in {
  display: -ms-grid;
  display: grid;
  gap: clamp(16px, 13.0285714286px + 0.7619047619vw, 24px);
}
.s-cta__lead {
  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);
  text-align: center;
}
.s-cta__ttl {
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-size: clamp(2.6rem, 2.08rem + 1.3333333333vw, 4rem);
}
.s-cta {
  /* ボタン本体は共通コンポーネント（_component.scss）：
     .c-btn--primary--action（物件エントリー） */
}
.s-cta__btns {
  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(20px, 15.5428571429px + 1.1428571429vw, 32px);
  width: 100%;
}
.s-cta__btns .c-btn--primary--action {
  max-width: 520px;
}

/* ------------------------------------------------------------
    AREA
    ・PC/SPとも同じレイアウト。横方向のサイズは % で持たせて、
      744px（デザイン基準幅1440px時の内容幅）の比率のまま伸縮させる。
    ・航空写真だけSPで左右をトリミング（左10% / 右20%）。
------------------------------------------------------------ */
/* 写真のサイズ比率（デザイン実寸 ÷ 744px）*/
/* デザイン実寸(px) → 内容ブロック744px に対する % */
.s-area {
  position: relative;
  overflow: hidden; /* 背景ぼかしが画面外にはみ出して横スクロールが出ないように */
  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(24px, 15.0857142857px + 2.2857142857vw, 48px);
  padding-top: clamp(104px, 68.3428571429px + 9.1428571429vw, 200px);
  /* --- 背景のぼかし（装飾） --- */
}
.s-area__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s-area__bg img {
  position: absolute;
  height: auto;
  max-width: none;
}
.s-area__bg-pink {
  top: 0;
  right: -60%;
  width: 180%;
}
@media only screen and (min-width: 768px) {
  .s-area__bg-pink {
    right: -31%;
    width: 116.6%;
  }
}
.s-area__bg-blue {
  bottom: 10%;
  left: -16.5%;
  width: 160%;
}
@media only screen and (min-width: 768px) {
  .s-area__bg-blue {
    width: 90%;
    bottom: 14%;
  }
}
.s-area {
  /* --- 内容ブロック（デザイン744px幅） ---
     重なり順：__bg(0) → __aerial(1) → 花びら(2) → __in(3) */
}
.s-area__in {
  position: relative;
  z-index: 3;
  width: 90%;
  max-width: 744px;
  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(40px, 25.1428571429px + 3.8095238095vw, 80px);
}
.s-area {
  /* キャッチコピー：縦書き
     縦書きでは letter-spacing が「字送り」、line-height が「行間（列の間隔）」になる。
     デザイン実寸：字送り34px（24px+10px）／列ピッチ52.6px */
}
.s-area__catch {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  -webkit-font-feature-settings: "palt" 0, "vrt2" 1;
          font-feature-settings: "palt" 0, "vrt2" 1; /* 縦書きのときはかなを等幅に */
  letter-spacing: 0.4167em; /* 34 / 24 - 1 */
  line-height: 2.19; /* 52.6 / 24 */
  color: #826A34;
}
.s-area {
  /* --- 周辺スポット写真3枚 --- */
}
.s-area__spots {
  width: 100%;
  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(4px, 2.5142857143px + 0.380952381vw, 8px);
}
.s-area__spots-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; /* 高さの違う2枚を下端で揃える */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* 3枚目の行：写真幅のまま右寄せし、右に40pxぶんの余白をあける */
}
.s-area__spots-row--last {
  width: 60.0806451613%;
  margin-left: auto;
  margin-right: 5.376344086%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* 写真と「※サブエントランス利用」の間隔は .c-cap--blw の padding-top に任せる */
  gap: 0;
}
@media only screen and (min-width: 768px) {
  .s-area__spots-row--last {
    width: 52.0161290323%;
  }
}
.s-area__ph img {
  display: block;
  width: 100%;
  height: auto;
}
.s-area__ph {
  /* 各写真の縦横比（書き出し画像の実寸どおり） */
}
.s-area__ph--01 {
  width: 56.5860215054%;
}
@media only screen and (min-width: 768px) {
  .s-area__ph--01 {
    width: 58.6021505376%;
  }
}
.s-area__ph--01 img {
  aspect-ratio: 436/290;
}
.s-area__ph--02 {
  width: 42.3387096774%;
}
@media only screen and (min-width: 768px) {
  .s-area__ph--02 {
    width: 40.3225806452%;
  }
}
.s-area__ph--02 img {
  aspect-ratio: 300/460;
}
.s-area__ph--03 {
  width: 100%; /* 行（--last）自体が写真幅 */
}
.s-area__ph--03 img {
  aspect-ratio: 387/219;
}
.s-area__ph figcaption {
  letter-spacing: 0;
}
.s-area {
  /* --- 現地周辺航空写真 --- */
}
.s-area__aerial {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.s-area__aerial img {
  display: block;
  height: auto;
  /* SP：トリミング */
  width: 175%;
  max-width: none;
  margin-left: -25%;
}
@media only screen and (min-width: 768px) {
  .s-area__aerial img {
    width: 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------
    SAKURA（桜の花びら）
    ・画面いっぱいに固定した層の中を、右上→左下へ花びらが舞う
    ・表示/非表示の判定は top.js（.s-area の位置を見て .is-show を付け外し）
    ・1枚ごとの速さ・大きさ・揺れ幅などは top.js が乱数でCSS変数に入れる
    ・重なり順：.s-area__aerial(1) < 花びら(2) < .s-area__in(3)
------------------------------------------------------------ */
.s-sakura {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none; /* クリックの邪魔をしない */
  /* 既定は非表示。.is-show が付くと現れ、外れるとゆっくり透明になる */
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1.6s ease, visibility 0s linear 1.6s;
  transition: opacity 1.6s ease, visibility 0s linear 1.6s;
}
.s-sakura.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 1.2s ease, visibility 0s;
  transition: opacity 1.2s ease, visibility 0s;
}
.s-sakura {
  /* 1枚ぶんの入れ物：右上から左下へ流れる */
}
.s-sakura__item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: var(--alpha, 1);
  -webkit-animation: sakura-fall var(--fall-dur, 14s) linear var(--fall-delay, 0s) infinite;
          animation: sakura-fall var(--fall-dur, 14s) linear var(--fall-delay, 0s) infinite;
}
.s-sakura {
  /* 風で左右に揺れる（落下とは別の周期にして不規則に見せる） */
}
.s-sakura__sway {
  display: block;
  -webkit-animation: sakura-sway var(--sway-dur, 4s) ease-in-out infinite;
          animation: sakura-sway var(--sway-dur, 4s) ease-in-out infinite;
}
.s-sakura {
  /* 花びらがひらひら裏返る */
}
.s-sakura img {
  display: block;
  width: var(--size, 32px);
  height: auto;
  -webkit-animation: sakura-spin var(--spin-dur, 6s) linear infinite;
          animation: sakura-spin var(--spin-dur, 6s) linear infinite;
}
.s-sakura {
  /* OSで「視差効果を減らす／アニメーションを減らす」設定の人には出さない */
}
@media (prefers-reduced-motion: reduce) {
  .s-sakura {
    display: none;
  }
}

/* 右上（画面外）→ 左下（画面外）へ */
@-webkit-keyframes sakura-fall {
  from {
    -webkit-transform: translate3d(var(--x-from, 110vw), -20vh, 0);
            transform: translate3d(var(--x-from, 110vw), -20vh, 0);
  }
  to {
    -webkit-transform: translate3d(var(--x-to, -20vw), 120vh, 0);
            transform: translate3d(var(--x-to, -20vw), 120vh, 0);
  }
}
@keyframes sakura-fall {
  from {
    -webkit-transform: translate3d(var(--x-from, 110vw), -20vh, 0);
            transform: translate3d(var(--x-from, 110vw), -20vh, 0);
  }
  to {
    -webkit-transform: translate3d(var(--x-to, -20vw), 120vh, 0);
            transform: translate3d(var(--x-to, -20vw), 120vh, 0);
  }
}
/* 風のゆらぎ。0%と100%を同じ値にしてループのつなぎ目を消している */
@-webkit-keyframes sakura-sway {
  0% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
            transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
  }
  35% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * 0.9)) rotate(6deg);
            transform: translateX(calc(var(--sway, 24px) * 0.9)) rotate(6deg);
  }
  65% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.3)) rotate(-4deg);
            transform: translateX(calc(var(--sway, 24px) * -0.3)) rotate(-4deg);
  }
  100% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
            transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
  }
}
@keyframes sakura-sway {
  0% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
            transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
  }
  35% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * 0.9)) rotate(6deg);
            transform: translateX(calc(var(--sway, 24px) * 0.9)) rotate(6deg);
  }
  65% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.3)) rotate(-4deg);
            transform: translateX(calc(var(--sway, 24px) * -0.3)) rotate(-4deg);
  }
  100% {
    -webkit-transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
            transform: translateX(calc(var(--sway, 24px) * -0.6)) rotate(-8deg);
  }
}
@-webkit-keyframes sakura-spin {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes sakura-spin {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
/*# sourceMappingURL=top.css.map */