/* =============================================================
   style-green-b-v2.css — 和テイスト緑 / メリハリ強め（改良版）
   追加:
     - 詳細ボタンにアイコン（矢印→ドキュメント風）
     - PDFボタンにシャイン・スウィープのホバーアニメ
     - カード右上角の“切り欠き”
     - 見出しタイトルのマーカーを太め＆存在感UP
   ============================================================= */
:root{
  --bg:#ffffff;
  --fg:#212b23;
  --muted:#4e5953;
  --accent:#275a34;      /* 濃い松葉 */
  --accent-2:#1f3c25;    /* 常磐深め */
  --neutral:#556660;     /* 青鈍 */
  --neutral-fade:#eef2f1;
  --border:#e2ece6;
  --card-bg:#ffffff;
  --chip-bg:#f3f9f5;
  --wedge1:#bfe7c2;
  --wedge2:#275a34;
}
html,body{background:var(--bg);color:var(--fg);font-family:"Meiryo","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.9;letter-spacing:.01em}
.wrap{max-width:1200px;margin:auto;padding:0 24px}
/* ===== Hero（上辺アクセント + 和紙グラデ） ===== */
.hero{position:relative;padding:52px 0 26px;margin:0 0 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg, rgba(191,231,194,0.18), rgba(238,245,236,0.10));box-shadow:inset 0 3px 0 color-mix(in srgb, var(--accent) 22%, transparent)}
.brand {
  display:flex;
  gap:14px;
  align-items:flex-start;   /* ← これでアイコンがタイトルの上端と揃う */
}
.brand .logo{width:56px;height:56px;border-radius:18px;background:linear-gradient(140deg,var(--accent),var(--wedge2));box-shadow:0 10px 24px rgba(39,90,52,.24)}
.brand .title{font-weight:860;font-size:clamp(22px,2.6vw,34px)}

/* ===== タイトルの“太めマーカー” & スワイプ ===== */
.title .marker{position:relative;display:inline-block;padding:0 .24em;background:linear-gradient(to right,rgba(191,231,194,0.00) 0%,rgba(191,231,194,0.50) 9%,rgba(191,231,194,0.50) 91%,rgba(191,231,194,0.00) 100%);box-decoration-break:clone}
.title .marker::before{content:"";position:absolute;left:0;bottom:0.02em;height:0.78em;/* ← 太め */width:100%;background:linear-gradient(90deg,#e1f6e4 0%,#c9ecd0 40%,#b5e2bd 70%,#8ec79b 100%);border-radius:6px;transform-origin:left center;transform:scaleX(0);animation:marker-swipe .8s ease-out .08s forwards}
/* わずかにラフな縁：SVGノイズを重ねて風合いを出す */
.title .marker::after{content:"";position:absolute;left:0;bottom:0.02em;height:0.78em;width:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cdefs/%3E%3Cpath d='M0,9 C15,12 30,6 45,8 65,10 90,5 120,9 V12 H0Z' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E");border-radius:6px;opacity:.55;pointer-events:none;transform-origin:left center;transform:scaleX(0);animation:marker-swipe .9s ease-out .11s forwards}
@keyframes marker-swipe{from{transform:scaleX(0);opacity:.7}to{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.title .marker::before,.title .marker::after{animation:none;transform:scaleX(1)}}

/* ===== Top Nav ===== */
.topnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.topnav a{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--chip-bg);color:var(--fg);transition:all .25s ease}
.topnav a:hover{border-color:var(--accent);background:#eaf5ee}
.topnav a[aria-current="page"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(39,90,52,.20)}

/* ===== Search ===== */
.utility{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0 16px}
.search{flex:1;display:flex;gap:8px}
.search input{flex:1;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--card-bg);color:var(--fg)}
.search button{padding:12px 16px;border-radius:14px;border:1px solid var(--border);background:var(--chip-bg);color:var(--fg)}

/* ===== Section Heading（額縁＋面取り） ===== */
.section{margin:36px 0;position:relative}
.section-head{position:relative;margin-bottom:14px}
.section-title-box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 14px 68px;border:2px solid var(--accent);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdfb);box-shadow:0 8px 18px rgba(39,90,52,.14);clip-path:polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%)}
.section-title-box::before{content:"";position:absolute;left:0;top:0;height:100%;width:60px;background:linear-gradient(180deg,var(--wedge1),var(--wedge2));clip-path:polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);border-top-left-radius:16px;border-bottom-left-radius:16px;box-shadow:0 4px 8px rgba(39,90,52,.18)}
.section-title{font-size:clamp(22px,2.5vw,33px);font-weight:860;letter-spacing:.01em;margin:0}
.section-link-cta{width:36px;height:36px;border-radius:50%;border:2px solid var(--accent);background:#fff;position:relative;display:inline-block}
.section-link-cta::after{content:"\2192";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:800}
.section-link-cta:hover{box-shadow:0 3px 10px rgba(39,90,52,.25)}
.section-lead{color:var(--muted);margin:10px 0 0;max-width:880px}
.section-line{display:none}

/* ===== 背景パターン（和紙） ===== */
.pattern::before{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cpattern id='a' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='%23bfe7c2' stroke-width='0.6' opacity='0.22'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' fill='url(%23a)'/%3E%3C/svg%3E");opacity:.6;border-radius:22px;box-shadow:inset 0 3px 0 color-mix(in srgb, var(--accent) 15%, transparent)}

/* ===== Grid & Card ===== */
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:22px}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

.doc-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* アニメーションは影と変形のみ */
  transition: box-shadow .25s ease, transform .25s ease;

  /* 通常は影なし&切り欠きなし */
  box-shadow: none;
  clip-path: none;
}

