/* =====================================================================
   ARIAKE v6（2026-09-29）
   しもつい便り p3（~/client-work/shimotsui/media_v6）の作りを7割、
   v5（動くアイコン・リンク行・会話形式の声）を3割で合わせた共通CSS。
   index.html と agents.html が読む。旧版は site_v5c_2026-09-29.bak.css。
   ===================================================================== */

/* ---------- 1. トークン（しもつい便り p3 の配色と書体をそのまま使う） ---------- */
:root{
  --ink:#10291E;          /* 深緑：ロゴの文字色 #092419 を本文用に少し明るく（2026-09-29 ロゴに寄せる） */
  --ink-2:#333;
  --mute:#5C6468;
  --paper:#F5F2EA;        /* 漆喰 */
  --white:#FFFDF8;        /* 写真上のラベル地 */
  --sea:#E8E7DB;          /* 帯：生成りを少し緑寄りに */
  --green:#23402F;        /* 濃い緑の帯・ボタン */
  --line:#C8CABA;         /* 髪罫・ピル枠 */
  --shu:#5E7A5E;          /* 苔色：ロゴの月と水面の色。ホバーと現在地（旧・朱） */
  --tile:#4A5A63;
  --sans:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;   /* 2026-09-29 ユーザー選択（15番） */
  --serif:var(--sans);
  --en:"futura-pt","Jost","Futura","Century Gothic",sans-serif;   /* 2026-09-29 localletter.jp（Futura LT Pro Bold）に合わせる。Adobe Fonts の futura-pt を読み込めば本物のFuturaになる */
  --fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-md:18px;--fs-lg:24px;--fs-xl:28px;--fs-2xl:40px;
  --wrap:960px;--col:680px;--wide:1206px;
}

/* ---------- 2. ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-base);line-height:1.8;font-feature-settings:"palt";overflow-wrap:anywhere}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{word-break:auto-phrase;text-wrap:balance;letter-spacing:.02em}
p,li{text-wrap:pretty}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:8px 16px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.col{width:min(var(--col),calc(100% - 40px));margin-inline:auto}
.wide{width:min(var(--wide),calc(100% - 40px));margin-inline:auto}

/* 左端の縦書きコピーライト */
.rail-copy{position:absolute;left:34px;top:260px;writing-mode:vertical-rl;font-family:var(--en);font-size:10px;font-weight:500;letter-spacing:.12em}

