/* KOTETSU — 大元のスタイル
   複数画面にまたがるもの（リセット/配色/タイポグラフィ/レイアウト/
   ボタン/フォーム部品/ヘッダー/フッター/メニュー/アニメーション等）。
   全画面と管理画面がこれを読み込む。 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
/* --- Reset & Base Settings --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  /* --- Color System (和 × モダンテック - 白基調・ブルーアクセント) ---
     ★ここがテーマ機能の切り替え点。core/theme.php が、適用中テーマの値で
       この :root を上書きする（<style id="theme-vars">）。
       したがって下の値は「テーマ未適用・DB接続不可のときに使われる既定値」でもある。 */

  /* 色の元になるRGB三つ組。半透明の派生色はこれを合成して作るので、
     ここを変えるとグラデーション・影・枠・面のティントまで一斉に追従する。 */
  --accent-rgb: 2, 132, 199;         /* 露草色 (Tsuyukusairo) */
  --accent-blue-rgb: 3, 105, 161;    /* 藍色 */
  --bg-secondary-rgb: 246, 243, 235; /* 砂色 (Sunairo) */
  --border-rgb: 0, 0, 0;             /* 枠線と面のティントの元 */
  --shadow-rgb: 0, 0, 0;             /* 影の元 */

  --bg-primary: #ffffff;      /* 純白 - メイン背景 */
  --bg-secondary: #f6f3eb;    /* 砂色 (Sunairo) - ヘッダー・フッター用ベージュ */
  --bg-tertiary: #faf9f6;     /* 乳白色 (Nyuhakushoku) - カード背景用オフホワイト */
  --bg-glass: rgba(var(--bg-secondary-rgb), 0.85);
  --bg-glass-scrolled: rgba(var(--bg-secondary-rgb), 0.95);

  --text-primary: #1e293b;    /* 墨色 (Sumiiro) - メインダークグレー */
  --text-secondary: #475569;  /* 鈍色 - サブグレー */
  --text-muted: #64748b;       /* 煤竹 - 暗めのスチールグレー */

  --accent: #0284c7;          /* 露草色 (Tsuyukusairo) - 澄んだブルー */
  --accent-glow: rgba(var(--accent-rgb), 0.2);
  --accent-blue: #0369a1;     /* 藍色 - ディープブルー */
  --accent-silver: #94a3b8;   /* 鋼 - スチールグレー */
  --accent-contrast: #ffffff; /* アクセント色の面に載せる文字色 */

  --border: rgba(var(--border-rgb), 0.08);
  --border-hover: rgba(var(--border-rgb), 0.16);
  --border-accent: rgba(var(--accent-rgb), 0.3);
  --border-input: #cbd5e1;    /* フォーム部品の枠（背景に調和する実線） */

  --danger: #ef4444;          /* 必須マーク・入力エラー */
  --tag-blog: #a855f7;
  --tag-gadget: #0284c7;
  --tag-update: #2563eb;

  --surface-tint: rgba(var(--border-rgb), 0.02);       /* .btn-secondary の面 */
  --surface-tint-hover: rgba(var(--border-rgb), 0.05);
  --btn-sheen: rgba(255, 255, 255, 0.2);               /* .btn-primary を走る光 */

  /* --- Typography --- */
  --font-sans: 'Outfit', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-size-base: 16px;
  --h2-size: 2rem;
  --hero-title-size: 3.25rem;

  /* --- Shape (角丸) --- */
  --radius-sm: 2px;           /* タグなど小さい部品 */
  --radius-md: 4px;           /* カード・フォーム部品 */
  --btn-radius: 4px;

  /* --- Shadows --- */
  --shadow-card: 0 10px 30px rgba(var(--shadow-rgb), 0.05);   /* カードを影で浮かせる型のときだけ使う */
  --shadow-header: 0 10px 30px rgba(var(--shadow-rgb), 0.05);
  --shadow-card-hover: 0 20px 40px rgba(var(--shadow-rgb), 0.05);
  --shadow-info-card: 0 10px 30px rgba(var(--accent-rgb), 0.04);
  --shadow-focus: 0 0 10px rgba(var(--accent-rgb), 0.1);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* --- Transitions & Easings --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s var(--ease-out-expo);
  --transition-normal: 0.5s var(--ease-out-expo);
  --transition-slow: 0.9s var(--ease-out-expo);

  /* --- Layout & Spacing --- */
  --container-max-width: 1200px;
  --container-padding-x: 1.5rem;
  --header-height: 80px;
  --header-height-scrolled: 70px;
  --section-padding-y: 6rem;
  --card-padding: 2rem;
  --card-padding-lg: 3rem;
  --works-grid-min: 340px;
  --service-grid-columns: 2;
}
html {
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(var(--accent-rgb), 0.02) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(var(--accent-blue-rgb), 0.02) 0%, transparent 45%);
  background-attachment: fixed;
}
body.menu-open {
  overflow: hidden;
}
/* --- Typography Utilities --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
h2 {
  font-size: var(--h2-size);
  position: relative;
  display: inline-block;
  margin-bottom: 2.5rem;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width var(--transition-normal);
}
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}
.section {
  padding: var(--section-padding-y) 0;
  position: relative;
}
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}
/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.05em;
  transition: var(--transition-normal);
}
.btn-primary {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05), transparent);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--btn-sheen), transparent);
  transition: var(--transition-slow);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.btn-primary:hover::before {
  left: 100%;
}
.btn-secondary {
  background: var(--surface-tint);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--surface-tint-hover);
  border-color: var(--accent-silver);
  transform: translateY(-2px);
}
/* ページ末尾に置く大きめのCTA。インラインstyleで padding を書くと
   スマートフォン向けの指定を上書きしてしまうため、クラスにしてある。 */
