@charset "UTF-8";
/*color*/
/* guideline */
/*font-family*/
/* 物件会員限定サイト（MEMBER SITE）まわり */
/*category color*/
/*border*/
/*gradient*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/*gHeader用*/
/* SP下部の固定メニュー（.sp-nav-bar）の高さ。背景固定ブロックの高さ計算に使う */
/* 背景固定ブロック（.c-fixbg）の高さ。
   1画面ぶんが既定。2画面ぶんにしたいときは fixbg_height($mult: 2) のように使う。
   高さの中身を変えるときは _base.scss の --fixbg-h を修正する。 */
/* media query */
/* ------------------------------------------------------------
    INTRO
    デザイン基準幅：SP 〜767（背景写真 768×768 の正方形）/ PC 768〜（1440×768）
    ・背景写真の上に、縦書きのキャッチを重ねるだけの構成
    ・文字サイズ・余白は「セクション幅」基準（cqw）。写真と一緒に等比で伸縮する
      （PC幅ではセクション幅＝画面幅なので、vw のフォールバックと同じ値になる）
    ・ただし 1440px を超えたら、そこで打ち止め（min() で上限）。
      セクションの高さは768px、文字は80px／24pxで固定され、それ以上は大きくならない。
      写真だけが横に広がるので、object-fit: cover ではみ出しぶんを切っている。
    ・表示アニメはHTML側の .js-scrollani .js-scrollani-veil が担当
      （定義は _component.scss の ANIMATION）
------------------------------------------------------------ */
.s-intro {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 文字サイズを「セクション幅」基準にするための箱（cqw の基準） */
  container-type: inline-size;
  /* 背景写真：素の縦横比のまま伸縮。
     読み込み前から高さを確保しておく（スクロールアニメの発火位置ズレ・CLS対策） */
}
.s-intro__bg {
  display: block;
}
.s-intro__bg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1; /* bg-sakura--sp.webp */
  max-height: 600px;
  -o-object-fit: cover;
     object-fit: cover;
  /* 1440px超で高さを頭打ちにすると、写真は上下がはみ出して切れる。
     下端（落ちた花びらと影）は必ず見せたいので、切るのは上側だけにする。 */
  -o-object-position: center 90%;
     object-position: center 90%;
}
@media only screen and (min-width: 768px) {
  .s-intro__bg img {
    height: clamp(520px, 445.7142857143px + 19.0476190476vw, 720px);
    max-height: 768px; /* ＝1440px幅のときの高さ。これ以上は伸ばさない */
  }
}
.s-intro {
  /* キャッチコピー
     外側（__catch）＝位置決め専用。
     ★Safari対策：縦書きの中身を translate(-50%) で中央寄せすると、
       Safariは「幅が中身で決まる箱」の幅を0と計算してしまい右にずれる。
       → 幅を100%に確定させ、flexで中央に置く（→ 共通ルール 3-3）。 */
}
.s-intro__catch {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 文字は拡大なしのフェードだけにする（写真は既定の1.1のまま）。
     --veil-scale は .js-scrollani-veil__media が読む値。書いた要素にだけ効く。 */
  --veil-scale: 1;
}
.s-intro {
  /* 内側＝文字組み。縦書きなので row-reverse で「右から左」に並べる。
     HTMLの並び順＝読む順（桜華。→ 悠久の記憶が息づく地、→ 咲き継がれる誇り。） */
}
.s-intro__catch-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: min(6.1538vw, 24px); /* 古いブラウザ用フォールバック */
  gap: min(6.1538cqw, 24px); /* SP：24 / 390 */
  color: #A48B52;
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  -webkit-font-feature-settings: "vrt2" 1;
          font-feature-settings: "vrt2" 1;
}
@media only screen and (min-width: 768px) {
  .s-intro__catch-in {
    gap: min(2.7777vw, 36px);
    gap: min(2.7777cqw, 36px); /* PC：40 / 1440。1440px超は32pxで固定 */
  }
}
.s-intro {
  /* 大きい方（桜華。）
     ★Safari対策：縦書き1行ぶんの幅を明示する。
       縦書きでは「1行の幅 ＝ line-height」なので、line-height:1 なら 1em。
     ※字送りは Figma の行送り 1.25 相当（= letter-spacing 0.25em） */
}
.s-intro__main {
  display: block;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1;
  width: 1em;
  letter-spacing: 0.25em;
  font-size: min(14.359vw, 80px); /* 古いブラウザ用フォールバック */
  font-size: min(14.359cqw, 80px); /* SP：56 / 390 */
}
@media only screen and (min-width: 768px) {
  .s-intro__main {
    font-size: min(11vw, 80px);
    font-size: min(11cqw, 80px); /* PC：80 / 1440。1440px超は80pxで固定 */
  }
}
.s-intro {
  /* 小さい方（2行）。こちらも右から左の順に並べる */
}
.s-intro__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: min(3vw, 16px); /* 古いブラウザ用フォールバック */
  gap: min(3cqw, 16px); /* 目視 */
  padding-top: 0.7vw;
  padding-top: 0.7cqw; /* 目視 */
}
@media only screen and (min-width: 768px) {
  .s-intro__lead {
    gap: min(1.6666vw, 24px);
    gap: min(1.6666cqw, 24px); /* PC：24 / 1440。1440px超は20pxで固定 */
    padding-top: min(0.3vw, 3px);
    padding-top: min(0.3cqw, 3px); /* 目視 1440px超は3pxで固定 */
  }
}
.s-intro {
  /* ※字送りは Figma の行送り 1.4 相当（= letter-spacing 0.4em） */
}
.s-intro__lead-line {
  display: block;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  line-height: 1;
  width: 1em;
  letter-spacing: 0.4em;
  font-size: min(4.359vw, 24px); /* 古いブラウザ用フォールバック */
  font-size: min(4.359cqw, 24px); /* SP：17 / 390 */
}
@media only screen and (min-width: 768px) {
  .s-intro__lead-line {
    font-size: min(3.2vw, 24px);
    font-size: min(3.2cqw, 24px); /* PC：24 / 1440。1440px超は24pxで固定 */
  }
}

