/* ============================================================
   SMILE GATE.Pro ブログ — 共通スタイル
   一覧ページ・記事ページの両方がこれを読みます。
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:2.0;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt" 1;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink); text-underline-offset:3px; transition:color .12s}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid var(--g-blue); outline-offset:2px; border-radius:4px}

.wrap{max-width:1120px; margin:0 auto; padding:0 var(--gutter)}
.narrow{max-width:var(--measure); margin-left:auto; margin-right:auto}

/* ---------- 記事ページの幅
   ヘッダー・パンくず・本文の左端と右端をそろえる。
   一覧ページ（body に post が付かない）は今までどおり 1120px のまま。
   ---------------------------------------------------------- */
body[data-slug] .site-head .inner,
body[data-slug] .wrap,
body.post .site-head .inner,
body.post .wrap{max-width:var(--post-w)}
body[data-slug] .narrow,
body.post .narrow{max-width:none; margin-left:0; margin-right:0}

/* ---------- ヘッダー ---------- */
.site-head{
  border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:50;
}
.site-head .inner{
  display:flex; align-items:center; gap:20px;
  padding:10px var(--gutter); max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto}
.brand .mark{
  width:38px; height:38px; border-radius:50%; display:block; flex:0 0 auto;
  object-fit:cover; background:#fff;
}
.brand b{font-size:16px; font-weight:700; letter-spacing:.01em}
.brand span{font-size:10px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; font-weight:500}
.site-nav{display:flex; gap:24px; align-items:center}
.site-nav a{font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none}
.site-nav a:hover{color:var(--accent-ink)}
.site-nav a[aria-current]{color:var(--ink); font-weight:700}
.site-nav .cta{
  background:var(--cta-bg); color:var(--cta-ink); padding:9px 20px;
  border-radius:999px; font-weight:700; font-size:13.5px; box-shadow:var(--shadow);
}
.site-nav .cta:hover{background:var(--cta-bg-hover); color:var(--cta-ink); box-shadow:var(--shadow-lift)}
@media(max-width:720px){
  .site-nav{gap:14px} .site-nav .hide-sm{display:none} .brand span{display:none}
  .brand .mark{width:34px;height:34px}
}

/* ---------- パンくず ---------- */
.crumbs{font-size:12.5px; color:var(--muted); padding:20px 0 0; line-height:1.8}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs span{margin:0 8px; color:var(--faint)}

/* ---------- クラスタのチップ ---------- */
.chip{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 11px; border-radius:999px;
  background:var(--c-bg, var(--surface-2)); color:var(--c-ink, var(--ink-2));
  text-decoration:none; line-height:1.7;
}
a.chip:hover{filter:brightness(.95); color:var(--c-ink, var(--ink-2))}

/* ---------- 一覧ページ ---------- */
.list-head{padding:52px 0 8px}
.list-head .eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.list-head .eyebrow::before{
  content:""; width:26px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%);
}
.list-head h1{
  font-size:clamp(28px,4.6vw,44px); font-weight:900; line-height:1.4;
  letter-spacing:-.01em; margin:0 0 16px;
}
.list-head p{color:var(--ink-2); font-size:16px; margin:0; max-width:40em; line-height:1.95}

.filters{display:flex; gap:9px; flex-wrap:wrap; padding:30px 0 22px}
.filters button{
  font:inherit; font-size:13.5px; font-weight:700; padding:8px 18px; border-radius:999px;
  cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  transition:.14s; line-height:1.7;
}
.filters button:hover{background:var(--surface); border-color:var(--faint)}
.filters button[aria-pressed="true"]{
  background:var(--c-bg,var(--g-blue-bg)); border-color:transparent; color:var(--c-ink,var(--g-blue-ink));
}

