/* シンビ コーポレートサイト デモ（10/5）
   土台は10/1の試作サイト。配色はトップのFV（X5）に合わせ、濃い緑と黄色にそろえた。
   トップ別案（V5・Y6・Z5）は、ページの html に theme-xx を付けて、下の変数と一部の部品だけを差し替える。
   赤は使わない（必須の印も緑）。 */
:root{
  --navy:#0b295e;      /* 濃色の地（X5の緑） */
  --navy-2:#07214e;
  --cobalt:#11397e;    /* 主色：リンク・数字・印 */
  --cobalt-l:#8ca2c7;
  --signal:#ffc400;    /* 10/9 松本 Y1（前 #f2c230）。差し色：行動ボタン・強調（X5の黄色） */
  --signal-h:#ffd23f;
  --cta-fg:#081d40;
  --ink:#121823;
  --sub:#4a505b;
  --paper:#f1f2f5;
  --line:#d9dde3;
  --bg:#fff;
  --hd-bg:rgba(255,255,255,.96);
  --foot:#051838;
  --on-dark:#e6eaf0;   /* 濃色の上の本文 */
  --on-dark-2:#a9b4c8; /* 濃色の上の補足 */
  --stripe:#1a3f7f;    /* 濃色の上の斜め帯 */
  --tbd:#ffe45c;
  --radius:10px;
  --btn-radius:6px;
  --card-bd:1px solid var(--line);
  /* 10/6 松本「NotoSansJP統一」：見出しも本文も Noto Sans JP（Google Fonts で全員に同じ書体を配る）。後ろは読み込めなかった時の控え */
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  --head:var(--sans);
  --num:var(--sans);  /* 10/6 数字も Noto Sans JP にそろえた（旧 Bahnschrift 等は Windows・Mac にしか無く、端末で数字の形が変わっていたため） */
  --wrap:1180px;
  --slant:4vw;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;letter-spacing:.02em;overflow-wrap:anywhere;word-break:auto-phrase}
html,body{overflow-x:clip}
p,h1,h2,h3,li,dd{word-break:auto-phrase;text-wrap:pretty}
h1,h2,h3{font-family:var(--head);font-feature-settings:"palt";letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--cobalt);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--cobalt-l);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 32px}}
.num{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}

