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

/* ===== 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))}
}