/* 注目記事（トップ表示） */
.featured{
  display:grid; grid-template-columns:1.25fr 1fr; gap:0;
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  margin-bottom:30px; transition:box-shadow .16s, transform .16s;
}
.featured:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.featured .body{padding:34px 36px; display:flex; flex-direction:column; justify-content:center}
.featured .pin{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g-red-ink); margin-bottom:12px;
}
.featured h2{
  font-size:clamp(20px,2.4vw,27px); font-weight:900; line-height:1.55;
  margin:10px 0 12px; letter-spacing:-.005em; color:var(--ink);
}
.featured p{font-size:14.5px; color:var(--ink-2); margin:0 0 16px; line-height:1.9}
.featured .meta{font-size:12.5px; color:var(--muted); display:flex; gap:14px; align-items:center}
.featured .side{
  background:var(--c-bg,var(--surface)); display:grid; place-items:center; padding:30px;
  border-left:1px solid var(--line-2);
}
.featured .side .big{font-size:clamp(34px,5vw,58px); font-weight:900; color:var(--c-ink,var(--ink)); line-height:1.1}
.featured .side .cap{font-size:12px; color:var(--ink-2); margin-top:8px; text-align:center; line-height:1.7}
@media(max-width:820px){
  .featured{grid-template-columns:1fr}
  .featured .side{border-left:0; border-top:1px solid var(--line-2); padding:24px}
  .featured .body{padding:26px 24px}
}

/* カード */
.list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; padding:0 0 60px}
.card{
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden;
  background:#fff; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:box-shadow .16s, transform .16s; position:relative;
}
.card::before{content:""; height:4px; background:var(--c-bar,var(--g-blue)); display:block}
.card:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.card .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.card h3{
  font-size:16.5px; font-weight:700; line-height:1.7; margin:11px 0 10px;
  color:var(--ink); letter-spacing:-.003em;
}
.card p{font-size:13.5px; color:var(--ink-2); margin:0 0 14px; line-height:1.85; flex:1}
.card time{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.card .body > .chip{align-self:flex-start}
.featured .body > .chip{align-self:flex-start}

.empty{padding:60px 0; text-align:center; color:var(--muted); font-size:14.5px}

/* ---------- 記事ページ ---------- */
.post-head{padding:34px 0 30px}
.post-head h1{
  font-size:clamp(26px,4.6vw,40px); font-weight:900; line-height:1.48;
  letter-spacing:-.012em; margin:14px 0 20px;
}
.post-meta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:12.5px; color:var(--muted)}
.post-meta .author{display:flex; align-items:center; gap:9px; color:var(--ink-2); font-weight:500}
.post-meta .author img{width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--surface-2)}
.lede{
  font-size:17.5px; font-weight:500; line-height:2.0; color:var(--ink-2);
  margin:26px 0 0; padding:22px 24px; background:var(--surface);
  border-radius:var(--radius); border-left:4px solid var(--c-bar,var(--g-blue));
}

.post-body{padding:12px 0 44px; font-size:16.5px}
.post-body h2{
  font-size:clamp(20px,2.6vw,25px); font-weight:900; line-height:1.6;
  margin:64px 0 20px; letter-spacing:-.008em; padding-bottom:14px;
  border-bottom:2px solid var(--line-2); position:relative;
}
.post-body h2::after{
  content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px;
  background:var(--c-bar,var(--g-blue));
}
.post-body h3{
  font-size:18.5px; font-weight:700; margin:42px 0 14px; line-height:1.7;
  padding-left:13px; border-left:4px solid var(--c-bar,var(--g-blue));
}
.post-body p{margin:0 0 24px}
.post-body ul,.post-body ol{margin:0 0 26px; padding-left:1.5em}
.post-body li{margin-bottom:11px}
.post-body strong{font-weight:700; background:linear-gradient(transparent 60%, var(--g-yellow-bg) 60%); padding:0 2px}
.post-body a{font-weight:500}
.post-body blockquote{
  margin:32px 0; padding:18px 22px; border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2); font-size:15.5px;
}

/* 一次情報の箱 */
.proof{
  margin:34px 0; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface) 0%,#fff 100%); padding:24px 26px;
}
.proof .k{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:9px;
}
.proof .k::before{content:""; width:16px; height:3px; border-radius:2px; background:var(--c-bar,var(--g-blue))}
.proof .figs{display:flex; flex-wrap:wrap; gap:14px 34px; margin:16px 0 0}
.proof .fig b{display:block; font-size:32px; font-weight:900; line-height:1.2; color:var(--ink); letter-spacing:-.02em}
.proof .fig span{font-size:12.5px; color:var(--ink-2); line-height:1.7}
.proof .src{margin-top:16px; font-size:11.5px; color:var(--muted); line-height:1.8}

