/* =====================================================================
   polish.css — 心地よさの層（余白・文字・色・影・出方）
   2026-09-28 claude。参考＝Google Workspace（customers / business / gmail）
   ・切り絵の配置（Codex）には触らない。.motif / .scene は一切上書きしない。
   ・site_v1_full.html の後ろで読み込む。消せば元に戻る。
   ===================================================================== */

:root{
  --ink:#202124;          /* 本文の濃い色（Google: rgb(32,33,36)） */
  --ink2:#5f6368;         /* 説明文（Google: rgb(95,99,104)） */
  --line:#dadce0;         /* 罫線 */
  --hair:#e8eaed;
  --ease:cubic-bezier(.2,.8,.2,1);
  --e1:0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 3px rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
  --e3:0 2px 6px 2px rgba(60,64,67,.15), 0 8px 24px rgba(60,64,67,.12);
}

/* ---------- 土台：読みやすさ ---------- */
body{color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
section{padding:120px 0}
section+section{border-top:0}
p{margin-top:0}
h1{letter-spacing:-.01em}
h2{font-size:clamp(30px,3.4vw,46px);line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:0 0 14px}
h3{letter-spacing:-.005em}
.sub{font-size:18px;line-height:1.75;color:var(--ink2);max-width:680px;margin:0 0 44px}
.note{color:var(--ink2)}
/* 節の見出しと説明は中央に（左右2枚の中は左のまま） */
section>.wrap>h2,section>.wrap>.sub{text-align:center;margin-left:auto;margin-right:auto}
section>.wrap>h2{max-width:22ch}
#hero h1,#hero .lead{text-align:left}
#hero .lead{font-size:18px;line-height:1.8;color:var(--ink2)}

/* ---------- ヘッダー ---------- */
header{background:rgba(255,255,255,.86);border-bottom:1px solid transparent;transition:box-shadow .3s var(--ease),border-color .3s}
header.scrolled{border-bottom-color:var(--hair);box-shadow:0 1px 0 rgba(0,0,0,.02)}
header .wrap{height:64px}
nav a{font-weight:500;color:var(--ink2);transition:color .2s}
nav a:hover{color:var(--ink)}
nav a.cta{height:40px;display:inline-flex;align-items:center;padding:0 20px;font-weight:700;color:#fff;transition:background-color .2s,box-shadow .2s}
nav a.cta:hover{background:#0b8c5f;box-shadow:var(--e1)}

/* ---------- ボタン：丸・48px・静かな反応 ---------- */
.btn,.pill,.skip{transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;font-size:16px;letter-spacing:.01em}
.btn:hover{transform:none;box-shadow:var(--e1)}
.btn.primary:hover{background:#0b8c5f}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:#f1f3f4;border-color:var(--line);box-shadow:none}
.ctl .btn{min-height:40px;padding:0 18px;font-size:14px}
/* 左右の切り替えボタン＝左右の色（従業員＝青／顧客＝コーラル）に揃える */
section .wrap .ctl .btn[data-go="hr"]{color:#2d5be3;border-color:#c7d2fe}
section .wrap .ctl .btn[data-go="mk"]{color:#E05E55;border-color:#fecaca}
section .wrap .ctl .btn[data-go="hr"]:hover{background:#EEF3FF}
section .wrap .ctl .btn[data-go="mk"]:hover{background:#FFF4F1}
section .wrap .ctl .btn[data-go="hr"].on{background:#EEF3FF;border-color:#2d5be3;color:#2d5be3}
section .wrap .ctl .btn[data-go="mk"].on{background:#FFF4F1;border-color:#E05E55;color:#E05E55}
.pill{min-height:48px;padding:0 26px;font-size:16px}
.pill:hover{transform:translate(-2px,-2px)}
.skip{min-height:36px;padding:0 16px;font-size:12px;letter-spacing:.08em}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}

/* ---------- カード：薄い罫線＋そっと浮く ---------- */
.card,.st,.pc,.case,.finding,.out,.tm,.kpi,.rq,.about-card,.qd{border-color:var(--hair);box-shadow:none;transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.case:hover,.pc:hover,.out:hover,.st:hover,.tm:hover,.about-card:hover{box-shadow:var(--e2);transform:translateY(-2px);border-color:transparent}
.card.shared{border-color:#b7e1cd}
.dual>.side{border-color:var(--hair);background:#fff;box-shadow:none}
.dual>.side.hr{background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%)}
.dual>.side.mk{background:linear-gradient(180deg,#fff 0%,#fff6f3 100%)}
.gate{border-width:1px;border-color:var(--hair);box-shadow:var(--e3);border-radius:24px;padding:28px}
.merge{border-width:1px;border-color:var(--hair);box-shadow:none;padding:36px}
.form{box-shadow:var(--e3);padding:40px}
input,textarea{border-color:var(--line);transition:border-color .2s,box-shadow .2s}
input:hover,textarea:hover{border-color:#bdc1c6}
input:focus,textarea:focus{border-color:#1a73e8;box-shadow:0 0 0 1px #1a73e8;outline:none}

/* ---------- 壁（黒いカード）は少し柔らかく ---------- */
.wall{background:#202124;border-radius:24px;box-shadow:var(--e1)}
.wall .kv{color:#bdc1c6}.wall ul{color:#bdc1c6}

/* ---------- タブ：静かなセグメント ---------- */
.tabs span{border-color:var(--hair);color:var(--ink2);transition:background-color .2s,color .2s,border-color .2s;cursor:pointer}
.tabs span:hover{background:#f1f3f4}
.tabs span.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 線（左右）：細く・静か ---------- */
#rail{background:var(--ink);width:1px;transform:none}
#rail .knob{width:40px;height:40px;font-size:16px;box-shadow:var(--e2);transition:transform .2s var(--ease)}
#rail:hover .knob{transform:translate(-50%,-50%) scale(1.06)}
#rail .lab{font-size:11px;letter-spacing:.02em;background:var(--ink);opacity:.9}
.sw{width:30px;height:30px;font-size:14px;border-width:1.5px;transition:background-color .2s,color .2s}

/* ---------- 対話・吹き出し ---------- */
.chat{background:#202124;border-radius:24px}
.bub{border-radius:16px}
.fv .t{border-color:var(--hair)}
.fv .w{color:#9aa0a6}

/* ---------- 経営の1枚・締め ---------- */
#board{background:linear-gradient(180deg,#fff 0%,#f5fbf8 100%)}
.close p{font-size:18px;line-height:1.9}
.close .big{letter-spacing:-.01em}
#contact{background:#fff}

/* ---------- 導入・試用企業 ---------- */
.lg{border-color:var(--hair);color:var(--ink2);font-weight:500;transition:color .2s,border-color .2s}
.lg:hover{color:var(--ink);border-color:var(--line)}
.lg.both{border-color:#b7e1cd;color:var(--ink)}

/* ---------- 出方：ふわっと（1回だけ） ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.rv-in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- フッター ---------- */
footer{border-top:1px solid var(--hair);padding:40px 0 64px}
footer .wrap{color:var(--ink2)}
footer a{color:var(--ink2);transition:color .2s}
footer a:hover{color:var(--ink)}

/* ---------- スマホ ---------- */
@media (max-width:860px){
  section{padding:72px 0}
  h2{font-size:28px}
  .sub{font-size:16px;margin-bottom:28px}
  .gate,.merge,.form{padding:22px}
}

/* =====================================================================
   2026-09-28 追記① 締めの節：塊を離す（jota「詰まりすぎ。もっと余白を」）
   ===================================================================== */
#contact{padding-top:140px}
.close{max-width:760px;margin-bottom:72px}
.close p{font-size:17px;line-height:2.1;color:var(--ink2);margin:0 0 36px}
.close p b{color:var(--ink);font-weight:700}
.close p+p{margin-top:0}
.close .big{margin:56px 0 0;line-height:1.6;letter-spacing:-.01em}
.form{margin-top:0}
.form h2{margin-bottom:24px}
.form label{margin-top:20px}

/* =====================================================================
   2026-09-28 追記② 事例カード：参考＝Googleの「Watch now」カード
   （薄いグレーの丸い箱・中央の見出し・下から絵がのぞく・触れると暗くなり、
    曇りガラスの板が浮く）。真似ではなく型だけ借りる。絵はCodexの切り絵。
   ===================================================================== */
#cases .case{
  position:relative;overflow:hidden;border:0;border-radius:28px;background:#f1f3f4;
  padding:44px 28px 150px;text-align:center;min-height:300px;color:var(--ink);
  transition:background-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
#cases .case .co{position:relative;z-index:2;font-size:13px;letter-spacing:.06em;color:var(--ink2);text-transform:none}
#cases .case .cq{font-size:20px;line-height:1.5;font-family:"M PLUS 1",sans-serif;font-weight:700;margin-top:10px;position:relative;z-index:2}
#cases .case .btn{position:relative;z-index:2;background:transparent;border:0;color:var(--ink);padding:0;min-height:0;margin-top:14px;font-size:14px;box-shadow:none}
#cases .case .btn:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
/* 下からのぞく絵（Codexの切り絵・webp縮小版） */
#cases .case::after{content:"";position:absolute;left:0;right:0;bottom:-6%;height:52%;background-repeat:no-repeat;background-position:center bottom;background-size:contain;pointer-events:none;transition:transform .6s var(--ease),opacity .45s;z-index:1}
#cases .side.hr .case:nth-of-type(1)::after{background-image:url("素材_切り絵_Codex/web/grass.webp")}
#cases .side.hr .case:nth-of-type(2)::after{background-image:url("素材_切り絵_Codex/web/flowers-right.webp")}
#cases .side.hr .case:nth-of-type(3)::after{background-image:url("素材_切り絵_Codex/web/river.webp")}
#cases .side.mk .case:nth-of-type(1)::after{background-image:url("素材_切り絵_Codex/web/flowers-right.webp")}
#cases .side.mk .case:nth-of-type(2)::after{background-image:url("素材_切り絵_Codex/web/river.webp")}
/* 曇りガラスの板（触れたときだけ） */
#cases .case::before{content:"";position:absolute;inset:18px;border-radius:22px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .45s var(--ease);z-index:1;pointer-events:none}
#cases .case:hover{background:#202124;color:#fff;transform:translateY(-3px);box-shadow:var(--e3)}
#cases .case:hover .co,#cases .case:hover .btn{color:#fff}
#cases .case:hover::before{opacity:1}
#cases .case:hover::after{transform:translateY(-10px) scale(1.04)}
@media (prefers-reduced-motion:reduce){#cases .case,#cases .case::after,#cases .case::before{transition:none}}
@media (max-width:860px){#cases .case{padding:32px 20px 130px;min-height:260px}}

/* =====================================================================
   2026-09-28 追記③ 冒頭の絵：山は小さく上へ（川に被らない）。青い葉と手を足す
   ===================================================================== */
#hero .scene .hills{width:54%;left:26%;top:2%;bottom:auto;z-index:0;opacity:.95}
#hero .scene .foliage{width:40%;left:-6%;bottom:-2%;z-index:3;animation-delay:.8s}
#hero .scene .handimg{width:13%;left:31%;bottom:2%;z-index:4;animation-delay:1.2s;transform:rotate(8deg)}
@media (max-width:860px){#hero .scene .hills{width:60%;left:22%;top:0}#hero .scene .foliage{width:52%;left:-10%}#hero .scene .handimg{width:22%;left:24%}}

/* =====================================================================
   2026-09-28 追記④ ロゴ／冒頭（手→ハリネズミ・人を大きく）／お問い合わせの葉／わたしたちについて（モーダル）
   ===================================================================== */
.lg.haslogo{padding:8px 14px;display:inline-flex;align-items:center;height:48px}
.lg.haslogo img{height:28px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) opacity(.75);transition:filter .3s}
.lg.haslogo:hover img{filter:none}
#hero .scene .person{width:19%}
#hero .scene .hedge{width:19%;left:2%;bottom:-2%;z-index:3;animation-delay:1.1s}
@media (max-width:860px){#hero .scene .hedge{width:30%}}
.amodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s}
.amodal.show{opacity:1}
.amodal[hidden]{display:none}
.amodal-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
/* 箱＝今のサイトと同じ（生成り #F5F3EE・角12px・幅768px・高さ85vh） */
.amodal-box{position:relative;background:#F5F3EE;border-radius:12px;width:min(768px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);overflow:hidden;transform:translateY(12px);transition:transform .3s var(--ease)}
.amodal.show .amodal-box{transform:none}
.amodal-head{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #E5E1D8}
.amodal-tabs{display:flex;gap:0}
.atab{background:none;border:0;border-bottom:2px solid transparent;padding:16px 20px;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:14px;color:#9CA3AF;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.atab:hover{color:#3D4A5C}
.atab.on{color:#3D4A5C;border-bottom-color:var(--p600)}
.amodal-x{background:none;border:0;font-size:24px;line-height:1;color:#9CA3AF;cursor:pointer;padding:6px 0}
.amodal-x:hover{color:#3D4A5C}
.amodal-body{overflow-y:auto;padding:32px 24px}
/* 会社紹介＝左寄せ・太字・#3D4A5C（今のサイトのまま） */
.astmt{font-size:16px;line-height:1.75;text-align:left;max-width:none;margin:0 0 24px;font-family:"M PLUS 1",sans-serif;font-weight:700;color:#3D4A5C}
.astmt.en{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:16px;color:#3D4A5C;line-height:1.75;margin-bottom:32px}
.acorp{text-align:left;border-top:1px solid #E5E1D8;padding-top:24px;margin:0 0 24px;color:#3D4A5C}
.acorp p{margin:0}
.acorp .co{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:16px;margin-bottom:4px}
.acorp .ad{font-size:14px;margin-bottom:16px}
.acorp .ti{font-size:14px}
.acorp .ceo{display:inline-flex;align-items:center;gap:8px;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:16px;color:#3D4A5C;text-decoration:none;transition:color .2s}
.acorp .ceo:hover{color:var(--p600);text-decoration:underline}
.acorp .ceo img{width:48px;height:48px;object-fit:contain}
.agreen{font-size:12px;font-weight:700;color:var(--p600);margin:0 0 32px}
.achars{border-top:1px solid #E5E1D8;padding-top:24px}
.achars h3{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:18px;color:#3D4A5C;margin:0 0 8px}
.achars .agreen{margin-bottom:24px}
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chars .ch{width:100%;aspect-ratio:1;background:#EDEAE3;border-radius:8px;display:flex;align-items:center;justify-content:center}
.chars .ch img{width:60%;height:60%;object-fit:contain}
/* News＝今のサイトと同じ（日付・題・2行・続きを読む ↓） */
.news{border-bottom:1px solid #E5E1D8;padding:20px 0}
.news:last-child{border-bottom:0}
.news .nd{font-size:12px;color:#9CA3AF;margin:0 0 4px}
.news h4{margin:0 0 6px;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:16px;line-height:1.4;color:#3D4A5C}
.news p.nb{margin:0 0 8px;font-size:14px;color:#6B7280;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news .more{background:none;border:0;padding:0;font-size:12px;font-weight:700;color:var(--p600);cursor:pointer;font-family:inherit}
.news .more:hover{color:#0b8c5f}
.news .full{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease .1s}
.news .full div{padding:16px 0 8px;font-size:14px;color:#4B5563;line-height:1.9;letter-spacing:.02em}
.news .full a{color:var(--p600);word-break:break-all}
.news .full a:hover{text-decoration:underline}
@media (max-width:760px){.chars{grid-template-columns:1fr}.amodal-body{padding:24px 20px}}

/* POLLSのロゴ＝本物の画像（今のサイトと同じ） */
.logo{display:inline-flex;align-items:center}
.logo img{height:50px;width:auto;display:block}
@media (max-width:860px){.logo img{height:40px}}

/* 2026-09-28 ロゴの直し：枠を消す・全部同じ大きさの箱（160×56）に収める・色はそのまま */
.logos{gap:8px 22px;align-items:center}
.lg,.lg.both,.lg.haslogo{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important;height:56px;display:inline-flex;align-items:center;justify-content:center}
.lg.haslogo{width:160px}
.lg.haslogo img{height:40px;width:auto;max-width:150px;object-fit:contain;filter:none!important}
.lg:not(.haslogo){font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:17px;color:#3D4A5C;letter-spacing:.02em;padding:0 6px!important}
.lg.nishitetsu{font-family:"Poppins",sans-serif;font-weight:700;font-size:20px;color:#C8161D;letter-spacing:.04em}
@media (max-width:860px){.lg.haslogo{width:120px;height:44px}.lg.haslogo img{max-height:34px;max-width:112px}.lg:not(.haslogo){font-size:15px}}

/* =====================================================================
   2026-09-28 ポジショニング＝今の polls.jp と同じ作り（2×2・外側だけ角丸・吹き出し・凡例）
   ===================================================================== */
#positioning.pos{background:var(--g50);position:relative;overflow:hidden;padding:128px 0}
.pos-glow{position:absolute;top:50%;left:50%;width:800px;height:800px;transform:translate(-50%,-50%);background:rgba(217,251,232,.4);border-radius:50%;filter:blur(120px);pointer-events:none}
.pos-wrap{position:relative;z-index:1;width:min(896px,100% - 40px)}
.pos-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
.pos-head h2{margin:0}
.pos-chara{width:64px;height:64px;object-fit:contain}
.pos-sub{text-align:center;font-weight:700;color:var(--g600);font-size:18px;margin:0 0 64px}
.pos-mobile-notes{display:none}
.matrix-wrap{position:relative;max-width:768px;margin:0 auto 48px}
.axis-y{position:absolute;left:-64px;top:33%;color:#9CA3AF;font-size:14px;letter-spacing:.1em;white-space:nowrap}
.axis-x{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#9CA3AF;font-size:14px;letter-spacing:.1em}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-left:32px}
.matrix>div{height:288px;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cell-blue{background:#DBEAFE;border:1px solid #BFDBFE;border-top-left-radius:24px;transition:background .2s,border-color .2s}
.cell-blue:hover{background:#BFDBFE;border-color:#93C5FD}
.cell-amber{background:#FEF3C7;border:1px solid #FDE68A;border-bottom-right-radius:24px;transition:background .2s,border-color .2s}
.cell-amber:hover{background:#FDE68A;border-color:#FCD34D}
.cell-gray{background:#E5E7EB;border:1px solid #D1D5DB;border-bottom-left-radius:24px}
.cell-gray .csub{color:#6B7280;font-size:16px;letter-spacing:.05em}
.cell-polls{background:#fff;border:4px solid #22BA7F;border-top-right-radius:24px;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transition:transform .2s;z-index:10}
.cell-polls:hover{transform:scale(1.02)}
.cell-polls img{height:128px;width:auto;object-fit:contain;margin-bottom:16px}
.cpill{color:#007A52;font-size:16px;font-weight:700;margin-top:12px;background:#D9FBE8;padding:8px 20px;border-radius:999px;border:1px solid #B0F2D2;letter-spacing:.05em}
.emoji{font-size:48px;line-height:1;margin-bottom:16px}
.ctitle{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:24px;letter-spacing:-.01em}
.cell-blue .ctitle{color:#2563EB}.cell-blue .csub{color:#3B82F6}
.cell-amber .ctitle{color:#D97706}.cell-amber .csub{color:#D97706}
.csub{font-size:14px;margin-top:12px;letter-spacing:.05em}
.matrix-cell{position:relative;cursor:pointer;transition:transform .2s ease}
.matrix-cell:hover{transform:scale(1.02);z-index:10}
.matrix-cell:hover .matrix-tooltip{opacity:1;visibility:visible}
.matrix-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-8px);width:320px;padding:16px;border-radius:12px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:20;pointer-events:none;text-align:left}
.matrix-tooltip.below{bottom:auto;top:100%;transform:translateX(-50%) translateY(12px)}
.matrix-tooltip p{font-size:14px;line-height:1.8;color:#374151;margin:0 0 8px}
.matrix-tooltip p:last-child{margin:0}
.matrix-tooltip .tb{color:#2563EB;font-weight:700}.matrix-tooltip .ta{color:#D97706;font-weight:700}
.matrix-tooltip-blue{background:#EFF6FF;border:1px solid #3B82F6;box-shadow:0 4px 20px rgba(59,130,246,.2)}
.matrix-tooltip-orange{background:#FFF7ED;border:1px solid #F97316;box-shadow:0 4px 20px rgba(249,115,22,.2)}
.pos-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;margin-top:80px;font-size:14px;color:var(--g600)}
.pos-legend span{display:inline-flex;align-items:center;gap:8px}
.pos-legend .strong{color:var(--g900);font-weight:700}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.d-blue{background:#3B82F6}.d-amber{background:#F59E0B}.d-green{background:#22BA7F}
.pos-close{text-align:center;color:var(--g600);font-size:18px;margin:32px 0 0}
.pos-close b{color:#0EA36E;margin:0 4px}
@media (max-width:860px){
  #positioning.pos{padding:72px 0}
  .pos-head{flex-direction:column;gap:8px}
  .pos-sub{font-size:16px;margin-bottom:32px}
  .pos-mobile-notes{display:grid;gap:12px;margin-bottom:32px}
  .pn{border-radius:12px;padding:14px;font-size:14px;line-height:1.7;color:#374151}
  .pn-blue{background:#EFF6FF;border:1px solid #BFDBFE}.pn-blue b{color:#2563EB}
  .pn-amber{background:#FFFBEB;border:1px solid #FDE68A}.pn-amber b{color:#D97706}
  .pn-green{background:#EFFDF5;border:1px solid #7EE5B7}.pn-green b{color:#0EA36E}
  .axis-y,.axis-x{display:none}
  .matrix{margin-left:0;gap:8px;max-width:384px;margin:0 auto}
  .matrix>div{height:auto;aspect-ratio:1;padding:16px}
  .cell-polls img{height:48px;margin-bottom:4px}
  .cpill{font-size:10px;padding:4px 8px;margin-top:4px}
  .emoji{font-size:30px;margin-bottom:8px}.ctitle{font-size:14px}.csub{font-size:10px;margin-top:4px}
  .matrix-tooltip{display:none}
  .pos-legend{gap:16px;margin-top:48px;font-size:12px}
  .pos-close{font-size:14px}
}

/* =====================================================================
   2026-09-28 レポートの節＝色を反転して黒地に（jota指示・添付3の黒）
   ===================================================================== */
#report .dual>.side{border-color:#3c4043;color:#e8eaed}
#report .dual>.side.hr{background:linear-gradient(180deg,#202124 0%,#26292e 100%)}
#report .dual>.side.mk{background:linear-gradient(180deg,#202124 0%,#2b2426 100%)}
#report .side.hr h3{color:#8ab4ff}#report .side.mk h3{color:#ff8a80}
#report .kpi{background:#2b2f33;border-color:#3c4043;box-shadow:none}
#report .kpi .num{color:#fff}#report .kpi .lbl{color:#9aa0a6}
#report .hbar-row{color:#bdc1c6}#report .hbar-track{background:#3c4043}#report .hbar-val{color:#fff}
#report .side.hr .hbar-fill{background:#8ab4ff}#report .side.mk .hbar-fill{background:#ff8a80}
#report .rq{background:#2b2f33;border-color:#3c4043;color:#e8eaed}
#report .rq .src{color:#9aa0a6}
#report .find{color:#7EE5B7}
#report .veil p{background:#2b2f33;border-color:#3c4043;color:#9aa0a6}
#report .veil::after{background:linear-gradient(to bottom,rgba(32,33,36,0),#26292e 85%)}
#report .side.mk .veil::after{background:linear-gradient(to bottom,rgba(32,33,36,0),#2b2426 85%)}
#report .logx{background:#111417}
#report .logx .b.ai{background:#3c4043}
#report .card,#report .card.shared{background:#2b2f33;border-color:#3c4043;color:#e8eaed}
#report .card .k{color:#9aa0a6}

/* 2026-09-28 サブコピー＝ポジショニングの副題と同じ（太字・#475569・18px）に全節を統一 */
.sub,#hero .lead,.close p{font-weight:700;color:#475569}
.sub{font-size:18px;line-height:1.75}

/* 2026-09-28 ロゴ＝既存サイトと同じ描き方（元のPNGを高さ96px・小さいロゴだけ個別の高さ・RKBは文字） */
.logos{gap:16px 36px;justify-content:flex-start;align-items:center}
.lg.haslogo{width:auto;height:96px;padding:0!important}
.lg.haslogo img{height:96px;max-height:none;max-width:200px;width:auto;object-fit:contain}
.lg.rkb{height:96px;display:inline-flex;align-items:center;gap:2px;padding:0!important;white-space:nowrap}
.lg.rkb .rk{font-family:"Roboto",Arial,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em;color:#64748b;text-transform:lowercase}
.lg.rkb .mn{font-family:"Shippori Mincho",serif;font-weight:700;font-size:15px;color:#333}
.lg:not(.haslogo):not(.rkb){height:96px;font-size:17px}
@media (max-width:860px){.logos{gap:12px 20px;justify-content:center}.lg.haslogo,.lg.rkb,.lg:not(.haslogo):not(.rkb){height:64px}.lg.haslogo img{height:64px;max-width:140px}.lg.haslogo img[style]{transform:scale(.8)}}

/* 2026-09-28 冒頭＝ファーストビューは冒頭の絵まで（導入・試用企業は次の節へ） */
#hero{min-height:calc(100vh - 64px);display:flex;align-items:center;padding:40px 0}
#hero>.wrap{width:min(1200px,100% - 40px)}
@media (max-width:860px){#hero{min-height:0;display:block;padding:40px 0}}
/* 導入・試用企業＝独立した節・他の節と同じ中央揃え */
#clients{background:#fff;padding:96px 0}
#clients .note{text-align:center}
#clients .side h3{text-align:center}
#clients .logos{justify-content:center}
#clients .dual{max-width:980px;margin:0 auto}
/* 経営の1枚＝説明文も中央 */
#board .sub{margin-left:auto;margin-right:auto}

/* 2026-09-28 各節のキャラクター＝今のサイトと同じ（見出しの左に64px・フッターに24px） */
.pos-head h2{text-align:center}
.ft-about{display:inline-flex;align-items:center;gap:8px}
.ft-about img{width:24px;height:24px;object-fit:contain;transition:transform .2s}
.ft-about:hover img{transform:scale(1.25) rotate(12deg)}

/* 2026-09-28 キャラクターを大きく（高さで揃える・縦長の絵も同じ背丈に） */
.pos-chara{width:auto;height:79px;max-width:108px}
.pos-head{gap:18px}
#board .pos-head{margin-bottom:14px}
@media (max-width:860px){.pos-chara{height:58px}}
/* 2026-09-28 フッター＝2つのリンクの高さを揃える（キャラ付きリンクと文字だけのリンクがずれていた） */
footer .wrap{align-items:center}
footer .wrap>span{display:inline-flex;align-items:center}
footer .wrap>span a{display:inline-flex;align-items:center;line-height:1}
/* 2026-09-28 冒頭の太陽＝左（山の上）・いちばん奥の層 */
#hero .scene .sun{right:auto;left:10%;top:-6%;width:30%;z-index:-1}
#hero .scene .hills{z-index:0}
@media (max-width:860px){#hero .scene .sun{left:6%;top:-4%;width:36%}}
/* 2026-09-28 わたしたちについて：緑の注記を濃く・日付を濃く・注記は英文の直下 */
.agreen{color:#00875A;margin:-8px 0 28px}
.achars .agreen{margin:0 0 24px}
.news .nd{color:#6B7280;font-weight:700}
.news .more,.news .full a{color:#00875A}
.news .more:hover{color:#006B47}
/* 2026-09-28 レポートと事例の幅を狭める（余白が多すぎた） */
#report #rtabs,#report .dual,#report .gate{max-width:960px;margin-left:auto;margin-right:auto}
#report .gate{margin-top:-80px}
#cases .dual{max-width:960px;margin:0 auto}
/* 事例カードは横に並べる（従業員側3枚・お客様側2枚） */
#cases .side{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-content:start}
#cases .side>h3{grid-column:1/-1;margin:0 0 4px}
#cases .case{margin-top:0;min-height:280px;padding:36px 20px 140px}
#cases .case .cq{font-size:17px}
@media (max-width:860px){#cases .side{grid-template-columns:1fr}}
/* 2026-09-28 活用領域＝幅を960pxに・外側の細い線を消す（試し）・箱の背景は導入・試用企業のカードと同じ薄い色に */
#split .dual,#split .ctl{max-width:960px;margin-left:auto;margin-right:auto}
#split .ctl{margin-top:16px}
.dual>.side{border-color:transparent}
/* 2026-09-28 課題の絵＝同じ場所で、線を引くと雲⇔丸太が入れ替わる。大きく・カードに少し重ねる */
#problem>.motif{width:clamp(220px,24vw,360px);right:2%;top:60px;transition:opacity .45s cubic-bezier(.22,1,.36,1)}
#problem>.motif[data-art-side="mk"]{visibility:visible;opacity:0!important;animation:none}
html[data-art-side="mk"] #problem>.motif[data-art-side="hr"]{visibility:visible;opacity:0!important}
html[data-art-side="mk"] #problem>.motif[data-art-side="mk"]{opacity:1!important}
/* お問い合わせ＝鳥を外して右に手 */
#contact>.motif.hand{width:clamp(220px,24vw,340px);right:2%;bottom:40px;left:auto;top:auto}
/* レポートの太陽を少し大きく */
#report>.motif{width:clamp(140px,15vw,210px);left:3%;top:10px}
@media (max-width:860px){#problem>.motif{width:34vw;top:20px}#contact>.motif.hand{width:40vw;bottom:0}}
/* 2026-09-28 jota提案＝背景の絵は大きく・最下部へ・中身に少し重ねる。手は回して上から下ろす */
#problem>.motif{width:clamp(280px,28vw,420px);right:-3%;top:auto;bottom:-30px}
#report>.motif{width:clamp(220px,22vw,320px);left:-4%;top:auto;bottom:-40px}
#contact>.motif.flower{width:clamp(280px,28vw,420px);left:-5%;bottom:-70px}
#contact>.motif.hand{width:clamp(240px,24vw,360px);right:4%;top:-30px;bottom:auto;transform:rotate(160deg)}
@media (max-width:860px){
  #problem>.motif{width:44vw;right:-8%;bottom:-20px}
  #report>.motif{width:40vw;left:-8%;bottom:-20px}
  #contact>.motif.flower{width:52vw;left:-10%;bottom:-30px}
  #contact>.motif.hand{width:40vw;right:-6%;top:-10px}
}
/* 手は出方の動き（transform）と衝突するので動きを外して回す */
#contact>.motif.hand{animation:none;opacity:1;transform:rotate(160deg);transform-origin:50% 50%}

/* ===== 2026-09-28 1つの財布＝定点観測と投資判断の折れ線（見えたら左から描かれる） ===== */
.trend2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.tc{border:1px solid var(--hair);border-radius:14px;padding:14px 14px 10px;background:#fff}
.tc.one{margin-top:10px}
.tt{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:14px;margin-bottom:6px}
.tt.hr,.legend .hr{color:var(--blue)}.tt.mk,.legend .mk{color:var(--coral)}
.legend{display:flex;gap:16px;font-size:12px;font-weight:700;margin-bottom:6px}
.legend .dim{color:#9aa0a6}
.tr{font-size:13px;color:var(--ink2);margin-top:6px;opacity:0;transition:opacity .6s 1.8s}
.in .tr{opacity:1}
.tl{width:100%;height:auto;display:block}
.tl .g{stroke:#e8eaed;stroke-width:1}
.tl .x{font-size:12px;fill:#9aa0a6;font-family:"Noto Sans JP",sans-serif}
.tl .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1)}
.tl .ln.hr{stroke:var(--blue)}.tl .ln.mk{stroke:var(--coral)}
.tl .ln.dim{stroke-width:2;opacity:.45;stroke-dasharray:.04 .02;stroke-dashoffset:1}
.in .tl .ln{stroke-dashoffset:0}
.in .tl .ln.dim{stroke-dasharray:.04 .02;stroke-dashoffset:0;transition:none;animation:dimIn 1.6s cubic-bezier(.22,1,.36,1) both}
@keyframes dimIn{from{opacity:0}to{opacity:.45}}
.tl .d{opacity:0;transition:opacity .3s}
.tl .d.hr{fill:var(--blue)}.tl .d.mk{fill:var(--coral)}.tl .d.dim{opacity:0;fill-opacity:.45}
.in .tl .d{opacity:1}.in .tl .d.dim{opacity:1}
.tl .d:nth-of-type(1){transition-delay:.4s}.tl .d:nth-of-type(2){transition-delay:.8s}.tl .d:nth-of-type(3){transition-delay:1.2s}.tl .d:nth-of-type(4){transition-delay:1.6s}
.tl .v{font-size:12px;font-weight:700;font-family:"Poppins",sans-serif;opacity:0;transition:opacity .3s}
.tl .v.hr{fill:var(--blue)}.tl .v.mk{fill:var(--coral)}
.in .tl .v{opacity:1}
.tl .v:nth-of-type(1){transition-delay:.5s}.tl .v:nth-of-type(2){transition-delay:.9s}.tl .v:nth-of-type(3){transition-delay:1.3s}.tl .v:nth-of-type(4){transition-delay:1.7s}
.tl .e{font-size:12px;font-weight:700;font-family:"Noto Sans JP",sans-serif;opacity:0;transition:opacity .4s 1.7s}
.tl .e.hr{fill:var(--blue)}.tl .e.mk{fill:var(--coral)}.tl .e.dim{fill:#9aa0a6}
.in .tl .e{opacity:1}
.trend .ins{margin-top:12px}
@media (max-width:860px){.trend2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tl .ln,.tl .d,.tl .v,.tl .e,.tr{transition:none;animation:none;opacity:1;stroke-dashoffset:0}}
/* ===== 2026-09-28 1つの財布＝黒地に（データの図と同じ #202124） ===== */
#board .merge{background:#202124;border-color:#3c4043;color:#e8eaed;border-radius:16px}
#board .merge .font-title{color:#fff}
#board .merge .two .c{background:rgba(255,255,255,.04);border-color:#3c4043;color:#bdc1c6}
#board .merge .two .c b{color:#fff}
#board .merge .two .c b[style*="--blue"]{color:#8ab4ff!important}
#board .merge .two .c b[style*="--coral"]{color:#ff8a80!important}
#board .merge .ins{border-left-color:#8ab4ff;color:#e8eaed}
#board .merge table{color:#e8eaed}
#board .merge th{color:#9aa0a6;border-bottom-color:#3c4043}
#board .merge td{border-bottom-color:#3c4043;color:#e8eaed}
#board .merge .verdict{border-color:#4ad398;color:#4ad398}
#board .merge .verdict.no{border-color:#5f6368;color:#9aa0a6}
#board .merge .tc{background:rgba(255,255,255,.04);border-color:#3c4043}
#board .merge .tt.hr,#board .merge .legend .hr{color:#8ab4ff}
#board .merge .tt.mk,#board .merge .legend .mk{color:#ff8a80}
#board .merge .tr{color:#bdc1c6}
#board .merge .tl .g{stroke:#3c4043}
#board .merge .tl .x{fill:#9aa0a6}
#board .merge .tl .ln.hr,#board .merge .tl .d.hr,#board .merge .tl .v.hr,#board .merge .tl .e.hr{stroke:#8ab4ff}
#board .merge .tl .d.hr,#board .merge .tl .v.hr,#board .merge .tl .e.hr{fill:#8ab4ff;stroke:none}
#board .merge .tl .ln.mk{stroke:#ff8a80}
#board .merge .tl .d.mk,#board .merge .tl .v.mk,#board .merge .tl .e.mk{fill:#ff8a80}
#board .merge .tl .e.dim{fill:#9aa0a6}
/* ===== 2026-09-28 活用領域＝黒地に（レポートと同じ） ===== */
#split .dual>.side{background:#202124;border-color:#3c4043;color:#e8eaed}
#split .dual>.side.hr,#split .dual>.side.mk{background:#202124}
#split .side .who{color:#9aa0a6}
#split .side.hr h3{color:#8ab4ff}#split .side.mk h3{color:#ff8a80}
#split .card{background:rgba(255,255,255,.04);border-color:#3c4043;color:#e8eaed}
#split .card .k{color:#9aa0a6}
#split .card.shared{background:rgba(0,163,108,.14);border-color:#2e8b6a}
#split .card.shared .k{color:#4ad398}
/* 2026-09-28 1つの財布の結び目＝反転して左に */
#board .art-beat.knot{margin:-15px auto -40px 4%}
#board .art-beat.knot img{transform:scaleX(-1)}
@media (max-width:860px){#board .art-beat.knot{margin:16px auto -20px 0}}
#board .art-beat.knot img{animation:none;opacity:1;transform:scaleX(-1)}
/* 2026-09-28 jota「イラストはオブジェクトに被っていい。背景のように」→ 中身の箱の端に重なる位置へ */
#report>.motif{left:calc(50% - 600px);bottom:-40px;width:clamp(220px,22vw,320px)}
#problem>.motif{right:calc(50% - 680px);bottom:-30px}
#contact>.motif.flower{left:calc(50% - 600px);bottom:-70px}
#contact>.motif.hand{right:calc(50% - 560px);top:-30px}
@media (max-width:1100px){
  #report>.motif{left:-4%}
  #problem>.motif{right:-3%}
  #contact>.motif.flower{left:-5%}
  #contact>.motif.hand{right:2%}
}
/* ===== 2026-09-28 POLLSの流れ＝外側の背景だけ黒に。中の画面（管理画面・スマホ）は白のまま ===== */
#flow .dual>.side,#flow .dual>.side.hr,#flow .dual>.side.mk{background:#202124;border-color:#3c4043;color:#e8eaed}
#flow .side.hr h3{color:#8ab4ff}#flow .side.mk h3{color:#ff8a80}
#flow .progress-dot{background:#3c4043}
#flow .progress-dot.active{background:#22BA7F}
#flow .admin-panel,#flow .mobile-frame{border-color:#3c4043}
#flow .active-focus{border-color:#22BA7F;box-shadow:0 25px 50px -12px rgba(34,186,127,.25)}
#flow .panel-inactive{opacity:.55;filter:none}

/* ===== 2026-09-28 公開準備：プライバシーポリシーの本文・フォームの入力欄 ===== */
.amodal-body.privacy{color:#3D4A5C;font-size:14px;line-height:1.9}
.amodal-body.privacy h4{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:15px;margin:22px 0 6px;color:#3D4A5C}
.amodal-body.privacy p{margin:0 0 10px}
.gate form{margin:0}
.gate button.btn{margin-top:4px}
/* ===== 2026-09-29 スマホ・タブレット縦の可読性（900px以下） ===== */
@media (max-width:900px){
  #railLab{display:none}                                  /* 切り替えの案内が文に重なるので消す（つまみは残す） */
  .sub{font-size:15px;line-height:1.85;max-width:none}
  .sub br{display:none}                                    /* PC用の改行を外す */
  section>.wrap>h2{max-width:none;font-size:clamp(26px,7.2vw,32px)}
  .side>h3,.side h3{font-size:17px;line-height:1.5}
  .kpis{grid-template-columns:repeat(3,1fr);gap:6px}
  .kpi{padding:8px 6px}
  .kpi .num{font-size:17px;white-space:nowrap}
  .kpi .lbl{font-size:10px}
  .tabs{flex-wrap:nowrap;-webkit-overflow-scrolling:touch;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .card,.st{font-size:15px}
  .case .cq{font-size:16px}
  .gate .row2{grid-template-columns:1fr}
  .gate .row2 input::placeholder{font-size:14px}
  .ins{font-size:14.5px;line-height:1.85}
  .tc .tr{font-size:13px}
  .df-note{font-size:12px}
  #board .pos-head h2{font-size:clamp(24px,6.8vw,30px)}
}
@media (max-width:900px){.sub{text-align:center}}
@media (max-width:640px){
  section>.wrap>.sub,#board .sub{text-align:left;max-width:none}
  .close p{text-align:left;line-height:1.9!important}
  .close p br{display:none}
  .close .big{text-align:center;font-size:clamp(20px,5.8vw,24px);line-height:1.6}
  .form h2{font-size:22px!important}
  #board>.wrap>div:first-child{text-align:left}
  #board .pos-head{justify-content:flex-start}
}
/* ===== 2026-09-29 ⇔ に気づいてもらう動き＝横にゆっくり揺れる（触ったら止まる） ===== */
@keyframes swayX{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.sw{animation:swayX 2.4s ease-in-out infinite}
html.rail-touched .sw{animation:none}
@media (prefers-reduced-motion:reduce){.sw{animation:none}}

/* ===== 2026-10-01 v2（12章）で足した要素。見た目の型は既存の .card / .wall / .merge に合わせる ===== */
/* 1章 冒頭の下の1枚絵（流れ）＝細い線でつないだ丸い札。箱を伸ばさない */
.hero-loop{display:flex;align-items:center;gap:0;margin:38px auto 0;max-width:960px;position:relative;z-index:3;padding:6px 0}
.hero-loop::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:0;border-top:2px dashed var(--g300);z-index:0}
.hero-loop .hl-st{position:relative;z-index:1;flex:1;background:#fff;border:1.5px solid var(--g900);border-radius:999px;padding:10px 14px;text-align:center;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:15px;line-height:1.3;color:var(--g900);box-shadow:0 6px 16px rgba(15,23,42,.06)}
.hero-loop .hl-st small{display:block;font-family:"Noto Sans JP";font-weight:500;font-size:11px;color:var(--g500);margin-top:3px;letter-spacing:.02em}
.hero-loop .hl-ar{position:relative;z-index:1;flex:0 0 28px;text-align:center;color:var(--g400);font-size:12px}
.hero-loop .hl-split{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;flex:1.15}
.hero-loop .hl-split .hl-st{border-width:1.5px}
.hero-loop .hl-split .hl-st.co{border-color:var(--blue);color:var(--blue)}
.hero-loop .hl-split .hl-st.me{border-color:var(--p600);color:var(--p700);background:var(--p50)}
.hero-loop .hl-split .hl-st small{color:inherit;opacity:.75}
@media (max-width:900px){.hero-loop{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px;padding:0}.hero-loop::before{display:none}.hero-loop .hl-ar{display:none}.hero-loop .hl-st{padding:9px 8px;font-size:14px;box-shadow:none}.hero-loop .hl-split{grid-column:1/-1;flex-direction:row}}
/* 3章 大きい組織・小さい組織／担当者の作業時間 */
#problem .orgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:960px;margin:0 auto}
#problem .orgs .card{margin-top:0;line-height:1.9}
#problem .orgs .card .k{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:15px;color:var(--g900);margin-bottom:6px}
#problem .orgs-sum{margin-top:26px;margin-bottom:0}
#problem .walls{max-width:960px;margin-left:auto;margin-right:auto}
#problem .ttime{max-width:960px;margin:28px auto 0;background:#202124;color:#e8eaed;border-radius:16px;padding:22px 24px}
#problem .ttime .font-title{color:#fff;font-size:18px;text-align:center;margin-bottom:12px}
#problem .ttime table{width:100%;border-collapse:collapse}
#problem .ttime th,#problem .ttime td{padding:10px 12px;text-align:left;border-bottom:1px solid #3c4043;font-size:15px;vertical-align:top}
#problem .ttime th{color:#9aa0a6;font-size:12px;font-weight:700}
#problem .ttime td:first-child{color:#bdc1c6;white-space:nowrap}
#problem .ttime td:nth-child(2){color:#ff8a80}
#problem .ttime td:nth-child(3){color:#7EE5B7;font-family:"M PLUS 1",sans-serif;font-weight:700}
#problem .ttime td small{display:block;font-family:"Noto Sans JP";font-weight:400;font-size:12px;color:#9aa0a6;margin-top:2px}
#problem .ttime tbody tr:last-child td{border-bottom:0}
#problem .ttime .note{color:#9aa0a6;margin:10px 0 0;text-align:right}
@media (max-width:760px){#problem .orgs{grid-template-columns:1fr}#problem .ttime{padding:16px 12px}#problem .ttime th,#problem .ttime td{padding:8px 6px;font-size:13px}#problem .ttime td:first-child{white-space:normal}}
/* 4章 ENGINE：3つの点と「できること」 */
#talk .sol-row .t{border-radius:20px;line-height:1.6}
#talk .sol-row .t small{color:var(--g500);font-size:12.5px}
#talk .sol-row.can .t{background:transparent;border-style:dashed}
#talk .sol-row.can .t small{color:var(--g500)}
#talk .sol-cap{margin-top:12px;line-height:1.8}
/* 7章 残るもの */
#stack .sub small{display:block;font-size:13px;color:var(--g500);margin-top:6px}
/* 11章 目指していること */
#vision{background:var(--g50)}
#vision .vision-box{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--g200);border-radius:16px;padding:22px 24px}
#vision .vision-box p{margin:0;color:var(--g600);line-height:2}
#vision .vision-box .vloop{margin-top:10px;font-family:"M PLUS 1",sans-serif;font-weight:700;color:var(--p700)}
/* 12章 締め */
#contact .close .close-h{font-size:clamp(22px,2.6vw,34px)}
/* 2026-10-02 レポート「つながり」タブの矢印の図（QTnetのつながり図と同じ型・ダミー） */
#report .netbox{background:#111417;border:1px solid #3c4043;border-radius:12px;padding:10px 10px 8px;margin:12px 0}
#report .netg{width:100%;max-width:440px;display:block;margin:0 auto}
#report .netg .nn{fill:#2b2f33;stroke:#5f6368;stroke-width:1}
#report .netg .nl{fill:#e8eaed;font-size:11px;font-weight:700;font-family:"M PLUS 1",sans-serif}
#report .netg .nv{fill:#fff;font-size:11px;font-weight:700}
#report .netcap{font-size:11px;color:#9aa0a6;text-align:center;margin-top:4px}
#report .netg .nv{paint-order:stroke;stroke:#111417;stroke-width:5px;stroke-linejoin:round;font-size:12px}

/* ===== 2026-10-02 分析レポートを作り直し（従業員と顧客で項目を変える・図を増やす） ===== */
#report .rtabs{margin:6px 0 14px}
#report .rtabs span{background:transparent;border-color:#3c4043;color:#bdc1c6}
#report .rtabs span:hover{background:#2b2f33}
#report .side.hr .rtabs span.on{background:#8ab4ff;border-color:#8ab4ff;color:#111417}
#report .side.mk .rtabs span.on{background:#ff8a80;border-color:#ff8a80;color:#111417}
#report .rbody{min-height:420px}
#report .kpis.k4{grid-template-columns:repeat(4,1fr)}
#report .kpi .num small{font-size:13px;font-weight:700;color:#9aa0a6;margin-left:2px}
#report .rh{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:14px;color:#fff;margin:16px 0 8px}
#report .rgrid{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:center;margin-top:8px}
#report .rgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#report .donutbox{display:flex;flex-direction:column;align-items:center;gap:8px}
#report .rdonut{width:150px;height:150px}
#report .rdonut .dn{fill:#fff;font-size:20px;font-weight:800;font-family:"M PLUS 1",sans-serif}
#report .rdonut .ds{fill:#9aa0a6;font-size:8px}
#report .dlegend{width:100%;max-width:220px}
#report .dl{display:flex;align-items:center;gap:8px;font-size:12px;color:#bdc1c6;padding:2px 0}
#report .dl i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
#report .dl b{margin-left:auto;color:#fff}
#report .rchart{width:100%;display:block;background:#1a1c1f;border:1px solid #3c4043;border-radius:12px}
#report .rchart .ax{fill:#7f868c;font-size:10px}
#report .rchart .rv{font-size:11px;font-weight:700}
#report .rlegend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:11.5px;color:#bdc1c6;margin:8px 0 2px}
#report .rlegend i{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid;margin-right:5px;vertical-align:-1px}
#report .rcall{border-left:4px solid var(--cc);background:color-mix(in srgb,var(--cc) 10%,#202124);border-radius:10px;padding:10px 12px}
#report .rcall b{display:block;color:var(--cc);font-family:"M PLUS 1",sans-serif;font-size:14px}
#report .rcall span{font-size:12.5px;color:#bdc1c6}
#report .rpill{display:inline-block;border:1px solid var(--pc);color:var(--pc);border-radius:999px;padding:1px 10px;font-size:11.5px;font-weight:700;font-family:"M PLUS 1",sans-serif;margin-right:6px;white-space:nowrap}
#report .hypos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#report .hypo{background:#2b2f33;border:1px solid #3c4043;border-radius:12px;padding:12px 14px}
#report .hypo .ht{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:13.5px;color:#fff;line-height:1.5;margin-bottom:6px}
#report .hypo p{margin:6px 0 0;font-size:12.5px;color:#bdc1c6;line-height:1.7}
#report .karte{background:#2b2f33;border:1px solid #3c4043;border-left:4px solid #8ab4ff;border-radius:12px;padding:14px 16px}
#report .karte .kh{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
#report .karte .kh b{color:#fff;font-family:"M PLUS 1",sans-serif;margin-right:6px}
#report .karte .kt{font-size:11.5px;color:#8ab4ff;font-weight:700;margin-top:10px}
#report .karte .kt.ai{color:#7EE5B7}#report .karte .kt.me{color:#fbbf24}
#report .karte .ka{background:#1f2a3a;border-radius:8px;padding:8px 10px;margin-top:4px;font-size:13px;color:#e8eaed;line-height:1.7}
#report .karte .ka.me{background:#3a3220}
#report .karte .kq{font-size:12.5px;color:#7EE5B7;margin-top:4px}
#report .rnote{font-size:11.5px;color:#9aa0a6;margin-top:8px}
#report .r3{margin:0;padding-left:20px;color:#e8eaed;font-size:13.5px;line-height:1.9}
#report .rtable{width:100%;border-collapse:collapse;font-size:13px}
#report .rtable th{color:#9aa0a6;font-size:11px;text-align:left;padding:6px 8px;border-bottom:1px solid #3c4043}
#report .rtable td{color:#e8eaed;padding:10px 8px;border-bottom:1px solid #3c4043;vertical-align:middle}
#report .rtable .rk{font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:18px;color:#ff8a80;width:36px}
#report .rtable .n{font-family:"M PLUS 1",sans-serif;font-weight:700;white-space:nowrap}
#report .rb{height:6px;background:#3c4043;border-radius:3px;margin-top:6px;overflow:hidden}
#report .rb i{display:block;height:100%;border-radius:3px}
#report .segs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#report .seg{background:#2b2f33;border:1px solid #3c4043;border-top:4px solid var(--sc);border-radius:12px;padding:12px}
#report .seg .sgt{font-family:"M PLUS 1",sans-serif;font-weight:800;color:var(--sc);font-size:15px}
#report .seg .ss{font-size:11px;color:#9aa0a6}
#report .seg p{font-size:12.5px;color:#e8eaed;line-height:1.7;margin:8px 0 0}
#report .seg .rq{font-size:12px;margin-top:8px}
/* 動き：タブを開くたびに描き直す */
@keyframes rDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rFade{from{opacity:0}to{opacity:1}}
@keyframes rGrowW{from{width:0}}
@keyframes rSeg{from{stroke-dasharray:0 100}}
#report .rbody.play .rline{stroke-dasharray:1;stroke-dashoffset:1;animation:rDraw 1.1s cubic-bezier(.22,1,.36,1) forwards}
#report .rbody.play .rline-d{opacity:0;animation:rFade .8s ease forwards}
#report .rbody.play .rdot,#report .rbody.play .rv,#report .rbody.play .rarea{opacity:0;animation:rFade .4s ease forwards}
#report .rbody.play .rarea{animation-delay:.6s}
#report .rbody.play .hbar-fill,#report .rbody.play .rb i{animation:rGrowW .9s cubic-bezier(.22,1,.36,1) both}
#report .rbody.play .rseg{animation:rSeg 1s cubic-bezier(.22,1,.36,1) both}
#report .rbody.play .hypo,#report .rbody.play .seg,#report .rbody.play .kpi{animation:rFade .5s ease both}
@media (prefers-reduced-motion:reduce){#report .rbody.play *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}
@media (max-width:760px){
  #report .kpis.k4{grid-template-columns:repeat(2,1fr)}
  #report .rgrid,#report .rgrid2,#report .hypos,#report .segs{grid-template-columns:1fr}
  #report .rtable{font-size:12px}
}
#report .dual>.side{min-width:0}
#report .rtabs{max-width:100%;min-width:0}
#report .rbody{min-width:0;max-width:100%}
@media (max-width:900px){#report .rtabs{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}
@media (max-width:760px){#report .rchart .ax{font-size:17px}#report .rchart .rv{font-size:17px}}
/* 2026-10-02 レポートは上だけ見せて、下はぼかす（続きはケーススタディで） */
#report .rbody{position:relative;height:460px;min-height:0;overflow:hidden}
#report .pk-cover{position:absolute;left:-2px;right:-2px;bottom:0;height:230px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%);
  background:linear-gradient(to bottom,rgba(32,33,36,0) 0%,rgba(32,33,36,.55) 45%,rgba(32,33,36,.92) 100%)}
#report .pk-lock{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:92%}
#report .pk-lock b{color:#fff;font-family:"M PLUS 1",sans-serif;font-size:15px}
#report .pk-lock span{color:#9aa0a6;font-size:12px;line-height:1.6}
#report .pk-btn{display:inline-block;margin-top:4px;border:1px solid #7EE5B7;color:#7EE5B7;border-radius:999px;padding:6px 16px;font-size:12.5px;font-weight:700;text-decoration:none}
#report .pk-btn:hover{background:rgba(126,229,183,.12)}
#report .xc{background:#2b2f33;border:1px solid #3c4043;border-radius:12px;padding:12px 14px;font-size:13px;color:#bdc1c6;line-height:1.7}
#report .xc b{display:block;font-family:"M PLUS 1",sans-serif;margin-bottom:2px}
#report .rcall{margin-top:10px}
@media (max-width:760px){#report .rbody{height:520px}#report .pk-cover{height:240px}}
#report .gate{margin-top:24px}

/* ===== 2026-10-02 文字を減らす（大きな一言＋小さく1行）／真ん中の大きな切り替えボタン ===== */
#problem .orgs .card.org{text-align:center;padding:22px 18px}
#problem .orgs .card.org .ico{display:block;font-size:34px;line-height:1;margin-bottom:8px}
#problem .orgs .card.org .k{font-size:13px;color:var(--g500);font-weight:500;margin-bottom:4px}
#problem .orgs .card.org b{display:block;font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);color:var(--g900);line-height:1.3}
#problem .orgs .card.org small{display:block;font-size:13px;color:var(--g500);margin-top:8px;line-height:1.7}
#problem .walls.big .wall{text-align:center;padding:26px 18px}
#problem .walls.big .wbig{font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:clamp(28px,3vw,38px);line-height:1.25;color:#fff;margin:10px 0 10px}
#problem .walls.big .wall:nth-child(1) .wbig{color:#ff8a80}
#problem .walls.big .wsm{font-size:13px;color:#bdc1c6;line-height:1.7}
#problem .tbars{display:flex;flex-direction:column;gap:18px;margin-top:6px}
#problem .tb .tl{font-family:"M PLUS 1",sans-serif;font-weight:700;color:#fff;font-size:15px;margin-bottom:6px}
#problem .tr2{display:grid;grid-template-columns:70px 1fr;align-items:center;column-gap:10px;margin:4px 0;position:relative}
#problem .tr2 .tg{font-size:11.5px;color:#9aa0a6;grid-row:1/3}
#problem .tr2 i{display:block;height:14px;border-radius:7px;grid-column:2;min-width:6px}
#problem .tr2.old i{background:#ff8a80}
#problem .tr2.new i{background:#7EE5B7}
#problem .tr2 b{grid-column:2;font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:clamp(18px,2vw,24px);line-height:1.3;margin-top:2px}
#problem .tr2.old b{color:#ff8a80}#problem .tr2.new b{color:#7EE5B7}
#problem .tr2 small{grid-column:2;font-size:11.5px;color:#9aa0a6}
#problem .ttime.in-view .tr2 i,#problem .tr2 i{transform-origin:left;animation:tbGrow 1.1s cubic-bezier(.22,1,.36,1) both}
#problem .tr2.new i{animation-delay:.5s}
@keyframes tbGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 活用領域：札 */
#split .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
#split .chips span{border-radius:999px;padding:9px 16px;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:15px}
#split .side.hr .chips span{background:rgba(138,180,255,.12);border:1px solid rgba(138,180,255,.45);color:#cfe0ff}
#split .side.mk .chips span{background:rgba(255,138,128,.12);border:1px solid rgba(255,138,128,.45);color:#ffd6d1}
#split .ret{margin-top:18px;font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:clamp(18px,2vw,24px);color:#fff;line-height:1.5}
#split .ret .k{display:block;font-family:"Noto Sans JP";font-weight:500;font-size:12px;color:#9aa0a6}
#split .logn{margin-top:12px;font-size:12px;color:#7EE5B7}
/* 真ん中の大きな切り替えボタン */
.bigsw{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px auto 26px;flex-wrap:nowrap}
.bigsw [data-go]{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:15px;background:#fff;border:2px solid var(--g200);color:var(--g500);border-radius:999px;padding:10px 18px;cursor:pointer;transition:all .25s;white-space:nowrap}
.bigsw .bs-l.on{border-color:#2d5be3;color:#2d5be3;background:#EEF3FF}
.bigsw .bs-r.on{border-color:#E05E55;color:#E05E55;background:#FFF4F1}
.bigsw .bs-mid{width:64px;height:64px;flex:0 0 64px;border-radius:50%;border:0;background:var(--g900);color:#fff;font-size:26px;cursor:pointer;box-shadow:0 10px 24px rgba(15,23,42,.25);animation:swayX 2.4s ease-in-out infinite}
html.rail-touched .bigsw .bs-mid{animation:none}
.bigsw .bs-mid:hover{transform:scale(1.06)}
@media (max-width:640px){.bigsw{gap:6px}.bigsw [data-go]{font-size:12px;padding:8px 10px}.bigsw .bs-mid{width:52px;height:52px;flex-basis:52px;font-size:22px}}
@media (prefers-reduced-motion:reduce){.bigsw .bs-mid{animation:none}}
#problem .tr2{grid-template-columns:64px 1fr 150px;column-gap:12px}
#problem .tr2 .tg{grid-row:1;grid-column:1}
#problem .tr2 i{grid-row:1;grid-column:2}
#problem .tr2 b{grid-row:1;grid-column:3;margin-top:0;text-align:left}
#problem .tr2 small{grid-row:2;grid-column:3}
@media (max-width:640px){#problem .tr2{grid-template-columns:52px 1fr 104px;column-gap:8px}#problem .tr2 b{font-size:16px}}
@media (max-width:640px){#split .chips{gap:6px}#split .chips span{font-size:12.5px;padding:7px 11px}}

/* ===== 2026-10-02 文字を減らし、見て分かる形に ===== */
#talk .cando,#stack .keeps{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#stack .keeps{justify-content:center;margin:-4px 0 22px}
#talk .cando span,#stack .keeps span{background:#fff;border:1px solid var(--g200);border-radius:999px;padding:7px 14px;font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:13.5px;color:var(--g700)}
#talk .sol-row .t b{font-size:15.5px}
/* 活用領域：札が吹き出しのように1つずつ出る */
#split .chips span{position:relative;opacity:0;transform:translateY(10px) scale(.92)}
#split .chips span::after{content:"";position:absolute;left:18px;bottom:-6px;width:10px;height:10px;background:inherit;border-right:1px solid;border-bottom:1px solid;border-color:inherit;transform:rotate(45deg);clip-path:polygon(100% 0,100% 100%,0 100%)}
#split.in .chips span{animation:chipPop .5s cubic-bezier(.22,1.4,.36,1) forwards}
#split.in .chips span:nth-child(2){animation-delay:.12s}#split.in .chips span:nth-child(3){animation-delay:.24s}
#split.in .chips span:nth-child(4){animation-delay:.36s}#split.in .chips span:nth-child(5){animation-delay:.48s}#split.in .chips span:nth-child(6){animation-delay:.6s}
@keyframes chipPop{to{opacity:1;transform:none}}
#split .flowdown{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:16px 0 0 22px}
#split .flowdown i{width:6px;height:6px;border-radius:50%;background:#7EE5B7;opacity:.25}
#split.in .flowdown i{animation:dotRun 1.4s ease-in-out infinite}
#split.in .flowdown i:nth-child(2){animation-delay:.2s}#split.in .flowdown i:nth-child(3){animation-delay:.4s}
@keyframes dotRun{0%,100%{opacity:.25}50%{opacity:1}}
#split .ret{margin-top:10px;opacity:0;transform:translateY(8px)}
#split.in .ret{animation:chipPop .6s ease .9s forwards}
@media (prefers-reduced-motion:reduce){#split .chips span,#split .ret{opacity:1;transform:none;animation:none!important}}

/* ===== 2026-10-02 冒頭の流れの図（journey.js） ===== */
.journey{max-width:1080px;margin:30px auto 0;position:relative;z-index:3}
.journey .jsvg{width:100%;height:auto;display:block;overflow:visible}
.journey .jsvg.v{max-width:400px;margin:0 auto}
.journey .jt1{font-family:"M PLUS 1",sans-serif;font-weight:800;font-size:17px}
.journey .jsvg.v .jt1{font-size:18px}
.journey .jt2{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:13px}
/* 入ってくる動き：線が描かれ、段が順にポンと出る */
.journey .jdraw{stroke-dasharray:1;stroke-dashoffset:1;animation:jDraw 1.6s cubic-bezier(.65,0,.35,1) .3s forwards}
.journey .jdraw.jd-b{animation-delay:1.5s;animation-duration:.9s}
@keyframes jDraw{to{stroke-dashoffset:0}}
.journey .jn{opacity:0;animation:jPop .6s cubic-bezier(.22,1.5,.36,1) forwards;animation-delay:calc(.35s + var(--i)*.28s);transform-box:fill-box}
.journey .jt{opacity:0;animation:jFade .5s ease forwards;animation-delay:calc(.55s + var(--i)*.28s)}
@keyframes jPop{from{opacity:0}to{opacity:1}}
@keyframes jFade{from{opacity:0}to{opacity:1}}
.journey .jdots,.journey .jflow{opacity:0;animation:jFade .8s ease 2.4s forwards}
.journey .jflow{animation:jFade .8s ease 2.4s forwards,jFlow 1.2s linear infinite}
@keyframes jFlow{to{stroke-dashoffset:-18}}
/* 段の波紋：順番に光る */
.journey .jping{transform-box:fill-box;transform-origin:center;opacity:0;animation:jPing 4.8s ease-out infinite;animation-delay:calc(2.4s + var(--i)*.65s)}
@keyframes jPing{0%{opacity:.7;transform:scale(1)}18%{opacity:0;transform:scale(1.55)}100%{opacity:0;transform:scale(1.55)}}
/* 中の絵の小さな動き */
.journey .ji{transform-box:fill-box;transform-origin:center}
.journey .ji-ask{animation:jBob 2.6s ease-in-out infinite}
@keyframes jBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(-4deg)}}
.journey .jl{stroke-dasharray:1;stroke-dashoffset:1;animation:jLine 3.6s ease-in-out infinite}
.journey .jl2{animation-delay:.35s}.journey .jl3{animation-delay:.7s}
@keyframes jLine{0%{stroke-dashoffset:1}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.journey .jb1{animation:jTalk 3s ease-in-out infinite}
.journey .jb2{animation:jTalk 3s ease-in-out 1.5s infinite}
@keyframes jTalk{0%,100%{opacity:.35;transform:translateY(1px)}20%,60%{opacity:1;transform:none}}
.journey .jd{animation:jType 1.2s ease-in-out infinite}.journey .jd2{animation-delay:.2s}.journey .jd3{animation-delay:.4s}
@keyframes jType{0%,100%{opacity:.35}50%{opacity:1}}
.journey .jbar{transform-box:fill-box;transform-origin:50% 100%;animation:jBar 2.8s ease-in-out infinite}
.journey .jbar2{animation-delay:.3s}.journey .jbar3{animation-delay:.6s}
@keyframes jBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.journey .jw{opacity:.2;animation:jWin 3.2s ease-in-out infinite}
.journey .jw1{animation-delay:.25s}.journey .jw2{animation-delay:.5s}.journey .jw3{animation-delay:.75s}.journey .jw4{animation-delay:1s}.journey .jw5{animation-delay:1.25s}
@keyframes jWin{0%,100%{opacity:.2}40%,70%{opacity:1}}
.journey .jh{transform-box:fill-box;transform-origin:center;animation:jHeart 2.6s ease-in-out infinite}
@keyframes jHeart{0%{opacity:0;transform:translateY(4px) scale(.6)}30%,70%{opacity:1;transform:translateY(-2px) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.journey *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}.journey .jdots{display:none}}
.journey .jsvg.h .jt1{font-size:20px}
.journey .jsvg.h .jt2{font-size:14px}
.journey .jopt-t{font-family:"M PLUS 1",sans-serif;font-weight:700;font-size:11.5px}
.journey .jd-opt{opacity:0;animation:jFade .8s ease 1.6s forwards}
/* 2026-10-03 対話のあとに回答者へ返す（STEP3の中） */
#flow .msg.fb{align-self:stretch;max-width:100%;background:#F2FBF6;border:1.5px dashed #0EA36E;color:#14532d;border-radius:12px;padding:8px 10px;font-size:11.5px;line-height:1.6}
#flow .msg.fb .who{display:block;color:#0EA36E;font-weight:700;font-size:10.5px;margin-bottom:2px}
/* 2026-10-03 切り絵版：帯の白い筋（川の流れ）はゆっくり */
.journey .jflow{animation:jFade .8s ease 2.2s forwards,jFlow2 2.6s linear infinite}
@keyframes jFlow2{to{stroke-dashoffset:-48}}
.journey .jt1{fill-opacity:1}
/* 2026-10-03 jota「花瓶の位置を左に」 */
#cases .art-beat.vase{margin:10px auto -42px 3%}
@media (max-width:900px){#cases .art-beat.vase{margin:18px auto -20px 0}}