/* =========================================================================
   THE EXPORT JOURNAL — site.css
   AI×海外輸出 攻略 チョコ / 会員ポータル デザインシステム
   方向性：紙×インクの「刊行物」の格 × Calm SaaS の秩序（Hairline中心）。
   完全自己完結：外部フォント/CDN/画像/スクリプト依存なし。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン（CSS変数）
   ------------------------------------------------------------------------- */
:root{
  /* --- ベース（紙／面）--- */
  --paper:        #F7F5EF;   /* 背景・地色（温かい上質紙）*/
  --paper-deep:   #EFEBE1;   /* セクション区切り・引用下地 */
  --surface:      #FFFFFF;   /* 記事面・カード面 */
  --surface-sunken:#F1F0EA;  /* 入力欄・くぼみ */

  /* --- インク（文字・帯・題字）--- */
  --ink:          #16233F;   /* プライマリ紺（マストヘッド/大見出し/フッター）*/
  --ink-2:        #24365C;   /* ホバー面・グラデ終点 */
  --text:         #23272E;   /* 本文チャコール */
  --text-muted:   #5C6470;   /* リード・注釈 */
  --text-faint:   #98A0AC;   /* キャプション・ゴースト */
  --on-ink:       #FFFFFF;   /* 濃紺上の文字 */
  --on-ink-sub:   #C3CDE0;   /* 濃紺上の副文字 */

  /* --- 罫線（Hairline中心の秩序）--- */
  --hairline:     #DED8CC;   /* 紙になじむ細い罫（多用）*/
  --hairline-cool:#E6E3DA;   /* 面の内側の淡い区切り */
  --border-strong:#CFC8BA;   /* 枠・入力の強め罫 */

  /* --- アクセント（10%以下・効かせどころ限定）--- */
  --vermilion:    #C8492F;   /* 主アクセント：CTA・番号・ラベル（沈めた活版赤）*/
  --vermilion-ink:#A93B24;   /* CTAホバー */
  --vermilion-soft:#F6 E9;   /* （※下でsafe値に上書き）*/
  --brass:        #A9814F;   /* 副アクセント：箔押し風の罫・目玉の枠 */
  --brass-soft:   #EFE6D4;   /* 目玉記事の下地 */
  --line-green:   #06C755;   /* /line 識別色のみ（ラベル/縁取り限定）*/

  /* --- 機能色（状態）--- */
  --success:      #2F7D53;
  --success-soft: #E8F1EA;

  /* --- タイポ：フォントスタック --- */
  --font-jp: "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","BIZ UDPGothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif: ui-serif,"Hiragino Mincho ProN","Times New Roman",Georgia,serif; /* 英字ロゴ/号数/柱 */
  --font-mono: ui-monospace,"SF Mono","SFMono-Regular",Menlo,monospace;

  /* --- タイプスケール（clampで流動）--- */
  --fs-logo:    clamp(1.05rem, 2.4vw, 1.4rem);
  --fs-h1:      clamp(1.9rem, 5.6vw, 3.2rem);
  --fs-h1-sub:  clamp(1.4rem, 3.6vw, 2.1rem);
  --fs-h2:      clamp(1.2rem, 3vw, 1.55rem);
  --fs-lead:    clamp(0.95rem, 2vw, 1.05rem);
  --fs-body:    clamp(0.94rem, 1.8vw, 1rem);
  --fs-eyebrow: 0.72rem;
  --fs-caption: 0.8rem;

  /* --- 余白スケール（8pxベース）--- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- 角丸 --- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* --- 影（極薄1枚。浮かせず「置いてある」）--- */
  --shadow-1: 0 1px 2px rgba(22,35,63,.04), 0 1px 3px rgba(22,35,63,.05);
  --shadow-2: 0 8px 24px rgba(22,35,63,.06);

  /* --- レイアウト幅 --- */
  --w-read:  680px;   /* 読み物・ゲート */
  --w-index: 940px;   /* 目次・グリッド */

  /* --- モーション --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .16s;
}
/* vermilion-soft を安全値で確定（上のプレースホルダを上書き） */
:root{ --vermilion-soft:#FBEDE9; }

/* -------------------------------------------------------------------------
   2. リセット
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:var(--font-jp);
  font-size:var(--fs-body);
  line-height:1.85;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul,ol{ list-style:none; }
h1,h2,h3{ line-height:1.3; letter-spacing:.01em; }

/* フォーカス可視（全要素共通の視覚言語）*/
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
a.btn:focus-visible, button:focus-visible, .field input:focus-visible{
  outline-offset:3px;
}

/* -------------------------------------------------------------------------
   3. 汎用ユーティリティ（柱・ラベル・罫）
   ------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--w-index);
  margin-inline:auto;
  padding-inline:20px;
}
.container--read{ max-width:var(--w-read); }

/* Eyebrow / 英字ラベル（柱）：字間を大きく開ける */
.eyebrow{
  display:inline-block;
  font-family:var(--font-serif);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--vermilion);
}
.eyebrow--muted{ color:var(--text-muted); }
.eyebrow--line{ color:var(--line-green); }
.eyebrow--onink{ color:var(--on-ink-sub); }

/* kicker：小ラベル＋ヘアラインの「柱」 */
.kicker{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.kicker::after{
  content:""; flex:1 1 auto; height:1px;
  background:var(--hairline);
}

.hairline{ height:1px; background:var(--hairline); border:0; margin:var(--sp-6) 0; }

.note{
  font-size:var(--fs-caption);
  line-height:1.7;
  color:var(--text-muted);
}

/* -------------------------------------------------------------------------
   4. マストヘッド帯 / サイトヘッダー（全ページ共通の背骨）
   ------------------------------------------------------------------------- */
.site-header{
  background:var(--ink);
  color:var(--on-ink);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  max-width:var(--w-index);
  margin-inline:auto;
  padding:10px 20px;
  display:flex; align-items:center; gap:var(--sp-4);
  min-height:52px;
}
/* ブランド（誌名＝英字ロゴタイプ ＋ 和文発行者名の二層）*/
.brand{ display:flex; flex-direction:column; gap:2px; line-height:1.15; }
.brand__logo{
  font-family:var(--font-serif);
  font-size:var(--fs-logo);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-ink);
}
.brand__by{
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--on-ink-sub);
}
/* 号数・EDITION表記（帯の右） */
.masthead-issue{
  margin-left:auto;
  font-family:var(--font-serif);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-ink-sub);
  white-space:nowrap;
}