.doc-card:hover {
  transform: translateY(-2px);  /* ふんわり浮く */
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);  /* 柔らかい影 */
  border-color: var(--border);
  clip-path: none;  /* 切り欠きは出さない */
}

.doc-card h3{font-size:1.06rem;margin:0;font-weight:770;letter-spacing:.005em}
.doc-card .desc{font-size:.97rem;color:#354238}
.doc-card .desc::after{content:none}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--border);border-radius:20px;background:var(--chip-bg);color:var(--fg);position:relative;overflow:hidden}

/* PDFボタン：主役化 + シャインスウィープ */
.btn.primary{padding:12px 15px;border-radius:24px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(39,90,52,.20)}
.btn.primary:hover{filter:brightness(1.03) saturate(1.03);box-shadow:0 10px 22px rgba(39,90,52,.26)}
/* シャイン（hover時に斜めに走る） */
.btn.primary::after{content:"";position:absolute;top:-120%;left:-30%;width:40%;height:300%;transform:rotate(25deg);background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .2s ease}
.btn.primary:hover::after{animation:btn-shine .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes btn-shine{0%{opacity:.0;transform:translateX(0) rotate(25deg)}20%{opacity:.85}100%{opacity:0;transform:translateX(220%) rotate(25deg)}}

/* 詳細（ゴースト）— 青鈍で固定＆アイコン追加 */
.doc-card .doc-actions .btn.ghost,
.doc-actions .btn.ghost,
.btn.ghost.detail{background:#fff !important;color:var(--neutral) !important;border-color:var(--neutral) !important;box-shadow:inset 0 0 0 1px var(--neutral)}
/* アイコン：左にドキュメント風SVG（矢印は撤去） */
.btn.ghost{padding-left:2.4em; padding-right:1.3em}
.btn.ghost::after{content:none}
.btn.ghost::before{content:"";position:absolute;left:.9em;top:50%;width:1.1em;height:1.1em;transform:translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23556660' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E") no-repeat center/contain;
}
.btn.ghost:hover{background:var(--neutral-fade) !important}

/* ===== Focus & Reveal ===== */
:focus{outline:3px solid #cfdad7;outline-offset:2px}
.reveal{opacity:0;transform:translateY(12px) scale(.995)}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}

/* ====== 見やすい太めマーカー（背景だけで実現／行折りにも追従） ====== */
/* マーカーの太さと位置を変数化 */
.title{ --marker-h: 0.46em; --marker-y: 78%; line-height: 1.25; }
.title .marker{
  position: relative;
  display: inline;               /* 余分な高さを持たせない */
  padding: 0 .18em;              /* ほどよい左右余白 */
  /* 背景だけで“太めの線”を引く（複数行も OK） */
  background-image: linear-gradient(
    0deg,
    rgba(185, 233, 200, .85),
    rgba(185, 233, 200, .85)
  );
  background-repeat: no-repeat;
  background-size: 0 var(--marker-h);   /* アニメ開始時は 0% 幅 */
  background-position: 0 var(--marker-y);
  /* 行をまたぐときに1行ごとに背景をクローン */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* スワイプでにゅっと出す（軽め） */
  animation: marker-wipe .7s ease-out .05s forwards;
}

/* 既存の ::before / ::after の塗りは使わない（ダブり防止） */
.title .marker::before,
.title .marker::after{
  content:none !important;
}

@keyframes marker-wipe{
  from{ background-size: 0 var(--marker-h); }
  to  { background-size: 100% var(--marker-h); }
}

@media (prefers-reduced-motion: reduce){
  .title .marker{ animation: none; background-size: 100% var(--marker-h); }
}

/* ====== ロゴの主張を少し抑える（視線をタイトルに） ====== */
.brand .logo{
  width:44px; height:44px;       /* 56→44 で存在感を適度に */
  border-radius:14px;
  box-shadow: 0 8px 18px rgba(39,90,52,.18);
}
/* ロゴとタイトルの間隔を少し広げる（窮屈さ解消） */
.brand{ gap: 18px; }

/* ====== ヒーロー帯の余白を微調整（マーカーが窮屈に見えないように） ====== */
.hero{
  padding: 48px 0 28px;          /* 下を +2px だけゆとり */
}

.hero-lead {
  color: var(--muted);
  font-size: 0.92rem;        /* ← 少し小さめに */
  margin-top: 20px;          /* ← タイトルとの余白を広げる */
  max-width: 900px;
  line-height: 1.85;
}

/* =====================================
   Modern Navy × Aqua (Light Blue) Theme
   style.css の末尾に貼り付けて上書き
===================================== */

/* ------- カラーパレット ------- */
:root{
  --bg:#ffffff;
  --fg:#1c2432;            /* 濃紺寄りの本文色（可読性高） */
  --muted:#5e6b80;         /* 説明文の青灰 */

  /* 基調：ネイビー、アクセント：水色寄りブルー */
  --accent:#2a3f8f;        /* ネイビー寄りの基調ブルー */
  --accent-2:#182a66;      /* さらに深いネイビー */

  --neutral:#647088;       /* 中間の青灰（枠・アイコン） */
  --neutral-fade:#eef5fb;  /* とても淡い水色（背景） */

  /* 水色ハイライト（装飾や下線演出に使う） */
  --wedge1:#cfeaf9;        /* 明るめ水色（透過感） */
  --wedge2:#2a3f8f;        /* ネイビーへ自然に接続 */

  --chip-bg:#f3f8fd;       /* ナビやチップの地色（軽やか） */
  --border:#cfdcf0;        /* 青みのある淡ボーダー */
  --card-bg:#ffffff;
}

/* ------- ヒーロー帯：ネイビーに水色の“空気感” ------- */
.hero{
  background:linear-gradient(135deg, rgba(207,234,249,0.20), rgba(240,246,253,0.08));
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ------- タイトル左のロゴ（四角） ------- */
.brand{
  align-items:flex-start;   /* ← タイトル上端にロゴを揃える（ズレ防止） */
  gap:18px;
}
.brand .logo{
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 18px rgba(24,42,102,.20);
}

/* ------- タイトルの“太めマーカー”は水色で軽く ------- */
.title .marker{
  background-image: linear-gradient(
    0deg,
    rgba(188, 228, 250, .80),
    rgba(188, 228, 250, .80)
  );
}

/* ------- タイトル下の説明文（小さめ＋余白） ------- */
.hero-lead{
  color: var(--muted);
  font-size: 0.92rem;       /* 少し小さめ */
  margin-top: 20px;         /* タイトルとの間隔を確保 */
  max-width: 900px;
  line-height: 1.85;
}

/* ------- トップナビ（軽い水色ベース、選択時はネイビー） ------- */
.topnav a{
  background: var(--chip-bg);
}
.topnav a:hover{
  border-color: var(--accent);
  background:#e8f3fb;       /* ほんのり水色 */
}
.topnav a[aria-current="page"]{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(24,42,102,.18);
}

/* ------- セクション見出し：水色→ネイビーの帯 ------- */
.section-title-box{
  border:2px solid var(--accent);
  background:linear-gradient(180deg,#fff,#f9fbff);
  box-shadow:0 8px 18px rgba(24,42,102,.14);
}
.section-title-box::before{
  background:linear-gradient(180deg, var(--wedge1), var(--wedge2));
  box-shadow:0 4px 8px rgba(24,42,102,.18);
}

/* ------- カード：通常フラット、ホバーで“ふんわり水色影” ------- */
.doc-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card-bg);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;

  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  box-shadow:none;      /* 通常は影なし */
  clip-path:none;       /* 右上の切り欠きもなし */
}
.doc-card:hover{
  transform: translateY(-2px);
  /* ネイビー基調に水色の空気感を足した“柔らかい影” */
  box-shadow:
    0 10px 22px rgba(24,42,102,0.10),
    0 4px 10px rgba(153,199,236,0.18);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

/* ------- ボタン：主役はネイビー、軽さは水色で補助 ------- */
.btn.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(24,42,102,.20);
}
.btn.primary:hover{
  filter:brightness(1.04) saturate(1.04);
  box-shadow:0 10px 24px rgba(24,42,102,.24);
}

/* ------- 和紙風パターンも水色ニュアンスへ ------- */
.pattern::before{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cpattern id='a' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='%23cfeaf9' stroke-width='0.6' opacity='0.24'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' fill='url(%23a)'/%3E%3C/svg%3E");
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ------- フォーカスリングも水色寄りで統一 ------- */
:focus{
  outline:3px solid #cfe1fb;
  outline-offset:2px;
}

/* 追記: アクセシビリティ用（視覚非表示・読み上げ対象） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ===== セクション見出し 右の丸矢印ボタン：確定版（テキスト完全非表示） ===== */
.section-title-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 52px; /* 見出し帯が潰れないよう保険 */
}

.section-title-box .section-title {
  margin: 0;
}

/* 丸ボタン本体：固定サイズ＋中央寄せ＋テキスト全消音 */
.section-link-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;         /* 触りやすいタップ領域 */
  height: 40px;
  margin-left: auto;   /* 右端へ */
  border-radius: 999px;
  border: 1px solid #BFD0FF;
  background: #F0F5FF;
  color: #2146C7;
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  font-size: 0 !important;      /* ← 枠内テキストを完全に不可視化（にじみ防止） */
  white-space: nowrap;           /* 念のための折返し防止 */
}

/* SR（スクリーンリーダー）向けに span を置く場合の完全不可視化 */
.section-link-cta span {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* 矢印はフォント依存を避ける SVG で中央表示（太め／視認性重視） */
.section-link-cta::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background:
    no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232146C7' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 5l7 7-7 7'/%3E%3C/svg%3E");
}

.section-link-cta:hover,
.section-link-cta:focus {
  background: #E6EFFF;
  border-color: #A6BDFE;
  outline: none;
}

.section-link-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(33,70,199,.25);
}