/* ---------- 3. ヘッダーと全画面メニュー ---------- */
.header{position:relative;height:120px;padding:34px 65px 0;z-index:30}
.header-desc{font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.5}
.header-logo{margin-top:0}
.header-logo a{display:inline-flex;align-items:baseline;gap:14px}
.header-logo-ja{font-size:30px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.header-logo-en{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.menu-btn{position:absolute;right:48px;top:33px;width:104px;height:50px;padding:15px;display:flex;flex-direction:column;justify-content:center;gap:9px;z-index:50}
.menu-btn-bar{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1){transform:translateY(5.5px) rotate(12deg)}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2){transform:translateY(-5.5px) rotate(-12deg)}
.site-menu{position:fixed;inset:0;background:var(--sea);z-index:40;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.site-menu.is-open{opacity:1;visibility:visible}
.site-menu-inner{width:min(760px,calc(100% - 40px));display:grid;grid-template-columns:1.3fr 1fr;gap:24px 60px;align-items:end}
.site-menu-cats li+li{margin-top:6px}
.site-menu-cats a{display:flex;align-items:baseline;gap:16px;font-size:var(--fs-base);font-weight:600;color:var(--green)}
.site-menu-cats .en{font-family:var(--en);font-size:40px;font-weight:700;line-height:1.15;color:var(--ink);min-width:5.4em}
.site-menu-cats a:hover .en{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.site-menu-sub{font-size:var(--fs-sm);font-weight:600}
.site-menu-sub li{border-top:1px solid var(--green)}
.site-menu-sub li:last-child{border-bottom:1px solid var(--green)}
.site-menu-sub a{display:block;padding:14px 0}

/* ---------- 4. 英字見出し（下線＋段ずらし） ---------- */
.en-title{font-family:var(--en);font-size:34px;font-weight:700;line-height:1.12;letter-spacing:.01em}
.en-title span{display:table;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.en-title span:nth-child(2){margin-left:1.6em}
.en-title span:nth-child(3){margin-left:3.2em}
.en-title--white{color:var(--paper)}
.en-sub{display:block;margin-top:12px;font-size:var(--fs-sm);font-weight:600}

/* ---------- 5. キービジュアル（雑誌の表紙型キャプション・3枚が切り替わる） ---------- */
.kv{position:relative;height:720px}
.kv-track{position:relative;height:100%}
.kv-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.kv-slide.is-active{opacity:1;pointer-events:auto}
.kv-image{position:absolute;left:14.1%;top:0;width:71.9%;height:100%;overflow:hidden;background:var(--ink)}
.kv-image>img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.kv-slide.is-active .kv-image>img{transform:scale(1.04)}
.kv-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 64%)}
.kv-cap{position:absolute;left:64px;right:64px;bottom:56px;color:#fff}
.kv-kicker{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:500;letter-spacing:.2em}
.kv-kicker-en{font-family:var(--en);letter-spacing:.3em;text-transform:uppercase}
.kv-kicker i,.kv-meta i{display:block;height:1px;background:#fff}
.kv-kicker i{flex:0 0 72px}
.kv-title{display:block;max-width:14em;margin-top:18px;font-size:56px;font-weight:700;line-height:1.25;letter-spacing:.02em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.kv-meta{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:15px;font-weight:500}
.kv-meta time,.kv-meta b{font-family:var(--en);font-size:17px;font-weight:500;letter-spacing:.12em}
.kv-meta i{width:28px}
.kv-meta-en{font-family:var(--en);font-size:11px;letter-spacing:.3em;opacity:.85;text-transform:uppercase}
.kv-dots{position:absolute;left:14.1%;bottom:-34px;display:flex}
.kv-dot{width:20px;height:20px;position:relative}
.kv-dot::before{content:"";position:absolute;left:6px;top:9px;width:8px;height:2px;background:#BDBDBD;transition:width .3s,background .3s}
.kv-dot[aria-current="true"]::before{width:14px;background:var(--ink)}
/* 1枚目：AIで動かしたアイコン（v5から引き継ぐ） */
.kv-avatar video{width:100%;height:100%;object-fit:cover}
.kv-ring{position:absolute;right:7%;top:50%;width:min(46%,400px);aspect-ratio:1;transform:translateY(-58%);border-radius:50%;border:1.5px solid rgba(245,242,234,.6);opacity:0;animation:wave 2.7s cubic-bezier(.2,.6,.3,1) infinite}
.kv-ring.r2{animation-delay:.9s}.kv-ring.r3{animation-delay:1.8s}
@keyframes wave{0%{transform:translateY(-58%) scale(1);opacity:.55}100%{transform:translateY(-58%) scale(1.35);opacity:0}}

/* ---------- 6. リンク行（v5のlit.link風の行を引き継ぐ） ---------- */
.links-sec{padding:110px 0 20px}
.links-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
.links-lead{margin-top:20px;font-size:var(--fs-sm);font-weight:600;line-height:1.9}
.score{margin-top:16px;font-size:var(--fs-sm)}
.score b{font-family:var(--en);font-size:var(--fs-xl);font-weight:700;margin:0 2px}
.links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.links a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:8px 18px;background:var(--white);border-bottom:2px solid var(--ink);transition:background .25s,color .25s}
.links a:hover{background:var(--ink);color:var(--paper)}
.links a:hover svg{fill:var(--paper)}
.links svg{width:22px;height:22px;fill:var(--ink)}
.links .t{font-weight:600;line-height:1.4}
.links .s{display:block;font-size:var(--fs-xs);font-weight:400;opacity:.8}
.links .go{font-family:var(--en);font-size:var(--fs-xs);letter-spacing:.1em}
.links .main{grid-column:1/-1}
.links .main a{background:var(--ink);color:var(--paper);min-height:76px}
.links .main svg{fill:var(--paper)}
.links .main a:hover{background:var(--shu)}
.links .is-pending{display:none}

/* ---------- 7. 作品（大2本は左右交互・中2本はずらす・右に縦書きのキャッチ） ---------- */
.features{position:relative;padding:120px 0 12px}
.features-head{position:relative;padding-bottom:36px}
.v-catch{position:absolute;right:-8px;top:150px;z-index:2;writing-mode:vertical-rl;font-weight:700;background:var(--paper);padding:8px 4px;white-space:nowrap}
.v-catch-sub{display:block;font-size:var(--fs-lg);line-height:1.5;padding-top:3px}
.v-catch-main{display:block;font-size:34px;line-height:1.4;padding-top:48px}
.feature{padding:50px 0 10px}
.feature--l{width:700px;max-width:73%}
.feature--r{width:735px;max-width:76.5%;margin-left:auto}
.feature-figure{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--ink)}
.feature--r .feature-figure{width:calc(100% - 40px);aspect-ratio:695/368}
.feature-figure>img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feature a:hover img,.feature-mid a:hover img{transform:scale(1.03)}
.feature a:hover .kv-title,.feature-mid a:hover .kv-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.feature .kv-cap{left:40px;right:40px;bottom:32px}
.feature .kv-title{margin-top:12px;max-width:none;font-size:var(--fs-2xl);line-height:1.3}
.feature-lead{margin-top:20px;padding-right:50px;font-size:var(--fs-sm);line-height:2;letter-spacing:.04em;color:var(--ink-2)}
.features-mid{display:flex;justify-content:space-between;padding:60px 0 70px}
.feature-mid{width:415px;max-width:47%}
.feature-mid:nth-child(2){margin-top:60px}
.feature-mid .feature-figure{aspect-ratio:415/260}
.feature-mid .kv-cap{left:24px;right:24px;bottom:20px}
.feature-mid .kv-title{margin-top:8px;max-width:none;font-size:var(--fs-lg);line-height:1.35}
.feature-mid .kv-kicker,.feature-mid .kv-meta{font-size:11px;gap:10px}
.feature-mid .kv-kicker i{flex-basis:36px}
.feature-mid .kv-meta{margin-top:10px}
.feature-mid .kv-meta b{font-size:13px}
.feature-mid .feature-lead{padding-right:0}

/* ---------- 8. サービスの帯（巨大な英字＋角丸の写真カード） ---------- */
.band{background:var(--sea);padding:110px 0 100px}
.band+.band{padding-top:40px}
.band-title{margin-bottom:45px}
.band-title-en{display:block;font-family:var(--en);font-size:127px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.band-title-ja{display:block;margin:10px 0 0 16px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;color:var(--green)}
.band-lead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:end;margin:-10px 0 40px 16px}
.band-lead .what{max-width:36em;font-size:var(--fs-base);line-height:1.9}
.band-lead .who{margin-top:6px;font-size:var(--fs-sm);color:var(--mute)}
.price{font-size:var(--fs-sm);font-weight:600;text-align:right}
.price b{display:block;font-family:var(--en);font-size:var(--fs-2xl);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.price b small{font-family:var(--sans);font-size:var(--fs-md)}
.post-list{display:flex;flex-wrap:wrap;margin:0 -8px}
.post{width:calc(33.333% - 16px);margin:0 8px 28px}
.post--wide{width:calc(66.666% - 16px)}
.post-link{position:relative;display:block}
.post-cat{position:absolute;left:20px;top:20px;z-index:1;font-size:var(--fs-sm);font-weight:600;color:var(--paper);text-shadow:0 0 6px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6)}
.post-figure{display:block;aspect-ratio:386/382;border-radius:25px;overflow:hidden;background:var(--ink)}
.post--wide .post-figure{aspect-ratio:788/382}
.post-figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-link:hover .post-figure img{transform:scale(1.04)}
.post-figure .noimg{display:grid;place-items:center;width:100%;height:100%;padding:24px;color:var(--paper);font-family:var(--en);font-size:var(--fs-xl);font-weight:700;line-height:1.15;text-align:center}
.post-date{display:block;margin-top:20px;font-size:var(--fs-sm);color:var(--ink-2)}
.post-title{margin:5px 0 10px;font-size:var(--fs-lg);font-weight:600;line-height:1.55;color:var(--ink-2)}
.post-desc{margin-bottom:16px;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2)}
.post-more{display:inline-block;font-size:var(--fs-base);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.post-tag{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.post-tag span{display:inline-block;padding:10px 15px 8px;border-radius:25px;background:var(--paper);border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1;color:var(--green)}
.yt{position:relative;display:block;width:100%;height:100%;padding:0;background:#000;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.95}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:12px;background:#c4302b;display:grid;place-items:center}
.yt .play::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.case-note{margin:4px 0 36px 16px;font-size:var(--fs-base);font-weight:600}
.case-note b{display:inline-block;margin-right:12px;padding:2px 10px;background:var(--ink);color:var(--paper);font-size:var(--fs-sm)}
.view-more{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;text-align:center}
.view-more a{display:inline-block;font-family:var(--en);font-size:20px;font-weight:700;line-height:1.25;border-bottom:2px solid var(--ink-2);color:var(--ink-2);letter-spacing:.02em}
.view-more a.ja{font-family:var(--sans);font-size:var(--fs-md)}
.view-more a:hover{color:var(--shu);border-color:var(--shu)}

/* ---------- 9. お客様の声（藍の帯・会話の形はv5から） ---------- */
.voices{background:var(--green);color:var(--paper);padding:140px 0 120px}
.voices-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}
.voices-desc{max-width:360px;font-size:13px;font-weight:600;line-height:1.8}
.v-sum b{font-family:var(--en);font-size:var(--fs-2xl);font-weight:700;margin-right:6px}
.chat{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;align-items:start}
.msg{display:flex;align-items:flex-end;gap:12px}
.face{flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--c,#8a9a8f)}
.bubble{position:relative;flex:1;padding:16px 20px;background:var(--white);color:var(--ink);border-radius:18px 18px 18px 4px;font-size:var(--fs-base);line-height:1.8}
.bubble .who{font-size:var(--fs-xs);font-weight:700;margin-bottom:4px}
.bubble .who span{font-weight:400;color:var(--mute);margin-left:6px}
.bubble .stars{margin-top:6px;color:#b98500;font-size:var(--fs-xs);letter-spacing:.1em}
.more-voices{margin-top:40px}
.more-voices summary{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border:1px solid var(--paper);cursor:pointer;font-weight:600;list-style:none;transition:background .2s,color .2s}
.more-voices summary:hover{background:var(--paper);color:var(--ink)}
.more-voices summary::-webkit-details-marker{display:none}
.more-voices[open] summary{display:none}
.v-src{margin-top:32px;font-size:var(--fs-xs);opacity:.85}
.v-src a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 10. 頼み方（太い罫の下に英字と本文の2列） ---------- */
.how{padding:150px 0 140px}
.how-inner{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;border-top:8px solid var(--ink);padding-top:48px}
.how-en{font-family:var(--en);font-size:var(--fs-2xl);font-weight:700;line-height:1.1}
.how-en span{display:block}
.how-title{font-size:var(--fs-xl);font-weight:600;line-height:1.5;margin-bottom:20px}
.steps{counter-reset:s}
.steps li{position:relative;padding:0 0 22px 48px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;font-family:var(--en);font-size:var(--fs-xl);font-weight:700;line-height:1}
.steps b{display:block;font-weight:600}
.steps span{font-size:15px;line-height:2;color:var(--ink-2)}
#faq{margin-top:28px;border-top:1px solid var(--ink)}
#faq details{border-bottom:1px solid var(--line)}
#faq summary{cursor:pointer;list-style:none;padding:16px 32px 16px 0;position:relative;font-weight:600}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--en);font-size:var(--fs-lg)}
#faq details[open] summary::after{content:"−"}
#faq .chip{display:none}
#faq .fa{padding:0 0 20px;font-size:15px;line-height:2}
.how-links{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 32px}
.how-links a{font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:3px}
.how-links a:hover{color:var(--shu);border-color:var(--shu)}

/* ---------- 11. About me（墨藍の地・右端に縦書きラベル） ---------- */
.about{padding-right:86px}
.about-inner{position:relative;background:var(--ink);color:var(--paper);min-height:600px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,420px);justify-content:center;gap:60px;padding:98px 80px 90px}
.about-label{position:absolute;right:-42px;bottom:0;writing-mode:vertical-rl;background:var(--paper);color:var(--ink);font-size:var(--fs-xl);font-weight:600;line-height:1.5;padding:5px 0 0}
.about-text{margin-top:36px;font-size:15px;font-weight:500;line-height:2}
.about-cats{margin-top:40px}
.about-cats>p{font-size:13px;font-weight:600;margin-bottom:12px}
.about-cats>div{display:flex;flex-wrap:wrap;gap:8px}
.about-cats a{display:inline-block;min-width:96px;padding:12px 14px 10px;background:var(--paper);color:var(--green);border-radius:3px;border-bottom:1px solid var(--line);text-align:center;font-size:var(--fs-sm);font-weight:600;line-height:1.2}
.about-cats a:hover{background:var(--sea)}
.about-photo{align-self:center;position:relative}
.about-photo video{width:100%;aspect-ratio:1;object-fit:cover;background:#e4e8e1}

/* ---------- 12. フッター（LINEの黒帯・ロゴ・ナビ） ---------- */
.footer-line{display:flex;justify-content:center;align-items:center;gap:80px;background:var(--ink);color:var(--paper);min-height:300px;padding:40px 20px;margin-top:90px}
.footer-line-title{font-family:var(--en);font-size:var(--fs-2xl);font-weight:700;line-height:1.12}
.footer-line-title span{display:block}
.footer-line-title span:nth-child(1),.footer-line-title span:nth-child(3){margin-left:60px}
.footer-line-text{max-width:280px;font-size:13px;font-weight:600;line-height:1.8}
.footer-line:hover .footer-line-title{text-decoration:underline;text-underline-offset:6px}
.footer-bottom{width:min(var(--wrap),calc(100% - 40px));margin:70px auto 0;padding-bottom:110px;display:grid;grid-template-columns:auto 1fr;gap:20px 60px;align-items:start}
.footer-logo{font-size:26px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.footer-logo span{display:block;font-family:var(--en);font-size:11px;letter-spacing:.2em;margin-top:4px;text-transform:uppercase}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 28px;font-size:13px;font-weight:600}
.footer-nav a:hover{color:var(--shu)}
.footer-copy{grid-column:1/-1;font-size:var(--fs-xs);color:var(--mute)}

/* スマホ下の固定ボタン（v5から） */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;background:var(--ink);color:var(--paper);font-weight:600;border-radius:2px;white-space:nowrap}
.btn:hover{background:var(--shu)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(245,242,234,.96);border-top:1px solid var(--line);transition:transform .3s ease-out}
.dock .btn{width:100%}
.dock.away{transform:translateY(110%)}

/* ---------- 13. レスポンシブ ---------- */
@media(max-width:1200px){
  .rail-copy{display:none}
  .band-title-en{font-size:96px}
}
@media(max-width:1023px){
  .header{padding:28px 24px 0;height:104px}
  .menu-btn{right:8px;top:24px;width:72px}
  .kv{height:62vw}
  .kv-image{left:20px;width:calc(100% - 40px)}
  .kv-cap{left:32px;right:32px;bottom:36px}
  .kv-title{font-size:38px}
  .kv-dots{left:20px}
  .v-catch{right:0;top:110px}
  .v-catch-sub{font-size:18px}
  .v-catch-main{font-size:var(--fs-lg);padding-top:30px}
  .links-grid{grid-template-columns:1fr;gap:28px}
  .how-inner{grid-template-columns:1fr}
  .about{padding-right:0}
  .about-inner{grid-template-columns:1fr;padding:80px 40px 100px;gap:50px}
  .about-label{right:0}
  .about-photo{max-width:360px}
  .chat{grid-template-columns:1fr}
}
@media(max-width:767px){
  .header{height:88px;padding:20px 16px 0}
  .header-desc{font-size:10px;max-width:78%}
  .header-logo-ja{font-size:22px}
  .header-logo-en{display:none}
  .menu-btn{top:22px;right:4px;width:60px;height:44px;padding:12px}
  .site-menu-inner{grid-template-columns:1fr;gap:24px}
  .site-menu-cats .en{font-size:34px}
  .en-title{font-size:28px}
  .kv{height:118vw}
  .kv-image{left:16px;width:calc(100% - 16px);height:92%}
  .kv-cap{left:18px;right:18px;bottom:22px}
  .kv-kicker{font-size:11px;gap:10px}
  .kv-kicker i{flex-basis:40px}
  .kv-title{font-size:26px;margin-top:10px;line-height:1.35}
  .kv-meta{margin-top:12px;font-size:12px;gap:10px}
  .kv-meta time,.kv-meta b{font-size:13px}
  .kv-dots{left:auto;right:12px;bottom:-4px}
  .kv-avatar,.kv-ring{right:50%;top:8%;width:64%;transform:translateX(50%)}
  @keyframes wave{0%{transform:translateX(50%) scale(1);opacity:.55}100%{transform:translateX(50%) scale(1.3);opacity:0}}
  .links-sec{padding-top:72px}
  .links{grid-template-columns:1fr}
  .features{padding-top:80px}
  .features-head{min-height:250px}
  .v-catch{top:0;padding:4px 2px}
  .v-catch-sub{font-size:var(--fs-sm)}
  .v-catch-main{font-size:20px;padding-top:18px}
  .feature--l,.feature--r{width:100%;max-width:none}
  .feature--r{padding-left:32px}
  .feature--l{padding-right:32px}
  .feature--r .feature-figure{width:100%}
  .feature .feature-figure,.feature--r .feature-figure,.feature-mid .feature-figure{aspect-ratio:4/3}
  .feature .kv-cap,.feature-mid .kv-cap{left:16px;right:16px;bottom:16px}
  .feature .kv-title{font-size:22px;margin-top:8px}
  .feature-mid .kv-title{font-size:20px}
  .feature .kv-kicker,.feature .kv-meta{font-size:11px;gap:10px}
  .feature .kv-kicker i{flex-basis:36px}
  .feature-lead{padding-right:0;font-size:13px}
  .features-mid{flex-direction:column;gap:40px;padding:50px 0 40px}
  .feature-mid{width:100%;max-width:none}
  .feature-mid:nth-child(2){margin-top:0;padding-left:32px}
  .band{padding:72px 0 64px}
  .band-title{margin-bottom:28px}
  .band-title-en{font-size:64px}
  .band-lead{grid-template-columns:1fr;margin-left:0}
  .price{text-align:left}
  .case-note{margin-left:0}
  .post,.post--wide{width:calc(100% - 16px)}
  .post--wide .post-figure{aspect-ratio:16/10}
  .post-title{font-size:20px}
  .voices{padding:88px 0 80px}
  .voices-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:36px}
  .face{flex-basis:36px;width:36px;height:36px}
  .bubble{font-size:var(--fs-sm)}
  .how{padding:88px 0 80px}
  .about-inner{padding:64px 20px 80px}
  .about-label{font-size:20px}
  .footer-line{flex-direction:column;gap:24px;align-items:flex-start;padding:56px 24px}
  .footer-line-title{font-size:32px}
  .footer-bottom{grid-template-columns:1fr}
  .footer-nav{justify-content:flex-start}
  .dock{display:block}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kv-slide{transition:none}
  .kv-ring{display:none}
  .kv-image>img,.feature-figure>img,.post-figure img{transition:none}
}
.coco-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;font-family:var(--en);font-size:12px;font-weight:700;line-height:1}

/* ===== 最初の画面（v5に戻した・2026-09-29 ユーザー指示） ===== */
.profile{overflow:clip;margin-inline:auto;padding-top:24px;padding-bottom:40px;text-align:center}
/* 開けてすぐの舞台: AIで動かしたアイコン(Wan 2.7で生成) + 音の輪 + 作ったものの衛星 */
.stage{--S:min(440px,88vw);position:relative;width:var(--S);height:var(--S);margin:0 auto}
.avatar{position:absolute;inset:22%;border-radius:50%;overflow:hidden;background:#e4e8e1;box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--line);animation:pop .9s cubic-bezier(.2,1.5,.4,1) both;will-change:transform}
.avatar video{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.ring{position:absolute;inset:22%;border-radius:50%;border:1.5px solid var(--green);opacity:0;animation:pwave 2.7s cubic-bezier(.2,.6,.3,1) infinite}
.ring.r2{animation-delay:.9s}.ring.r3{animation-delay:1.8s}
.orbit{position:absolute;inset:0;margin:0;padding:0;list-style:none;animation:spin 48s linear infinite}
.orbit li{position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;transform:rotate(var(--a)) translateY(calc(var(--S) * -.41)) rotate(calc(var(--a) * -1))}
.orbit a{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px solid var(--white);animation:sat-in .7s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(.5s + var(--n) * .09s)}
.orbit img{width:100%;height:100%;object-fit:cover;animation:spin 48s linear infinite reverse}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pwave{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sat-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.profile h1,.bio,.pscore,.sns{animation:rise .6s ease-out both}
.profile h1{animation-delay:.35s}.bio{animation-delay:.5s}.pscore{animation-delay:.6s}.sns{animation-delay:.7s}
.plinks li{animation:rise .5s ease-out both}
.plinks li:nth-child(1){animation-delay:.85s}.plinks li:nth-child(2){animation-delay:.93s}.plinks li:nth-child(3){animation-delay:1.01s}.plinks li:nth-child(4){animation-delay:1.09s}.plinks li:nth-child(5){animation-delay:1.17s}
.plinks a{transition:transform .2s,border-color .2s}
.plinks a:hover{transform:translateX(4px)}
.profile h1{margin-top:4px;font-family:var(--serif);font-size:var(--fs-xl);font-weight:700;letter-spacing:.06em;line-height:1.4}
.profile h1 small{display:block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;color:var(--mute);margin-top:2px}
.bio{margin:16px auto 0;max-width:30em;font-size:var(--fs-base)}
.bio-tags span{white-space:nowrap}
.bio-tags{display:block;margin-top:8px;font-size:var(--fs-sm);color:var(--mute)}
.pscore{margin-top:16px;font-size:var(--fs-sm);color:var(--mute)}
.pscore b{font-family:var(--serif);font-size:var(--fs-lg);color:var(--ink);font-weight:700;margin:0 2px}
.sns{display:flex;justify-content:center;gap:8px;margin-top:20px;padding:0;list-style:none}
.sns a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);text-decoration:none}
.sns a:hover{border-color:var(--green)}
.sns svg{width:20px;height:20px;fill:var(--ink)}
.sns .is-pending{display:none}

.plinks{margin-top:28px;padding:0;list-style:none;text-align:left}
.plinks li+li{margin-top:10px}
.plinks a{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:14px;min-height:72px;padding:8px 16px 8px 8px;background:var(--white);border:1px solid var(--line);border-radius:4px;text-decoration:none}
.plinks a:hover{border-color:var(--green)}
.plinks img{width:56px;height:56px;object-fit:cover;border-radius:2px}
.plinks .t{font-weight:700;line-height:1.5}
.plinks .s{display:block;font-size:var(--fs-xs);color:var(--mute);font-weight:400}
.plinks .go{font-size:var(--fs-xs);color:var(--green);white-space:nowrap}
.plinks .main a{background:var(--green);border-color:var(--green);color:var(--white)}
.plinks .main .s,.plinks .main .go{color:#d8e2d9}
.plinks .line a{grid-template-columns:1fr;padding-left:16px}
@media(prefers-reduced-motion:reduce){.ring{display:none}.orbit,.orbit img,.orbit a,.avatar,.profile h1,.bio,.pscore,.sns,.plinks li{animation:none}}
.header{height:96px}
.header-logo-en{font-size:22px;letter-spacing:.24em}
@media(max-width:767px){.header{height:72px}.header-logo-en{display:inline;font-size:18px}}

/* ===== 余白を詰める（2026-09-29 ユーザー指示「余計な余白はいらない」） ===== */
.profile{padding-top:8px;padding-bottom:24px}
.features{padding:56px 0 0}
.features-head{padding-bottom:8px}
.feature{padding:24px 0 0}
.features-mid{padding:32px 0 48px}
.feature-mid:nth-child(2){margin-top:40px}
.band{padding:64px 0 56px}
.band+.band{padding-top:8px}
.band-title{margin-bottom:24px}
.band-lead{margin-bottom:28px}
.case-note{margin-bottom:24px}
.post{margin-bottom:16px}
.view-more{margin-top:16px}
.voices{padding:72px 0 64px}
.voices-head{margin-bottom:32px}
.more-voices{margin-top:28px}
.v-src{margin-top:20px}
.how{padding:72px 0 64px}
.how-inner{padding-top:32px}
.footer-line{margin-top:64px;min-height:220px}
.footer-bottom{margin-top:40px;padding-bottom:96px}
@media(max-width:767px){
  .features{padding-top:40px}
  .features-head{min-height:200px}
  .features-mid{gap:28px;padding:24px 0 32px}
  .band{padding:48px 0 40px}
  .voices{padding:56px 0 48px}
  .how{padding:56px 0 48px}
  .about-inner{padding:48px 20px 56px;gap:32px}
  .footer-line{margin-top:48px;padding:40px 24px}
}

/* ===== AIエージェント事例（旧agents.htmlのstyleから移設） ===== */


.agent{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.agent:nth-of-type(even){background:var(--white)}
.agent-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
.agent .st{display:inline-block;font-size:var(--fs-xs);color:var(--shu);font-weight:700}
.agent .st::before{content:"●";margin-right:4px}
.agent h2{margin-top:8px;font-family:var(--serif);font-size:var(--fs-xl);font-weight:700;line-height:1.45}
.agent .for{margin-top:8px;font-size:var(--fs-sm);color:var(--mute)}
.facts{margin-top:24px}
.facts div{padding:14px 0;border-top:1px solid var(--line)}
.facts dt{font-size:var(--fs-xs);font-weight:700;color:var(--green);letter-spacing:.06em}
.facts dd{margin-top:4px}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:0;list-style:none}
.flow li{padding:6px 12px;background:var(--paper);border:1px solid var(--line);border-radius:2px;font-size:var(--fs-sm)}
.agent:nth-of-type(even) .flow li{background:var(--white)}
.flow li:not(:last-child)::after{content:"→";margin-left:12px;color:var(--mute)}
.flow li{position:relative}
.shot{border:1px solid var(--line);background:var(--paper)}
.shot.phone{max-width:300px;margin:0 auto}
.shot-cap{margin-top:8px;font-size:var(--fs-xs);color:var(--mute);text-align:center}
.side .msg+.msg{margin-top:10px}
.side .bubble{max-width:100%}
.agent a.ext{font-weight:700}
figure{margin:0}
.agent-grid.solo{grid-template-columns:minmax(0,1fr);max-width:760px}
.end-cta{padding:72px 0 96px;background:var(--green);color:var(--white);text-align:center}
.end-cta h2{font-family:var(--serif);font-size:var(--fs-xl);font-weight:700}
.end-cta p{margin-top:12px}
.end-cta .btn{margin-top:28px;background:var(--white);color:var(--green)}
.end-cta .btn:hover{background:#e9ede7}
.end-cta .sub{display:block;margin-top:12px;font-size:var(--fs-sm);color:#d8e2d9}
.end-cta .sub a{color:var(--white)}
@media(max-width:760px){
  .agent{padding:56px 0}
  .agent-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .page-head h1{font-size:var(--fs-xl)}
}

/* ===== 複数ページ化（2026-09-29）: 言語切替・下層ページの見出し・事例 ===== */
.lang-switch{position:absolute;right:170px;top:44px;font-family:var(--en);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;border-bottom:2px solid var(--ink);line-height:1.3}
.lang-switch:hover{color:var(--shu);border-color:var(--shu)}
.site-menu-cats a[aria-current="page"] .en{color:var(--shu)}
.page-head{padding:16px 0 32px}
.page-head .back{font-size:var(--fs-sm);color:var(--mute)}
.page-title{margin-top:8px}
.page-title-en{display:block;font-family:var(--en);font-size:127px;font-weight:700;line-height:1;letter-spacing:-.01em}
.page-title-ja{display:block;margin:10px 0 0 8px;font-size:var(--fs-md);font-weight:600;letter-spacing:.08em;color:var(--green)}
.page-head+.band{padding-top:48px}
.page-head+.band .band-title,.page-head+.voices .voices-head h2,.page-head+.about h2{}
.page-movie .band-title,.page-agents .band-title,.page-web .band-title{display:none}
.band-more{margin-top:16px}
.band-more a,.v-more a{font-weight:600;border-bottom:2px solid currentColor;padding-bottom:2px}
.band-more a:hover{color:var(--shu)}
.v-more{margin-top:32px}
.page-index .band .band-lead{margin-bottom:0}
ul.side{list-style:none;padding:0}
.end-cta{padding:64px 0 72px;background:var(--green);color:var(--paper);text-align:center}
.end-cta h2{font-size:var(--fs-xl);font-weight:700}
.end-cta p{margin-top:12px}
.end-cta .btn{margin-top:24px;background:var(--paper);color:var(--green);white-space:normal;max-width:100%;padding:12px 24px;line-height:1.5}
.end-cta .btn:hover{background:var(--sea)}
.end-cta .sub{display:block;margin-top:12px;font-size:var(--fs-sm)}
.end-cta .sub a{text-decoration:underline}
.page-agents .footer-line,.page-about .footer-line{margin-top:0}
@media(max-width:1023px){.lang-switch{right:96px;top:36px}.page-title-en{font-size:96px}}
@media(max-width:767px){.lang-switch{right:72px;top:26px;font-size:var(--fs-xs)}.page-title-en{font-size:64px}.page-head{padding-bottom:20px}}
.features{padding-bottom:56px}
@media(max-width:767px){.features{padding-bottom:40px}.features-head{min-height:0}}

/* ===== アイコン: Xのアイコンをそのまま使う（見切れなし・まばたきなし）/ 周回は Movie・Agent・Web の3つ（2026-09-29） ===== */
.avatar{background:#7ed957}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .nod{transform-origin:50% 85%;animation:nod .9s ease-in-out infinite alternate}
@keyframes nod{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(1.5deg) translateY(3px)}}
.avatar{transition:translate .4s ease-out}
.orbit li{width:24%;height:24%;margin:-12% 0 0 -12%}
.orbit a{position:relative;border:3px solid var(--white);outline:1px solid var(--line)}
.orbit a:hover{outline:3px solid var(--shu)}
.sat-in{position:relative;display:block;width:100%;height:100%;animation:spin 48s linear infinite reverse}
.orbit .sat-in img{animation:none;width:100%;height:100%;object-fit:cover}
.sat-label{position:absolute;inset:0;display:grid;place-items:center;background:rgba(27,42,51,.62);color:var(--paper);font-family:var(--en);font-size:clamp(13px,3.4vw,17px);font-weight:700;letter-spacing:.04em}
.orbit a:hover .sat-label{background:rgba(166,61,38,.75)}
.about-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
@media(prefers-reduced-motion:reduce){.avatar .nod,.sat-in{animation:none}}
.orbit li{transform:rotate(var(--a)) translateY(calc(var(--S) * -.37)) rotate(calc(var(--a) * -1))}

/* =====================================================================
   2026-09-29 ロゴ・開いたときのロゴ・全体のフェードイン
   ===================================================================== */
/* 左上のロゴ（画像） */
.header-logo img{height:56px;width:auto}
@media(max-width:767px){.header-logo img{height:40px}}

/* 開いたときに真ん中にロゴを出して消す（JSが差し込む・1セッション1回） */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--paper);animation:splash-out .7s ease-in 1.8s both;pointer-events:none}
#splash img{width:min(520px,72vw);height:auto;animation:splash-logo 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes splash-logo{0%{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}60%{opacity:1}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes splash-out{to{opacity:0;visibility:hidden}}
/* ロゴが消えてから最初の画面の登場を始める */
html.splash-on .avatar{animation-delay:1.9s}
html.splash-on .orbit a{animation-delay:calc(2.2s + var(--n) * .09s)}
html.splash-on .profile h1{animation-delay:2.1s}
html.splash-on .bio{animation-delay:2.25s}
html.splash-on .pscore{animation-delay:2.35s}
html.splash-on .sns{animation-delay:2.45s}

/* ページ移動をふわっとつなぐ（対応ブラウザのみ） */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* 全体のフェードイン：スクロール位置で動かす（未対応ブラウザでは最初から表示される） */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    /* 英字見出し：下から切り抜きで立ち上がる */
    .band-title-en,.page-title-en,.how-en span,.footer-line-title span{animation:type-rise linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
    @keyframes type-rise{from{clip-path:inset(100% 0 0 0);transform:translateY(40%)}to{clip-path:inset(0 0 -10% 0);transform:none}}
    /* 下線つき英字見出し：左からすべり込み、字間が締まる */
    .en-title span{animation:type-slide linear both;animation-timeline:view();animation-range:entry 10% entry 60%}
    @keyframes type-slide{from{opacity:0;transform:translateX(-28px);letter-spacing:.18em}to{opacity:1;transform:none;letter-spacing:.01em}}
    /* 和文の見出しと本文：ふわっと上がる */
    .band-title-ja,.page-title-ja,.band-lead,.price,.how-title,.steps li,#faq,.how-links,.about-text,.about-cats,.post,.case-note,.view-more,.agent h2,.agent .for,.facts>div,.end-cta>div>*,.footer-line-text,.voices-desc,.v-more,.v-src{animation:fade-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes fade-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    /* 写真：少し大きい所から収まる */
    .feature-figure,.post-figure,.side,.about-photo{animation:photo-in linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes photo-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
  }
}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.chat .msg{animation:fade-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}}

/* ===== 2026-09-29 トップのサービス欄: 見出しから料金までまとめてリンク / フッターのロゴ ===== */
.band-link{display:block;color:inherit}
.band-link .band-lead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin:0 0 0 16px}
.band-link .band-more{font-weight:600;border-bottom:2px solid currentColor;padding-bottom:2px;align-self:flex-start;margin-top:4px}
.band-link:hover .band-title-en{color:var(--shu)}
.band-link:hover .band-more{color:var(--shu)}
.band-title-en{transition:color .25s}
.en-title a{color:inherit}
.en-title a:hover span{color:var(--sea)}
.footer-logo img{height:64px;width:auto}
@media(max-width:767px){.band-link .band-lead{flex-direction:column;align-items:flex-start;margin-left:0}.footer-logo img{height:52px}}

/* ===== 2026-09-29 最初の画面: 無料相談・見積もりボタン（説明文とSNSの間） ===== */
.consult{margin-top:24px;animation:rise .6s ease-out .65s both}
html.splash-on .consult{animation-delay:2.4s}
.consult-btn{min-height:60px;padding:0 40px;font-size:var(--fs-md);letter-spacing:.04em}
@media(max-width:767px){.consult-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.consult{animation:none}}


/* =====================================================================
   2026-09-29 ロゴに寄せる：英字 Castoro ＋ 和文 Noto Serif JP ／ 深緑と苔色
   ===================================================================== */
/* （旧）Castoro用の400指定。localletter化で下のブロックが上書きする */
#faq summary::after,
.band-title-en,
.coco-mark,
.footer-line-title,
.footer-logo span,
.header-logo-en,
.how-en,
.kv-kicker-en,
.kv-meta b,
.kv-meta time,
.kv-meta-en,
.links .go,
.page-title-en,
.post-figure .noimg,
.price b,
.sat-label,
.score b,
.site-menu-cats .en,
.steps li::before,
.v-sum b,
.view-more a,
/* ---------- 4. 英字見出し（下線＋段ずらし） ---------- */
.en-title,
/* ===== 複数ページ化（2026-09-29）: 言語切替・下層ページの見出し・事例 ===== */
.lang-switch,
/* 左端の縦書きコピーライト */
.rail-copy{font-weight:400}
/* 大きな英字はロゴのように字間を少し広げる */
.band-title-en,.page-title-en{letter-spacing:.01em}
.en-title{letter-spacing:.04em}
.header-logo-en,.footer-logo span,.kv-kicker-en{letter-spacing:.24em}
/* 明朝は細く見えるので本文をわずかに大きく・行間を広く */
body{font-size:16.5px;line-height:1.95;font-weight:400}
h1,h2,h3,.post-title,.how-title,.agent h2{font-weight:600}
.what,.post-desc,.about-text,.steps span,#faq .fa,.bubble{font-weight:400}
/* 英語ページは本文も Castoro（和文フォントの欧文より自然。和文が混じる所だけ Noto Serif JP で補う） */
html[lang="en"]{--sans:"Castoro","Noto Serif JP","Times New Roman",serif}
html[lang="en"] body{font-size:17px}
.page-index .profile{padding-bottom:48px}


/* =====================================================================
   2026-09-29 タイポグラフィを localletter.jp に合わせる（1440px幅で実測）
   英字: Futura Bold 700 ／ 和文: 見出しは太め600・字間をわずかに詰める・行間は短め
   色・ロゴ・和文の明朝（Noto Serif JP）はそのまま残す
   ===================================================================== */
#faq summary::after,
.band-title-en,
.coco-mark,
.footer-line-title,
.footer-logo span,
.header-logo-en,
.how-en,
.kv-kicker-en,
.kv-meta b,
.kv-meta time,
.kv-meta-en,
.links .go,
.page-title-en,
.post-figure .noimg,
.price b,
.sat-label,
.score b,
.site-menu-cats .en,
.steps li::before,
.v-sum b,
.view-more a,
/* ---------- 4. 英字見出し（下線＋段ずらし） ---------- */
.en-title,
/* ===== 複数ページ化（2026-09-29）: 言語切替・下層ページの見出し・事例 ===== */
.lang-switch,
/* 左端の縦書きコピーライト */
.rail-copy{font-weight:700}
/* 大きな英字：Futura Bold・字間を詰めて行の高さは1 */
.band-title-en,.page-title-en{letter-spacing:-.03em;line-height:.95}
/* 下線つきの英字見出し（localletter の LOCAL LETTER Features: 34.44px / 行1.12） */
.en-title{font-size:34px;line-height:1.12;letter-spacing:-.01em}
/* 小さい英字ラベル（SEP. などと同じ: 12px・字間0.11em・大文字） */
.kv-kicker-en,.header-logo-en,.sat-label,.lang-switch,.footer-logo span,.site-menu-cats .en+*{letter-spacing:.11em}
.lang-switch{font-size:12px;text-transform:uppercase}
.sat-label{text-transform:uppercase;font-size:clamp(11px,2.8vw,13px)}
/* 数字（料金・評価・件数・手順番号）：日付の数字と同じ扱い（字間-0.035em・行の高さ1） */
.price b,.pscore b,.v-sum b,.steps li::before,.score b{font-family:var(--en);font-weight:700;letter-spacing:-.035em;line-height:1}
.price b{font-size:44px}
.pscore b{font-size:30px}
/* 和文の見出し：太め・字間をわずかに詰める・行の高さ1.3〜1.5 */
h1,h2,h3,.post-title,.how-title,.agent h2,.band-title-ja,.page-title-ja,.site-menu-cats a{font-weight:600;letter-spacing:-.02em}
.how-title{line-height:1.5}
.post-title,.agent h2{line-height:1.5}
.profile h1{letter-spacing:.02em}
/* 本文：localletter は行1.5。明朝は細いので少しだけ広く1.75、字間は標準 */
body{line-height:1.75}
.what,.post-desc,.about-text,.steps span,#faq .fa,.bubble,.bio{line-height:1.75;letter-spacing:0}
/* 「もっと見る」相当（12px 太字・字間0.08em） */
.band-more,.v-more a,.how-links a{font-size:14px;letter-spacing:.08em}
@media(max-width:767px){.price b{font-size:36px}.en-title{font-size:28px}}
/* 英語ページの本文は Jost（Futura系）＋和文フォールバック */
html[lang="en"]{--sans:"futura-pt","Jost","Noto Serif JP",sans-serif}
html[lang="en"] body{font-size:16px;line-height:1.6}


/* =====================================================================
   2026-09-29 全部の文字の書体を統一（ユーザー指示）
   すべての要素を同じ指定にする: 英字は Jost（Futura系・ロゴと同系統）、和文は Zen Kaku Gothic New
   明朝（Noto Serif JP）はやめる。英語ページも同じ指定。
   ===================================================================== */
:root,html[lang="en"]{
  --type:"futura-pt","Jost","Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --sans:var(--type);--serif:var(--type);--en:var(--type);
}
html body,html body *:not(svg):not(svg *){font-family:var(--type)}
html[lang="en"] body{font-size:16.5px;line-height:1.75}
body{font-size:16px;line-height:1.8}

/* ===== 2026-09-29 メニューボタン: 3本線・開いても×に交差させない ===== */
.menu-btn{gap:7px}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1),
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2){transform:none}
.menu-btn-bar{transition:width .3s ease,background .3s ease;margin-left:auto}
/* 開いている間は3本の長さをずらして、状態が変わったことだけ伝える */
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2){width:70%}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(3){width:40%}
.site-menu-inner{grid-template-columns:1fr}
.header{z-index:45}   /* メニュー(40)より手前に置き、開いている間もボタンで閉じられるようにする */

/* ===== 2026-09-30 相談ボタンの横にAIタイプ診断(ユーザー指示)。同じ高さ・同じ幅で並べ、診断は白地の枠線で主従をつける ===== */
.consult{display:flex;flex-wrap:wrap;gap:12px}
.consult .consult-btn{flex:1 1 0;padding:0 24px}
.aitype-btn{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.aitype-btn:hover{background:var(--ink);color:var(--paper)}
@media(max-width:767px){.consult{flex-direction:column}.consult .consult-btn{flex:none;width:100%}}