/*
Theme Name: Dr.HIRO Journal
Theme URI: https://prime-shift.com/journal/
Author: Dr.HIRO / JARVIS
Description: prime-shift.com/journal 専用テーマ。記事ページの体裁をテンプレート1本に固定するためのもの。2026-09-13 時点の記事デザイン（lifestyle-first-line 版）を正本にしている。
Version: 1.1.1
Requires at least: 6.0
Tested up to: 6.7
License: GPLv2 or later
Text Domain: drhiro-journal
*/

/* ===========================================================
   ここから下は「記事ページの見た目」の唯一の定義。
   ⛔ 個別記事に <style> を書かない。直すならこのファイルだけ。
   =========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#16213e;--gold:#c9a84c;--gold-soft:#e3cd8b;--ink:#26303f;--ink-light:#5f6b7d;--line:#e7e3d9;--paper:#faf8f3;--white:#fff}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:#fff;font-size:18px;line-height:2.02}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
header{position:sticky;top:0;z-index:100;background:rgba(22,33,62,.96);height:64px;display:flex;align-items:center;padding:0 22px}
.hd{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1080px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);background:url('/journal/assets/chibi_sheet1.png') 0% 0%/300% 400% no-repeat}
.logo-t{color:#fff;font-size:14px;font-weight:700}.logo-t span{display:block;color:var(--gold);font-size:9px;letter-spacing:.2em}
.hd .socials{display:flex;gap:14px}.hd .socials a{color:rgba(255,255,255,.6);font-size:15px}.hd .socials a:hover{color:var(--gold)}
.nav-line{background:var(--gold);color:var(--navy);padding:8px 15px;border-radius:5px;font-weight:700;font-size:12px;margin-left:14px}
.art{max-width:760px;margin:0 auto;padding:44px 24px 20px}
.crumb{font-size:12.5px;color:var(--ink-light);margin-bottom:16px}.crumb a:hover{color:var(--gold)}
.cat{display:inline-block;background:var(--navy);color:var(--gold);font-size:11px;letter-spacing:.06em;padding:3px 11px;border-radius:3px;margin-bottom:14px}
h1{font-family:'Noto Serif JP',serif;font-size:clamp(24px,4vw,33px);color:var(--navy);line-height:1.5;margin-bottom:14px}
.meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-light);margin-bottom:24px}
.meta .au{display:flex;align-items:center;gap:7px}
.meta .au .f{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);background:url('/journal/assets/chibi_sheet1.png') 0% 0%/300% 400% no-repeat}
.art figure{margin:28px 0}
.art figure img{width:100%;border-radius:12px;box-shadow:0 12px 34px rgba(22,33,62,.15)}
.art figure figcaption{font-size:13px;color:var(--ink-light);text-align:center;margin-top:9px;line-height:1.7}
.chibi-fig img{max-width:500px;margin:0 auto;box-shadow:none}
.video-cap{font-size:12.5px;color:var(--ink-light);margin:0 0 26px}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin:6px 0 30px}
.toc-t{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.05em;margin-bottom:12px;padding-bottom:9px;border-bottom:1px dashed var(--line)}
.toc ol{margin:0;padding-left:1.4em}
.toc li{font-size:15.5px;line-height:1.9;margin-bottom:6px}
.toc a{color:var(--ink)}.toc a:hover{color:var(--navy);border-bottom:1px solid var(--gold)}
.dialogue{border-left:3px solid var(--gold);background:#fcfbf7;border-radius:0 6px 6px 0;padding:16px 20px;margin:26px 0;font-size:16px;line-height:1.95}
.dialogue .who{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.05em}
.art h2{font-family:'Noto Serif JP',serif;font-size:23px;color:var(--navy);margin:44px 0 16px;padding-left:13px;border-left:4px solid var(--gold);line-height:1.5;scroll-margin-top:80px}
.art p{margin-bottom:40px}
.art ol,.art ul{margin:0 0 22px 1.3em}.art li{margin-bottom:8px}
.art strong{color:var(--navy);font-weight:700}
.steps{display:flex;gap:10px;margin:8px 0 24px}
.step{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 10px;text-align:center}
.step .n{font-family:'Noto Serif JP',serif;font-weight:800;color:var(--gold);font-size:20px;line-height:1}
.step h4{font-size:13.5px;color:var(--navy);margin:6px 0 3px}
.step p{font-size:11.5px;color:var(--ink-light);margin:0;line-height:1.6}
.callout{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:16px 20px;margin:24px 0;font-size:15px}
.callout b{color:var(--navy)}
.cta-box{background:linear-gradient(135deg,var(--navy),#1f2d50);color:#fff;border-radius:14px;padding:30px 26px;margin:38px 0;text-align:center}
.cta-box .free{color:var(--gold);font-size:12px;letter-spacing:.12em;font-weight:700;margin-bottom:8px}
.cta-box h3{font-family:'Noto Serif JP',serif;font-size:20px;color:#fff;margin-bottom:8px}
.cta-box p{color:rgba(255,255,255,.75);font-size:13.5px;margin-bottom:18px}
.btn-line{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--navy);font-weight:700;font-size:15px;padding:14px 30px;border-radius:6px;transition:.2s}
.btn-line:hover{background:var(--gold-soft);transform:translateY(-2px)}
.disc{font-size:12.5px;color:var(--ink-light);border-top:1px solid var(--line);padding-top:18px;margin-top:34px;line-height:1.9}
.next{background:var(--paper);border-radius:12px;padding:22px 24px;margin:26px 0 10px}
.next .l{font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:700;margin-bottom:6px}
.next h4{font-family:'Noto Serif JP',serif;font-size:17px;color:var(--navy);margin-bottom:6px}
.next p{font-size:13.5px;color:var(--ink-light);margin-bottom:12px}
.next a{font-size:13.5px;color:var(--navy);font-weight:700;border-bottom:1.5px solid var(--navy);padding-bottom:2px}
.next a:hover{color:var(--gold);border-color:var(--gold)}
footer{background:#0f1830;color:rgba(255,255,255,.5);text-align:center;padding:26px;font-size:12px;margin-top:20px}
footer a{color:rgba(255,255,255,.5)}
@media(max-width:600px){.hd .socials{display:none}.steps{flex-direction:column}}
.nc-cta{position:relative;background:#112a21;border:1.5px solid rgba(201,168,76,.5);border-radius:18px;overflow:hidden;margin:46px 0;box-shadow:0 22px 54px rgba(11,26,20,.42),0 0 0 5px rgba(201,168,76,.08)}
.nc-hero{display:block;width:100%;height:auto}
.nc-herolink{display:block;line-height:0}
.nc-body{padding:18px 22px 20px;text-align:center}
.nc-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#06C755;color:#fff;font-weight:800;font-size:17px;padding:17px 20px;border-radius:12px;max-width:460px;margin:0 auto;box-shadow:0 10px 26px rgba(6,199,85,.5);transition:.2s;animation:ncpulse 2.4s ease-in-out infinite}
.nc-btn:hover{background:#05b34c;transform:translateY(-2px)}
.nc-btn .arw{transition:transform .2s}.nc-btn:hover .arw{transform:translateX(4px)}
@keyframes ncpulse{0%,100%{box-shadow:0 10px 26px rgba(6,199,85,.42)}50%{box-shadow:0 12px 34px rgba(6,199,85,.72)}}
.nc-note{font-size:12px;color:rgba(255,255,255,.6);text-align:center;margin-top:11px}
.nc-lead{margin:44px 0 14px;font-size:17px;line-height:2;text-align:center;color:var(--ink)}
.nc-lead b{color:var(--navy)}
.nc-lead + .nc-cta{margin-top:0}
.author-card{display:flex;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:36px 0 10px;align-items:flex-start}
.author-icon{width:66px;height:88px;flex-shrink:0;background:url('/journal/assets/chibi_sheet1.png') 0% 0%/300% 400% no-repeat}
.author-label{font-size:11px;color:#a9852c;font-weight:700;letter-spacing:.08em;margin-bottom:4px}
.author-name{font-family:'Noto Serif JP',serif;font-size:17px;color:var(--navy);font-weight:700;margin-bottom:6px}
.author-name span{font-size:12.5px;color:var(--ink-light);font-weight:400}
.author-card p{font-size:13.5px;line-height:1.9;color:var(--ink);margin:0 0 9px}
.author-card a{font-size:13px;color:var(--navy);font-weight:700;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.author-card a:hover{color:#a9852c}

/* ===========================================================
   テンプレート化にあたって足したぶん
   =========================================================== */