/* ナビ（会員シェル：迷子にさせない移動）*/
.nav{
  display:flex; align-items:center; gap:var(--sp-2);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  display:inline-flex; align-items:center;
  min-height:36px; padding:6px 12px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--on-ink-sub);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover{ color:var(--on-ink); background:rgba(255,255,255,.08); }
.nav a[aria-current="page"]{
  color:var(--on-ink);
  background:rgba(255,255,255,.10);
}
/* 戻る導線 ← INDEX */
.nav .nav-back{ color:var(--on-ink-sub); }

/* -------------------------------------------------------------------------
   5. ヒーロー（表紙／扉）
   ------------------------------------------------------------------------- */
.hero{
  padding:var(--sp-8) 0 var(--sp-7);
  border-bottom:1px solid var(--hairline);
}
.hero__inner{
  max-width:var(--w-index);
  margin-inline:auto;
  padding-inline:20px;
}
.hero h1{
  font-size:var(--fs-h1);
  font-weight:800;
  line-height:1.28;
  color:var(--ink);
  letter-spacing:.01em;
  max-width:16em;
}
.hero h1 .accent{ color:var(--vermilion); }
.hero__lead{
  margin-top:var(--sp-5);
  max-width:34em;
  font-size:var(--fs-lead);
  color:var(--text-muted);
  line-height:1.9;
}
.hero__sign{
  margin-top:var(--sp-6);
  font-family:var(--font-serif);
  font-size:.82rem;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.hero__actions{
  margin-top:var(--sp-6);
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
}
/* 濃紺ヒーローの変種（扉を締めたい時）*/
.hero--ink{
  background:linear-gradient(160deg,var(--ink),var(--ink-2));
  color:var(--on-ink);
  border-bottom:0;
}
.hero--ink h1{ color:var(--on-ink); }
.hero--ink .hero__lead{ color:var(--on-ink-sub); }
.hero--ink .hero__sign{ color:var(--on-ink-sub); }

/* -------------------------------------------------------------------------
   6. セクション
   ------------------------------------------------------------------------- */
.section{ padding:var(--sp-7) 0; }
.section--tight{ padding:var(--sp-6) 0; }
.section--deep{ background:var(--paper-deep); }
.section__head{ margin-bottom:var(--sp-6); }
.section__title{
  font-size:var(--fs-h1-sub);
  font-weight:800;
  color:var(--ink);
  line-height:1.32;
}
.section__lead{
  margin-top:var(--sp-3);
  color:var(--text-muted);
  font-size:var(--fs-lead);
  max-width:36em;
}

/* -------------------------------------------------------------------------
   7. ボタン
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:12px 22px;
  font-size:1rem; font-weight:700; letter-spacing:.02em;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn .icon{ width:1em; height:1em; flex:none; }

.btn-primary{
  background:var(--vermilion);
  color:var(--on-ink);
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{ background:var(--vermilion-ink); }

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--border-strong);
}
.btn-ghost:hover{ background:var(--surface); border-color:var(--ink); }

/* 濃紺塗り（扉のログイン等）*/
.btn-ink{ background:var(--ink); color:var(--on-ink); }
.btn-ink:hover{ background:var(--ink-2); }

.btn-block{ width:100%; }
.btn-sm{ min-height:40px; padding:9px 16px; font-size:.86rem; }

/* -------------------------------------------------------------------------
   8. バッジ
   ------------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline);
  color:var(--text-muted);
  background:var(--surface);
  white-space:nowrap;
}
.badge--brass{ color:var(--brass); border-color:var(--brass); background:var(--brass-soft); }
.badge--vermilion{ color:var(--on-ink); background:var(--vermilion); border-color:var(--vermilion); }
.badge--line{ color:var(--line-green); border-color:var(--line-green); background:#fff; }
.badge--success{ color:var(--success); border-color:var(--success); background:var(--success-soft); }
.badge--soon{ color:var(--text-faint); border-color:var(--border-strong); background:var(--surface); }

/* -------------------------------------------------------------------------
   9. 目次エントリ（/ の導線・記事行）
   ------------------------------------------------------------------------- */
.entry-list{ border-top:1px solid var(--hairline); }
.entry{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-2) var(--sp-5) 0;
  border-bottom:1px solid var(--hairline);
  position:relative;
  transition:background var(--dur) var(--ease);
}
.entry::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--vermilion);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--dur) var(--ease);
}
.entry:hover::before, .entry:focus-within::before{ transform:scaleY(1); }
.entry:hover{ background:var(--surface); }
.entry__no{
  flex:none;
  font-family:var(--font-serif);
  font-size:2rem; font-weight:600;
  color:var(--brass);
  min-width:1.6em; text-align:center;
  transition:color var(--dur) var(--ease);
}
.entry:hover .entry__no{ color:var(--vermilion); }
.entry__body{ flex:1 1 auto; min-width:0; }
.entry__body h3{
  font-size:var(--fs-h2); font-weight:700; color:var(--ink); line-height:1.4;
}
.entry__body p{ margin-top:2px; color:var(--text-muted); font-size:.92rem; }
.entry__arrow{ flex:none; color:var(--text-faint); }

