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

/* ===== r-base.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
: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)}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sys);
 background:#fff;color:var(--ink)}
:where(a){text-decoration:none;color:inherit}
:where(b,u,i,em,s,strong){color:inherit;text-decoration:none;font-style:normal}

/* 日本語の改行。要素を並べると必ず漏れるので全体に当てる（lang="ja" が前提） */
:where(*){word-break:auto-phrase;text-wrap:pretty;line-break:strict}

/* 見出し・記事タイトル・ボタンは Zen Kaku Gothic New、本文は Noto Sans JP、
   英字ラベルと数字は Jost、ひとことだけ手書きの Yusei Magic */
:where(h1,h2,h3,h4){font-family:var(--disp)}
img{max-width:100%}
.h{overflow-x:clip;position:relative}

/* ── セクション共通 ── */
.sec{padding:26px 16px 8px}
.sec__h{display:flex;align-items:center;gap:9px;margin-bottom:5px}

/* 角丸の四角に白い線画。丸よりも見出しの文字の四角さに合う。
   少しだけ傾け、下に同じ色の影を落として、ステッカーを貼ったように見せる */
.sec__h span{--c:#F2762F;width:32px;height:32px;border-radius:10px;flex:none;display:flex;
 align-items:center;justify-content:center;background:var(--c);color:#fff;rotate:-4deg;
 box-shadow:2px 3px 0 color-mix(in srgb,var(--c) 35%,#1F2430)}
.sec__h span svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
.sec__h h2{margin:0;font-size:1.16rem;font-weight:900;letter-spacing:.01em}
.sec__h u{font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.2em;
 text-transform:uppercase;color:#6B625C}
.sec__all{margin-left:auto;flex:none;font-size:.66rem;font-weight:700;color:#746B66}
.sec__all::after{content:"\2192";margin-left:4px}
.sec__lead{margin:0 0 18px;font-size:.73rem;line-height:1.7;color:var(--body)}

/* 以前は黒（--ink）で、押すものに見えにくかった。サイトで「押すもの」に使っているオレンジにそろえ、
   右端に白い丸の矢印を付ける。乗せると少し浮く */
.all{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 0;padding:15px 18px;
 background:linear-gradient(135deg,#F7924F,var(--o) 55%,#E9662A);color:#fff;font-family:var(--disp);font-size:.96rem;
 font-weight:700;border-radius:999px;box-shadow:0 12px 24px -14px rgba(210,80,20,.95);
 transition:translate .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.all::after{content:"\2192";display:flex;align-items:center;justify-content:center;width:28px;height:28px;
 border-radius:50%;background:#fff;color:var(--o-dk);font-size:.9rem;transition:translate .25s cubic-bezier(.3,1.6,.5,1)}
.all:hover{translate:0 -2px;box-shadow:0 16px 28px -14px rgba(210,80,20,.95)}
.all:hover::after{translate:3px 0}
.all--sm{margin-top:18px;padding:14px;font-size:.84rem}

/* ── はじめかた ── */
.sec--step{background:#F1F8F4;border-radius:28px;margin:22px 10px 0;padding:26px 18px 28px}

/* ── 人気記事：以前は紺の帯で「人気」なのに暗かった。淡い金からクリームへのグラデーションに、
   金・オレンジ・青の小さな点を紙吹雪のように散らす。斜めに切った上下のふちで流れに折り目をつけるのは同じ ── */
.sec--pick{position:relative;color:var(--ink);margin:30px 0 0;padding:46px 16px 44px;
 clip-path:polygon(0 18px,100% 0,100% calc(100% - 18px),0 100%);
 background:
  radial-gradient(circle,#F2B33D 1.6px,transparent 2px) 0 0/46px 46px,
  radial-gradient(circle,#F2762F 1.3px,transparent 1.7px) 23px 17px/46px 46px,
  radial-gradient(circle,#8FA4F0 1.2px,transparent 1.6px) 11px 31px/52px 52px,
  linear-gradient(170deg,#FFF1CC 0%,#FFF7E8 55%,#FFFBF4 100%)}

/* 角にまたがるメダルと王冠が、上の見出しにかからない余白 */
.sec--pick .picks{margin-top:26px}

/* ── 記事レーン ── */
.sec--lane{padding-right:0}

/* ── 診断 ── */
/* 上の間隔は、箱のふちから顔を出す猫（上へ約54px）が、上の記事レーン（ColorSing）にかからない広さ */
/* 下の余白：次のパートナー事務所と続いて見えないように少し空ける（2026-10-21 本人） */
.sec--ask{position:relative;background:var(--paper);border-radius:28px;margin:66px 10px 28px;padding:24px 16px 26px}

/* ── 編集部 ── */
.sec--ed{position:relative;background:#fff}

/* ── セクションごとの地色 ── */
/* 目的から探す：細かい水玉の地に、入口の色をぼかしたかたまりを2つ。ほかのセクションより賑やかにして、
   「ここは触って選ぶ場所」だと伝える */
.sec--doors{position:relative;overflow:hidden;background-color:#FFF7EE;
 background-image:radial-gradient(circle,#F6D7BC 1.3px,transparent 1.6px);background-size:18px 18px}
.sec--doors::before,.sec--doors::after{content:"";position:absolute;z-index:0;border-radius:50%;
 filter:blur(40px);opacity:.45;pointer-events:none}
.sec--doors::before{width:260px;height:260px;left:-90px;top:120px;background:#FFC59A}
.sec--doors::after{width:300px;height:300px;right:-110px;bottom:120px;background:#BFD0FF}
.sec--doors>*{position:relative;z-index:1}
.sec--lane:nth-of-type(odd){background:#FBF7F2}
.sec--pt{background:#F6F7FB}

/* ── スクロールで出てくる ── */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none;transition:none}
}

@media (min-width:768px){
 .sec{padding:40px 24px 14px}
 .sec>*{max-width:1120px;margin-inline:auto}
 .sec__h h2{font-size:1.66rem}
 .sec__h{gap:12px}
 .sec__h span{width:42px;height:42px;border-radius:13px}
 .sec__h span svg{width:24px;height:24px}
 .sec--doors::before{width:420px;height:420px;left:-120px;top:80px}
 .sec--doors::after{width:460px;height:460px;right:-140px;bottom:60px}
 .sec--step{max-width:1120px;margin:34px auto 0;padding:38px 32px 40px;border-radius:34px}

 /* 濃い面の中身も他のセクションと同じ幅に収める */
 .sec--pick>*{max-width:1120px;margin-inline:auto}
 .sec--pick{margin-top:48px;padding:70px 24px 66px;
  clip-path:polygon(0 34px,100% 0,100% calc(100% - 34px),0 100%)}
 .sec--ask{max-width:1120px;margin:76px auto 40px;padding:38px 32px 40px;border-radius:34px}
}

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

/* ── ニュースの帯 ── */
/* 以前は紺（--ink）の帯で、クリームとオレンジのサイトの中でここだけ浮いていた。
   淡いオレンジの地に細い線で区切り、NEWS はオレンジの丸ラベルにする */
.tick{background:#FFF0E4;border-block:1px solid #F6D7BC;overflow:hidden}

/* 速さは下のJSが帯の長さから決める（1秒40px）。秒数を固定すると、
   記事の本数やタイトルの長さで速さが変わる。130s はJSが動かないときの保険 */
.tick__rail{display:flex;width:max-content;animation:tick 130s linear infinite}
.tick:hover .tick__rail,.tick:focus-within .tick__rail{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick__i{display:inline-flex;align-items:center;gap:9px;padding:11px 22px 11px 18px;white-space:nowrap;
 color:var(--ink);font-family:var(--jp);font-size:.76rem;font-weight:700}
.tick__i u{font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.14em;color:#fff;
 background:var(--o);padding:3px 8px 2px;border-radius:999px}
.tick__i b{font-family:var(--en);font-size:.64rem;font-weight:500;color:#B08A72}
.tick__i:hover span{color:var(--o-dk)}

@media (prefers-reduced-motion:reduce){
 .tick__rail,.slides{animation:none;transition:none}
}

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

/* ── ロックアップ ──
   左に掲載数の丸い印、右に見出しと一行の説明。本を読む猫が印の左下に立つ（動きなし）。
   2026-11-01 本人「このセクションだけちょっとチープ」→ 見本 _lockup-seal.html の 07、猫は _lockup-poses.html の 02（虫めがねは常駐バーとかぶるのでやめた）。
   水玉の地・オレンジの吹き出し・中央に積んだ太字をやめ、地は白一色にして下のクリーム色の表紙と分ける */
.lock{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 16px 20px;
 border-bottom:1px solid #F1DCCB;background:#fff;color:inherit;text-decoration:none;transition:background .2s}
/* ブロック全体が事務所一覧へのリンク（lockup.php）。ボタンは押せると分かるための目印 */
.lock:hover{background:#FFFBF7}
.lock:hover .lock__btn{translate:0 -2px}
/* 猫は印から左へはみ出すので、その分だけ印の左を空ける */
.lock__st{position:relative;flex:none;width:84px;height:84px;margin-left:30px}
.lock__seal{position:relative;z-index:1;width:100%;height:100%;margin:0;border-radius:50%;border:1.5px solid var(--o);
 background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px #F6D2BA;display:flex;flex-direction:column;align-items:center;
 justify-content:center;font-family:var(--disp);color:var(--o-dk)}
.lock__seal small{font-size:.58rem;font-weight:700;letter-spacing:.08em}
.lock__seal b{font-family:var(--en);font-size:1.7rem;font-weight:600;line-height:1}
.lock__seal em{font-family:var(--disp);font-style:normal;font-size:.75rem;font-weight:700;margin-left:1px}
.lock__cat{position:absolute;z-index:2;width:68%;left:-48%;bottom:-16%;pointer-events:none}
.lock__tx{min-width:0}
.lock__sub{margin:0;font-family:var(--disp);font-size:1.1rem;font-weight:900;line-height:1.5;color:var(--ink)}
.lock__s{margin:4px 0 0;font-size:.74rem;font-weight:500;line-height:1.6;color:var(--body)}

@media (min-width:768px){
 /* PC は見出しを1行に。ヒーロー（ロックアップと特集）を 1440×900 の画面に収めるため、印はスマホより小さめにして上下の余白も詰める（前の見出しは高さ94px） */
 .lock{gap:22px;padding:10px 24px}
 .lock__st{width:78px;height:78px}
 .lock__sub{font-size:1.6rem;line-height:1.35}
 .lock__s{font-size:.9rem}
 .lock__br{display:none}
}

/* ボタン（目印）。スマホは見出しの下、PC は右 */
.lock__btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:240px;margin-top:10px;padding:9px 8px 9px 16px;
 border-radius:999px;background:var(--o);color:#fff;font-family:var(--disp);font-weight:700;font-size:.86rem;line-height:1.2;
 box-shadow:0 10px 18px -12px rgba(210,80,20,.95);transition:translate .25s cubic-bezier(.3,1.6,.5,1)}
.lock__btn i{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--o-dk)}
.lock__btn svg{width:60%;height:60%}
.lock__btn--pc{display:none}
/* スマホのボタンは1行に収める（文字を少し小さく、幅は文字に合わせる。360px 幅でも折れない） */
.lock__btn--sp{width:auto;max-width:none;padding-left:14px;font-size:.8rem}
.lock__btn span{white-space:nowrap}
@media (min-width:768px){
 .lock__btn--sp{display:none}
 .lock__btn--pc{display:flex;flex:none;width:auto;max-width:none;margin:0 0 0 8px;padding:11px 10px 11px 20px;font-size:.92rem}
 .lock__btn--pc i{width:26px;height:26px}
}

/* 言葉のかたまりの途中で折り返さない（lockup.php。iPhone の Safari は word-break:auto-phrase が効かないため） */
.lock__nb{display:inline-block}

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

/* ── 特集カルーセル ── */
.top{position:relative;padding:16px 14px 18px;overflow:hidden;background:#FFF3E6}
.top__wrap{position:relative}
.top__vp{position:relative;overflow:hidden;border-radius:18px}

/* カードの上のふちに前足をかけて顔を出す。号数の線にかかるのは狙い */
.slides{display:flex;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.slide{flex:0 0 100%}
.feat{display:block;background:#fff;border-radius:18px;overflow:hidden;
 box-shadow:0 10px 26px -16px rgba(80,50,30,.9)}
.feat img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block}
.feat .b{display:block;padding:13px 15px 16px}
.feat .b u{display:inline-flex;align-items:baseline;gap:5px;background:var(--o);color:#fff;
 font-size:.6rem;font-weight:700;padding:4px 11px;border-radius:999px}
.feat .b u b{font-family:var(--en);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.feat .b u s{font-family:var(--en);font-size:.6rem;opacity:.75}

/* 号数：ANYCOLOR の Vol/Issue、do-ya? の vol.47。続いていること自体を見せる */
.issue{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 margin:0 2px 10px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.issue b{font-family:var(--disp);font-size:.92rem;font-weight:900;letter-spacing:.02em}
.issue span{font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#746B66}
.feat .b em{display:block;margin:9px 0 0;font-family:var(--jp);font-size:.96rem;
 font-weight:900;line-height:1.5;letter-spacing:.01em}
.feat .b i{display:block;margin-top:7px;font-family:var(--en);font-weight:500;
 font-size:.64rem;color:#746B66}
.dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dots button{width:7px;height:7px;padding:0;border:0;cursor:pointer;border-radius:999px;background:#E3D4C6;transition:width .25s,background .25s}
.dots button.on{width:22px;background:var(--o)}

@media (min-width:768px){
 .top{padding:30px 24px 34px}
 .top__wrap{max-width:880px;margin-inline:auto}
 .top__vp{border-radius:22px}
 .issue{max-width:880px;margin:0 auto 14px}
 .issue b{font-size:1.1rem}
}

@media (min-width:1024px){

 /* ── PCの表紙：3本を一度に見せる ──
    スマホは1本ずつ送るカルーセルのまま。1024px以上は送らずに、1本目を左に大きく、
    2・3本目を右に縦に並べる（雑誌の表紙の組み方）。JSの自動送りもこの幅では止める */
 .top__wrap,.issue{max-width:1120px}

 /* 3本が高さ900pxの画面に収まるよう、上下の余白を少し詰める */
 .top{padding:20px 24px 26px}
 .top__vp{overflow:visible;border-radius:0}

 /* 画像は文字が切れないよう比率（1200:630）を保つので、カードの高さは幅で決まる。
     左1本の高さ ≒ 右2本＋すき間 になる幅の比（約2.8:1）にして、下に空白を作らない */
 .slides{display:grid;grid-template-columns:minmax(0,2.8fr) minmax(0,1fr);gap:18px;align-items:stretch;
  transform:none!important;transition:none}
 .slide:first-child{grid-row:1/3;display:flex;flex-direction:column}
 .slide:first-child .b{flex:1}
 .slide:first-child .b{padding:18px 22px 22px}
 .slide:first-child .b em{font-size:1.32rem;line-height:1.5}
 .slide:not(:first-child){display:flex;flex-direction:column}
 .slide:not(:first-child) .b{flex:1;padding:10px 13px 12px}
 .slide:not(:first-child) .b em{margin-top:7px;font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .slide:not(:first-child) .b i{margin-top:5px}
 .feat{transition:translate .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
 .feat:hover{translate:0 -3px;box-shadow:0 18px 32px -18px rgba(80,50,30,.9)}
 .dots{display:none}
}

/* 押せる範囲を広げる（2026-10-21）。ドットをキーボードでも押せるボタンにしたので、指で押せる大きさも要る。
   見た目の点（7px）はそのままに、上下左右8pxの透明な余白を押せる範囲に足す（中心どうしは約25px離れる） */
.dots{gap:2px;min-height:23px}  /* ドットは JS で後から足すので、その高さを先に取っておく（ずれ防止） */
.dots button{box-sizing:content-box;padding:8px;background-clip:content-box}

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

/* ── キーワードタグ：近大のハッシュタグ列、ANYCOLOR の TRENDING TAGS ── */
.tags{position:relative;display:flex;align-items:center;gap:6px;padding:14px 0 14px 14px;
 background:#fff;border-bottom:1px solid var(--line)}
.tags__cat{flex:none;width:46px;margin:-6px 0 -8px}
.tags__rail{display:flex;gap:7px;overflow-x:auto;padding:2px 14px 2px 2px;scrollbar-width:none}
.tags__rail::-webkit-scrollbar{display:none}
.tags__rail a{flex:none;font-family:var(--disp);font-size:.76rem;font-weight:700;color:var(--ink);
 background:var(--paper);border:1px solid #E6DED6;border-radius:999px;padding:7px 13px;white-space:nowrap}
.tags__rail a:hover{background:#FFF0E4;border-color:#FFD9BE;color:var(--o-dk)}

@media (min-width:768px){
 .tags{justify-content:center;padding:16px 24px}
 .tags__rail{flex-wrap:wrap;justify-content:center;overflow:visible;max-width:1000px}
 .tags__cat{width:58px}
}

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

/* ── 目的から探す ── */
/* 上の余白は、1段目の写真から顔を出す猫のぶん（無いと説明文に重なる） */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:46px 14px;margin-top:40px}
.door{display:block;text-align:center}
.door:nth-child(even){margin-top:30px}
.door figure{position:relative;margin:0}

/* 写真の後ろに、その入口の色の円をずらして重ねる。乗せると円がずれて写真が浮く */
.door figure::before{content:"";position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;border-radius:50%;
 background:var(--c);opacity:.2;translate:7px 9px;transition:translate .35s cubic-bezier(.3,1.5,.5,1),opacity .35s}
.door__img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block;
 box-shadow:0 10px 22px -12px rgba(60,40,30,.7);transition:scale .35s cubic-bezier(.3,1.5,.5,1)}

/* 猫は写真の後ろ（z-index 0）にいて、乗せている間だけ外へ出てくる。外すと元の位置へ戻って消える。
   出る位置（--x）・最初と最後の位置（--from/--to）・傾き・大きさ・動きの速さを入口ごとに変える */
.door__pal{--x:50%;--pw:46%;--from:-50% 18%;--to:-50% -50%;--r0:0deg;--r1:0deg;--s0:1;
 --ease:cubic-bezier(.3,1.7,.5,1);--dur:.5s;
 position:absolute;left:var(--x);top:0;z-index:0;width:var(--pw);opacity:0;pointer-events:none;
 translate:var(--from);rotate:var(--r0);scale:var(--s0);transform-origin:50% 100%;
 transition:translate var(--dur) var(--ease),rotate var(--dur) var(--ease),scale var(--dur) var(--ease),opacity .16s}
.door:hover .door__pal,.door:focus-visible .door__pal,.door:active .door__pal{translate:var(--to);rotate:var(--r1);scale:1;opacity:1}

/* 未経験：ジャンプ。行き過ぎの大きい曲線で、いったん高く跳んでからふちに戻る */
.door--beginner .door__pal{--ease:cubic-bezier(.2,2.6,.4,1);--dur:.65s}

/* TikTok：小さく丸まった状態から1回転しながら右上に出る */
.door--tiktok .door__pal{--x:78%;--from:-50% -10%;--to:-50% -42%;--r0:-330deg;--r1:12deg;--s0:.2;
 --ease:cubic-bezier(.3,1.3,.5,1);--dur:.75s}

/* 報酬：上から落ちてきて弾む。着地のあとにゆらゆら */
.door--reward .door__pal{--from:-50% -170%;--to:-50% -46%;--ease:cubic-bezier(.35,1.7,.55,1);--dur:.6s}
.door--reward:hover .door__pal{animation:door-sway .9s .55s ease-in-out}
@keyframes door-sway{25%{rotate:-9deg}50%{rotate:7deg}75%{rotate:-4deg}}

/* 顔出しなし：耳と目だけ。速さも落として、おそるおそる出てくる */
.door--privacy .door__pal{--pw:50%;--from:-50% 12%;--to:-50% -26%;--dur:.9s;--ease:cubic-bezier(.4,0,.2,1)}

/* 写真の中に出る入口：写真と同じ円の窓。外にはみ出たぶんは見えない */
.door__win{position:absolute;left:0;top:0;z-index:2;width:100%;aspect-ratio:1/1;border-radius:50%;
 overflow:hidden;pointer-events:none}

/* 副業：窓の下のふちから上がってくる */
.door--sidejob .door__pal{--pw:52%;top:100%;--from:-50% 0;--to:-50% -74%;--ease:cubic-bezier(.3,1.5,.5,1);--dur:.55s}

/* Pococha：窓の左のふちから、傾けて横にのぞく */
.door--pococha .door__pal{--x:0%;--pw:50%;top:24%;--from:-100% 0;--to:-14% 0;--r0:30deg;--r1:16deg;
 transform-origin:0 50%;--ease:cubic-bezier(.3,1.6,.5,1);--dur:.55s}
.door:hover figure::before{translate:12px 15px;opacity:.32}
.door:hover .door__img{scale:1.03}
.door figcaption{display:inline-block;margin-top:-18px;position:relative;z-index:2;background:var(--c);
 transition:translate .3s cubic-bezier(.3,1.6,.5,1);
 padding:9px 15px;border-radius:999px;color:#fff;font-family:var(--disp);font-size:.78rem;
 font-weight:700;line-height:1.25;text-wrap:nowrap;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.door:hover figcaption{translate:0 -3px}
.door b{display:block;margin-top:9px;font-family:var(--en);font-variant-numeric:tabular-nums;
 font-size:.72rem;color:#746B66}
.door b em{font-size:1.04rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-right:2px}
.perch{position:relative;margin-top:44px}
.perch .all{margin-top:0}
.perch__cat{position:absolute;left:22px;bottom:calc(100% - 12px);width:58px;z-index:1;pointer-events:none}

@media (prefers-reduced-motion:reduce){
 .door__pal,.door figure::before,.door__img,.door figcaption{transition:none;animation:none}
}

@media (min-width:768px){
 .perch{max-width:1120px;margin-inline:auto}
 .perch__cat{width:76px;left:40px}
 .doors{grid-template-columns:repeat(3,1fr);gap:34px 22px}
 .door:nth-child(even){margin-top:0}

 /* PCは円が大きいので猫は割合を下げる。段の間は顔を出した猫が上の段の社数にかからない幅 */
 .doors{margin-top:72px;gap:80px 22px}
 .door__pal{--pw:38%}
 .door--privacy .door__pal{--pw:42%}
 .door--sidejob .door__pal{--pw:44%}
 .door--pococha .door__pal{--pw:42%}
}

/* ── 1画面に収める（2026-10-21 本人「目的から探すが大きすぎる。一画面で収まるとユーザーはいい」）──
   以前はスマホが2列×3段（互い違い）で約1,070px、PC は3列×2段で円が約360pxあり、どちらも画面2つ分近かった。
   スマホは3列×2段、PC（1024px以上）は6つを1列に並べる。円が小さくなるので、猫の割合は小さい円の値に戻す。
   1段目の上の余白は、写真の後ろから顔を出す猫のぶん（削ると説明文や見出しに重なる） */
@media (max-width:767px){
 .doors{grid-template-columns:repeat(3,1fr);gap:30px 10px;margin-top:40px}
 .door:nth-child(even){margin-top:0}
 .door figcaption{margin-top:-14px;padding:6px 8px;font-size:.66rem;line-height:1.3;text-wrap:balance;max-width:100%}
 .door b{margin-top:6px;font-size:.62rem}
 .door b em{font-size:.9rem}
 /* ボタンの左端に乗る猫（高さ約60px）が、上の段の社数にかからない余白 */
 .perch{margin-top:56px}
}
@media (min-width:768px) and (max-width:1023px){
 .doors{margin-top:56px;gap:56px 22px}
 .perch{margin-top:72px}
}
@media (min-width:1024px){
 .doors{grid-template-columns:repeat(6,1fr);gap:0 22px;margin-top:56px}
 .door__pal{--pw:46%}
 .door--privacy .door__pal{--pw:50%}
 .door--sidejob .door__pal{--pw:52%}
 .door--pococha .door__pal{--pw:50%}
 .perch{margin-top:72px}
}

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

/* 上の余白は、1枚目のカードのふちに座る猫のぶん。無いと説明文に重なる */
.steps{list-style:none;margin:40px 0 0;padding:0}
.steps li{position:relative;display:grid;grid-template-columns:62px 1fr;gap:4px 14px;
 background:#fff;border-radius:18px;padding:16px 16px 18px;
 box-shadow:0 5px 16px -11px rgba(40,90,70,.9)}
.steps li+li{margin-top:34px}
.steps li+li::before{content:"";position:absolute;left:46px;top:-26px;width:2px;height:22px;
 background:repeating-linear-gradient(to bottom,#BBD9CB 0 4px,transparent 4px 8px)}
.steps__n{grid-row:1/3;align-self:start;width:62px;height:62px;border-radius:50%;
 background:var(--g);color:#fff;font-family:var(--en);font-weight:600;font-size:1.62rem;
 display:flex;align-items:center;justify-content:center}
.steps strong{font-family:var(--disp);font-size:.98rem;font-weight:900}
.steps i{grid-column:2;font-size:.72rem;line-height:1.65;color:var(--body)}

/* 右下に置くと説明文に重なる。カードの右上のふちに座らせる */
.steps__cat{position:absolute;right:12px;bottom:calc(100% - 14px);width:52px;pointer-events:none}

/* 2枚目だけ左に。3匹が同じ位置に縦に並ぶのを崩す */
.steps li:nth-child(2) .steps__cat{right:auto;left:76px}
.steps a{grid-column:2;justify-self:start;margin-top:9px;font-size:.74rem;font-weight:700;
 color:var(--g);border-bottom:1.5px solid #BBD9CB;padding-bottom:2px}

@media (min-width:768px){
 .steps__cat{width:66px}
 .steps{margin-top:58px}
 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
 .steps li+li{margin-top:0}
 .steps li+li::before{display:none}
}

/* ===== r-popular.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
.picks{display:grid;gap:12px}
.pick{display:flex;gap:12px;align-items:center;border-radius:16px;padding:11px;
 background:#fff;border:1px solid #F1E3CF;box-shadow:0 6px 18px -12px rgba(150,100,30,.55);
 transition:translate .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.pick:hover{translate:0 -3px;box-shadow:0 12px 24px -12px rgba(150,100,30,.6)}
.pick__n{flex:none;width:38px;text-align:center;font-family:var(--en);font-size:1.4rem;
 font-weight:700;line-height:1;letter-spacing:-.03em;color:#CDB9A0}

/* ── メダル：金・銀・銅は面のグラデーション＋内側の明るい縁で、平たい丸より「物」に見せる ── */
.medal{--m1:#FFE08A;--m2:#E9A922;--m3:#B97A0F;position:relative;flex:none;width:38px;height:38px;
 border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(circle at 32% 28%,var(--m1),var(--m2) 55%,var(--m3));
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 4px 10px -3px rgba(120,80,20,.45);
 font-family:var(--en);font-size:1.15rem;font-weight:700;color:#fff;
 text-shadow:0 1px 1px rgba(0,0,0,.3)}
.medal--2{--m1:#F4F6F9;--m2:#B9C0CA;--m3:#7E8794}
.medal--3{--m1:#F6C9A1;--m2:#C9824A;--m3:#8D5426}
.medal svg{position:absolute;top:-13px;left:50%;translate:-50% 0;width:22px;height:22px;
 fill:#FFD45C;stroke:#B97A0F;stroke-width:1.6;stroke-linejoin:round;
 filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}

/* 2・3位はカードの縁にもメダルの色を薄く引く */
.pick--2{border-color:#D9DEE5}
.pick--3{border-color:#EBC6A6}

/* ── 1位：写真を全幅にした大きなカード ── */
.pick--1{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:visible;
 border:2px solid #F2B33D;background:#fff;
 box-shadow:0 0 0 5px rgba(242,179,61,.18),0 16px 32px -18px rgba(190,120,20,.8)}
.pick--1 .pick__th{width:100%;border-radius:15px 15px 0 0}
.pick--1 .pick__th img{width:100%}

/* カードの左上の角にまたがる（王冠のぶん少し下げる） */
.pick--1 .medal{position:absolute;z-index:2;left:-12px;top:-12px;width:48px;height:48px;font-size:1.4rem}
.pick--1 .medal svg{top:-15px;width:26px;height:26px}
.pick--1 .pick__b{padding:14px 15px 15px}
.pick--1 .pick__b em{padding-right:0}
.pick--1 .pick__b em{font-size:.98rem;-webkit-line-clamp:2}
.pick__th{position:relative;flex:none;width:104px;border-radius:12px;overflow:hidden;line-height:0}
.pick__th img{width:104px;aspect-ratio:1200/630;object-fit:cover}

/* 見出しの英字に重ならないよう、下の注記の横に置く */
.pick__cat{position:absolute;right:14px;bottom:26px;width:72px;rotate:6deg;pointer-events:none}

/* 右下に猫が座るので、そのぶん右を空ける */
.pick__note{margin-top:14px;margin-bottom:0;padding-right:96px;font-size:.6rem;line-height:1.7;color:#9A8670}
.pick__b{flex:1;min-width:0}
.pick__b em{font-family:var(--jp);font-size:.8rem;font-weight:700;line-height:1.45;
 /* auto-phrase は「TikTokライバー事務所おすすめランキング」を1語として扱い、
    幅170px程度のこの枠では折り返せずに右へはみ出す。ここだけ通常の折り返しに戻す */
 word-break:normal;overflow-wrap:anywhere;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pick__b s{display:block;margin-top:5px;font-family:var(--en);font-weight:500;
 font-size:.6rem;color:#746B66}

@media (min-width:768px){
 .picks{grid-template-columns:repeat(2,1fr);gap:14px 20px}
 .pick--1{grid-column:1/-1;flex-direction:row;align-items:center}
 .pick--1 .pick__th{width:48%;border-radius:15px 0 0 15px}
 .pick--1 .pick__b{padding:22px 30px}
 .pick--1 .pick__b em{font-size:1.3rem}
 .pick--1 .medal{width:58px;height:58px;font-size:1.7rem;left:-16px;top:-16px}
 .pick--1 .medal svg{top:-20px;width:34px;height:34px}

 /* 猫は注記の行に座らせる（上げると最後の段の記事にかかる） */
 .pick__cat{width:96px;right:max(24px,calc((100% - 1120px) / 2));bottom:44px}
 .pick__note{min-height:84px;padding-top:4px}
}

/* ===== r-lanes.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
.rail{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 10px 0;margin-right:-16px;
 scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.lcard{flex:none;width:190px;scroll-snap-align:start}
.lcard__th{position:relative;display:block;border-radius:14px;overflow:hidden;line-height:0;
 box-shadow:0 6px 16px -10px rgba(60,40,30,.8)}
.lcard__th img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.lcard__t{display:block;margin-top:9px;font-family:var(--jp);font-size:.78rem;font-weight:700;
 line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lcard__d{display:block;margin-top:5px;font-family:var(--en);font-weight:500;font-size:.6rem;color:#746B66}
.lcard--more .lcard__more img{width:52px;margin-bottom:2px}
.lcard--more .lcard__more{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;
 aspect-ratio:1200/630;border-radius:14px;background:var(--o);color:#fff;
 font-family:var(--jp);font-size:.78rem;font-weight:700;line-height:1.5;padding:10px}

@media (min-width:768px){

 /* レールは入れ物から幅を決める。ビューポートから決めると、窓幅しだいで
     はみ出し量が0%〜95%まで暴れる */
 .rail{width:calc(100% - 48px);max-width:calc(1120px - 48px);margin-inline:auto;
  margin-right:auto;padding-right:0}
 .lcard{width:calc((100% - 36px) / 3.3)}
}

@media (min-width:992px){
 .lcard{width:calc((100% - 48px) / 4.3)}
}

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

/* 箱のふちから顔を出す。下げると見出しの英字に重なる */
.ask__cat{position:absolute;right:8px;top:-54px;width:72px;rotate:-4deg;pointer-events:none}
.sq{display:flex;align-items:center;gap:11px;background:#fff;border-radius:16px;padding:14px 15px;
 box-shadow:0 4px 12px -7px rgba(60,40,30,.6)}
.sq+.sq{margin-top:9px}
.sq u{flex:none;width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;
 font-family:var(--en);font-weight:600;font-size:.62rem;display:flex;align-items:center;justify-content:center}
.sq span{flex:1;min-width:0;font-family:var(--disp);font-size:.82rem;font-weight:700}
.sq b{flex:none;font-size:.58rem;font-weight:700;color:#796F69;text-wrap:nowrap}
.sq::after{content:"\2192";flex:none;color:var(--g)}
.quiz{margin-top:12px;background:#fff;border-radius:16px;padding:16px}
.quiz[data-on="0"]{display:none}
.quiz h4{margin:0 0 10px;font-family:var(--disp);font-size:.9rem;font-weight:900}
.quiz__opts{display:grid;gap:8px}
.quiz__opt{font:inherit;font-weight:700;font-size:.8rem;text-align:left;padding:12px 14px;
 border:1.5px solid var(--line);background:#fff;border-radius:12px;cursor:pointer}
.quiz__ans{font-size:.82rem;line-height:1.8}
.quiz__cat{float:right;width:64px;margin:-4px -4px 4px 8px;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.quiz__ans a{display:inline-block;margin-top:10px;font-weight:700;color:var(--g);
 border-bottom:1.5px solid #BBD9CB}
.quiz__back{margin-top:12px;font:inherit;font-size:.72rem;color:#746B66;border:0;
 background:transparent;cursor:pointer;padding:0}

@media (min-width:768px){
 .ask__cat{width:110px;right:40px;top:-56px}
}

/* ── diagnosis.js の部品に当てる（子テーマで足したもの、2026-10-21）──
   中身（分岐と答え）は今の diagnosis.js のまま使う（§4-1 ⑩）。diagnosis.js は #diagnosis-form の中身を
   .lp-diagnosis__* の部品で書き換えて進むので、その部品に試作の見た目を当てる。
     最初の3択     → 試作の .sq（番号・質問・問数・矢印の白い行）
     質問と選択肢   → 試作の .quiz（白いパネルと選択肢のボタン）
     結果           → 試作の .quiz__ans（右上に OK の猫）
   ラジオボタンは見えなくするが、キー操作と読み上げのために残す */
.ask__form{counter-reset:askq}
.ask__form input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ask__form .lp-diagnosis__option{cursor:pointer}
.ask__form .lp-diagnosis__option:focus-within{outline:2px solid var(--g);outline-offset:2px}

/* 最初の3択：見出しは読み上げ用に残して見えなくする（試作の行には問いかけの見出しがない） */
.ask__form [data-step="initial"] .lp-diagnosis__question-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ask__form [data-scenario]{counter-increment:askq;display:flex;align-items:center;gap:11px;background:#fff;
 border-radius:16px;padding:14px 15px;box-shadow:0 4px 12px -7px rgba(60,40,30,.6)}
.ask__form [data-scenario]+[data-scenario]{margin-top:9px}
.ask__form [data-scenario]::before{content:"0" counter(askq);flex:none;width:24px;height:24px;border-radius:50%;
 background:var(--g);color:#fff;font-family:var(--en);font-weight:600;font-size:.62rem;
 display:flex;align-items:center;justify-content:center}
.ask__form [data-scenario] .lp-diagnosis__option-text{flex:1;min-width:0;display:flex;align-items:center;gap:8px;
 font-family:var(--disp);font-size:.82rem;font-weight:700}
.ask__form [data-scenario] .lp-diagnosis__option-text::after{margin-left:auto;flex:none;font-family:var(--sys);
 font-size:.58rem;font-weight:700;color:#796F69;text-wrap:nowrap}
.ask__form [data-scenario="A"] .lp-diagnosis__option-text::after{content:"3問"}
.ask__form [data-scenario="B"] .lp-diagnosis__option-text::after{content:"2問"}
.ask__form [data-scenario="C"] .lp-diagnosis__option-text::after{content:"すぐ"}
.ask__form [data-scenario]::after{content:"\2192";flex:none;color:var(--g)}

/* 質問と選択肢 */
.ask__form .lp-diagnosis__step:not([data-step="initial"]){margin-top:12px;background:#fff;border-radius:16px;padding:16px}
.ask__form .lp-diagnosis__step:not([data-step="initial"]) .lp-diagnosis__question-title{margin:0 0 10px;
 font-family:var(--disp);font-size:.9rem;font-weight:900}
.ask__form [data-next]{display:block;font-weight:700;font-size:.8rem;text-align:left;padding:12px 14px;
 border:1.5px solid var(--line);background:#fff;border-radius:12px}
.ask__form [data-next]+[data-next]{margin-top:8px}
.ask__form .lp-diagnosis__option.is-selected{border-color:var(--g)}

/* 結果 */
.ask__form .lp-diagnosis__result-content{font-size:.82rem;line-height:1.8}
.ask__form .lp-diagnosis__result-content::before{content:"";float:right;width:64px;height:64px;margin:-4px -4px 4px 8px;
 background:url("../../images/cat/p-good.svg") center/contain no-repeat;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.ask__form .lp-diagnosis__result-title{margin:0 0 4px;font-family:var(--disp);font-size:.9rem;font-weight:900}
.ask__form .lp-diagnosis__result-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:10px}
.ask__form .lp-diagnosis__result-actions a{display:inline-block;font-weight:700;color:var(--g);
 border-bottom:1.5px solid #BBD9CB}
.ask__form .lp-diagnosis__result-actions button{font:inherit;font-size:.72rem;color:#746B66;border:0;
 background:transparent;cursor:pointer;padding:0}

@media (prefers-reduced-motion:reduce){
 .ask__form .lp-diagnosis__result-content::before{animation:none}
}

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

/* ── パートナー ── */
/* 自動で流れる帯。どの事務所も同じ幅の枠で、表示する面積も同じ。カードの地や枠線は付けない。
   流れているので特定の社がずっと先頭に居続けることはないが、最初に見える社も偏らないよう
   並び順は開くたびに入れ替える（下のJS）。マウスを乗せる・触る・キーで選ぶと止まる */
.pts{--k0:1;--k:var(--k0);overflow:hidden;margin:0 -16px;padding:6px 0 10px;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pts__rail{display:flex;gap:28px;width:max-content;padding-left:28px;animation:pts-flow 60s linear infinite}
.pts:hover .pts__rail,.pts:focus-within .pts__rail,.pts:active .pts__rail{animation-play-state:paused}
@keyframes pts-flow{to{transform:translateX(-50%)}}
.pt{--pw:240px;flex:none;width:var(--pw);display:flex;flex-direction:column;align-items:center}

/* ロゴの入る場所の高さはどの社も同じ。ロゴ自体は面積を揃えた大きさで中央に置く */
.pt__logo{height:calc(var(--k) * 160px + 4px);width:100%;display:flex;align-items:center;justify-content:center}
.pt__logo img{width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px);max-width:100%;object-fit:contain;
 transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
.pt:hover .pt__logo img{scale:1.04}
.pt__name{margin-top:10px;width:100%;text-align:center;
 font-family:var(--jp);font-size:.84rem;font-weight:700;color:var(--ink);line-height:1.4}
.pts__foot{display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.pts__cat{width:54px;flex:none;pointer-events:none}

@media (prefers-reduced-motion:reduce){

 /* 動きを減らす設定では流さず、横スクロールで見る */
 .pts{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
 .pts__rail{animation:none}
}

@media (min-width:768px){

 /* PCはレールを見出しの幅に収める。カードは3枚＋4枚目が少し見える幅 */
 .pts{margin:0 auto}
 .pts__rail{gap:40px}
 .pt{--pw:300px}
 .pt__name{font-size:.9rem}
 .pts__cat{width:72px}
}

/* ── スマホは社と社の間を詰める（2026-10-21 本人）──
   240px の枠のままだと、正方形のロゴ（約120px）の左右が大きく空いていた。
   スマホでは枠の幅をロゴの幅に合わせる。ロゴの倍率は renewal.js が --pw（240px）を基準に決めるので、
   どの社も同じ面積のまま変わらない */
@media (max-width:767px){
 .pts__rail{gap:20px;padding-left:20px}
 .pt{width:auto;min-width:96px}
 .pt__logo{width:auto}
 .pt__name{width:auto;white-space:nowrap}
}

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

/* ── リスト ── */
.list{border-top:1px solid var(--line)}
.nw{display:flex;flex-direction:column;gap:3px;padding:13px 2px;border-bottom:1px solid var(--line)}
.nw time,.up time{font-family:var(--en);font-weight:500;font-size:.62rem;color:#746B66}
.nw span{font-family:var(--jp);font-size:.8rem;font-weight:700;line-height:1.55}

/* 新着は写真つき。上のニュース（文字だけ）と形を分ける */
.up{display:flex;flex-direction:row;align-items:center;gap:11px;padding:13px 2px;
 border-bottom:1px solid var(--line)}
.up>img{flex:none;width:88px;aspect-ratio:1200/630;object-fit:cover;border-radius:10px}
.up__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.up__b span{font-family:var(--jp);font-size:.8rem;font-weight:700;line-height:1.55}

@media (min-width:768px){
 .up>img{width:132px}
}

/* ===== r-editor.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
.ed__cat{position:absolute;right:14px;top:14px;width:72px;pointer-events:none}
.ed{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ed__av{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none}
.ed__t u{display:block;font-size:.58rem;color:#746B66}
.ed__t strong{display:block;margin-top:2px;font-family:var(--disp);font-size:.96rem;font-weight:900}
.ed__body p{margin:0 0 8px;font-size:.74rem;line-height:1.75;color:var(--body)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px;
 border-top:1px solid var(--line)}
.stats div{text-align:center}
.stats em{display:block;font-family:var(--en);font-variant-numeric:tabular-nums;
 font-size:1.65rem;font-weight:700;letter-spacing:-.02em;color:var(--o-dk);line-height:1}
.stats span{display:block;margin-top:3px;font-size:.6rem;color:#746B66}

@media (min-width:768px){
 .ed__cat{width:96px;right:max(24px,calc((100% - 1120px) / 2 + 24px));top:34px}
}

/* ===== r-card.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
.snoimg{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;
 padding:0 9cqw;background:var(--nc,#4E63C8);color:#fff;text-align:left;line-height:1.3;
 font-family:var(--sys)}
.snoimg::before{content:"";position:absolute;inset:4cqw;border:1px solid rgba(255,255,255,.22);border-radius:2cqw;pointer-events:none}
.snoimg__k{position:absolute;left:9cqw;top:8cqw;font-size:clamp(.5rem,4.4cqw,.78rem);font-weight:700;
 padding:.15em .7em;border-radius:999px;background:rgba(255,255,255,.16)}
.snoimg__t{font-size:clamp(.78rem,10cqw,2rem);font-weight:900;letter-spacing:.01em;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:anywhere}
.snoimg__s{margin-top:2.5cqw;font-size:clamp(.5rem,4.4cqw,.86rem);font-weight:700;opacity:.82;
 display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.snoimg__b{position:absolute;left:9cqw;bottom:7cqw;font-size:clamp(.45rem,3.6cqw,.7rem);font-weight:700;opacity:.7;letter-spacing:.04em}

@container (max-width:170px){

 /* 小さい枠では種類と見出しだけにする */
 .snoimg__s,.snoimg__b{display:none}
 .snoimg__k{top:6cqw}
 .snoimg__t{margin-top:8cqw}
}

/* ── 子テーマで足したもの（2026-10-21）──
   試作では文字のアイキャッチを検索結果にしか出していなかった。トップの特集・人気・レーン・新着にも
   アイキャッチのない記事が来うるので、それぞれの写真の枠と同じ大きさで収める */
.feat__noimg,.lcard__th,.pick__th,.up__noimg{container-type:inline-size}
.feat__noimg{display:block;aspect-ratio:1200/630;line-height:0}
.lcard__th>.snoimg,.pick__th>.snoimg{aspect-ratio:1200/630;height:auto}
.up__noimg{flex:none;width:88px;aspect-ratio:1200/630;border-radius:10px;overflow:hidden;line-height:0}

@media (min-width:768px){
 .up__noimg{width:132px}
}

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

/* ── 検索結果：上部 ── */
.sh{position:relative;overflow:hidden;padding:26px 16px 18px;background-color:#FFF7EE;
 background-image:radial-gradient(circle,#F6D7BC 1.3px,transparent 1.6px);background-size:18px 18px}
.sh>*{position:relative;z-index:1}
.sh::after{content:"";position:absolute;right:-90px;top:-60px;width:260px;height:260px;border-radius:50%;
 background:#FFC59A;filter:blur(40px);opacity:.4}
.sh__en{display:block;font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.22em;color:#796F69}
.sh__q{margin:6px 0 0;padding-right:84px;font-family:var(--disp);font-size:1.9rem;font-weight:900;line-height:1.25;
 word-break:break-all}
.sh__q i{color:var(--o);margin-right:2px}
.sh__n{margin:8px 0 0;font-size:.8rem;color:var(--body)}
.sh__n b{font-family:var(--en);font-size:1.3rem;font-weight:700;color:var(--o-dk);margin:0 2px}
.sh__cat{position:absolute;right:10px;top:22px;width:86px;rotate:6deg;pointer-events:none}
.sform{display:flex;align-items:center;gap:8px;margin-top:16px;background:#fff;border:1.5px solid var(--ink);
 border-radius:999px;padding:5px 5px 5px 16px}
.sform svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.sform input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:.9rem;background:transparent;color:var(--ink)}
.sform button{flex:none;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;
 font-family:var(--disp);font-weight:700;font-size:.8rem;padding:10px 16px;cursor:pointer}

/* タグの切り替え */
.stags{display:flex;gap:7px;overflow-x:auto;margin:16px -16px 0;padding:2px 16px 4px;scrollbar-width:none}
.stags::-webkit-scrollbar{display:none}
.stags a{flex:none;display:flex;align-items:baseline;gap:5px;font-family:var(--disp);font-size:.78rem;font-weight:700;
 color:var(--ink);background:#fff;border:1px solid #E6DED6;border-radius:999px;padding:7px 13px;white-space:nowrap;
 transition:background .2s,color .2s,translate .25s cubic-bezier(.3,1.6,.5,1)}
.stags a small{font-family:var(--en);font-size:.62rem;font-weight:600;color:#796F69}
.stags a:hover{translate:0 -2px}
.stags a[aria-current]{background:var(--o);border-color:var(--o);color:#fff}
.stags a[aria-current] small{color:rgba(255,255,255,.8)}

/* ── 事務所一覧への近道 ──
   以前は紺の地で、ページの中で沈んで見え押されにくかった。サイトの主役の色（オレンジ）の地に白い文字、
   常駐バーと同じ「押すもの」の見た目にそろえる。乗せると浮いて、矢印が右へ動く */
/* 事務所一覧への案内。飾りを盛ると作り物っぽく見える（写真・猫・点々・手書き・グラデーションを全部載せた版は
   「AI感がある」と言われた）。上に太い線、下に細い線の帯にし、文字と数字と矢印だけで見せる */
.sdb{display:flex;align-items:center;gap:14px;margin:24px 16px 0;padding:14px 2px;
 border-top:2px solid var(--ink);border-bottom:1px solid var(--line);color:var(--ink)}
.sdb__b{flex:1;min-width:0}
.sdb__b small{display:block;font-size:.68rem;font-weight:700;color:#746B66;letter-spacing:.04em}
.sdb__b strong{display:block;margin-top:3px;font-family:var(--disp);font-size:1rem;font-weight:900;line-height:1.45}
.sdb__b em{font-family:var(--en);font-size:1.5rem;font-weight:700;color:var(--o-dk);margin:0 2px 0 4px;line-height:1}
.sdb__go{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
 background:var(--o);color:#fff;font-size:1rem;transition:translate .2s ease}
.sdb:hover strong{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sdb:hover .sdb__go{translate:4px 0}

/* ── 結果 ── */
.sres{padding:22px 16px 6px}
.sbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* スマホは絞り込みを1行使い、並び順は次の行の右に置く（同じ行だと重なる） */
.sfil{display:flex;gap:6px;overflow-x:auto;flex:1 1 100%;min-width:0;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.sfil::-webkit-scrollbar{display:none}
.sfil :is(button,a),.ssort :is(button,a){display:inline-block;flex:none;font:inherit;font-family:var(--jp);font-size:.72rem;font-weight:700;cursor:pointer;
 border:1px solid var(--line);background:#fff;color:var(--body);border-radius:999px;padding:6px 11px;white-space:nowrap}
.sfil :is(button[aria-pressed="true"],a[aria-current]){background:var(--ink);border-color:var(--ink);color:#fff}
.sfil :is(button,a) small{font-family:var(--en);font-size:.6rem;margin-left:3px;opacity:.85}
.ssort{display:flex;margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:2px;background:#fff}
.ssort :is(button,a){border:0;padding:5px 10px;background:transparent}
.ssort :is(button[aria-pressed="true"],a[aria-current]){background:var(--paper);color:var(--ink)}
.slist{display:grid;gap:0}

/* 1件目は大きく */
.sitem{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:12px 0;
 border-bottom:1px solid var(--line);animation:sin .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes sin{from{opacity:0;translate:0 10px}}
.sitem__th{position:relative;display:block;border-radius:10px;overflow:hidden;line-height:0;aspect-ratio:1200/630;
 background:var(--paper)}
.sitem__th img{width:100%;height:100%;object-fit:cover}
.sitem__k{display:inline-block;font-family:var(--jp);font-size:.6rem;font-weight:700;color:var(--o-dk);
 background:#FFF0E4;border-radius:999px;padding:2px 8px}
.sitem__t{display:block;margin-top:5px;font-family:var(--jp);font-size:.84rem;font-weight:700;line-height:1.5;
 word-break:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sitem__t mark{background:linear-gradient(transparent 60%,#FFD9BE 60%);color:inherit}
.sitem__d{display:block;margin-top:4px;font-family:var(--en);font-size:.62rem;color:#746B66}
.sitem--top{grid-template-columns:1fr;gap:10px;padding-top:4px}
.sitem--top .sitem__th{border-radius:16px;box-shadow:0 10px 24px -14px rgba(60,40,30,.8)}
.sitem--top .sitem__t{font-size:1.02rem;-webkit-line-clamp:2}

/* 画像のない記事：種類の色の地に猫 */
/* アイキャッチのない記事：タイトルの文字で組んだアイキャッチ。文字の大きさは枠の幅（cqw）に合わせる */
.sitem__th{container-type:inline-size}
.smore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:18px 0 0;padding:15px;
 border:0;border-radius:999px;background:var(--paper);font:inherit;font-family:var(--jp);font-weight:700;font-size:.86rem;
 color:var(--ink);cursor:pointer}
.smore small{font-family:var(--en);color:#746B66}
.sout{display:block;margin-top:12px;text-align:center;font-size:.74rem;color:#746B66;text-decoration:underline;
 text-underline-offset:3px}

/* 少ない・見つからない */
.sfew{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px;border-radius:18px;background:#F1F8F4}
.sfew img{flex:none;width:64px}
.sfew p{margin:0;font-size:.8rem;line-height:1.7}
.sfew strong{font-family:var(--jp)}
.sfew .stags{margin:10px 0 0;padding:0;flex-wrap:wrap;overflow:visible}
.sempty{text-align:center;padding:30px 10px 10px}
.sempty img{width:110px}
.sempty h2{margin:10px 0 6px;font-family:var(--jp);font-size:1.1rem;font-weight:900}
.sempty p{margin:0;font-size:.8rem;color:var(--body);line-height:1.7}
.sempty .stags{justify-content:center;flex-wrap:wrap;margin:16px 0 0;padding:0;overflow:visible}
.snote{margin:22px 16px 0;font-size:.6rem;color:#746B66;line-height:1.7}

@media (min-width:768px){
 .sh{padding:44px 24px 26px}
 .sh>*{max-width:1120px;margin-inline:auto}
 .sh__q{font-size:2.8rem;padding-right:0}
 .sh__cat{width:130px;right:max(24px,calc((100% - 1120px) / 2));top:34px}

 /* 幅は狭めるが、左端は見出しにそろえる（margin-left:0 だと画面の左に寄る） */
 .sform{max-width:560px;margin-left:max(0px,calc((100% - 1120px) / 2))}
 .stags{margin:18px auto 0;padding:2px 0 4px;flex-wrap:wrap;overflow:visible}
 .sdb{max-width:1120px;margin:32px auto 0;padding:18px 4px}
 .sdb__b strong{font-size:1.2rem}
 .sdb__b em{font-size:1.8rem}
 .sdb__go{width:52px;height:52px}

 /* 左右の余白24pxを足した幅にして、中身の左端を見出し（1120px）にそろえる */
 .sres{max-width:1168px;margin:0 auto;padding:32px 24px 6px}
 .sbar{flex-wrap:nowrap}
 .sfil{flex:1 1 auto;margin:0;padding:0;flex-wrap:wrap}
 .slist{grid-template-columns:repeat(3,1fr);gap:26px 22px}
 .sitem{grid-template-columns:1fr;gap:10px;padding:0;border:0;align-items:start}
 .sitem__th{border-radius:14px}
 .sitem--top{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
 .sitem--top .sitem__t{font-size:1.4rem}
 .smore{max-width:420px;margin:30px auto 0}
 .snote{max-width:1120px;margin:30px auto 0;padding:0 24px}
}

/* ── 記事一覧：上部（検索結果の .sh を流用し、色だけ一覧ごとに変える） ── */
.sh--list .sh__q i{color:var(--lc,var(--o))}
.sh--list .sh__en{color:var(--lc,var(--o))}

/* ── 固定ページ ──
   見出しは長い言葉（プライバシーポリシー）が1語なので、検索結果と同じ大きさだと途中で折れる。少し小さくする */
.sh--page .sh__q{font-size:1.5rem}

/* ── 子テーマで足したもの（2026-10-21）──
   本番の検索結果は WordPress のページ送り（1ページ10件、§6-5）。種類と並び順はリンクで切り替える。
   ページ送りは「もっと見る」（.smore）と同じ淡い地の丸にそろえる */
.spager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:22px 0 0}
.spager .page-numbers{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
 border-radius:999px;background:var(--paper);font-family:var(--en);font-weight:600;font-size:.86rem;color:var(--ink)}
.spager .page-numbers.current{background:var(--ink);color:#fff}
.spager .page-numbers.dots{background:transparent;min-width:20px;padding:0}
.spager .prev,.spager .next{font-family:var(--jp);font-size:.78rem;font-weight:700}

/* ===== r-page.css ===== */
/* 試作 _proto/top-renewal-2026-10-18 の CSS から _port_css.py で移したもの（2026-10-21）。
   ここからは、このファイルを直接編集する。結合は scripts/build-lp-css.sh */
.pg{padding:26px 16px 10px}
.pg__toc{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.pg__toc a{font-size:.74rem;font-weight:700;color:var(--ink);background:#fff;border:1px solid #E6DED6;border-radius:999px;
 padding:7px 12px}
.pg__toc a:hover{color:var(--o-dk);border-color:#FFD9BE}
.prose{font-size:.9rem;line-height:1.95;color:#3A3330}
.prose h2{position:relative;margin:34px 0 12px;padding:0 0 0 14px;font-size:1.08rem;font-weight:900;line-height:1.5;
 scroll-margin-top:84px}
.prose h2::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:5px;border-radius:3px;background:var(--o)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.3em}
.prose li{margin:4px 0}
.prose li::marker{color:var(--o)}
.prose a{color:var(--o-dk);text-decoration:underline;text-underline-offset:3px}
.prose hr,.prose .wp-block-separator{border:0;height:1px;background:var(--line);margin:26px 0}
.pg__upd{margin:28px 0 0;font-size:.74rem;color:#746B66}

@media (min-width:768px){
 .pg{max-width:820px;margin:0 auto;padding:40px 24px 20px}
 .prose{font-size:.98rem}
}

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