/* ==========================================================================
   rito-labo.com — base stylesheet
   超絶ミニマル / 白背景 / 和文明朝 / 縦1カラム / 余白多 / 日英併記
   ========================================================================== */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║                                                                      ║
   ║   ★ ここだけ触れば調整できます（カラー・余白・サイズ）             ║
   ║   保存（⌘+S）→ ブラウザで⌘+Rリロードで即反映                        ║
   ║                                                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

:root {

  /* ─── カラー ─────────────────────────────────────────────────────── */
  --color-bg:       #ffffff;   /* 背景色（白） */
  --color-fg:       #1a1a1a;   /* 文字色（黒） */
  --color-fg-mute:  #8a8a8a;   /* 文字色（薄）— 英文・メタ情報 */
  --color-line:     #d8d8d8;   /* 区切り線の色 */
  --color-accent:   #A8E7F6;   /* 手描き装飾の色（水色） */


  /* ─── ヒーロー（HOMEの最初のセクション） ─────────────────────────── */
  --hero-shift-down:    13px;          /* ↓全体を下に何px下げるか */
  --hero-pad-y:         clamp(3rem, 8vw, 8rem); /* 上下の余白 */
  --hero-grid-left:     1fr;           /* 左カラム（テキスト）の比率 */
  --hero-grid-right:    clamp(420px, 62vw, 520px); /* 右カラム（イラスト）— PCで1.25-1.30倍を維持 */
  --hero-grid-gap:      clamp(2rem, 5vw, 4rem); /* 左右カラムの間隔 */
  --hero-text-min:      clamp(180px, 32vw, 320px); /* 左テキストの最小幅（PC通常域で1行表示できる幅を確保、狭窓では視覚優先で縮める） */

  /* リードコピー（小さな島には〜）*/
  --lead-line-height:   2;          /* 行の高さ（数値が小さいほど詰まる） */
  --lead-paragraph-gap: 0.675rem;      /* 段落と段落の間 */
  --lead-letter-space:  0.12em;        /* 字間 */

  /* ヒーロー右のイラスト */
  --visual-max-width:   520px;         /* イラストの最大幅（PC時 ×1.3） */


  /* ─── ヘッダー ────────────────────────────────────────────────────── */
  --logo-height:        clamp(48px, 5vw, 64px);  /* ロゴの高さ */
  --header-pad-y:       1.75rem;       /* ヘッダーの上下余白 */


  /* ─── セクション間の余白 ─────────────────────────────────────────── */
  --section-pad-y:      clamp(6rem, 12vw, 12rem); /* WORKS, NEWS など */


  /* ─── コンテンツ幅 ───────────────────────────────────────────────── */
  --content-max:        1280px;        /* コンテンツの最大幅 */
  --content-pad-x:      clamp(1.5rem, 6vw, 8rem); /* 左右の余白 */


  /* ╚══ ↓ここから下は基本触らないでください ══╝ */

  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", "YuMincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-en-meta: "Inter", "Helvetica Neue", Arial, sans-serif;

  --leading-base: 2.0;
  --leading-tight: 1.5;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, 2.5vw, 2rem);
  --space-lg: clamp(2.5rem, 4vw, 4rem);
  --space-xl: clamp(4rem, 8vw, 8rem);
  --space-2xl: var(--section-pad-y);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: var(--leading-base);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
a:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   ヘッダー（画面幅いっぱい）
   ========================================================================== */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-pad-y) var(--content-pad-x);
  border-bottom: 1px solid var(--color-line);
  gap: var(--space-md);
}

.site-logo {
  display: inline-block;
  border-bottom: none;
  flex-shrink: 0;
}
.site-logo img,
.site-logo svg {
  display: block;
  width: auto;
  height: var(--logo-height);
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  white-space: nowrap;
}
.site-nav a {
  font-family: var(--font-en-meta);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── ハンバーガーボタン（768px以下のみ表示） ─── */
.nav-toggle {
  display: none;
  width: 28px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 1.2px;
  background: var(--color-fg);
  transition: transform 250ms ease, opacity 200ms ease;
  transform-origin: center;
}
/* 開いているときは ✕ に変化 */
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   メインコンテナ（左寄せ）
   ========================================================================== */
main { display: block; }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad-x);
}

