:root{
  --brand:#2bb0d9; --brand-deep:#102a43; --brand-dark:#0b2239;
  --brand-soft:#dff3fa; --brand-pale:#eef8fc;
  --accent:#f59e6b; --accent-soft:#fff1e8;
  --ink:#1f2937; --muted:#5f6b7a; --line:#d9e4ea;
  --surface:#fff; --page:#f8fafc;
  --shadow:0 18px 48px rgba(16,42,67,.13);
  --shadow-sm:0 7px 22px rgba(16,42,67,.09);
  --radius:22px;
  /* メインCTA（オレンジ）のグラデーション。
     ヒーローのCTAと問い合わせフォームの送信ボタンで共有する。
     値の出自は home.css のスマホ調整分（淡いサーモンだと白抜き文字が沈むため
     彩度を上げたもの）。home.css はトップページ専用で固定ページには
     読み込まれないため、共有する値はここに置く。 */
  --cta-grad:linear-gradient(135deg,#ff9f45,#f97316);
  --cta-grad-hover:linear-gradient(135deg,#ffa855,#fb8324);
  /* 本文の「ポイント」ブロック用の暖色。
     直下に置かれるオレンジCTAと張り合わないよう彩度は低めに抑える。 */
  --warm-pale:#fff4e8; --warm-line:#f0c9a0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--surface);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-feature-settings:"palt";line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
:focus-visible{outline:3px solid rgba(245,158,107,.75);outline-offset:3px}
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}

/* utility bar */
.utility{color:#fff;background:var(--brand-deep);font-size:12px;letter-spacing:.08em}
.utility .container{min-height:34px;display:flex;align-items:center;justify-content:space-between}
.utility p{margin:0}
.utility a{opacity:.82}
.utility a:hover{opacity:1}

/* header */
.site-header{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid rgba(220,233,238,.8);
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
}
.header-inner{min-height:82px;display:flex;align-items:center;gap:34px}
.logo{flex:0 0 286px;display:flex;align-items:center}
.logo img{display:none}
.brand-logo{display:inline-flex;align-items:center;gap:12px}
.brand-symbol{font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--brand-deep)}
.brand-symbol .j{color:inherit}
.brand-symbol .s{color:var(--brand)}
.brand-type strong{display:block;font-size:20px;line-height:1.2}
.brand-type small{display:block;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.global-nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:700}
.global-nav a{padding:8px 0;border-bottom:2px solid transparent;transition:.2s}
.global-nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.header-search{
  margin-left:auto;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;transition:.2s;
}
.header-search:hover{border-color:var(--brand);background:var(--brand-pale)}
/*
 * 虫めがね。円（.search-mark）と45度回転させた柄（::after）で描く。SVGではない。
 *
 * 柄が円の右下にはみ出すため、place-items:center は円だけを中央に置き、
 * アイコン全体は右下にずれて見えていた。
 * 実効描画範囲は X:0〜17.68px / Y:0〜19.18px（中心 8.84, 9.59）、
 * 円の中心は (6.5, 6.5)。その差を translate で戻して全体の中心を合わせる。
 */
.search-mark{width:13px;height:13px;border:2px solid var(--brand-deep);border-radius:50%;position:relative;transform:translate(-2.3px,-3.1px)}
.search-mark::after{content:"";position:absolute;right:-5px;bottom:-4px;width:7px;height:2px;background:var(--brand-deep);transform:rotate(45deg)}

/* mobile toggle + drawer */
/*
 * align-content:center が無いと gap が効かない。
 * grid の暗黙行は align-content の既定値（normal＝stretch）で
 * ボタンの高さいっぱいに引き伸ばされ、棒の間隔は gap ではなく
 * 行の余りで決まってしまう（38pxのとき実測10.66px）。
 * center にすると3本が内容分の高さ（2px×3＋4px×2＝14px）にまとまり、
 * gap の値がそのまま見た目の間隔になる。
 */
.mobile-toggle{
  display:none;margin-left:12px;width:38px;height:38px;
  place-items:center;align-content:center;gap:4px;border:1px solid var(--line);border-radius:10px;
  background:#fff;cursor:pointer;
}
.mobile-toggle span{display:block;width:17px;height:2px;background:var(--brand-deep);border-radius:2px}
.mobile-drawer{position:fixed;inset:0;z-index:60;background:rgba(11,34,57,.45);opacity:0;visibility:hidden;transition:.22s}
.mobile-drawer.is-open{opacity:1;visibility:visible}
.mobile-drawer-panel{
  position:absolute;top:0;right:0;width:min(360px,86vw);height:100%;
  padding:22px;overflow-y:auto;background:#fff;
  transform:translateX(100%);transition:transform .24s;
}
.mobile-drawer.is-open .mobile-drawer-panel{transform:translateX(0)}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mobile-drawer-head strong{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.mobile-drawer-close{width:38px;height:38px;border:0;border-radius:8px;background:var(--brand-pale);font-size:20px;line-height:1;cursor:pointer}
.mobile-drawer-panel nav{display:grid;padding:8px 0}
.mobile-drawer-panel nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 6px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;
}
.mobile-drawer-panel nav a span{
  min-width:34px;padding:2px 8px;border-radius:999px;
  background:var(--brand-pale);color:var(--muted);
  font-size:11px;font-weight:800;text-align:center;
}
.mobile-drawer-search{
  display:block;margin-top:14px;padding:13px;border-radius:10px;
  background:var(--brand-deep);color:#fff;text-align:center;font-weight:800;font-size:14px;
}
.mobile-drawer-pr{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.mobile-drawer-pr-label{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.mobile-drawer-pr-item{
  display:flex;align-items:baseline;gap:8px;
  padding:11px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;
}
.mobile-drawer-pr-item strong{font-size:14px}
.mobile-drawer-pr-item span{font-size:11px;color:var(--muted)}

/* search modal */
.search-modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;opacity:0;transition:.18s}
.search-modal.is-open{opacity:1}
.search-backdrop{position:absolute;inset:0;border:0;background:rgba(11,34,57,.5);cursor:pointer}
.search-panel{
  position:relative;width:min(640px,100%);max-height:86vh;overflow-y:auto;
  padding:40px 38px 32px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);
}
.search-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:8px;background:var(--brand-pale);cursor:pointer}
.search-close::before,.search-close::after{content:"";position:absolute;left:11px;top:18px;width:16px;height:2px;background:var(--brand-deep)}
.search-close::before{transform:rotate(45deg)}
.search-close::after{transform:rotate(-45deg)}
.search-panel-kicker{margin:0 0 6px;font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--brand)}
.search-panel h2{margin:0 0 8px;font-size:26px}
.search-panel-lead{margin:0 0 20px;font-size:14px;color:var(--muted)}
.modal-search{display:flex;gap:10px}
.modal-search input{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:10px}
.modal-search button{padding:0 22px;min-height:50px;border:0;border-radius:10px;background:var(--brand-deep);color:#fff;font-weight:800;cursor:pointer}
.search-group{margin-top:24px}
.search-group h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.modal-keywords{display:flex;flex-wrap:wrap;gap:8px}
.modal-keywords a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700}
.modal-keywords a:hover{border-color:var(--brand);background:var(--brand-pale)}
.modal-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.modal-categories a{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700}
body.search-open{overflow:hidden}

