/* 自動生成ファイル — 直接編集しないこと。
   scripts/build-lp-css.sh が assets/css/lp/r-shell・r-header・r-footer・r-article を結合して出力する。 */

/* ===== r-shell.css ===== */
/* 記事ページで、新しいヘッダー・全画面メニュー・フッター・常駐バーだけを使うときの土台（2026-10-21）。
   記事の本文は SWELL のまま。r-base.css の全体のリセット（文字・リンク・見出し）を当てると本文の見た目が
   変わるので、ここではヘッダーなどの「中だけ」に当てる。読み込みは記事ページだけ（_single-shell.css）。
   色と書体の定義は r-base.css と同じものを持つ（記事ページでは r-base.css を読まないため） */
:root{--ink:#1F2430;--body:#5A5048;--line:#EDE6E0;
 /* --o-dk と --g は文字にも使うので、白地とのコントラストが 4.5:1 に届く濃さにしてある（2026-10-21） */
 --o:#F2762F;--o-dk:#B84E14;--g:#268469;--b:#4E63C8;--y:#E8A12B;--r:#E0393E;
 --cream:#FFF8F2;--paper:#F5F1EB;
 --en:'Jost','Helvetica Neue',Arial,sans-serif;
 /* 日本語のWebフォントは重い（以前は4種類で1.1MB、Lighthouse 74点の主因）。
    本文と記事タイトル（--jp）は端末の文字で出し、Webフォントは読み込まない。
    Zen Kaku（--disp）と Yusei Magic（--hand）は見出し・ボタンなど決まった文言だけに使い、
    その文言の文字だけを Google Fonts の text= で切り出して読み込む（生成時に自動で集める） */
 --sys:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
 --jp:var(--sys);
 --disp:'Zen Kaku Gothic New',var(--sys);
 --hand:'Yusei Magic',var(--sys)}

