/* ============================================================
   HBC 加盟者向け会員サイト（/members/）共通スタイル
   ------------------------------------------------------------
   読み込み順（各ページ共通）
     1. ../assets/css/site-common.css  … 公式HPのヘッダー/フッター体系
     2. ../assets/common.css           … プレースホルダー基礎スタイル
     3. ./members.css                  … 本ファイル（差分のみ）
   公式HPのデザイン体系（ネイビー/ゴールド/クリーム・八角形モチーフ・
   見出し Noto Serif JP／本文 Noto Sans JP）をそのまま踏襲する。
   ============================================================ */

:root {
  --navy: #0a1956;

  /* ゴールドは「文字用」「輪郭用」「装飾用」の3つに分ける。
     ------------------------------------------------------------
     --gold-ink  文字だけに使う。白 #ffffff／クリーム #faf9f6 上で
                 コントラスト比 4.87（必要 4.5）
     --gold-edge ボタンの罫・枠線・現在地の丸など、意味を持つ輪郭に使う。
                 クリーム上でコントラスト比 3.42（非テキストの必要 3.0）
     --gold      罫飾り・背景・ネイビー地の見出しなど純粋な装飾のみ。
                 明るい地の上では文字にも輪郭にも使わない（2.19しかない）
     ------------------------------------------------------------ */
  --gold: #c4a862;
  --gold-ink: #856a2c;
  --gold-edge: #a08344;
  --gold-line: rgba(196, 168, 98, 0.34);
  --cream: #faf9f6;
  --page-bg: #fdfbf4;
  --white: #ffffff;
  --line: rgba(10, 25, 86, 0.10);
  /* 半透明の文字色は「地色と合成した後」の値でコントラストを見ること。
     0.56 では合成後 3.95 で 4.5 に届かないため 0.62（合成後 4.78）にした。
     これ以上薄くしない。 */
  --text-soft: rgba(10, 25, 86, 0.74);   /* 合成後 7.23 */
  --text-mute: rgba(10, 25, 86, 0.62);   /* 合成後 4.78 */
  --ph-img: #FFB6C1;         /* 画像プレースホルダー */
  --ph-icon: #90EE90;        /* アイコンプレースホルダー */
  /* 八角形モチーフ（四隅を落とした正統な八角形） */
  --octa: polygon(
    14px 0, calc(100% - 14px) 0,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );
  --header-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* ============================================================
   全体の文字の大きさ（2026-08-17 アキラさん指示で 2ポイント分 拡大）
   ------------------------------------------------------------
   このサイトの font-size は共通CSSも含めて全部 rem 指定なので、
   ここの1行を変えるだけでヘッダーからフッターまで比例して変わる。
   16px（既定）→ 17.4px。いちど18.7px（+2pt）にしたが大きすぎたため、
   2026-08-17にアキラさん指示で 17.4px へ戻した（お知らせの説明が14px相当）。
   個別のクラスで px を直接書かないこと（ここが効かなくなる）。
   ============================================================ */
html { scroll-behavior: smooth; font-size: 109%; }
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--navy);
  background: var(--page-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; }

/* =========================================
   ヘッダー：会員サイトは常時クリーム地
   （公式HPは透過だが、会員側は各ページの直下が
     淡色のため常時地色を敷いて境界を明示する）
========================================= */
.site-header,
.site-header.is-scrolled {
  background: var(--cream);
  border-bottom: 1px solid var(--gold-line);
  padding: 0.85rem 2rem;
}
.site-header__brand-text {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}
/* 現在地・ホバーのゴールドは site-common.css の #c4a862 のままだと
   クリーム地でコントラスト比 2.19 しかない。文字用ゴールドへ寄せる（4.87）。
   PCのナビもSPのドロワー（地色はクリーム）も同じ色になる。 */
.site-header__nav a[aria-current="page"],
.site-header__nav a:hover {
  color: var(--gold-ink);
}
.site-header__nav a::after,
.site-header__nav a:hover::after {
  background: var(--gold-edge);
}
.members-body { padding-top: var(--header-h); }