/* ------------------------------------------------------------
    PARKSIDE
    デザイン基準幅：PC 1440
    ・縦の余白はすべてこのセクションの gap で管理する（見出しコンポーネントの
      margin-bottom はここで打ち消している）
    ・背景のぼかしは下半分のブロック（__lower）に付けている。
      Figmaではセクション全体に敷いてあるが、これは重なり順の都合。
    ・重なり順：__bg(0) → __cg（大きな写真）(1) → 桜の花びら(2)
                → __head / __lower-in（文字・c-photolist）(3)
------------------------------------------------------------ */
.s-parkside {
  position: relative;
  /* ここでは切らない。ぼかしをセクションの外まで広げたいので、
     左右の切り取りは main（_contents.scss）にまとめている。 */
  padding-top: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  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(40px, 34.0571428571px + 1.5238095238vw, 56px);
  /* 余白はこのセクションの gap で決めるので、部品側の下余白は消す */
}
.s-parkside .c-heading--l,
.s-parkside .c-heading--m,
.s-parkside .c-heading--m--point {
  margin-bottom: 0;
}
.s-parkside {
  /* --- 見出しブロック --- */
}
.s-parkside__head {
  position: relative;
  z-index: 3; /* 背景のぼかし・桜の花びらより前面に */
  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(32px, 23.0857142857px + 2.2857142857vw, 56px);
}
.s-parkside {
  /* --- 外観完成予想図（画面いっぱい） --- */
}
.s-parkside__cg {
  /* 背景のぼかし（__bg／z-index:0）は、この写真の高さまで伸びてくる。
     重ね順はHTMLの並び順で決まるため、指定しないと写真の上に被さってしまう。
     桜の花びら（z-index:2）よりは後ろ＝花びらが写真の上を舞う。 */
  z-index: 1;
}
.s-parkside__cg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768/648; /* cg-parkside--sp.webp */
}
@media only screen and (min-width: 768px) {
  .s-parkside__cg img {
    aspect-ratio: 1440/720; /* cg-parkside--pc.webp */
  }
}
.s-parkside {
  /* --- 下半分（Figmaの Frame 114） --- */
}
.s-parkside__lower {
  position: relative;
}
.s-parkside {
  /* 背景のぼかし（装飾）
     左右の位置と大きさはトップページ（top.scss の .s-area__bg-pink）と同じ。
     上下位置だけこのページのデザインに合わせている。
     ずらす量は画像自身の高さ基準（translateY）にしてあるので、
     中身の量が増減しても位置関係が崩れない。 */
}
.s-parkside__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s-parkside__bg img {
  position: absolute;
  top: 0;
  height: auto;
  max-width: none;
  right: -40%;
  width: 180%;
  -webkit-transform: translateY(-32%);
          transform: translateY(-32%);
}
@media only screen and (min-width: 768px) {
  .s-parkside__bg img {
    right: -31%;
    width: 116.6%;
  }
}
.s-parkside__lower-in {
  position: relative;
  z-index: 3; /* 文字と c-photolist は桜の花びらより前面に */
  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(32px, 26.0571428571px + 1.5238095238vw, 48px);
}
.s-parkside {
  /* --- 本文（文字組みは共通部品 .c-txt--lead） --- */
}
.s-parkside__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);
}

