/*
Theme Name: STBC Media
Theme URI: https://stbc-asakadai.com/
Description: SUKOYAKA Total Body Care 朝霞台店 公式サイトとデザインを統一した、お知らせ・ブログ用テーマ。公式サイトのCSS（common.css / official.css）を読み込み、ヘッダー・フッターを共通化しています。
Author: SUKOYAKA Total Body Care
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: stbc-media
*/

/* =========================================================
   記事ページ専用スタイル
   ---------------------------------------------------------
   ベースの配色・タイポグラフィ・ヘッダー・フッターは
   公式サイトの common.css / official.css を読み込んで使用。
   ここには「記事表示に必要な分だけ」を記述する。
   ========================================================= */

/* ---------- 記事ページ共通レイアウト ---------- */
.m-page{background:#fff}
.m-page-head{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,56px);
  text-align:center;
}
.m-page-head .eyebrow{margin-bottom:16px}
.m-page-title{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(26px,4.4vw,44px);line-height:1.45;letter-spacing:.02em;color:var(--ink);
}
.m-page-desc{margin-top:18px;color:var(--muted);font-size:14.5px;line-height:1.9}

/* ---------- パンくず ---------- */
.m-breadcrumb{font-size:12px;color:var(--muted);padding:16px 0;border-bottom:1px solid var(--line)}
.m-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0}
.m-breadcrumb li{display:flex;align-items:center;gap:8px}
.m-breadcrumb li:not(:last-child)::after{content:"/";color:var(--line)}
.m-breadcrumb a{color:var(--muted)}
.m-breadcrumb a:hover{color:var(--orange)}
.m-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- 記事一覧 ---------- */
.m-archive{padding:clamp(48px,6vw,80px) 0}
.m-list{list-style:none;max-width:840px;margin:0 auto;padding:0;display:grid}
.m-list-item{border-top:1px solid var(--line)}
.m-list-item:last-child{border-bottom:1px solid var(--line)}
.m-list-link{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:18px;
  padding:22px 4px;transition:background .2s,padding-left .2s;
}
.m-list-link:hover{background:var(--cream);padding-left:12px}
.m-list-link time{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.m-cat{font-size:11px;font-weight:800;color:var(--green-dark);background:var(--green-soft);padding:4px 12px;border-radius:999px;white-space:nowrap}
.m-list-link .m-list-title{font-size:15px;color:var(--ink);margin:0;line-height:1.6;font-weight:600}

/* 記事がないとき */
.m-empty{text-align:center;color:var(--muted);padding:60px 0;font-size:14.5px}

/* ---------- 記事詳細 ---------- */
.m-single{padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,88px)}
.m-article{max-width:760px;margin:0 auto}
.m-article-head{margin-bottom:clamp(28px,3.5vw,40px);padding-bottom:clamp(24px,3vw,32px);border-bottom:1px solid var(--line)}
.m-article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.m-article-meta time{font-size:13px;font-weight:700;color:var(--muted)}
.m-article-title{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(24px,3.6vw,36px);line-height:1.5;letter-spacing:.02em;color:var(--ink);
}
.m-thumb{margin-bottom:clamp(28px,3.5vw,40px);border-radius:var(--radius);overflow:hidden}
.m-thumb img{width:100%;height:auto;display:block}

/* ---------- 本文（WordPressエディタの出力） ---------- */
.m-content{font-size:15.5px;line-height:2.05;color:var(--ink)}
.m-content > * + *{margin-top:1.6em}
.m-content h2{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(20px,2.8vw,26px);line-height:1.5;color:var(--ink);
  margin-top:2.4em;padding-bottom:14px;border-bottom:2px solid var(--orange);
}
.m-content h3{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(17px,2.2vw,21px);line-height:1.55;color:var(--ink);
  margin-top:2em;padding-left:14px;border-left:4px solid var(--orange);
}
.m-content h4{font-weight:800;font-size:16px;color:var(--ink);margin-top:1.8em}
.m-content p{margin-bottom:0}
.m-content a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}
.m-content a:hover{color:var(--orange)}
.m-content strong{font-weight:800}
.m-content ul,.m-content ol{padding-left:1.4em}
.m-content li{margin-bottom:.7em;line-height:1.95}
.m-content ul{list-style:disc}
.m-content ol{list-style:decimal}
.m-content img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.m-content figure{margin-left:0;margin-right:0}
.m-content figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.m-content blockquote{
  background:var(--cream);border-left:4px solid var(--line);
  padding:20px 24px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--muted);font-size:14.5px;
}
.m-content blockquote p{margin:0}
.m-content table{width:100%;border-collapse:collapse;font-size:14px}
.m-content th,.m-content td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.m-content th{background:var(--cream);font-weight:800}
.m-content hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.m-content code{background:var(--cream);padding:2px 6px;border-radius:4px;font-size:.92em}

/* ---------- 記事下の導線 ---------- */
.m-cta{
  margin-top:clamp(48px,6vw,72px);
  background:linear-gradient(125deg,var(--orange) 0%,var(--orange-dark) 100%);
  color:#fff;border-radius:var(--radius);
  padding:clamp(32px,4.5vw,48px);text-align:center;
  box-shadow:0 20px 50px rgba(203,84,32,.2);
}
.m-cta-title{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(20px,2.8vw,26px);line-height:1.5;margin-bottom:14px}
.m-cta-text{font-size:14px;line-height:1.95;color:#fff2ea;margin-bottom:26px}
.m-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.m-cta-actions .btn-main{background:#fff;color:var(--orange-dark)}
.m-cta-actions .btn-main::after{color:var(--orange-dark)}

/* ---------- 前後の記事 ---------- */
.m-nav{max-width:760px;margin:clamp(40px,5vw,56px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.m-nav a{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;
  transition:border-color .2s,transform .2s;
}
.m-nav a:hover{border-color:var(--orange);transform:translateY(-2px)}
.m-nav span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--orange);margin-bottom:8px}
.m-nav p{font-size:13.5px;color:var(--ink);margin:0;line-height:1.6}
.m-nav .is-next{text-align:right}
.m-back{text-align:center;margin-top:clamp(32px,4vw,44px)}

/* ---------- ページネーション ---------- */
.m-pagination{margin-top:clamp(40px,5vw,56px);display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.m-pagination .page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s;
}
.m-pagination .page-numbers:hover{border-color:var(--orange);color:var(--orange)}
.m-pagination .page-numbers.current{background:var(--orange);border-color:var(--orange);color:#fff}
.m-pagination .dots{border:0}

/* ---------- 404 ---------- */
.m-404{text-align:center;padding:clamp(60px,9vw,120px) 0}
.m-404-num{font-family:"Zen Old Mincho",serif;font-size:clamp(56px,10vw,96px);color:var(--orange);line-height:1;margin-bottom:20px}

/* ---------- レスポンシブ ---------- */
@media(max-width:640px){
  .m-list-link{grid-template-columns:auto auto;row-gap:8px;gap:12px}
  .m-list-link .m-list-title{grid-column:1/-1}
  .m-nav{grid-template-columns:1fr}
  .m-nav .is-next{text-align:left}
  .m-cta-actions .btn{width:100%;min-width:0}
}