/* =========================================
   汎用パーツ
========================================= */
.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
.octa {
  clip-path: var(--octa);
  background: var(--gold-line);
  padding: 1px;              /* 罫の太さ */
}
.octa__inner {
  clip-path: var(--octa);
  background: var(--white);
  height: 100%;
}
.sec-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.lead {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.9;
}
.note-line {
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ボタン（八角形の角落とし・公式HPのCTAと同系） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid var(--gold-edge);   /* 白地で罫が見えるよう濃度を上げる（3.42） */
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: rgba(196, 168, 98, 0.12); }
.btn--fill {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.btn--fill:hover { background: #14267a; }
.btn--block { display: flex; width: 100%; }
.btn--ghost { border-color: var(--line); color: var(--text-soft); }
.btn[disabled] { opacity: 0.45; cursor: default; }

/* プレースホルダー（common.css の .placeholder-img / .placeholder-icon を拡張） */
.placeholder-img,
.placeholder-icon {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #3a3a3a;
}
.ph-icon-64 {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 0.2rem;
}
/* 入口カードの画像枠：4:3 の横長。実画像に差し替えても比率は
   ここで固定されるので、カードの高さが揃ったまま入れ替わる。 */
.entry__thumb {
  width: 104px;
  /* img に width/height 属性が付くと aspect-ratio より属性が勝ち、
     縦に伸びる。height:auto を明示して比率どおりに縮ませる
     （加盟者の声の写真でも同じ罠を踏んだ）。 */
  height: auto;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  font-size: 0.62rem;
  padding: 0.2rem;
  object-fit: cover;
}
/* 実画像のカードは余白なしで敷き詰める（緑の仮枠だけ padding が要る） */
img.entry__thumb { padding: 0; }
.ph-frame {                  /* 外部サービス埋め込み枠のプレースホルダー */
  border: 1px dashed var(--gold-edge);
  background: rgba(196, 168, 98, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.4rem 1rem;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.7;
}
.ph-frame__tag {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}
.ph-frame--video { aspect-ratio: 16 / 9; }
.ph-frame--form  { min-height: 260px; }
.ph-frame--cal   { min-height: 300px; }

/* =========================================
   ① マイページ Hero（英字大・日本語小／必須ルール）
   高さはスマホ縦で画面の4分の1以内に収める
========================================= */
.mp-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 2026-08-08：ピンクの仮画像から実写へ差し替え。
     左が明るく空いた構図なので、文字は左に置いたまま成立する。
     縦位置は 73%。画像全体をブラウザに出して実測したところ、主役のダイヤの
     中心は画像の縦 67% にある。Hero は横長で、見える帯は画像の高さの
     3割弱しかないため、この位置を中心に持ってこないと石が画面から外れる。
     ※ 38%（初回）は石の上端が覗くだけ。100%（いちばん下）は行き過ぎで、
       石を通り越してぼけた光しか映らなくなった。 */
  background-color: #f7f4ef;
  background-image: url("../assets/images/photos/members-hero.jpg");
  background-size: cover;
  background-position: center 73%;
  display: block;
  padding: 0;
}
/* 文字の下だけを軽く起こすベール。
   実写に差し替えたあと、文字色 --gold-ink（#856a2c）とのコントラストを
   実測して濃度を決めた。左は文字が乗るので厚め、右は写真を見せるので薄く。
   ★画像を差し替えたら必ず測り直すこと。暗い画像なら文字色を明るく戻す。 */
.mp-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(250, 249, 246, 0.88) 0%,
    rgba(250, 249, 246, 0.72) 40%,
    rgba(250, 249, 246, 0.58) 70%,
    rgba(250, 249, 246, 0.10) 100%
  );
  z-index: 1;
}
.mp-hero__phlabel {
  position: absolute;
  left: 16px;
  bottom: 4px;
  z-index: 3;
  font-size: 0.625rem;   /* 10px。差し替え時に消える制作用の注記 */
  letter-spacing: 0.04em;
  color: #6b4a50;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  line-height: 1.4;
}
.mp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 14px;
}
.mp-hero__en {                        /* 英字＝大 */
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(1.95rem, 8vw, 3.4rem);
  letter-spacing: 0.28em;
  line-height: 1.1;
  color: var(--gold-ink);
  text-shadow: 0 1px 2px rgba(250, 249, 246, 0.95);
}
.mp-hero__ja {                        /* 日本語＝小 */
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(0.72rem, 3vw, 1.05rem);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--navy);
  margin-top: 0.35rem;
}
.mp-hero__name {
  text-align: right;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-top: 0.35rem;
}