/* 未確定（要確認・保留・[[ ]]） */
.tbd{background:linear-gradient(transparent 52%,var(--tbd) 52%);color:inherit;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.on-dark .tbd,.hero .tbd,.subhero .tbd,.cta-band .tbd,.recruit-band .tbd,.sec-dark .tbd{background:var(--tbd);color:#1b1b1b}

/* デモの帯 */
.demo-bar{background:#1b1b1b;color:#fff;font-size:12px;text-align:center;padding:3px 12px;line-height:1.6;position:relative;z-index:60}
.demo-bar .tbd{background:var(--tbd);color:#1b1b1b}
.demo-bar a{color:#fff;margin:0 .15em}
.demo-bar a[aria-current]{color:var(--tbd);text-decoration:none;font-weight:700}
.demo-bar .sep{opacity:.5;margin:0 .6em}
.raw-band{background:var(--tbd);color:#1b1b1b;text-align:center;font-weight:800;font-size:14px;padding:8px 16px;line-height:1.6}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:50;background:var(--hd-bg);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.hd-inner{max-width:1320px;margin:0 auto;padding:0 12px;height:64px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex-shrink:0}
.logo-img{display:block;height:28px;width:auto}
@media(max-width:600px){.logo-img{height:25px}}  /* 10/6 ロゴの最小サイズ（横組み・デジタルは高さ25px以上）を守る */
.gnav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.gnav a{display:block;padding:8px 12px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;position:relative}
.gnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.gnav a:hover::after,.gnav a[aria-current=page]::after{transform:scaleX(1)}
.hd-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:12px;font-family:var(--num)}
.lang a{padding:4px 8px;text-decoration:none;color:var(--sub);line-height:1.4}
.lang a[aria-current]{background:var(--navy);color:#fff}
.lang a[aria-disabled]{cursor:not-allowed}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer;position:relative;padding:0}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{position:absolute;left:11px;width:18px;height:2px;background:var(--ink);content:"";transition:transform .2s}
.menu-btn .bars{top:20px}
.menu-btn .bars::before{left:0;top:-6px}
.menu-btn .bars::after{left:0;top:6px}
.menu-btn[aria-expanded=true] .bars{background:transparent}
.menu-btn[aria-expanded=true] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1099px){
  .menu-btn{display:block}
  .gnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  .gnav.open{display:block}
  .gnav ul{flex-direction:column;padding:8px 16px 16px}
  .gnav a{padding:14px 4px;border-bottom:1px solid var(--line)}
  .gnav a::after{display:none}
}
@media(max-width:480px){
  .hd-inner{gap:6px;padding:0 10px;height:58px}
  .hd-tools{gap:6px}
  .lang{font-size:11px}
  .lang a{padding:3px 5px}
  .menu-btn{width:38px;height:38px}
  .menu-btn .bars{left:9px;top:18px}
  .btn.btn-hd{padding:8px 10px;font-size:12px;border-width:0}
}
@media(max-width:379px){.lang{display:none}}
@media(max-width:300px){.btn.btn-hd{display:none}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:11px 20px;border-radius:var(--btn-radius);font-weight:800;font-size:15px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.4;font-family:inherit;text-align:center;transition:background .15s,color .15s}
.btn svg{width:16px;height:16px;flex:0 0 16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-cta{background:var(--signal);color:var(--cta-fg)}
.btn-cta:hover{background:var(--signal-h)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--paper)}
.btn-light{background:#fff;color:var(--navy)}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* サブページの見出し */
.hero-stripes{position:absolute;inset:0;pointer-events:none}
.hero-stripes span{position:absolute;top:-20%;height:140%;background:var(--stripe);transform:skewX(-18deg);transform-origin:top}
.subhero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:44px 0 calc(56px + var(--slant));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%)}
@media(min-width:768px){.subhero{padding:64px 0 calc(76px + var(--slant))}}
.subhero .hero-stripes span:nth-child(1){left:70%;width:12%;opacity:.55}
.subhero .hero-stripes span:nth-child(2){left:86%;width:4%;opacity:.8}
.subhero .hero-stripes span:nth-child(3){left:93%;width:1.6%;background:var(--signal);opacity:.95}
.subhero .hero-stripes span:nth-child(4){left:97%;width:20%;opacity:.35}
@media(max-width:999px){.subhero .hero-stripes span{opacity:.25!important}.subhero .hero-stripes span:nth-child(3){display:none}}
.subhero .wrap{position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;font-size:14px;font-weight:700;color:var(--on-dark-2)}
.kicker::before{content:"";width:28px;height:3px;background:var(--signal)}
.subhero h1{font-weight:900;font-size:clamp(32px,5.4vw,58px);line-height:1.25;margin:10px 0 18px;max-width:16em}
.subhero-lead{max-width:42em;font-size:17px;color:var(--on-dark)}
.subhero-lead p{margin:0 0 8px}
.crumbs{font-size:13px;color:var(--on-dark-2);margin:0}
.crumbs a{color:#fff}
.subhero .btn{margin-top:18px}

/* 私たちについての3ページ切り替え */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.subnav a{display:inline-block;padding:7px 16px;border-radius:999px;border:2px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.subnav a[aria-current]{background:#fff;color:var(--navy);border-color:#fff}

/* セクション */
.sec{padding:72px 0}
@media(min-width:768px){.sec{padding:100px 0}}
.sec-alt{background:var(--paper)}
.sec-h{font-weight:900;font-size:clamp(26px,4vw,42px);line-height:1.35;color:var(--navy);margin:0 0 28px;position:relative;padding-top:22px}
.sec-h::before{content:"";position:absolute;left:0;top:0;width:44px;height:6px;background:var(--signal);transform:skewX(-18deg)}
.sec-lead{margin:-10px 0 32px;color:var(--sub);max-width:46em}
.sec-lead p{margin:0 0 6px}
.h3{font-weight:900;font-size:clamp(20px,2.4vw,25px);color:var(--navy);margin:52px 0 16px;line-height:1.45}
.h3:first-child{margin-top:0}
.note{font-size:14px;color:var(--sub);margin-top:16px}
.more{margin-top:32px}
.narrow{max-width:800px}
.body p{margin:0 0 14px}
.sec-dark{background:var(--navy);color:var(--on-dark)}
.sec-dark .sec-h{color:#fff}

/* 数字 */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:0}.stats li+li{border-left:1px solid var(--line);padding-left:24px}}
.stats li{padding:0 10px 0 0;min-width:0}
.stat-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;font-weight:900;color:var(--navy);line-height:1.1;font-family:var(--head)}
.stat-v .num{font-size:clamp(44px,5.6vw,76px);font-weight:700;color:var(--cobalt);letter-spacing:-.01em;line-height:1}
.stat-v .u{font-size:clamp(16px,1.8vw,21px)}
.stat-v.txt{font-size:clamp(22px,2.6vw,32px);color:var(--cobalt)}
.stat-l{display:block;font-size:14px;color:var(--sub);margin-top:12px;line-height:1.6}

/* サービスのカード */
.svc-card{display:grid;gap:20px;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
@media(min-width:900px){.svc-card{grid-template-columns:96px 1fr;gap:32px;padding:40px}}
.svc-ico{width:72px;height:72px;color:var(--cobalt)}
.svc-card h3{margin:0 0 10px;font-size:clamp(22px,2.6vw,30px);font-weight:900;color:var(--navy);line-height:1.4}
.svc-card p{margin:0 0 10px}
.svc-for{font-weight:800;color:var(--navy)}
.svc-price{display:inline-block;font-weight:800;font-size:14px;color:var(--navy);background:var(--paper);padding:6px 14px;border-radius:999px}
.svc-card .btn{margin-top:14px}
.mini-links{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:800px){.mini-links{grid-template-columns:1fr 1fr}}
.mini-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-radius:var(--radius);background:var(--paper);color:var(--ink);font-weight:800;text-decoration:none}
.mini-links a:hover{background:var(--line)}
.mini-links svg{width:16px;height:16px;flex:0 0 16px;color:var(--cobalt)}
.group-note{margin-top:28px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:15px;color:var(--sub)}
.group-note p{margin:0}

/* 理由・特長 */
.reasons{display:grid;gap:20px;counter-reset:r}
@media(min-width:900px){.reasons{grid-template-columns:repeat(3,1fr);gap:24px}}
.reason{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:28px 26px;position:relative}
.reason-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.reason-n{font-family:var(--num);font-weight:700;font-size:40px;line-height:1;color:var(--cobalt)}
.reason-ico{width:52px;height:52px;color:var(--navy)}
.reason h3{font-size:clamp(19px,2vw,22px);font-weight:900;color:var(--navy);margin:0 0 10px;line-height:1.5}
.reason p{margin:0 0 10px}
.reason .r-sub{font-size:14px;color:var(--sub);margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.sec-alt .reason{background:#fff}
.after-note{margin:28px 0 0;font-weight:800;color:var(--navy);display:flex;gap:12px;align-items:baseline}
.after-note::before{content:"";flex:0 0 12px;height:12px;background:var(--signal);transform:skewX(-18deg) translateY(1px)}

/* 事例 */
.case{background:#fff;color:var(--ink);border-radius:var(--radius);border:var(--card-bd);overflow:hidden}
.case-head{padding:28px 28px 0}
.case-tag{font-size:13px;color:var(--sub);margin:0 0 6px;font-weight:700}
.case h3{font-size:clamp(20px,2.4vw,27px);font-weight:900;color:var(--navy);margin:0 0 12px;line-height:1.45}
.case-body{padding:0 28px 28px;display:grid;gap:24px}
@media(min-width:900px){.case-body{grid-template-columns:1fr 1.2fr;align-items:center}}
.case-steps{margin:0;display:grid}
.case-steps>div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.case-steps dt{font-weight:800;color:var(--cobalt)}
.case-steps dd{margin:0}
.case-note{font-size:13px;color:var(--sub);margin:0;padding:0 28px 24px}
.case-ph{border-style:dashed;background:var(--paper);padding:22px 26px}
.case-ph p{margin:0}
.cases{display:grid;gap:24px}
@media(min-width:800px){.case-phs{display:grid;grid-template-columns:1fr 1fr;gap:24px}}
.case-phs{display:grid;gap:24px}
.bars-fig{margin:0;background:var(--paper);padding:22px;border-radius:8px}
.bar-row{display:grid;grid-template-columns:5em 1fr auto;gap:12px;align-items:center;margin-bottom:14px}
.bar-k{font-size:14px;color:var(--sub);font-weight:700}
.bar{height:34px;background:#fff;display:block;border-radius:4px;overflow:hidden}
.bar-fill{display:block;height:100%}
.bar-fill.before{background:repeating-linear-gradient(-45deg,#c9cdd3 0 8px,#dcdfe3 8px 16px)}
.bar-fill.after{background:var(--cobalt)}
.bar-v{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;font-size:20px}
.bars-fig figcaption{font-size:13px;color:var(--sub);margin-top:4px}
@media(max-width:480px){.bar-row{grid-template-columns:1fr auto}.bar-k{grid-column:1/-1}}

/* メンバー */
.members{display:grid;gap:36px 40px}
@media(min-width:800px){.members{grid-template-columns:1fr 1fr}.mem-lead{grid-column:1/-1}}
.mem{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:start}
.mem img{width:104px;height:104px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--cobalt)}
.mem-lead{grid-template-columns:150px 1fr;padding-bottom:36px;border-bottom:1px solid var(--line)}
.mem-lead img{width:150px;height:150px}
.mem h3{font-size:21px;font-weight:900;margin:0 0 8px;color:var(--navy)}
.mem-role{display:block;font-size:13px;color:var(--cobalt);font-weight:700}
.mem-txt p{margin:0 0 8px;font-size:15px;line-height:1.85}
@media(max-width:480px){.mem{grid-template-columns:76px 1fr;gap:16px}.mem img{width:76px;height:76px}.mem-lead{grid-template-columns:92px 1fr}.mem-lead img{width:92px;height:92px}}
.mem-row{display:flex;flex-wrap:wrap;gap:14px}
.mem-row img{width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cobalt)}

/* 採用の帯 */
.recruit-band{position:relative;background:var(--cobalt);color:#fff;overflow:hidden;padding:calc(64px + var(--slant)) 0 64px;clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
.recruit-band .hero-stripes span{background:#fff}
.recruit-band .hero-stripes span:nth-child(1){left:72%;width:10%;opacity:.12}
.recruit-band .hero-stripes span:nth-child(2){left:85%;width:3%;opacity:.25}
.recruit-band .hero-stripes span:nth-child(3){left:90%;width:1.5%;background:var(--signal);opacity:1}
.recruit-band .hero-stripes span:nth-child(4){left:95%;width:20%;opacity:.1}
@media(max-width:999px){.recruit-band .hero-stripes span{opacity:.1!important}.recruit-band .hero-stripes span:nth-child(3){display:none}}
.rb-inner{position:relative;z-index:2;display:grid;gap:28px;align-items:center}
@media(min-width:900px){.rb-inner{grid-template-columns:1fr auto}}
.recruit-band h2{font-size:clamp(28px,4.4vw,48px);font-weight:900;margin:0 0 14px;line-height:1.3}
.recruit-band p{margin:0;color:var(--on-dark);max-width:40em}

/* 問い合わせの帯 */
.cta-band{background:var(--navy);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.cta-band .hero-stripes span:nth-child(1){left:78%;width:10%;opacity:.4}
.cta-band .hero-stripes span:nth-child(2){left:91%;width:3%;opacity:.6}
.cta-band .hero-stripes span:nth-child(3),.cta-band .hero-stripes span:nth-child(4){display:none}
@media(max-width:999px){.cta-band .hero-stripes{display:none}}
.cta-inner{position:relative;z-index:2;display:grid;gap:22px;align-items:center}
@media(min-width:900px){.cta-inner{grid-template-columns:1fr auto;gap:40px}}
.cta-band h2{margin:0 0 10px;font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.4}
.cta-band p{margin:0 0 6px;color:var(--on-dark)}
.cta-band .reply{font-weight:800;color:#fff}

/* 表 */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:15px 14px;text-align:left;vertical-align:top}
.tbl tbody th{font-weight:800;color:var(--navy);white-space:nowrap}
.tbl-kv tbody th{width:9.5em;background:var(--paper)}
.tbl-kv tr:first-child th,.tbl-kv tr:first-child td{border-top:2px solid var(--navy)}
@media(max-width:600px){
  .tbl-kv tbody th,.tbl-kv tbody td{display:block;width:auto}
  .tbl-kv tbody th{border-bottom:0;padding-bottom:4px}
  .tbl-kv tr:first-child td{border-top:0}
}

/* 料金・数字の箱 */
.price-row{display:grid;gap:16px;margin:24px 0}
@media(min-width:720px){.price-row{grid-template-columns:repeat(3,1fr)}}
.price-cell{background:var(--paper);border-radius:var(--radius);padding:20px 22px}
.price-cell p{margin:0}
.price-k{font-size:14px;font-weight:700;color:var(--sub)}
.price-v{font-weight:900;color:var(--navy);font-size:clamp(22px,2.6vw,28px);line-height:1.3;font-family:var(--head)}
.price-v .num{font-size:1.35em;color:var(--cobalt)}
.price-big{font-weight:900;font-size:clamp(22px,3vw,30px);color:var(--navy);margin:0 0 8px;line-height:1.4;font-family:var(--head)}
.price-big .num{color:var(--cobalt);font-size:1.3em}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:720px){.incl{grid-template-columns:repeat(3,1fr)}}
.incl li{display:flex;gap:10px;align-items:center;background:#fff;border:var(--card-bd);border-radius:8px;padding:14px 16px;font-weight:700}
.incl svg{width:20px;height:20px;flex:0 0 20px;color:var(--cobalt)}
.small{font-size:14px;color:var(--sub)}
.small p{margin:4px 0}

/* 流れ図 */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flow li{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:18px 20px}
.flow li:not(:last-child)::after{content:"";position:absolute;left:34px;bottom:-15px;width:14px;height:14px;background:var(--cobalt);clip-path:polygon(0 0,100% 0,50% 100%);z-index:1}
.flow-n{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--num);font-weight:700;font-size:17px;display:grid;place-items:center}
.flow-t{margin:0;font-weight:800;line-height:1.5}
.flow-d{margin:4px 0 0;font-size:14px;color:var(--sub)}
@media(min-width:900px){
  .flow{grid-auto-flow:column;grid-auto-columns:1fr;gap:22px}
  .flow li{flex-direction:column;gap:12px}
  .flow li:not(:last-child)::after{left:auto;right:-18px;top:28px;bottom:auto;clip-path:polygon(0 0,100% 50%,0 100%)}
}

/* 1日の流れ */
.day{list-style:none;margin:0;padding:0;position:relative}
.day::before{content:"";position:absolute;left:68px;top:10px;bottom:10px;width:3px;background:linear-gradient(var(--cobalt),var(--signal))}
.day li{display:grid;grid-template-columns:56px 1fr;gap:32px;padding:10px 0;position:relative}
.day li::after{content:"";position:absolute;left:63px;top:20px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--cobalt)}
.day-t{font-family:var(--num);font-weight:700;font-size:20px;color:var(--navy);text-align:right}
.day-d{margin:0;font-weight:700;padding-top:2px}
@media(min-width:900px){.day{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.day::before{left:0;right:0;top:40px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--cobalt),var(--signal))}.day li{grid-template-columns:1fr;gap:28px;padding:0 10px 0 0}.day li::after{left:0;top:34px}.day-t{text-align:left}.day-d{font-size:15px}}

/* 悩み */
.worries{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:800px){.worries{grid-template-columns:repeat(2,1fr)}.worries.n3{grid-template-columns:repeat(3,1fr)}}
.worries li{background:#fff;padding:20px 22px 20px 52px;font-weight:800;position:relative;border-radius:var(--radius);border:var(--card-bd);line-height:1.6}
.worries li::before{content:"";position:absolute;left:20px;top:25px;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 2px var(--cobalt)}
.worries li::after{content:"";position:absolute;left:26px;top:31px;width:6px;height:6px;border-radius:50%;background:var(--cobalt)}

/* FAQ */
.faq-list{border-top:2px solid var(--navy)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:800;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--num);color:var(--cobalt);margin-right:.7em;font-size:20px}
.faq summary::after{content:"";position:absolute;right:10px;top:28px;width:10px;height:10px;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg);top:33px}
.faq-a{padding:0 0 20px 1.9em}
.faq-a p{margin:0}

/* 理念・行動指針 */
.vision{display:grid;gap:12px}
.vision .v-big{margin:0;font-family:var(--head);font-weight:900;font-size:clamp(28px,4.4vw,52px);line-height:1.35;color:var(--navy)}
.vision .v-sub{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(18px,2.2vw,24px);color:var(--cobalt)}
.rule-list{list-style:none;margin:0;padding:0;counter-reset:rl;border-top:2px solid var(--navy);display:grid}
@media(min-width:960px){.rule-list{grid-template-columns:1fr 1fr;column-gap:40px}}
.rule-list li{counter-increment:rl;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.rule-list li::before{content:counter(rl,decimal-leading-zero);font-family:var(--num);font-weight:700;font-size:24px;color:var(--cobalt);line-height:1.3}
.rule-list p{margin:0}

/* 年表（沿革・略歴） */
.timeline{margin:0;padding:0;border-top:2px solid var(--navy)}
.timeline>div{display:grid;grid-template-columns:11em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.timeline dt{font-family:var(--num);font-weight:700;color:var(--cobalt);font-size:17px;position:relative;padding-left:20px}
.timeline dt::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--navy)}
.timeline dd{margin:0}
.timeline dd p{margin:0 0 6px}
.timeline .tl-sub{font-size:14px;color:var(--sub)}
@media(max-width:600px){.timeline>div{grid-template-columns:1fr;gap:4px}}

/* メッセージ */
.msg{display:grid;gap:28px;align-items:start}
@media(min-width:760px){.msg{grid-template-columns:200px 1fr;gap:48px}}
.msg img{width:200px;height:200px;border-radius:var(--radius);background:#fff}
.msg-quote{font-family:var(--head);font-weight:900;font-size:clamp(21px,2.8vw,30px);color:var(--navy);line-height:1.55;margin:0 0 18px}
.msg p{margin:0 0 14px}
.msg-sign{text-align:right;margin:16px 0 0;font-weight:700}
.msg + .msg{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}

/* プロフィール */
.profile{display:grid;gap:28px;align-items:start}
@media(min-width:760px){.profile{grid-template-columns:220px 1fr;gap:48px}}
.profile img{width:220px;height:220px;border-radius:var(--radius);background:#fff}
.pf-name{font-family:var(--head);font-size:clamp(24px,3vw,32px);font-weight:900;color:var(--navy);margin:0 0 4px}
.pf-role{margin:0 0 16px;color:var(--cobalt);font-weight:700}
.profile p{margin:0 0 12px}

/* 採用 */
.job{display:grid;gap:16px;margin-top:28px}
@media(min-width:800px){.job{grid-template-columns:repeat(3,1fr)}}
.job-item{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:24px}
.job-item svg{width:44px;height:44px;color:var(--cobalt);margin-bottom:12px}
.job-item p{margin:0;font-weight:800;color:var(--navy);font-size:17px;line-height:1.55}
.quote{margin:28px 0 0;padding:28px 30px;background:var(--navy);color:#fff;border-radius:var(--radius);font-family:var(--head);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.8;position:relative;overflow:hidden}
.quote p{margin:0;position:relative}
.quote::before{content:"";position:absolute;right:-30px;top:0;bottom:0;width:90px;background:var(--stripe);transform:skewX(-18deg);opacity:.6}
.persons{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:800px){.persons{grid-template-columns:repeat(3,1fr)}}
.persons li{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:20px 22px;font-weight:800;color:var(--navy);font-size:17px;line-height:1.6}
.career{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:800px){.career{grid-template-columns:repeat(3,1fr)}}
.career li{background:var(--paper);border-radius:var(--radius);padding:20px 22px;font-weight:800;color:var(--navy);font-size:17px}
.sec-alt .career li,.sec-alt .price-cell{background:#fff}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 18px;border-radius:999px;background:#fff;border:2px solid var(--navy);font-weight:800;color:var(--navy)}
.contact-people{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.contact-people{grid-template-columns:1fr 1fr}}
.contact-people li{display:flex;align-items:center;gap:14px;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px;font-weight:700}
.svc-badge{flex:0 0 auto;display:grid;place-items:center;min-width:110px;height:44px;padding:0 12px;border-radius:8px;background:var(--paper);font-family:var(--num);font-weight:700;color:var(--navy);font-size:16px}
.ph-box{display:grid;place-items:center;text-align:center;min-height:220px;border:2px dashed var(--line);border-radius:var(--radius);padding:20px;background:var(--paper)}
.ph-box p{margin:0;max-width:30em}
.two{display:grid;gap:24px 48px;align-items:start}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}

/* フォーム */
.form{display:grid;gap:20px;max-width:760px}
.f-row{display:grid;gap:6px}
.f-row>label,.f-row>.f-lbl{font-weight:800;font-size:15px}
.f-hint{font-size:13px;color:var(--sub);margin:0}
.req,.opt{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;margin-left:8px;border-radius:3px;vertical-align:2px;font-family:var(--sans)}
.req{background:var(--navy);color:#fff}
.opt{background:var(--paper);color:var(--sub);border:1px solid var(--line)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{width:100%;font:inherit;font-size:16px;padding:13px 12px;border:1px solid #a7acb5;border-radius:6px;background:#fff;color:var(--ink)}
.form textarea{resize:vertical}
.f-check label{font-weight:400}
.f-check input{width:18px;height:18px;vertical-align:-3px;accent-color:var(--cobalt)}
.form .btn{justify-self:start}
.radio-set{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));border:0;margin:0;padding:0;min-width:0}
.radio-set legend{font-weight:800;font-size:15px;margin-bottom:6px;padding:0}
.radio-set label{display:flex;align-items:center;gap:8px;border:1px solid #a7acb5;border-radius:6px;padding:11px 12px;cursor:pointer;font-weight:700;background:#fff;line-height:1.45}
.radio-set input{accent-color:var(--cobalt);width:18px;height:18px;flex:0 0 18px}
.radio-set label:has(input:checked){border-color:var(--cobalt);box-shadow:0 0 0 2px var(--cobalt);background:var(--paper)}
.contact-grid{display:grid;gap:36px}
@media(min-width:960px){.contact-grid{grid-template-columns:1.5fr 1fr;align-items:start}}
.contact-side{display:grid;gap:14px}
@media(min-width:960px){.contact-side{position:sticky;top:90px}}
.side-box{background:var(--paper);border-radius:var(--radius);padding:20px 22px}
.side-box h3{font-size:16px;font-weight:900;margin:0 0 6px;color:var(--navy)}
.side-box p{margin:0;font-size:15px}

/* 文書ページ（プライバシー・反社） */
.doc h2{font-size:clamp(19px,2.2vw,22px);font-weight:900;color:var(--navy);margin:44px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
.doc h3{font-size:16px;font-weight:800;color:var(--navy);margin:18px 0 4px}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:1.3em}
.doc li{margin:0 0 6px}
.doc dl{margin:0 0 12px;display:grid;grid-template-columns:7em 1fr;border-top:1px solid var(--line)}
.doc dt,.doc dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.doc dt{font-weight:800;color:var(--navy)}
.doc .sign{margin-top:44px;text-align:right}
.doc .pol li b{color:var(--navy)}
.doc-band{background:var(--tbd);padding:14px 18px;border-radius:8px;font-weight:700;margin:0 0 8px}

/* 送信完了・404 */
.done{text-align:center;padding:24px 0}
.done h1{font-size:clamp(26px,4vw,40px);color:var(--navy);font-weight:900;margin:0 0 20px;line-height:1.4}
.done p{margin:0 0 10px}
.done .btn-row{justify-content:center}
.done .links{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}

/* フッター */
.site-footer{background:var(--foot);color:var(--on-dark-2);font-size:14px}
.ft-inner{max-width:var(--wrap);margin:0 auto;padding:48px 16px 20px;display:grid;gap:28px}
@media(min-width:800px){.ft-inner{grid-template-columns:1fr 1.3fr;padding:56px 32px 20px}}
.ft-logo{height:26px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.ft-co p{margin:0 0 4px}
.ft-name{font-size:17px;font-weight:900;color:#fff}
.ft-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px}
.ft-links a,.ft-co a{color:#fff;text-decoration:none}
.ft-links a:hover,.ft-co a:hover{text-decoration:underline}
.copy{text-align:center;margin:0;padding:18px;font-size:12px;color:var(--on-dark-2);font-family:var(--num)}
.ft-stripe{height:6px;background:linear-gradient(90deg,var(--stripe) 0 70%,var(--signal) 70% 74%,var(--stripe) 74%)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* =========================================================
   トップ別案のトンマナ（top-v5 / top-x5 / top-y6 / top-z5）
   ========================================================= */
/* 10/5 配色やり直し：4案とも「濃い文字は彩度を落とした濃い中間色、色は差し色に集める」作り方にそろえた。
   参考: Radix Colors（灰色は差し色に近い色味のものを組み合わせる・12段の役割）／Tailwind CSS の色（50〜950の段）／
   Refactoring UI（真っ黒は使わない）／60-30-10（地60・文字と面30・差し色10）。明暗差は本文・見出しとも4.5:1以上 */

/* X5：深い緑（Tailwind emerald-900 #001d4f）のグラウンドと黄色（amber-300 #ffd230）のハードル。
   灰色は緑寄りの Radix sage。メインコピーは緑の上の白 */
.theme-x5{--navy:#004f3b;--navy-2:#003f2f;--cobalt:#007a55;--cobalt-l:#5ee9b5;--signal:#ffd230;--signal-h:#fee685;--cta-fg:#002c22;
  --ink:#25312b;--sub:#5f6563;--paper:#eef1f0;--line:#d7dad9;--bg:#fff;--foot:#002c22;
  --on-dark:#e6f0ea;--on-dark-2:#a9c8b7;--stripe:#006045;--hd-bg:#004f3b;--btn-radius:0}
.theme-x5 .site-header{border-bottom-color:rgba(255,255,255,.12)}
.theme-x5 .logo-img{filter:brightness(0) invert(1)}
.theme-x5 .gnav a{color:#fff}
.theme-x5 .lang{border-color:rgba(255,255,255,.3)}.theme-x5 .lang a{color:#cfe3d8}.theme-x5 .lang a[aria-current]{background:#ffd230;color:#002c22}
.theme-x5 .menu-btn{border-color:rgba(255,255,255,.35)}.theme-x5 .menu-btn .bars,.theme-x5 .menu-btn .bars::before,.theme-x5 .menu-btn .bars::after{background:#fff}
.theme-x5 .menu-btn[aria-expanded=true] .bars{background:transparent}
.theme-x5 .gnav.open{background:#004f3b}
.theme-x5 .sec-h{color:#004f3b}
.theme-x5 .btn-cta{letter-spacing:.08em}

/* V5：明るい石の地（Tailwind stone-50 #fafaf9）に、黄色（amber-400 #ffb900）の路線。
   文字は stone-700（#44403b・茶色を感じない濃い灰色）。黄色と組む灰色は黄みのある stone（Radix の sand と同じ考え方）。
   発車標と問い合わせ帯は stone-800/700 の濃い灰色、ボタンは黄色に濃い文字（明るい差し色には濃い文字を載せる） */
.theme-v5{--navy:#44403b;--navy-2:#57534d;--cobalt:#57534d;--cobalt-l:#ffb900;--signal:#ffb900;--signal-h:#ffd230;--cta-fg:#1c1917;
  --ink:#44403b;--sub:#57534d;--paper:#f5f5f4;--line:#e7e5e4;--bg:#fafaf9;--hd-bg:rgba(250,250,249,.96);--foot:#292524;
  --on-dark:#f5f5f4;--on-dark-2:#d6d3d1;--stripe:#57534d;--btn-radius:999px;--radius:12px}
.theme-v5 .btn-cta{background:#ffb900;color:#1c1917;letter-spacing:.08em}
.theme-v5 .btn-cta:hover{background:#ffd230}
.theme-v5 .btn-line{color:#44403b;border-color:#44403b}
.theme-v5 .sec-h::before{width:16px;height:16px;transform:rotate(45deg);background:#ffb900;box-shadow:0 0 0 4px #44403b inset;left:2px;top:2px}
.theme-v5 .sec-h{padding-top:30px}
.theme-v5 .recruit-band{background:#ffb900;color:#1c1917}
.theme-v5 .recruit-band h2,.theme-v5 .recruit-band p{color:#1c1917}
.theme-v5 .recruit-band .btn-light{background:#44403b;color:#fff}
.theme-v5 .recruit-band .hero-stripes span{background:#44403b}
.theme-v5 .stat-v .num{color:#44403b}
@media(min-width:900px){.theme-v5 .stats li+li{border-left-color:#ffb900}}
.theme-v5 .mem img{box-shadow:0 0 0 4px #fafaf9,0 0 0 7px #ffb900}
.theme-v5 .reason,.theme-v5 .case,.theme-v5 .svc-card{background:#fff}
.theme-v5 .reason-n{color:#ffb900;-webkit-text-stroke:1px #44403b}
.theme-v5 .bar-fill.after{background:#ffb900}
.theme-v5 .ft-stripe{background:#ffb900}

/* Y6：Radix の indigo（差し色 indigo-9 #3e63dd）と、青みの灰色 slate の組み合わせ。
   メインコピーと検索窓の太枠は Tailwind slate-700（#314158・青みの濃い灰色）。問い合わせ帯は indigo-12（#1f2d5c） */
.theme-y6{--navy:#314158;--navy-2:#45556c;--cobalt:#3a5bc7;--cobalt-l:#8da4ef;--signal:#3e63dd;--signal-h:#3358d4;--cta-fg:#fff;
  --ink:#314158;--sub:#60646c;--paper:#f0f0f3;--line:#d9d9e0;--bg:#f9f9fb;--hd-bg:rgba(249,249,251,.96);--foot:#1d293d;
  --on-dark:#e0e7ff;--on-dark-2:#abbdf9;--stripe:#3a5bc7;--btn-radius:999px;--radius:28px;--card-bd:3px solid #314158}
.theme-y6 .btn-cta{background:#3e63dd;color:#fff;letter-spacing:.1em}
.theme-y6 .btn-cta:hover{background:#3358d4}
.theme-y6 .btn-hd{background:transparent;color:#314158;border:2px solid #314158}
.theme-y6 .btn-hd:hover{background:#edf2fe}
.theme-y6 .cta-band{background:#1f2d5c}
.theme-y6 .cta-band .btn-cta,.theme-y6 .sec-dark .btn-cta{background:#fff;color:#1f2d5c}
.theme-y6 .cta-band .btn-cta:hover{background:#e0e7ff}
.theme-y6 .sec-h{padding-top:0}
.theme-y6 .sec-h::before{content:none}
.theme-y6 .sec-h::after{content:"";display:inline-block;width:4px;height:1em;margin-left:.2em;background:#3e63dd;vertical-align:-.12em}
.theme-y6 .reason,.theme-y6 .case,.theme-y6 .svc-card,.theme-y6 .worries li{background:#fff;box-shadow:0 30px 60px -40px rgba(31,45,92,.28)}
.theme-y6 .mini-links a{background:#fff;border:3px solid #314158;border-radius:999px}
.theme-y6 .mini-links a:hover{background:#edf2fe}
.theme-y6 .recruit-band{background:#3e63dd}
.theme-y6 .recruit-band p{color:#fff}
.theme-y6 .gnav a::after{background:#3e63dd}
.theme-y6 .mem img{box-shadow:0 0 0 4px #f9f9fb,0 0 0 7px #314158}
.theme-y6 .case-body .bars-fig{border-radius:18px}
.theme-y6 .bar-fill.after{background:#3e63dd}
@media(min-width:900px){.theme-y6 .stats li+li{border-left:3px solid #314158}}
.theme-y6 .ft-stripe{background:#3e63dd}

/* Z5：Radix の violet（差し色 violet-9 #6e56cf）と、紫みの灰色 mauve の組み合わせ。角のない形。
   メインコピーと答えの枠は mauve の濃い側（#3e3950・紫みの濃い灰色）。問い合わせ帯は violet-12（#2f265f）、フッターは mauve-12（#211f26） */
.theme-z5{--navy:#3e3950;--navy-2:#65636d;--cobalt:#6550b9;--cobalt-l:#aa99ec;--signal:#6e56cf;--signal-h:#654dc4;--cta-fg:#fff;
  --ink:#3e3950;--sub:#65636d;--paper:#f2eff3;--line:#dbd8e0;--bg:#faf9fb;--hd-bg:rgba(250,249,251,.96);--foot:#211f26;
  --on-dark:#f4f0fe;--on-dark-2:#c2b5f5;--stripe:#2f265f;--btn-radius:0;--radius:0;--card-bd:2px solid #3e3950;
  --head:"Noto Sans JP",var(--sans)}
.theme-z5 body{font-family:"Noto Sans JP",var(--sans)}
.theme-z5 .btn-cta{background:#6e56cf;color:#fff;letter-spacing:.1em}
.theme-z5 .btn-cta:hover{background:#654dc4}
.theme-z5 .cta-band{background:#2f265f}
.theme-z5 .cta-band .btn-cta{background:#fff;color:#2f265f}
.theme-z5 .cta-band .btn-cta:hover{background:#ebe4ff}
.theme-z5 .sec-h::before{width:12px;height:12px;transform:rotate(45deg);background:#6e56cf;left:3px;top:4px}
.theme-z5 .reason,.theme-z5 .case,.theme-z5 .svc-card,.theme-z5 .worries li{background:#fff}
.theme-z5 .mini-links a{background:#fff;border:2px solid #3e3950}
.theme-z5 .recruit-band{background:#6e56cf}
.theme-z5 .subhero,.theme-z5 .recruit-band{clip-path:none}
.theme-z5 .gnav a::after{background:#6e56cf}
.theme-z5 .mem img{border-radius:0;box-shadow:0 0 0 2px #3e3950}
.theme-z5 .mem-row img{border-radius:0}
.theme-z5 .bars-fig{border-radius:0;background:#fff;border:2px solid #3e3950}
.theme-z5 .bar-fill.after{background:#6e56cf}
@media(min-width:900px){.theme-z5 .stats li+li{border-left:2px solid #3e3950}}
.theme-z5 .ft-stripe{background:#6e56cf}

/* 10/5 目視で直した所 */
.stats li{display:flex;flex-direction:column}
.stat-v{min-height:clamp(48px,5.8vw,78px);align-items:flex-end}
.stat-v.txt{padding-bottom:.2em}
.sec-alt .mini-links a{background:#fff}
.sec-alt .mini-links a:hover{background:var(--line)}
@media(max-width:480px){.demo-bar{font-size:11px}}
.theme-y6 .hero-stripes,.theme-z5 .hero-stripes{display:none}
.theme-y6 .subhero,.theme-y6 .recruit-band{clip-path:none}
.theme-y6 .recruit-band{padding-top:64px;border-radius:0}
.theme-z5 .recruit-band{padding-top:64px}
@media(max-width:480px){.stat-v.txt{font-size:19px}}
.price-v.sm{font-size:clamp(19px,2vw,23px)}
.tbl .chips{gap:6px}.tbl .chips li{padding:3px 12px;font-size:14px;border-width:1.5px}
body{display:flex;flex-direction:column;min-height:100vh}main{flex:1 0 auto}
@media(max-width:759px){.msg img,.profile img{width:140px;height:140px}}
.msg-link{text-align:right;margin:6px 0 0;font-size:14px}
@media(min-width:900px){.reasons.reasons-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.reasons.reasons-4{grid-template-columns:repeat(4,1fr);gap:20px}}
.reason-top svg{width:34px;height:34px;flex:0 0 34px}

/* =========================================================
   印象に残る版（top-v5b / x5b / y6b / z5b・10/5）
   「シンビの色」を1つ決めて大きな面で使う。色はブランド色1つ＋補助1つ＋灰色まで。柄は足さない。
   FVの地（またはFVの半分）・任せる理由の段・問い合わせの帯をブランド色の面にし、採用の帯とフッターは補助色。
   --brand（面の色）／--on-brand（面の上の文字）／--ink-b（補助色）／--cta-bg・--cta-fg（行動ボタン）
   ========================================================= */
.theme-v5b{--brand:#ffc21a;--on-brand:#292524;--ink-b:#292524;--cta-bg:#292524;--cta-fg:#fff;
  --navy:#292524;--cobalt:#44403b;--signal:#ffc21a;--signal-h:#ffd34d;--foot:#1c1917;--hd-bg:#ffc21a;--stripe:#44403b}
.theme-x5b{--brand:#b8e34a;--on-brand:#003a2b;--ink-b:#003a2b;--cta-bg:#003a2b;--cta-fg:#fff;
  --navy:#003a2b;--cobalt:#00654a;--signal:#b8e34a;--signal-h:#cbec74;--foot:#002a1f;--hd-bg:#b8e34a;--stripe:#00654a;--line:#d7dad9}
.theme-y6b{--brand:#2ec4b6;--on-brand:#08332f;--ink-b:#08332f;--cta-bg:#08332f;--cta-fg:#fff;
  --navy:#08332f;--cobalt:#0d7a70;--cobalt-l:#2ec4b6;--signal:#2ec4b6;--signal-h:#5fd6cb;--foot:#062623;--hd-bg:#2ec4b6;
  --ink:#08332f;--sub:#4c5a58;--paper:#eef3f2;--line:#d6dfdd;--bg:#fff;--card-bd:3px solid #08332f;--on-dark:#e3f7f4;--on-dark-2:#a6dcd6}
.theme-z5b{--brand:#6f4cf5;--on-brand:#fff;--ink-b:#2a2140;--cta-bg:#6f4cf5;--cta-fg:#fff;
  --navy:#2a2140;--cobalt:#5b3fd6;--cobalt-l:#a996fa;--signal:#6f4cf5;--signal-h:#5b3fd6;--foot:#2a2140;
  --ink:#2a2140;--sub:#57535f;--card-bd:2px solid #2a2140;--on-dark:#f1edff;--on-dark-2:#c9bcfc}

/* 柄（斜めの帯）は出さない・斜めの切り口もやめて面をまっすぐ見せる */
.bold .hero-stripes{display:none}
.bold .recruit-band{clip-path:none;padding-top:72px;padding-bottom:72px}

/* ヘッダー：FVと同じ面に続ける（Z5b は白のまま） */
.bold .site-header{border-bottom-color:rgba(0,0,0,.1)}
.theme-x5b .logo-img{filter:none}
.theme-x5b .gnav a,.theme-v5b .gnav a,.theme-y6b .gnav a{color:var(--on-brand)}
.bold .gnav a::after{background:var(--ink-b)}
.theme-z5b .gnav a::after{background:var(--brand)}
.theme-x5b .lang{border-color:rgba(0,58,43,.3)}.theme-x5b .lang a{color:#003a2b}
.bold .lang a[aria-current]{background:var(--ink-b);color:#fff}
.theme-x5b .menu-btn{border-color:rgba(0,58,43,.35)}
.theme-x5b .menu-btn .bars,.theme-x5b .menu-btn .bars::before,.theme-x5b .menu-btn .bars::after{background:#003a2b}
.theme-x5b .menu-btn[aria-expanded=true] .bars{background:transparent}
.theme-x5b .gnav.open{background:#fff}
.theme-x5b .gnav.open a{color:#003a2b}
@media(max-width:1099px){.bold .gnav a{color:var(--ink)}}
.bold .btn-cta{background:var(--cta-bg);color:var(--cta-fg);letter-spacing:.08em}
.bold .btn-cta:hover{background:var(--ink-b);color:#fff}
.theme-z5b .btn-cta:hover{background:#5b3fd6}
.theme-y6b .btn-hd{background:var(--cta-bg);color:#fff;border:0}
.theme-y6b .btn-hd:hover{background:#0d4a44}

/* 見出しの印・線・図はブランド色 */
.bold .sec-h{color:var(--navy)}
.bold .sec-h::before{background:var(--brand)}
.theme-v5b .sec-h::before{box-shadow:none}
.theme-y6b .sec-h::after{background:var(--brand)}
.bold .mem img{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--brand)}
.theme-z5b .mem img{box-shadow:0 0 0 2px var(--ink-b),0 0 0 6px var(--brand)}
.bold .bar-fill.after{background:var(--brand)}
.theme-v5b .reason-n{color:var(--navy);-webkit-text-stroke:0}
.bold .reason-n{color:var(--cobalt)}
.bold .svc-ico{color:var(--ink-b)}
.bold .btn-line{color:var(--ink-b);border-color:var(--ink-b)}
.bold .mini-links svg{color:var(--ink-b)}
.theme-y6b .mini-links a{border-color:#08332f}
.theme-y6b .mini-links a:hover{background:#e3f7f4}
.theme-y6b .reason,.theme-y6b .case,.theme-y6b .svc-card,.theme-y6b .worries li{box-shadow:none}

/* 任せる理由の段：ブランド色の面（1回目）。FVのすぐ下に置くと面がつながって1枚に見えるので、白い段を2つはさんだここにする */
.bold .sec-mid{background:var(--brand);color:var(--on-brand)}
.bold .sec-mid .sec-h{color:var(--on-brand)}
.bold .sec-mid .sec-h::before{background:var(--on-brand)}
.theme-y6b .sec-mid .sec-h::after{background:var(--on-brand)}
.bold .sec-mid .reason{background:#fff;border-color:transparent;color:var(--ink)}
.theme-y6b .sec-mid .reason,.theme-z5b .sec-mid .reason{border-color:var(--ink-b)}

/* 採用の帯 */
.recruit-band{position:relative;background:var(--cobalt);color:#fff;overflow:hidden;padding:calc(64px + var(--slant)) 0 64px;clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
.recruit-band .hero-stripes span{background:#fff}
.recruit-band .hero-stripes span:nth-child(1){left:72%;width:10%;opacity:.12}
.recruit-band .hero-stripes span:nth-child(2){left:85%;width:3%;opacity:.25}
.recruit-band .hero-stripes span:nth-child(3){left:90%;width:1.5%;background:var(--signal);opacity:1}
.recruit-band .hero-stripes span:nth-child(4){left:95%;width:20%;opacity:.1}
@media(max-width:999px){.recruit-band .hero-stripes span{opacity:.1!important}.recruit-band .hero-stripes span:nth-child(3){display:none}}
.rb-inner{position:relative;z-index:2;display:grid;gap:28px;align-items:center}
@media(min-width:900px){.rb-inner{grid-template-columns:1fr auto}}
.recruit-band h2{font-size:clamp(28px,4.4vw,48px);font-weight:900;margin:0 0 14px;line-height:1.3}
.recruit-band p{margin:0;color:var(--on-dark);max-width:40em}

/* 問い合わせの帯 */
.cta-band{background:var(--navy);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.cta-band .hero-stripes span:nth-child(1){left:78%;width:10%;opacity:.4}
.cta-band .hero-stripes span:nth-child(2){left:91%;width:3%;opacity:.6}
.cta-band .hero-stripes span:nth-child(3),.cta-band .hero-stripes span:nth-child(4){display:none}
@media(max-width:999px){.cta-band .hero-stripes{display:none}}
.cta-inner{position:relative;z-index:2;display:grid;gap:22px;align-items:center}
@media(min-width:900px){.cta-inner{grid-template-columns:1fr auto;gap:40px}}
.cta-band h2{margin:0 0 10px;font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.4}
.cta-band p{margin:0 0 6px;color:var(--on-dark)}
.cta-band .reply{font-weight:800;color:#fff}

/* 表 */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:15px 14px;text-align:left;vertical-align:top}
.tbl tbody th{font-weight:800;color:var(--navy);white-space:nowrap}
.tbl-kv tbody th{width:9.5em;background:var(--paper)}
.tbl-kv tr:first-child th,.tbl-kv tr:first-child td{border-top:2px solid var(--navy)}
@media(max-width:600px){
  .tbl-kv tbody th,.tbl-kv tbody td{display:block;width:auto}
  .tbl-kv tbody th{border-bottom:0;padding-bottom:4px}
  .tbl-kv tr:first-child td{border-top:0}
}

/* 料金・数字の箱 */
.price-row{display:grid;gap:16px;margin:24px 0}
@media(min-width:720px){.price-row{grid-template-columns:repeat(3,1fr)}}
.price-cell{background:var(--paper);border-radius:var(--radius);padding:20px 22px}
.price-cell p{margin:0}
.price-k{font-size:14px;font-weight:700;color:var(--sub)}
.price-v{font-weight:900;color:var(--navy);font-size:clamp(22px,2.6vw,28px);line-height:1.3;font-family:var(--head)}
.price-v .num{font-size:1.35em;color:var(--cobalt)}
.price-big{font-weight:900;font-size:clamp(22px,3vw,30px);color:var(--navy);margin:0 0 8px;line-height:1.4;font-family:var(--head)}
.price-big .num{color:var(--cobalt);font-size:1.3em}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:720px){.incl{grid-template-columns:repeat(3,1fr)}}
.incl li{display:flex;gap:10px;align-items:center;background:#fff;border:var(--card-bd);border-radius:8px;padding:14px 16px;font-weight:700}
.incl svg{width:20px;height:20px;flex:0 0 20px;color:var(--cobalt)}
.small{font-size:14px;color:var(--sub)}
.small p{margin:4px 0}

/* 流れ図 */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flow li{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:18px 20px}
.flow li:not(:last-child)::after{content:"";position:absolute;left:34px;bottom:-15px;width:14px;height:14px;background:var(--cobalt);clip-path:polygon(0 0,100% 0,50% 100%);z-index:1}
.flow-n{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--num);font-weight:700;font-size:17px;display:grid;place-items:center}
.flow-t{margin:0;font-weight:800;line-height:1.5}
.flow-d{margin:4px 0 0;font-size:14px;color:var(--sub)}
@media(min-width:900px){
  .flow{grid-auto-flow:column;grid-auto-columns:1fr;gap:22px}
  .flow li{flex-direction:column;gap:12px}
  .flow li:not(:last-child)::after{left:auto;right:-18px;top:28px;bottom:auto;clip-path:polygon(0 0,100% 50%,0 100%)}
}

/* 1日の流れ */
.day{list-style:none;margin:0;padding:0;position:relative}
.day::before{content:"";position:absolute;left:68px;top:10px;bottom:10px;width:3px;background:linear-gradient(var(--cobalt),var(--signal))}
.day li{display:grid;grid-template-columns:56px 1fr;gap:32px;padding:10px 0;position:relative}
.day li::after{content:"";position:absolute;left:63px;top:20px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--cobalt)}
.day-t{font-family:var(--num);font-weight:700;font-size:20px;color:var(--navy);text-align:right}
.day-d{margin:0;font-weight:700;padding-top:2px}
@media(min-width:900px){.day{display:grid;grid-template-columns:repeat(7,1fr);gap:0}.day::before{left:0;right:0;top:40px;bottom:auto;width:auto;height:3px;background:linear-gradient(90deg,var(--cobalt),var(--signal))}.day li{grid-template-columns:1fr;gap:28px;padding:0 10px 0 0}.day li::after{left:0;top:34px}.day-t{text-align:left}.day-d{font-size:15px}}

/* 悩み */
.worries{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:800px){.worries{grid-template-columns:repeat(2,1fr)}.worries.n3{grid-template-columns:repeat(3,1fr)}}
.worries li{background:#fff;padding:20px 22px 20px 52px;font-weight:800;position:relative;border-radius:var(--radius);border:var(--card-bd);line-height:1.6}
.worries li::before{content:"";position:absolute;left:20px;top:25px;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 2px var(--cobalt)}
.worries li::after{content:"";position:absolute;left:26px;top:31px;width:6px;height:6px;border-radius:50%;background:var(--cobalt)}

/* FAQ */
.faq-list{border-top:2px solid var(--navy)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:800;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--num);color:var(--cobalt);margin-right:.7em;font-size:20px}
.faq summary::after{content:"";position:absolute;right:10px;top:28px;width:10px;height:10px;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg);top:33px}
.faq-a{padding:0 0 20px 1.9em}
.faq-a p{margin:0}

/* 理念・行動指針 */
.vision{display:grid;gap:12px}
.vision .v-big{margin:0;font-family:var(--head);font-weight:900;font-size:clamp(28px,4.4vw,52px);line-height:1.35;color:var(--navy)}
.vision .v-sub{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(18px,2.2vw,24px);color:var(--cobalt)}
.rule-list{list-style:none;margin:0;padding:0;counter-reset:rl;border-top:2px solid var(--navy);display:grid}
@media(min-width:960px){.rule-list{grid-template-columns:1fr 1fr;column-gap:40px}}
.rule-list li{counter-increment:rl;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.rule-list li::before{content:counter(rl,decimal-leading-zero);font-family:var(--num);font-weight:700;font-size:24px;color:var(--cobalt);line-height:1.3}
.rule-list p{margin:0}

/* 年表（沿革・略歴） */
.timeline{margin:0;padding:0;border-top:2px solid var(--navy)}
.timeline>div{display:grid;grid-template-columns:11em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.timeline dt{font-family:var(--num);font-weight:700;color:var(--cobalt);font-size:17px;position:relative;padding-left:20px}
.timeline dt::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--navy)}
.timeline dd{margin:0}
.timeline dd p{margin:0 0 6px}
.timeline .tl-sub{font-size:14px;color:var(--sub)}
@media(max-width:600px){.timeline>div{grid-template-columns:1fr;gap:4px}}

/* メッセージ */
.msg{display:grid;gap:28px;align-items:start}
@media(min-width:760px){.msg{grid-template-columns:200px 1fr;gap:48px}}
.msg img{width:200px;height:200px;border-radius:var(--radius);background:#fff}
.msg-quote{font-family:var(--head);font-weight:900;font-size:clamp(21px,2.8vw,30px);color:var(--navy);line-height:1.55;margin:0 0 18px}
.msg p{margin:0 0 14px}
.msg-sign{text-align:right;margin:16px 0 0;font-weight:700}
.msg + .msg{margin-top:56px;padding-top:48px;border-top:1px solid var(--line)}

/* プロフィール */
.profile{display:grid;gap:28px;align-items:start}
@media(min-width:760px){.profile{grid-template-columns:220px 1fr;gap:48px}}
.profile img{width:220px;height:220px;border-radius:var(--radius);background:#fff}
.pf-name{font-family:var(--head);font-size:clamp(24px,3vw,32px);font-weight:900;color:var(--navy);margin:0 0 4px}
.pf-role{margin:0 0 16px;color:var(--cobalt);font-weight:700}
.profile p{margin:0 0 12px}

/* 採用 */
.job{display:grid;gap:16px;margin-top:28px}
@media(min-width:800px){.job{grid-template-columns:repeat(3,1fr)}}
.job-item{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:24px}
.job-item svg{width:44px;height:44px;color:var(--cobalt);margin-bottom:12px}
.job-item p{margin:0;font-weight:800;color:var(--navy);font-size:17px;line-height:1.55}
.quote{margin:28px 0 0;padding:28px 30px;background:var(--navy);color:#fff;border-radius:var(--radius);font-family:var(--head);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.8;position:relative;overflow:hidden}
.quote p{margin:0;position:relative}
.quote::before{content:"";position:absolute;right:-30px;top:0;bottom:0;width:90px;background:var(--stripe);transform:skewX(-18deg);opacity:.6}
.persons{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:800px){.persons{grid-template-columns:repeat(3,1fr)}}
.persons li{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:20px 22px;font-weight:800;color:var(--navy);font-size:17px;line-height:1.6}
.career{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:800px){.career{grid-template-columns:repeat(3,1fr)}}
.career li{background:var(--paper);border-radius:var(--radius);padding:20px 22px;font-weight:800;color:var(--navy);font-size:17px}
.sec-alt .career li,.sec-alt .price-cell{background:#fff}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 18px;border-radius:999px;background:#fff;border:2px solid var(--navy);font-weight:800;color:var(--navy)}
.contact-people{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.contact-people{grid-template-columns:1fr 1fr}}
.contact-people li{display:flex;align-items:center;gap:14px;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px;font-weight:700}
.svc-badge{flex:0 0 auto;display:grid;place-items:center;min-width:110px;height:44px;padding:0 12px;border-radius:8px;background:var(--paper);font-family:var(--num);font-weight:700;color:var(--navy);font-size:16px}
.ph-box{display:grid;place-items:center;text-align:center;min-height:220px;border:2px dashed var(--line);border-radius:var(--radius);padding:20px;background:var(--paper)}
.ph-box p{margin:0;max-width:30em}
.two{display:grid;gap:24px 48px;align-items:start}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}

/* フォーム */
.form{display:grid;gap:20px;max-width:760px}
.f-row{display:grid;gap:6px}
.f-row>label,.f-row>.f-lbl{font-weight:800;font-size:15px}
.f-hint{font-size:13px;color:var(--sub);margin:0}
.req,.opt{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;margin-left:8px;border-radius:3px;vertical-align:2px;font-family:var(--sans)}
.req{background:var(--navy);color:#fff}
.opt{background:var(--paper);color:var(--sub);border:1px solid var(--line)}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{width:100%;font:inherit;font-size:16px;padding:13px 12px;border:1px solid #a7acb5;border-radius:6px;background:#fff;color:var(--ink)}
.form textarea{resize:vertical}
.f-check label{font-weight:400}
.f-check input{width:18px;height:18px;vertical-align:-3px;accent-color:var(--cobalt)}
.form .btn{justify-self:start}
.radio-set{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));border:0;margin:0;padding:0;min-width:0}
.radio-set legend{font-weight:800;font-size:15px;margin-bottom:6px;padding:0}
.radio-set label{display:flex;align-items:center;gap:8px;border:1px solid #a7acb5;border-radius:6px;padding:11px 12px;cursor:pointer;font-weight:700;background:#fff;line-height:1.45}
.radio-set input{accent-color:var(--cobalt);width:18px;height:18px;flex:0 0 18px}
.radio-set label:has(input:checked){border-color:var(--cobalt);box-shadow:0 0 0 2px var(--cobalt);background:var(--paper)}
.contact-grid{display:grid;gap:36px}
@media(min-width:960px){.contact-grid{grid-template-columns:1.5fr 1fr;align-items:start}}
.contact-side{display:grid;gap:14px}
@media(min-width:960px){.contact-side{position:sticky;top:90px}}
.side-box{background:var(--paper);border-radius:var(--radius);padding:20px 22px}
.side-box h3{font-size:16px;font-weight:900;margin:0 0 6px;color:var(--navy)}
.side-box p{margin:0;font-size:15px}

/* 文書ページ（プライバシー・反社） */
.doc h2{font-size:clamp(19px,2.2vw,22px);font-weight:900;color:var(--navy);margin:44px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
.doc h3{font-size:16px;font-weight:800;color:var(--navy);margin:18px 0 4px}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:1.3em}
.doc li{margin:0 0 6px}
.doc dl{margin:0 0 12px;display:grid;grid-template-columns:7em 1fr;border-top:1px solid var(--line)}
.doc dt,.doc dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.doc dt{font-weight:800;color:var(--navy)}
.doc .sign{margin-top:44px;text-align:right}
.doc .pol li b{color:var(--navy)}
.doc-band{background:var(--tbd);padding:14px 18px;border-radius:8px;font-weight:700;margin:0 0 8px}
/* 10/7 プライバシーポリシー：「(1) 」で始まる並び（点なし・2行目は番号の後ろにそろえる）と、項目名が長い表 */
.doc ul.num{list-style:none;padding-left:0}
.doc ul.num li{padding-left:2.4em;text-indent:-2.4em}
.doc dl.wide{grid-template-columns:13em 1fr}
.doc dl.wide dt{padding-right:1.2em}
@media(max-width:640px){
  .doc dl.wide{grid-template-columns:1fr}
  .doc dl.wide dt{border-bottom:0;padding:10px 0 0}
  .doc dl.wide dd{padding-top:4px}
}

/* 送信完了・404 */
.done{text-align:center;padding:24px 0}
.done h1{font-size:clamp(26px,4vw,40px);color:var(--navy);font-weight:900;margin:0 0 20px;line-height:1.4}
.done p{margin:0 0 10px}
.done .btn-row{justify-content:center}
.done .links{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}

/* フッター */
.site-footer{background:var(--foot);color:var(--on-dark-2);font-size:14px}
.ft-inner{max-width:var(--wrap);margin:0 auto;padding:48px 16px 20px;display:grid;gap:28px}
@media(min-width:800px){.ft-inner{grid-template-columns:1fr 1.3fr;padding:56px 32px 20px}}
.ft-logo{height:26px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.ft-co p{margin:0 0 4px}
.ft-name{font-size:17px;font-weight:900;color:#fff}
.ft-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px}
.ft-links a,.ft-co a{color:#fff;text-decoration:none}
.ft-links a:hover,.ft-co a:hover{text-decoration:underline}
.copy{text-align:center;margin:0;padding:18px;font-size:12px;color:var(--on-dark-2);font-family:var(--num)}
.ft-stripe{height:6px;background:linear-gradient(90deg,var(--stripe) 0 70%,var(--signal) 70% 74%,var(--stripe) 74%)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* =========================================================
   トップ別案のトンマナ（top-v5 / top-x5 / top-y6 / top-z5）
   ========================================================= */
/* 10/5 配色やり直し：4案とも「濃い文字は彩度を落とした濃い中間色、色は差し色に集める」作り方にそろえた。
   参考: Radix Colors（灰色は差し色に近い色味のものを組み合わせる・12段の役割）／Tailwind CSS の色（50〜950の段）／
   Refactoring UI（真っ黒は使わない）／60-30-10（地60・文字と面30・差し色10）。明暗差は本文・見出しとも4.5:1以上 */

/* X5：深い緑（Tailwind emerald-900 #001d4f）のグラウンドと黄色（amber-300 #ffd230）のハードル。
   灰色は緑寄りの Radix sage。メインコピーは緑の上の白 */
.theme-x5{--navy:#004f3b;--navy-2:#003f2f;--cobalt:#007a55;--cobalt-l:#5ee9b5;--signal:#ffd230;--signal-h:#fee685;--cta-fg:#002c22;
  --ink:#25312b;--sub:#5f6563;--paper:#eef1f0;--line:#d7dad9;--bg:#fff;--foot:#002c22;
  --on-dark:#e6f0ea;--on-dark-2:#a9c8b7;--stripe:#006045;--hd-bg:#004f3b;--btn-radius:0}
.theme-x5 .site-header{border-bottom-color:rgba(255,255,255,.12)}
.theme-x5 .logo-img{filter:brightness(0) invert(1)}
.theme-x5 .gnav a{color:#fff}
.theme-x5 .lang{border-color:rgba(255,255,255,.3)}.theme-x5 .lang a{color:#cfe3d8}.theme-x5 .lang a[aria-current]{background:#ffd230;color:#002c22}
.theme-x5 .menu-btn{border-color:rgba(255,255,255,.35)}.theme-x5 .menu-btn .bars,.theme-x5 .menu-btn .bars::before,.theme-x5 .menu-btn .bars::after{background:#fff}
.theme-x5 .menu-btn[aria-expanded=true] .bars{background:transparent}
.theme-x5 .gnav.open{background:#004f3b}
.theme-x5 .sec-h{color:#004f3b}
.theme-x5 .btn-cta{letter-spacing:.08em}

/* V5：明るい石の地（Tailwind stone-50 #fafaf9）に、黄色（amber-400 #ffb900）の路線。
   文字は stone-700（#44403b・茶色を感じない濃い灰色）。黄色と組む灰色は黄みのある stone（Radix の sand と同じ考え方）。
   発車標と問い合わせ帯は stone-800/700 の濃い灰色、ボタンは黄色に濃い文字（明るい差し色には濃い文字を載せる） */
.theme-v5{--navy:#44403b;--navy-2:#57534d;--cobalt:#57534d;--cobalt-l:#ffb900;--signal:#ffb900;--signal-h:#ffd230;--cta-fg:#1c1917;
  --ink:#44403b;--sub:#57534d;--paper:#f5f5f4;--line:#e7e5e4;--bg:#fafaf9;--hd-bg:rgba(250,250,249,.96);--foot:#292524;
  --on-dark:#f5f5f4;--on-dark-2:#d6d3d1;--stripe:#57534d;--btn-radius:999px;--radius:12px}
.theme-v5 .btn-cta{background:#ffb900;color:#1c1917;letter-spacing:.08em}
.theme-v5 .btn-cta:hover{background:#ffd230}
.theme-v5 .btn-line{color:#44403b;border-color:#44403b}
.theme-v5 .sec-h::before{width:16px;height:16px;transform:rotate(45deg);background:#ffb900;box-shadow:0 0 0 4px #44403b inset;left:2px;top:2px}
.theme-v5 .sec-h{padding-top:30px}
.theme-v5 .recruit-band{background:#ffb900;color:#1c1917}
.theme-v5 .recruit-band h2,.theme-v5 .recruit-band p{color:#1c1917}
.theme-v5 .recruit-band .btn-light{background:#44403b;color:#fff}
.theme-v5 .recruit-band .hero-stripes span{background:#44403b}
.theme-v5 .stat-v .num{color:#44403b}
@media(min-width:900px){.theme-v5 .stats li+li{border-left-color:#ffb900}}
.theme-v5 .mem img{box-shadow:0 0 0 4px #fafaf9,0 0 0 7px #ffb900}
.theme-v5 .reason,.theme-v5 .case,.theme-v5 .svc-card{background:#fff}
.theme-v5 .reason-n{color:#ffb900;-webkit-text-stroke:1px #44403b}
.theme-v5 .bar-fill.after{background:#ffb900}
.theme-v5 .ft-stripe{background:#ffb900}

/* Y6：Radix の indigo（差し色 indigo-9 #3e63dd）と、青みの灰色 slate の組み合わせ。
   メインコピーと検索窓の太枠は Tailwind slate-700（#314158・青みの濃い灰色）。問い合わせ帯は indigo-12（#1f2d5c） */
.theme-y6{--navy:#314158;--navy-2:#45556c;--cobalt:#3a5bc7;--cobalt-l:#8da4ef;--signal:#3e63dd;--signal-h:#3358d4;--cta-fg:#fff;
  --ink:#314158;--sub:#60646c;--paper:#f0f0f3;--line:#d9d9e0;--bg:#f9f9fb;--hd-bg:rgba(249,249,251,.96);--foot:#1d293d;
  --on-dark:#e0e7ff;--on-dark-2:#abbdf9;--stripe:#3a5bc7;--btn-radius:999px;--radius:28px;--card-bd:3px solid #314158}
.theme-y6 .btn-cta{background:#3e63dd;color:#fff;letter-spacing:.1em}
.theme-y6 .btn-cta:hover{background:#3358d4}
.theme-y6 .btn-hd{background:transparent;color:#314158;border:2px solid #314158}
.theme-y6 .btn-hd:hover{background:#edf2fe}
.theme-y6 .cta-band{background:#1f2d5c}
.theme-y6 .cta-band .btn-cta,.theme-y6 .sec-dark .btn-cta{background:#fff;color:#1f2d5c}
.theme-y6 .cta-band .btn-cta:hover{background:#e0e7ff}
.theme-y6 .sec-h{padding-top:0}
.theme-y6 .sec-h::before{content:none}
.theme-y6 .sec-h::after{content:"";display:inline-block;width:4px;height:1em;margin-left:.2em;background:#3e63dd;vertical-align:-.12em}
.theme-y6 .reason,.theme-y6 .case,.theme-y6 .svc-card,.theme-y6 .worries li{background:#fff;box-shadow:0 30px 60px -40px rgba(31,45,92,.28)}
.theme-y6 .mini-links a{background:#fff;border:3px solid #314158;border-radius:999px}
.theme-y6 .mini-links a:hover{background:#edf2fe}
.theme-y6 .recruit-band{background:#3e63dd}
.theme-y6 .recruit-band p{color:#fff}
.theme-y6 .gnav a::after{background:#3e63dd}
.theme-y6 .mem img{box-shadow:0 0 0 4px #f9f9fb,0 0 0 7px #314158}
.theme-y6 .case-body .bars-fig{border-radius:18px}
.theme-y6 .bar-fill.after{background:#3e63dd}
@media(min-width:900px){.theme-y6 .stats li+li{border-left:3px solid #314158}}
.theme-y6 .ft-stripe{background:#3e63dd}

/* Z5：Radix の violet（差し色 violet-9 #6e56cf）と、紫みの灰色 mauve の組み合わせ。角のない形。
   メインコピーと答えの枠は mauve の濃い側（#3e3950・紫みの濃い灰色）。問い合わせ帯は violet-12（#2f265f）、フッターは mauve-12（#211f26） */
.theme-z5{--navy:#3e3950;--navy-2:#65636d;--cobalt:#6550b9;--cobalt-l:#aa99ec;--signal:#6e56cf;--signal-h:#654dc4;--cta-fg:#fff;
  --ink:#3e3950;--sub:#65636d;--paper:#f2eff3;--line:#dbd8e0;--bg:#faf9fb;--hd-bg:rgba(250,249,251,.96);--foot:#211f26;
  --on-dark:#f4f0fe;--on-dark-2:#c2b5f5;--stripe:#2f265f;--btn-radius:0;--radius:0;--card-bd:2px solid #3e3950;
  --head:"Noto Sans JP",var(--sans)}
.theme-z5 body{font-family:"Noto Sans JP",var(--sans)}
.theme-z5 .btn-cta{background:#6e56cf;color:#fff;letter-spacing:.1em}
.theme-z5 .btn-cta:hover{background:#654dc4}
.theme-z5 .cta-band{background:#2f265f}
.theme-z5 .cta-band .btn-cta{background:#fff;color:#2f265f}
.theme-z5 .cta-band .btn-cta:hover{background:#ebe4ff}
.theme-z5 .sec-h::before{width:12px;height:12px;transform:rotate(45deg);background:#6e56cf;left:3px;top:4px}
.theme-z5 .reason,.theme-z5 .case,.theme-z5 .svc-card,.theme-z5 .worries li{background:#fff}
.theme-z5 .mini-links a{background:#fff;border:2px solid #3e3950}
.theme-z5 .recruit-band{background:#6e56cf}
.theme-z5 .subhero,.theme-z5 .recruit-band{clip-path:none}
.theme-z5 .gnav a::after{background:#6e56cf}
.theme-z5 .mem img{border-radius:0;box-shadow:0 0 0 2px #3e3950}
.theme-z5 .mem-row img{border-radius:0}
.theme-z5 .bars-fig{border-radius:0;background:#fff;border:2px solid #3e3950}
.theme-z5 .bar-fill.after{background:#6e56cf}
@media(min-width:900px){.theme-z5 .stats li+li{border-left:2px solid #3e3950}}
.theme-z5 .ft-stripe{background:#6e56cf}

/* 10/5 目視で直した所 */
.stats li{display:flex;flex-direction:column}
.stat-v{min-height:clamp(48px,5.8vw,78px);align-items:flex-end}
.stat-v.txt{padding-bottom:.2em}
.sec-alt .mini-links a{background:#fff}
.sec-alt .mini-links a:hover{background:var(--line)}
@media(max-width:480px){.demo-bar{font-size:11px}}
.theme-y6 .hero-stripes,.theme-z5 .hero-stripes{display:none}
.theme-y6 .subhero,.theme-y6 .recruit-band{clip-path:none}
.theme-y6 .recruit-band{padding-top:64px;border-radius:0}
.theme-z5 .recruit-band{padding-top:64px}
@media(max-width:480px){.stat-v.txt{font-size:19px}}
.price-v.sm{font-size:clamp(19px,2vw,23px)}
.tbl .chips{gap:6px}.tbl .chips li{padding:3px 12px;font-size:14px;border-width:1.5px}
body{display:flex;flex-direction:column;min-height:100vh}main{flex:1 0 auto}
@media(max-width:759px){.msg img,.profile img{width:140px;height:140px}}
.msg-link{text-align:right;margin:6px 0 0;font-size:14px}
@media(min-width:900px){.reasons.reasons-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.reasons.reasons-4{grid-template-columns:repeat(4,1fr);gap:20px}}
.reason-top svg{width:34px;height:34px;flex:0 0 34px}

/* =========================================================
   印象に残る版（top-v5b / x5b / y6b / z5b・10/5）
   「シンビの色」を1つ決めて大きな面で使う。色はブランド色1つ＋補助1つ＋灰色まで。柄は足さない。
   FVの地（またはFVの半分）・任せる理由の段・問い合わせの帯をブランド色の面にし、採用の帯とフッターは補助色。
   --brand（面の色）／--on-brand（面の上の文字）／--ink-b（補助色）／--cta-bg・--cta-fg（行動ボタン）
   ========================================================= */
.theme-v5b{--brand:#ffc21a;--on-brand:#292524;--ink-b:#292524;--cta-bg:#292524;--cta-fg:#fff;
  --navy:#292524;--cobalt:#44403b;--signal:#ffc21a;--signal-h:#ffd34d;--foot:#1c1917;--hd-bg:#ffc21a;--stripe:#44403b}
.theme-x5b{--brand:#b8e34a;--on-brand:#003a2b;--ink-b:#003a2b;--cta-bg:#003a2b;--cta-fg:#fff;
  --navy:#003a2b;--cobalt:#00654a;--signal:#b8e34a;--signal-h:#cbec74;--foot:#002a1f;--hd-bg:#b8e34a;--stripe:#00654a;--line:#d7dad9}
.theme-y6b{--brand:#2ec4b6;--on-brand:#08332f;--ink-b:#08332f;--cta-bg:#08332f;--cta-fg:#fff;
  --navy:#08332f;--cobalt:#0d7a70;--cobalt-l:#2ec4b6;--signal:#2ec4b6;--signal-h:#5fd6cb;--foot:#062623;--hd-bg:#2ec4b6;
  --ink:#08332f;--sub:#4c5a58;--paper:#eef3f2;--line:#d6dfdd;--bg:#fff;--card-bd:3px solid #08332f;--on-dark:#e3f7f4;--on-dark-2:#a6dcd6}
.theme-z5b{--brand:#6f4cf5;--on-brand:#fff;--ink-b:#2a2140;--cta-bg:#6f4cf5;--cta-fg:#fff;
  --navy:#2a2140;--cobalt:#5b3fd6;--cobalt-l:#a996fa;--signal:#6f4cf5;--signal-h:#5b3fd6;--foot:#2a2140;
  --ink:#2a2140;--sub:#57535f;--card-bd:2px solid #2a2140;--on-dark:#f1edff;--on-dark-2:#c9bcfc}

/* 柄（斜めの帯）は出さない・斜めの切り口もやめて面をまっすぐ見せる */
.bold .hero-stripes{display:none}
.bold .recruit-band{clip-path:none;padding-top:72px;padding-bottom:72px}

/* ヘッダー：FVと同じ面に続ける（Z5b は白のまま） */
.bold .site-header{border-bottom-color:rgba(0,0,0,.1)}
.theme-x5b .logo-img{filter:none}
.theme-x5b .gnav a,.theme-v5b .gnav a,.theme-y6b .gnav a{color:var(--on-brand)}
.bold .gnav a::after{background:var(--ink-b)}
.theme-z5b .gnav a::after{background:var(--brand)}
.theme-x5b .lang{border-color:rgba(0,58,43,.3)}.theme-x5b .lang a{color:#003a2b}
.bold .lang a[aria-current]{background:var(--ink-b);color:#fff}
.theme-x5b .menu-btn{border-color:rgba(0,58,43,.35)}
.theme-x5b .menu-btn .bars,.theme-x5b .menu-btn .bars::before,.theme-x5b .menu-btn .bars::after{background:#003a2b}
.theme-x5b .menu-btn[aria-expanded=true] .bars{background:transparent}
.theme-x5b .gnav.open{background:#fff}
.theme-x5b .gnav.open a{color:#003a2b}
@media(max-width:1099px){.bold .gnav a{color:var(--ink)}}
.bold .btn-cta{background:var(--cta-bg);color:var(--cta-fg);letter-spacing:.08em}
.bold .btn-cta:hover{background:var(--ink-b);color:#fff}
.theme-z5b .btn-cta:hover{background:#5b3fd6}
.theme-y6b .btn-hd{background:var(--cta-bg);color:#fff;border:0}
.theme-y6b .btn-hd:hover{background:#0d4a44}

/* 見出しの印・線・図はブランド色 */
.bold .sec-h{color:var(--navy)}
.bold .sec-h::before{background:var(--brand)}
.theme-v5b .sec-h::before{box-shadow:none}
.theme-y6b .sec-h::after{background:var(--brand)}
.bold .mem img{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--brand)}
.theme-z5b .mem img{box-shadow:0 0 0 2px var(--ink-b),0 0 0 6px var(--brand)}
.bold .bar-fill.after{background:var(--brand)}
.theme-v5b .reason-n{color:var(--navy);-webkit-text-stroke:0}
.bold .reason-n{color:var(--cobalt)}
.bold .svc-ico{color:var(--ink-b)}
.bold .btn-line{color:var(--ink-b);border-color:var(--ink-b)}
.bold .mini-links svg{color:var(--ink-b)}
.theme-y6b .mini-links a{border-color:#08332f}
.theme-y6b .mini-links a:hover{background:#e3f7f4}
.theme-y6b .reason,.theme-y6b .case,.theme-y6b .svc-card,.theme-y6b .worries li{box-shadow:none}

/* 数字の段：ブランド色の面（1回目） */
.bold .sec-num{background:var(--brand);color:var(--on-brand)}
.bold .sec-num .sec-h{color:var(--on-brand)}
.bold .sec-num .sec-h::before{background:var(--on-brand)}
.theme-v5b .sec-num .sec-h::before{background:var(--on-brand)}
.theme-y6b .sec-num .sec-h::after{background:var(--on-brand)}
.bold .sec-num .stat-v,.bold .sec-num .stat-v .num,.bold .sec-num .stat-v.txt,.bold .sec-num .stat-l{color:var(--on-brand)}
@media(min-width:900px){.bold .sec-num .stats li+li{border-left:2px solid var(--on-brand);border-left-color:color-mix(in srgb,var(--on-brand) 30%,transparent)}}

/* 採用の帯：補助色の面。ボタンだけブランド色 */
.bold .recruit-band{background:var(--ink-b);color:#fff}
.bold .recruit-band h2{color:#fff}
.bold .recruit-band p{color:var(--on-dark)}
.theme-v5b .recruit-band p{color:#e7e5e4}
.theme-x5b .recruit-band p{color:#dff0c0}
.bold .recruit-band .btn-light{background:var(--brand);color:var(--on-brand)}
.bold .recruit-band .btn-light:hover{background:#fff;color:var(--ink-b)}

/* 問い合わせの帯：ブランド色の面（2回目） */
.bold .cta-band{background:var(--brand);color:var(--on-brand)}
.bold .cta-band h2,.bold .cta-band p,.bold .cta-band .reply{color:var(--on-brand)}
.bold .cta-band .btn-cta{background:var(--ink-b);color:#fff}
.bold .cta-band .btn-cta:hover{background:#fff;color:var(--ink-b)}
.theme-z5b .cta-band .btn-cta{background:#fff;color:#2a2140}
.theme-z5b .cta-band .btn-cta:hover{background:#2a2140;color:#fff}

/* フッター：補助色。上の細い線だけブランド色 */
.bold .site-footer{background:var(--foot)}
.bold .ft-stripe{background:var(--brand)}

/* =========================================================
   10/5 b版の調整（松本さん判断）
   V5b：一度は地を深い黄 #bf8600 に下げたが、松本さん判断で明るい黄 #ffc21a に戻した（ヘッダー・任せる理由の段・問い合わせの帯も上の .theme-v5b の #ffc21a のまま）
   Y6c：Y6b の作り（html に theme-y6b も付く）に X5b の配色（ライム #b8e34a・深い緑 #00153a）を当てた版
   Z5c：Z5b の作り（html に theme-z5b も付く）に Y6b の配色（青緑 #2563cd・深い青緑 #051736・白地の文字 #063381）を当てた版
   ========================================================= */

.theme-y6c{--brand:#b8e34a;--on-brand:#003a2b;--ink-b:#003a2b;--cta-bg:#003a2b;--cta-fg:#fff;
  --navy:#003a2b;--cobalt:#00654a;--cobalt-l:#b8e34a;--signal:#b8e34a;--signal-h:#cbec74;--foot:#002a1f;--hd-bg:#b8e34a;--stripe:#00654a;
  --ink:#003a2b;--sub:#4d5a55;--paper:#f1f5ec;--line:#d7dad9;--bg:#fff;--card-bd:3px solid #003a2b;--on-dark:#dff0c0;--on-dark-2:#b9d39a}
.theme-y6c .btn-hd{background:#003a2b;color:#fff}
.theme-y6c .btn-hd:hover{background:#fff;color:#003a2b}
.theme-y6c .mini-links a{border-color:#003a2b}
.theme-y6c .mini-links a:hover{background:#f0f8dc}
.theme-y6c .recruit-band p{color:#dff0c0}
@media(min-width:900px){.theme-y6c .stats li+li{border-left-color:#003a2b}}

.theme-z5c{--brand:#2ec4b6;--on-brand:#08332f;--ink-b:#08332f;--cta-bg:#08332f;--cta-fg:#fff;
  --navy:#08332f;--cobalt:#0d7a70;--cobalt-l:#2ec4b6;--signal:#2ec4b6;--signal-h:#5fd6cb;--foot:#062623;--stripe:#0d7a70;
  --ink:#08332f;--sub:#4c5a58;--paper:#eef3f2;--line:#d6dfdd;--bg:#f7faf9;--hd-bg:rgba(247,250,249,.96);
  --card-bd:2px solid #08332f;--on-dark:#e3f7f4;--on-dark-2:#a6dcd6}
.theme-z5c .btn-cta:hover{background:#0d4a44}
.theme-z5c .cta-band .btn-cta{background:#08332f;color:#fff}
.theme-z5c .cta-band .btn-cta:hover{background:#fff;color:#08332f}
.theme-z5c .mini-links a{border-color:#08332f}
.theme-z5c .mini-links a:hover{background:#e3f7f4}
.theme-z5c .bars-fig{border-color:#08332f}
.theme-z5c .mem img{box-shadow:0 0 0 2px #08332f,0 0 0 6px #2ec4b6}
@media(min-width:900px){.theme-z5c .stats li+li{border-left-color:#08332f}}
.sns-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:inherit}
.sns-ic{width:28px;height:28px;flex:0 0 28px}
.msg-link .sns-ic{width:24px;height:24px}

/* =========================================================
   10/5 足す段（s5）とイラスト・写真
   色は各案の変数（--navy・--cobalt・--paper・--line・--card-bd・--radius）だけを使い、トップ別案の配色に従う。
   暗い面・赤・左線の箱は使わない。白い地のイラストは白いカードに入れて、灰色の段でも浮かないようにする
   ========================================================= */
.sec-bt{border-top:1px solid var(--line)}
.sec-cont{padding-top:8px}
@media(min-width:768px){.sec-cont{padding-top:8px}}
.fig{margin:0}
.fig img{width:100%;height:auto}
.fig-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;margin:0}
.fig-round img{border-radius:var(--radius)}
.two-mid{align-items:center}
.body p:last-child{margin-bottom:0}

/* 写真：角丸と淡い色の重ねで、イラストの並びになじませる */
.photo{position:relative;border-radius:calc(var(--radius) * 1.6);overflow:hidden;margin:0 0 32px}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(.96)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--signal) 18%,transparent),color-mix(in srgb,var(--cobalt) 16%,transparent))}
.photo-wide{aspect-ratio:16/9}
@media(min-width:900px){.photo-wide{aspect-ratio:21/8}}

/* 文字を重ねる図（外側が container。文字の大きさは図の幅に合わせる） */
.ov{margin:0;container-type:inline-size}
.ov-stage{position:relative;--k:1;--o:0%}
.ov-stage>img{width:100%;height:auto;display:block}
.ov-l{position:absolute;left:calc(var(--x) * var(--k) - var(--o));top:var(--y);transform:translate(-50%,-50%) rotate(var(--r,0deg));
  white-space:nowrap;font-family:var(--head);font-weight:800;line-height:1.25;font-size:clamp(10px,1.9cqw,17px);color:var(--ink);pointer-events:none}
.ov-pill{background:#fff;border:1.5px solid var(--navy);border-radius:999px;padding:.28em .85em;color:var(--navy)}
.ov-strong{background:var(--signal);border-color:var(--signal);color:var(--cta-fg)}
.ov-sm{font-size:clamp(9px,1.5cqw,14px)}
.ov-face{position:absolute;transform:translate(-50%,-50%);height:auto;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff}
.ov-sign{font-size:clamp(10px,2.4cqw,19px);color:#2b2112;letter-spacing:.04em}
.ov-on-dark{color:#fff}
.ov-v{writing-mode:vertical-rl;font-size:clamp(9px,1.9cqw,15px);letter-spacing:.12em}
.ov-box{font-size:clamp(9px,1.9cqw,18px);color:#3a2a06}
.ov-note{white-space:normal;width:9%;text-align:center;font-size:clamp(7px,1.45cqw,15px);color:#3a2a06;--r:-3deg}
.ov-tag{font-size:clamp(10px,1.7cqw,16px);display:inline-flex;align-items:center;gap:.3em;color:#2b2112}
.ov-tag b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--num);font-weight:700}
@container (max-width:560px){
  .ov-mag .ov-tag .w{display:none}
  .ov-mag .ov-tag{font-size:12px}
  .ov-sign-fig .ov-stage{aspect-ratio:1;overflow:hidden;--k:1.5;--o:25%}
  .ov-sign-fig .ov-stage>img{width:150%;max-width:none;margin-left:-25%}
  .ov-sign-fig .ov-sign{font-size:clamp(10px,3.4cqw,15px)}
  .ov-sign-fig .ov-v{font-size:clamp(9px,2.8cqw,13px)}
}

/* トップ：いまの広告運用はどちらに近いか（1枚の絵を左右半分に切る） */
.sit{display:grid;gap:20px}
@media(min-width:800px){.sit{grid-template-columns:1fr 1fr;gap:24px}}
.sit-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.sit-img{overflow:hidden;aspect-ratio:768/640;background:#fff;border-bottom:1px solid var(--line)}
.sit-img img{width:200%;max-width:none;height:auto;margin-top:-20%}
.sit-b img{margin-left:-100%}
.sit-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:16px;flex:1}
.sit-body h3{margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:900;color:var(--navy);line-height:1.4}
.sit-body .btn{align-self:flex-start;margin-top:auto}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start;line-height:1.65}
.ticks svg{width:20px;height:20px;flex:0 0 20px;color:var(--cobalt);margin-top:.2em}

/* トップ：お任せいただける範囲（6つのアイコン） */
.scope-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.scope-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.scope-grid{grid-template-columns:repeat(6,1fr)}}
.scope-grid li{background:#fff;border:var(--card-bd);border-radius:var(--radius);min-width:0}
.scope-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 10px 16px;height:100%;color:var(--ink);text-decoration:none}
a.scope-in:hover{background:var(--paper);border-radius:var(--radius)}
.scope-ic{height:64px;display:grid;place-items:center}
.scope-ic img{max-height:60px;width:auto;max-width:92px}
.scope-t{font-weight:800;font-size:15px;line-height:1.5}
.scope-go svg{width:14px;height:14px;color:var(--cobalt)}

/* トップ：無料診断の流れ（絵の上下の余白は切る） */
.ov-diag{margin-bottom:24px}
.ov-diag .ov-stage{aspect-ratio:1600/352;overflow:hidden}
.ov-diag .ov-stage>img{height:100%;object-fit:cover;object-position:50% 42.9%}
@media(min-width:720px){.price-row.n2{grid-template-columns:repeat(2,1fr)}}
.h-ico{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.h-ico-img{width:72px;height:auto;margin:0 0 26px;flex:0 0 auto}
@media(max-width:480px){.h-ico-img{width:52px}}

/* サービス一覧 */
@media(min-width:900px){.svc-card.svc-card-img{grid-template-columns:96px 1fr minmax(0,.85fr);align-items:center}}
.svc-fig img{border-radius:var(--radius)}
@media(min-width:900px){.two-guide{grid-template-columns:.9fr 1.1fr;align-items:center}}
.tbl-guide thead th{background:var(--paper);color:var(--navy);font-size:14px;font-weight:800;border-top:2px solid var(--navy)}
.tbl-guide tbody th{white-space:normal;font-weight:700;color:var(--ink)}
.tbl-guide td{white-space:nowrap}
.tbl-guide td a{display:inline-flex;gap:.4em;align-items:center;font-weight:800;text-decoration:none}
.tbl-guide td a:hover{text-decoration:underline}
.tbl-guide td svg{width:14px;height:14px;flex:0 0 14px}
@media(max-width:600px){.tbl-guide td{white-space:normal}.tbl-guide th,.tbl-guide td{padding:12px 10px}}
@media(min-width:900px){.two-roles{grid-template-columns:.9fr 1.1fr;align-items:center}}
.role-lead{font-weight:800;color:var(--navy);margin:0 0 4px}
.roles{display:grid;gap:14px;margin-top:14px}
@media(min-width:600px){.roles{grid-template-columns:1fr 1fr}}
.role{background:var(--paper);border-radius:var(--radius);padding:20px 22px}
.role h3{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--navy)}
.role-h4{margin:18px 0 8px;font-size:14px;color:var(--sub);font-weight:800}
.mini-stats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mini-stats li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;border-top:1px solid var(--line);padding-top:8px}
.ms-v{font-weight:900;color:var(--navy);font-family:var(--head)}
.ms-v .num{font-size:26px;color:var(--cobalt);margin:0 2px}
.ms-l{font-size:14px;color:var(--sub);order:-1}

/* 広告運用代行 */
.tbl-scope tbody th{white-space:normal;width:36%}
.tbl-scope tr:first-child>*{border-top:2px solid var(--navy)}
.tbl-scope td.sc-ic{width:76px;padding:10px 12px;vertical-align:middle}
.tbl-scope td.sc-ic img{width:52px;height:44px;object-fit:contain}
@media(max-width:600px){
  .tbl-scope,.tbl-scope tbody{display:block}
  .tbl-scope tr{display:grid;grid-template-columns:52px 1fr;column-gap:10px;border-bottom:1px solid var(--line);padding:12px 0}
  .tbl-scope tr:first-child{border-top:2px solid var(--navy)}
  .tbl-scope tr:first-child>*{border-top:0}
  .tbl-scope td,.tbl-scope th{display:block;border:0;padding:0;width:auto}
  .tbl-scope td.sc-ic{grid-row:span 2;width:auto;padding:2px 0}
  .tbl-scope td.sc-ic img{width:44px;height:38px}
  .tbl-scope th{margin-bottom:2px}
}
.ov-desk .ov-stage{border-radius:var(--radius);overflow:hidden}
@media(min-width:900px){.two-fee{grid-template-columns:1.05fr .95fr;align-items:start}}

/* 実績・事例 */
.points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.points li{display:grid;grid-template-columns:38px 1fr;gap:14px;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px}
.pt-n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:17px}
.points h3{margin:0 0 4px;font-size:17px;font-weight:900;color:var(--navy);line-height:1.5}
.points p{margin:0;font-size:15px}

/* 会社について */
@media(min-width:900px){.with-side{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}}
.side-fig{margin:24px auto 0;max-width:280px}
@media(min-width:900px){.side-fig{margin:0;max-width:none}}
.fig-street img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;filter:saturate(.85)}
.fig-street figcaption{font-size:12px;color:var(--sub);margin-top:6px}
.biz{display:grid;gap:20px}
@media(min-width:800px){.biz{grid-template-columns:1fr 1fr;gap:24px}}
.biz-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.biz-card>img{width:100%;height:220px;object-fit:contain;background:#fff;padding:18px 18px 0}
.biz-body{padding:16px 24px 24px}
.biz-body h3{margin:0 0 10px;font-size:clamp(20px,2.2vw,24px);font-weight:900;color:var(--navy)}
.biz-body p{margin:0 0 10px}
.biz-links{font-weight:800}
.grp-link{display:flex;align-items:center;gap:14px;margin:0 0 28px}
.grp-co{display:grid;place-items:center;min-width:150px;height:64px;padding:0 18px;border:var(--card-bd);border-radius:var(--radius);background:#fff;font-weight:900;color:var(--navy);font-size:18px;font-family:var(--head)}
.grp-co img{height:26px;width:auto}
.grp-line{flex:0 1 140px;height:2px;background:var(--cobalt)}
@media(max-width:480px){.grp-co{min-width:0;flex:1;padding:0 10px;font-size:16px}.grp-co img{height:25px}.grp-line{flex:0 0 18px}}

/* メッセージとチーム */
.ov-line{margin-bottom:8px}
.who{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.who li{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px}
.who img{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cobalt)}
.who-n{font-weight:900;color:var(--navy);margin:0 0 4px;line-height:1.4}
.who-n span{display:block;font-size:12px;color:var(--cobalt);font-weight:700}
.who p{margin:0;font-size:15px}
.who .who-n{font-size:16px}

/* 採用 */
.sups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.sup{margin:0;background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;text-align:center;min-width:0}
.sup img{width:100%;aspect-ratio:1;object-fit:contain;padding:10px;background:#fff}
.sup figcaption{font-weight:800;color:var(--navy);padding:8px 6px 12px;font-size:14px;border-top:1px solid var(--line);line-height:1.4}
@media(min-width:900px){.sups{max-width:760px}}
.fig-steps{margin-bottom:24px}
.fig-steps img{aspect-ratio:1536/700;object-fit:cover;object-position:50% 48%}

/* お問い合わせ */
.side-fig2{margin:0}
/* 10/5 目視で直した所（足す段）：重ねる文字が PC で小さかったので大きく、写真の帯は低く */
.ov-l{font-size:clamp(11px,2.5cqw,19px)}
.ov-sm{font-size:clamp(10px,2cqw,16px)}
.ov-box{font-size:clamp(10px,2.4cqw,20px)}
.ov-note{font-size:clamp(8px,1.9cqw,17px)}
.ov-tag{font-size:clamp(11px,2.3cqw,18px)}
@media(min-width:900px){.photo-wide{aspect-ratio:3/1}}
.ov-l.ov-on-dark{color:#fff}
.tbl-kv a svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-left:4px}
@container (max-width:560px){.ov-mag .ov-tag .w{display:inline}.ov-mag .ov-tag{font-size:clamp(10px,2.1cqw,16px)}}
@container (max-width:400px){.ov-mag .ov-tag .w{display:none}.ov-mag .ov-tag{font-size:12px}}
@media(max-width:600px){
  .tbl-scope tbody th{width:auto}
  .tbl-guide thead{display:none}
  .tbl-guide,.tbl-guide tbody,.tbl-guide tr{display:block}
  .tbl-guide tr{border-top:1px solid var(--line);padding:12px 2px}
  .tbl-guide tr:first-child{border-top:2px solid var(--navy)}
  .tbl-guide tbody th,.tbl-guide td{display:block;border:0;padding:0}
  .tbl-guide td{margin-top:4px}
}
/* 白い地のイラストを段の地色になじませる（写真は除く） */
.ov-stage>img,.fig:not(.photo) img,.sup img,.biz-card>img,.sit-img img{mix-blend-mode:multiply}
.fig-steps{max-width:820px}

/* =========================================================
   10/5 日本上陸支援に足す段（s6）：数字の帯・棒グラフ・回し方の輪・言語
   図はすべて HTML/CSS。色は変数だけ（赤・暗い面は使わない）
   ========================================================= */
@media(min-width:900px){.stats.stats-3{grid-template-columns:repeat(3,1fr)}}
.stats-3 .stat-v .num{font-size:clamp(40px,5vw,64px)}
.stats-3{margin-bottom:40px}
.j-nw{white-space:nowrap}
.sec-alt .h-ico-img{mix-blend-mode:multiply}
.src-note{font-size:12.5px;line-height:1.7;margin-top:20px}
.j-two{gap:24px 40px}
.photo-j{margin:0;aspect-ratio:3/2}
.photo-loop{margin-bottom:28px}

/* 100%の帯（割合の比較） */
.share-fig{margin:0;background:var(--paper);padding:20px 20px 8px;border-radius:8px}
.sec-alt .share-fig{background:var(--paper)}
.share-cap{font-weight:800;color:var(--navy);font-size:15px;margin:0 0 14px;line-height:1.5}
.share-row{display:grid;grid-template-columns:4em 1fr;gap:6px 12px;align-items:center;margin-bottom:16px}
.share-k{font-weight:800;font-size:14px;color:var(--navy)}
.share-bar{display:flex;height:34px;border-radius:4px;overflow:hidden;background:#fff}
.seg{display:flex;align-items:center;justify-content:center;font-family:var(--num);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;min-width:0}
.c1{background:var(--cobalt);color:#fff}
.c2{background:var(--signal);color:var(--cta-fg)}
.c3{background:var(--cobalt-l);color:var(--cta-fg)}
.c0{background:repeating-linear-gradient(-45deg,#c9cdd3 0 8px,#dcdfe3 8px 16px);color:var(--ink)}
.share-leg{grid-column:2;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;color:var(--sub);line-height:1.6}
.share-leg b{font-weight:700;color:var(--ink)}
.share-fig>.share-leg{margin:0 0 12px calc(4em + 12px)}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:0}

/* 比較のカード */
.cmps{display:grid;gap:20px}
@media(min-width:900px){.cmps{grid-template-columns:1fr 1fr;gap:24px}.cmp-wide{grid-column:1 / -1}}
.cmp{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:26px 24px}
.cmp h3{font-size:clamp(18px,2vw,21px);font-weight:900;color:var(--navy);margin:0 0 16px;line-height:1.5}
.cmp p{margin:14px 0 0}
.cmp .group-note{margin-top:16px}

/* 横棒グラフ（SNSの利用率） */
.hbar-fig{margin:0}
.hbar-row{display:grid;grid-template-columns:7.6em 1fr 3.4em;gap:10px;align-items:center;margin-bottom:10px}
.hbar-k{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.hbar{height:20px;background:var(--paper);border-radius:3px;overflow:hidden;display:block}
.hbar-fill{display:block;height:100%;background:var(--cobalt)}
.hbar-v{font-weight:700;font-size:16px;text-align:right}

/* 日本の広告のルール（表） */
.tbl-law tbody th{white-space:normal;width:15.5em;line-height:1.6}
.tbl-law td{line-height:1.75}
@media(max-width:600px){
  .tbl-law,.tbl-law tbody,.tbl-law tr{display:block}
  .tbl-law tbody th,.tbl-law td{display:block;width:auto;border:0}
  .tbl-law tbody th{padding:14px 14px 4px}
  .tbl-law td{padding:0 14px 14px;border-bottom:1px solid var(--line)}
  .tbl-law tr:first-child th{border-top:2px solid var(--navy)}
  .tbl-law tr:first-child td{border-top:0}
}

/* 回し方の輪（PC：楕円の上に5枚、カードの間を矢印つきの弧で。SP：縦に並べ、右側に最後から最初へ戻る線） */
.loop{position:relative}
.loop-ring-svg{display:none}
.loop-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.loop-list li{position:relative;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px 14px}
.loop-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--num);font-weight:700;font-size:16px;margin:0 8px 0 0;vertical-align:middle}
.loop-t{display:inline;margin:0;font-weight:900;color:var(--navy);font-size:18px;line-height:1.4;font-family:var(--head);vertical-align:middle}
.loop-d{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--ink)}
.loop-back{display:block;color:var(--cobalt)}
.loop-back span{font-weight:800;font-size:14px;white-space:nowrap;background:var(--paper);color:var(--cobalt);line-height:1.4}
.photo-loop{margin:28px 0 0;aspect-ratio:16/9}
@media(max-width:999px){
  .loop{padding-right:40px}
  .loop-list li:not(:last-child)::after{content:"";position:absolute;left:30px;bottom:-14px;width:14px;height:14px;background:var(--cobalt);clip-path:polygon(0 0,100% 0,50% 100%);z-index:1}
  .loop-back{position:absolute;right:4px;top:30px;bottom:30px;width:30px;border:2px dashed currentColor;border-left:0;border-radius:0 18px 18px 0}
  .loop-back::before{content:"";position:absolute;left:-6px;top:-8px;width:12px;height:14px;background:currentColor;clip-path:polygon(0 50%,100% 0,100% 100%)}
  .loop-back span{position:absolute;right:-16px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:10px 2px}
}
@media(min-width:1000px){
  .loop-wrap{display:grid;grid-template-columns:680px 1fr;gap:40px;align-items:center}
  .loop{width:680px;height:540px}
  .loop-ring-svg{display:block;position:absolute;inset:0;width:100%;height:100%;color:var(--cobalt)}
  .loop-list{display:block}
  .loop-list li{position:absolute;left:var(--lx);top:var(--ly);transform:translate(-50%,-50%);width:212px;z-index:1;box-shadow:0 10px 24px -18px rgba(0,0,0,.35)}
  .loop-back{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
  .loop-back span{display:inline-block;background:transparent;font-size:15px}
  .photo-loop{margin:0;aspect-ratio:4/5}
}
/* ご相談いただける言語 */
.lang-cards{display:grid;gap:16px}
@media(min-width:900px){.lang-cards{grid-template-columns:repeat(3,1fr);gap:24px}}
.lang-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:24px}
.lang-k{margin:0 0 8px;font-family:var(--head);font-weight:900;font-size:28px;color:var(--cobalt);line-height:1.2}
.lang-card p:last-child{margin-bottom:0}

/* =========================================================
   10/5 トップ案A（会社の名刺型）top-a。配色は今のトップ（:root）のまま。広告運用代行のセカオピの段に移した流れ図も
   ========================================================= */
.ta-h3{margin-top:56px}
.ta-sub{margin:-6px 0 20px;color:var(--sub)}
@media(min-width:1200px){.scope-grid.n5{grid-template-columns:repeat(5,1fr)}}
.ta-pair{display:grid;gap:16px;margin-top:48px}
@media(min-width:800px){.ta-pair{grid-template-columns:1fr 1fr;gap:24px}}
.ta-pc{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:flex-start}
.ta-pc h3{margin:0 0 10px;font-size:clamp(18px,2vw,21px);font-weight:900;color:var(--navy);line-height:1.5}
.ta-pc p{margin:0 0 16px;flex:1}
.ta-k{margin:0 0 6px;font-size:14px;font-weight:800;color:var(--cobalt);letter-spacing:.06em}
.ta-vision{margin-bottom:8px}
.ta-rules li{padding:12px 0}
.ta-rules li::before{font-size:20px}
.ta-doors{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:16px}
@media(min-width:800px){.ta-doors{grid-template-columns:repeat(3,1fr);gap:20px}}
.ta-doors li{min-width:0}
.ta-door{display:flex;flex-direction:column;height:100%;background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none}
.ta-door:hover{border-color:var(--cobalt)}
.ta-door-img{display:block;height:180px;background:#fff;padding:14px 14px 0}
.ta-door-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ta-door-img img.ph{object-fit:cover;border-radius:calc(var(--radius) - 4px);mix-blend-mode:normal}
.ta-door-b{display:block;padding:16px 20px 20px}
.ta-door-t{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:900;font-size:20px;color:var(--navy);line-height:1.4}
.ta-door-t svg{width:16px;height:16px;flex:0 0 16px;color:var(--cobalt)}
.ta-door:hover .ta-door-t svg{transform:translateX(3px)}
.ta-door-d{display:block;margin-top:8px;font-size:15px;color:var(--sub);line-height:1.7}
.ta-co{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.ta-co dl{margin:0;display:grid;gap:4px 32px;font-size:14px}
@media(min-width:900px){.ta-co dl{grid-template-columns:auto auto 1fr}}
.ta-co dl div{display:flex;gap:12px}
.ta-co dt{color:var(--sub);flex:0 0 auto}
.ta-co dd{margin:0}
.ta-btns{display:flex;flex-direction:column;gap:12px}
.ta-btns .btn{width:100%}
.un-diag-h{margin-top:40px}
.un-note2{margin-top:4px}
.ta-co .nw{display:inline-block}

/* 10/6 代表プロフィール（竹内さんの原稿）：MBTI・血液型の小さな表と、年ごとの年表（年を大きく、月と年齢を小さく） */
.pf-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 18px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-facts>div{display:flex;gap:10px;align-items:baseline}
.pf-facts dt{font-size:13px;font-weight:700;color:var(--sub)}
.pf-facts dd{margin:0;font-weight:700}
.timeline-y>div{grid-template-columns:9.5em 1fr}
.timeline-y dt{line-height:1.3}
.timeline-y .tl-y{display:block;font-size:22px}
.timeline-y .tl-m{display:block;font-size:14px;font-weight:700;color:var(--sub);font-family:var(--sans)}
@media(max-width:600px){.timeline-y>div{grid-template-columns:1fr}.timeline-y dt{display:flex;align-items:baseline;gap:8px}.timeline-y .tl-y,.timeline-y .tl-m{display:inline}}
/* 10/6 メッセージとチーム：竹内さんの見出しは投稿どおり h2。見た目は神田さんの見出し（p.msg-quote）とそろえる */
h2.msg-quote{padding:0}

/* 10/6 松本「この重なり、ずっと緑」：緑の系統（既定・X5系）は、相談の帯を淡い地にして、採用の帯（緑）とフッター（濃い緑）の間を切る */
:root:not([class*="theme-"]) .cta-band,:root.theme-x5 .cta-band{background:#eef1f5;color:var(--ink);border-top:1px solid #d3dae5}
:root:not([class*="theme-"]) .cta-band h2,:root.theme-x5 .cta-band h2{color:var(--navy)}
:root:not([class*="theme-"]) .cta-band p,:root.theme-x5 .cta-band p{color:#394150}
:root:not([class*="theme-"]) .cta-band .reply,:root.theme-x5 .cta-band .reply{color:var(--ink)}
:root:not([class*="theme-"]) .cta-band .hero-stripes span,:root.theme-x5 .cta-band .hero-stripes span{background:var(--cobalt);opacity:.08!important}
:root:not([class*="theme-"]) .cta-band .btn-ghost,:root.theme-x5 .cta-band .btn-ghost{color:var(--navy);border-color:var(--navy)}
:root:not([class*="theme-"]) .cta-band .btn-ghost:hover,:root.theme-x5 .cta-band .btn-ghost:hover{background:rgba(11,41,94,.06)}

/* 10/6 広告運用代行：料金の段の中の小見出し（「料金に含まれるもの・別にかかるもの」）*/
.fee-h{margin:40px 0 8px;font-size:20px;color:var(--navy)}
.fee-lead p{margin:0 0 6px;color:var(--ink-2,#394150);font-size:15px}
.fee-lead{margin-bottom:22px}
.two-fee .h3{font-size:17px;margin:0 0 10px}
.two-fee .h3 + ul + .h3,.two-fee ul + .h3{margin-top:24px}
.fee-h{font-size:22px}

/* 10/6 ヘッダー「私たちについて」のホバーで下層3ページを出す */
.gnav li.has-sub{position:relative}
.gnav .gsub{display:none;position:absolute;top:100%;left:0;min-width:220px;flex-direction:column;gap:0;padding:8px;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.12);z-index:60}
.gnav .gsub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.gnav li.has-sub:hover > .gsub,.gnav li.has-sub:focus-within > .gsub{display:flex}
.gnav .gsub a,.theme-x5 .gnav .gsub a,.theme-x5b .gnav .gsub a,.theme-v5b .gnav .gsub a,.theme-y6b .gnav .gsub a,.bold .gnav .gsub a{color:var(--ink,#13221a);font-size:14px;padding:10px 12px;border-radius:6px;white-space:nowrap}
.gnav .gsub a::after{display:none}
.gnav .gsub a:hover{background:#eef1f5}
@media(max-width:1099px){
  .gnav .gsub{display:flex;position:static;margin:0;padding:0 0 4px 16px;border:0;border-radius:0;box-shadow:none;background:transparent;min-width:0}
  .gnav .gsub::before{display:none}
  .gnav .gsub a{font-size:14px;padding:11px 4px;font-weight:600}
}
@media(max-width:1099px){:root.theme-x5:not(.theme-x5b) .gnav .gsub a{color:#fff}:root.theme-x5:not(.theme-x5b) .gnav .gsub a:hover{background:rgba(255,255,255,.08)}}
@media(max-width:1099px){.gnav .gsub a{border-radius:0}}

/* 10/6 ナレッジ（一覧 /column/ と記事ページのひな形）。記事は準備中なので、カードは枠・サムネイル・札・日付の位置だけ */
.k-filter{margin:0 0 28px}
.k-filter-h{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--sub)}
.k-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.k-chip{font:inherit;font-size:14px;font-weight:700;line-height:1.4;padding:7px 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s}
.k-chip:hover{border-color:var(--cobalt-l)}
.k-chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.k-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
.k-list[hidden],.k-empty[hidden],.k-card[hidden]{display:none}
.k-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:112px 1fr}
.k-thumb{background:#e7e9ed;color:#c2c7d0;display:grid;place-items:center;min-height:100%}
.k-thumb svg{width:36px;height:36px}
.k-body{padding:14px 16px 16px;min-width:0}
.k-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;font-size:13px;line-height:1.5}
.k-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--cobalt);font-size:12px;font-weight:700}
.k-date{font-family:var(--num);color:var(--sub);letter-spacing:.02em}
.k-title{margin:0;font-size:16px;line-height:1.55;color:var(--sub);font-weight:700}
.k-line{display:block;height:8px;border-radius:4px;background:#edeff2;margin-top:10px}
.k-line.short{width:62%;margin-top:7px}
.k-empty{margin:0;padding:48px 16px;text-align:center;color:var(--sub);background:var(--paper);border-radius:var(--radius)}
.k-demo-link{margin-top:28px}
@media(min-width:640px){
  .k-list{grid-template-columns:repeat(2,1fr);gap:24px}
  .k-card{grid-template-columns:1fr}
  .k-thumb{aspect-ratio:16/9;min-height:0}
  .k-thumb svg{width:48px;height:48px}
  .k-body{padding:18px 20px 22px}
  .k-title{font-size:17px}
}
@media(min-width:960px){.k-list{grid-template-columns:repeat(3,1fr)}}

/* 記事ページ */
.k-hero h1{font-size:clamp(28px,4vw,44px);max-width:20em;margin-top:12px}
.k-hmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:20px 0 0;font-size:14px;color:var(--on-dark-2)}
.k-hero .k-tag{background:#fff;border-color:#fff;color:var(--navy)}
.k-hero .k-date{color:var(--on-dark)}
.k-art{font-size:17px;line-height:1.9}
.k-art p{margin:0 0 18px}
.k-author{display:flex;align-items:center;gap:16px;padding:0 0 24px;margin:0 0 32px;border-bottom:1px solid var(--line)}
.k-avatar{flex-shrink:0;width:72px;height:72px;border-radius:50%;background:#e7e9ed;color:#b7bdc7;display:grid;place-items:center}
.k-avatar svg{width:40px;height:40px}
.k-author p{margin:0;line-height:1.6}
.k-author-h{font-size:12px;color:var(--sub)}
.k-author-n{font-weight:800;font-size:17px}
.k-author-r{font-size:14px;color:var(--sub)}
/* 10/6 書いた人は「シンビ 運用チーム」（匿名）。丸の中にロゴのマーク（黒） */
.k-avatar-org{background:#fff;border:1px solid var(--line)}
.k-avatar-org svg{width:36px;height:36px}
.k-box{background:var(--paper);border-radius:var(--radius);padding:22px 26px;margin:0 0 28px}
.k-box-h{margin:0 0 8px!important;font-family:var(--head);font-weight:900;font-size:18px;color:var(--navy)}
.k-point ul{margin:0;padding-left:1.3em}
.k-point li+li{margin-top:4px}
.k-toc{border:1px solid var(--line);border-radius:var(--radius);padding:20px 26px;margin:0 0 48px;font-size:16px}
.k-toc ol{margin:0;padding-left:1.4em}
.k-toc ol ol{padding-left:1.2em;list-style:none;font-size:15px}
.k-toc li{margin:4px 0}
.k-toc a{text-decoration:none}
.k-toc a:hover{text-decoration:underline}
.k-art h2{position:relative;margin:56px 0 18px;padding-bottom:12px;border-bottom:2px solid var(--line);font-size:clamp(22px,3vw,28px);line-height:1.45;color:var(--navy);font-weight:900}
.k-art h2::after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:2px;background:var(--signal)}
.k-art h3{margin:36px 0 12px;font-size:20px;line-height:1.5;color:var(--cobalt);font-weight:900}
.k-art h2,.k-art h3{scroll-margin-top:84px}
.k-tbl thead th{background:var(--paper);color:var(--navy);font-weight:800;border-bottom:2px solid var(--navy)}
.k-cap{font-size:14px;color:var(--sub);margin:8px 0 24px!important}
.k-fig{margin:8px 0 28px}
.k-fig-ph{aspect-ratio:16/9;background:#e7e9ed;border-radius:var(--radius);color:#b7bdc7;display:grid;place-items:center}
.k-fig-ph svg{width:64px;height:64px}
.k-fig figcaption{margin-top:8px;font-size:14px;color:var(--sub)}
.k-note{font-size:14px;color:var(--sub)}
.k-ask{margin:56px 0 0;padding:28px 24px;border-radius:var(--radius);background:#eef1f5;text-align:center}
.k-ask p{margin:0 0 16px}
.k-back{margin:28px 0 0}
@media(max-width:600px){.k-art{font-size:16px}.k-box,.k-toc{padding:18px 18px}}
.k-back-a{display:inline-flex;align-items:center;gap:.5em;font-weight:700}
.k-back-a svg{width:14px;height:14px}

/* 10/6 ヘッダーの項目が7つになったので、折り返さないようにする。狭い幅では余白と文字を少し詰める */
.gnav > ul > li > a{white-space:nowrap}
@media(min-width:1100px) and (max-width:1299px){.gnav > ul > li > a{padding:8px 7px;font-size:14px}.gnav > ul > li > a::after{left:7px;right:7px}.btn-hd{padding-left:16px;padding-right:16px}}
/* ページ内リンクで飛んだとき、見出しが固定ヘッダーに隠れないようにする */
section[id]{scroll-margin-top:84px}

/* 10/6 松本：ボックスは直角ではなく、全体を 4px の角丸にそろえる（円・丸ボタン・札などの 999px と 50% はそのまま） */
:root,:root[class]{--radius:4px!important}
.bars-fig,.incl li,.svc-badge,.radio-set label,.doc-band,.share-fig,.gnav .gsub,.menu-btn,
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea,
.theme-y6 .case-body .bars-fig,.theme-z5 .bars-fig,.theme-z5 .mem img,.theme-z5 .mem-row img{border-radius:4px!important}

/* 10/6 採用サイト専用のヘッダー・フッター（コーポレートとは共有しない） */
.rc-logo{display:flex;align-items:center;gap:12px}
.rc-tag{font-size:13px;font-weight:900;letter-spacing:.08em;padding:4px 10px;border:2px solid var(--ink);border-radius:4px;color:var(--ink);white-space:nowrap}
.rc-header .gnav .rc-corp a{color:var(--sub,#5a616c);font-weight:500;font-size:13px}
.rc-footer .ft-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.rc-footer .ft-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.rc-footer .ft-links a{color:var(--on-dark-2);text-decoration:none}
.rc-footer .ft-links a:hover{color:#fff}
@media(max-width:600px){.rc-tag{font-size:11px;padding:3px 7px}}

/* 10/6 採用サイトのFV：さわやかな写真の背景、メンバーのイラストは使わない */
.rc-hero{position:relative;overflow:hidden;background:#eef1f5;min-height:min(78vh,640px);display:flex;align-items:center}
.rc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.rc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 38%,rgba(255,255,255,.2) 66%,rgba(255,255,255,0) 100%);z-index:1}
.rc-hero .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px}
.rc-kicker{margin:0 0 16px;font-size:13px;font-weight:900;letter-spacing:.24em;color:var(--cobalt)}
.rc-hero h1{margin:0;max-width:13em;font-size:clamp(32px,4.2vw,56px);font-weight:900;line-height:1.3;color:var(--navy)}
.rc-lead{max-width:34em;margin:20px 0 28px;color:var(--ink)}
.rc-lead p{margin:0;line-height:1.9}
@media(max-width:760px){
 .rc-hero{display:block;min-height:0}
 .rc-hero-bg{position:relative;height:auto;aspect-ratio:16/10;object-position:70% 50%}
 .rc-hero::before{display:none}
 .rc-hero .wrap{padding-top:24px;padding-bottom:40px}
}
/* 採用サイトのヘッダー：スマホではエントリーボタンを隠してメニューを切らさない */
@media(max-width:600px){.rc-header .btn-hd{display:none}}

/* 10/6 松本「緑背景に緑文字は視認性終わってる」：濃い地の上のリンク・補足は白系にそろえる */
.subhero a,.subhero a:visited,.on-dark a:not(.btn),.on-dark a:not(.btn):visited,.recruit-band a:not(.btn),.sec-dark a:not(.btn),.site-footer a{color:#fff}
.subhero a:hover,.on-dark a:not(.btn):hover{color:var(--signal)}
.subhero .note,.subhero .small,.subhero p.note a{color:var(--on-dark)}
/* 10/6 白地の黄色ボタンに白文字が出ていた所（相談ボタン）を濃い文字に */
.btn-cta,.btn-cta:visited,a.btn-cta{color:var(--ink,#121823)}

/* ===== 10/6 下層の図と並び直し（実績・事例／会社について／メッセージとチーム／代表プロフィール／サービス一覧／広告運用代行／採用） ===== */
/* 1人が手順の上に通しでつく図（実績・事例の「同じ担当」、採用の「先輩社員がマンツーマン」） */
.own{margin:0;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:22px 20px 24px}
.own-who{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:10px 16px;background:var(--navy);color:#fff;border-radius:999px;font-weight:800;line-height:1.4}
.own-ico{width:26px;height:26px;flex:0 0 26px;color:#fff}
.own-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),1fr)}
.own-steps.n2{--n:2}.own-steps.n3{--n:3}.own-steps.n4{--n:4}
.own-steps li{position:relative;text-align:center;padding-top:20px}
.own-steps li::before{content:"";position:absolute;top:0;left:50%;width:2px;height:20px;background:var(--navy)}
.own-steps span{display:block;margin:0 8px;padding:12px 6px;border:2px solid var(--navy);border-radius:8px;font-weight:800;color:var(--navy);background:var(--paper);line-height:1.5}
.own-steps li:not(:last-child)::after{content:"";position:absolute;right:-6px;top:calc(20px + 50% - 16px);width:12px;height:12px;background:var(--cobalt);clip-path:polygon(0 0,100% 50%,0 100%);z-index:1}
.sec-alt .own{background:#fff}
.lead-p{font-size:17px;margin:0}
/* 会社について：どんな会社？の4つの問いと答え */
.two-qa{display:grid;gap:24px 40px;align-items:center}
@media(min-width:900px){.two-qa{grid-template-columns:.8fr 1.2fr}}
.qa-cards{display:grid;gap:12px;margin:0}
@media(min-width:600px){.qa-cards{grid-template-columns:1fr 1fr}}
.qa-card{background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:16px 18px}
.qa-card dt{font-weight:800;color:var(--navy);margin:0 0 6px;line-height:1.5}
.qa-card dt::before{content:"Q";font-family:var(--num);color:var(--cobalt);margin-right:8px}
.qa-card dd{margin:0;font-size:15px;line-height:1.8}
.sec-alt .qa-card{background:#fff}
/* 会社について：理念を札に、行動指針を同じ段に */
.vision-panel{background:var(--paper);border-radius:var(--radius);padding:28px 28px 30px}
.sec-alt .vision-panel{background:#fff}
.rules-h3{margin-top:44px}
/* メッセージとチーム：竹内さんのメッセージの数字の帯、神田さんのメッセージの3枚 */
.msg .msg-stats{margin:6px 0 22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.msg-stats .stat-v{min-height:0}
.msg-stats .stat-v .num{font-size:clamp(34px,4vw,46px)}
.msg-stats .stat-v.txt{font-size:clamp(20px,2.2vw,26px)}
.msg-stats .stat-l{margin-top:6px}
.msg-points{margin-top:32px}
.msg-points-h{font-weight:900;color:var(--navy);font-size:18px;margin:0 0 14px}
.msg-points .reason{padding:22px 20px}
.msg-points .reason-n{font-size:30px}
.msg-points .reason h3{font-size:18px}
.msg-points .reason p{margin:0;font-size:15px}
/* 代表プロフィール：メッセージの横にビジョンの札 */
.pf-msg{display:grid;gap:28px;align-items:start}
@media(min-width:960px){.pf-msg{grid-template-columns:1fr 300px;gap:56px}.pf-vision{position:sticky;top:96px}}
.pf-msg .body p{margin:0 0 16px}
.pf-vision{background:var(--paper);border-radius:var(--radius);padding:24px 24px 26px}
.pf-vision-k{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--sub)}
.pf-vision-1{margin:0 0 8px;font-weight:900;font-size:22px;line-height:1.5;color:var(--navy)}
.pf-vision-2{margin:0 0 18px;font-weight:700;font-size:17px;color:var(--cobalt)}
/* 広告運用代行 */
.scope-h3{margin-top:52px}
.fee-inc{margin:0 0 4px}
.hn-h3{font-size:16px;margin:20px 0 10px}
.hn-chips li{font-size:14px;padding:5px 14px;border-width:1.5px}
.hn-chips li.hn-etc{border-color:transparent;background:transparent;padding-left:2px;font-weight:700;color:var(--sub)}
@media(max-width:600px){.own-steps span{margin:0 4px;font-size:14px;padding:10px 4px}}
.fee-inc + .h3{margin-top:26px}

/* 10/7 松本：CTAボタンも角ばらせず 4px の角丸にそろえる（ヘッダー・本文・FV・採用のボタンすべて） */
:root,:root[class]{--btn-radius:4px!important}
.btn,.fvu3-btn,.fval8-btn,.fvv5-btn,.fvv5-btn2{border-radius:4px!important}

/* ===== 10/7 松本：トップSPの組み方と、全体の詰め ===== */
/* バーガーメニューの中のお問い合わせは色を付ける */
@media(max-width:1099px){
  .gnav li.nav-contact{margin-top:14px}
  .gnav li.nav-contact a{background:var(--signal);color:var(--cta-fg);border-bottom:0;border-radius:4px;text-align:center;font-weight:900;padding:14px}
}
/* ハネノバ・セカオピは運用代行のカードの中（配下） */
.svc-kids{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--line)}
.svc-kids-lb{margin:0 0 10px!important;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--sub)}
.svc-kids ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--cobalt);display:grid;gap:10px}
@media(min-width:800px){.svc-kids ul{grid-template-columns:1fr 1fr;gap:16px}}
.svc-kid{display:block;height:100%;background:var(--paper);border-radius:4px;padding:14px 16px;color:var(--ink);text-decoration:none}
.svc-kid:hover{background:#e6e9ee}
.svc-kid-t{display:flex;justify-content:space-between;gap:10px;font-weight:900;color:var(--navy);font-size:16px;line-height:1.5}
.svc-kid-t svg{width:14px;height:14px;flex:0 0 14px;margin-top:5px;color:var(--cobalt)}
.svc-kid-d{display:block;margin-top:4px;font-size:14px;line-height:1.7;color:var(--sub)}
/* トップの行動指針：SPは横に自動で流れる帯（指で送れる）。全文は「すべて見る」から */
.ta-rules li::before{content:attr(data-n)}
@media(max-width:760px){
  .ta-flow{margin:0 -16px;overflow-x:auto;scrollbar-width:none}
  .ta-flow::-webkit-scrollbar{display:none}
  .ta-flow .ta-rules{display:flex;gap:10px;width:max-content;padding:0 16px;border-top:0}
  .ta-flow .ta-rules li{flex:0 0 236px;display:block;padding:14px 16px 16px;background:#fff;border:var(--card-bd);border-radius:4px}
  .ta-flow .ta-rules li::before{display:block;font-size:20px;margin-bottom:6px}
  .ta-flow .ta-rules p{font-size:14.5px;line-height:1.7}
}
/* 全体の詰め：段の上下・見出しまわり・カードの内側を一段ずつ締める（文字の大きさと行間は変えない） */
.sec{padding:56px 0}
@media(min-width:768px){.sec{padding:84px 0}}
.sec-h{margin-bottom:22px;padding-top:20px}
.sec-lead{margin:-6px 0 24px}
.h3{margin-top:40px}
.ta-h3{margin-top:40px}
.more{margin-top:24px}
.ta-doors{margin-top:40px}
.ta-co{margin-top:32px}
.cta-band{padding:52px 0}
.recruit-band{padding:calc(52px + var(--slant)) 0 52px}
.reason p:last-child,.svc-card p:last-child{margin-bottom:0}
@media(max-width:899px){
  .svc-card{padding:22px 20px;gap:16px}
  .svc-ico{width:56px;height:56px}
  .reasons{gap:12px}
  .reason{padding:18px 20px 20px}
  .reason-top{margin-bottom:10px}
  .reason-n{font-size:28px}
  .reason-ico{width:36px;height:36px}
  .case-head{padding:22px 20px 0}
  .case-body{padding:0 20px 22px;gap:18px}
  .case-note{padding:0 20px 20px}
}
@media(max-width:599px){
  .scope-grid,.scope-grid.n5{grid-template-columns:1fr;gap:8px}
  .scope-in{flex-direction:row;text-align:left;gap:14px;padding:10px 14px}
  .scope-ic{height:40px;flex:0 0 52px}
  .scope-ic img{max-height:38px;max-width:52px}
  .scope-go{margin-left:auto}
}
@media(max-width:799px){
  .ta-doors{gap:10px}
  .ta-door{flex-direction:row;align-items:center}
  .ta-door-img{flex:0 0 104px;height:104px;padding:10px}
  .ta-door-b{padding:12px 14px 12px 4px}
  .ta-door-t{font-size:17px}
  .ta-door-d{font-size:13.5px;margin-top:4px;line-height:1.6}
}
/* 10/7 SNSのアイコンにURLが入ったらリンクにする */
a.sns-link{color:inherit;text-decoration:none}
a.sns-link:hover .sns-name{text-decoration:underline}
/* 10/7 採用ページ：求人を参考にした段の参照元（デモだけの表示） */
/* 10/9 松本：出典は黄色の枠で目立たせず、※を付けて隅に小さく置く。採用ページの参照元（デモだけ）も同じく控えめに */
.src-demo{margin:-6px 0 18px;font-size:12px;line-height:1.7;color:var(--sub)}
.src-note-h{margin:0 0 2px!important;font-weight:700}
.src-note ul{margin:0;padding-left:1.2em}
.src-note li{margin:2px 0}
.src-note a{color:inherit;font-weight:500;text-decoration:underline}
.src-els{display:inline;color:inherit}
.src-note-f{margin:6px 0 0!important;font-size:12px}
/* 10/7 採用：働き方は枠なしの箇条書きに／人物像は6つ */
.plain-list{margin:0;padding-left:1.15em}
.plain-list li{margin:2px 0}
.persons li{font-size:16px;padding:16px 18px}
/* 10/7 採用：選考の流れは項目ごとの絵、ある日の流れは1つおきに絵 */
.flow-pics li{align-items:center}
.flow-pic{flex:0 0 88px;width:88px;height:88px;object-fit:cover;border-radius:4px;background:#fff}
@media(min-width:800px){.flow-pics{grid-template-columns:1fr 1fr;gap:16px}.flow-pics li:not(:last-child)::after{display:none}.flow-pic{flex-basis:112px;width:112px;height:112px}}
.day-pic{display:block;width:100%;max-width:168px;height:auto;margin-top:10px;border-radius:4px}
@media(min-width:900px){.day-pic{max-width:140px}}
@media(min-width:900px){.day{align-items:start}.day li{align-content:start}.day-b{align-self:start}.day .day-d{display:block;min-height:0}}
.fig-cap{margin-top:8px;font-size:12.5px}
/* 10/7 トップの数字は会社の3つだけ（事例の47%は並べない） */
@media(min-width:900px){.stats.stats-n3{grid-template-columns:repeat(3,1fr)}}
/* 10/7 竹内さんFB：サービスは「マーケティング支援」（できることの一覧）と「コンテンツメディア」（準備中）の2つの箱 */
.sv2{display:grid;gap:14px}
.sv-box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px 20px;min-width:0}
@media(min-width:900px){.sv2{gap:20px}.sv-box{padding:34px 40px}.sv2-pair{grid-template-columns:1.25fr 1fr}}
.sv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 10px}
.sv-n{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--cobalt)}
.sv-head h3{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:900;color:var(--navy);line-height:1.4}
.sv-soon{align-self:center;font-size:12.5px;font-weight:800;letter-spacing:.08em;line-height:1.5;color:var(--sub);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:2px 10px}
.sv-box>p{margin:0}
.sv-lb{margin:22px 0 10px!important;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--sub)}
.sv-box .note{margin-top:10px;font-size:13px}
.sv-box .svc-kids{margin-top:22px}
.sv-jump{margin-top:14px!important}
.sv-jump a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:2px}
.sv-jump svg{width:14px;height:14px}
.can-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.can-grid li{min-width:0;background:#fff;border:1px solid var(--line);border-radius:4px}
.can-in{display:flex;align-items:center;gap:14px;height:100%;padding:10px 14px;color:var(--ink);text-decoration:none;border-radius:4px}
a.can-in:hover{background:var(--paper)}
.can-ic{flex:0 0 48px;height:40px;display:grid;place-items:center;color:var(--cobalt)}
.can-ic img{width:auto;height:auto;max-width:48px;max-height:38px}
.can-ic svg{width:32px;height:32px}
.can-b{display:block;min-width:0}
.can-t{display:block;font-weight:800;font-size:15px;line-height:1.5}
.can-d{display:block;font-size:13.5px;line-height:1.6;color:var(--sub)}
.can-go{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--cobalt)}
.can-go svg{width:14px;height:14px}
.can-go-t{display:none}
.can-grid .can-main{border-color:var(--cobalt)}
.can-main .can-t{font-size:17px;color:var(--navy)}
@media(min-width:600px){
  .can-grid{grid-template-columns:1fr 1fr;gap:10px}
  .can-grid .can-main{grid-column:1/-1}
  .can-main .can-in{padding:14px 18px}
  .can-go-t{display:inline}
}
@media(min-width:1000px){.can-grid{grid-template-columns:repeat(3,1fr);gap:12px}.can-in{padding:14px 16px}}
.sec .svc-card+.sv-lb{margin-top:28px!important}
/* 10/8 採用：メンバーの声（吹き出し風のカード） */
.voices{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:800px){.voices{grid-template-columns:1fr 1fr;gap:16px}}
.voices li{position:relative;background:var(--paper);border-radius:4px;padding:18px 20px 18px 46px}
.voices li::before{content:"";position:absolute;left:18px;top:22px;width:16px;height:12px;background:var(--signal);clip-path:polygon(0 0,45% 0,45% 100%,0 100%,0 0,55% 0,100% 0,100% 100%,55% 100%,55% 0)}
.voices p{margin:0;font-weight:700;line-height:1.75}
.voices-note{margin-top:20px;color:var(--sub);font-size:14.5px}
/* 10/8 採用：シンビで身につくこと（番号つきの4項目）・募集要項の表 */
.skills{list-style:none;margin:16px 0 34px;padding:0;display:grid;gap:12px}
@media(min-width:800px){.skills{grid-template-columns:1fr 1fr;gap:16px}}
.skills li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.skill-n{font-family:var(--num);font-weight:700;font-size:24px;line-height:1.2;color:var(--cobalt);flex:0 0 auto}
.skill-t{margin:0 0 4px;font-weight:800;color:var(--navy);line-height:1.6}
.skill-d{margin:0;font-size:15px;line-height:1.8}
.tbl-req .plain-list{margin:0}
/* 10/8 サービス一覧：マーケティング支援を4つの領域のメニューで見せる */
.menu{display:grid;gap:34px;margin-top:8px}
.menu-h{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px}
.menu-n{font-family:var(--num);font-weight:700;font-size:30px;line-height:1.1;color:var(--cobalt);flex:0 0 auto}
.menu-h h3{margin:0;font-size:clamp(19px,2.2vw,23px);color:var(--navy);line-height:1.4}
.menu-h p{margin:2px 0 0;color:var(--sub);font-size:15px;line-height:1.7}
.menu-grid .can-d{white-space:normal;line-height:1.6}
@media(min-width:900px){.menu-grid{grid-template-columns:1fr 1fr}}
/* 10/8 紺のFVの切り替えラベル：今いるページ（白い札）の文字が、一度開いたあと白くなって読めなかった（.subhero a:visited が勝っていた） */
.subhero .subnav a[aria-current],.subhero .subnav a[aria-current]:visited,.subhero .subnav a[aria-current]:hover{color:var(--navy)}
/* 10/8 トップのサービスの箱：短い一覧の行 */
.sv-list{margin:10px 0 0;color:var(--sub);font-size:14.5px;line-height:1.8}
/* 10/8 グループ会社：ZVA のロゴ（公式サイト zva.co.jp のヘッダーと同じ組み。ZVA＝紫→ピンクのグラデーション、inc.＝灰色） */
.grp-zva{gap:6px;display:flex;align-items:center;justify-content:center;line-height:1;font-family:Inter,"Noto Sans JP",sans-serif;letter-spacing:-.02em}
.zva-w{font-weight:800;font-size:24px;background:linear-gradient(135deg,#6c3ce1,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#6c3ce1}
.zva-i{font-weight:500;font-size:18px;color:#9ca3af;position:relative;top:2px}

/* ===== 10/8 英語・韓国語のページ（_build/i18n.py が日本語のHTMLを訳して en/・ko/ に書き出す） ===== */
/* 書体：韓国語は Noto Sans KR を先頭に（漢字・かなは Noto Sans JP に落ちる） */
html[lang="ko"]{--sans:"Noto Sans KR","Noto Sans JP","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
/* 折り返し：日本語用の「どこでも折る」をやめ、単語の切れ目で折る。字間は詰めない */
html[lang="en"] body,html[lang="ko"] body{overflow-wrap:break-word;word-break:normal;letter-spacing:0}
html[lang="ko"] body{word-break:keep-all}
html[lang="en"] body{line-height:1.7}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3{font-feature-settings:normal;letter-spacing:0}
/* 日本語のページへ飛ぶリンクの小さな印 */
.jp-only{display:inline-block;margin-left:.45em;padding:0 .38em;border:1px solid currentColor;border-radius:3px;font-size:.68em;font-weight:700;line-height:1.45;letter-spacing:.04em;vertical-align:.14em;opacity:.72;white-space:nowrap}
/* 法務の文の頭に出す「日本語版が正文です」 */
.doc-orig{margin:0 0 28px!important;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:4px;font-size:14px;line-height:1.7}
.doc-orig a{margin-left:.4em;font-weight:700;white-space:nowrap}
/* ヘッダー：英語・韓国語はメニューの言葉が長い。PCは字と余白を少し詰め、1299px までは三本線のメニューにする（日本語は 1099px まで） */
@media(min-width:1100px){
  html[lang="en"] .gnav a,html[lang="ko"] .gnav a{font-size:14px;padding:8px 8px;white-space:nowrap}
  html[lang="en"] .gnav a::after,html[lang="ko"] .gnav a::after{left:8px;right:8px}
  html[lang="en"] .btn-hd,html[lang="ko"] .btn-hd{white-space:nowrap}
}
@media(min-width:1100px) and (max-width:1299px){
  html[lang="en"] .menu-btn,html[lang="ko"] .menu-btn{display:block}
  html[lang="en"] .gnav,html[lang="ko"] .gnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.12)}
  html[lang="en"] .gnav.open,html[lang="ko"] .gnav.open{display:block}
  html[lang="en"] .gnav ul,html[lang="ko"] .gnav ul{flex-direction:column;padding:8px 16px 16px}
  html[lang="en"] .gnav a,html[lang="ko"] .gnav a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
  html[lang="en"] .gnav a::after,html[lang="ko"] .gnav a::after{display:none}
}
@media(max-width:480px){
  html[lang="en"] .btn.btn-hd{padding:8px 8px;font-size:11px;white-space:nowrap}
  html[lang="ko"] .btn.btn-hd{white-space:nowrap}
}
/* トップのFV：日本語は句ごとに折り返さない作り。英語・韓国語は語の切れ目で折り返し、字を少し小さくする */
html[lang="en"] .fval8 h1 .l,html[lang="en"] .fval8 h1 .ph,html[lang="ko"] .fval8 h1 .l,html[lang="ko"] .fval8 h1 .ph{white-space:normal}
html[lang="en"] .fval8 h1 .ph,html[lang="ko"] .fval8 h1 .ph{display:inline}
html[lang="en"] .fval8 h1{font-size:min(3.5vw,6.4vh);line-height:1.16;letter-spacing:-.01em}
html[lang="ko"] .fval8 h1{font-size:min(4vw,7.2vh);line-height:1.25;word-break:keep-all}
html[lang="en"] .fval8-sub span,html[lang="en"] .fval8-lead span,html[lang="ko"] .fval8-sub span,html[lang="ko"] .fval8-lead span{display:inline}
html[lang="en"] .fval8-kick{letter-spacing:.12em}
@media(max-width:760px){
  html[lang="en"] .fval8 h1{font-size:9vw}
  html[lang="ko"] .fval8 h1{font-size:9.6vw}
}
/* トップのサービス：英語・韓国語だけに出す「日本上陸支援」の箱（2つの箱の下に横いっぱい） */
@media(min-width:900px){.sv2-pair .sv-jp{grid-column:1/-1}}
/* ---- 画像の上に重ねる札（英語は字数が増えるので、言語を限って大きさ・位置・折り返しを直す） ---- */
/* サービス一覧の道しるべ：縦の札は英語だと枠から出るので、字を小さくして字間を詰める */
html[lang="en"] .ov-sign-fig .ov-v{font-size:clamp(7px,1.75cqw,10.5px);letter-spacing:0}
html[lang="en"] .ov-sign-fig .ov-sign:not(.ov-v){letter-spacing:.01em}
@container (max-width:560px){html[lang="en"] .ov-sign-fig .ov-v{font-size:clamp(8px,2.7cqw,11px)}}
/* 広告運用代行の体制図：右の3つの札（戦略・運用・報告）が横でぶつかるので小さくし、狭い幅では真ん中を1段下げる */
html[lang="en"] .ov-team .ov-pill{font-size:clamp(8.5px,1.95cqw,15px);padding:.22em .62em}
@container (max-width:560px){
  html[lang="en"] .ov-team .ov-l:nth-of-type(4){--y:74% !important}
  html[lang="en"] .ov-team .ov-l:nth-of-type(5){--x:91.5% !important}
}
/* 無料診断の流れ：札が丸にかぶりすぎないように */
html[lang="en"] .ov-diag .ov-pill{font-size:clamp(8px,1.5cqw,13px);padding:.22em .7em}
html[lang="ko"] .ov-diag .ov-pill{font-size:clamp(9px,1.7cqw,14px)}
/* 相談の前に（机の付せん）：語の途中で折らない */
html[lang="en"] .ov-note{width:12%;font-size:clamp(6px,1.55cqw,13px);line-height:1.15;overflow-wrap:normal;word-break:normal}
html[lang="ko"] .ov-note{width:11%;word-break:keep-all}
/* お悩み別の表：英語・韓国語は行き先の文が長いので折り返し、お悩みの列を広く取る */
html[lang="en"] .tbl-guide td,html[lang="ko"] .tbl-guide td{white-space:normal}
@media(min-width:601px){html[lang="en"] .tbl-guide tbody th,html[lang="ko"] .tbl-guide tbody th{width:52%}}
/* 日本上陸支援：棒グラフの左の見出し（Worldwide が途中で折れないように） */
html[lang="en"] .share-row{grid-template-columns:5.6em 1fr}
html[lang="en"] .share-k{font-size:13px}
/* 日本上陸支援：5つの手順の輪。英語・韓国語は箱の中の文が長いので、輪を縦に広げ、字を少し小さくする */
@media(min-width:1000px){
  html[lang="en"] .loop{height:660px;margin-top:44px}
  html[lang="ko"] .loop{height:600px;margin-top:24px}
  html[lang="en"] .loop-list li,html[lang="ko"] .loop-list li{padding:13px 14px 12px}
  html[lang="en"] .loop-d{font-size:12.5px;line-height:1.55}
  html[lang="ko"] .loop-d{font-size:13px;line-height:1.6}
  html[lang="en"] .loop-t{font-size:16px}
  html[lang="en"] .loop-back span,html[lang="ko"] .loop-back span{white-space:normal;width:150px}
}
html[lang="en"] .ov-sign-fig .ov-v{--y:14% !important;font-size:clamp(7px,1.6cqw,10px)}
@container (max-width:560px){html[lang="en"] .ov-sign-fig .ov-v{font-size:clamp(7.5px,2.4cqw,10px)}}

/* 10/9 署名の下のアイコン（Chatwork・Facebook）のあいだをあける */
.msg-link{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px 20px}

/* 10/9 松本：ある日の流れの絵は、タイムラインの線の上に置く（PC幅。スマホは今までどおり文の下） */
@media(min-width:900px){
.day li{grid-template-rows:124px auto auto;row-gap:0}
.day .day-b{display:contents}
.day .day-pic{grid-row:1;align-self:end;margin:0 0 14px;max-width:132px;max-height:104px;width:auto;object-fit:contain}
.day .day-t{grid-row:2;margin-bottom:28px}
.day .day-d{grid-row:3}
.day::before{top:164px}
.day li::after{top:158px}
}
.note.src-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--sub);text-align:right}
.note.src-note::before,.src-note-h::before{content:"※ "}

/* 10/9 Chatwork のアイコンが横に伸びていた：並べる枠の中で幅だけ28pxに広がっていた（flex の指定が幅24pxより優先）。幅と高さを必ず同じにする */
.sns-ic{aspect-ratio:1/1;object-fit:contain}
.msg-link .sns-ic{flex:0 0 24px;width:24px;height:24px}

/* 10/9 松本：虫めがねの札は、言葉が札に収まらない（日本語でも）ので番号だけにする。言葉は右の一覧で読める */
.ov-mag .ov-tag .w{display:none!important}
.ov-mag .ov-tag{font-size:clamp(11px,2.1cqw,17px)!important}

/* 10/9 松本：道しるべの札も言葉を載せない（板に収まらないため）。行き先は右の表で読める */
.ov-sign-fig .ov-sign{display:none!important}

/* 10/9 松本：虫めがねの札は番号も出さない（絵と右の一覧が対応しているわけではないため） */
.ov-mag .ov-tag{display:none!important}

/* 10/9 松本：運用代行の体制図も、絵の上の言葉は出さない */
.ov-team .ov-l{display:none!important}
/* 10/9 サービス一覧「お悩みから探す」：悩みのカードから行き先へ（道しるべの絵と表はやめた） */
.wr-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
@media(min-width:700px){.wr-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1000px){.wr-grid{grid-template-columns:repeat(6,1fr)}.wr-grid li{grid-column:span 2}.wr-grid li:nth-child(4){grid-column:2/span 2}}
.wr-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:var(--card-bd);border-radius:var(--radius);padding:22px 22px 18px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.wr-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.wr-n{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--cobalt)}
.wr-q{display:block;margin:8px 0 18px;font-family:var(--head);font-weight:900;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--navy);flex:1}
.wr-q::before{content:"「"}.wr-q::after{content:"」"}
html[lang="en"] .wr-q::before,html[lang="ko"] .wr-q::before{content:"\201C"}html[lang="en"] .wr-q::after,html[lang="ko"] .wr-q::after{content:"\201D"}
.wr-a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:2px solid var(--signal);font-weight:800;font-size:15px;color:var(--navy)}
/* 10/9 トップのサービスの箱に絵を入れる */
.sv-has-pic .sv-pic{margin:0 0 14px}
.sv-has-pic .sv-pic img{display:block;width:auto;height:120px;max-width:100%;mix-blend-mode:multiply}
@media(max-width:600px){.sv-has-pic .sv-pic img{height:96px}}
/* 10/9 ロゴの社名を1.2倍にしたぶん横に長くなった。スマホのヘッダーで言語切替とボタンに当たらないよう高さを少し下げる */
@media(max-width:420px){.logo-img{height:23px}}

.wr-a svg{flex:0 0 18px;width:18px;height:18px}
.wr-a{white-space:normal}

/* 10/9 松本：採用のFVの文字を、下の段の文字の開始位置にそろえる（FVが flex のため、中の .wrap が中身の幅に縮んで中央に寄っていた） */
.rc-hero .wrap{width:100%;flex:1 1 auto}
/* 10/9 採用「こんな人と働きたい」の組み直し：左に文と人物像6つ、右に絵。その下に「いま活躍しているメンバー」 */
.want{display:grid;gap:24px}
.want .body p:last-child{margin-bottom:0}
.persons-2{margin-top:22px}
.want-fig{margin:0}
.want-fig img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
@media(min-width:900px){
.want{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:stretch}
.persons-2{grid-template-columns:repeat(2,1fr)}
.want-fig{align-self:stretch;min-height:100%}
}
.now-box{margin-top:28px;background:#fff;border-left:4px solid var(--signal);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px}
.now-box h3{margin:0 0 10px;font-size:18px;color:var(--navy)}
.now-box ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
@media(min-width:900px){.now-box ul{grid-template-columns:1fr 1fr;column-gap:36px}}
/* 参照元（デモだけ）：段の末尾に、細い線で区切って小さく */
.sec .src-demo{margin:28px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:11.5px;opacity:.85}
/* 10/9 数字の段：漢数字（数十億）も、ほかの数字と同じ大きさで見せる。漢字は数字より幅を取るので少しだけ抑える */
.stat-v .num.kn{font-size:clamp(36px,4.5vw,60px);letter-spacing:0;font-weight:700}
html[lang="en"] .stat-v .num.kn{font-size:clamp(30px,3.6vw,48px)}
/* 10/9 英語版のスマホ：ヘッダーの右端（メニューのボタン）が3pxはみ出していたので、ロゴを少し小さく */
@media(max-width:420px){html[lang="en"] .logo-img{height:21px}}

/* 10/9 事例：棒グラフの上に業界のイメージ画像（横長の帯）。グラフの注記は、仮の黄色い下線を出さない */
.case-viz{display:grid;gap:14px;min-width:0}
.case-pic{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;border-radius:8px}
.bars-fig figcaption .tbd,.case-note .tbd{background:none;padding:0}
/* 10/9 任せる理由：カードの上にイラスト */
.reason-pic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin:0 0 14px;border-radius:6px;background:#fff}
/* about レーン（10/9 初稿FB）。style.css の後ろにつながる */

/* グループ会社：2社を線でつながず横に並べ、※の注記を添える */
.grp-pair{flex-wrap:wrap;gap:12px 14px}
.grp-pair .grp-note{margin:0;font-size:14px;color:var(--sub);flex-basis:auto}
@media(max-width:480px){.grp-pair .grp-co{flex:1 1 0}.grp-pair .grp-note{flex-basis:100%}}

/* どんな会社？：「何をしていた」から沿革へ */
.qa-card .qa-jump{margin:8px 0 0}
.qa-card .qa-jump a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:1px}
.qa-card .qa-jump svg{width:13px;height:13px}
/* 10/14 松本：メンバーの紹介文はブロックとして読むので、両端揃えにして文節での改行をやめる。英語・韓国語は語単位で折り返すため、両端揃えにするとスマホで語の間が大きく開くので日本語だけ */
html[lang="ja"] .mem-txt p{text-align:justify;text-wrap:wrap;word-break:normal;line-break:strict}
/* 10/14 松本：スマホのメッセージ（代表2人）は、見出し（青い太字）→写真→肩書と名前→本文→連絡先の順。PCはそのまま */
@media(max-width:759px){
#message .msg{display:flex;flex-direction:column;gap:0}
#message .msg>div{display:contents}
#message .msg .msg-quote{order:0;margin:0 0 18px}
#message .msg>img{order:1;margin:0 0 12px}
#message .msg-sign{order:2;text-align:left;margin:0 0 20px}
#message .msg>div>*:not(.msg-sign):not(.msg-link):not(.msg-quote){order:4}
#message .msg-link{order:5;justify-content:flex-start;margin:4px 0 0}
}
/* 10/14 松本：スマホのメンバー紹介は、イラストと名前を横に並べ、その下に紹介文を全幅で置く */
@media(max-width:759px){
.members .mem{grid-template-columns:76px 1fr;gap:0 16px;align-items:center}
.members .mem>img{width:76px;height:76px}
.members .mem .mem-txt{display:contents}
.members .mem h3{margin:0}
.members .mem .mem-txt p{grid-column:1/-1}
.members .mem .mem-txt .mem-en+p{margin-top:14px}
}
/* 10/14 松本：名前の下に英語の名前（PC・スマホとも）。英語・韓国語のページでは出さない */
.mem-txt .mem-en{display:block;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.08em;color:var(--cobalt);margin:-4px 0 10px;text-align:left}
@media(max-width:759px){.members .mem>img{grid-row:span 2}.members .mem h3{align-self:end}.members .mem .mem-txt .mem-en{grid-column:2;align-self:start;margin:4px 0 0}}
html:not([lang="ja"]) .mem-txt .mem-en{display:none}
@media(max-width:759px){html:not([lang="ja"]) .members .mem h3{grid-row:span 2;align-self:center}}
/* 10/14 松本：スマホの代表メッセージの本文も、両端揃えにして文節での改行をやめる（日本語だけ。見出し・署名・連絡先はそのまま） */
@media(max-width:759px){html[lang="ja"] #message .msg p:not(.msg-quote):not(.msg-sign):not(.msg-link){text-align:justify;text-wrap:wrap;word-break:normal;line-break:strict}}
/* 10/14 松本：署名は肩書と名前を分けて持つ。PCは1行（間をあける）、スマホは写真と署名を中央にそろえ、肩書と名前を2行に */
.msg-sign .ms-name{margin-left:.6em}
@media(max-width:759px){
#message .msg>img{align-self:center}
#message .msg-sign{text-align:center;align-self:stretch}
#message .msg-sign .ms-role{display:block;font-size:13px;font-weight:700;color:var(--sub)}
#message .msg-sign .ms-name{display:block;margin:2px 0 0;font-size:17px}
}
/* 10/15 松本：スマホの代表プロフィールは本文（紹介・略歴・代表者メッセージ）が長く改行も多いので、両端揃えにして文節での改行をやめる。見出し・名前・肩書・年・理念はそのまま（日本語だけ） */
@media(max-width:759px){
html[lang="ja"] .profile>div>p:not(.pf-name):not(.pf-role),
html[lang="ja"] .timeline-y dd p,
html[lang="ja"] .timeline-y ~ * p,
html[lang="ja"] .pf-msg .body p:not(.msg-sign){text-align:justify;text-wrap:wrap;word-break:normal;line-break:strict}
}
/* 10/16 竹内さん：メンバー紹介の最後（PCは2列の右下の空き）に JOIN US のカードを置き、採用ページへ */
.mem-join{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;padding:22px 24px;background:#fff;border:2px dashed var(--cobalt);border-radius:var(--radius)}
.mem-join-ph{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;border:2px dashed var(--cobalt);color:var(--cobalt)}
.mem-join-ph svg{width:40px;height:40px}
.mem-join h3{margin:0 0 6px;font-size:26px;font-weight:900;letter-spacing:.1em;color:var(--navy)}
.mem-join p{margin:0 0 14px;font-size:15px;line-height:1.85}
.mem-join .mem-join-btn{margin:0}
@media(max-width:759px){.mem-join{grid-template-columns:76px 1fr;gap:12px 16px;padding:18px}.mem-join-ph{width:76px;height:76px}.mem-join-ph svg{width:30px;height:30px}.mem-join h3{font-size:22px}}
/* 10/19 肩書は会社ごとに折り返す（スマホで「株式会社／ZVA」の途中で切れていた） */
.pf-role .pf-r{display:inline-block}
/* ===== 10/9 初稿FB：全ページ共通（ヘッダー・相談の帯） ===== */
/* 18:16 ヘッダー左上の社名をもっと大きく（ロゴの縦横比は約6:1。高さを上げると横も伸びるので、幅ごとに測って決めた） */
.logo-img{height:36px}
@media(max-width:600px){.logo-img{height:37px}}  /* 10/15 松本「スマホのロゴを1.25倍に」で 30→37 */
/* スマホ（390幅）は右に言語切替・ボタン・メニューが並ぶので、隙間を少し詰めて、収まる中でいちばん大きくする（前：日本語23px・英語21px） */
@media(max-width:420px){
  .hd-inner{gap:4px}
  .hd-tools{gap:4px}
  .btn.btn-hd{padding-left:8px;padding-right:8px}
  /* 10/15 松本「ロゴと社名をいまの1.25倍に」：日本語25→31・韓国語26→32・英語23→29（言語切替を右下に移して空いた分。360幅でもボタンとの間は日本語14px・英語13px残る） */
  .logo-img{height:31px}
  html[lang="ko"] .logo-img{height:32px}
  html[lang="en"] .logo-img{height:29px}
}

/* 19:52 相談の帯の下に「代表へ直接のお問い合わせも歓迎です」＋竹内さんの Chatwork・Facebook。ボタンの列とは線で区切って1行に置く */
.cta-direct{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px;padding-top:22px;border-top:1px solid rgba(11,41,94,.16)}
.cta-band .cd-t{margin:0;font-weight:700;color:inherit}
.cta-band .cd-links{margin:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.cta-direct .sns-link{background:#fff;color:var(--ink);border:1px solid rgba(11,41,94,.22);border-radius:4px;padding:8px 14px 8px 10px;line-height:1.4}
/* 帯は .on-dark なのでリンクの字が白になる（.on-dark a:not(.btn)）。白い札の上なので濃い色に戻す */
.cta-band .cta-direct a.sns-link,.cta-band .cta-direct a.sns-link:visited,.cta-band .cta-direct a.sns-link:hover{color:var(--ink)}
.cta-direct a.sns-link:hover{border-color:var(--navy)}
.cta-direct .sns-ic{width:24px;height:24px;flex:0 0 24px}
.role .role-more{margin:18px 0 0}.role .role-more .btn{width:100%;justify-content:center}
/* contact レーン（10/9 FB）：お問い合わせフォームの一番上の「代表へ直接」 */
.ct-direct{background:var(--paper);border-radius:var(--radius);padding:16px 20px;display:grid;gap:10px}
.ct-direct p{margin:0;font-weight:700;font-size:15px}
.ct-direct .ct-direct-links{display:flex;flex-wrap:wrap;gap:12px 24px}

/* 10/19 応募の完了画面では共通のボタンを隠す（.btn-row の display より hidden を優先） */
.btn-row[hidden]{display:none}

/* 10/21 松本：送信完了の「代表に Chatwork で」の案内は、PCでは見出し・本文と同じく中央に置く（SPは本文と同じ左揃えのまま） */
@media(min-width:600px){.done .done-direct{justify-content:center}}

/* 10/19 言語のカードが4枚になったので、広い画面は4列・中くらいは2列 */
@media(min-width:600px){.lang-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.lang-cards{grid-template-columns:repeat(4,1fr)}}
/* 10/15 松本：コラム記事のスマホの冒頭を軽くする（記事のHTMLは能見さん側。こちらは共通のCSS・JSだけで効かせる）
   1. 目次は閉じた状態で出し、「目次」をタップで開く（main.js が開閉ボタンにする）
   2. 目次は大見出しだけ（小見出しは出さない）
   4. タイトルの紺の地を詰める（文字を一回り小さく・上下の余白を減らす）
   あわせて、本文は文節での改行をやめ、段落は両端揃えにする（日本語だけ） */
@media(max-width:759px){
  .k-hero.subhero{padding:28px 0 calc(34px + var(--slant))}
  .k-hero h1{font-size:24px;line-height:1.35;margin:8px 0 12px}
  .k-hero .subhero-lead{font-size:15px}
  .k-hero .k-hmeta{margin:12px 0 0}
  .k-art .k-toc{padding:0;margin:0 0 36px}
  .k-art .k-toc ol ol{display:none}
  .k-art .k-toc .k-toc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:14px 18px;border:0;background:transparent;font:inherit;font-weight:900;color:var(--navy);cursor:pointer;text-align:left}
  .k-art .k-toc .k-toc-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s}
  .k-art .k-toc.open .k-toc-btn::after{transform:rotate(-135deg);margin-top:4px}
  .k-art .k-toc.k-toc-js:not(.open)>ol{display:none}
  .k-art .k-toc>ol{padding:0 18px 16px 2.6em}
  html[lang="ja"] .k-hero .subhero-lead p{word-break:normal;line-break:strict;text-wrap:wrap}
  html[lang="ja"] .k-art p:not(.k-box-h):not(.k-author-h):not(.k-author-n),
  html[lang="ja"] .k-art li,html[lang="ja"] .k-art td,html[lang="ja"] .k-art th,html[lang="ja"] .k-art dd{word-break:normal;line-break:strict;text-wrap:wrap}
  html[lang="ja"] .k-art>p,html[lang="ja"] .k-art .k-box>p,html[lang="ja"] .k-art blockquote p,html[lang="ja"] .k-art dd p{text-align:justify}
}
/* 10/9 FB 採用：制度とサポートの絵が3枚から2枚になったので、2列にして幅を詰める */
.sups.sups-2{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.sups.sups-2{max-width:500px}}
/* 10/9 夜 働く場所と環境：右側に、席の写真（上）と外観（下） */
/* 10/19 松本：写真2枚を見出しの下に横並び（高さをそろえる）・その下に表 */
.env-pics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 28px}
.env-ph{margin:0}
.env-ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:var(--radius)}
@media(max-width:759px){.env-pics{gap:10px;margin-bottom:20px}.env-ph .fig-cap{font-size:11px}}
/* 10/19 採用の「大事にしていること」は抜粋なので、会社についての行動指針と同じ番号を出す（並べ順もその順） */
.rule-list li[data-n]::before{content:attr(data-n)}

/* 10/19 松本：SPの採用FVは「RECRUIT」とメインコピーを写真に重ねる。写真の下側を暗くして白い字で読ませ、リードとボタンは写真の下に置く */
@media(max-width:760px){
  .rc-hero-bg{aspect-ratio:4/3.4;object-position:68% 30%}
  .rc-hero .wrap{position:relative;padding-top:20px}
  .rc-ttl{position:absolute;left:0;right:0;top:0;transform:translateY(-100%);padding:96px 16px 20px;background:linear-gradient(to top,rgba(8,18,40,.78) 0%,rgba(8,18,40,.5) 55%,rgba(8,18,40,0) 100%)}
  .rc-ttl .rc-kicker{color:#fff;margin-bottom:8px}
  .rc-ttl h1{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
  .rc-hero .rc-lead{margin-top:0}
}
@media(min-width:561px) and (max-width:760px){.rc-hero-bg{aspect-ratio:16/10}}  /* 10/19 タブレット幅で写真が縦に長くなりすぎないように */
/* 10/9 初稿FB トップ（top レーン） */

/* サービスの2つの箱：01（マーケティング事業）を大きく、02（コンテンツメディア事業）は控えめに */
/* 10/9 夜 松本：2つの箱は縦に積み、どちらもメインの幅いっぱいに。PCでは絵を左、文を右に置く */
.sec-svtop .sv2-pair{grid-template-columns:1fr!important;gap:20px}
@media(min-width:900px){
  .sec-svtop .sv2-pair .sv-box{display:grid;grid-template-columns:auto 1fr;column-gap:36px;align-items:start}
  .sec-svtop .sv2-pair .sv-box>.sv-pic{grid-row:1/span 9;margin:0}
  .sec-svtop .sv2-pair .sv-box>*:not(.sv-pic){grid-column:2}
}
.sec-svtop .sv-main>p:not(.sv-jump){font-size:16px;line-height:1.8}
.sv-tags{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sv-tags li{font-size:14px;font-weight:700;line-height:1.5;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:6px 12px}
.sec-svtop .sv-md .sv-head h3{font-size:clamp(18px,1.8vw,21px)}
.sec-svtop .sv-md>p{font-size:14px;color:var(--sub)}
@media(max-width:600px){
  .sv-tags{gap:6px}
  .sv-tags li{font-size:13px;padding:5px 10px}
}

/* 箱の下の ZVA の1行（ロゴは支給の画像。大きくしない） */
.sv-zva{margin:18px 0 0}
.sv-zva a{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.6}
.sv-zva img{display:block;width:76px;height:auto;flex:0 0 auto}
.sv-zva a span{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.sv-zva a:hover span{text-decoration-color:currentColor}
.sv-zva svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;color:var(--sub)}

/* 数字の段：SPでは「年間数十億円」が2列だと折り返して崩れるので、3つ目だけ1行を使う */
@media(max-width:899px){.stats.stats-top li:nth-child(3){grid-column:1/-1}}

/* 私たちについて：理念の下のボタン */
.ta-vision .v-sub{margin-top:4px}
.ta-more{margin-top:24px}

/* 10/9 夜 なぜシンビは強い？ は3つに。PCは3列 */
@media(min-width:900px){.reasons.reasons-3{grid-template-columns:repeat(3,1fr);gap:24px}}
/* 10/9 夜 松本「02の絵も01と同じサイズに」→ 02 の絵の大きさ・余白の上書きを外した（上の3行を削除） */
/* 10/9 夜 松本「FV左側の背景も水彩画っぽさを少しほのめかして」→ 左の白地に淡い水彩のにじみ */
.fval8-copy{background:#fff url("../img/fv-wash.webp?v=20261013a4") left bottom/cover no-repeat}
@media(max-width:760px){.fval8{background:#fff url("../img/fv-wash.webp?v=20261013a4") left bottom/cover no-repeat}}
/* 10/9 夜 松本「R7 右全体を紺の水彩で」：FV の右側（指針の文・図・下の10枚の札）を紺の水彩に。文字は白、数字と強調は黄 */
.fval8-rt{background:#0b295e url("../img/fv-navywash.webp") center/cover no-repeat!important;border-left-color:#0b295e!important}
.fval8-stage{background:transparent!important}
.fval8-stage,.fval8-stage *{color:#fff!important}
.fval8-stage .fval8-no{color:#ffc400!important}
.fval8-stage .fval8-lb,.fval8-stage .fval8-full{color:rgba(255,255,255,.82)!important}
.fval8-stage{--cG:#fff;--cK:#fff;--cR:#9db0d3;--cL:#3a5a92;--cW:transparent}
.fval8-cell:not(.on){background:rgba(6,23,58,.55)!important;--cG:#fff;--cK:#fff;--cR:#9db0d3;--cL:#3a5a92;--cW:transparent}
.fval8-cell:not(.on) .cn{color:rgba(255,255,255,.75)!important}
.fval8-cell:not(.on):hover{background:rgba(6,23,58,.35)!important}
@media(max-width:760px){
 .fval8 .fval8-grid::before{background:#0b295e url("../img/fv-navywash.webp") center/cover no-repeat!important;border-bottom-color:#0b295e!important}
 .fval8 .fval8-grid h1,.fval8 .fval8-grid .fval8-hd{color:#fff!important}
 .fval8 .fval8-grid .fval8-kick,.fval8 .fval8-grid .fval8-lb{color:rgba(255,255,255,.82)!important}
 /* 10/15 松本「英字の前の横線が紺の地と同化して見えない」→ 線を文字と同じ白に */
 .fval8 .fval8-grid .fval8-kick::before{background:rgba(255,255,255,.82)!important}
 .fval8 .fval8-grid h1 .em,.fval8 .fval8-grid .fval8-no{color:#ffc400!important}
}

/* 10/13 松本「紺の地でアニメーションが見えにくい。濃いグレー・紺・黒はアニメーションに使わない」→ 紺の水彩の上の絵の色を、明るい色に置き換える
   主の形＝白／黒だった所＝明るい水色／灰色＝淡い青灰／細い線＝青灰／中抜き＝淡い黄（紺は使わない）。黄色はそのまま */
.fval8 .fval8-stage{--cG:#ffffff;--cK:#9fc6ff;--cR:#c8d5ee;--cL:rgba(255,255,255,.26);--cW:#ffe48a;--cY:#ffc400}
/* 10/13 松本「08 はまだ配色が微妙」→ 紺の地では、壁は面を塗らず白い線で囲う。開かない大きな扉は白い線＋うっすら白。抜ける小さな扉の黄色と、自分（白い丸）が目立つように */
.fval8 .fval8-stage .w08{fill:none;stroke:none}  /* 10/13 松本「白の背景いらない」→ 壁の面も線も出さない */
.fval8 .fval8-stage .d08{fill:none;stroke:#fff}

/* 10/13 松本「FV左のメインコピーに、あるかないかわからないくらいの白いシャドウ」 */
.fval8 h1{text-shadow:0 0 14px rgba(255,255,255,.9),0 0 4px rgba(255,255,255,.6)}  /* 10/13「もう少しだけ強く」 */
.fval8 .fval8-cell .w08{fill:none;stroke:none}  /* 下の小さな札の08も同じく */
.fval8 .fval8-cell .d08{fill:none;stroke:#fff}

/* 10/15 松本「PCのFV右半分（動く図）の文字をもう少し大きく。画面の大きさ次第」→ 幅1181px以上で、画面の幅と高さの小さいほうに合わせて大きくする。
   1280×720 以下の高さでは今の大きさのまま（下にはみ出さないよう 1366〜2560 の各画面で10項目すべて測った） */
@media(min-width:1181px){
  .fval8-lb{font-size:clamp(11px,min(.95vw,1.5vh),15px)}
  .fval8-no{font-size:clamp(54px,min(4.6vw,7.2vh),84px)}
  .fval8 .fval8-hd{font-size:clamp(24px,min(2.05vw,3.2vh),34px)}
  .fval8 .fval8-full{font-size:clamp(14px,min(1.15vw,1.8vh),18px)}
}
/* works レーン（10/9 初稿FB）：事例カードの図。件数の縦棒＋単価の横棒を1枚のカードに並べる */
.viz-pair{display:grid;gap:12px;min-width:0}
@media(min-width:560px){.viz-pair{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.viz-fig{margin:0;background:var(--paper);padding:18px 18px 16px;border-radius:8px;min-width:0;display:flex;flex-direction:column}
.viz-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0 0 12px}
.viz-h{margin:0;font-size:14px;font-weight:800;color:var(--navy);line-height:1.4}
.viz-drop{margin:0;display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:800;color:var(--cobalt);white-space:nowrap}
.viz-drop svg{width:14px;height:14px}
.viz-cap{font-size:13px;color:var(--sub);margin:0;line-height:1.6}
/* 単価の横棒：カードの中では札を棒の上に置き、棒の幅をとる */
.viz-fig .bar-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;margin-bottom:10px}
.viz-fig .bar-row:last-child{margin-bottom:0}
.viz-fig .bar-k{grid-column:1/-1;font-size:13px}
.viz-fig .bar{height:26px}
.viz-fig .bar-v{font-size:17px;white-space:nowrap}
/* 件数の縦棒 */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-top:auto}
.col{display:flex;flex-direction:column;align-items:center;min-width:0}
.col-v{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;font-size:17px;margin-bottom:4px;white-space:nowrap;line-height:1.2}
.col-bar{height:140px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:2px solid var(--line)}
.col-fill{display:block;width:min(64px,100%);flex:none;border-radius:4px 4px 0 0}
.col-fill.before{background:repeating-linear-gradient(-45deg,#c9cdd3 0 8px,#dcdfe3 8px 16px)}
.col-fill.after{background:var(--cobalt)}
.col-k{font-size:13px;color:var(--sub);font-weight:700;margin-top:6px;text-align:center;line-height:1.3}
.theme-v5 .col-fill.after{background:#ffb900}
.theme-y6 .col-fill.after{background:#3e63dd}
.theme-z5 .col-fill.after{background:#6e56cf}
.theme-z5 .viz-fig{border-radius:0;background:#fff;border:2px solid #3e3950}
.bold .col-fill.after{background:var(--brand)}
/* 10/9 夜 事例のグラフ：棒（件数）と折れ線（獲得単価）を1つに。X軸は3つ */
.cb-fig{margin:0;background:var(--paper);border-radius:8px;padding:14px 16px 10px}
.cb-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:2px 0 4px;font-size:12.5px;color:var(--sub)}
.cb-legend .lg-bar{display:inline-block;width:12px;height:12px;background:var(--navy);border-radius:2px}
.cb-legend .lg-line{display:inline-block;width:18px;height:3px;background:var(--signal);margin-left:10px;border-radius:2px;position:relative}
.cb-plot{position:relative;height:180px}
.cb-bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;border-bottom:1px solid var(--line)}
.cb-col{position:relative;height:100%;display:flex;justify-content:center;align-items:flex-end}
.cb-bar{display:block;width:44%;max-width:64px;background:#9fb0cf;border-radius:3px 3px 0 0}
.cb-bar.now{background:var(--navy)}
.cb-cv{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:700;color:var(--navy)}
.cb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cb-svg polyline{fill:none;stroke:var(--signal);stroke-width:3;vector-effect:non-scaling-stroke}
.cb-svg circle{fill:#fff;stroke:var(--signal);stroke-width:3;vector-effect:non-scaling-stroke}
.cb-yv{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:700;color:#7a5a00;background:rgba(255,255,255,.85);padding:0 4px;border-radius:3px}
.cb-x{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-size:12.5px;color:var(--sub);padding-top:6px}
.cb-legend .lg{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.cb-legend .lg-line{margin-left:0}
.viz-cap .tbd{background:none;padding:0}
.cb-dot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;border:3px solid var(--signal);box-sizing:border-box}
/* 10/15 松本：実績・事例の「そのほかの事例」10件（案A）。PCは3列のカード、759px以下は横に流れるカルーセル（main.js が自動で送る） */
.wm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.wm-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(11,41,94,.06);padding:24px;display:flex;flex-direction:column;min-width:0}
.wm-tag{align-self:flex-start;font-size:12px;font-weight:700;color:var(--cobalt);background:#e8edf6;border-radius:999px;padding:3px 12px;margin:0 0 16px;line-height:1.6}
.wm-k{font-size:13px;color:var(--sub);margin:0;line-height:1.5}
.wm-big{font-family:var(--num);font-size:52px;font-weight:900;color:var(--cobalt);line-height:1.05;letter-spacing:-.02em;margin:2px 0 14px;white-space:nowrap}
.wm-u{font-size:.42em;margin-left:2px;letter-spacing:0}
.wm-cmp{display:grid;gap:6px;margin:0 0 6px}
.wm-row{display:grid;grid-template-columns:2.2em 1fr;align-items:center;gap:8px;font-size:12px;color:var(--sub)}
.wm-bar{height:22px;border-radius:4px;background:#c9d4e8;display:flex;align-items:center;padding:0 8px;font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.wm-after .wm-bar{background:var(--cobalt);color:#fff}
.wm-per{font-size:12px;color:var(--sub);margin:0 0 16px;line-height:1.6}
.wm-h{font-size:16px;font-weight:700;line-height:1.6;margin:0 0 16px;color:var(--ink)}
.wm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.wm-chip{font-size:13px;font-weight:700;color:var(--navy);background:var(--paper);border-radius:6px;padding:4px 10px;line-height:1.5}
.wm-chip-k{font-weight:400;color:var(--sub);margin-right:6px}
.wm-streak{display:grid;grid-template-columns:repeat(19,1fr);gap:3px;margin:0 0 8px}
.wm-streak i{display:block;aspect-ratio:1;border-radius:2px;background:#c9d4e8}
.wm-streak i.on{background:var(--cobalt)}
.wm-lg{display:inline-block;width:10px;height:10px;border-radius:2px;background:#c9d4e8;margin-right:4px;vertical-align:-1px}
.wm-lg.on{background:var(--cobalt)}
.wm-note{margin-top:20px}
.wm-ui{display:none}
@media (min-width:760px) and (max-width:1023px){.wm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){
  .wm-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;column-gap:40px;align-items:center}
  .wm-wide .wm-tag{justify-self:start}
  .wm-wide .wm-tag,.wm-wide .wm-k,.wm-wide .wm-big,.wm-wide .wm-h{grid-column:1}
  .wm-wide .wm-streak{grid-column:2;grid-row:1/4;grid-template-columns:repeat(37,1fr);align-self:end}
  .wm-wide .wm-per{grid-column:2;grid-row:4}
  .wm-wide .wm-h{grid-row:4;margin:0}
}
@media (max-width:759px){
  .wm-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none;scroll-padding:0 16px}
  .wm-grid::-webkit-scrollbar{display:none}
  .wm-card{flex:0 0 84%;scroll-snap-align:start;padding:22px 20px}
  .wm-big{font-size:46px}
  .wm-ui{display:flex;align-items:center;gap:12px;margin-top:12px}
  .wm-dots{display:flex;gap:6px}
  .wm-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:#c9d4e8;transition:width .3s;cursor:pointer}
  .wm-dots button[aria-current="true"]{width:22px;background:var(--cobalt)}
  .wm-count{font-size:12px;color:var(--sub);margin-right:auto;font-variant-numeric:tabular-nums}
  .wm-arrows{display:flex;gap:8px}
  .wm-arrows button{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:20px;font-weight:700;line-height:1;cursor:pointer}
}
/* 10/13 スマホ点検（手順書\SP点検_20261013.html）の優先度「高」の直し */
@media(max-width:600px){
  /* よくある質問：2行目が「Q」の下に回り込まないよう、Q を左に固定して本文をそろえる */
  .faq summary{padding-left:32px}
  .faq summary::before{position:absolute;left:0;top:18px;margin:0}
  .faq-a{padding-left:32px}
  /* 事例の「やったこと／結果」：項目名を上、本文を下の1列に */
  .case-steps>div{grid-template-columns:1fr;gap:4px}
  /* 数字で見るシンビ：3つ目（年間数十億円）は横幅いっぱいに */
  .stats.stats-3 li:nth-child(3),.stats.stats-n3 li:nth-child(3){grid-column:1/-1}
  .stats{margin-bottom:0}
  /* 選考の流れ：写真を本文の上に置き、本文の幅を確保する */
  .flow.flow-pics li{flex-wrap:wrap}
  .flow.flow-pics .flow-pic{order:-1;width:100%;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
  .flow.flow-pics li>div{flex:1 1 0;min-width:0}
}
/* 言語切替：押しやすい大きさに（文字 13px・高さ 34px 程度） */
@media(max-width:899px){
  .lang{font-size:12px}
  .lang a{padding:8px 5px}
}

/* 10/13 スマホ点検の優先度「中」 */
@media(max-width:600px){
  /* ヘッダーの相談ボタンとメニューを押しやすく */
  .btn-hd{min-height:40px;font-size:13px}
  .menu-btn{width:44px;height:44px}
  /* ページ下の相談帯：2つ目のボタンが2行にならないよう文字を少し小さく */
  .cta-band .btn{font-size:14px}
  /* 代表への直接連絡・SNSのリンクを高さ44pxに */
  .sns-link{display:inline-flex;align-items:center;min-height:44px}
  /* フッターのリンクを押しやすく（見た目の行間は保つ） */
  .ft-links a{display:inline-block;padding:12px 0;margin:-12px 0}
  .ft-links li{margin-bottom:16px}
  /* FV の小さい文字 */
  .fval8-kick,.fval8-lb{font-size:12px!important}
  /* セカオピの数字3つを横並びに */
  .price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .price-row .price-cell{padding:12px 6px;text-align:center}
  /* 沿革を詰める */
  .timeline>div{padding-top:14px;padding-bottom:14px}
  /* 沿革の横の階段の絵は、スマホでは出さない */
  .with-side>figure,.with-side>.fig,.with-side>div:not(.timeline):has(img){display:none}
  /* 一緒に働くメンバーの顔を中央にそろえる */
  .mem-row{justify-content:center}
  /* 同意のチェックを押しやすく */
  form label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0}
}

/* 10/14 松本：スマホの言語切替はヘッダーから外し、画面右下に固定して追従させる。
   ふだんは今の言語（JP など）だけが半透明の札で右端からはみ出して見え、タップすると上にほかの言語が出て選べる（main.js） */
@media(max-width:759px){
  .hd-tools .lang,.lang{display:flex!important;position:fixed;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90;
    flex-direction:column-reverse;align-items:stretch;gap:0;padding:0;border:0;border-radius:12px 0 0 12px;overflow:hidden;
    background:rgba(11,41,94,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.18);
    font-size:13px;font-weight:700;letter-spacing:.06em;transform:translateX(10px);transition:transform .2s}
  .lang a{display:none;padding:12px 24px 12px 16px;min-width:64px;text-align:left;color:#fff;line-height:1.2}
  .lang a[aria-current]{display:block;background:transparent;color:#fff}
  .lang a[aria-current]::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;vertical-align:middle;border:4px solid transparent;border-bottom-color:#fff;border-top:0}
  .lang.open{transform:none;background:rgba(11,41,94,.92)}
  .lang.open a{display:block}
  .lang.open a+a{border-bottom:1px solid rgba(255,255,255,.2)}
  .lang.open a[aria-current]{color:var(--signal)}
  .lang.open a[aria-current]::after{border-bottom-color:transparent;border-top:4px solid var(--signal);border-bottom:0}
}

/* 10/15 松本：ハンバーガーの3本線がボタンの中心からずれていた（ボタンを44pxにしたとき線の位置を直していなかった）。大きさに関係なく中央に置く */
.menu-btn .bars{left:50%!important;top:50%!important;margin:-1px 0 0 -9px}
/* 10/15 松本：右下の言語の札（閉じているとき）は存在感を弱める。開いたときはそのまま */
@media(max-width:759px){
  .lang:not(.open){background:rgba(11,41,94,.38);box-shadow:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-size:11px;transform:translateX(12px)}
  .lang:not(.open) a[aria-current]{padding:8px 22px 8px 12px;min-width:0;color:rgba(255,255,255,.92)}
}

/* 10/15 松本：ハンバーガーメニューの中で、今いるページの項目を色と印で示す（PCのドロップダウンも同じ色） */
.gnav .gsub a.is-here{color:var(--cobalt);font-weight:800}
@media(max-width:1099px){
  .gnav a.is-here{color:var(--cobalt);font-weight:900;position:relative}
  .gnav a.is-here::before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:1.1em;margin-top:-.55em;border-radius:2px;background:var(--signal)}
  .gnav a.is-here::after{display:none}
}

/* 10/15 松本「スマホのメインコピーの白いシャドウが強すぎる」→ スマホだけ弱める（PCは 10/13 の強さのまま） */
@media(max-width:759px){.fval8 h1{text-shadow:0 0 8px rgba(255,255,255,.45),0 0 2px rgba(255,255,255,.3)}}

/* 10/15 松本：スマホの事例カードは、見出しのすぐ下にグラフを置き、そのあとに「やったこと・数字」（エネルギー関連・スクールとも。トップ・実績・広告運用代行の全部） */
@media(max-width:899px){.case-body .case-viz{order:-1}}

/* 10/15 松本「同様の基準でSP版に関しては適切なところで文節区切り解除」：プロフィール・メッセージ・メンバー紹介・コラムと同じく、
   スマホで3行以上になる本文は文節で折り返さず、両端揃えにする（文節折り返しだと行末がガタつき、右に大きな空きが出るため）。
   1〜2行の見出し・リード・注記・表の値は文節折り返しのまま（途中で語が切れないように）。3行以上かどうかは main.js が測って sp-jb を付ける */
@media(max-width:759px){
  html[lang="ja"] .sp-jb{word-break:normal;line-break:strict;text-wrap:wrap;text-align:justify}
  html[lang="ja"] .sp-jb li{text-align:left} /* 10/19 表の中の箇条書きは左寄せ（文節折り返しのまま両端揃えになり、字の間が開いていた） */
}

/* 10/19 送信完了・404：.done の padding:24px 0 が .wrap の左右16pxを消していた（SPで本文が画面の端に付く）。左右を戻し、SPの本文は左揃え */
.wrap.done{padding-left:16px;padding-right:16px}
@media(max-width:599px){.done p{text-align:left}}

/* 10/19 松本：SPでメニューを開いたとき、後ろのページをグレーで覆う（ヘッダーとメニューだけ明るく残す）。メニューが画面より長いときはメニューの中を動かす */
@media(max-width:1099px){
  html.nav-open{overflow:hidden}
  html.nav-open body::after{content:"";position:fixed;inset:0;z-index:40;background:rgba(24,28,36,.62)}
  .gnav{max-height:calc(100dvh - 58px);overflow-y:auto;overscroll-behavior:contain}
  html.nav-open .lang{visibility:hidden}  /* 右下の言語の札はヘッダーの中にあり覆いより上に出るので、メニューを開いている間は隠す */
}

/* 10/19 松本：縦に並ぶ手順カードの矢印は、上下に10pxずつ余白を空けてカードに付けない（矢印14px＋上下10px＝カードの間34px） */
@media(max-width:899px){.flow:not(.flow-pics){gap:34px}.flow:not(.flow-pics) li:not(:last-child)::after{bottom:-24px}}
@media(max-width:799px){.flow.flow-pics{gap:34px}.flow.flow-pics li:not(:last-child)::after{bottom:-24px}}