/*
Theme Name: スキマで推しごと Child
Template: twentytwentyone
Version: 1.0
Author: CinQ
Description: ポータルサイト「スキマで推しごと」（oshigoto-life.com）用の子テーマ。トップページテンプレート page-oshigoto-top.php を含む。色は「スキマで推しごと 設定」プラグインの :root 出力で上書きされます。
*/

/* =========================================================
   トップページ「スキマで推しごと トップ」用スタイル
   ・:root の色はデフォルト値。プラグインが同名の変数を wp_head で
     上書きするので、管理画面のカラー設定が全体に反映される。
   ========================================================= */

:root{
  --bg:#FEF8F5; --bg-2:#FCEDE7; --surface:#FFFFFF;
  --ink:#4A3A3C; --ink-soft:#8B767A; --ink-faint:#B8A5A8;
  --accent:#F87F98; --accent-deep:#E85F7C; --accent-soft:#FFEBF0;
  --gold:#E7B583; --line:#F5E6E2;
  --p-pink:#FFD9E2; --p-peach:#FFE1D2; --p-coral:#FFD6CF; --p-lav:#EADEFB; --p-cream:#FBEFDC;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:15.5px; line-height:1.9; -webkit-font-smoothing:antialiased; letter-spacing:.01em; transition:background .4s,color .4s}
.en{font-family:'Poppins',sans-serif}
.ser{font-family:'Playfair Display',serif}
a{color:inherit; text-decoration:none}
.wrap{width:min(1020px,90vw); margin-inline:auto}
.eyebrow{font-family:'Playfair Display',serif; font-style:italic; font-size:16px; font-weight:500; color:var(--accent); letter-spacing:.02em}


/* ヘッダー */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.hd{display:flex; align-items:center; justify-content:space-between; height:74px}
.logo{display:flex; align-items:baseline; gap:9px}
.logo .en{font-weight:700; font-size:21px; letter-spacing:-.01em; color:var(--ink)}
.logo .en b{color:var(--accent)}
.logo .jp{font-weight:900; font-size:16px; letter-spacing:.03em; color:var(--ink-soft)}
nav ul{display:flex; gap:26px; list-style:none}
nav a{font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:color .2s}
nav a:hover{color:var(--accent)}
.hd-cta{background:var(--accent); color:#fff; font-weight:700; font-size:12.5px; padding:10px 20px; border-radius:999px; transition:.2s; box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.hd-cta:hover{background:var(--accent-deep); transform:translateY(-1px)}

/* ヒーロー */
.hero{padding:92px 0 84px; position:relative; overflow:hidden}
.hero .glow{position:absolute; border-radius:50%; filter:blur(8px); z-index:0}
.hero .g1{width:300px; height:300px; background:radial-gradient(circle,var(--p-pink),transparent 70%); top:-20px; right:-30px; opacity:.7}
.hero .g2{width:220px; height:220px; background:radial-gradient(circle,var(--p-lav),transparent 70%); bottom:-40px; left:-20px; opacity:.55}
.hero .g3{width:150px; height:150px; background:radial-gradient(circle,var(--p-peach),transparent 70%); top:180px; right:26%; opacity:.5}
.hero .inner{position:relative; z-index:1; max-width:640px}
.hero .eyebrow{display:block; margin-bottom:18px}
.hero h1{font-weight:900; font-size:clamp(40px,7vw,70px); line-height:1.2; letter-spacing:.01em; margin-bottom:22px}
.hero h1 .accent{color:var(--accent); position:relative}
.hero h1 .accent::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:12px; background:var(--accent-soft); z-index:-1; border-radius:4px}
.hero .lead{max-width:460px; font-size:15.5px; color:var(--ink-soft); line-height:2; margin-bottom:32px}
.hero-cta{display:flex; gap:15px; align-items:center; flex-wrap:wrap; margin-bottom:40px}
.btn{font-family:'Noto Sans JP',sans-serif; font-weight:700; font-size:14.5px; padding:15px 32px; border-radius:999px; transition:.2s; cursor:pointer; border:none; display:inline-block}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 34%,transparent)}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px)}
.btn-text{font-weight:700; font-size:14.5px; color:var(--ink); display:inline-flex; align-items:center; gap:8px; transition:.2s}
.btn-text .ar{transition:transform .2s} .btn-text:hover{color:var(--accent)} .btn-text:hover .ar{transform:translateX(5px)}
.hero-keys{display:flex; gap:12px; flex-wrap:wrap}
.hk{display:inline-flex; align-items:center; gap:9px; background:var(--surface); padding:10px 18px; border-radius:999px; font-size:13px; font-weight:700; box-shadow:0 4px 14px rgba(180,120,130,.10)}
.hk .d{width:8px; height:8px; border-radius:50%}

