@charset "UTF-8";
/*color*/
/* guideline */
/*font-family*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/*gHeader用*/
/* media query */
/* ------------------------------------------------------------
    LAYOUT
------------------------------------------------------------ */
/* ------------------------------------------------------------
    MV
    デザイン基準幅：SP 390 / TAB 768 / PC 1440（数値は基準幅に対するvw・%換算）
------------------------------------------------------------ */
.s-mv {
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #F5F5F5), to(#DADADA));
  background: linear-gradient(180deg, #F5F5F5 60%, #DADADA 100%);
  /* 背景の上に重ねる薄いグレーのベール（画像・光レイヤーより下 / 開始100%→終了0%） */
}
.s-mv__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #161616;
  opacity: 0; /* 既定は透明。JS(演出)開始時に 1 → 0 へフェード */
  pointer-events: none;
}
.s-mv__img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* 建物CG ─ 下から立ち上がるグラデーションマスク（--reveal を JS でアニメート） */
}
.s-mv__img__cg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  --reveal: 200%;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--reveal) - 12%), rgba(0, 0, 0, 0) calc(var(--reveal) + 2%));
  mask-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to top, #000 calc(var(--reveal) - 12%), rgba(0, 0, 0, 0) calc(var(--reveal) + 2%));
}
.s-mv__img__grad {
  position: absolute;
  width: 100%;
  height: 17.59%;
  left: 0;
  bottom: 0;
  z-index: 4;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 22, 22, 0)), to(#161616));
  background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, #161616 100%);
}
.s-mv {
  /* パーティクル描画キャンバス（建物CGの手前に重ねる） */
}
.s-mv__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.s-mv {
  /* 最上部から落ちてくる一粒の光 */
}
.s-mv__spark {
  position: absolute;
  top: -5%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  /* 明るい背景でも見えるよう、白コア＋濃いブルーのハロー */
  background: radial-gradient(circle, rgba(245, 251, 255, 0.95) 0%, rgba(70, 140, 225, 0.95) 32%, rgba(30, 80, 140, 0) 72%);
  -webkit-box-shadow: 0 0 16px 5px rgba(50, 120, 210, 0.55), 0 0 34px 10px rgba(30, 80, 140, 0.4);
          box-shadow: 0 0 16px 5px rgba(50, 120, 210, 0.55), 0 0 34px 10px rgba(30, 80, 140, 0.4);
}
.s-mv {
  /* 着地時に下から広がる閃光 */
}
.s-mv__flash {
  /* ▼ 採用検討中：この閃光（楕円グラデーション）を消しています。
     復活させたいときは下の display:none の行をコメントアウト（削除）してください。 */
  display: none;
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 100%;
  height: 55%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  /* 明るい背景を青くにじませる（multiply で下地を染める） */
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(60, 130, 215, 0.55) 0%, rgba(90, 160, 235, 0.28) 38%, rgba(120, 180, 255, 0) 72%);
  mix-blend-mode: multiply;
}
.s-mv {
  /* キャッチコピー（出現演出は mv-animation.js。JS無効時はそのまま表示される） */
}
.s-mv__catch {
  position: absolute;
  inset: 0;
  z-index: 5;
  color: #161616;
  /* JSで1文字ずつ<span class="char">に分解して個別アニメーションする */
}
.s-mv__catch .char {
  display: inline-block;
}
.s-mv {
  /* SPのみ：ヘッダーロゴとの間隔確保のため、デザイン値の86%サイズで配置 */
}
.s-mv__catch-01 {
  position: absolute;
  top: 13.07%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  font-size: 9.73vw;
  /* 下線より下を隠すマスク（文字が線の下から現れる。左右は下線のはみ出し分の余裕） */
  clip-path: inset(0 -0.75em 0.01em);
}
.s-mv__catch-01 .is-s {
  font-size: 6.95vw;
}
.s-mv__catch-01 .is-notes {
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-top: 0.1em;
  font-size: 1.83vw;
}
.s-mv__catch-01::after {
  content: "";
  position: absolute;
  left: 50%;
  /* --line を JS で 0→1 にして線を左端から伸ばす */
  -webkit-transform: translateX(-50%) scaleX(var(--line, 1));
          transform: translateX(-50%) scaleX(var(--line, 1));
  -webkit-transform-origin: left center;
          transform-origin: left center;
  bottom: 0.015em;
  width: 55.13vw;
  height: 1px;
  background: currentColor;
}
.s-mv__catch-02 {
  position: absolute;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  font-size: 11.12vw;
  /* 下線より下を隠すマスク（文字が線の下から現れる） */
  clip-path: inset(0 -0.75em 0.01em);
  /* 句読点分だけ僅かに左へ寄せた下線（デザイン準拠） */
}
.s-mv__catch-02::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.05em);
  /* --line を JS で 0→1 にして線を左端から伸ばす */
  -webkit-transform: translateX(-50%) scaleX(var(--line, 1));
          transform: translateX(-50%) scaleX(var(--line, 1));
  -webkit-transform-origin: left center;
          transform-origin: left center;
  bottom: 0.015em;
  width: 55.13vw;
  height: 1px;
  background: currentColor;
}
.s-mv__catch-02-a {
  top: 19.2%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  letter-spacing: 0.04em;
}
.s-mv__catch-02-b {
  top: 26.06%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  letter-spacing: -0.04em;
}
.s-mv {
  /* キャプション（外観完成予想図） */
}
.s-mv-cap {
  z-index: 5;
}
.s-mv {
  /* TABLET（769px-1199px） */
}
@media only screen and (min-width: 769px) {
  .s-mv__catch-01 {
    top: 10.83%;
    font-size: 7.68vw;
  }
  .s-mv__catch-01 .is-s {
    font-size: 5.47vw;
  }
  .s-mv__catch-01 .is-notes {
    font-size: 1.43vw;
  }
  .s-mv__catch-01::after {
    width: 43.17vw;
  }
  .s-mv__catch-02 {
    font-size: 8.72vw;
  }
  .s-mv__catch-02::after {
    width: 43.17vw;
  }
  .s-mv__catch-02-a {
    top: 19.2%;
    left: 8.6%;
    -webkit-transform: none;
            transform: none;
  }
  .s-mv__catch-02-b {
    top: 19.2%;
    left: 49.2%;
    -webkit-transform: none;
            transform: none;
  }
}
.s-mv {
  /* PC（1200px-） */
}
@media only screen and (min-width: 1200px) {
  .s-mv__catch-01 {
    top: 24.19%;
    left: 5.14%;
    -webkit-transform: none;
            transform: none;
    font-size: 5.83vw;
  }
  .s-mv__catch-01 .is-s {
    font-size: 4.17vw;
  }
  .s-mv__catch-01 .is-notes {
    font-size: 0.76vw;
  }
  .s-mv__catch-01::after {
    width: 33.06vw;
  }
  .s-mv__catch-02 {
    font-size: 6.67vw;
  }
  .s-mv__catch-02::after {
    width: 33.06vw;
  }
  .s-mv__catch-02-a {
    top: 39.05%;
    left: 3.82%;
    -webkit-transform: none;
            transform: none;
  }
  .s-mv__catch-02-b {
    top: 39.05%;
    left: 62.71%;
    -webkit-transform: none;
            transform: none;
  }
}