.btn-cta {
  padding: 1rem 3rem;
}
.btn-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-text .arrow {
  transition: transform var(--transition-fast);
}
.btn-text:hover {
  color: var(--accent);
}
.btn-text:hover .arrow {
  transform: translateX(5px);
}
/* --- Header / Navigation --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition-normal);
}
.site-header.scrolled {
  height: var(--header-height-scrolled);
  background-color: var(--bg-glass-scrolled);
  box-shadow: var(--shadow-header);
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}
.site-logo img {
  height: 32px;
  width: auto;
}
.site-logo span {
  color: var(--accent);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.nav-list {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}
.nav-link {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  position: relative;
  padding: 0.5rem 0;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--accent);
  transition: var(--transition-normal);
}
.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
  width: 30px;
  height: 30px;
  position: relative;
}
.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  margin: 6px 0;
  transition: var(--transition-normal);
}
/* --- Hero Section --- */
.hero {
  /* height ではなく min-height にする。
     height: 100vh のままだと、内容が画面高を超えたときに
     align-items: center で上下にはみ出し、上端が固定ヘッダーの下に潜り込む。
     （iPhone SE 375x667 で実測26px隠れていた） */
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-height);
}
@keyframes bladePulse {
  0%, 100% { opacity: 0.3; transform: rotate(-15deg) scaleX(0.9); }
  50% { opacity: 0.7; transform: rotate(-14deg) scaleX(1.1); }
}
.hero .container {
  position: relative;
  top: -20px;
  z-index: 10;
}
.hero-main-visual {
  margin-bottom: 2.5rem;
}
.hero-main-visual img {
  max-width: 500px;
  width: 100%;
  height: auto;
}
/* --- Information Card Section (HOME) --- */
.info-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.info-meta time {
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.info-tag {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid currentColor;
}
.tag-case { color: var(--accent); }
.tag-blog { color: var(--tag-blog); }
.tag-gadget { color: var(--tag-gadget); }
.tag-update { color: var(--tag-update); }
.tag-general { color: var(--text-secondary); }
/* --- Section Header（見出しと「すべて見る」リンクを1行に並べる） ---
   h2 は下に 2.5rem の余白を持っているため、そのままだと align-items: flex-end の
   基準がその余白の下端になり、右のリンクだけ約40px下にずれて別の行に見えていた。
   ここで余白を打ち消し、間隔はこのブロック自身の margin-bottom で取る。 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 3rem;
}
.section-header h2 {
  margin-bottom: 0;
}
/* --- Works Cards (Grid) --- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--works-grid-min), 1fr));
  gap: 2rem;
}
.work-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-normal);
  /* カードを縦並びにして、末尾のリンクを下端に固定する。
     グリッドはカードの高さを揃えるが、中身は上から流れるだけなので、
     タグやタイトルの行数が違うとリンクの高さがバラバラになっていた。 */
  display: flex;
  flex-direction: column;
}
.work-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.work-img-container {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  flex: none;   /* 縦並びの中で画像が押し潰されないようにする */
}
.work-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.work-category-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--bg-secondary);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.work-card-content {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  flex: 1;      /* カードの余った高さをここが受け取る */
}
.work-card-content .btn-text {
  margin-top: auto;        /* 余った高さを上に寄せ、リンクを下端へ */
  align-self: flex-start;  /* 幅いっぱいに伸びないようにする */
}
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.work-tag {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.work-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.work-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
/* --- Service Section --- */
.service-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.service-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}
/* --- Flat Ribbon Footer (帯状態フッター) --- */
.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 1.75rem 0;
  color: var(--text-secondary);
  position: relative;
  z-index: 10;
}
.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
}
.footer-logo img {
  height: 20px;
  width: auto;
}
.footer-nav {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}
.footer-nav-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.footer-nav-link:hover {
  color: var(--accent);
}
.footer-nav-separator {
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer-right img {
  height: 24px;
  opacity: 0.8;
}
@media (max-width: 992px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .footer-left {
    flex-direction: column;
    gap: 1rem;
  }
  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }
  .footer-nav-separator {
    display: none;
  }
  .footer-right {
    flex-direction: column;
    gap: 0.75rem;
  }
}
/* --- Detail Pages Common --- */
.detail-container {
  /* パンくず（.breadcrumb）が既に固定ヘッダー分の余白を確保しているので、
     ここでヘッダー高さを足さないこと。足すと二重になり、
     パンくずと本文のあいだに PC144px / SP112px の空白ができる。
     ここで要るのは「パンくずとの間隔」だけ。 */
  padding-top: calc(var(--section-padding-y) * 0.5);   /* 既定 3rem */
  padding-bottom: var(--section-padding-y);            /* 既定 6rem */
  max-width: 800px;
  margin: 0 auto;
}
.detail-header {
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}
.detail-title {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  margin-top: 1rem;
}
.detail-body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-primary);
}
.detail-body p {
  margin-bottom: 2rem;
}
.detail-footer {
  margin-top: 5rem;
  border-top: 1px solid var(--border);
  padding-top: 3rem;
  text-align: center;
}
/* Works Detail Specific */
.info-list dt {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.info-list dd {
  color: var(--text-primary);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
/* --- Contact Form Styles --- */
.form-group {
  margin-bottom: 2rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}
.form-group label span {
  color: var(--danger);
  margin-left: 0.25rem;
}
.form-control {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: var(--transition-normal);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.form-control.error-input {
  border-color: var(--danger);
}
textarea.form-control {
  resize: vertical;
  min-height: 150px;
}
/* --- Scroll Entrance Animations --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-up.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible {
  opacity: 1;
  transform: translate(0);
}
/* --- Responsive Menu Overlay --- */
@media (max-width: 992px) {
  .mobile-menu-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border);
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    padding: 3rem;
    z-index: 1050;
    transition: var(--transition-normal);
  }

  .site-nav.nav-active {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .nav-link {
    font-size: 1.25rem;
  }

  .mobile-menu-toggle.toggle-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .mobile-menu-toggle.toggle-active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.toggle-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}
/* =====================================================================
   テーマのレイアウトの型（バリアント）
     <html> に付く data-theme-* 属性で切り替わる。属性は core/theme.php が出す。
     既定値（logo-left / outline）ではどのルールにも一致しないので、
     標準テーマの見た目はこのブロックが在っても変わらない。

     ※ 子孫セレクタで書いてあるので、管理画面のプレビュー枠のように
       <html> 以外の要素に属性を付けても同じように効く。
   ===================================================================== */

/* --- ヘッダー: ロゴ中央・ナビ下 --- */
/*   スマホ幅ではナビが画面外メニューになるため、デスクトップ幅にだけ適用する。 */
@media (min-width: 993px) {
  [data-theme-header="logo-center"] .site-header,
  [data-theme-header="logo-center"] .site-header.scrolled {
    height: auto;
  }
  [data-theme-header="logo-center"] .header-container {
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 0;
  }
  [data-theme-header="logo-center"] .site-nav {
    gap: 2rem;
  }
  /* 固定ヘッダーが縦に伸びた分だけ、本文の逃げを増やす */
  [data-theme-header="logo-center"] .hero {
    padding-top: calc(var(--header-height) + 3.5rem);
  }
  [data-theme-header="logo-center"] .detail-container,
  [data-theme-header="logo-center"] .work-detail-container {
    padding-top: calc(var(--header-height) + 7.5rem);
  }
  [data-theme-header="logo-center"] main > .section:first-child {
    padding-top: calc(var(--section-padding-y) + 3.5rem);
  }
}

/* --- カードの見せ方 --- */
/*   対象は main.css の .work-card に加え、home.css / works-detail.css /
     contact.css で定義されているカード類。子孫セレクタなので詳細度が勝ち、
     読み込み順に関係なく適用される。 */
[data-theme-card="shadow"] .work-card,
[data-theme-card="shadow"] .info-card,
[data-theme-card="shadow"] .service-card,
[data-theme-card="shadow"] .sidebar-box,
[data-theme-card="shadow"] .contact-form-container {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
[data-theme-card="shadow"] .work-card:hover,
[data-theme-card="shadow"] .info-card:hover,
[data-theme-card="shadow"] .service-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card-hover);
}

[data-theme-card="flat"] .work-card,
[data-theme-card="flat"] .info-card,
[data-theme-card="flat"] .service-card,
[data-theme-card="flat"] .sidebar-box,
[data-theme-card="flat"] .contact-form-container {
  border-color: transparent;
  box-shadow: none;
}
[data-theme-card="flat"] .work-card:hover,
[data-theme-card="flat"] .info-card:hover,
[data-theme-card="flat"] .service-card:hover {
  border-color: transparent;
  box-shadow: none;
}

/* --- 主ボタンの見せ方 --- */
/*   標準（outline）は枠線だけで、ホバーで初めてアクセント色に塗りつぶす。
     filled は最初から塗りつぶす。落ち着いた（暗い・彩度の低い）アクセント色を
     選んだテーマでは、枠線だけだと押す場所として弱くなるため。 */
[data-theme-button="filled"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}
[data-theme-button="filled"] .btn-primary:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* =====================================================================
   スマートフォン向けの調整（〜768px）
     実機幅（iPhone SE 375x667）で確認した崩れ・読みにくさを直す。
     ※ headless Chrome は幅500px未満にできないため、検証は iframe で
       375px の版面を作って行った（詳細は update_references を参照）。
   ===================================================================== */
@media (max-width: 768px) {

  /* --- ヒーロー --- */
  /*   min-height で潜り込みは直るが、内容が伸びたとき下端に貼り付くので余白を足す。
       -20px のずらしも、狭い画面では上に詰まる原因になるので戻す。 */
  .hero {
    padding-bottom: 3rem;
  }
  .hero .container {
    top: 0;
  }

  /* --- セクションの上下余白 --- */
  /*   PCの余白（既定6rem=96px）は画面高667pxのSPでは1画面の1/7を占めて広すぎる。
       テーマで余白を変えていてもその意図が残るよう、値ではなく倍率で縮める。 */
  .section {
    padding: calc(var(--section-padding-y) * 0.6) 0;
  }

  /* --- 詳細ページの上下余白 --- */
  /*   PCでは 上144px / 下128px。SPでは見出しに辿り着くまでが遠いので詰める。 */
  .detail-container {
    padding-top: calc(var(--section-padding-y) * 0.25);   /* 既定 1.5rem */
    padding-bottom: calc(var(--section-padding-y) * 0.6); /* 既定 3.6rem */
  }
  .detail-header {
    margin-bottom: 2rem;
  }
  .detail-footer {
    margin-top: 3rem;
    padding-top: 2rem;
  }

  /* --- お知らせのメタ行（日付とカテゴリ）--- */
  /*   日付を左、カテゴリを右に振り分ける。カテゴリの幅がまちまちでも
       右端が揃うので、並べたときに整って見える。
       トップのカードとお知らせ詳細の両方がこのクラスを使っている。 */
  .info-meta {
    justify-content: space-between;
    width: 100%;
  }

  /* --- ボタン --- */
  /*   左右の余白を詰めて、文字が1行に収まる余地を作る。
       それでも折り返すときは、単語の途中ではなく文節で折り返させる
       （auto-phrase に対応しない環境では無視されるだけで害はない）。 */
  .btn {
    padding: 0.75rem 1.25rem;
    word-break: auto-phrase;
  }
  .btn-cta {
    padding: 0.9rem 1.5rem;
  }

  /* --- 中央寄せブロックの本文 --- */
  /*   見出しは中央のままでよいが、複数行になる本文は行頭が揃わず読みにくい。
       本文だけ左寄せにする。 */
  .section-lead,
  .recruit-lead {
    text-align: left;
  }
}