@charset "UTF-8";
/* ==========================================================================
   variables.css — デザイントークン（高級賃貸 / モノトーン＋ヘアラインゴールド）
   トーン: ラグジュアリー×ミニマル
   基準: SP 375px / PC 1280px
   ★ 横展開はこのファイルの値だけ差し替えれば全体に反映されます。
   ========================================================================== */

:root {
  /* ---- フォント ---- */
  --font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --ff-en: "Helvetica Neue", "Segoe UI", Arial, var(--font-family);
  --ff-num: "Helvetica Neue", Arial, var(--font-family);
  --base-font-size: 16px;

  --font-xs:   clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem);
  --font-sm:   clamp(0.813rem, 0.78rem + 0.14vw, 0.875rem);
  --font-base: clamp(0.9rem,   0.86rem + 0.18vw, 1rem);
  --font-md:   clamp(1rem,     0.93rem + 0.31vw, 1.125rem);
  --font-lg:   clamp(1.125rem, 1.01rem + 0.49vw, 1.375rem);
  --font-xl:   clamp(1.375rem, 1.16rem + 0.92vw, 1.875rem);
  --font-2xl:  clamp(1.75rem,  1.4rem + 1.5vw, 2.75rem);
  --font-3xl:  clamp(2.25rem,  1.7rem + 2.3vw, 3.625rem);

  /* アイコン専用サイズ（本文の --font-* とは別系統） */
  --font-2xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.688rem);  /* ~10-11px 英字ラベル等 */

  --font-icon-sm:  clamp(1rem,     0.95rem + 0.2vw, 1.125rem);  /* ~16-18px */
  --font-icon-md:  clamp(1.25rem,  1.16rem + 0.4vw, 1.5rem);    /* ~20-24px */
  --font-icon-lg:  clamp(1.5rem,   1.34rem + 0.7vw, 2rem);      /* ~24-32px */

  --line-height-tight:   1.3;
  --line-height-normal:  1.8;
  --line-height-relaxed: 2;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-tight:  0.01em;
  --letter-spacing-normal: 0.02em;
  --letter-spacing-wide:   0.1em;
  --letter-spacing-en:     0.24em;  /* 英字ラベル用の広めトラッキング */

  /* ==========================================================================
     カラー — ライトブルーパレット
     配分は黄金比を目安にする（面積比）:
      61.8%  ベース      : 白 + ブルーグレー（背景・面）
      23.6%  メイン      : スカイブルー + ブルーインク（文字・見出し・主要アクション）
       9.0%  サブアクセント: ブライトブルー（罫線・英字ラベル・選択状態・アイコン）
       5.6%  CVアクセント : ブルーに合わせたオレンジ（内覧予約・問い合わせ・送信・検索）
     ========================================================================== */

  /* パレット原色（支給画像のペールブルー面とブライトブルー線に合わせる） */
  --palette-royal:     #0077c8;   /* 主要UI用の青 */
  --palette-navy:      #10324a;   /* 文字用のブルーインク */
  --palette-sky:       #dbe6ed;   /* 背景に使う淡いブルーグレー */
  --palette-sky-deep:  #b9cbd6;   /* 上のホバー用 */
  --palette-turquoise: #0b91e5;   /* アイコン・細線用の明るい青 */

  /* 文字 */
  --color-text-main:  #10324a;
  --color-text-sub:   #43657a;
  --color-text-muted: #7898aa;
  --color-text-white: #ffffff;

  /* 面（ベース 61.8%） */
  --color-bg-body:  #ffffff;
  --color-surface:  #ffffff;
  --color-bg-light: #fafbfc;
  --color-bg-soft:  #f3f6f8;

  --color-border:        #e1e8ed;
  --color-border-strong: #c3d2dc;

  /* メイン（23.6%）＝ 通常アクション・選択状態 */
  --color-accent:       var(--palette-royal);
  --color-accent-strong:#005f9f;
  --color-accent-ink:   #ffffff;
  --color-accent-soft:  #f5f9fc;

  /* サブアクセント（9.0%）＝ 押しすぎない強調（罫線・英字ラベル・アイコン） */
  --color-sub-accent:        var(--palette-turquoise);
  --color-sub-accent-strong: #0077c8;
  --color-sub-accent-soft:   #f6fafc;
  --color-sub-accent-text:   #006eaa;
  --color-sub-accent-deep:   #005b91;   /* 上のホバー用（さらに濃い） */

  /* アクセント = CV（5.6%）＝ 内覧予約・問い合わせ・送信・検索など最重要アクション専用。
     使いすぎると効かなくなるため、1画面に1〜2個までを目安にする。
     ※ #f47a1f と白文字のコントラスト比は高くないため、
        小さい文字を白で置かないこと（ボタンは太字・大きめの字で使う）。 */
  --color-cv:        #f47a1f;
  --color-cv-strong: #d86400;
  --color-cv-ink:    #ffffff;
  --color-cv-soft:   #fff0e3;

  /* ヘアライン（英字ラベル・細罫線・下線・ドット等）= サブアクセント */
  --color-hairline: var(--color-sub-accent);

  /* 賃料はメインブルーで見せる（不動産の赤は使わない） */
  --color-price: var(--palette-royal);

  --color-text-main-rgb:     16, 50, 74;
  --color-accent-rgb:        0, 119, 200;
  --color-cv-rgb:            244, 122, 31;
  --color-sub-accent-rgb:    11, 145, 229;
  --color-text-white-rgb:    255, 255, 255;

  /* エラー・必須ラベル */
  --color-danger:      #d64545;
  --color-danger-soft: #fdecec;
  --color-danger-line: #e57373;
  --color-danger-bg:   #fffafa;

  /* 画像の上に敷くオーバーレイ（キャプション帯・ギャラリー矢印・ライトボックス） */
  --color-scrim-rgb:      0, 0, 0;
  --color-overlay:        rgba(var(--color-scrim-rgb), 0.45);
  --color-overlay-strong: rgba(var(--color-scrim-rgb), 0.7);
  --color-overlay-deep:   rgba(var(--color-scrim-rgb), 0.9);

  /* ヒーローの背景（グラデーションは使わずネイビー一色） */
  --color-hero-bg: var(--palette-navy);

  /* 無効状態 */
  --color-disabled: #c3ccc5;

  /* 外部サービスのブランドカラー */
  --color-line:        #06c755;
  --color-line-strong: #05a446;
  --color-x:            #000000;
  --color-x-strong:     #2b2b2b;
  --color-youtube:      #ff0000;
  --color-youtube-strong: #cc0000;
  --color-facebook:     #1877f2;
  --color-facebook-strong: #1259ba;
  --color-tiktok:         #000000;
  --color-tiktok-strong:  #2b2b2b;
  --color-tiktok-cyan:    #25f4ee;
  --color-tiktok-magenta: #fe2c55;
  --color-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  /* ---- スペーシング（余白広め＝上質感） ---- */
  --space-xs:  clamp(0.25rem,  0.23rem + 0.09vw, 0.375rem);
  --space-sm:  clamp(0.5rem,   0.46rem + 0.18vw, 0.625rem);
  --space-md:  clamp(0.875rem, 0.8rem + 0.31vw, 1.125rem);
  --space-lg:  clamp(1.375rem, 1.2rem + 0.74vw, 1.875rem);
  --space-xl:  clamp(2rem,     1.7rem + 1.3vw, 3rem);
  --space-2xl: clamp(3rem,     2.5rem + 2.1vw, 4.5rem);
  --space-3xl: clamp(4rem,     3.2rem + 3.4vw, 6.5rem);
  --space-4xl: clamp(5rem,     4rem + 4.3vw, 8rem);
  --space-5xl: clamp(6rem,     4.8rem + 5.1vw, 9.5rem);

  --section-spacing: clamp(3.5rem, 2.4rem + 4.7vw, 7rem);
  --scroll-offset: 5rem;   /* sticky ヘッダー分の scroll-margin-top */
  --gutter: clamp(1.25rem, 0.6rem + 2.7vw, 2.75rem);
  --mobile-gutter: 1rem;

  /* ---- ボーダー半径（LPに合わせた控えめな角丸） ---- */
  --border-radius-sm:   8px;
  --border-radius-md:   8px;
  --border-radius-lg:   8px;
  --border-radius-xl:   8px;
  --border-radius-2xl:  8px;
  --border-radius-full: 100vw;   /* アバター等、円にしたい要素だけに使う */

  /* ---- シャドウ（最小限。浮かせる時だけ深く落とす） ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(var(--color-text-main-rgb), 0.05);
  --shadow-card: 0 24px 40px -32px rgba(0,0,0,0.5);
  --shadow-panel: 0 20px 50px -30px rgba(0,0,0,0.4);
  --shadow-button-accent: 0 10px 20px rgba(var(--color-accent-rgb), 0.28);
  --shadow-button-accent-hover: 0 14px 26px rgba(var(--color-accent-rgb), 0.34);
  --shadow-button-cv: 0 10px 20px rgba(var(--color-cv-rgb), 0.32);
  --shadow-button-cv-hover: 0 14px 26px rgba(var(--color-cv-rgb), 0.38);
  --shadow-button-neutral: 0 6px 16px rgba(var(--color-text-main-rgb), 0.08);
  --shadow-button-neutral-hover: 0 10px 24px rgba(var(--color-text-main-rgb), 0.14);

  /* ---- トランジション ---- */
  --duration-fast:   0.2s;
  --duration-base:   0.3s;
  --duration-medium: 0.5s;
  --duration-slow:   0.7s;
  --duration-slower: 0.9s;
  --easeOutCubic:  cubic-bezier(0.33, 0.85, 0.4, 0.96);
  --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  --easeOutExpo:    cubic-bezier(0.19, 1, 0.22, 1);
  --easeOutBack:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: var(--duration-base) var(--easeOutCubic);
  --transition-fast: var(--duration-fast) var(--easeOutCubic);
  --transition-all:  all var(--duration-base) var(--easeOutCubic);

  /* ---- z-index ---- */
  --z-base:       0;
  --z-above:      1;
  --z-content:    2;
  --z-decoration: 3;
  --z-slider:     4;
  --z-sticky:     10;
  --z-fixed:      20;
  --z-overlay:    999;   /* ドロワー背面のオーバーレイ */
  --z-header:     100;
  --z-drawer:     1000;
  --z-modal:      1100;   /* ライトボックス等、ドロワーより上 */

  /* ---- コンテナ幅 ---- */
  --container-lg: 1040px;
  --container-xl: 1240px;
  --container-max-width: 1240px;
}