/* 強制ハイコントラスト対策（OS設定に追従） */
@media (forced-colors: active) {
  .section-link-cta { border-color: ButtonText; background: Canvas; color: ButtonText; }
  .section-link-cta::before {
    content: "→"; background: none;
    font-weight: 900; font-size: 22px; line-height: 1;
  }
}

/* モバイル微調整（任意） */
@media (max-width: 480px) {
  .section-link-cta { width: 36px; height: 36px; }
  .section-link-cta::before { width: 22px; height: 22px; }
}

/* ===== 横スクロール抑止（全体） ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 疑似要素や固定配置の 1px はみ出し対策 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 画像・埋め込みのはみ出し防止 */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* グリッド列の最小幅をモバイルで厳しめに（念のため） */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr !important; }
}

/* 背景パターン疑似要素が 1px 膨らむケースのガード */
.pattern::before {
  left: 0; right: 0; top: 0; bottom: 0;
  overflow: clip; /* 新しめのプロパティ。古ブラウザは無視してもOK */
  max-width: 100%;
}
/* === スキップリンク（通常は不可視、フォーカス時のみ見せる） === */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto;
  z-index:10000; padding:.6em .9em; border-radius:8px;
  background:#000; color:#fff; outline:3px solid #fff; outline-offset:2px;
}

