/* ===== hero copy flow (kept from v3) ===== */
.hero-v2 .hero-flow{margin:0 0 30px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:#c5d4ea;letter-spacing:.04em}
.hero-v2 .hero-flow span{padding:6px 12px;border:1px solid rgba(190,205,235,.35);border-radius:999px;background:rgba(255,255,255,.04)}
.hero-v2 .hero-flow i{font-style:normal;color:#8fa6cf}
@media(max-width:540px){.hero-v2 .hero-flow{font-size:11px;gap:8px}.hero-v2 .hero-flow span{padding:4px 9px}}

/* ===== cases section v4: real-looking deliverables ===== */
.cases{background:#fff;padding:100px 8%}
.cases .wrap{max-width:1180px;margin:auto}
.cases .label{font-size:clamp(34px,4.5vw,56px);margin-bottom:18px;color:#1d2836}
.cases h2{margin:0 0 16px;font-size:clamp(26px,3vw,38px)}
.cases .section-lead{text-align:left;margin:0 0 20px;max-width:780px}
.cases .legend{font-size:13px;color:#59677a;border:1px solid var(--line);background:#f4f7fb;padding:14px 18px;margin:0 0 50px;line-height:1.9}
.cases .legend .chip{margin-right:8px}
.chip{display:inline-block;font:500 11px 'Noto Sans JP',sans-serif;letter-spacing:.08em;padding:4px 10px;border-radius:999px;border:1px solid #b9c7da;color:#3d4a5c;background:#fff;vertical-align:middle;white-space:nowrap}
.chip.sample{border-color:#c9a34a;color:#7a5a12;background:#fff8e6}
.chip.real{border-color:#2458a0;color:#2458a0;background:#eef3fb}
.case{padding:64px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:8px}
.case-head .num{font-size:14px;color:#2458a0}
.case-head h3{font-size:clamp(22px,2.3vw,28px);margin:0;line-height:1.5}
.case-sub{margin:0 0 30px;font-size:15px;color:#59677a;line-height:1.8}
.case-flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;list-style:none;padding:0;margin:0 0 34px;border:1px solid var(--line);background:#f8fafd}
.case-flow>li{padding:24px 26px;position:relative}
.case-flow>li+li{border-left:1px solid var(--line)}
.case-flow>li+li:before{content:'';position:absolute;left:-9px;top:34px;width:16px;height:16px;background:#f8fafd;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(-135deg)}
.case-flow h4{margin:0 0 10px;font:700 13px/1.5 'Noto Sans JP',sans-serif;letter-spacing:.1em;color:#2458a0;display:flex;align-items:center;gap:8px}
.case-flow h4 i{font:500 11px Futura,'Avenir Next',Arial,sans-serif;letter-spacing:.14em;color:#8091ab}
.case-flow p{margin:0;font-size:14.5px;line-height:1.9;color:#3d4a5c}
.case-flow ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.9;color:#3d4a5c;list-style:disc}.case-flow ul li{padding:0 0 6px;margin:0}
.case-flow>li:last-child{background:#eef3fb}
.case-foot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:26px}
.case-foot .similar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#59677a}
.case-foot .similar a{font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:3px;background:#f4f7fb;color:#1d2836}
.case-foot .similar a:hover{background:#e8eef8;opacity:1}
.case-foot .ask{margin-left:auto}
.case-foot .ask a{font-size:14px}
/* deliverable stage */
.stage{position:relative;background:linear-gradient(135deg,#0c2240,#153b67);border-radius:8px;padding:28px;color:#fff;overflow:hidden}
.stage:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 85% 10%,rgba(150,170,255,.28),transparent 70%);pointer-events:none}
.stage-cap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;color:#c5d4ea;margin-bottom:18px}
.stage-cap b{font-weight:500;color:#fff}
.stage-note{position:relative;margin:16px 0 0;font-size:12px;color:#9fb5d9;line-height:1.7}
.stage-grid{position:relative;display:grid;gap:20px}
.stage-grid.two{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.post{max-width:440px}
.stage-grid.lp{grid-template-columns:1.35fr .65fr;align-items:start}
/* browser / phone frames */
.frame{background:#fff;color:#1d2836;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.4);overflow:hidden;font-size:12px;line-height:1.6}
.frame .bar{height:26px;background:#e9edf3;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #d8e1ec}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:#c3ccd9}
.frame .bar .url{margin-left:8px;flex:1;height:14px;border-radius:7px;background:#fff;font-size:9px;color:#8091ab;padding:0 8px;line-height:14px;letter-spacing:.04em}
.frame.phone{border-radius:22px;border:6px solid #1d2836;width:min(100%,250px);margin:auto;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.frame.phone .bar{height:18px;background:#fff;border:0;justify-content:center}
.frame.phone .bar i{width:40px;height:5px;border-radius:3px;background:#1d2836}
.frame-title{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #e5eaf0;font-size:12px;font-weight:700}
.frame-title small{font-weight:400;color:#8091ab}
/* --- LP mock --- */
.lp{font-size:11.5px}
.lp-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:11px}
.lp-nav b{font-family:'Noto Serif JP',Georgia,serif;font-weight:500;letter-spacing:.12em;font-size:13px}
.lp-nav span{color:#59677a;margin-left:12px}
.lp-nav .btn{background:#8a6d4b;color:#fff;padding:6px 10px;border-radius:2px;font-size:10px;margin-left:12px}
.lp-hero{position:relative;height:190px;background:#dcd3c6 center/cover no-repeat}
.lp-hero .copy{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.lp-hero .copy b{display:block;font:500 19px/1.45 'Noto Serif JP',Georgia,serif;letter-spacing:.04em}
.lp-hero .copy span{font-size:11px;display:block;margin-top:6px;opacity:.95}
.lp-body{padding:14px 16px 16px;display:grid;gap:12px}
.lp-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lp-menu div{border:1px solid #e5e0d8;border-radius:3px;padding:9px 10px}
.lp-menu b{display:block;font-size:11.5px}
.lp-menu span{display:block;font-size:10px;color:#59677a;margin-top:3px}
.lp-menu em{display:block;font-style:normal;font-size:10.5px;color:#8a6d4b;margin-top:4px}
.lp-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:10.5px;color:#3d4a5c}
.lp-feat b{display:block;font-size:11px;color:#1d2836;margin-bottom:2px}
.lp-cta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lp-cta a{display:block;text-align:center;padding:9px 6px;border-radius:3px;font-size:10.5px;font-weight:700;color:#fff;background:#8a6d4b;pointer-events:none}
.lp-cta a.line{background:#06c755}
.lp-cta a.tel{background:#fff;color:#8a6d4b;border:1px solid #8a6d4b}
.lp-access{font-size:10.5px;color:#59677a;border-top:1px solid #e5e0d8;padding-top:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.lp-side{display:grid;gap:14px}
.lp-side .frame.phone .lp-hero{height:110px}
.lp-side .frame.phone .lp-body{padding:10px 12px}
.lp-side .frame.phone .lp-cta{grid-template-columns:1fr}
.lp-side .frame.phone .lp-cta a{padding:8px}
.lp-side .frame.phone .lp-hero .copy b{font-size:14px}
.hint{position:relative;font-size:12px;color:#dbe5f5;line-height:1.7;background:rgba(255,255,255,.06);border:1px solid rgba(200,215,240,.25);border-radius:6px;padding:10px 12px}
.hint b{display:block;color:#fff;font-weight:700;margin-bottom:2px;font-size:12px}
/* --- SNS / ad mock --- */
.post{background:#fff;color:#1d2836;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.4);overflow:hidden;font-size:11.5px}
.post-head{display:flex;align-items:center;gap:8px;padding:9px 12px}
.post-head i{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#d7b48a,#8a6d4b)}
.post-head b{font-size:11px}
.post-head span{font-size:10px;color:#8091ab;margin-left:auto}
.post-img{position:relative;aspect-ratio:1;background:#eee center/cover no-repeat}
.post-img .ov{position:absolute;left:14px;bottom:14px;right:14px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.post-img .ov b{display:block;font:500 20px/1.4 'Noto Serif JP',Georgia,serif;letter-spacing:.06em}
.post-img .ov span{display:inline-block;margin-top:6px;font-size:10px;letter-spacing:.1em;border:1px solid rgba(255,255,255,.8);padding:3px 8px}
.post-body{padding:10px 12px 12px}
.post-body .icons{display:flex;gap:10px;margin-bottom:6px;color:#1d2836}
.post-body .icons i{width:14px;height:14px;border:1.5px solid #1d2836;border-radius:50%;display:inline-block}
.post-body p{margin:0;font-size:11px;line-height:1.7}
.post-body .tags{color:#2458a0;font-size:10.5px;margin-top:4px;line-height:1.7}
.ad{background:#fff;color:#1d2836;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.4);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.ad .ad-img{height:150px;background:#eee center 20%/cover no-repeat;position:relative}
.ad .ad-img span{position:absolute;left:12px;top:12px;background:#fff;color:#8a6d4b;font-size:10px;letter-spacing:.12em;padding:4px 8px}
.ad .ad-copy{padding:12px 14px 14px;display:grid;gap:6px;background:#fbf8f4}
.ad .ad-copy b{font:500 15px/1.45 'Noto Serif JP',Georgia,serif;letter-spacing:.04em}
.ad .ad-copy p{margin:0;font-size:11px;line-height:1.7;color:#3d4a5c}
.ad .ad-copy .btn{justify-self:start;background:#8a6d4b;color:#fff;font-size:10.5px;font-weight:700;padding:7px 12px;border-radius:2px}
.ad-meta{font-size:10.5px;color:#8091ab;display:flex;gap:10px;flex-wrap:wrap}
.sns-col{display:grid;gap:14px;align-content:start}
/* --- ops (business improvement) mocks --- */
.ops-tabs{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ops-tabs button{background:rgba(255,255,255,.08);border:1px solid rgba(200,215,240,.35);color:#dbe5f5;border-radius:999px;padding:8px 14px;font:500 12px 'Noto Sans JP',sans-serif;cursor:pointer;min-height:36px}
.ops-tabs button[aria-selected=true]{background:#fff;color:#0e2447;border-color:#fff}
.ops-tabs button:focus-visible{outline:3px solid #9cc4ff;outline-offset:2px}
.ops-panel{position:relative}
.ops-panel[hidden]{display:none}
.inbox{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;min-height:260px}
.inbox-list{border-right:1px solid #e5eaf0;padding:6px 0}
.inbox-list .m{padding:9px 12px;border-bottom:1px solid #f0f3f7;display:grid;gap:3px}
.inbox-list .m.is-on{background:#eef3fb}
.inbox-list .m b{font-size:11.5px}
.inbox-list .m span{font-size:10.5px;color:#59677a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-list .m .t{display:inline-block;font-size:9.5px;padding:2px 7px;border-radius:999px;background:#eef3fb;color:#2458a0;font-weight:700;justify-self:start}
.inbox-list .m .t.hi{background:#fde9c8;color:#8a5a10}
.inbox-list .m .t.ok{background:#dcf0e4;color:#1a6e42}
.inbox-draft{padding:12px 14px;display:grid;gap:8px;align-content:start}
.inbox-draft .lbl{font-size:10px;letter-spacing:.14em;color:#2458a0;font-weight:700}
.inbox-draft .q{background:#f4f7fb;border-radius:6px;padding:8px 10px;font-size:11px;line-height:1.7;color:#3d4a5c}
.inbox-draft .d{border-left:3px solid #2458a0;padding:8px 10px;font-size:11px;line-height:1.8;background:#fff;white-space:pre-line}
.inbox-draft .act{display:flex;gap:6px;flex-wrap:wrap}
.inbox-draft .act span{font-size:10px;padding:5px 9px;border-radius:2px;border:1px solid #c7d3ea;color:#2458a0}
.inbox-draft .act span.p{background:#2458a0;color:#fff;border-color:#2458a0}
.minutes{padding:14px 16px;display:grid;gap:10px;font-size:11.5px}
.minutes .mh{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11px;color:#59677a;border-bottom:1px solid #e5eaf0;padding-bottom:8px}
.minutes .mh b{color:#1d2836;font-size:12.5px}
.minutes h5{margin:0 0 4px;font-size:11px;letter-spacing:.12em;color:#2458a0}
.minutes ul{margin:0;padding-left:16px;line-height:1.75}
.minutes .todo{display:grid;gap:4px}
.minutes .todo div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:#f4f7fb;border-radius:4px;padding:5px 8px}
.minutes .todo i{width:11px;height:11px;border:1.5px solid #2458a0;border-radius:2px;display:inline-block}
.minutes .todo span{font-size:10.5px;color:#59677a;white-space:nowrap}
.sheet{padding:12px 14px;font-size:11px}
.sheet .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:6px}
.sheet .sh b{font-size:12.5px}
.sheet .sh span{font-size:10px;color:#59677a}
.sheet table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{padding:6px 8px;border-bottom:1px solid #e5eaf0;text-align:left;white-space:nowrap}
.sheet th{background:#f4f7fb;font-weight:600;color:#59677a;font-size:10.5px}
.sheet td.n,.sheet th.n{text-align:right}
.sheet td.up{color:#1a6e42}.sheet td.dn{color:#a33}
.sheet tr.sum td{font-weight:700;background:#fbfcfe}
.sheet .memo{margin-top:8px;border-left:3px solid #2458a0;background:#f4f7fb;padding:7px 10px;font-size:10.5px;line-height:1.7;color:#3d4a5c}
.faq{padding:12px 14px;display:grid;gap:8px;font-size:11px}
.faq .q,.faq .a{padding:8px 10px;border-radius:8px;line-height:1.7;max-width:92%}
.faq .q{background:#eef3fb;justify-self:end;border-bottom-right-radius:2px}
.faq .a{background:#f4f7fb;border:1px solid #e5eaf0;border-bottom-left-radius:2px;white-space:pre-line}
.faq .a small{display:block;color:#59677a;margin-top:4px;font-size:10px}
.faq .src{font-size:10px;color:#8091ab;display:flex;gap:8px;flex-wrap:wrap}
.faq .src span{border:1px solid #d8e1ec;padding:2px 7px;border-radius:2px}
/* worry -> case link */
.worry-grid .case-link{margin-top:auto;font-size:13px;color:#2458a0;font-weight:700;display:inline-flex;align-items:center;gap:6px;padding-top:8px}
.worry-grid .case-link:after{content:'→'}
@media(max-width:1000px){.stage-grid.lp{grid-template-columns:1fr}.lp-side{grid-template-columns:1fr 1fr}.lp-side .hint{align-self:start}}
@media(max-width:850px){.cases{padding:70px 6%}.case{padding:48px 0}.case-flow{grid-template-columns:1fr}.case-flow>li+li{border-left:0;border-top:1px solid var(--line)}.case-flow>li+li:before{left:30px;top:-9px;transform:rotate(-45deg)}.post{max-width:none}.stage{padding:20px}.stage-grid.two{grid-template-columns:1fr}.case-foot .ask{margin-left:0}}
@media(max-width:540px){.cases{padding:60px 6%}.cases .label{font-size:34px}.stage{padding:14px;border-radius:6px}.lp-side{grid-template-columns:1fr}.lp-hero{height:150px}.lp-menu,.lp-feat{grid-template-columns:1fr}.lp-cta{grid-template-columns:1fr}.lp-nav span{display:none}.inbox{grid-template-columns:1fr}.inbox-list{border-right:0;border-bottom:1px solid #e5eaf0}.sheet{overflow-x:auto}.frame.phone{width:min(100%,220px)}.case-flow>li{padding:18px 18px}}

/* 2026-09 visual refresh: editorial case studies with three distinct rhythms. */
.cases,.cases button,.cases input{font-family:'Noto Sans JP','Yu Gothic',sans-serif}
.cases{padding:112px 6%;background:#fbfaf7}.cases .wrap{max-width:1260px}.cases>.wrap>.label{font-size:13px;letter-spacing:.24em;font-weight:700;color:#5e7497}.cases>.wrap>h2{max-width:760px;font:500 clamp(32px,4.2vw,54px)/1.45 'Noto Serif JP',Georgia,serif;letter-spacing:.015em}.cases>.wrap>.section-lead{max-width:700px;margin-bottom:76px;color:#58677a;font-size:15px;line-height:2}
.case{padding:84px 0;border-top:1px solid #cfd6df;display:grid;grid-template-columns:minmax(270px,.72fr) minmax(520px,1.28fr);grid-template-areas:"head stage" "sub stage" "flow stage" "foot foot";column-gap:clamp(40px,6vw,86px);align-items:start}.case-head{grid-area:head;margin:0 0 10px;align-items:baseline}.case-head .num{font:700 11px Futura,'Avenir Next',sans-serif;letter-spacing:.18em;color:#5574a0}.case-head h3{font:500 clamp(25px,2.4vw,34px)/1.5 'Noto Serif JP',Georgia,serif;color:#17253a}.case-sub{grid-area:sub;margin:0 0 32px;font-size:14px;line-height:1.9}.case-flow{grid-area:flow;display:block;border:0;background:transparent;margin:0}.case-flow>li{padding:19px 0;border-top:1px solid #d8dee6}.case-flow>li:last-child{background:transparent;border-bottom:1px solid #d8dee6}.case-flow>li+li{border-left:0}.case-flow>li+li:before{display:none}.case-flow h4{margin-bottom:8px}.case-flow p,.case-flow ul{font-size:13px;line-height:1.85}.stage{grid-area:stage;border-radius:0;padding:34px;background:#0a1b31;box-shadow:0 30px 70px rgba(19,35,58,.18)}.stage:before{background:radial-gradient(65% 60% at 92% 0,rgba(121,157,224,.27),transparent 72%)}.stage-cap{border-bottom:1px solid rgba(210,225,247,.22);padding-bottom:14px;margin-bottom:24px}.stage-note{color:#b8c7de}.case-foot{grid-area:foot;border-top:1px solid #d8dee6;padding-top:25px;margin-top:42px}.case-foot .similar{max-width:850px}.case-foot .similar a{background:transparent;border-color:#cbd4e1}
/* Web: one large browser canvas, phone floats over its lower edge. */
#case-lp .stage-grid.lp{display:block;position:relative;padding:0 74px 70px 0}#case-lp .stage-grid.lp>.frame{min-height:510px}#case-lp .lp-hero{height:270px}#case-lp .lp-side{display:contents}#case-lp .frame.phone{position:absolute;right:0;bottom:0;width:185px;z-index:3;transform:rotate(2deg)}#case-lp .hint{position:absolute;left:20px;right:215px;bottom:0;border:0;border-left:1px solid rgba(210,225,247,.55);background:transparent;padding:2px 0 2px 16px}
/* Social: reverse the editorial columns and let the post dominate. */
#case-sns{grid-template-columns:minmax(520px,1.22fr) minmax(280px,.78fr);grid-template-areas:"stage head" "stage sub" "stage flow" "foot foot"}#case-sns .stage{background:#14263d}#case-sns .stage-grid.two{grid-template-columns:1.08fr .92fr;gap:26px;align-items:center}#case-sns .post{max-width:none;transform:rotate(-1deg)}#case-sns .post-img{aspect-ratio:4/4.25}#case-sns .ad{transform:rotate(1.2deg)}#case-sns .ad .ad-img{height:210px}
/* Operations: wide workstation strip, text above in three compact columns. */
#case-ops{grid-template-columns:.72fr 1.28fr;grid-template-areas:"head sub" "flow flow" "stage stage" "foot foot"}#case-ops .case-sub{padding-top:8px;max-width:650px}#case-ops .case-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8dee7;margin:20px 0 38px}#case-ops .case-flow>li{background:#fff;padding:24px;border:0}#case-ops .stage{padding:30px 36px 38px;background:linear-gradient(125deg,#07162a,#12375f)}#case-ops .ops-tabs{margin-bottom:22px}#case-ops .ops-tabs button{border-radius:2px;background:transparent;border-color:rgba(210,225,247,.34)}#case-ops .ops-tabs button[aria-selected=true]{background:#fff}
@media(max-width:1000px){.case,#case-sns,#case-ops{grid-template-columns:1fr;grid-template-areas:"head" "sub" "flow" "stage" "foot"}.case-flow,#case-ops .case-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8dee7;margin-bottom:34px}.case-flow>li,#case-ops .case-flow>li{background:#fff;padding:21px;border:0}.stage{margin-top:0}#case-lp .stage-grid.lp>.frame{min-height:0}}
@media(max-width:640px){.cases{padding:72px 6%}.cases>.wrap>.section-lead{margin-bottom:48px}.case{padding:58px 0}.case-flow,#case-ops .case-flow{grid-template-columns:1fr}.stage{padding:17px;box-shadow:none}.stage-cap{font-size:11px}#case-lp .stage-grid.lp{padding:0 0 270px}#case-lp .lp-hero{height:180px}#case-lp .frame.phone{left:50%;right:auto;bottom:44px;transform:translateX(-50%) rotate(1deg);width:190px}#case-lp .hint{left:0;right:0;bottom:0}#case-sns .stage-grid.two{grid-template-columns:1fr}.case-foot{margin-top:30px}.case-foot .similar{display:none}#case-ops .stage{padding:17px 13px 22px}#case-ops .ops-tabs{display:grid;grid-template-columns:1fr 1fr}#case-ops .ops-tabs button{white-space:normal;padding:8px;font-size:10.5px}.inbox{min-height:0}.inbox-list .m:nth-child(n+3){display:none}}

/* Keep each visual tied to its own production task. */
#case-lp .case-foot .similar,#case-sns .case-foot .similar{display:none}.cases h2,.cases h3,.cases h4{font-family:'Noto Sans JP','Yu Gothic',sans-serif}