/* セクション */
section{padding:78px 0}
.sec-head{text-align:center; margin-bottom:46px}
.sec-head .eyebrow{display:block; margin-bottom:8px}
.sec-head h2{font-weight:900; font-size:clamp(24px,3.6vw,32px); letter-spacing:.01em; line-height:1.35}
.sec-head p{color:var(--ink-soft); font-size:14px; margin-top:10px}
.tinted{background:var(--bg-2)}

/* ランキング */
.rank-list{display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto}
.rk{display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; background:var(--surface); border-radius:22px; padding:24px 28px; position:relative; box-shadow:0 6px 20px rgba(180,120,130,.07); transition:.25s}
.rk:hover{box-shadow:0 14px 32px rgba(180,120,130,.14); transform:translateY(-3px)}
.rk.first{background:linear-gradient(180deg,var(--accent-soft),var(--surface) 55%); box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 16%,transparent)}
.crown{position:absolute; top:-13px; left:26px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:5px 14px; border-radius:999px; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 38%,transparent); display:inline-flex; align-items:center; gap:5px}
.rk .num{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-family:'Playfair Display',serif; font-weight:600; font-size:24px; color:#fff; flex-shrink:0; background:var(--ink-faint)}
.rk.first .num{background:linear-gradient(145deg,var(--accent),var(--accent-deep))}
.rk .pr{font-size:10px; font-weight:600; color:var(--ink-faint); position:absolute; top:15px; right:18px}
.rk .info{min-width:0}
.rk .toprow{display:flex; align-items:center; gap:11px; margin-bottom:7px; flex-wrap:wrap}
.rk h3{font-weight:900; font-size:19px}
.rk .rate{font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:var(--accent)}
.rk .desc{font-size:13.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:11px; max-width:520px}
.rk .tags{display:flex; gap:7px; flex-wrap:wrap}
.rk .tags span{font-size:11px; font-weight:500; color:var(--accent-deep); background:var(--accent-soft); padding:4px 11px; border-radius:999px}
.rk .go .btn{padding:12px 24px; font-size:13px}
.rk .go .btn-out{background:#fff; border:1.5px solid var(--accent); color:var(--accent-deep); box-shadow:none}
.rk .go .btn-out:hover{background:var(--accent); color:#fff}
.rank-more{text-align:center; margin-top:30px}
.rank-more a{font-size:13.5px; font-weight:700; color:var(--accent-deep)} .rank-more a:hover{text-decoration:underline}

/* 記事 */
.arts{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.art{transition:.2s}
.art:hover{transform:translateY(-5px)}
.art .thumb{aspect-ratio:4/3; border-radius:20px; overflow:hidden; position:relative; margin-bottom:14px; display:grid; place-items:center; box-shadow:0 8px 20px rgba(180,120,130,.08)}
.art .thumb.t1{background:linear-gradient(150deg,var(--p-pink),var(--p-coral))}
.art .thumb.t2{background:linear-gradient(150deg,var(--p-lav),var(--p-pink))}
.art .thumb.t3{background:linear-gradient(150deg,var(--p-cream),var(--p-peach))}
.art .thumb.t4{background:linear-gradient(150deg,var(--p-peach),var(--p-coral))}
.art .thumb .ic{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.7); display:grid; place-items:center; font-size:25px; backdrop-filter:blur(2px)}
.art .tag{position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:700; color:var(--ink); background:rgba(255,255,255,.9); padding:4px 12px; border-radius:999px}
.art h3{font-size:14.5px; font-weight:700; line-height:1.6; margin-bottom:10px}
.art:hover h3{color:var(--accent)}
.art .by{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-faint); font-weight:500}
.art .by .a{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#fff; font-weight:700}

/* さがす */
.find{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; max-width:900px; margin:0 auto}
.find h4{font-family:'Playfair Display',serif; font-style:italic; font-size:16px; color:var(--accent); margin-bottom:18px}
.cat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px}
.catc{background:var(--surface); border-radius:16px; padding:20px 12px; text-align:center; transition:.2s; box-shadow:0 4px 14px rgba(180,120,130,.06)}
.catc:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(180,120,130,.13)}
.catc .ic{width:44px; height:44px; border-radius:50%; margin:0 auto 9px; display:grid; place-items:center; font-size:20px; transition:.2s}
.catc.c1 .ic{background:var(--p-pink)} .catc.c2 .ic{background:var(--p-coral)} .catc.c3 .ic{background:var(--p-lav)} .catc.c4 .ic{background:var(--p-cream)} .catc.c5 .ic{background:var(--p-peach)} .catc.c6 .ic{background:var(--accent-soft)}
.catc:hover .ic{transform:scale(1.1)}
.catc h5{font-size:12.5px; font-weight:700} .catc:hover h5{color:var(--accent)}
.area-chips{display:flex; flex-wrap:wrap; gap:9px}
.area-chips a{font-size:13px; font-weight:500; background:var(--surface); padding:9px 16px; border-radius:999px; color:var(--ink-soft); box-shadow:0 3px 10px rgba(180,120,130,.06); transition:.2s}
.area-chips a:hover{color:#fff; background:var(--accent)}

/* 編集部 */
.mem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:900px; margin:0 auto}
.mem{background:var(--surface); border-radius:20px; padding:26px 18px; text-align:center; box-shadow:0 6px 18px rgba(180,120,130,.07); transition:.2s}
.mem:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(180,120,130,.13)}
.mem .av{width:76px; height:76px; border-radius:50%; margin:0 auto 13px; display:grid; place-items:center; font-family:'Playfair Display',serif; font-weight:600; font-size:28px; color:#fff}
.mem:nth-child(1) .av{background:linear-gradient(145deg,#F98CA6,#EE6B87)} .mem:nth-child(2) .av{background:linear-gradient(145deg,#FBA07E,#F07E5B)} .mem:nth-child(3) .av{background:linear-gradient(145deg,#B79AEC,#9576DB)} .mem:nth-child(4) .av{background:linear-gradient(145deg,#F79BB5,#E97A9A)}
.mem .nm{font-size:16px; font-weight:900}
.mem .rl{font-size:11.5px; color:var(--accent); font-weight:700; margin:4px 0 9px}
.mem .bio{font-size:12.5px; color:var(--ink-soft); line-height:1.75}

/* 人気記事 */
.pop-list{max-width:660px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.pop{display:flex; align-items:center; gap:18px; padding:15px 20px; background:var(--surface); border-radius:16px; box-shadow:0 4px 14px rgba(180,120,130,.06); transition:.2s}
.pop:hover{transform:translateX(4px); box-shadow:0 8px 22px rgba(180,120,130,.12)}
.pop .no{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:'Playfair Display',serif; font-weight:600; font-size:17px; flex-shrink:0; background:var(--accent-soft); color:var(--accent-deep)}
.pop:nth-child(1) .no,.pop:nth-child(2) .no,.pop:nth-child(3) .no{background:linear-gradient(145deg,var(--accent),var(--accent-deep)); color:#fff}
.pop .pt{font-size:14px; font-weight:500; line-height:1.55}
.pop:hover .pt{color:var(--accent)}

/* 安心 */
.assure{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:880px; margin:0 auto}
.asr{background:var(--surface); border-radius:18px; padding:26px 22px; text-align:center; box-shadow:0 5px 16px rgba(180,120,130,.06)}
.asr .ic{width:54px; height:54px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; font-size:24px; background:var(--accent-soft)}
.asr h4{font-size:15px; font-weight:900; margin-bottom:7px}
.asr p{font-size:12.5px; color:var(--ink-soft); line-height:1.7}

/* 掲載募集 */
.partner-wrap{padding:24px 0 82px}
.partner{background:linear-gradient(135deg,var(--accent),var(--accent-deep)); border-radius:28px; padding:clamp(34px,5vw,58px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 28%,transparent)}
.partner .lbl{font-family:'Playfair Display',serif; font-style:italic; font-size:16px; color:rgba(255,255,255,.85); display:block; margin-bottom:12px}
.partner h3{font-weight:900; font-size:clamp(21px,3vw,29px); color:#fff; line-height:1.4; margin-bottom:12px}
.partner p{font-size:13.5px; color:rgba(255,255,255,.82); max-width:440px; line-height:1.8}
.partner .btn{background:#fff; color:var(--accent-deep)}
.partner .btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.14)}

/* フッター */
footer{background:var(--bg-2); border-top:1px solid var(--line); padding:56px 0 32px}
.ft{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; margin-bottom:38px}
.ft .lg{display:flex; align-items:baseline; gap:8px; margin-bottom:12px}
.ft .lg .en{font-family:'Poppins',sans-serif; font-weight:700; font-size:20px} .ft .lg .en b{color:var(--accent)}
.ft .lg .jp{font-weight:900; font-size:14px; color:var(--ink-soft)}
.ft p{font-size:12.5px; color:var(--ink-faint); line-height:1.85; max-width:300px}
.ft h5{font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--accent); margin-bottom:13px}
.ft ul{list-style:none} .ft li{margin-bottom:8px}
.ft li a{font-size:12.5px; color:var(--ink-faint); transition:.2s} .ft li a:hover{color:var(--accent)}
.copy{font-family:'Poppins',sans-serif; text-align:center; font-size:11px; letter-spacing:.04em; color:var(--ink-faint); padding-top:24px; border-top:1px solid var(--line)}

.rise{opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}

@media(max-width:860px){
  nav{display:none}
  .arts{grid-template-columns:repeat(2,1fr)}
  .find{grid-template-columns:1fr; gap:36px}
  .mem-grid{grid-template-columns:repeat(2,1fr)}
  .assure{grid-template-columns:1fr}
  .rk{grid-template-columns:auto 1fr; gap:16px}
  .rk .go{grid-column:1/-1} .rk .go .btn{width:100%; text-align:center}
  .ft{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .arts{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .mem-grid{grid-template-columns:1fr 1fr}
  .ft{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}


/* =========================================================
   記事ページ・一覧ページ（single.php / archive.php）
   ========================================================= */

.wrap-narrow{width:min(760px,90vw); margin-inline:auto}

/* --- 記事ページ --- */
.single{padding:56px 0 40px}
.s-head{margin-bottom:26px}
.s-cats{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.s-cat{font-size:12px; font-weight:700; color:var(--accent-deep); background:var(--accent-soft); padding:6px 15px; border-radius:999px; transition:.2s}
.s-cat:hover{background:var(--accent); color:#fff}
.s-title{font-weight:900; font-size:clamp(24px,4.2vw,36px); line-height:1.45; letter-spacing:.01em; margin-bottom:18px}
.s-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); font-weight:500}
.s-av{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:#fff; font-weight:700; background:var(--accent); flex-shrink:0}
.s-by{font-weight:700; color:var(--ink-soft)}
.s-upd{background:var(--bg-2); padding:3px 10px; border-radius:999px}

.s-thumb{margin:26px 0 34px; border-radius:22px; overflow:hidden; box-shadow:0 8px 24px rgba(180,120,130,.10)}
.s-thumb img{width:100%; height:auto; display:block}

/* 本文 */
.s-body{font-size:16px; line-height:2.05; color:var(--ink)}
.s-body > *{margin-bottom:1.5em}
.s-body > *:last-child{margin-bottom:0}
.s-body h2{font-weight:900; font-size:clamp(19px,2.6vw,23px); line-height:1.55; margin:2.4em 0 1em; padding:14px 20px; background:var(--accent-soft); border-radius:14px; border-left:5px solid var(--accent)}
.s-body h3{font-weight:900; font-size:clamp(17px,2.2vw,19px); line-height:1.6; margin:2em 0 .9em; padding-bottom:9px; border-bottom:2px solid var(--line)}
.s-body h4{font-weight:700; font-size:16px; margin:1.8em 0 .7em; color:var(--accent-deep)}
.s-body p{margin-bottom:1.5em}
.s-body a{color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; font-weight:500}
.s-body a:hover{color:var(--accent)}
.s-body strong{font-weight:700; background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.s-body ul,.s-body ol{padding-left:1.4em; margin-bottom:1.6em}
.s-body li{margin-bottom:.6em; line-height:1.9}
.s-body ul li::marker{color:var(--accent)}
.s-body ol li::marker{color:var(--accent-deep); font-weight:700}
.s-body blockquote{background:var(--bg-2); border-left:4px solid var(--accent); border-radius:0 14px 14px 0; padding:20px 24px; font-size:14.5px; color:var(--ink-soft)}
.s-body blockquote p:last-child{margin-bottom:0}
.s-body img{max-width:100%; height:auto; border-radius:16px}
.s-body figure{margin-bottom:1.8em}
.s-body figcaption{font-size:12px; color:var(--ink-faint); text-align:center; margin-top:9px}
.s-body code{background:var(--bg-2); padding:2px 7px; border-radius:5px; font-size:.9em}
.s-body hr{border:none; border-top:1px solid var(--line); margin:2.6em 0}

/* 本文中の表
   ・背景は純白ではなくオフホワイト。真っ白だとサイトの下地から浮いて見えるため。
   ・ピンクは見出し行だけに使い、本体は色を持たせない（読む場所なので） */
.s-body table{width:100%; border-collapse:collapse; font-size:14px; background:#FEFCFB; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(180,120,130,.05)}
.s-body th,.s-body td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
.s-body th{background:var(--accent-soft); font-weight:700; font-size:13px; color:var(--ink); border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.s-body tr:last-child td{border-bottom:none}
.s-body td{color:var(--ink)}

.s-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:36px}
.s-tags a{font-size:12px; color:var(--ink-soft); background:var(--surface); padding:7px 14px; border-radius:999px; box-shadow:0 3px 10px rgba(180,120,130,.06); transition:.2s}
.s-tags a:hover{color:#fff; background:var(--accent)}

/* 執筆者 */
.s-prof{display:flex; gap:18px; align-items:flex-start; background:var(--surface); border-radius:20px; padding:24px 26px; margin-top:40px; box-shadow:0 6px 18px rgba(180,120,130,.07)}
.s-prof-av{width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-family:'Playfair Display',serif; font-weight:600; font-size:25px; color:#fff; flex-shrink:0}
.s-prof-nm{font-size:16px; font-weight:900}
.s-prof-rl{font-size:11.5px; color:var(--accent); font-weight:700; margin:3px 0 8px}
.s-prof-bio{font-size:13px; color:var(--ink-soft); line-height:1.8}

/* 前後の記事 */
.s-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px}
.s-nav a{background:var(--surface); border-radius:16px; padding:16px 20px; box-shadow:0 4px 14px rgba(180,120,130,.06); transition:.2s; display:block}
.s-nav a:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(180,120,130,.12)}
.s-nav .lb{display:block; font-size:11px; font-weight:700; color:var(--accent); margin-bottom:6px}
.s-nav .tt{display:block; font-size:13.5px; font-weight:700; line-height:1.6}
.s-nav a:hover .tt{color:var(--accent)}
.s-nav-l{text-align:left}
.s-nav-r{text-align:right}

/* あわせて読みたい */
.s-rel{padding:52px 0 0}
.s-rel .sec-head{margin-bottom:28px}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

.s-back{text-align:center; padding:44px 0 8px}
.s-back a{font-size:13.5px; font-weight:700; color:var(--accent-deep)}
.s-back a:hover{text-decoration:underline}

/* --- 一覧ページ --- */
.arch{padding:56px 0 78px; min-height:52vh}
.pager{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:46px}
.pager .page-numbers{display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 14px; background:var(--surface); border-radius:12px; font-size:13.5px; font-weight:700; color:var(--ink-soft); box-shadow:0 3px 10px rgba(180,120,130,.06); transition:.2s}
.pager .page-numbers:hover{background:var(--accent-soft); color:var(--accent-deep)}
.pager .page-numbers.current{background:var(--accent); color:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 34%,transparent)}
.pager .dots{background:none; box-shadow:none}

.arch-empty{text-align:center; padding:56px 0}
.arch-empty .e-ic{font-size:44px; margin-bottom:14px}
.arch-empty .e-tx{font-size:14.5px; color:var(--ink-soft); margin-bottom:26px}

/* 記事が少ないときにカードが左に寄りすぎないように */
.arts:has(> :last-child:nth-child(-n+2)){grid-template-columns:repeat(2,1fr); max-width:520px; margin-inline:auto}

@media(max-width:860px){
  .rel-grid{grid-template-columns:1fr 1fr}
  .s-nav{grid-template-columns:1fr}
  .s-nav-r{text-align:left}
  .s-prof{flex-direction:column; align-items:center; text-align:center}
  .single{padding:36px 0 30px}
}
@media(max-width:480px){
  .rel-grid{grid-template-columns:1fr 1fr}
  .s-body{font-size:15.5px}
  .s-body table{font-size:13px}
  .s-body th,.s-body td{padding:10px 12px}
}

/* 固定ページ（page.php） */
.page-single{padding:48px 0 30px}
.page-single .s-head{padding-bottom:20px; border-bottom:2px solid var(--line); margin-bottom:32px}
.page-single .s-title{margin-bottom:0}
.page-single .s-meta{margin-top:14px}
/* 固定ページは1つ目の見出しが大きくなりすぎないよう少し抑える */
.page-single .s-body > h2:first-child{margin-top:0}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================= */

.wpcf7{max-width:620px; margin:34px auto 0}
.wpcf7 label{display:block; font-size:14px; font-weight:700; margin-bottom:22px; color:var(--ink); line-height:1.7}

/* 「必須」バッジ */
.wpcf7 .req{display:inline-block; font-size:10.5px; font-weight:700; color:#fff; background:var(--accent); padding:3px 10px; border-radius:999px; margin-left:8px; vertical-align:middle; letter-spacing:.04em}

/* 入力欄 */
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=url],
.wpcf7 input[type=tel],
.wpcf7 select,
.wpcf7 textarea{width:100%; margin-top:10px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; font-size:15px; font-family:inherit; font-weight:400; background:#FEFCFB; color:var(--ink); line-height:1.7; -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--ink-faint)}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.wpcf7 textarea{height:170px; resize:vertical; line-height:1.9}

/* プルダウンに矢印を付ける（appearance:none で消えるため） */
.wpcf7 select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B767A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer}

/* 注記 */
.wpcf7 .form-note{font-size:12.5px; color:var(--ink-soft); line-height:1.9; background:var(--bg-2); padding:16px 20px; border-radius:14px; margin:6px 0 26px}

/* 送信ボタン */
.wpcf7 input[type=submit]{background:var(--accent); color:#fff; font-family:inherit; font-weight:700; font-size:15px; letter-spacing:.02em; padding:15px 48px; border:none; border-radius:999px; cursor:pointer; display:block; margin-inline:auto; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 34%,transparent); -webkit-appearance:none; appearance:none; transition:.2s}
.wpcf7 input[type=submit]:hover{background:var(--accent-deep); transform:translateY(-2px)}
.wpcf7 input[type=submit]:disabled{opacity:.55; cursor:not-allowed; transform:none}

/* 送信中のぐるぐる */
.wpcf7 .wpcf7-spinner{margin:0 0 0 12px; vertical-align:middle}

/* エラー・完了メッセージ */
.wpcf7-not-valid-tip{color:#d63638; font-size:12px; font-weight:500; margin-top:7px}
.wpcf7 input.wpcf7-not-valid,.wpcf7 textarea.wpcf7-not-valid,.wpcf7 select.wpcf7-not-valid{border-color:#e8a0a1; background:#fffafa}
.wpcf7 form .wpcf7-response-output{border-radius:12px; border-width:1px; font-size:13.5px; line-height:1.8; padding:14px 18px; margin:26px 0 0; text-align:center}
.wpcf7 form.sent .wpcf7-response-output{background:#ecfdf5; border-color:#6ee7b7; color:#065f46}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{background:#fff5f5; border-color:#f0b4b5; color:#a02729}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{background:#fffaf0; border-color:#f0d0a0; color:#8a5a12}

@media(max-width:480px){
  .wpcf7 input[type=submit]{width:100%}
}