@charset "utf-8";
/* TORAERA 静的版スタイル
   - 記事本文(.entry-content)は WordPress 由来のHTMLをそのまま受ける前提。
     本文内の要素は「はみ出させない」「読みやすくする」だけに留め、構造は変えない。 */

:root{
  --bg:#ffffff;
  --bg-sub:#f5f6f8;
  --ink:#16181d;
  --ink-sub:#5b616e;
  --line:#e4e7ec;
  --brand:#00a0e8;            /* ロゴの水色。装飾・罫線・マーク用 */
  --brand-soft:#e8f6fd;       /* 淡い面 */
  --accent:#0369a1;           /* 文字・リンク用（白地で 5.9:1） */
  --accent-solid:#0284c7;     /* 白文字を乗せる面 */
  --accent-ink:#ffffff;
  --card:#ffffff;
  --shadow:0 1px 2px rgba(16,18,24,.04), 0 8px 24px rgba(16,18,24,.06);
  --radius:14px;
  --wrap:1200px;
  --read:760px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Meiryo",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --bg-sub:#171a20; --ink:#e9ecf1; --ink-sub:#a3abb8;
    --line:#272b33; --card:#171a20;
    --brand:#00a0e8; --brand-soft:#0d2733;
    --accent:#5cc8f5; --accent-solid:#00a0e8; --accent-ink:#06202b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#101216; --bg-sub:#171a20; --ink:#e9ecf1; --ink-sub:#a3abb8;
  --line:#272b33; --card:#171a20;
  --brand:#00a0e8; --brand-soft:#0d2733;
  --accent:#5cc8f5; --accent-solid:#00a0e8; --accent-ink:#06202b;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.8;
  font-size:16px; letter-spacing:.01em;
}
img{max-width:100%; height:auto}
a{color:inherit}
.wrap{width:min(100% - 32px, var(--wrap)); margin-inline:auto}

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:baseline; gap:8px; text-decoration:none; flex:0 0 auto}
.brand-mark{
  font-weight:800; font-size:20px; letter-spacing:.08em;
  background:linear-gradient(90deg,var(--brand),#5cc8f5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{font-size:11px; color:var(--ink-sub); letter-spacing:.14em}
.cat-nav{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-left:auto}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav a{
  white-space:nowrap; text-decoration:none; font-size:13.5px; color:var(--ink-sub);
  padding:7px 12px; border-radius:999px; transition:background .15s,color .15s;
}
.cat-nav a:hover{background:var(--bg-sub); color:var(--ink)}
.cat-nav a.on{background:var(--accent-solid); color:#fff}
.nav-toggle{display:none}

/* ---------- ヒーロー ---------- */
.hero{padding:64px 0 40px; background:
  radial-gradient(1100px 320px at 12% -12%, color-mix(in srgb,var(--brand) 16%, transparent), transparent 70%);}
.hero-h{font-size:clamp(26px,4.4vw,44px); line-height:1.35; margin:0 0 14px; letter-spacing:-.01em}
.hero-p{margin:0; color:var(--ink-sub); max-width:60ch}
.page-h{font-size:clamp(22px,3.2vw,32px); margin:36px 0 6px}
.cat-head{margin-bottom:12px}
.cat-count{margin:0; color:var(--ink-sub); font-size:14px}
.cat-desc{color:var(--ink-sub); max-width:70ch}

/* ---------- カード一覧 ---------- */
.grid{
  display:grid; gap:24px; margin:28px 0 48px;
  grid-template-columns:repeat(auto-fill, minmax(268px,1fr));
}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 45%, transparent)}
.card-link{text-decoration:none; display:block; height:100%}
.card-thumb{aspect-ratio:16/9; background:var(--bg-sub); display:grid; place-items:center; overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover}
.noimg{font-weight:800; letter-spacing:.2em; color:var(--ink-sub); opacity:.4; font-size:13px}
.card-body{padding:14px 16px 16px}
.chip{
  display:inline-block; font-size:11.5px; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb,var(--brand) 14%, transparent); color:var(--accent);
  text-decoration:none; margin:0 6px 8px 0; font-weight:600;
}
.card-title{font-size:15.5px; line-height:1.6; margin:2px 0 8px; font-weight:700}
.card-date{font-size:12px; color:var(--ink-sub); font-variant-numeric:tabular-nums}
.pager{display:flex; gap:12px; justify-content:center; margin:0 0 64px}
.pg{
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; font-size:14px; color:var(--ink-sub);
}
.pg:hover{border-color:var(--brand); color:var(--accent)}