:is(.hd,.gmenu,.ft,.bar),:is(.hd,.gmenu,.ft,.bar) *{box-sizing:border-box}
:is(.hd,.gmenu,.ft,.bar){font-family:var(--sys);color:var(--ink);line-height:normal}
.gmenu{color:#fff}
:is(.hd,.gmenu,.ft,.bar) :where(a){text-decoration:none;color:inherit}
:is(.hd,.gmenu,.ft,.bar) :where(b,u,i,em,s,strong){color:inherit;text-decoration:none;font-style:normal}
:is(.hd,.gmenu,.ft,.bar) :where(*){word-break:auto-phrase;text-wrap:pretty;line-break:strict}
:is(.hd,.gmenu,.ft,.bar) :where(h1,h2,h3,h4){font-family:var(--disp)}
:is(.hd,.gmenu,.ft,.bar) img{max-width:100%}
.h{overflow-x:clip;position:relative}

/* 目次などでページ内を移動したとき、見出しがヘッダー（高さ約60px）の下に隠れないように */
html{scroll-padding-top:72px}

/* 記事末尾の「AIに相談する」の浮いたボタン（article-style.css の .ai-fab。右下に固定）を、
   常駐バー「質問に答えて探す」の上に移す。どちらも右下にあり、そのままだと重なる（2026-10-21、テストサイトで確認）。
   スマホの常駐バーは画面の下端に貼り付いて高さ約50px、PC は右下に浮いた高さ約54pxのカード（下から24px） */
body .ai-fab{bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
@media (min-width:768px){
 body .ai-fab{bottom:104px}
}

/* ===== r-header.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */

/* ── ヘッダー ── */
.hd{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
 padding:9px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--line)}
.hd__logo{flex:1;min-width:150px;line-height:0;margin:0}
.hd__logo img{width:150px;height:41px;display:block}

/* 以前は灰色の丸3つに記号の文字（⌕ ? ☰）。記号はフォントごとに形も太さも違い、
   丸の中で大きさが揃わなかった。アイコンは線画のSVGにして太さを揃え、
   役目の違う2つ（探す＝道具、MENU＝ナビ）は形も変える（タイミーラボの「検索｜Menu」の組み方）。
   診断は画面下の常駐バーがいつも出ているので、ヘッダーからは外した */
.hd__nav{display:flex;align-items:center;gap:10px}
.hd__find{display:flex;align-items:center;gap:5px;height:38px;padding:0 12px 0 10px;white-space:nowrap;
 border:1.5px solid var(--ink);border-radius:999px;font-family:var(--disp);font-size:.76rem;
 font-weight:700;color:var(--ink);background:#fff;transition:background .2s,color .2s}
.hd__find:hover{background:var(--ink);color:#fff}
.hd__nav svg{display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hd__find svg{width:17px;height:17px;flex:none}
.hd__find small{font-size:inherit}
.hd__sep{width:1px;height:28px;background:var(--line)}
.hd__menu{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 0;border:0;
 background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.hd__menu svg{width:26px;height:20px}
.hd__menu u{font-family:var(--en);font-size:.54rem;font-weight:600;letter-spacing:.16em}

@media (max-width:374px){

 /* 375px未満（Androidの360pxなど）はロゴが潰れるので「事務所を」を省く */
 .hd__find small{display:none}
}

/* ── メニュー ── */
.gmenu{position:fixed;inset:0;z-index:40;background:rgba(31,36,48,.97);color:#fff;
 padding:70px 22px 30px;display:flex;flex-direction:column;gap:2px;
 opacity:0;visibility:hidden;transition:opacity .25s}
.gmenu[data-on="1"]{opacity:1;visibility:visible}
.gmenu{overflow-y:auto}
.gmenu a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 padding:14px 2px;font-family:var(--disp);font-size:1rem;font-weight:700;
 border-bottom:1px solid rgba(255,255,255,.12)}
.gmenu a small{font-family:var(--en);font-size:.7rem;font-weight:600;color:#FFB596}
.gmenu__cat{align-self:flex-end;width:92px;margin-top:auto;padding-top:18px;opacity:.95}
.gmenu__x{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;
 border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;cursor:pointer}

@media (min-width:768px){
 .hd{padding:12px 24px}
 .hd__logo img{width:196px;height:54px}
}

/* ── 子テーマで足したもの（2026-10-21）──
   ログイン中は WordPress の管理バー（上に固定）が出る。ヘッダーがその下に潜らないよう、管理バーの高さだけ下げる。
   600px以下では管理バーはページと一緒に流れるので下げない */
body.admin-bar .hd{top:32px}
@media (max-width:782px){
 body.admin-bar .hd{top:46px}
}
@media (max-width:600px){
 body.admin-bar .hd{top:0}
}

/* ===== r-footer.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */

@media (prefers-reduced-motion:reduce){
 .ft__walk{display:none}
}

/* ── 常駐バー ── */
.bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;
 margin:26px 12px 12px;padding:10px 14px;background:var(--o);color:#fff;border-radius:999px;
 box-shadow:0 10px 26px -12px rgba(190,70,15,.95);overflow:visible;
 transition:transform .32s ease,opacity .32s ease}
.bar__m{flex:none;width:66px;height:66px;object-fit:contain;margin:-26px 2px -26px -6px;
 filter:drop-shadow(0 3px 6px rgba(120,60,20,.4))}
.bar em{flex:1;min-width:0;font-family:var(--disp);font-size:.94rem;font-weight:700;line-height:1.3}

/* 「迷ったら！」は補助。ロックアップの「\ ライブ配信のことが全部わかる！ /」と同じ手書きの添え書きにして、
   主役の「質問に答えて探す」と分ける */
.bar em small{display:block;font-family:var(--hand);font-size:.66rem;font-weight:400;letter-spacing:.02em;
 color:rgba(255,255,255,.86);margin-bottom:1px}
.bar i{flex:none;font-family:var(--en);font-weight:600;font-size:.74rem;
 background:rgba(255,255,255,.22);padding:5px 11px;border-radius:999px}

/* ── フッター ──
   以前は紺の角丸の箱に猫が1匹。明るいピーチ色にして、上のふちを波形（スカラップ）に、
   地にうっすら肉球を並べる。画像は増やさず、肉球は CSS に埋め込んだ小さなSVG */
/* 下の余白は、猫とセリフが著作権表示より下を通る高さ */
.ft{position:relative;margin-top:56px;padding:58px 16px 100px;color:var(--ink);overflow:hidden;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23F6CBA6' opacity='.55' transform='rotate(-14 32 32)'%3E%3Cellipse cx='32' cy='38' rx='9' ry='7.5'/%3E%3Ccircle cx='21' cy='27' r='3.6'/%3E%3Ccircle cx='28' cy='22' r='3.6'/%3E%3Ccircle cx='36' cy='22' r='3.6'/%3E%3Ccircle cx='43' cy='27' r='3.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/64px 64px,#FFE9D6}
.ft::before{content:"";position:absolute;left:0;right:0;top:-1px;height:14px;
 background:radial-gradient(circle at 14px 0,#fff 13.5px,transparent 14px) 0 0/28px 14px repeat-x}
.ft__top{position:relative;padding-right:96px;margin-bottom:22px}
.ft__logo{width:168px;height:46px;display:block}
.ft__tag{margin:9px 0 0;font-size:.72rem;color:#7A6252;line-height:1.6}
.ft__mascot{position:absolute;right:6px;top:-6px;width:92px;rotate:5deg}

/* おじぎの猫のひとこと。手書きの文字で */
/* 吹き出しは波形のふちより下に収める（上げると切れる） */
.ft__msg{position:absolute;right:78px;top:-34px;margin:0;padding:7px 12px;border-radius:14px;background:#fff;
 font-family:var(--hand);font-size:.7rem;color:var(--o-dk);white-space:nowrap;box-shadow:0 4px 10px -6px rgba(150,90,40,.6)}
.ft__msg::after{content:"";position:absolute;right:14px;bottom:-6px;width:12px;height:12px;background:#fff;
 rotate:45deg;border-radius:0 0 3px 0}
.ft__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
.ft__col h2{margin:0 0 10px;font-family:var(--disp);font-size:.8rem;font-weight:900;
 display:flex;flex-direction:column;gap:2px}
.ft__col h2 u{font-family:var(--en);font-size:.52rem;letter-spacing:.18em;color:var(--o);
 font-weight:600;text-transform:uppercase}

/* リンクは丸いボタン。乗せると少し浮く */
.ft__col a{display:flex;align-items:center;gap:7px;margin-bottom:7px;padding:8px 12px;border-radius:999px;
 background:#fff;font-size:.72rem;font-weight:700;color:var(--ink);line-height:1.4;
 box-shadow:0 3px 8px -6px rgba(150,90,40,.7);transition:translate .2s cubic-bezier(.3,1.6,.5,1),color .2s}
.ft__col a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--o)}
.ft__col:nth-child(2) a::before{background:var(--g)}
.ft__col a:hover{translate:0 -2px;color:var(--o-dk)}
.ft__ad{margin:20px 0 0;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.7);
 font-size:.62rem;line-height:1.75;color:#7A6252}
.ft__ad a{color:var(--o-dk);text-decoration:underline;text-underline-offset:3px}
.ft__cr{margin:18px 0 0;text-align:center;font-family:var(--en);font-size:.62rem;letter-spacing:.06em;color:#7A6252}
.ft__walk{position:absolute;left:0;bottom:8px;width:44px;height:44px;pointer-events:none;animation:ft-walk 33.400000000000006s linear infinite}
@keyframes ft-walk{0%{translate:-60px 0}8.98%{translate:8vw 0}19.46%{translate:8vw 0}25.45%{translate:26vw 0}35.93%{translate:26vw 0}44.91%{translate:26vw 0}53.29%{translate:26vw 0}59.28%{translate:50vw 0}68.26%{translate:50vw 0}77.25%{translate:50vw 0}88.02%{translate:50vw 0}100.0%{translate:108vw 0}}
.ft__walk img{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:33.400000000000006s linear infinite}
.ft__say{position:absolute;left:50%;bottom:calc(100% + 4px);translate:-50% 0;margin:0;padding:4px 9px;border-radius:10px;background:#fff;font-family:var(--hand);font-size:.62rem;font-weight:400;color:var(--o-dk);white-space:nowrap;opacity:0;box-shadow:0 3px 8px -5px rgba(150,90,40,.6);animation:33.400000000000006s linear infinite}
.ft__walk .w-run{animation-name:w-run}
@keyframes w-run{0%{opacity:0}0%{opacity:0}0.0%{opacity:1}8.97%{opacity:1}8.98%{opacity:0}88.00999999999999%{opacity:0}88.02%{opacity:1}99.99%{opacity:1}100.0%{opacity:0}100%{opacity:0}}
.ft__walk .w-phone{animation-name:w-phone}
@keyframes w-phone{0%{opacity:0}8.97%{opacity:0}8.98%{opacity:1}19.45%{opacity:1}19.46%{opacity:0}100%{opacity:0}}
.ft__walk .w-walk{animation-name:w-walk}
@keyframes w-walk{0%{opacity:0}19.45%{opacity:0}19.46%{opacity:1}25.439999999999998%{opacity:1}25.45%{opacity:0}53.28%{opacity:0}53.29%{opacity:1}59.27%{opacity:1}59.28%{opacity:0}100%{opacity:0}}
.ft__walk .w-find{animation-name:w-find}
@keyframes w-find{0%{opacity:0}25.439999999999998%{opacity:0}25.45%{opacity:1}35.92%{opacity:1}35.93%{opacity:0}100%{opacity:0}}
.ft__walk .w-think{animation-name:w-think}
@keyframes w-think{0%{opacity:0}35.92%{opacity:0}35.93%{opacity:1}44.9%{opacity:1}44.91%{opacity:0}100%{opacity:0}}
.ft__walk .w-idea{animation-name:w-idea}
@keyframes w-idea{0%{opacity:0}44.9%{opacity:0}44.91%{opacity:1}53.28%{opacity:1}53.29%{opacity:0}100%{opacity:0}}
.ft__walk .w-happy{animation-name:w-happy}
@keyframes w-happy{0%{opacity:0}59.27%{opacity:0}59.28%{opacity:1}68.25%{opacity:1}68.26%{opacity:0}100%{opacity:0}}
.ft__walk .w-heart{animation-name:w-heart}
@keyframes w-heart{0%{opacity:0}68.25%{opacity:0}68.26%{opacity:1}77.24%{opacity:1}77.25%{opacity:0}100%{opacity:0}}
.ft__walk .w-bow{animation-name:w-bow}
@keyframes w-bow{0%{opacity:0}77.24%{opacity:0}77.25%{opacity:1}88.00999999999999%{opacity:1}88.02%{opacity:0}100%{opacity:0}}
.ft__say--1{animation-name:w-say1}
@keyframes w-say1{0%{opacity:0}8.97%{opacity:0}8.98%{opacity:1}19.45%{opacity:1}19.46%{opacity:0}100%{opacity:0}}
.ft__say--3{animation-name:w-say3}
@keyframes w-say3{0%{opacity:0}25.439999999999998%{opacity:0}25.45%{opacity:1}35.92%{opacity:1}35.93%{opacity:0}100%{opacity:0}}
.ft__say--4{animation-name:w-say4}
@keyframes w-say4{0%{opacity:0}35.92%{opacity:0}35.93%{opacity:1}44.9%{opacity:1}44.91%{opacity:0}100%{opacity:0}}
.ft__say--5{animation-name:w-say5}
@keyframes w-say5{0%{opacity:0}44.9%{opacity:0}44.91%{opacity:1}53.28%{opacity:1}53.29%{opacity:0}100%{opacity:0}}
.ft__say--7{animation-name:w-say7}
@keyframes w-say7{0%{opacity:0}59.27%{opacity:0}59.28%{opacity:1}68.25%{opacity:1}68.26%{opacity:0}100%{opacity:0}}
.ft__say--8{animation-name:w-say8}
@keyframes w-say8{0%{opacity:0}68.25%{opacity:0}68.26%{opacity:1}77.24%{opacity:1}77.25%{opacity:0}100%{opacity:0}}
.ft__say--9{animation-name:w-say9}
@keyframes w-say9{0%{opacity:0}77.24%{opacity:0}77.25%{opacity:1}88.00999999999999%{opacity:1}88.02%{opacity:0}100%{opacity:0}}
.ft__walk .w-happy{animation-name:w-happy}
@keyframes w-happy{0%,59.27%{opacity:0;translate:0 0}59.28%{opacity:1;translate:0 0}61.53%{translate:0 -14px}63.77%{translate:0 0}65.57%{translate:0 -8px}68.25%{opacity:1;translate:0 0}68.26%,100%{opacity:0}}

@media (min-width:768px){
 .bar{max-width:520px;margin-inline:auto;position:fixed;right:24px;bottom:24px;left:auto}

 /* PCではバーが fixed なのでフッターに重なる。見えたらしまう */
 .bar--off{transform:translateY(160%);opacity:0;pointer-events:none}

 /* 下の余白は、猫が著作権表示より下を歩き、吹き出しが上の広告表記にかからない高さ */
 .ft{padding:76px 24px 118px}
 .ft::before{height:18px;background-size:36px 18px;
  background-image:radial-gradient(circle at 18px 0,#fff 17.5px,transparent 18px)}
 .ft__in{max-width:1120px;margin-inline:auto;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:start}
 .ft__top{position:relative;grid-column:1;grid-row:1;padding-right:150px;margin-bottom:0;max-width:34em}
 .ft__logo{width:208px;height:57px}
 .ft__tag{font-size:.86rem}
 .ft__mascot{right:-20px;top:-30px;width:128px}
 .ft__msg{right:110px;top:-46px;font-size:.8rem}
 .ft__walk{width:56px;height:56px}
 .ft__say{font-size:.74rem}
 .ft__cols{grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,220px));gap:28px}
 .ft__col a{font-size:.8rem}
 .ft__ad{grid-column:1/-1;margin-top:34px;font-size:.72rem}
 .ft__cr{grid-column:1/-1;font-size:.68rem}
}

@media (min-width:768px) and (max-width:1023px){

 /* 768〜1023px はロゴとリンクを2列にすると、ロゴ側の列が狭すぎて吹き出しが左にはみ出す。
    この幅だけはスマホと同じ縦並び（ロゴ → リンク）にする */
 .ft__in{grid-template-columns:minmax(0,1fr)}
 .ft__top{max-width:none}
 .ft__cols{grid-column:1;grid-row:2;margin-top:30px;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== r-article.css ===== */
/* 記事ページの本文デザイン（docs/setup/03-article-design-requirements.md）
   本人「記事ページのデザインも SWELL に準じつつ、トップページのようなデザインにしたい」（2026-11-01）。
   本文の HTML は SWELL が出したままにして、CSS だけを重ねる。見本は _proto/top-renewal-2026-10-18/_article/skin.css。
   1) SWELL の色の変数をトップの色に差し替える（ブロックの色はこれでほぼそろう）
   2) 見出し・ボックス・吹き出し・表・ボタンなど、よく使うブロックだけ形を足す
   色と書体はトップ（r-base.css）と同じ。新しい画像は使わない（表示速度が最優先）
   読むのは記事ページだけ（_single-article.css に結合）。止めるときは inc/top-renewal.php の LIVECOM_ARTICLE_SKIN */

:root{
 --ink:#1F2430;--body:#5A5048;--line:#EDE6E0;--o:#F2762F;--o-dk:#B84E14;--g:#268469;--b:#4E63C8;--y:#E8A12B;
 --cream:#FFF8F2;--cream2:#FFF3E6;--paper:#F6F1EC;
 --en:'Jost','Helvetica Neue',Arial,sans-serif;
 --sys:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
 --disp:'Zen Kaku Gothic New',var(--sys);

 /* SWELL の変数 */
 --swl-font_family:var(--sys);--swl-font_weight:400;
 --color_main:#1F2430;--color_text:#2B2F38;--color_link:#B84E14;--color_htag:#1F2430;--color_bg:#fff;
 --color_main_thin:#FFF8F2;--color_main_dark:#1F2430;
 --color_list_check:#F2762F;--color_list_num:#F2762F;
 --color_faq_q:#F2762F;--color_faq_a:#268469;
 --color_icon_pen:#B84E14;--color_icon_pen_bg:#FFF8F2;
 --color_icon_point:#F2762F;--color_icon_announce:#F2762F;--color_icon_announce_bg:#FFF8F2;
 --color_deep01:#D9542A;--color_deep02:#4E63C8;--color_deep03:#268469;--color_deep04:#E8A12B;
 --color_pale01:#FFF3EC;--color_pale02:#F1F4FD;--color_pale03:#EEF7F2;--color_pale04:#FFF8E8;
 --color_mark_yellow:#FFE3B3;--color_mark_orange:#FFD8C2;--color_mark_blue:#D7E0FF;--color_mark_green:#CFEFDC;
 --color_border:#EDE6E0;--color_gray:#F6F1EC;
 --border01:solid 1px #EDE6E0;
}
body{background:#fff}
.post_content{color:var(--color_text);line-height:1.95;letter-spacing:.02em}
.post_content a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── 記事の頭 ── */
.l-mainContent__inner{display:flex;flex-direction:column}
.l-mainContent__inner>*{width:100%}
.p-articleMetas.-top{order:-1;margin:0 0 10px}
.p-articleHead{margin-bottom:12px}
.c-postTitle__ttl{font-family:var(--disp);font-weight:900;font-size:1.42rem;line-height:1.5;letter-spacing:.01em;color:var(--ink)}
/* SWELL の大きな日付は外して、日付は下の一行だけにする */
.c-postTitle__date{display:none}
.p-articleMetas.-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.c-categoryList__link{display:inline-block;margin:0;padding:4px 12px;border-radius:999px;background:var(--o);color:#fff!important;
 font-family:var(--disp);font-weight:700;font-size:.7rem;line-height:1.4;text-decoration:none!important}
.c-categoryList__link::before{display:none}
.c-postTimes{font-family:var(--en);font-weight:500;font-size:.72rem;color:#746B66}
.p-articleThumb{margin:4px 0 20px;border-radius:18px;overflow:hidden;box-shadow:0 14px 28px -18px rgba(80,50,30,.75)}
.p-articleThumb__img{display:block;border-radius:0}

/* ── 目次 ── */
.p-toc{position:relative;margin:28px 0;padding:22px 18px 16px;border:0!important;border-radius:18px!important;background:var(--cream2)!important}
.p-toc::after{display:none}
.p-toc::before{display:none}
.p-toc__ttl{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-family:var(--disp);font-weight:900;font-size:1rem;color:var(--ink);text-align:left}
.p-toc__ttl::before{display:none}
.p-toc__ttl::after{content:"CONTENTS";font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.2em;color:#9A8676}
.p-toc__list{margin:0;padding:0}
.p-toc__list .p-toc__link{color:var(--ink);text-decoration:none;font-size:.86rem;line-height:1.6}
.p-toc__list>li{padding:7px 0;border-top:1px dashed #EBD3BF}
.p-toc__list>li:first-child{border-top:0}
.p-toc__list>li>.p-toc__link{font-weight:700}
.p-toc__list ol,.p-toc__list ul{margin-top:4px}
.p-toc__list>li::before{color:var(--o);font-family:var(--en);font-weight:600}
/* 番号は SWELL（ol.is-style-index>li::before）が li の上端から置くので、上の余白（7px）の分だけ下げて文字とそろえる。SWELL より強い指定にする */
.p-toc .p-toc__list>li::before{top:calc(.25em + 7px)}

/* ── 見出し ── */
/* h2：トップのセクション見出しと同じ「少し傾けたオレンジの角丸」を左に置き、クリーム色の札にする */
.post_content h2.wp-block-heading{position:relative;margin:3.2em 0 1.4em;padding:16px 16px 16px 56px;border:0;border-radius:16px;
 background:var(--cream2);color:var(--ink);font-family:var(--disp);font-weight:900;font-size:1.22rem;line-height:1.5;text-align:left}
.post_content h2.wp-block-heading::before{content:"";position:absolute;left:14px;top:50%;width:28px;height:28px;margin:0;translate:0 -50%;
 border:0;border-radius:9px;background:var(--o) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/17px no-repeat;
 rotate:-4deg;box-shadow:2px 3px 0 #9C4A1F}
.post_content h2.wp-block-heading::after{display:none}
/* h3：左寄せ。下に細い線、頭だけオレンジ */
.post_content h3.wp-block-heading{position:relative;margin:2.6em 0 1.1em;padding:0 0 10px;border:0;background:none;
 color:var(--ink);font-family:var(--disp);font-weight:900;font-size:1.08rem;line-height:1.55;text-align:left;
 border-bottom:2px solid var(--line)}
.post_content h3.wp-block-heading::before{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--o);border:0;top:auto}
.post_content h3.wp-block-heading::after{display:none}
.post_content h3 strong{font-weight:inherit}
/* h4：小さな角丸の印 */
.post_content h4.wp-block-heading{position:relative;margin:2em 0 .8em;padding:0 0 0 18px;border:0;background:none;
 font-family:var(--disp);font-weight:900;font-size:1rem;color:var(--ink)}
.post_content h4.wp-block-heading::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--o);rotate:-4deg;border:0}

/* ── 本文の段落の飾り ── */
.swl-marker.mark_yellow{background:linear-gradient(transparent 58%,var(--color_mark_yellow) 58%)}
.post_content .is-style-stitch{padding:16px 18px;border:0;border-radius:14px;background:var(--cream);box-shadow:inset 0 0 0 1.5px #F1DCCB}
.post_content .is-style-stitch::before{display:none}
.post_content .is-style-icon_pen{border-radius:14px;border:0;background:var(--cream)}

/* ── リスト ── */
.post_content ul:not([class*="is-style"]) >li::before{background:var(--o);width:6px;height:6px;top:.8em;left:-.1em;border-radius:50%}

/* ── ボックス（キャプション付き：枠の上に見出し） ── */
.post_content .cap_box.is-style-onborder_ttl{margin:2em 0;padding-top:12px}
.post_content .is-style-onborder_ttl .cap_box_ttl{left:16px;padding:4px 14px;border-radius:999px;background:var(--o)!important;color:#fff;
 font-family:var(--disp);font-weight:700;font-size:.8rem;line-height:1.5}
.post_content .is-style-onborder_ttl .cap_box_ttl::before,.post_content .is-style-onborder_ttl .cap_box_ttl::after{display:none}
.post_content .is-style-onborder_ttl .cap_box_content{padding:22px 18px 16px;border:1.5px solid #F1DCCB;border-radius:16px;background:var(--cream)}
.post_content .cap_box_content a{color:var(--ink)}

/* ── 吹き出し ── */
.c-balloon__icon img{border:2px solid #fff;box-shadow:0 4px 12px -6px rgba(80,50,30,.6)}
.c-balloon__iconName{font-family:var(--disp);font-weight:700;font-size:.66rem;color:#746B66}
.c-balloon__text{border:0!important;border-radius:16px;background:var(--paper)!important;color:var(--ink);line-height:1.8}
.c-balloon__before{border-right-color:var(--paper)!important;border-left-color:transparent}
.-bln-right .c-balloon__before{border-left-color:var(--paper)!important;border-right-color:transparent!important}
.c-balloon__after{display:none}

/* ── よくある質問 ── */
.swell-block-faq__item{margin:0 0 12px;padding:16px 16px 6px;border:1.5px solid var(--line);border-radius:16px;background:#fff}
.post_content .faq_q{margin:0 0 8px;padding:0 0 0 2em;border:0;background:none;font-family:var(--disp);font-weight:900;font-size:.98rem;line-height:1.6;color:var(--ink)}
.post_content .faq_a{position:relative;padding:0 0 0 2em;border:0}
/* SWELL の Q・A の四角をやめて、トップと同じオレンジ（Q）と緑（A）の丸にする */
.post_content .faq_q,.post_content .faq_a{position:relative}
.post_content .faq_q::before,.post_content .faq_a::before{position:absolute;left:0;top:.15em;display:flex;align-items:center;justify-content:center;
 width:1.55em;height:1.55em;margin:0;padding:0;border:0!important;border-radius:50%;background:var(--o);color:#fff!important;
 font-family:var(--en);font-weight:600;font-size:.86rem;line-height:1;box-shadow:none;transform:none}
.post_content .faq_q::before{content:"Q"}
.post_content .faq_a::before{content:"A";background:var(--g);top:.35em}
.post_content .faq_q::after,.post_content .faq_a::after{display:none}

/* ── ボタン：トップの「すべて見る」と同じオレンジのボタン ── */
.swell-block-button{display:block;margin:1.6em auto;text-align:center}
.swell-block-button__link{display:flex!important;align-items:center;justify-content:center;gap:10px;max-width:420px;margin:0 auto;
 padding:15px 18px!important;border-radius:999px!important;border:0!important;
 background:linear-gradient(135deg,#F7924F,var(--o) 55%,#E9662A)!important;color:#fff!important;
 font-family:var(--disp);font-weight:700;font-size:.96rem;text-decoration:none!important;box-shadow:0 12px 24px -14px rgba(210,80,20,.95)!important;
 transition:translate .25s cubic-bezier(.3,1.6,.5,1)}
.swell-block-button__link::before{display:none}
.swell-block-button__link::after{content:"\2192";position:static;display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;
 border-radius:50%;background:#fff;color:var(--o-dk);font-size:.9rem;animation:none;transform:none;opacity:1}
.swell-block-button__link:hover{translate:0 -2px}
.is-style-btn_shiny .swell-block-button__link::before{display:none}

/* ── 表 ── */
.post_content .wp-block-table{margin:1.8em 0}
.post_content .wp-block-table table{border-collapse:separate;border-spacing:0;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;font-size:.86rem}
.post_content .wp-block-table td,.post_content .wp-block-table th{padding:11px 12px;border:0;border-top:1px solid var(--line);line-height:1.7}
.post_content .wp-block-table td+td,.post_content .wp-block-table th+th{border-left:1px solid var(--line)}
.post_content .wp-block-table tr:first-child td{border-top:0}
.post_content .wp-block-table tr:nth-child(even) td{background:#FFFBF7}
.post_content .wp-block-table .swl-cell-bg.has-swl-main-background-color{background:var(--ink)!important}

/* ── 記事へのリンク（ブログカード） ── */
.p-blogCard{margin:1.6em 0}
.p-blogCard__inner{padding:14px 16px;border:1.5px solid var(--line)!important;border-radius:16px;background:#fff;box-shadow:0 10px 22px -18px rgba(80,50,30,.7)}
.p-blogCard__caption{top:-11px;left:14px;padding:2px 10px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:.62rem}
.p-blogCard__caption::before{display:none}
.p-blogCard__title{font-family:var(--sys);font-weight:700;color:var(--ink)!important;text-decoration:none!important;line-height:1.55}
.p-blogCard__excerpt{color:#746B66}

/* ── レビュー（アプリ紹介） ── */
.swell-block-review{border:1.5px solid var(--line)!important;border-radius:18px;overflow:hidden;background:#fff}
.swell-block-review__inner{border:0!important}
.swell-block-review__title{border-radius:10px;background:var(--ink)!important;color:#fff;font-family:var(--disp);font-weight:900}
.swell-block-review__image img{border-radius:12px}
.c-reviewStars i{color:var(--y)}

/* ── ステップ ── */
.swell-block-step__number{background:var(--o)!important;font-family:var(--en);font-weight:600;border-radius:999px}
.swell-block-step__title{font-family:var(--disp);font-weight:900}

/* ── 記事の下（カテゴリー・タグ・前後の記事・関連記事） ── */
.c-tagList__link{padding:4px 11px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font-size:.72rem;text-decoration:none}
.c-tagList__link::before{content:"#";font-family:var(--en);margin-right:1px;color:var(--o-dk)}
.l-articleBottom__title,.c-secTitle{font-family:var(--disp);font-weight:900;font-size:1.1rem;color:var(--ink);border:0!important;background:none!important;padding:0!important;text-align:left}
.l-articleBottom__title::before,.l-articleBottom__title::after,.c-secTitle::before,.c-secTitle::after{display:none}
.p-postList__thumb,.c-postThumb__figure{border-radius:12px;overflow:hidden}
.p-postList__title{font-weight:700;font-size:.82rem;line-height:1.55;color:var(--ink)}
.p-pnLinks__link{border-radius:14px;background:var(--paper)}

@media (min-width:600px){
 .c-postTitle__ttl{font-size:1.9rem}
 .post_content h2.wp-block-heading{font-size:1.45rem;padding:20px 22px 20px 64px}
 .post_content h2.wp-block-heading::before{left:18px;width:32px;height:32px}
 .post_content h3.wp-block-heading{font-size:1.2rem}
}