.section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.section-sm { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ==========================================================================
   HOME ヒーロー：左テキスト / 右ビジュアル
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: var(--hero-shift-down);
}
.hero-decoration {
  /* Figma書き出しの散らした手描き線（6本）をhero全体に重ねる */
  position: absolute;
  top: 50px;       /* 装飾全体を下にシフト（px単位を必ず付ける） */
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero {
  display: grid;
  grid-template-columns: minmax(var(--hero-text-min), var(--hero-grid-left)) var(--hero-grid-right);
  gap: var(--hero-grid-gap);
  align-items: center;
  padding-top: var(--hero-pad-y);
  padding-bottom: var(--hero-pad-y);
  position: relative;
  z-index: 1;
}
.hero-text {
  padding-top: 0;
  padding-left: 0;
}

.hero-lead {
  font-family: var(--font-jp);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: var(--lead-line-height);
  letter-spacing: var(--lead-letter-space);
  color: var(--color-fg);
}
.hero-lead p {
  margin: 0 0 var(--lead-paragraph-gap);
  /* BudouX が挿入する文節区切り（<wbr>）の位置で折り返し、
     行長は balance で均す。日本語は keep-all で字単位の改行を抑止。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hero-lead p:last-child { margin-bottom: 0; }
.hero-lead budoux-ja { display: inline; }

/* ==========================================================================
   英文レギュレーション — 全ページ共通（リード文・本文）
   index.html の .hero-lead-en をマスター仕様とし、
   .lead-en（works/contact）／ .section-en-summary（about）を同一トーンに揃える。
   余白だけ各クラス個別。
   ========================================================================== */
.hero-lead-en,
.lead-en,
.section-en-summary,
.page-head-title-en {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--color-fg-mute);
}
.hero-lead-en { margin-top: 2rem; }

.hero-visual {
  position: relative;
}
.hero-visual .visual-main {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--visual-max-width);
  margin: 0 auto;
}
/* キービジュアル直下のキャプション（控えめな図版説明風） */
.visual-caption {
  margin-top: 1.25rem;
  text-align: center;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 0.7rem; /* 13px → 11px に2px下げ */
  letter-spacing: 0.18em;
  color: var(--color-fg-mute);
  max-width: var(--visual-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   セクションラベル + Figma SVG 装飾（インラインSVG）
   構造: <p class="section-label">
            <svg class="label-decoration">...</svg>
            <span class="section-label-text">Selected Works</span>
          </p>
   ========================================================================== */
.section-label {
  position: relative;
  font-family: var(--font-en-meta);
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-fg);
  margin-bottom: var(--space-lg);
  padding-left: 1.75rem;
  padding-top: 1.5rem;
  display: inline-block;
}
.section-label-text {
  position: relative;
  z-index: 1;
}
.label-decoration {
  position: absolute;
  left: -0.4rem;
  top: -0.5rem;
  width: 5.5rem;   /* 装飾の表示サイズ（ラベル文字より少し大きめ） */
  height: auto;
  pointer-events: none;
  z-index: 0;
  /* 装飾は手描き線。Figma座標系のviewBoxをそのまま使う */
}

/* ==========================================================================
   WORKS リスト（サムネ + メタ + タイトル + 矢印）
   ========================================================================== */
.works-list {
  list-style: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 920px;
}
.works-list li { padding: 0; border: none; }

.work-link {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line); /* tweakable */
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}
.work-link:hover { opacity: 0.85; }

.work-thumb {
  display: block;
  width: 140px;
  height: 95px;
  background: #f4f4f4;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 2px;
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms ease;
}
.work-link:hover .work-thumb img { transform: scale(1.04); }