/* 下層ページ用の小さめHero（同じく英字大・日本語小） */
.sub-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--gold-line);
}
.sub-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 14px;
}
.sub-hero__en {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  letter-spacing: 0.24em;
  line-height: 1.1;
  color: var(--gold-ink);
}
.sub-hero__ja {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.72rem, 3vw, 0.95rem);
  letter-spacing: 0.14em;
  color: var(--navy);
  margin-top: 0.3rem;
}
.sub-back {
  display: inline-block;
  font-size: 0.74rem;
  color: var(--text-mute);
  margin-top: 0.5rem;
}
.sub-back:hover { color: var(--gold-ink); }

/* =========================================
   マイページ本文の余白
========================================= */
.mp-body { padding-top: 14px; padding-bottom: 40px; }

/* =========================================
   誉さんの手紙（orientation.html の冒頭）
   ------------------------------------------------------------
   もとはマイページの歓迎枠に置き、初回だけ展開していた。
   歓迎動画の撮影予定が無くなり手紙が恒久化したため、2026-08-07 に
   オリエン動画ページの冒頭へ移設（開閉の仕組みごと廃止）。
   オリエン動画ページは加盟直後に必ず1回通り、その後はほぼ戻らない
   ため、条件分岐なしで「加盟直後に1回だけ読まれる」が成立する。
========================================= */
.letter { clip-path: var(--octa); background: var(--gold-line); padding: 1px; }
/* ページ先頭に置くとき（オリエン動画ページ）。Hero との間を空ける。 */
.letter--lead { margin-top: 16px; }
.letter__inner {
  clip-path: var(--octa);
  background: var(--cream);
  padding: 16px 16px 14px;
}
.letter__body {
  font-family: "Noto Serif JP", serif;
  font-size: 0.75rem;          /* スマホ縦375pxで1文が折り返さない上限 */
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.letter__sign {
  font-family: "Noto Serif JP", serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-align: right;
  color: var(--navy);
  margin-top: 0.55rem;
}

/* =========================================
   5段階バー（横1本を厳守・2段にしない）
========================================= */
.steps { margin-top: 14px; }
.steps__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  padding: 10px 0 8px;
}
.steps__row::before {          /* 背景の横線 */
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 16px;
  height: 1px;
  background: var(--line);
}
.steps__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-mute);
  min-height: 44px;
  justify-content: flex-start;
}
.steps__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(10, 25, 86, 0.28);
}
.steps__label {
  font-size: 0.6875rem;      /* 11px。実UIで最小の文字なので下限を11pxに置く */
  letter-spacing: 0;
  /* 2026-08-08：ラベルを略さない方針に変えた（オリエン→オリエンテーション、
     講習→スタートアップ講習）。nowrap のままだと5等分の枠を超えて隣と重なるため、
     折り返しを許可する。1行に収める見た目より、読めることを優先する。 */
  /* label の \n をそのまま改行として使う（改行位置はアキラさん指定：
     オリエン／テーション、スタート／アップ講習）。それ以外は自動で折り返す。 */
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.3;
  padding: 0 2px;
}
/* 現在地・完了の丸は「意味のある輪郭」なので罫を --gold-edge にして
   明るい地でも形が判別できるようにする（塗りのゴールドは見た目のまま） */
