/* sedohara.com — docs/design/DESIGN.md のトークンをそのまま使う。hex はここ（:root）以外に書かない */
:root {
  --color-bg: #17181A;
  --color-bg-raised: #1E1F22;
  --color-text: #ECEAE4;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #9A9893;
  --color-line: #4A4B4E;
  --color-line-strong: #ECEAE4;
  --color-link: #ECEAE4;
  --color-focus: #FFFFFF;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --line-height-body: 1.9;
  --line-height-display: 1.35;
  --tracking-display: 0.04em;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 1rem;
  --text-lg: 1.25rem;  --text-xl: 1.625rem;  --text-2xl: 2.25rem; --text-3xl: clamp(2.25rem, 5vw, 3.5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 144px;
  --measure: 36em;
  --gutter: 16px;
  --max: 1120px;

  --radius: 0;
  --shadow: none;
  --motion-fast: 120ms; --motion-base: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--line-height-body);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* 見出し: 明朝。大きさより「明朝であること」で差をつける */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-strong);
  margin: 0;
}
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 1em; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ヘッダー: 名前と 4 つのナビだけ。ハンバーガーは作らない */
.site-header { border-bottom: 1px solid var(--color-line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-strong); letter-spacing: var(--tracking-display); }
.brand img { width: 32px; height: auto; }
.brand:hover { text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-block; padding: 10px 12px; min-height: 44px; text-decoration: none; color: var(--color-text); font-size: var(--text-sm); letter-spacing: 0.02em; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }

/* セクション: 罫線と余白だけで区切る。カード・影・角丸は使わない */
.section { padding-top: var(--space-8); padding-bottom: var(--space-8); border-top: 1px solid var(--color-line); }
.section:first-of-type { border-top: 0; }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-head .label, .hero .label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: 0.08em; }
.label .gc { color: var(--color-line-strong); flex: none; }
.hero .label { margin-bottom: var(--space-3); }

/* Why: 顔のピクトグラム（白線・透過）と明朝の大見出し */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: center; padding-top: var(--space-7); padding-bottom: var(--space-8); }
.hero-icon { display: flex; justify-content: center; }
.hero-icon img { width: min(100%, 340px); height: auto; }
.hero h1 { font-size: var(--text-3xl); max-width: 14em; }
.hero .lead { margin-top: var(--space-5); }
.hero .meta { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.hero .meta span + span::before { content: "／"; margin: 0 0.4em; color: var(--color-line); }


/* 略歴: 遍歴図（白線の SVG。狭い画面では横スクロール）と、拠点の移り変わり */
.history { overflow-x: auto; margin: 0; color: var(--color-line-strong); -webkit-overflow-scrolling: touch; }
.history .history-svg { display: block; min-width: 860px; width: 100%; height: auto; }
.history a { color: inherit; }
.history a:hover text { fill-opacity: 0.75; }

/* How: 名詞の列。線で囲むだけ */
.how-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.how-list li { padding: var(--space-4) var(--space-3); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-strong); }
.how-list li small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); letter-spacing: 0.02em; }

/* What: 白黒ロゴのグリッド（罫線で区切る）と、ロゴの無い案件のテキスト行 */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.works li { border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.works img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.works .name { font-size: var(--text-sm); color: var(--color-text-strong); line-height: 1.5; }
.works .fact { font-size: var(--text-xs); color: var(--color-text-muted); }

/* What: ロゴの無いアプリは名前の文字タイル（画像と同じ正方形・黒板色の地）。角丸・影なし */
.works .tile-text { aspect-ratio: 1 / 1; background: var(--color-bg-raised); display: flex; align-items: center; justify-content: center; padding: var(--space-3); text-align: center; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text-strong); letter-spacing: 0.03em; overflow-wrap: normal; }
.works .tile-text.latin { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.02em; }

/* Models: 三角形 PNG（白線・透過）を黒板にそのまま置く。煽らない */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; }
.models img { width: 100%; max-width: 528px; }
/* トップのカルーセル: スクロールスナップ。JS は「←」「→」と枚数表示だけ */
.carousel .track { display: flex; gap: var(--space-5); margin: 0; padding: 0 0 var(--space-3); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track li { flex: 0 0 min(100%, 528px); scroll-snap-align: start; }
.carousel .track img { width: 100%; height: auto; }
.carousel-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.carousel-nav button { background: none; border: 0; color: var(--color-text); font: inherit; font-size: var(--text-lg); min-width: 44px; min-height: 44px; cursor: pointer; padding: 0; }
.carousel-nav button:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (prefers-reduced-motion: reduce) { .carousel .track { scroll-behavior: auto; } }

/* 連絡: テキストリンク 1 つ。ボタンは置かない */
.contact h2 { font-size: var(--text-2xl); }
.contact .mail { display: inline-block; margin-top: var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text-strong); letter-spacing: 0.02em; padding: var(--space-2) 0; overflow-wrap: anywhere; }

.site-footer { border-top: 1px solid var(--color-line); padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }

/* 下層: 戻るリンクだけ */
.back { display: inline-block; margin: var(--space-5) 0 0; font-size: var(--text-sm); }
.page-head { padding-top: var(--space-6); padding-bottom: var(--space-6); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-7); }
  .hero-icon { justify-content: flex-start; }
  .hero-icon img { width: min(60%, 240px); }
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .works { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .works .tile-text { font-size: var(--text-md); padding: var(--space-2); }
  .models { grid-template-columns: 1fr; }
  .contact .mail { font-size: var(--text-lg); }
}