/* === フォーカスの視認性を全体で底上げ（見た目は既存トーンを尊重） === */
:focus-visible{
  outline:3px solid rgba(26,115,232,.8); /* 既存と一貫する青系 */
  outline-offset: 2px;
}

/* === 高コントラスト/低動作を尊重（OS/ブラウザ設定に追従） === */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
@media (prefers-contrast: more){
  .btn.primary{ filter: contrast(115%); }
  .topnav a[aria-current="page"]{ box-shadow: 0 0 0 3px rgba(0,0,0,.18); }
}

/* === sr-only（index.html内のラベル/説明で使用） === */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0; clip:rect(0 0 0 0);
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* タイトル帯（pageTitle01）を完全に非表示にする */
.pageTitle01 { 
  display: none !important;
}
/* ===== カードタイトルの視認性アップ（リンクではない見た目） ===== */
.doc-card h3 {
  margin: 0 0 .4rem;
  font-weight: 800;                /* 太字でグッと */
  font-size: 1.08rem;              /* 見出しとして少し大きめ */
  line-height: 1.45;
  letter-spacing: .01em;
}

.doc-card .card-title {
  color: var(--accent);            /* テーマのアクセント色 */
  background-image: linear-gradient(transparent 65%, color-mix(in srgb, var(--accent) 18%, white) 0);
  background-size: 100% .52em;     /* 下線風の太マーカー */
  background-repeat: no-repeat;
  padding-bottom: .06em;           /* 下線とテキストの間に少し余白 */
}