.steps__item.is-done .steps__dot { background: var(--gold); border-color: var(--gold-edge); }
.steps__item.is-done .steps__label { color: var(--text-soft); }
.steps__item.is-current .steps__dot {
  background: var(--gold);
  border-color: var(--gold-edge);
  box-shadow: 0 0 0 4px rgba(196, 168, 98, 0.25);
}
.steps__item.is-current .steps__label {
  color: var(--gold-ink);
  font-weight: 700;
}
/* 到達後の畳んだバー。ラベルは11pxのまま（判読性の下限）で、
   丸と余白だけを詰めて「進む導線」から「終えた記録」に見え方を変える。 */
.steps--compact { margin-top: 12px; }
.steps--compact .steps__row { padding: 6px 0 4px; }
.steps--compact .steps__row::before { top: 11px; }
.steps--compact .steps__dot { width: 9px; height: 9px; }
.steps--compact .steps__item { gap: 4px; }
.steps--compact .steps__item.is-current .steps__dot { box-shadow: none; }
.steps__done { margin-top: 2px; }

/* ※ バー直下の「端末に保存されます」の1行は廃止した。
   バーは「自分が今どこにいるか」を見る場所で、仕組みを読む場所ではない。
   端末保存の説明は各画面下部（完了ボタンの直前）に一本化している。 */

/* =========================================
   ジュエリーのご注文サイトへの入口（第5段階に到達後）
   毎日開く入口なので、節目の演出はせず淡々と実用的に。
   色は既存の3変数のみで組む（新しい色を足さない）。
========================================= */
.order-entry { margin-top: 14px; }
.order-entry__btn {
  min-height: 54px;                /* 毎日押すボタンなので大きめに取る */
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.order-entry__note {
  font-size: 0.74rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-top: 0.5rem;
}

/* =========================================
   次にやること（画面上で最大のカード・1件のみ）
========================================= */
.next {
  margin-top: 14px;
  clip-path: var(--octa);
  background: var(--gold-edge);   /* 最も重要なカードの輪郭。白地で 3.42 */
  padding: 1px;
}
.next__inner {
  clip-path: var(--octa);
  background: var(--white);
  padding: 15px 16px 16px;
}
.next__eyebrow {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
  line-height: 1.4;
}
.next__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 0.4rem;
}
.next__meta {
  font-size: 0.72rem;
  color: var(--text-soft);
  margin-top: 0.3rem;
  line-height: 1.6;
}
.next__btn { margin-top: 0.7rem; }

/* =========================================
   入口カード4枚
========================================= */
.entries {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.entry:hover { border-color: var(--gold-line); transform: translateY(-2px); }
/* 画像を横長にした分、文章の欄は狭くなる。min-width:0 を入れておかないと
   長い語がはみ出して画像側を押し返す。 */
.entry__body { min-width: 0; }
.entry__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.05em;
}
.entry__time {
  font-size: 0.7rem;
  color: var(--gold-ink);
  letter-spacing: 0.03em;
  margin-top: 0.2rem;
  line-height: 1.6;
}
.entry__desc {
  /* 他の本文（0.8rem＝約14px）より小さく浮いていたので水準を揃えた（2026-08-17） */
  font-size: 0.8rem;
  color: var(--text-soft);
  line-height: 1.7;
  margin-top: 0.3rem;
}
/* 端末保存の断り（入口カードの下）。補助テキスト色のまま目立たせない。
   ゴールド（--gold-ink）は使わない——ここは読ませたい情報ではなく、
   機種変更のときに思い出せればよい情報のため。 */
.storage-note { margin-top: 14px; }

/* 下欄の4ブロック。既存の .qa / .note-line を組み合わせて作るので、
   足すのは区切りの余白と登録内容の2行だけ。色は既存の3変数のまま（新色なし）。
   親見出しは置かない（2026-08-07）。見出しが1つ減った分、罫との間が
   詰まって見えるので padding-top を 20px → 26px に広げて元の間隔を保つ。 */
.own-info {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.own-info .qa:last-child { margin-bottom: 0; }
.own-info .reg { margin-top: 0; }
.own-info a {
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-line);
}
.own-info .qa__body ul { margin-top: 0.6rem; }
.own-info .qa__body li + li { margin-top: 0.55rem; }
.reg { margin: 0.6rem 0 0.9rem; }
.reg__row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.7;
}
.reg__row:last-child { border-bottom: none; }
/* hidden 属性が付いた行は必ず消す。
   display:flex は [hidden] の既定（display:none）より強いため、
   これが無いと OPASS 未登録の人にも空の伏せ字行が出てしまう。 */