/* 「なぜ機能するのか」— 原理の裏付けボックス */
.principle{
  margin:34px 0; padding:24px 26px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
}
.principle .badge{
  display:inline-block; background:var(--g-blue); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:4px 12px; border-radius:6px; vertical-align:3px; margin-right:12px;
}
.principle h3{
  display:inline; font-size:19px; font-weight:900; margin:0;
  padding:0; border:0; line-height:1.6; letter-spacing:-.005em;
}
.principle p{
  margin:16px 0 0; font-size:15px; line-height:1.95; color:var(--ink-2);
}
.principle .src{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--muted); line-height:1.8;
}
.principle .src a{font-weight:500}
@media(max-width:600px){
  .principle{padding:20px}
  .principle .badge{display:block; margin:0 0 10px; width:fit-content; vertical-align:baseline}
  .principle h3{display:block; font-size:17.5px}
}

/* 表 */
.post-body table{width:100%; border-collapse:collapse; margin:32px 0; font-size:14.5px; line-height:1.8}
.post-body th,.post-body td{padding:13px 14px; text-align:left; border-bottom:1px solid var(--line-2)}
.post-body th{
  background:var(--surface-2); font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-2); border-bottom:2px solid var(--line);
}
.post-body td.n,.post-body th.n{text-align:right; font-variant-numeric:tabular-nums}
.post-body tbody tr:hover{background:var(--surface)}

/* FAQ */
.faq{margin:52px 0 0}
.faq details{border:1px solid var(--line-2); border-radius:var(--radius); margin-bottom:10px; background:#fff; overflow:hidden}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer; padding:18px 20px; font-weight:700; font-size:16px; line-height:1.75;
  list-style:none; display:flex; gap:13px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q"; flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--c-bg,var(--g-blue-bg)); color:var(--c-ink,var(--g-blue-ink));
  font-size:11.5px; font-weight:900; display:grid; place-items:center; margin-top:4px;
}
.faq .a{padding:0 20px 20px 55px; color:var(--ink-2); font-size:15.5px; line-height:1.95}

/* CTA */
.cta-block{
  margin:60px 0 0; padding:38px 32px; border-radius:var(--radius); text-align:center;
  background:var(--surface); border:1px solid var(--line-2); position:relative; overflow:hidden;
}
.cta-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75% 100%);
}
.cta-block h3{font-size:21px; margin:0 0 12px; font-weight:900; line-height:1.6; padding:0; border:0}
.cta-block p{font-size:15px; color:var(--ink-2); margin:0 0 24px; line-height:1.9}
.btn{
  display:inline-block; background:var(--cta-bg); color:var(--cta-ink);
  padding:15px 38px; border-radius:999px; text-decoration:none; font-weight:700;
  font-size:16px; box-shadow:var(--shadow); transition:.14s;
}
.btn:hover{background:var(--cta-bg-hover); color:var(--cta-ink); box-shadow:var(--shadow-lift); transform:translateY(-1px)}

/* ← → 記事送り */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:56px 0 0;
  padding-top:32px; border-top:1px solid var(--line-2);
}
.pager a{
  display:flex; flex-direction:column; gap:7px; padding:20px 22px;
  border:1px solid var(--line-2); border-radius:var(--radius);
  text-decoration:none; color:inherit; background:#fff; transition:.16s; min-height:96px;
}
.pager a:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.pager .dir{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.08em}
.pager .t{font-size:14.5px; font-weight:700; line-height:1.7; color:var(--ink)}
.pager .next{text-align:right; align-items:flex-end}
.pager .disabled{opacity:.4; pointer-events:none}
.pager-hint{
  text-align:center; font-size:11.5px; color:var(--muted); margin:14px 0 0;
}
.pager-hint kbd{
  font-family:var(--mono); font-size:11px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; margin:0 2px;
}
@media(max-width:640px){.pager{grid-template-columns:1fr}.pager .next{text-align:left; align-items:flex-start}}

/* 関連記事 */
.related{margin:60px 0 0; padding-top:34px; border-top:1px solid var(--line-2)}
.related h2{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0 0 20px;
}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}

/* フッター */
.site-foot{border-top:1px solid var(--line-2); background:var(--surface); margin-top:70px}
.site-foot .inner{
  max-width:1120px; margin:0 auto; padding:38px var(--gutter);
  display:flex; gap:26px; flex-wrap:wrap; font-size:13px; color:var(--muted); line-height:1.9;
}
.site-foot a{color:var(--ink-2); text-decoration:none; margin-right:20px; font-weight:500}
.site-foot a:hover{color:var(--accent-ink)}
.site-foot .cp{margin-left:auto}

@media print{
  .site-head,.site-nav,.cta-block,.related,.filters,.pager{display:none !important}
  body{font-size:11pt; line-height:1.8}
}