/* ------------------------------------------------------------
    LANDSCAPE
    デザイン基準幅：PC 1440
    ・背景のぼかし（青）は、大きさと左右位置をトップページ（.s-area__bg-blue）と
      同じにし、上下位置だけこのページのデザインに合わせている
    ・空撮はSPだけ左右をトリミング（トップの .s-area__aerial と同じ設定）
    ・重なり順：__bg(0) → __aerial(1) → 桜の花びら(2) → __in(3)
------------------------------------------------------------ */
.s-landscape {
  position: relative;
  /* 切り取りは main（_contents.scss）にまとめている。→ .s-parkside のコメント参照 */
  padding-top: clamp(64px, 43.2px + 5.3333333333vw, 120px);
  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(40px, 25.1428571429px + 3.8095238095vw, 80px);
  /* 余白はこのセクションの gap で決めるので、部品側の下余白は消す */
}
.s-landscape .c-heading--m {
  margin-bottom: 0;
}
.s-landscape {
  /* 背景のぼかし（装飾）
     ずらす量は画像自身の高さ基準（translateY）。中身の量が増減しても位置が崩れない。

     ★下だけ切る：
       上と左右へは今までどおりはみ出させたいが、下にはみ出すと注釈やフッターに
       かぶってしまう。inset() の値をマイナスにすると「その方向は切らない」意味に
       なるので、下だけ 0（セクションの下端でぴったり切る）にしている。
       ※ .s-landscape 本体ではなく、この入れ物に掛けるのがポイント。
         セクションに掛けると、中にある position:fixed の桜の花びらまで
         切り取られてしまう（clip-path は fixed の基準になるため）。 */
}
.s-landscape__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  clip-path: inset(-100% -100% 0 -100%);
}
.s-landscape__bg img {
  position: absolute;
  top: 0;
  height: auto;
  max-width: none;
  left: -16.5%;
  width: 160%;
  -webkit-transform: translateY(-10.7%);
          transform: translateY(-10.7%);
}
@media only screen and (min-width: 768px) {
  .s-landscape__bg img {
    width: 90%;
  }
}
.s-landscape {
  /* --- 見出し＋本文 --- */
}
.s-landscape__in {
  position: relative;
  z-index: 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;
  gap: clamp(32px, 23.0857142857px + 2.2857142857vw, 56px);
}
.s-landscape {
  /* 物件名（本文の2行目）だけ大きく金色に */
}
.s-landscape__name {
  display: block;
  font-size: clamp(2.2rem, 1.5314285714rem + 1.7142857143vw, 4rem);
  color: #826A34;
  margin-top: clamp(8px, 5.0285714286px + 0.7619047619vw, 16px);
}
.s-landscape__lead {
  text-align: center;
}
.s-landscape {
  /* --- 現地周辺航空写真 --- */
}
.s-landscape__aerial {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.s-landscape__aerial img {
  display: block;
  height: auto;
  aspect-ratio: 2880/1220; /* 読み込み前から高さを確保する（画像の実寸） */
  /* SP：左右をトリミング（トップの .s-area__aerial と同じ数値） */
  width: 190%;
  max-width: none;
  margin-left: -24%;
}
@media only screen and (min-width: 768px) {
  .s-landscape__aerial img {
    width: 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------
    SAKURA（桜の花びら）
    ※ トップページ（top.scss）から移設。トップのリニューアルで無くなるため。
    ・画面いっぱいに固定した層の中を、右上→左下へ花びらが舞う
    ・表示/非表示の判定は design_concept.js
      （.s-parkside に入ったら出し、.s-landscape を通り過ぎたら消す）
    ・1枚ごとの速さ・大きさ・揺れ幅などは design_concept.js が乱数でCSS変数に入れる
    ・重なり順：背景ぼかし(0) < 大きな写真(1) < 花びら(2) < 文字・c-photolist(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=design_concept.css.map */