/* -------------------------------------------------------------------------
   10. 特典アイテム（/seminar Contents の中心コンポーネント）
   ------------------------------------------------------------------------- */
.gift-list{
  border-top:1px solid var(--hairline);
}
.gift-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--hairline);
  position:relative;
  transition:background var(--dur) var(--ease);
}
.gift-item::before{
  content:""; position:absolute; left:calc(-1 * var(--sp-3)); top:0; bottom:0;
  width:3px; background:var(--vermilion);
  transform:scaleY(0); transform-origin:center;
  transition:transform var(--dur) var(--ease);
}
.gift-item:hover::before, .gift-item:focus-within::before{ transform:scaleY(1); }

/* 番号（活版：セリフ大きめ・ブラス→ホバーでバーミリオン）*/
.gift-no{
  flex:none;
  font-family:var(--font-serif);
  font-size:clamp(2rem,7vw,2.6rem);
  font-weight:600;
  line-height:1;
  color:var(--brass);
  min-width:1.4em; text-align:center;
  font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease);
}
.gift-item:hover .gift-no{ color:var(--vermilion); }

/* 本文（カテゴリkicker＋H2＋リード）*/
.gift-body{ min-width:0; }
.gift-body .gift-cat{
  display:block;
  font-family:var(--font-serif);
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
}
.gift-body h2{
  font-size:var(--fs-h2); font-weight:700; color:var(--ink); line-height:1.4;
}
.gift-body p{ margin-top:4px; color:var(--text-muted); font-size:.9rem; line-height:1.7; }

/* ダウンロード（白抜きバーミリオン "PDF ↓"）*/
.gift-dl{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:10px 18px;
  font-size:.86rem; font-weight:700; letter-spacing:.04em;
  color:var(--on-ink); background:var(--vermilion);
  border:1px solid var(--vermilion);
  border-radius:var(--r-pill);
  white-space:nowrap;
  box-shadow:var(--shadow-1);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gift-dl:hover{ background:var(--vermilion-ink); }
.gift-dl:active{ transform:translateY(1px); }
.gift-dl .icon{ width:1em; height:1em; }

/* 目玉①：一段大きく・ブラス細枠・下地で格上げ */
.gift-featured{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--sp-5);
  align-items:center;
  padding:var(--sp-6);
  margin-bottom:var(--sp-4);
  background:var(--brass-soft);
  border:1px solid var(--brass);
  border-radius:var(--r-lg);
  position:relative;
}
.gift-featured::before{ display:none; }
.gift-featured .gift-no{
  font-size:clamp(2.6rem,9vw,3.4rem);
  color:var(--brass);
}
.gift-featured .gift-body h2{ font-size:clamp(1.35rem,4vw,1.8rem); }
.gift-featured .gift-body p{ font-size:.98rem; color:var(--text); }