/* ------------------------------------------------------------
    NEWS（今秋デビュー）
------------------------------------------------------------ */
.s-news {
  padding-block: clamp(18px, 15.7714285714px + 0.5714285714vw, 24px);
}
.s-news__txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: clamp(4px, 2.5142857143px + 0.380952381vw, 8px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  font-size: clamp(3.6rem, 2.56rem + 2.6666666667vw, 6.4rem);
}
.s-news__txt .is-accent {
  color: #4A6073;
}

/* ------------------------------------------------------------
    USP（大阪駅1.5km圏 / グラングリーン大阪徒歩圏）
------------------------------------------------------------ */
.s-usp {
  padding-block: clamp(20px, 15.5428571429px + 1.1428571429vw, 32px);
  background: #566573;
}
.s-usp__list {
  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: 12px;
}
@media only screen and (min-width: 640px) {
  .s-usp__list {
    -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: clamp(16px, 10.0571428571px + 1.5238095238vw, 32px);
  }
}
.s-usp__item {
  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;
  gap: clamp(10px, 6.2857142857px + 0.9523809524vw, 20px);
  width: 100%;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  font-size: clamp(2rem, 1.5542857143rem + 1.1428571429vw, 3.2rem);
}
@media only screen and (min-width: 769px) {
  .s-usp__item {
    width: clamp(300px, 245.7714285714px + 13.9047619048vw, 446px);
  }
}
.s-usp__item {
  /* 左右の角括弧（デザインのブラケットをCSSで再現。文字サイズに追従） */
}
.s-usp__item::before, .s-usp__item::after {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 0.5em;
  height: 1.9em;
  border: 1px solid currentColor;
  opacity: 0.48;
}
@media only screen and (min-width: 769px) {
  .s-usp__item::before, .s-usp__item::after {
    height: 2.25em;
  }
}
.s-usp__item::before {
  border-right: 0;
}
.s-usp__item::after {
  border-left: 0;
}