.reg__row[hidden] { display: none; }
.reg__k { color: var(--text-mute); flex: 0 0 8.5em; }
.reg__v { flex: 1; word-break: break-all; }

/* =========================================
   一覧・リスト系（講習／ライブラリ／書類）
========================================= */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 16px;
  margin-top: 14px;
}
.panel--cream { background: var(--cream); border-color: var(--gold-line); }
.notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(196, 168, 98, 0.10);
  border-left: 2px solid var(--gold-edge);
  padding: 10px 12px;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--navy);
  margin-top: 14px;
}
.list { margin-top: 10px; }
.list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.list__item:last-child { border-bottom: none; }
.list__num {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  color: var(--gold-ink);
  min-width: 26px;
  line-height: 1.4;
}
.list__title {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
}
.list__meta {
  font-size: 0.7rem;
  color: var(--text-mute);
  margin-top: 0.15rem;
}

/* 準備中の書類：まだ開けないことが見た目で分かるように、
   点は色を落とし、文字も本文より薄くする（押せる見た目にしない） */
.list--pending .list__num { color: var(--text-mute); }
.list--pending .list__title {
  font-weight: 400;
  color: var(--text-mute);
}
.list__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.4rem;
}
.list__links a {
  font-size: 0.74rem;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-line);
  padding: 4px 0;
  display: inline-block;
  min-height: 24px;
}
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.course {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 13px;
  border: 1px solid var(--line);
  background: var(--white);
}
.course__thumb {
  /* Vimeoのサムネイル（16:9）。プレースホルダーから実画像に差し替え済み（2026-08-17） */
  width: 128px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
}
.course__title { font-size: 0.85rem; font-weight: 500; line-height: 1.6; }
.course__meta { font-size: 0.68rem; color: var(--text-mute); margin-top: 0.1rem; }

/* =========================================
   講座ライブラリ：検索窓と分野別アコーディオン
   100本規模になっても、開いていない分野の中身まで
   まとめて探せるようにするための最小の部品。
   色は既存の3変数のみ（新しい色は足さない）。
========================================= */
.course-search__label {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.course-search__input {
  width: 100%;
  min-height: 44px;                      /* 指で押せる高さ */
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--gold-edge);    /* 白地で 3.42（罫は3.0以上） */
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.86rem;
  border-radius: 0;                      /* iOS の既定の丸みを消す */
  -webkit-appearance: none;
  appearance: none;
}
.course-search__input:focus {
  outline: 2px solid var(--gold-edge);
  outline-offset: 1px;
}
.course-search__input::placeholder { color: var(--text-mute); }
.course-search__hint { margin-top: 0.5rem; }