/* LPは既存配色を維持する。LP本体は growth-up-001.css の --gu-* を主に使うが、
   base/common.css 由来の汎用クラスが混ざってもサイトカラー変更の影響を受けないようにする。 */
body.page-type-lp {
  --palette-royal:     #1855a6;
  --palette-navy:      #000080;
  --palette-sky:       #a9ceeb;
  --palette-sky-deep:  #8fbfe3;
  --palette-turquoise: #00afcc;

  --color-text-main:  #0f1c3f;
  --color-text-sub:   #44506e;
  --color-text-muted: #7c87a3;
  --color-text-white: #ffffff;

  --color-bg-body:  #ffffff;
  --color-surface:  #ffffff;
  --color-bg-light: #f6fafd;
  --color-bg-soft:  #dce9f7;

  --color-border:        #d7e3f0;
  --color-border-strong: #b4c8de;

  --color-accent:       var(--palette-royal);
  --color-accent-strong:#11417f;
  --color-accent-ink:   #ffffff;
  --color-accent-soft:  #e9f1fb;

  --color-sub-accent:        var(--palette-turquoise);
  --color-sub-accent-strong: #0093ab;
  --color-sub-accent-soft:   #e0f5fa;
  --color-sub-accent-text:   #007e94;
  --color-sub-accent-deep:   #00697b;

  --color-cv:        #ff6600;
  --color-cv-strong: #e65c00;
  --color-cv-ink:    #ffffff;
  --color-cv-soft:   #fff2e6;

  --color-hairline: var(--color-sub-accent);
  --color-price: var(--palette-royal);
  --color-hero-bg: var(--palette-navy);

  --color-text-main-rgb:     15, 28, 63;
  --color-accent-rgb:        24, 85, 166;
  --color-cv-rgb:            255, 102, 0;
  --color-sub-accent-rgb:    0, 175, 204;
}

/* ---- ダークテーマは無効化（ブランドカラー＝白×爽やかブルーで統一） ----
   OSがダーク設定でも常にライト（白×ブルー）で表示する方針のため、
   ダーク用の上書きは行いません。将来ダーク対応する場合はここに定義します。
@media (prefers-color-scheme: dark) {
  :root { ... }
}
*/