.work-body { display: block; }
.works-meta {
  display: block;
  font-family: var(--font-en-meta);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  margin-bottom: 0.5rem;
}
.works-list .heading {
  display: block;
  font-family: var(--font-jp);
  font-size: 1.15rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  font-weight: normal;
}
.work-desc {
  display: none; /* 通常案件では非表示。ハイライトのみ表示 */
}

/* ─── ハイライト案件（Selected Works 最上段の固定） ─── */
/* 写真を左、テキストを右で常時固定。狭い画面では写真を細く、テキスト列を広く確保 */
.work-link.is-highlight {
  grid-template-columns: minmax(110px, 28%) 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  align-items: start;
  border-bottom-color: var(--color-fg-mute);
}
.work-link.is-highlight .work-thumb {
  width: 100%;
  height: auto;
  /* 雑誌表紙の縦長写真にあわせて 3:4 のポートレート比 */
  aspect-ratio: 3 / 4;
  background: #ece8e0; /* 木目背景に馴染む薄ベージュ */
}
.work-link.is-highlight .work-thumb img {
  /* 雑誌の中心がやや上にあるので少し上寄せ */
  object-position: center 40%;
}

/* Featured Work ラベル：メタ情報の上に配置する小さな英文タグ */
.works-featured-label {
  display: inline-block;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.1rem;
  margin-bottom: 0.6rem;
}

.work-link.is-highlight .heading {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}
.work-link.is-highlight .works-meta {
  margin-bottom: 0.5rem;
  letter-spacing: 0.22em;
}
.work-link.is-highlight .work-desc {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-jp);
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--color-fg-mute);
  max-width: 36em;
}

/* ==========================================================================
   View More ボタン（セクション下端の「すべて見る」リンク）
   ========================================================================== */
.view-more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0.75rem 0 1.25rem; /* ↓下線の手描き波線スペース */
  text-decoration: none;
  color: inherit;
  border-bottom: none;
  transition: gap 250ms ease, opacity 250ms ease;
}
/* 手描き波線下線（Figma書き出しpathを再利用） */
.view-more-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14px;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 250ms ease;
}
.view-more-link:hover .view-more-underline { opacity: 1; }
.view-more-link:hover {
  gap: 1.5rem;
  opacity: 0.7;
}
.view-more-en {
  font-family: var(--font-en-meta);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-fg);
}
.view-more-jp {
  font-family: var(--font-jp);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-fg-mute);
}
.view-more-link .link-arrow {
  opacity: 0.6;
  width: 1.4rem;
  height: 1.4rem;
}
.view-more-link:hover .link-arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--color-fg);
}

/* 共通：右端の「→」矢印 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-fg-mute);
  opacity: 0.5;
  transition: transform 250ms ease, opacity 250ms ease, color 250ms ease;
  flex-shrink: 0;
}
.link-arrow svg { width: 100%; height: auto; }
.work-link:hover .link-arrow,
.news-link:hover .link-arrow {
  opacity: 1;
  color: var(--color-fg);
  transform: translateX(4px);
}

/* ==========================================================================
   NEWS リスト（日付 + 本文 + 矢印）
   ========================================================================== */
.news-list {
  list-style: none;
  max-width: 720px;
}
.news-list li { padding: 0; border: none; }

.news-link {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease;
}
.news-link:hover { opacity: 0.85; }

.news-link time {
  font-family: var(--font-en-meta);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--color-fg-mute);
}
.news-text {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   フッター（左寄せ：ナビ + 外部リンク + 住所 + コピー）
   ========================================================================== */
.site-footer {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--content-pad-x);
  border-top: 1px solid var(--color-line);
  font-size: 0.78rem;
  color: var(--color-fg-mute);
  letter-spacing: 0.08em;
}