/* ------------------------------------------------------------
    IMAGE（エリア写真の帯：大阪駅／グラングリーン大阪／梅田夜景）
------------------------------------------------------------ */
.s-image__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.s-image__list__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  height: clamp(170px, 125.4285714286px + 11.4285714286vw, 290px);
  overflow: hidden;
  line-height: 0;
}
.s-image__list__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.s-image__notes {
  text-align: right;
  padding: 8px 8px 0;
}

/* ------------------------------------------------------------
    CONTENTS（カウントダウン＋CTAの共通ラッパー）
------------------------------------------------------------ */
.s-contents {
  position: relative; /* 背景パーティクル(canvas)の基準 */
  padding-top: clamp(40px, 31.0857142857px + 2.2857142857vw, 64px);
  padding-bottom: clamp(56px, 32.2285714286px + 6.0952380952vw, 120px);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(214, 214, 214, 0)), to(#cbcbcb));
  background: linear-gradient(180deg, rgba(214, 214, 214, 0) 20%, #cbcbcb 100%);
}
.s-contents__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(40px, 31.0857142857px + 2.2857142857vw, 64px);
}
.s-contents {
  /* 背景の光パーティクル（particles-bg.js が canvas を生成して挿入） */
}
.s-contents__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s-contents {
  /* 中身（canvas以外の直下要素）はパーティクルより前面に */
}
.s-contents > *:not(.s-contents__particles) {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
    COUNTDOWN（プロジェクト本格始動まで／99 DAYS）
------------------------------------------------------------ */
.s-countdown {
  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;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}
.s-countdown__head {
  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, 18.0571428571px + 1.5238095238vw, 40px);
}
.s-countdown__date {
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-size: clamp(2rem, 1.5542857143rem + 1.1428571429vw, 3.2rem);
}
.s-countdown__date .is-lg {
  font-size: clamp(2.5rem, 1.9428571429rem + 1.4285714286vw, 4rem);
}
.s-countdown__date .is-clr {
  color: #4A6073;
}
.s-countdown {
  /* 上下の縦の区切り線（デザインのVectorをCSSで再現） */
}
.s-countdown__line {
  width: 1px;
  height: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  background: rgba(86, 101, 115, 0.64);
}
.s-countdown__days {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  line-height: 1;
  white-space: nowrap;
  color: #4A6073;
  /* 「99」は Figma上は不透明な単色レイヤーが最前面のため単色で再現 */
}
.s-countdown__days .is-num {
  font-size: clamp(11rem, 6.4685714286rem + 11.619047619vw, 23.2rem);
  line-height: 0.85;
}
.s-countdown__days .is-unit {
  font-size: clamp(3.8rem, 2.24rem + 4vw, 8rem);
}

/* ------------------------------------------------------------
    CTA（物件エントリー受付中／エントリー・物件概要ボタン）
------------------------------------------------------------ */
.s-cta {
  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, 26.0571428571px + 1.5238095238vw, 48px);
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
}
.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;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}
.s-cta__ttl {
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-size: clamp(2.6rem, 1.4857142857rem + 2.8571428571vw, 5.6rem);
}
.s-cta__txt {
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-size: clamp(1.5rem, 1.3885714286rem + 0.2857142857vw, 1.8rem);
}
.s-cta {
  /* ボタン本体は共通コンポーネント（_component.scss）：
     .c-btn--primary--action（物件エントリー） / .c-btn--primary--transition（物件概要） */
}
.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%;
}
/*# sourceMappingURL=top.css.map */