/* =====================================================================
   LIBERATOR 2026 — main.css
   モック 3 ファイルの <style> を統合（SPEC.md §3）
   1) トップ: LIBERATOR_サイトリニューアル_モック.html <style>（3〜275 行）全移植
   2) 下層:  LIBERATOR_下層ページ_モック.html の差分
   3) BAR:   LIBERATOR_BAR予約ページ_モック.html の差分（.bar-hero スコープ / SPEC §9）
   z-index 階層（厳守 / SPEC §3）:
     header.site=20 / .mnav=19 / .stickycta=18 / .nl-panel=9999（.lchat/.nl-in=2）
     hero 内: .hgrad=2 / .scan=3 / .content=5 / .cue=6 / .semcard.next::before=3
   画像パス変換: CSS 内の url() は本ファイル（assets/css/）からの相対参照
     → url(../img/xxx.jpg) が <theme>/assets/img/xxx.jpg に解決される。
   ===================================================================== */

/* ============ 1. トップページモック <style> 全移植 ============ */
:root{--bg:#F3F2F0;--ink:#3a3a38;--head:#111;--sub:#9a968e;--accent:#3872B8;--line:#e5e3de;--green:#06C755;--footer:#00260C;
--font:Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
.wrap{max-width:880px;margin:0 auto;padding:0 28px}
a{color:var(--accent);text-decoration:none}a:hover{opacity:.7}
.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:20px;font-weight:700}
h2{font-size:27px;font-weight:700;color:var(--head);letter-spacing:.02em;line-height:1.4}
p.lead{margin-top:18px;font-size:16px;color:#4a4a47;max-width:620px;line-height:1.95}

header.site{background:var(--bg);border-bottom:1px solid var(--line);padding:18px 0;position:relative;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between}
header .logo img{height:38px;width:auto;display:block;mix-blend-mode:multiply}
nav a{color:var(--head);font-size:12.5px;margin-left:24px;letter-spacing:.03em}nav a:hover{color:var(--accent);opacity:1}
/* WP の wp_nav_menu は <li> を出力する（items_wrap で <ul> は抑止済み）。
   モックのフラットな <nav><a>…</a></nav> と同じ見た目にするため、li を横並び・マーカー無しにする。 */
header.site nav{display:flex;align-items:center;list-style:none;margin:0;padding:0}
header.site nav li{list-style:none;margin:0;padding:0;display:inline-flex}
header.site nav li::marker{content:none}
footer.site-footer .fnav{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
footer.site-footer .fnav li{list-style:none;margin:0;padding:0;display:inline-flex}
.mnav li{list-style:none;margin:0;padding:0;display:block}

.hero{position:relative;height:92vh;min-height:580px;overflow:hidden;background:#000}
.stage{position:absolute;inset:0;animation:jolt 8.5s steps(1,end) infinite}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@keyframes jolt{0%,96%{transform:none;filter:none}96.5%{transform:translate(-4px,1px);filter:hue-rotate(18deg) contrast(1.12)}97%{transform:translate(5px,-1px)}97.5%{transform:none}98%{transform:translate(2px,0);filter:invert(.03)}98.4%{transform:none}}
.scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);mix-blend-mode:multiply;opacity:.45;animation:flick 3.4s steps(2,end) infinite}
@keyframes flick{0%,100%{opacity:.45}50%{opacity:.3}}
.hgrad{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,.03) 42%,rgba(0,10,4,.8))}
.hero .content{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;padding:0 7vw 9vh;max-width:1040px;color:#fff}
.hero .eyebrow{color:#fff;opacity:.8;margin-bottom:18px}
.hero h1{font-size:clamp(30px,5vw,62px);line-height:1.36;font-weight:700;letter-spacing:.05em;text-shadow:0 2px 24px rgba(0,0,0,.5);word-break:keep-all;line-break:strict}
.hero h1 .g{position:relative}
.hero h1 .g::before,.hero h1 .g::after{content:"個";position:absolute;left:0;top:0;opacity:.5}
.hero h1 .g::before{color:#ff3b3b;animation:s1 2.6s steps(2,end) infinite;clip-path:inset(0 0 55% 0)}
.hero h1 .g::after{color:#3bd6ff;animation:s2 3.1s steps(2,end) infinite;clip-path:inset(55% 0 0 0)}
@keyframes s1{0%,100%{transform:none}50%{transform:translate(-3px,0)}}@keyframes s2{0%,100%{transform:none}50%{transform:translate(3px,0)}}
.hero .sub{margin-top:22px;font-size:clamp(13px,1.35vw,15.5px);line-height:2.05;max-width:780px;color:#eeede8;text-shadow:0 1px 12px rgba(0,0,0,.6);line-break:strict;letter-spacing:.02em}

section{padding:88px 0;border-bottom:1px solid var(--line)}
ul.benefits{list-style:none;margin:28px 0}
ul.benefits li{padding:14px 0 14px 22px;position:relative;border-top:1px solid var(--line);font-size:15.5px;color:#3a3a38;letter-spacing:.02em}
ul.benefits li:first-child{border-top:none}ul.benefits li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:1px;background:var(--accent)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:2px;font-weight:700;font-size:14.5px;letter-spacing:.03em;text-decoration:none;transition:.2s}
.btn.mail{background:var(--head);color:#fff}.btn.mail:hover{background:var(--accent);opacity:1}
.btn.line{background:transparent;color:var(--head);border:1px solid #cfcdc7}.btn.line:hover{border-color:var(--green);color:var(--green);opacity:1}
.latest{margin-top:10px;display:flex;gap:26px;align-items:center;padding:6px 0}
.latest img{width:200px;height:120px;object-fit:cover;border-radius:2px;flex:none;filter:saturate(.9)}
.latest .badge{display:inline-block;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.latest h3{font-size:18px;color:var(--head);margin:10px 0 6px;font-weight:700;line-height:1.5}
.latest p{font-size:14px;color:#6a665e;line-height:1.8}
.latest a{font-size:13px;display:inline-block;margin-top:12px;letter-spacing:.04em}
.auto-tag{color:var(--sub);font-size:11.5px;margin-top:20px;letter-spacing:.02em}
.themes{color:#6a665e;font-size:14px;margin-top:14px;line-height:1.9}.themes b{color:var(--head);font-weight:700}
.spotify{margin-top:0}
.epigrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px;align-items:start}
.epilist{display:flex;flex-direction:column}
.epi{display:block;padding:15px 4px;border-top:1px solid var(--line);color:#3a3a38;font-size:14.5px;line-height:1.5;cursor:pointer;transition:color .2s}
.epilist .epi:first-child{border-top:none}
.epi:hover{color:var(--accent);opacity:1}
.epi.on{color:var(--accent)}
.epi .epn{color:var(--sub);font-size:12px;font-weight:700;letter-spacing:.05em;margin-right:9px}
.epi.on .epn{color:var(--accent)}
.epi .eps{display:block;color:#8a867e;font-size:11.5px;margin-top:4px;letter-spacing:.02em}
.epilist{max-height:588px;overflow-y:auto;padding-right:14px;scrollbar-width:thin;scrollbar-color:#cfcdc7 transparent}
.epilist::-webkit-scrollbar{width:6px}.epilist::-webkit-scrollbar-thumb{background:#d5d3cd;border-radius:3px}.epilist::-webkit-scrollbar-track{background:transparent}
.epgrp{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);font-weight:700;padding:22px 4px 9px;border-top:1px solid var(--line)}
.epgrp:first-child{border-top:none;padding-top:2px}
.epgrp+.epi{border-top:none}
.epigrid .spotify{position:sticky;top:24px}
.epicount{color:var(--sub);font-size:11.5px;margin-top:14px;letter-spacing:.04em}
/* year tabs */
.ny-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.ny-tab{padding:9px 18px;border:1px solid var(--line);border-radius:22px;background:transparent;color:#6a665e;font-size:12.5px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:.22s;font-family:var(--font)}
.ny-tab:hover{border-color:var(--accent);color:var(--accent)}
.ny-tab.on{background:var(--head);border-color:var(--head);color:#fff}
.ny-count{margin-top:12px;color:var(--sub);font-size:11.5px;letter-spacing:.04em}
.ln-grid{min-height:120px}
.ln-grid:empty::after{content:"";display:block}
@media(max-width:640px){.ny-tab{padding:8px 14px;font-size:12px}}
/* LINE backnumber teaser */
.ln-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.ln-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.ln-card:hover{box-shadow:0 12px 34px rgba(0,0,0,.07);transform:translateY(-2px)}
.ln-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c1a10}
.ln-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.ln-thumb.ph{display:flex;align-items:flex-end;background:linear-gradient(150deg,#14361f,#00260C)}
.ln-thumb.ph::before{content:"✉";position:absolute;top:13px;right:15px;color:#eafaf0;opacity:.32;font-size:17px}
.ln-thumb .ph-d{color:#cfe6d6;font-size:11px;letter-spacing:.14em;padding:14px 16px;opacity:.9}
.ln-in{position:relative;padding:17px 20px 22px;flex:1;min-height:154px;overflow:hidden}
.ln-in-min{min-height:0;display:flex;align-items:center;justify-content:space-between;padding:15px 18px}
.ln-in-min .ln-hint{position:static;opacity:.85;transform:none}
.ln-date{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em}
.ln-ttl{font-size:15.5px;color:var(--head);font-weight:700;margin:9px 0 11px;line-height:1.55}
.ln-body{font-size:12.5px;color:#6a665e;line-height:1.9;letter-spacing:.01em}
.ln-more{color:var(--sub)}
.ln-fade{position:absolute;left:0;right:0;bottom:0;height:66px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 80%);pointer-events:none}
.ln-cta{margin-top:38px;background:linear-gradient(135deg,#0d3320,#00260C);border-radius:4px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px}
.ln-cta .t{color:#eafaf0;font-size:18px;font-weight:700;line-height:1.6;letter-spacing:.02em}
.ln-cta .s{color:#9ec4ac;font-size:13px;margin-top:8px;line-height:1.8;letter-spacing:.02em}
.ln-cta .btn.line2{background:var(--green);color:#fff;border:none;padding:16px 34px;white-space:nowrap}
.ln-cta .btn.line2:hover{opacity:.88;color:#fff}
.semgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.semcover{position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden;border:1px solid var(--line);background:#0c1a10}
.semcover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform .5s ease}
.semcard:hover .semcover img{transform:scale(1.04)}
.semcover.ph{background:linear-gradient(140deg,#123322,#00260C)}
.semcover .vm{position:absolute;right:12px;top:12px;color:#eafaf0;font-size:10px;letter-spacing:.1em;font-weight:700;opacity:.9;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.semcard.soon .semcover.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#12261a,#00260C)}
.semcard.soon .semcover.ph::after{content:"";position:absolute;inset:8px;border:1px dashed rgba(255,255,255,.16);border-radius:2px}
.semcover .soonlabel{color:#8fae98;font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase}
.semcard.soon .t.sub{color:var(--sub);font-weight:400;font-size:12.5px}
.semcard.next .semcover.ph{background:linear-gradient(150deg,#1c4a2e,#063a1c)}
.semcard.next .soonlabel{color:#eafaf0}
.semcard.next .semcover.ph::after{border-color:rgba(120,220,150,.4)}
.semcard.next::before{content:"NEXT";position:absolute;z-index:3;top:-8px;left:12px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;padding:3px 9px;border-radius:2px}
.semcard{position:relative}
.semcard.soon{opacity:.9}
.semcover .vv{position:absolute;left:14px;top:12px;color:#eafaf0;font-size:11px;letter-spacing:.18em;font-weight:700;opacity:.92;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.semcard .t{font-size:14.5px;font-weight:700;color:var(--head);margin-top:14px;line-height:1.5}
.semcard .s{font-size:12.5px;color:#6a665e;margin-top:6px;line-height:1.7}
.semmore{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1px dashed #cfcdc7;border-radius:2px;color:var(--sub);font-size:12px;letter-spacing:.12em}
/* View of the World */
.blog{padding:88px 0;border-bottom:1px solid var(--line)}
.vwgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;margin-top:38px}
.vw-card{display:block;color:inherit;text-decoration:none}
.vw-card:hover{opacity:1}
.vw-img{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:#0c1a10}
.vw-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.vw-card:hover .vw-img img{transform:scale(1.07);filter:saturate(1) brightness(.72)}
.vw-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(to top,rgba(0,20,8,.82),rgba(0,20,8,.15) 55%,transparent);opacity:0;transition:opacity .45s}
.vw-card:hover .vw-ov{opacity:1}
.vw-ex{color:#f2f5f0;font-size:12.5px;line-height:1.85;letter-spacing:.01em;transform:translateY(8px);transition:transform .45s}
.vw-card:hover .vw-ex{transform:none}
.vw-read{display:inline-block;margin-top:12px;color:#8fdcae;font-size:11.5px;font-weight:700;letter-spacing:.08em;transform:translateY(8px);transition:transform .45s .05s}
.vw-card:hover .vw-read{transform:none}
.vw-meta{display:flex;align-items:center;gap:12px;margin-top:14px}
.vw-date{color:var(--sub);font-size:11px;letter-spacing:.06em}
.vw-cat{color:var(--accent);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.vw-ttl{font-size:16px;font-weight:700;color:var(--head);margin-top:8px;line-height:1.5;letter-spacing:.01em;transition:color .25s}
.vw-card:hover .vw-ttl{color:var(--accent)}
.vw-more{margin-top:40px;text-align:center}
.vw-more a{font-size:13px;letter-spacing:.06em;font-weight:700}
@media(max-width:900px){.vwgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vwgrid{grid-template-columns:1fr}}
.network{padding:74px 0;border-bottom:1px solid var(--line)}
.netintro{max-width:640px;margin-top:16px;color:#4a4a47;font-size:15px;line-height:2}
.netintro b{color:var(--head);font-weight:700}
.netgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;max-width:680px}
.netcard{display:block;border-radius:2px;overflow:hidden;transition:opacity .3s}
.netcard:hover{opacity:.82}
.netcard img{width:100%;height:auto;display:block}
.blog{padding:72px 0}.blog h3.sec{font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:24px}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blogitem img{width:100%;height:auto;border-radius:2px;display:block;filter:saturate(.92)}.blogitem .ttl{font-size:15px;font-weight:700;color:var(--head);margin-top:14px;line-height:1.5}.blogitem .cat{font-size:10.5px;color:var(--accent);margin-top:8px;letter-spacing:.14em;text-transform:uppercase}
footer.site-footer{background:var(--footer);color:#b9c3b9;padding:56px 0}
footer.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
footer.site-footer .fnav a{color:#b9c3b9;font-size:12px;margin-left:22px;letter-spacing:.03em}
footer.site-footer .copy{font-size:11px;color:#6f8570;width:100%;text-align:center;margin-top:30px;letter-spacing:.04em}
footer.site-footer .logo{display:inline-block;background:transparent}
footer.site-footer .logo img{height:30px;filter:invert(1) brightness(1.7) contrast(1.05);mix-blend-mode:screen;opacity:.92}
.ln-card{cursor:pointer;outline:none}
.ln-card:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.ln-hint{position:absolute;right:16px;bottom:14px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);opacity:0;transform:translateY(3px);transition:.28s}
.ln-card:hover .ln-hint,.ln-card:focus-visible .ln-hint{opacity:1;transform:none}
.ln-thumb img{transition:transform .6s ease}
.ln-card:hover .ln-thumb img{transform:scale(1.045)}
/* reading panel */
.nl-panel{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:5vh 4vw}
.nl-panel.on{display:flex}
.nl-back{position:absolute;inset:0;background:rgba(12,14,12,.62);backdrop-filter:blur(3px);animation:nlf .3s ease}
@keyframes nlf{from{opacity:0}to{opacity:1}}
.nl-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);width:min(1020px,100%);max-height:90vh;background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:nlu .34s cubic-bezier(.2,.8,.2,1)}
@keyframes nlu{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.nl-img{background:#0c1a10;overflow:hidden}
.nl-img img{width:100%;height:100%;object-fit:cover;display:block}
.nl-txt{display:flex;flex-direction:column;min-height:0}
.nl-head{padding:30px 34px 16px;border-bottom:1px solid var(--line);flex:none}
.nl-d{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em}
.nl-t{font-size:21px;font-weight:700;color:var(--head);line-height:1.5;margin-top:9px;letter-spacing:.01em}
.nl-scroll{overflow-y:auto;padding:24px 34px 30px;flex:1;scrollbar-width:thin;scrollbar-color:#d5d3cd transparent}
.nl-scroll::-webkit-scrollbar{width:6px}.nl-scroll::-webkit-scrollbar-thumb{background:#d5d3cd;border-radius:3px}
.nl-scroll p{font-size:14px;line-height:2.05;color:#43423f;margin:0 0 15px;letter-spacing:.01em}
.nl-scroll p:last-child{margin-bottom:0}
.nl-scroll a{word-break:break-all;font-size:13px}
.nl-foot{flex:none;border-top:1px solid var(--line);background:#faf9f7;padding:18px 34px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nl-foot .f{font-size:12.5px;color:#6a665e;letter-spacing:.02em}
.nl-foot .btn{padding:12px 24px;font-size:13px;background:var(--green);color:#fff;border:none}
.nl-foot .btn:hover{opacity:.88;color:#fff}
.nl-x{position:absolute;top:12px;right:14px;z-index:3;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#333;font-size:19px;line-height:1;cursor:pointer;transition:.2s}
.nl-x:hover{background:#fff;transform:rotate(90deg)}
@media(max-width:820px){.nl-in{grid-template-columns:1fr;max-height:88vh}.nl-img{height:180px}}
/* ---- locked cards ---- */
.ln-card.lock .ln-thumb img{filter:saturate(.3) brightness(.68)}
.ln-lockbadge{position:absolute;top:10px;left:10px;z-index:2;padding:5px 10px;border-radius:20px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em}
.ln-card.lock .ln-body{filter:blur(3px);opacity:.55;user-select:none}
.ln-card.lock .ln-hint{color:var(--green)}
/* ---- LINE talk view ---- */
.lchat{position:relative;z-index:2;display:flex;flex-direction:column;width:min(430px,100%);height:min(770px,90vh);background:#8fa8c0;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45);animation:nlu .34s cubic-bezier(.2,.8,.2,1)}
.lc-bar{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f7f8f9;border-bottom:1px solid #e4e7e9}
.lc-bar .av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center 22%}
.lc-bar .nm{font-size:14px;font-weight:700;color:#1a1a1a;letter-spacing:.02em}
.lc-x{margin-left:auto;width:30px;height:30px;border:none;background:none;font-size:20px;color:#777;cursor:pointer;border-radius:50%;transition:.2s}
.lc-x:hover{background:#e9ebed;color:#111}
.lc-body{flex:1;overflow-y:auto;padding:16px 12px 24px;-webkit-overflow-scrolling:touch}
.lc-body::-webkit-scrollbar{width:5px}.lc-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:3px}
.lc-day{display:table;margin:2px auto 18px;padding:4px 13px;border-radius:11px;background:rgba(0,0,0,.16);color:#fff;font-size:11px;letter-spacing:.05em}
.lc-row{display:flex;gap:8px;margin-bottom:11px;align-items:flex-end}
.lc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;align-self:flex-start}
.lc-av.hide{visibility:hidden}
.lc-col{min-width:0;max-width:80%}
.lc-nm{font-size:11px;color:rgba(255,255,255,.95);margin:0 0 5px 2px;letter-spacing:.02em}
.lc-msg{display:flex;align-items:flex-end;gap:5px}
.lc-bub{background:#fff;border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:13.5px;line-height:1.9;color:#1e1e1e;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.06);letter-spacing:.01em}
.lc-bub a{color:#2a6ebb;word-break:break-all}
.lc-imgb{border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lc-imgb img{display:block;width:100%;height:auto}
.lc-t{font-size:10px;color:rgba(255,255,255,.85);flex:none;padding-bottom:3px;white-space:nowrap}
.lc-blur{filter:blur(6px);opacity:.7;pointer-events:none;user-select:none}
.lc-gate{margin:16px 6px 4px;background:rgba(255,255,255,.97);border-radius:14px;padding:24px 22px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.lc-gate .g1{font-size:14.5px;font-weight:700;color:#111;letter-spacing:.02em;line-height:1.6}
.lc-gate .g2{font-size:12px;color:#6a665e;margin-top:9px;line-height:1.85}
.lc-gate .btn{margin-top:17px;width:100%;justify-content:center;background:var(--green);color:#fff;border:none;padding:14px}
.lc-gate .btn:hover{opacity:.88;color:#fff}
.lc-foot{flex:none;background:#f7f8f9;border-top:1px solid #e4e7e9;padding:11px 14px;display:flex;align-items:center;gap:10px}
.lc-foot .f{font-size:11.5px;color:#6a665e;line-height:1.6}
.lc-foot .btn{margin-left:auto;padding:11px 18px;font-size:12.5px;background:var(--green);color:#fff;border:none;white-space:nowrap}
.lc-foot .btn:hover{opacity:.88;color:#fff}
@media(max-width:640px){.nl-panel{padding:0}.lchat{width:100%;height:100%;max-height:none;border-radius:0}.lc-col{max-width:82%}}
/* ============ polish: UI/UX ============ */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
header.site{position:sticky;top:0;background:rgba(243,242,240,.85);backdrop-filter:saturate(1.3) blur(12px);transition:padding .35s,box-shadow .35s}
header.site.small{padding:11px 0;box-shadow:0 1px 14px rgba(0,0,0,.06)}
header.site.small .logo img{height:30px}
h2{font-size:clamp(25px,2.7vw,34px)}
p.lead{max-width:34em}
.btn{will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* hero CTA + scroll cue */
.hcta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hcta .btn{padding:16px 32px}
.hcta .b1{background:#fff;color:#111}
.hcta .b1:hover{background:var(--accent);color:#fff;opacity:1}
.hcta .b2{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.hcta .b2:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;opacity:1}
.cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.55);font-size:9.5px;letter-spacing:.26em;writing-mode:vertical-rl;text-align:center}
.cue::after{content:"";display:block;width:1px;height:32px;margin:12px auto 0;background:linear-gradient(to bottom,rgba(255,255,255,.75),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
/* scroll reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* mobile nav + sticky CTA */
.burger{display:none;background:none;border:none;cursor:pointer;padding:7px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--head);transition:.3s}
.burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{display:none}
.stickycta{display:none}
@media(max-width:640px){
 .burger{display:flex}
 .mnav{display:block;position:fixed;left:0;right:0;top:60px;bottom:0;z-index:19;background:var(--bg);padding:22px 28px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.32s;overflow-y:auto}
 .mnav.on{opacity:1;transform:none;pointer-events:auto}
 .mnav a{display:block;padding:17px 2px;border-bottom:1px solid var(--line);color:var(--head);font-size:15px;letter-spacing:.05em}
 .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:18;gap:8px;padding:10px 12px;background:rgba(243,242,240,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
 .stickycta .btn{flex:1;justify-content:center;padding:14px 6px;font-size:12.5px;margin:0}
 body{padding-bottom:68px}

 .hcta .btn{flex:1;justify-content:center;padding:15px 10px;font-size:13.5px}
 section{padding:64px 0}
}
@media(max-width:640px){.semgrid,.bloggrid,.netgrid,.epigrid,.ln-grid{grid-template-columns:1fr}nav{display:none}.latest{flex-direction:column;align-items:flex-start}.latest img{width:100%;height:auto}.epilist{max-height:none}.epigrid .spotify{position:static}.ln-cta{padding:30px 26px}}
@media(prefers-reduced-motion:reduce){.stage,.scan,.hero h1 .g::before,.hero h1 .g::after{animation:none}.bg{display:none}.stage{background:#000 url(../img/poster.jpg) center/cover}}

/* =====================================================================
   2. 下層ページモック差分（concept / coaching / profile / contact）
   ・:root / body / header.site / nav a / footer.site-footer / .network 系の
     重複セレクタはトップ版に統合済み（SPEC §3「重複セレクタは統合」）
   ・下層モックの .btn はトップの .btn と定義が異なるため article .btn に
     スコープ（page.php 本文内の CTA・送信ボタンは article.col 内にある）
   ===================================================================== */
.col{max-width:680px}
.pagenote{background:#eef1f6;border-bottom:1px dashed var(--accent);color:var(--accent);font-size:12px;text-align:center;padding:8px}
.phead{padding:80px 0 8px}
/* .t は h1。ブラウザ既定の margin/font-size を打ち消し、div 時代の見た目を維持する */
.phead .t{margin:0;font-size:34px;font-weight:700;color:var(--head);letter-spacing:.03em;line-height:1.35}
.phead .en{color:var(--sub);font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-top:14px}
.pimg{width:100%;height:auto;border-radius:2px;display:block;margin:34px 0 8px;filter:saturate(.94)}
.pimg.narrow{max-width:520px;mix-blend-mode:multiply}
article{padding:24px 0 90px;border-bottom:1px solid var(--line)}
article p{margin:0 0 26px;font-size:16px;line-height:2.05;color:#43423f}
article .lead{font-size:19px;line-height:1.9;color:#222;font-weight:700;margin-bottom:34px}
article h3{font-size:13px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin:44px 0 18px;text-transform:uppercase}
article .rule{width:40px;height:1px;background:#c9c7c1;margin:0 0 30px}
.pagebreak{height:1px;background:var(--line)}
/* coaching structured */
.meta-list{border-top:1px solid var(--line);margin-top:10px}
.meta-list .row{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}
.meta-list .k{flex:none;width:130px;color:var(--sub);font-size:12px;letter-spacing:.1em;padding-top:2px}
.meta-list .v{color:#43423f;line-height:1.9}
/* contact form */
.form{margin-top:20px}
.field{margin-bottom:20px}
.field label{display:block;font-size:12px;letter-spacing:.08em;color:#6a665e;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:2px;padding:13px 14px;font-family:var(--font);font-size:15px;color:var(--ink)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.email-line{font-size:17px;color:var(--head);margin:6px 0 30px;font-weight:700}
article .btn{display:inline-flex;align-items:center;padding:15px 40px;border-radius:2px;font-weight:700;font-size:14.5px;letter-spacing:.04em;background:var(--head);color:#fff;border:none;cursor:pointer;margin-top:8px}
article .btn:hover{background:var(--accent)}
@media(max-width:640px){.field.two,.netgrid{grid-template-columns:1fr}.phead .t{font-size:27px}}

/* =====================================================================
   3. BAR 予約ページモック差分
   ・hero はトップの .hero（動画 hero）と衝突しないよう .bar-hero にスコープ
     （page-bar.php は <div class="hero bar-hero"> / SPEC §9）
   ・.wrap 760px は BAR テンプレートの body class にスコープ
   ・.form / .field / .btn は下層版と定義が異なるため .reserve にスコープ
   ===================================================================== */
.page-template-page-bar .wrap{max-width:760px}
.bar-hero{height:auto;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;background:#0a0704}
/* SPEC §3: url(bar_hero.jpg) → <theme>/assets/img/bar_hero.jpg（CSS 相対で解決） */
.bar-hero .bg{position:absolute;inset:0;background:url(../img/bar_hero.jpg) center 42%/cover;filter:brightness(.74) saturate(1) contrast(1.02)}
.bar-hero .grd{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(10,7,4,.15) 42%,rgba(6,5,3,.92))}
.bar-hero .content{position:relative;inset:auto;z-index:2;display:block;color:#fff;padding:0 7vw 9vh;max-width:840px}
.bar-hero .eyebrow{color:#efe7d8;opacity:.85;margin-bottom:16px}
.bar-hero h1{font-size:clamp(28px,4.6vw,50px);font-weight:700;line-height:1.28;letter-spacing:.02em;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.bar-hero .meta{margin-top:20px;font-size:13px;letter-spacing:.08em;color:#e6ddcd;opacity:.92}
/* reduced-motion 時、トップ用の .bg{display:none}（動画非表示）が BAR の背景 div に波及しないよう戻す */
@media(prefers-reduced-motion:reduce){.bar-hero .bg{display:block}}
/* letter */
.letter{padding:82px 0 20px}
.letter .lead{font-size:19px;line-height:1.9;color:#222;font-weight:700;margin-bottom:34px}
.letter p{margin:0 0 24px;color:#43423f;line-height:2.1;font-size:16px}
.letter .sig{margin-top:32px;font-size:14px;color:var(--sub);letter-spacing:.06em}
.letter .sig b{color:var(--head);font-weight:700;letter-spacing:.03em}
.rule{width:40px;height:1px;background:#cbc9c3;margin:40px 0}
/* details */
.details{margin:8px 0 10px;border-top:1px solid var(--line)}
.details .row{display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}
.details .k{flex:none;width:120px;color:var(--sub);font-size:12px;letter-spacing:.1em;padding-top:2px}
.details .v{color:#43423f}.details .v b{color:var(--head)}
/* reserve */
.reserve{padding:70px 0 90px;border-top:1px solid var(--line);margin-top:64px}
.reserve h2{font-size:22px;font-weight:700;color:var(--head);letter-spacing:.02em;margin-top:14px}
.reserve .lead{color:#4a4a47;margin-top:12px;font-size:15px}
.reserve .form{margin-top:30px;max-width:520px}
.reserve .field{margin-bottom:18px}
.reserve .field label{display:block;font-size:12px;letter-spacing:.08em;color:#6a665e;margin-bottom:8px}
.reserve .field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px 15px;font-family:var(--font);font-size:15px;color:var(--ink)}
.reserve .btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:520px;padding:17px;border-radius:2px;font-weight:700;font-size:15px;letter-spacing:.06em;background:var(--head);color:#fff;border:none;cursor:pointer;margin-top:8px}
.reserve .btn:hover{background:var(--accent)}
.reserve .note{color:var(--sub);font-size:12px;margin-top:18px;line-height:1.85}
@media(max-width:640px){.details .row{flex-direction:column;gap:4px}.details .k{width:auto}}

/* ============================================================
   BAR 完了ページ（サンキュー）— page-templates/page-thanks-*.php
   マイスピーの条件分岐から飛んでくるページ。
   マイスピー側の完了ページと同じ設え（.thanks 相当）をテーマ内に持つ。
   ============================================================ */
.thx{padding:74px 0 96px}
.thx__eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;margin-bottom:24px}
.thx__title{color:var(--head);font-size:26px;font-weight:700;line-height:1.62;letter-spacing:.035em;margin-bottom:46px}
.thx p{margin-bottom:26px;font-size:15.5px;line-height:2.0;color:var(--ink)}
.thx__box{margin:40px 0 0;padding:28px 30px;background:#faf9f7;border:1px solid var(--line);border-left:2px solid var(--accent)}
.thx__box .k{display:block;color:var(--head);font-size:11px;font-weight:700;letter-spacing:.16em;line-height:1.4;margin-bottom:14px}
.thx__box p{font-size:14.5px;line-height:1.95;color:#43423f;margin:0}
.thx__box a{color:var(--accent);border-bottom:1px solid rgba(56,114,184,.35)}
.thx__next{margin-top:54px;padding-top:36px;border-top:1px solid var(--line)}
.thx__next .lead{font-size:14.5px;color:#43423f;margin-bottom:18px;line-height:1.95}
.thx__next a{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--head);border-bottom:1px solid var(--head);padding-bottom:3px;transition:color .25s,border-color .25s}
.thx__next a:hover{color:var(--accent);border-color:var(--accent)}
.thx__note{margin-top:54px;font-size:12.5px;color:var(--sub);line-height:2.05}
.thx__note a{color:var(--sub);border-bottom:1px solid #d8d5ce}
.thx__note a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:640px){
  .thx{padding:52px 0 68px}
  .thx__title{font-size:21px;margin-bottom:36px}
  .thx__box{padding:22px 22px}
}

/* LINE 導線（thanks-bar-line）— スマホはボタン、PCはQRコード */
.thx__line{display:flex;align-items:flex-start;gap:34px;flex-wrap:wrap;margin-top:24px}
.thx__line-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 32px;background:var(--green);color:#fff;border-radius:2px;
  font-size:14.5px;font-weight:700;letter-spacing:.04em;border-bottom:none
}
.thx__line-btn:hover{opacity:.85;color:#fff;border-bottom:none}
.thx__line-qr{display:flex;align-items:center;gap:14px}
.thx__line-qr img{width:96px;height:96px;display:block;background:#fff;border:1px solid var(--line);padding:6px}
.thx__line-qr span{font-size:11.5px;color:var(--sub);line-height:1.85;letter-spacing:.02em}
@media(max-width:640px){
  .thx__line{gap:26px}
  .thx__line-btn{width:100%}
  .thx__line-qr img{width:82px;height:82px}
}

/* お問い合わせフォーム（page-contact.php）の補助 */
.field label .req,.field label .opt{
  display:inline-block;margin-left:8px;font-size:10px;font-weight:700;
  letter-spacing:.1em;padding:2px 7px;border-radius:2px;vertical-align:1px
}
.field label .req{background:#f3ece9;color:#a5544a}
.field label .opt{background:#efeeea;color:var(--sub)}
.field textarea{line-height:1.85;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8a867e 50%),linear-gradient(135deg,#8a867e 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.form .btn{margin-top:10px;border:none;cursor:pointer;font-family:var(--font)}
.formnote{margin-top:22px;font-size:12.5px;color:var(--sub);line-height:2.0}
.formnote a{color:var(--sub);border-bottom:1px solid #d8d5ce}
.formnote a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- モバイル：WPメニュー（header.site nav）を確実に隠す ----
   上部で header.site nav{display:flex} を指定しているため、
   モック側の @media 内 nav{display:none} より詳細度が高く、勝ってしまう。
   同じ詳細度以上で明示的に打ち消す。これが無いと 375px 幅で横スクロールが発生する。 */
@media(max-width:640px){
  header.site nav{display:none!important}
  header.site .wrap{gap:12px}
  .mnav{display:block}
}

/* ロゴのホバー：グローバルの a:hover{opacity:.7} が multiply 合成のロゴに効くと
   白く抜けたように見えて背景から浮く。ロゴはリンクだと分かる要素なので、ホバー変化を無効にする。 */
header.site .logo:hover,
footer.site-footer .logo:hover{opacity:1}
header.site .logo:hover img,
footer.site-footer .logo:hover img{opacity:1}

/* ============================================================
   2026-08-10 QA反映（森本さんレビュー分）
   ============================================================ */

/* ① ヘッダーナビ：英小文字・大文字・漢字が混在するため、中央揃えだと
   文字の「地面」が揃わず凸凹に見える。ベースライン揃えに変更する。 */
header.site nav{align-items:baseline}
header.site nav li{align-items:baseline}
header.site nav a{line-height:1.4;display:inline-block}

/* ② 最新の一通：サムネイル（配信画像）自体に文字が入っており、
   右のテキストタイトルと内容が二重になって見える。
   サムネは「受信した一通のアイコン」として小さな正方形に絞り、主役をテキスト側に渡す。 */
.latest img{width:118px;height:118px;object-fit:cover;object-position:top;border:1px solid var(--line)}

/* ④ 「バックナンバーを全部読む」：押せることが伝わりにくい。
   ホバーで塗り＋浮き＋矢印を出し、クリック可能であることをはっきり示す。 */
.ln-cta .btn.line2{position:relative;transition:.22s;padding-right:38px}
.ln-cta .btn.line2::after{content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:transform .22s}
.ln-cta .btn.line2:hover{background:var(--green);border-color:var(--green);color:#fff;opacity:1;transform:translateY(-2px);box-shadow:0 6px 18px rgba(6,199,85,.28)}
.ln-cta .btn.line2:hover::after{transform:translate(3px,-50%)}

/* ⑤ ゼミカード：ホバーしても中身が見られないことが伝わらない。
   開催済みカード（.soon 以外）にホバーで「資料は非公開」のオーバーレイを出す。 */
.semcard:not(.soon) .semcover{position:relative;cursor:default}
.semcard:not(.soon) .semcover::after{
  content:"講座資料は非公開です ─ 参加・詳細はお問い合わせへ";
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px;background:rgba(0,20,8,.78);color:#eafaf0;
  font-size:11.5px;line-height:1.9;letter-spacing:.06em;
  opacity:0;transition:opacity .3s;pointer-events:none}
.semcard:not(.soon):hover .semcover::after{opacity:1}

/* ============================================================
   2026-08-10 QA反映（第2弾 / 森本さんレビュー）
   ============================================================ */

/* ① ナビの和欧混植：同サイズでも漢字は大きく、英小文字は小さく見える。
   高さを固定した箱の中で中央に揃え、日本語だけわずかに小さくして字面を合わせる。 */
header.site nav{align-items:center}
header.site nav li{align-items:center}
header.site nav a{
  display:inline-flex;align-items:center;height:20px;
  line-height:1;font-size:12.5px;letter-spacing:.06em}
header.site nav a.cjk{font-size:11.5px;letter-spacing:.09em}
footer.site-footer .fnav a.cjk{font-size:11px}
.mnav a.cjk{font-size:14.5px}

/* ② ヘッダーが動画の上に重なったとき、半透明の背景に multiply が乗って
   ロゴが浮いて見える。スクロール中は背景を不透明にして、常に同じ面の上で合成させる。 */
header.site{background:var(--bg)}
header.site.small{background:var(--bg);backdrop-filter:none}

/* ③ ヘッダーのコンテナ幅はページによらず一定に。
   BARページは本文が760px幅だが、それがヘッダーにも効いてナビが2行に折り返していた。 */
.page-template-page-bar header.site .wrap,
.page-template-page-bar footer.site-footer .wrap{max-width:880px}

/* ④ 最新の一通：サムネは「届いた一通に添えられた写真」。
   テキストタイトルと役割が重ならないよう、正方形に絞って写真の中心を見せる。 */
.latest img{object-position:center}

/* ⑤ 「直近3通は全文公開しています。…」の視認性改善。
   濃緑の上で色が沈んでいたため、明度とサイズを上げる。 */
.ln-cta .s{color:#c6dfd0;font-size:13.5px;line-height:1.95}

/* ⑥ 世界の見え方：記事が0件のときの空状態を、他セクションと同じ「面」として見せる。
   本番では記事カードが並ぶため、この指定はステージング等の空状態にのみ効く。 */
.vw-empty{
  margin-top:30px;padding:56px 30px;text-align:center;
  background:#faf9f7;border:1px dashed #d8d5ce;border-radius:3px;
  color:var(--sub);font-size:14px;letter-spacing:.04em;line-height:2.0}

/* ============================================================
   2026-08-10 QA反映（第3弾 / モバイル）
   ============================================================ */

/* ① ロゴが浮いて見える（ヘッダー・フッター、特にモバイル）
   mix-blend-mode / filter が「ページ全体」を相手に合成されるため、
   下にある動画や別セクションの色を拾って浮いて見える。
   isolation:isolate で合成範囲をヘッダー／フッターの中だけに閉じる。 */
header.site{isolation:isolate}
footer.site-footer{isolation:isolate}

/* ② タップした瞬間に藍色になる（モバイル）
   モバイルOS既定のタップハイライトと、a:active の既定色が出ていた。
   ハイライトを消し、押した状態の見た目をPC版のホバーと揃える。 */
html{-webkit-tap-highlight-color:transparent}
a,button,input[type=submit],.btn,.ny-tab,.epi{-webkit-tap-highlight-color:transparent}
a:active,a:focus{color:inherit}
nav a:active,.mnav a:active,footer.site-footer .fnav a:active{color:var(--accent)}
.btn.mail:active{background:var(--accent);color:#fff}
.btn.line:active{border-color:var(--green);color:var(--green)}
.ln-cta .btn.line2:active{background:var(--green);color:#fff}
.form .btn.mail:active,.reserve .btn:active{background:var(--accent);color:#fff}
.thx__next a:active,.vw-more a:active{color:var(--accent)}

/* ③ モバイルでボタンの文字色が既定リンク色に引っ張られるのを防ぐ */
.btn.mail,.btn.mail:visited,.ln-cta .btn.line2,.ln-cta .btn.line2:visited{color:#fff}
.btn.line,.btn.line:visited{color:var(--head)}

/* お問い合わせフォーム（マイスピー iframe 埋め込み）
   クロスドメインのため中身の高さを測れない。項目6つ想定の固定高。
   マイスピー側の項目を増減したらここも見直すこと。 */
.cform{margin-top:34px}
.cform iframe{
  display:block;width:100%;height:1180px;border:0;overflow:hidden;
  background:transparent}
@media(max-width:640px){
  .cform iframe{height:1320px}
}

/* ── 短いページでフッターの下に余白が出ないようにする（2026-09-26）
   本文が画面より短いとき、フッターを画面の下端に揃える。 */
body{min-height:calc(100vh - var(--wp-admin--admin-bar--height,0px));display:flex;flex-direction:column}
body>*{flex-shrink:0}
footer.site-footer{margin-top:auto}

/* ── 2026-10-11 公開後の調整（森本さんの指摘） ─────────────── */

/* ① 全部大文字の項目（BAR THE LIBERATOR）が大きく見える → 少し小さく */
header.site nav a.caps{font-size:11px;letter-spacing:.06em}
footer.site-footer .fnav a.caps{font-size:10.5px}
.mnav a.caps{font-size:13px;letter-spacing:.06em}

/* ② フッターのロゴがスマホで浮く
   黒ロゴ（白背景つき）を反転＋スクリーン合成で白く見せていたが、
   iPhone の Safari では合成が効かず、背景の四角が出ることがある。
   最初から白い透過ロゴ（liber01-w.png）を使い、合成をやめる。
   白ロゴは画像の上下左右に余白があるので、そのぶん大きめに置いて詰める。 */
footer.site-footer .logo img{
  height:44px;width:auto;margin:-7px 0 -7px -4px;
  filter:none;mix-blend-mode:normal;opacity:.95}

/* ③ ラジオ：スマホではプレイヤーが一覧の一番下になり、選んでも音が出る場所が見えない
   → スマホではプレイヤーを一覧の上に置き、コンパクト表示にする。
     一覧は高さを区切ってスクロールさせる。 */
@media(max-width:640px){
  .epigrid{gap:18px}
  .epigrid .spotify{order:-1;position:sticky;top:64px;z-index:2;background:var(--bg);padding-bottom:6px}
  .epigrid .spotify iframe{height:152px}
  .epilist{max-height:420px;overflow-y:auto}
}

/* ④ スマホでセクションの上下の余白が長い → 少し詰める */
@media(max-width:640px){
  section{padding:48px 0}
}