/* 記事一覧 */
.list-wrap{max-width:1080px;margin:0 auto;padding:48px 24px 80px}
.list-head{border-bottom:2px solid var(--line);padding-bottom:18px;margin-bottom:34px}
.list-head h1{font-family:'Noto Serif JP',serif;font-size:26px;color:var(--navy)}
.list-head p{font-size:14px;color:var(--ink-light);margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s;background:#fff}
.card:hover{box-shadow:0 6px 24px rgba(22,33,62,.1)}
.card-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper);display:block}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-date{font-size:11.5px;color:var(--ink-light);letter-spacing:.06em}
.card h3{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.6;margin:8px 0 10px}
.card p{font-size:13px;color:var(--ink-light);line-height:1.85;flex:1}
.card .more{font-size:12.5px;color:var(--gold);font-weight:700;margin-top:14px}
.pager{display:flex;gap:10px;justify-content:center;margin-top:44px}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--line);border-radius:4px;font-size:13px;color:var(--ink)}
.pager .current{background:var(--navy);color:var(--gold);border-color:var(--navy)}

/* 404 */
.nf{max-width:640px;margin:0 auto;padding:80px 24px;text-align:center}
.nf h1{font-family:'Noto Serif JP',serif;font-size:26px;color:var(--navy);margin-bottom:14px}
.nf p{font-size:15px;color:var(--ink-light);margin-bottom:28px}
.nf a{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;padding:13px 28px;border-radius:6px;font-size:14px}