/* 分野の見出し行。閉じているときは分野名と本数だけが並ぶ。 */
.course-sec { padding: 0; }
.course-sec > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  cursor: pointer;
}
.course-sec__name {
  flex: 1;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.course-sec__count {
  font-size: 0.72rem;
  color: var(--text-mute);
  white-space: nowrap;
}
.course-sec .list { margin: 0 16px 12px; }
.course-more { margin-top: 12px; }

/* 完了ボタン行 */
.done-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.done-row__state {
  font-size: 0.76rem;
  color: var(--gold-ink);
  letter-spacing: 0.04em;
}

/* =========================================
   ⑨ 販売開始画面（サイト内で最も強い視覚的節目）
========================================= */
.open-sale {
  background: var(--navy);
  color: var(--cream);
  padding: 34px 16px 40px;
  text-align: center;
}
.open-sale__mark {
  width: min(260px, 62vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background-color: var(--ph-img);
  font-size: 0.68rem;
  color: #3a3a3a;
}
.open-sale__en {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  letter-spacing: 0.26em;
  line-height: 1.1;
  color: var(--gold);
}
.open-sale__ja {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(0.74rem, 3vw, 0.95rem);
  letter-spacing: 0.16em;
  color: var(--cream);
  margin-top: 0.4rem;
}
.open-sale__decl {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.0rem, 4.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--white);
  margin: 24px auto 0;
  max-width: 680px;
}
.open-sale__rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 22px auto;
}
.os-block {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid rgba(196, 168, 98, 0.36);
  padding: 15px 16px;
  margin-top: 12px;
}
.os-block__title {
  font-family: "Noto Serif JP", serif;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.os-block__text {
  font-size: 0.8rem;
  line-height: 1.9;
  color: rgba(250, 249, 246, 0.86);
  margin-top: 0.4rem;
}
.os-block .btn {
  border-color: var(--gold);
  color: var(--cream);
  margin-top: 0.7rem;
}
.os-block .btn:hover { background: rgba(196, 168, 98, 0.2); }

/* =========================================
   FAQ（困ったとき）
========================================= */
.qa { border: 1px solid var(--line); background: var(--white); margin-bottom: 8px; }
.qa > summary {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.7;
  min-height: 44px;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa__q { color: var(--gold-ink); font-family: "Cormorant Garamond", serif; font-size: 1rem; }
.qa__body {
  padding: 0 14px 14px 36px;
  font-size: 0.8rem;
  line-height: 1.9;
  color: var(--text-soft);
}

/* =========================================
   会員フッター（公式HPの営業導線は載せない）
========================================= */
.members-footer {
  background: var(--navy);
  color: rgba(250, 249, 246, 0.8);
  padding: 26px 16px 24px;
  text-align: center;
  margin-top: 30px;
}
.members-footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: 0.9rem;
}
.members-footer__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 10px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(250, 249, 246, 0.8);
}
.members-footer__nav a:hover { color: var(--gold); }
.members-footer__copy {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: rgba(250, 249, 246, 0.5);
}

/* =========================================
   画面幅が広いとき
========================================= */
@media (min-width: 768px) {
  .mp-hero__inner { padding: 30px 16px 26px; }
  .mp-hero__name { font-size: 0.78rem; }
  .sub-hero__inner { padding: 28px 16px 22px; }
  .steps__label { font-size: 0.625rem; line-height: 1.35; }  /* 10px。5等分の枠に長い名前を2行で収める */
  .steps__row { padding: 14px 0 10px; }
  .letter__body { font-size: 0.92rem; }
  .letter__inner { padding: 26px 28px 22px; }
  .next__inner { padding: 22px 26px 24px; }
  .next__title { font-size: 1.28rem; }
  .entries { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .entry { padding: 18px 18px; }
  .entry__thumb { width: 132px; }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .mp-body { padding-top: 24px; padding-bottom: 60px; }
  .open-sale { padding: 60px 16px 70px; }
}

/* スマホ縦：ヘッダーを詰めて本文の可視面積を稼ぐ
   （375×667 で「次にやること」カードをスクロール0で見せるため） */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .site-header,
  .site-header.is-scrolled {
    padding: 0.55rem 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--gold-line);
  }
  .site-header__logo img { height: 30px; }
  .site-header__brand-text { display: none; }
  /* Hero と本文の余白を詰めて、「次にやること」カードを
     スクロール0（375×667）で全体表示させる */
  .mp-hero__inner { padding: 12px 16px 10px; }
  .mp-body { padding-top: 10px; }
  /* 手紙は3行を維持する。いちばん長い2行目が折り返さない上限が 0.72rem。 */
  .letter__inner { padding: 14px 13px 12px; }
  .letter__body { font-size: 0.72rem; }
}

/* =========================================
   ログイン画面（login.html）
   ------------------------------------------
   色は既存の3変数のみ（--gold-ink 文字／--gold-edge 輪郭／--gold 装飾）。
   新しい色は足さない。入力欄の枠は輪郭用ゴールドで 3.42 を確保する。
========================================= */
.login-wrap { padding-top: 16px; padding-bottom: 48px; max-width: 460px; }
.login-wrap .panel:first-of-type { margin-top: 0; }