/* -------------------------------------------------------------------------
   11. カード（汎用：アクセスカード・準備中枠）
   ------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  box-shadow:var(--shadow-1);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card--link:hover{ border-color:var(--ink); transform:translateY(-2px); }
.card__title{ font-size:var(--fs-h2); font-weight:700; color:var(--ink); margin-top:var(--sp-3); }
.card__lead{ margin-top:var(--sp-2); color:var(--text-muted); font-size:.92rem; }

/* 準備中：欠品でなく予告（点線ゴースト行）*/
.ghost-row{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) 0;
  border-bottom:1px dashed var(--hairline);
  color:var(--text-faint);
}
.ghost-row .ghost-no{
  font-family:var(--font-serif); font-size:2rem; color:var(--text-faint);
  min-width:1.6em; text-align:center;
}
.ghost-bar{ height:12px; border-radius:var(--r-pill); background:var(--surface-sunken); }
.ghost-bar + .ghost-bar{ margin-top:8px; width:60%; }

/* -------------------------------------------------------------------------
   12. 登録画面（ゲート＝定期購読の受付）
   ------------------------------------------------------------------------- */
.auth{
  min-height:70vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--sp-8) 20px var(--sp-9);
}
.auth-card{
  width:100%; max-width:400px;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-6);
  box-shadow:var(--shadow-2);
}
.auth-card h1{
  font-size:var(--fs-h1-sub);
  font-weight:800; color:var(--ink);
  margin-top:var(--sp-2);
}
.auth-card .auth-lead{
  margin-top:var(--sp-3);
  color:var(--text-muted);
  font-size:.92rem; line-height:1.8;
}
.auth-card form{ margin-top:var(--sp-6); }

.field{ margin-bottom:var(--sp-5); }
.field label{
  display:block;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--text); margin-bottom:var(--sp-2);
}
.field input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font-size:1rem;
  font-family:var(--font-jp);
  color:var(--text);
  background:var(--surface-sunken);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(22,35,63,.14);
}
.field .field-hint{ margin-top:6px; font-size:.78rem; color:var(--text-muted); }

.auth-foot{
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--hairline);
  font-size:.78rem; color:var(--text-muted); line-height:1.7;
}

/* -------------------------------------------------------------------------
   13. エディターズノート
   ------------------------------------------------------------------------- */
.editors-note{
  padding:var(--sp-6);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.editors-note p{ color:var(--text); font-size:.95rem; line-height:1.9; }
.editors-note .sign{
  margin-top:var(--sp-4);
  font-family:var(--font-serif);
  font-size:.82rem; letter-spacing:.08em;
  color:var(--text-muted);
}

/* -------------------------------------------------------------------------
   14. フッター（コロフォン）
   ------------------------------------------------------------------------- */
.site-footer{
  margin-top:var(--sp-8);
  border-top:1px solid var(--hairline);
  background:var(--paper);
}
.site-footer__inner{
  max-width:var(--w-index);
  margin-inline:auto;
  padding:var(--sp-6) 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
}
.site-footer .colophon{
  font-family:var(--font-serif);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted);
}
.site-footer .copy{
  margin-left:auto;
  font-size:.78rem; color:var(--text-muted);
}

/* -------------------------------------------------------------------------
   15. レスポンシブ
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  .masthead-issue{ display:none; }
  .site-header__inner{ gap:var(--sp-3); }

  /* 特典行：番号→本文→ボタン全幅の縦積み */
  .gift-item{
    grid-template-columns:auto 1fr;
    grid-template-areas:"no body" "dl dl";
    row-gap:var(--sp-4);
  }
  .gift-no{ grid-area:no; font-size:2rem; }
  .gift-body{ grid-area:body; }
  .gift-dl{ grid-area:dl; width:100%; justify-content:center; }

  .gift-featured{
    grid-template-columns:auto 1fr;
    grid-template-areas:"no body" "dl dl";
  }
  .gift-featured .gift-dl{ grid-area:dl; }

  .entry{ align-items:flex-start; }
  .entry__no{ font-size:1.6rem; }
  .site-footer .copy{ margin-left:0; width:100%; }
}

/* デスクトップ：目玉以外を2カラムに展開する任意グリッド（利用は任意）*/
@media (min-width:760px){
  .gift-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 var(--sp-6);
    border-top:1px solid var(--hairline);
  }
  .gift-grid .gift-featured{ grid-column:1 / -1; }
}

/* モーション削減の尊重 */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .card--link:hover{ transform:none; }
  .gift-dl:active,.btn:active{ transform:none; }
}