/* ---------- 記事 ---------- */
.article-wrap{max-width:var(--read)}
.post-head{padding:40px 0 8px}
.chips{margin-bottom:10px}
.post-title{font-size:clamp(24px,3.6vw,34px); line-height:1.45; margin:0 0 12px; letter-spacing:-.005em}
.post-date{font-size:13px; color:var(--ink-sub); font-variant-numeric:tabular-nums}

.toc{
  background:var(--bg-sub); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin:28px 0 8px;
}
.toc-h{margin:0 0 8px; font-weight:700; font-size:14px; letter-spacing:.08em}
.toc ol{margin:0; padding-left:1.2em}
.toc li{margin:4px 0; font-size:14px}
.toc li.lv3{margin-left:1em; font-size:13.5px; color:var(--ink-sub); list-style:none}
.toc a{text-decoration:none}
.toc a:hover{color:var(--accent); text-decoration:underline}

.entry-content{padding:8px 0 56px; font-size:16.5px; line-height:1.95}
.entry-content > *{max-width:100%}
.entry-content h2{
  font-size:22px; line-height:1.5; margin:56px 0 18px; padding:10px 0 10px 16px;
  border-left:4px solid var(--brand); scroll-margin-top:84px;
}
.entry-content h3{font-size:18.5px; margin:40px 0 14px; scroll-margin-top:84px}
.entry-content h4{font-size:16.5px; margin:28px 0 10px}
.entry-content p{margin:0 0 1.4em}
.entry-content a{color:var(--accent); text-underline-offset:3px}
.entry-content img{border-radius:10px; display:block; margin:8px auto}
.entry-content hr{border:0; border-top:1px solid var(--line); margin:36px 0}
.entry-content blockquote{
  margin:24px 0; padding:14px 20px; background:var(--bg-sub);
  border-left:3px solid var(--line); border-radius:0 8px 8px 0; color:var(--ink-sub);
}
.entry-content table{width:100%; border-collapse:collapse; display:block; overflow-x:auto}
.entry-content td,.entry-content th{border:1px solid var(--line); padding:8px 12px}
.entry-content pre{overflow-x:auto; background:var(--bg-sub); padding:14px; border-radius:10px}
.entry-content ul,.entry-content ol{padding-left:1.5em}
.entry-content li{margin:.3em 0}
.embed-wrap{position:relative; aspect-ratio:16/9; margin:24px 0; border-radius:10px; overflow:hidden; background:#000}
.embed-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* 広告枠は中身に触らず、はみ出しだけ抑える */
.entry-content ins.adsbygoogle{display:block; max-width:100%; margin:28px auto}

.related{border-top:1px solid var(--line); padding-top:8px; margin-bottom:56px}
.sec-h{font-size:18px; margin:28px 0 0}
.related .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px}
.related .card-title{font-size:14px}

/* ---------- カテゴリ一覧 ---------- */
.cat-list{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin:24px 0 64px}
.cat-card{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  background:var(--card); transition:border-color .15s, transform .15s;
}
.cat-card:hover{border-color:var(--brand); transform:translateY(-2px)}
.cat-card em{font-style:normal; color:var(--ink-sub); font-size:13px}