/* Googleのボタン。塗りは使わず、罫と地色で他の項目と並びを揃える */
.login-google {
  gap: 10px;
  background: var(--white);
}
.login-google__mark {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-ink);          /* 白地で 4.87 */
  border: 1px solid var(--gold-edge);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 「または」の区切り */
.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-mute);         /* 合成後 4.78 */
}
.login-or::before,
.login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-line);
}

.login-form { margin-top: 12px; }
.login-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);         /* 合成後 7.23 */
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;                 /* 16px 未満にしない（入力時に拡大されるため） */
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--gold-edge);
  border-radius: 0;
  margin-bottom: 12px;
  -webkit-appearance: none;
  appearance: none;
}
.login-input::placeholder { color: var(--text-mute); }
.login-input:focus {
  outline: 2px solid var(--gold-edge);
  outline-offset: 1px;
}
.login-input--code {
  font-family: "Cormorant Garamond", "Noto Sans JP", serif;
  font-size: 1.6rem;
  letter-spacing: 0.42em;
  text-align: center;
  padding-left: 0.42em;            /* 字間の分だけ中央がずれるのを戻す */
}

.login-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
}
.login-link {
  background: none;
  border: none;
  padding: 6px 0;
  min-height: 32px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--gold-ink);          /* 白地で 4.87 */
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-again { margin-top: 10px; }

.login-msg {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(196, 168, 98, 0.10);
  border-left: 2px solid var(--gold-edge);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--navy);              /* 地色との比 14.1 */
}
.login-msg.is-error {
  background: rgba(10, 25, 86, 0.05);
  border-left-color: var(--navy);
}

.login-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1px 5px;
  word-break: break-all;
}
.login-setup .lead,
.login-denied .lead { color: var(--text-soft); }

.login-foot { margin-top: 18px; text-align: center; }
.login-foot a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ログイン画面のヘッダーは会員メニューを持たないので、
   ハンバーガーの余白が残らないよう中身だけを中央に置く */
.login-body .site-header { justify-content: center; }

/* ヘッダーのログアウト。既存4項目＋「ジュエリーのご注文」の並びは
   変えず、いちばん最後に小さく置く（誤操作を避けるため控えめに） */
.site-header__nav a[data-logout] {
  color: var(--text-mute);
  font-size: 0.78rem;
}
.site-header__nav a[data-logout]:hover { color: var(--gold-ink); }

@media (max-width: 767px) {
  .login-wrap { padding-top: 12px; }
  .login-input--code { font-size: 1.4rem; }
}

/* ------------------------------------------------------------
   文章の行長をおさえる
   幅を1080pxへ広げた分、そのままだと本文が1行70文字を超えて
   読みにくくなる。日本語は1行35〜45文字が読みやすいので、
   文章が続くところだけ最大幅を持たせる（表・カード・動画は広いまま）。
   ------------------------------------------------------------ */
.lead, .notif__detail, .notif__title, .note-line { max-width: 44em; }

/* ============================================================
   お知らせ（マイページの最新3件／notices.html の全件）
   ------------------------------------------------------------
   赤①の設計監査（2026-08-17）＋見た目の整理（同日 アキラさん指摘）
     ・階層を「地の色」でつける。1件目＝白＋ゴールドの細枠、
       2〜3件目＝クリーム。枠線を足すより八角形が崩れない
       （clip-path と border は併用できないため、.next と同じ
         「1pxの下地を敷いて内側を白で塗る」やり方に揃える）
     ・日付を大きくして最初に読ませる。他の情報は日付に従属させる
     ・「対応が必要」は 🔴 絵文字を使わずゴールドの細枠ラベル。同時1件まで
     ・ボタンは幅いっぱいにしない。全幅ボタンが並ぶと画面が重くなる
   ============================================================ */
.notices { margin-top: 18px; }
.notices__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--gold-line);
}
.notices__title {
  font-family: 'Noto Serif JP', serif; font-weight: 500;
  font-size: 0.95rem; color: var(--navy); margin: 0;
  letter-spacing: 0.08em;
}
.notices__all {
  font-size: 0.72rem; color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px; white-space: nowrap;
}
.notices__all:hover { border-bottom-color: var(--gold-edge); }
.notices__list { list-style: none; margin: 0; padding: 0; }

