/* ============================================================
   HLEX — Brand Tokens v1.0
   Brand Strategist / 2026-08-16
   これが唯一の正典。テーマ内で色・書体・字間を直接書かないこと。
   WordPress: theme.json とこのファイルの値を必ず一致させる。
   ============================================================ */

:root{
  /* ---- Colour ---------------------------------------------- */
  --hlex-sumi:   #0E0E0D;  /* 基調・全ページ背景 */
  --hlex-hinoki: #E8DCC4;  /* 主役色・ロゴ・見出し・罫線 */
  --hlex-cedar:  #8C4A2F;  /* 強調。1画面1箇所まで */
  --hlex-thermo: #3A2A20;  /* 面の区切り・カード背景 */
  --hlex-ivory:  #F5F2EC;  /* 本文・反転面（Column等） */

  /* 派生（透過。新しい色を足さず、必ずここから作る） */
  --hlex-line:      rgba(232,220,196,.16);
  --hlex-line-strong:rgba(232,220,196,.40);
  --hlex-text:      rgba(245,242,236,.72);
  --hlex-text-mute: rgba(245,242,236,.45);
  --hlex-surface:   #111110;

  /* ---- Typeface -------------------------------------------- */
  /* 欧文見出し・ロゴ：Cormorant Garamond Light(300) 確定 */
  --hlex-font-display: "Cormorant Garamond", "Times New Roman", serif;
  /* 和文：明朝（競合はゴシック。ここが最大の差別化。絶対にゴシックへ落とさない） */
  --hlex-font-jp: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
                  "Shippori Mincho", "Noto Serif JP", serif;
  /* 数値・寸法・ラベル・ボタンのみサンセリフ */
  --hlex-font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;

  --hlex-w-display: 300;
  --hlex-w-jp: 400;
  --hlex-w-jp-bold: 600;
  --hlex-w-ui: 300;

  /* ---- Letter-spacing（ロゴの生命線） ---------------------- */
  /* 大きくなるほど広げる。逆にすると必ず安く見える */
  --hlex-track-logo-sm:   .24em;  /* 小サイズ（〜24px） */
  --hlex-track-logo:      .30em;  /* 標準・ヘッダー */
  --hlex-track-logo-lg:   .38em;  /* 大サイズ */
  --hlex-track-logo-hero: .50em;  /* ファーストビュー専用 */
  --hlex-track-eyebrow:   .32em;
  --hlex-track-ui:        .26em;
  --hlex-track-jp-head:   .14em;
  --hlex-track-body:      .05em;

  /* ---- Rhythm ---------------------------------------------- */
  --hlex-lh-body: 2.1;
  --hlex-lh-head: 1.4;
  --hlex-section-y: 120px;
  --hlex-measure: 64ch;   /* 本文の最大行長 */

  /* ---- Motion（静けさがこのブランドの品格） ---------------- */
  --hlex-ease: cubic-bezier(.2,.7,.2,1);
  --hlex-dur: .7s;
}

@media (max-width: 820px){
  :root{ --hlex-section-y: 80px; }
}

/* ============================================================
   ロゴタイプ（画像を使わずテキストで組む場合の正しい姿）
   text-indent は必須。letter-spacing は最後の字の右にも余白を
   作るため、これが無いと視覚的に左へズレる。
   ============================================================ */
.hlex-logotype{
  font-family: var(--hlex-font-display);
  font-weight: var(--hlex-w-display);
  letter-spacing: var(--hlex-track-logo);
  text-indent: var(--hlex-track-logo);
  color: var(--hlex-hinoki);
  line-height: 1;
  white-space: nowrap;
}
.hlex-logotype--hero{
  letter-spacing: var(--hlex-track-logo-hero);
  text-indent: var(--hlex-track-logo-hero);
  font-size: clamp(54px, 10.5vw, 124px);
}
.hlex-logotype--sm{
  letter-spacing: var(--hlex-track-logo-sm);
  text-indent: var(--hlex-track-logo-sm);
}

/* ============================================================
   基本タイポ
   ============================================================ */
body.hlex{
  background: var(--hlex-sumi);
  color: var(--hlex-ivory);
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp);
  font-size: 14.5px;
  line-height: var(--hlex-lh-body);
  letter-spacing: var(--hlex-track-body);
  -webkit-font-smoothing: antialiased;
}
.hlex h1, .hlex h2, .hlex h3{
  font-family: var(--hlex-font-jp);
  font-weight: var(--hlex-w-jp-bold);
  letter-spacing: var(--hlex-track-jp-head);
  line-height: var(--hlex-lh-head);
}
.hlex .en-display{
  font-family: var(--hlex-font-display);
  font-weight: var(--hlex-w-display);
  letter-spacing: .04em;
}
.hlex p{ color: var(--hlex-text); max-width: var(--hlex-measure); }

/* 目に見えるラベル・数値・寸法 */
.hlex-eyebrow{
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-eyebrow);
  text-transform: uppercase;
  color: var(--hlex-text-mute);
}
.hlex-spec{           /* 例: W 2,400 × D 1,800 × H 2,100 mm */
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CTA — 塗りではなく1px罫線。ホバーで字間が開く。
   「押させる」のではなく「招く」ボタン。
   ============================================================ */
.hlex-btn{
  display: inline-block;
  padding: 17px 46px;
  border: 1px solid var(--hlex-line-strong);
  background: transparent;
  color: var(--hlex-hinoki);
  font-family: var(--hlex-font-ui);
  font-weight: var(--hlex-w-ui);
  font-size: 11px;
  letter-spacing: var(--hlex-track-ui);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--hlex-dur) var(--hlex-ease),
              letter-spacing var(--hlex-dur) var(--hlex-ease);
}
.hlex-btn:hover,
.hlex-btn:focus-visible{
  background: rgba(232,220,196,.09);
  letter-spacing: .34em;
}

/* ============================================================
   写真の扱い — 必ず暗部から始める。
   明るい既存写真をそのまま置くとラグジュアリーが崩れるため、
   暗部グラデーションを重ねるのを標準とする。
   ============================================================ */
.hlex-figure{ position: relative; overflow: hidden; background: var(--hlex-sumi); }
.hlex-figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.hlex-figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgba(14,14,13,.92) 6%, rgba(14,14,13,.12) 68%);
}

/* 一筋の光（MV・セクション区切りのブランド固有モチーフ） */
.hlex-beam{
  position:absolute; top:-10%; left:50%; width:1px; height:120%;
  background: linear-gradient(to bottom, transparent, rgba(232,220,196,.5), transparent);
  pointer-events:none;
}

/* ============================================================
   アクセシビリティ
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .hlex *,.hlex *::before,.hlex *::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}
.hlex :focus-visible{ outline:1px solid var(--hlex-hinoki); outline-offset:3px; }
.hlex-visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}