/* タイトルはリンクではないため、ポインタや装飾は出さない */
.doc-card .card-title:hover {
  text-decoration: none;
  cursor: default;
}

/* タイトル用：点線の下線（非リンク見出しに最適） */
.dotted-underline {
  /* 下線の色はテーマのアクセント色をベースに淡い水色へミックス */
  --du-color: color-mix(in srgb, var(--accent) 55%, #87CEFA 45%);
  border-bottom: 2px dotted var(--du-color);
  padding-bottom: .06em;           /* 文字と点線の間に少し余白 */
  line-height: 1.45;               /* 読みやすい行間 */
}

/* 行が折り返しても“下線感”を保ちたい場合の1行トリック（任意） */
.dotted-underline.-underline-all {
  background-image:
    linear-gradient(var(--du-color), var(--du-color));
  background-repeat: repeat-x;
  background-size: 4px 2px;        /* 点線の粒度: 4px間隔・2px太さ */
  background-position: 0 calc(100% - .02em);
  border-bottom: 0;                /* 擬似下線を使うためボーダーは無効化 */
}

/* タイトルはリンクではないのでカーソルや下線装飾は出さない */
.dotted-underline:hover {
  text-decoration: none;
  cursor: default;
}

/* dotted-underline を付けたタイトルは背景下線を消し、点線を優先 */
.doc-card .card-title.dotted-underline {
  background-image: none !important;   /* 既存の背景下線を無効化 */
  border-bottom: 2px dotted
    color-mix(in srgb, var(--accent) 55%, #87CEFA 45%); /* 既存の配色に合わせる */
  padding-bottom: .06em; /* 文字と点線の間に少し余白 */
}

/* ==== カードタイトルの点線下線：text-decoration ベースに統一 ==== */
.doc-card .card-title.dotted-underline {
  /* 下線の見え方 */
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, #87CEFA 40%);
  text-decoration-thickness: 1.5px; /* 太さ（好みで 1.3px〜2px） */

  /* 文字との距離（狭め）：行折り返しにも自然に追従 */
  text-underline-offset: 0.08em;

  /* 競合の元を除去（背景下線・余白は使わない） */
  background-image: none !important;
  background-size: 0 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;

  /* 行間を少しだけ詰めるとより綺麗（必要なら調整） */
  line-height: 1.35; /* 元: 1.45 → 詰め気味に */
}

/* ==== 2行目で点線が被るケースの微調整（英数字や括弧が多い場合） ==== */
/* ピクセルで明示的にオフセットする版（必要なら併用） */
.doc-card .card-title.dotted-underline.-tight {
  text-underline-offset: 2px; /* emではなくpxで固定したい場合 */
}

/* ==== レガシー環境向けフォールバック（text-decoration-style未対応） ==== */
@supports not (text-decoration-style: dotted) {
  .doc-card .card-title.dotted-underline {
    /* 最低限の見た目確保：通常の下線 */
    text-decoration: underline;
    text-underline-offset: 2px;
    /* 薄い色で重さを抑える */
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, #87CEFA 55%);
    /* dottedが無ければ太さだけ軽く調整 */
    text-decoration-thickness: 1.5px;
  }
}

/* ==== 既存の “全行背景ドット” は重なりの原因になるので無効化 ==== */
/* （もし .dotted-underline.-underline-all を付けていたカードがあれば外してください） */
.doc-card .card-title.dotted-underline.-underline-all {
  background: none !important;
  border-bottom: none !important;
}

/* === PDF ボタンに“ドキュメント”アイコンを付ける ================= */
/* 既存 .btn.primary にアイコン余白を足し、左にSVGを表示 */
.btn.primary {
  padding-left: 2.4em; /* アイコン分の余白を左へ */
  position: relative;
}
.btn.primary::before {
  content: "";
  position: absolute;
  left: 0.9em;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  transform: translateY(-50%);
  /* 以前 .btn.ghost で使っていた“ドキュメント”SVGを転用 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3C/svg%3E") no-repeat center/contain;
  /* PDFボタンは濃紺地（グラデ）なので stroke を白(#FFF)に */
}

/* === 詳細ページボタンを“外部リンク”アイコンに変更 =============== */
/* 既存 .btn.ghost のデフォルト・アイコンは無効化（detail のみ上書き） */
.btn.ghost.detail {
  padding-left: 2.4em; /* アイコン分の余白 */
  position: relative;
}
.btn.ghost.detail::before {
  content: "";
  position: absolute;
  left: 0.9em;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  transform: translateY(-50%);
  /* 外部リンク風の太め矢印アイコン（青鈍系の線色） */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23556660' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14L21 3'/%3E%3Cpath d='M21 14v7h-7'/%3E%3Cpath d='M3 10l11-11' opacity='0'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* 既存定義で .btn.ghost::before にドキュメントSVGがある場合の打ち消し */
.btn.ghost.detail::before { /* すでに上書き済みだが念のための優先度確保 */
  background-color: transparent; /* 安全側 */
}

/* （任意）アイコンと文字の視認性を少し上げる微調整 */
.btn.primary::before,
.btn.ghost.detail::before {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* 影は付けない方針 */
}

/* 補足説明の横幅を広げる（折り返しを防ぐ） */
.hero-lead {
  max-width: none !important;  /* 900px → 解除 */
}
/* === Light Aqua Theme (brighter blue) === */
:root{
  --bg:#ffffff;
  --fg:#1c2432;           /* 本文は可読性優先で据え置き */
  --muted:#55667e;        /* 説明文の青灰 */
  /* 主色：明るい青系に */
  --accent:#1e6fd8;       /* Azure寄りの青 */
  --accent-2:#1557a8;     /* 濃いめの青（グラデの下地） */
  --neutral:#6e7e96;      /* 補助線の青灰 */
  --neutral-fade:#eaf3ff; /* ごく薄い水色背景 */
  /* 装飾用の淡色 → 青系へ */
  --wedge1:#d8ecff;       /* 明るい水色 */
  --wedge2:#1e6fd8;       /* 主色と揃える */
  --chip-bg:#f2f7ff;      /* チップ/ボタンの地色 */
  --border:#d4e3f9;       /* 淡い青ボーダー */
  --card-bg:#ffffff;
}

/* ヒーロー帯のグラデは淡いブルーで“明るく” */
.hero{
  background:linear-gradient(135deg, rgba(216,236,255,0.24), rgba(240,246,255,0.10));
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ナビのホバー/選択トーンも明るめ青へ */
.topnav a:hover{
  border-color:var(--accent);
  background:#e9f2ff;
}
.topnav a[aria-current="page"]{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(30,111,216,.18);
}

/* セクション見出し帯（左のカラーウェッジ含む） */
.section-title-box{
  border:2px solid var(--accent);
  background:linear-gradient(180deg,#fff,#f9fbff);
  box-shadow:0 8px 18px rgba(30,111,216,.14);
}
.section-title-box::before{
  background:linear-gradient(180deg,var(--wedge1),var(--wedge2));
  box-shadow:0 4px 8px rgba(30,111,216,.18);
}

/* カードのホバー影は青みを増やして軽さを演出 */
.doc-card:hover{
  box-shadow:
    0 10px 22px rgba(30,111,216,0.10),
    0 4px 10px rgba(160,200,255,0.20);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

/* 主要ボタン（PDF） */
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(30,111,216,.20);
}
.btn.primary:hover{
  filter:brightness(1.05) saturate(1.05);
  box-shadow:0 10px 24px rgba(30,111,216,.24);
}

/* 背景の伝統模様（和紙風）も淡い水色ニュアンスに */
.pattern::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cdefs%3E%3Cpattern id='a' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0 L20 10 L10 20 L0 10 Z' fill='none' stroke='%23d8ecff' stroke-width='0.6' opacity='0.26'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' fill='url(%23a)'/%3E%3C/svg%3E");
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 14%, transparent);
}

/* フォーカスリング（キーボード操作の視認性） */
:focus { outline:3px solid #cfe2ff; outline-offset:2px; }
:focus-visible { outline:3px solid rgba(30,111,216,.75); outline-offset:2px; }

/* --- Square Logo Patch --- */
.hero .brand .logo{
  /* サイズは必要に応じて。44px据え置きならそのままでもOK */
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;      /* 念のため正方形を強制 */

  /* 角丸をやめて“■”にする（ほんの少し丸めたいなら 4px〜8px） */
  border-radius: 0;          /* ← 完全な四角に */
  /* border-radius: 6px;     ← ほんのり角を落としたい場合 */

  /* 既存の影やグラデはそのまま活かせます（色は --accent 系を使用） */
}
/* --- Square Logo : Soft Rounded --- */
.hero .brand .logo{
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;

  /* やさしい雰囲気の角丸（6〜10px あたりが自然） */
  border-radius: 8px;

  /* 既存の背景グラデ・影はそのまま活かせるので触らなくてOK */
}
/* ========== 1) カードタイトルの文字サイズを上げる ========== */
/* ベース見出し自体を少し大きくし、改行時の行間も詰めすぎない */
.doc-card h3{
  font-size: 1.18rem !important;  /* 既存 1.06〜1.08rem → +約10〜12% */
  line-height: 1.48 !important;   /* 可読性キープ（長い和文タイトル想定） */
  margin: 0 0 .4rem;
  font-weight: 800;
}

/* 下線スタイル付きタイトル（.card-title .dotted-underline）も追随 */
.doc-card .card-title{
  /* テキストはリンクではない前提（app.jsでspan生成） */
  background-image: none;          /* 既存の背景下線は使わない */
}
.doc-card .card-title.dotted-underline{
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, #87CEFA 40%);
  text-decoration-thickness: 1.8px;
  text-underline-offset: 0.1em;
}
/* ========== PDF/詳細ボタンを“同じ小さめサイズ”に統一 ========== */
/* ベース：高さ控えめ・角丸小さめ・テキスト前面化（アイコン被り防止） */
.btn.primary,
.btn.ghost.detail{
  font-size: 0.88rem !important;
  line-height: 1.1 !important;
  border-radius: 14px !important;
  min-height: 32px;                 /* タップ領域の下限 */
  display: inline-flex;
  align-items: center;
  position: relative;               /* アイコンの絶対配置用 */
  z-index: 1;                       /* テキストを前面に */
}

/* 文字とアイコンがぶつからないよう左パディングを確保（両ボタン同条件） */
.btn.primary,
.btn.ghost.detail{
  padding: 6px 10px 6px 2.0em !important;   /* ← 左にアイコン分を確保 */
}

/* ====== アイコン（::before）を小さく・左固定・背面に ====== */
.btn.primary::before,
.btn.ghost.detail::before{
  content: "";
  position: absolute;
  left: 0.6em;                      /* テキストの左外側に固定配置 */
  top: 50%;
  transform: translateY(-50%);
  width: 0.95em;                    /* 少し小さめに縮小 */
  height: 0.95em;
  z-index: 0;                       /* テキストの背面へ */
  pointer-events: none;             /* クリックを邪魔しない */
}

/* 2ボタンの並び間隔をやや広げ、統一サイズでの見栄えを整える */
.doc-actions{ gap: 10px; }

/* モバイルではさらに控えめ（任意） */
@media (max-width: 480px){
  .btn.primary, .btn.ghost.detail{
    font-size: 0.86rem !important;
    padding: 6px 9px 6px 1.9em !important;
    min-height: 30px;
  }
}
/* ========== ふんわり小型の統一ボタン（PDF/詳細） ========== */
/* ポイント：高さ32→34px相当、内側余白を増やして“潰れ感”を解消。
   角丸を少し大きく、影はごく薄く。 */

.btn.primary,
.btn.ghost.detail{
  /* サイズ感（前回より “ふんわり”） */
  font-size: 0.90rem !important;                  /* 0.88 → 0.90 で読みやすさ確保 */
  line-height: 1.2 !important;
  padding: 8px 12px 8px 2.1em !important;         /* ← 左はアイコンぶんの余白を確保 */
  min-height: 34px;                                /* 押しやすい最低高さ */
  border-radius: 16px !important;                  /* 少し丸めて柔らかく */
  display: inline-flex; align-items: center;
  position: relative; z-index: 1;                  /* テキストを前面に */
  /* ふんわり見せる薄い影（テーマに馴染む程度） */
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* アイコンは左に固定配置＋小ぶり、テキストと重ならないよう背面へ */
.btn.primary::before,
.btn.ghost.detail::before{
  content: "";
  position: absolute; left: 0.7em; top: 50%;
  transform: translateY(-50%);
  width: 1.05em; height: 1.05em;                  /* 少しだけ大きめに戻す */
  z-index: 0; pointer-events: none;
}

/* 2ボタンの並び間隔もゆとりを持たせる */
.doc-actions{ gap: 12px; }

/* （任意）ホバー時の“ふんわり”演出：影をわずかに強める */
.btn.primary:hover,
.btn.ghost.detail:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* モバイルはやや控えめ（親指タップ確保） */
@media (max-width: 480px){
  .btn.primary, .btn.ghost.detail{
    font-size: 0.90rem !important;
    padding: 9px 13px 9px 2.2em !important;       /* 親指向けに +1px 余白 */
    min-height: 36px;                              /* タップしやすさ優先 */
  }
}
/* ============================
   ふんわり “ひと回り大きめ” 統一ボタン
   （PDF .btn.primary／詳細 .btn.ghost.detail）
   ============================ */
.btn.primary,
.btn.ghost.detail{
  /* サイズ：前回より +1〜2px 程度の余白と高さ */
  font-size: 0.94rem !important;                 /* 0.90 → 0.94 */
  line-height: 1.25 !important;
  padding: 10px 14px 10px 2.30em !important;     /* ← 左はアイコン分を確保 */
  min-height: 38px;                               /* 押しやすい高さ感 */
  border-radius: 18px !important;                 /* やわらかい角丸 */
  display: inline-flex; align-items: center;
  position: relative; z-index: 1;                 /* テキストを前面 */
  /* ふんわり見える薄い影（テーマに馴染む程度） */
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

/* アイコンは左に固定配置・テキスト背面へ（被り防止） */
.btn.primary::before,
.btn.ghost.detail::before{
  content: "";
  position: absolute;
  left: 0.70em;                                   /* 文字の外側に固定 */
  top: 50%;
  transform: translateY(-50%);
  width: 1.10em; height: 1.10em;                  /* ボタン拡大に合わせ微増 */
  z-index: 0; pointer-events: none;
}

/* 2ボタンの並びの間隔もゆとりを少しだけ増やす */
.doc-actions{ gap: 12px; }

/* ホバーは“ふんわり”演出：影をわずかに強める（任意） */
.btn.primary:hover,
.btn.ghost.detail:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.09);
}

/* モバイル（親指タップ）向けのゆとり：そのままでもOK */
@media (max-width: 480px){
  .btn.primary, .btn.ghost.detail{
    font-size: 0.95rem !important;
    padding: 11px 15px 11px 2.35em !important;
    min-height: 40px;                              /* タップしやすさ最優先 */
  }
}