/* フッターナビ（ヘッダと同じ 5 項目を控えめに表示） */
.footer-nav {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--color-line);
}
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  margin: 0;
  padding: 0;
}
.footer-nav-list a {
  font-family: var(--font-en-meta);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.footer-nav-list a:hover { border-bottom-color: var(--color-fg); opacity: 0.8; }
.footer-nav-list a[aria-current="page"] {
  color: var(--color-fg-mute);
  pointer-events: none;
}
.footer-links {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-fg);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, opacity 200ms ease;
  padding: 0.25rem 0;
}
.footer-link:hover { border-bottom-color: var(--color-fg); opacity: 0.85; }
.footer-link--icon svg { display: block; }
.footer-link-en {
  font-family: var(--font-en-meta);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer-link-jp {
  font-family: var(--font-jp);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-fg-mute);
  margin-left: 0.5rem;
}
.footer-address {
  margin-bottom: 0.5rem;
}
.site-footer .copy-en {
  font-family: var(--font-en-meta);
  display: block;
  margin-top: 0.4rem;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   About: Company（会社概要）— news-list と同じ「左ラベル + 右本文」リズムを
   <dl> で表現。max-width / border / フォント余白は既存変数を流用
   ========================================================================== */
.company-list {
  /* v6.6：ABOUT 全セクション 800 幅統一に合わせる（about.html 専用クラス）。 */
  list-style: none;
  max-width: 800px;
}
.company-list > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-line);
  align-items: baseline;
}
.company-list dt {
  font-family: var(--font-en-meta);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--color-fg-mute);
}
.company-list dd {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .company-list > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   旧スタイル互換（about/works/news/contact 用）
   ========================================================================== */
.lead {
  font-family: var(--font-jp);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 2.4;
  letter-spacing: 0.08em;
}
.lead-en {
  /* typography は上の共通ブロックに集約。ここは余白のみ。 */
  margin-top: 1rem;
}
.heading {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-weight: normal;
}

/* ==========================================================================
   About: リードの読み幅を index hero テキスト幅と揃える（720px）
   ========================================================================== */
.about-intro .hero-lead,
.about-intro .hero-lead-en {
  max-width: 720px;
}

/* ==========================================================================
   レスポンシブ — 768px 1ブレークポイント + clamp() で流体補完
   ========================================================================== */
@media (max-width: 768px) {
  body { font-size: 15px; }

  /* ヘッダー：1行のままハンバーガー右配置 */
  .site-header {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem var(--content-pad-x);
    gap: 1rem;
  }

  /* ハンバーガー表示 */
  .nav-toggle { display: inline-flex; }

  /* ─── 新仕様：Menu ラベル + 3本線（中・長・短）— 全ページ共通レギュレーション ─── */
  /* 旧 .nav-toggle (3本線のみ) を新 .nav-toggle.nav-toggle--labeled で上書き。
     index.html / about.html / works.html / news.html / contact.html すべて
     <button class="nav-toggle nav-toggle--labeled"> ＋ 子要素 .nav-toggle-label /
     .nav-toggle-icon (内に .nav-toggle-bar × 3) を採用する。 */
  .nav-toggle--labeled {
    /* style.css の display:none → flex / 旧 28×22 box → ラベル+icon 横並び */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    width: auto;
    height: auto;
    padding: 0.25rem 0;
  }

  .nav-toggle-label {
    font-family: var(--font-en);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    color: var(--color-fg);
    line-height: 1;
  }

  .nav-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 22px;
    height: 12px;
    flex-shrink: 0;
  }

  /* 3本線の長さ：上から「中・長・短」 */
  .nav-toggle--labeled .nav-toggle-icon .nav-toggle-bar:nth-child(1) { width: 70%; }
  .nav-toggle--labeled .nav-toggle-icon .nav-toggle-bar:nth-child(2) { width: 100%; }
  .nav-toggle--labeled .nav-toggle-icon .nav-toggle-bar:nth-child(3) { width: 45%; }

  /* 開時：旧 .nav-toggle.is-open の ✕ アニメは新構造に合わないため打ち消して fade-out */
  .nav-toggle--labeled.is-open .nav-toggle-icon .nav-toggle-bar:nth-child(1),
  .nav-toggle--labeled.is-open .nav-toggle-icon .nav-toggle-bar:nth-child(3) {
    transform: none;
    opacity: 0;
  }
  .nav-toggle--labeled.is-open .nav-toggle-icon .nav-toggle-bar:nth-child(2) {
    transform: rotate(0);
    opacity: 0;
  }

  /* ナビは初期非表示。ボタンで開閉 */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease;
    z-index: 10;
  }
  .site-nav.is-open { max-height: 60vh; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--content-pad-x);
  }
  .site-nav li {
    width: 100%;
  }
  .site-nav li + li {
    border-top: 1px solid var(--color-line);
  }
  .site-nav a {
    display: block;
    padding: 1rem 0;
    font-size: 0.85rem;
    letter-spacing: 0.28em;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-top: var(--space-xl);
  }
  .hero-text { padding-top: 0; padding-left: 0; }
  /* line-height: 2 のままだと段落間が視覚的に広いため、p同士の余白だけ詰める */
  .hero-lead p { margin-bottom: 0.25rem; }
  .hero-visual .visual-main { max-width: 100%; }

  .news-link {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 1rem;
    align-items: center;
  }
  .news-link time { grid-column: 1 / 2; grid-row: 1 / 2; }
  .news-text     { grid-column: 1 / 2; grid-row: 2 / 3; }
  .news-link .link-arrow { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }

  .work-link {
    grid-template-columns: 100px 1fr auto;
    gap: 1rem;
  }
  .work-thumb { width: 100px; height: 70px; }
  .works-list .heading { font-size: 1rem; line-height: 1.6; }

  /* ハイライト案件はモバイルでも横並び（画像左／文字右）を維持。
     サムネは細く、テキスト列を確保する */
  .work-link.is-highlight {
    grid-template-columns: minmax(100px, 38%) 1fr auto;
    gap: 1rem;
    padding-bottom: 1.75rem;
    align-items: start;
  }
  .work-link.is-highlight .work-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;        /* 縦長表紙写真にあわせる */
  }
  .work-link.is-highlight .heading {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    line-height: 1.5;
  }
  .work-link.is-highlight .works-meta {
    white-space: normal;        /* 折り返してOK（無理に1行にしない） */
    overflow: visible;
    letter-spacing: 0.18em;     /* 狭い画面ではさらに詰めて折り返し回避 */
  }
  .work-link.is-highlight .work-desc {
    font-size: 0.85rem;
    line-height: 1.85;
    margin-top: 0.5rem;
  }

  .view-more-link {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .view-more-link:hover { gap: 0.5rem 1.25rem; }

  /* Featured: 縦積みに */
  .featured-link {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .featured-visual { aspect-ratio: 16 / 10; }

  /* Footer: リンクを縦積み気味に */
  .footer-links { gap: 1rem 1.5rem; }

  .section-label { padding-left: 1.5rem; padding-top: 1.25rem; }
  .label-decoration { width: 4.5rem; }
}


/* ==========================================================================
   ページの上部に戻る（全ページ共通、右下固定）
     スクロール 400px 超で表示、クリックで window.scrollTo(0, 0) smooth。
     ミニマル：細い円 + ↑ 矢印、ホバーで色濃く。
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease, border-color 200ms ease;
  z-index: 100;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--color-fg);
}
.back-to-top svg {
  width: 14px;
  height: 14px;
  display: block;
  color: var(--color-fg-mute);
  transition: color 200ms ease;
}
.back-to-top:hover svg {
  color: var(--color-fg);
}

@media (max-width: 768px) {
  .back-to-top {
    width: 40px;
    height: 40px;
  }
}