/* ---------- フッター ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg-sub); padding:40px 0 56px; margin-top:auto}
.foot-brand{font-weight:800; letter-spacing:.06em; margin:0 0 6px}
.foot-desc{margin:0 0 16px; color:var(--ink-sub); font-size:14px; max-width:60ch}
.foot-copy{margin:0; color:var(--ink-sub); font-size:12px}

@media (max-width:720px){
  body{font-size:15.5px}
  .head-in{height:56px; gap:12px}
  .cat-nav{position:fixed; inset:56px 0 auto; background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px; display:none}
  .cat-nav.open{display:flex}
  .nav-toggle{display:block; margin-left:auto; font-size:22px; line-height:1; background:none;
    border:0; color:var(--ink); padding:8px 10px; cursor:pointer}
  .hero{padding:40px 0 24px}
  .entry-content{font-size:16px}
  .entry-content h2{margin-top:40px}
}

/* ---------- ロゴ・フッター（テンプレート更新分） ---------- */
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; flex:0 0 auto}
.brand-logo{display:block; height:34px; width:auto}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-logo,
  :root:not([data-theme="light"]) .foot-logo{filter:brightness(1.35) contrast(1.05)}
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .foot-logo{filter:brightness(1.35) contrast(1.05)}

.foot-in{display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; padding-bottom:24px}
.foot-brand-col{max-width:44ch}
.foot-logo{display:block; height:30px; width:auto; margin-bottom:12px}
.foot-nav{display:flex; flex-direction:column; gap:6px; min-width:200px}
.foot-nav-h{margin:0 0 6px; font-size:12px; letter-spacing:.14em; color:var(--ink-sub); font-weight:700}
.foot-nav a{font-size:13.5px; color:var(--ink-sub); text-decoration:none}
.foot-nav a:hover{color:var(--accent); text-decoration:underline}
.foot-copy{margin:0; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-sub); font-size:12px}
@media (max-width:720px){
  .brand-logo{height:28px}
  .foot-in{gap:28px}
  .foot-nav{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
  .foot-nav-h{grid-column:1 / -1}
}

/* ---------- セクション（3分類構成） ---------- */
.sec-cards{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sec-card{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 22px;min-width:170px;transition:border-color .15s,transform .15s;
}
.sec-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.sec-card span{font-weight:700}
.sec-card em{font-style:normal;font-size:12px;color:var(--ink-sub)}
.sec-head{padding-top:28px}
.sec-lead{color:var(--ink-sub);max-width:70ch;margin:.3em 0 0}
.topic-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.topic-nav a{
  text-decoration:none;font-size:13.5px;color:var(--ink-sub);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  transition:border-color .15s,color .15s;
}
.topic-nav a:hover{border-color:var(--brand);color:var(--accent)}
.topic-nav em{font-style:normal;font-size:11.5px;opacity:.7;margin-left:2px}

/* トップ見出し（ヒーロー廃止後） */
.top-head{padding-top:28px}

/* 配布終了の注記（firestorage から復旧できなかった配布物） */
.entry-content .dl-ended{
  display:inline-block; padding:10px 18px; border-radius:8px;
  background:var(--bg-sub); border:1px dashed var(--line);
  color:var(--ink-sub); font-size:14px;
}

/* ---------- WordPress由来の埋め込みをレスポンシブに矯正 ----------
   [video]ショートコードは <div class="wp-video" style="width:1300px"> のように
   固定幅で出力される。そのままだとスマホで横スクロールが発生するため上書きする。
   （旧サイトは MediaElement.js が実行時に差し替えていたが、静的版にJSは持ち込まない） */
.entry-content .wp-video,
.entry-content .wp-video-shortcode,
.entry-content .mejs-container{
  width:100% !important; max-width:100% !important; height:auto !important;
}
.entry-content video{max-width:100%; height:auto; display:block; margin:8px auto; border-radius:10px}
/* div.youtube は iframe 用に aspect-ratio を固定しているが、中身が <video> のときは邪魔になる */
.entry-content .youtube:has(video),
.entry-content .youtube:has(.wp-video){aspect-ratio:auto !important; max-width:100% !important}
/* 本文中の固定幅指定（style="width:1300px" 等）がはみ出す事故を止める */
.entry-content [style*="width:"]{max-width:100% !important}

/* ---------- コードのコピーボタン ---------- */
.entry-content .code-container{position:relative}
.entry-content .copy-button.copied{background:var(--accent-solid); color:#fff}