/* 2〜3件目＝白。ページの地（クリーム）から浮かせてカードとして見せる。
   クリームで沈めると地の色とほぼ同じになり、カードの境目が消えた（実測で確認）。
   1件目との差は「ゴールドの枠の有無」と文字の大きさでつける。 */
.notif {
  clip-path: var(--octa);
  background: var(--white);
  padding: 12px 16px 13px;
}
.notif + .notif { margin-top: 8px; }

/* 1件目＝ゴールドの細枠＋白。いちばん手前に立たせる */
.notif--lead {
  background: var(--gold-edge);
  padding: 1px;
}
.notif--lead > * { position: relative; }
.notif--lead {
  display: block;
}
.notif--lead .notif__inner {
  clip-path: var(--octa);
  background: var(--white);
  padding: 15px 18px 17px;
}

/* 日付を先頭に大きく置く。読む順を「いつ → 何が」に固定する */
.notif__meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  margin: 0 0 6px;
}
.notif__date {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.98rem; color: var(--gold-ink); letter-spacing: 0.06em;
  line-height: 1.2;
}
.notif__type {
  font-size: 0.68rem; color: var(--text-mute); letter-spacing: 0.04em;
}
.notif__new {
  font-size: 0.62rem; color: var(--gold-ink); letter-spacing: 0.12em;
}
/* 「対応が必要」＝塗らずに細枠。塗ると警告色になって不安が残る */
.notif__flag {
  font-size: 0.64rem; color: var(--gold-ink);
  border: 1px solid var(--gold-edge);
  border-radius: 2px; padding: 1px 7px; line-height: 1.7;
  white-space: nowrap; letter-spacing: 0.04em;
}

.notif__title {
  font-size: 0.9rem; line-height: 1.8; color: var(--navy);
  margin: 0; font-weight: 500;
}
.notif--lead .notif__title { font-size: 1rem; line-height: 1.75; }
.notif__title a { color: inherit; }
.notif__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.notif__detail {
  font-size: 0.8rem; line-height: 1.9; color: var(--text-soft);
  margin: 7px 0 0;
}
/* 「何をすればこの件が終わるか」の1行。ラベルと必ずセットで出す */
.notif__action {
  font-size: 0.8rem; line-height: 1.8; color: var(--navy);
  margin: 12px 0 0; padding-left: 12px;
  border-left: 2px solid var(--gold-edge);
}
/* ボタンは内容の幅。全幅にすると NEXT の主役ボタンと競合する */
.notif__btn {
  display: inline-flex; width: auto; margin-top: 11px;
  padding-left: 22px; padding-right: 22px;
}

/* 一覧ページは全件に説明がつくので、余白を少し広くとる */
.notices__list--all .notif { padding: 15px 18px 16px; }
.notices__list--all .notif + .notif { margin-top: 10px; }

@media (max-width: 767px) {
  .notif__date { font-size: 0.92rem; }
  .notif__meta { gap: 7px; }
  .notif--lead .notif__inner { padding: 13px 14px 15px; }
  .notif { padding: 11px 14px 12px; }
  .notif__btn { display: flex; width: 100%; }
}


/* ===== OPASS（伏せ字＋目のボタン）2026-08-24 =====
   .reg__v は既存の値表示。secret はボタンを横に並べるためだけの追加。 */
.reg__v--secret{display:inline-flex;align-items:center;gap:.5em}
.reg__v--secret [data-opass-value]{font-variant-ligatures:none;letter-spacing:.06em}
.reg__eye{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;padding:0;border:none;background:none;
  color:var(--gold-ink,#8a7332);cursor:pointer;border-radius:50%;
}
.reg__eye svg{width:1.15em;height:1.15em}
.reg__eye:hover{background:rgba(0,0,0,.05)}
.reg__eye:focus-visible{outline:2px solid var(--gold-edge,#c4a862);outline-offset:2px}