/* footer */
.site-footer{margin-top:80px;padding:56px 0 28px;background:var(--brand-dark);color:#dce8f0}
.footer-top{display:grid;grid-template-columns:320px 1fr;gap:48px}
.footer-brand .brand-logo{color:#fff}
.footer-brand .brand-symbol{color:#fff}
.footer-brand .brand-symbol .s{color:var(--brand)}
.footer-brand .brand-type small{color:rgba(220,232,240,.7)}
.footer-brand p{margin:14px 0 0;font-size:13px;line-height:1.9;color:rgba(220,232,240,.78)}
.footer-logo{display:none}
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col h3{margin:0 0 12px;font-size:13px;letter-spacing:.08em;color:#fff}
.footer-col a{display:block;padding:5px 0;font-size:13px;color:rgba(220,232,240,.8)}
.footer-col a:hover{color:#fff}
.copyright{margin-top:36px;padding-top:20px;border-top:1px solid rgba(220,232,240,.16);font-size:12px;color:rgba(220,232,240,.6)}

/* back to top */
.back-top{
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:46px;height:46px;border:0;border-radius:50%;
  background:var(--brand-deep);cursor:pointer;opacity:0;visibility:hidden;transition:.2s;
}
.back-top.is-visible{opacity:1;visibility:visible}
.back-top::before{content:"";position:absolute;left:17px;top:19px;width:11px;height:11px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(45deg)}

/* ---- responsive ---- */
@media (max-width:980px){
  .global-nav{display:none}
  .mobile-toggle{display:grid}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-links{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .container{width:min(100% - 32px,1180px)}
  .utility .container{justify-content:center}
  .utility .container a{display:none}
  .header-inner{min-height:70px;gap:12px}
  .logo{flex-basis:auto}
  .brand-symbol{font-size:34px}
  .brand-type strong{font-size:17px}
  .brand-type small{font-size:11px;letter-spacing:.18em}
  .search-panel{padding:34px 24px 28px}
  .search-panel h2{font-size:23px}
  .modal-search{display:grid}
  .modal-search button{min-height:48px}
  .modal-categories{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important}
}

/* ==========================================================================
   ここから下は WordPress 実装時の追加分
   （共通パーツ確定版 PART 5 には無かったもの）
   ========================================================================== */

/* スキップリンク（キーボード操作時のみ表示） */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:10px 16px;background:var(--brand-deep);color:#fff;font-weight:700;
}
.skip-link:focus{left:0}

/* 管理バーが出ている場合に sticky ヘッダーが隠れないように */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px}
}

/* WordPress が出力するキャプション・配置クラスの最低限の受け皿。
   本文用の詳細は content.css 側で持つ。 */
.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================
   変数のエイリアス
   -----------------------------------------------------------
   モックは1枚ごとに :root を持ち、記事詳細系は --deep / --soft /
   --pale / --dark、共通パーツは --brand-deep / --brand-soft …と
   2系統の名前が混在していた。common.css は後者だけを定義するため、
   content.css の var(--deep) 等が未定義になり、h2の背景グラデーションや
   見出し色が効いていなかった。
   別名を張って両方の記法を有効にする。
   =========================================================== */
:root{
  --deep:var(--brand-deep);
  --dark:var(--brand-dark);
  --soft:var(--brand-soft);
  --pale:var(--brand-pale);
}

/* 検索モーダルは hidden 属性で閉じる。
   .search-modal{display:grid} が hidden の display:none を打ち消し、
   透明なまま全ページを覆ってクリックを奪っていたため明示する。 */
.search-modal[hidden]{display:none}

/* ===========================================================
   モバイルのドロワー
   -----------------------------------------------------------
   .site-header に backdrop-filter が付いているため、その中に
   position:fixed の要素を置くとヘッダーが基準になり、高さが
   ヘッダー分に潰れていた（開いても帯しか出ない）。
   マークアップをヘッダーの外へ移し、見た目も整える。
   =========================================================== */
.mobile-drawer{background:rgba(11,34,57,.5)}

.mobile-drawer-panel{
  width:min(380px,88vw);
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:-18px 0 44px rgba(11,34,57,.18);
}

.mobile-drawer-head{
  padding:2px 0 16px;
  border-bottom:0;
}

.mobile-drawer-head .brand-symbol{font-size:32px}
.mobile-drawer-head .brand-type strong{font-size:16px}
.mobile-drawer-head .brand-type small{font-size:10px;letter-spacing:.18em}

.mobile-drawer-close{
  width:42px;height:42px;
  border:1px solid var(--line);background:#fff;
  color:var(--brand-deep);font-size:22px
}

/* 検索は入力欄そのものを置く（リンクで検索ページへ送らない） */
.mobile-drawer-form{
  display:grid;grid-template-columns:minmax(0,1fr) 52px;
  margin-bottom:22px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff
}

.mobile-drawer-form input{
  min-height:50px;padding:0 14px;border:0;font-size:15px;background:#fff
}

.mobile-drawer-form input:focus{outline:2px solid var(--brand-soft);outline-offset:-2px}

.mobile-drawer-form button{
  display:grid;place-items:center;border:0;cursor:pointer;
  background:var(--brand-deep)
}

.mobile-drawer-form .search-mark{border-color:#fff}
.mobile-drawer-form .search-mark::after{background:#fff}

.mobile-drawer-label{
  margin:0 0 6px;font-size:11px;font-weight:800;
  letter-spacing:.12em;color:var(--muted)
}

/* カテゴリは行の左に色の線を入れて、押せる行だと分かるようにする */
.mobile-drawer-panel nav{padding:0}

.mobile-drawer-panel nav a{
  position:relative;
  padding:15px 4px 15px 14px;
  border-bottom:1px solid var(--line);
}

.mobile-drawer-panel nav a::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:3px;border-radius:0 3px 3px 0;background:var(--brand);
  opacity:.55
}

.mobile-drawer-panel nav a:active{background:var(--brand-pale)}

.mobile-drawer-pr{margin-top:22px;padding-top:18px}

.mobile-drawer-pr-item{
  align-items:center;justify-content:space-between;
  padding:13px 14px;border-radius:10px
}

.mobile-drawer-pr-item::after{content:"›";color:var(--brand);font-weight:900}