/* 本文に画像が入ったとき */
.art img{max-width:100%;height:auto;display:block;border-radius:8px}
.art figure{margin:32px 0}
.art figcaption{font-size:13px;color:var(--ink-light);margin-top:10px;line-height:1.7;text-align:center}
.art table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14.5px}
.art th,.art td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.art th{background:var(--paper);color:var(--navy);font-weight:700}
.art ul,.art ol{margin:0 0 24px 1.4em}
.art li{margin-bottom:8px;line-height:1.95}


/* ===========================================================
   2026-09-13 サトリ（sanoukei.net）の記事を実測して合わせた分
   実測の結論＝1行の長さはすでに同じ（うち39字 / サトリ38字）。
   違ったのは「意味の切れ目で自分で改行しているか」だけだった。
   → CSS でやれるのは、改行が効くように余白と強調を整えること。
   =========================================================== */

/* <br> で切った行が詰まって見えないように */
.art p{line-height:2.05}

/* 強調はサトリ並みにはっきり出す（実測 112箇所 vs うち14箇所） */
.art strong,.art b{font-weight:700;color:var(--navy);background:linear-gradient(transparent 62%,rgba(201,168,76,.28) 62%)}

/* 見出しは1階層で運用する。h3 は h2 と競わないように弱める */
.art h3{font-size:18.5px;font-weight:700;color:var(--navy);border-left:none;padding-left:0;margin:40px 0 12px}
.art h3::before{content:"— ";color:var(--gold)}

/* 画像は本文のリズムを切る道具。前後の余白をしっかり取る */
.art figure,.art .wp-block-image{margin:44px 0}
.art .wp-block-image img{border-radius:8px}

/* 絵が無い記事のカード（同じバナーを並べないための代替） */
.card-img-none{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),#1f2d50);aspect-ratio:16/9}
.card-img-none span{font-family:'Noto Serif JP',serif;font-size:17px;color:var(--gold);letter-spacing:.1em}