/* hamidasiblog.com — portal（第5稿：ロゴマークだけで構成／白ベース）
   配色の正本: workspaces/movie/shared-assets/visual/brand/color/hamidasi-summer-blue.yaml
   ★フォント・アイコン・画像に外部依存なし（システムフォント／インラインSVG）。
   ★★ただし 2026-08-14 から GA4（G-SVJT3TGJD3）を index.html に入れた。
     ★外部リクエストは0本ではなく2本。★「依存ゼロ」と書かないこと。

   ★キャラクター（hamidasi-mark-round.png）はこのページでは使わない。
     プロフィールページで説明する扱いにした（本人・2026-08-14）。
     ファイル自体は logo.png として残してある。 */

:root {
  --bg:      #FFFFFF;
  --fg:      #222344;   /* navy — 台帳 */
  --blue:    #A3D7FF;   /* signature_blue — 台帳。ロゴの円と見出しの下線 */
  --orange:  #F8C69A;   /* accent_orange — 台帳。「いま」のタグだけ */

  /* ★台帳から導出。blue_gray #6C93A0 は白地で 3.32:1 と AA(4.5) に届かないため、
     同系統で暗くした #4E6E7A（5.48:1）を使う。実測値は MOC ノートに全部ある。 */
  --fg-sub:  #4E6E7A;
  --line:    #E7E6E2;

  --maxw: 680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.mark { display: block; }

/* ── ヘッダ ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 58px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.brand .mark { width: 24px; height: 24px; }
.brand-name { font-size: 14px; letter-spacing: 0.04em; }
.nav { display: flex; gap: 22px; font-size: 12px; letter-spacing: 0.14em; }
.nav a { color: var(--fg-sub); transition: color 0.2s; }
.nav a:hover { color: var(--fg); }

/* ── ロゴ ＋ 名前 ＋ 一言 ── */
.hero { padding: 68px 0 48px; text-align: center; }
.hero .mark { width: 60px; height: 60px; margin: 0 auto 24px; }
.hero-name {
  font-size: 24px; font-weight: 700; margin: 0;
  letter-spacing: 0.1em;
}
.hero-tag {
  margin: 10px 0 0;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--fg-sub);
}
.hero-lead {
  font-size: 14.5px; color: var(--fg-sub);
  margin: 20px auto 0; max-width: 36em;
}

/* ── セクション ── */
.section { padding: 0 0 40px; }
.section-title {
  font-size: 11px; letter-spacing: 0.3em; font-weight: 700;
  margin: 0 0 18px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--blue);
}

/* ── いま ── */
.now {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
}
.now-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.now-date {
  font-size: 12px; color: var(--fg-sub);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.now-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  background: var(--orange);        /* navy文字で 9.72:1 */
  padding: 3px 9px; border-radius: 4px;
}
.now-text { font-size: 15px; margin: 0; }
.now-text a { border-bottom: 2px solid var(--orange); }

/* ── リンク ── */
.links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.link-card {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.link-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 6px 16px rgba(34,35,68,0.08);
}
.link-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--fg); }
.link-body { min-width: 0; }
.link-title { font-weight: 700; font-size: 14px; line-height: 1.4; }
.link-desc { font-size: 12px; color: var(--fg-sub); line-height: 1.5; }

/* ── フッタ ── */
.site-footer {
  padding: 8px 0 52px;
  text-align: center;
  font-size: 11px;
  color: var(--fg-sub);
  letter-spacing: 0.1em;
}

/* ── レスポンシブ（ブレークポイント1つ） ── */
@media (max-width: 640px) {
  .hero { padding: 48px 0 36px; }
  .hero .mark { width: 52px; height: 52px; margin-bottom: 20px; }
  .hero-name { font-size: 21px; }
  .hero-lead { font-size: 14px; text-align: left; }
  .links-grid { grid-template-columns: 1fr; }
}