/* =====================================================================================================
   OperaNix — Mobile 15 Pages v1 (Design). Applies only up to 767px; the PC v1.2 pages are unchanged above that.
   Source of every page: PC Final Branded Site v1.2 (approved). Only arrangement changes here: one column, mobile type scale,
   20px side gutter, header menu, natural vertical scrolling (no PC FV height / viewport-height rule on phones).
   Text, numbers, CTA purposes, FAQ, forms, NEWS and diagram meaning are the PC elements themselves.
   ===================================================================================================== */
@media (max-width:767px){
:root{--gutter:20px;--h1-size:27px;--h1-lh:1.6;--h2-size:22px;--h2-lh:1.6;--h3-size:17px;--lead-size:15px;--support-size:14px;--mb-hdr:60px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.mb-lock,html.mb-lock body{overflow:hidden}
body{font-size:15px;line-height:1.85}
.wrap{padding-inline:var(--gutter);max-width:none}
/* phrases keep together where they fit, and wrap inside when a phrase is wider than the line */
.nb{max-width:100%}

/* ---------- header: official logo + menu button ---------- */
header.site .header-row{height:var(--mb-hdr);gap:12px}
header.site .logo-box{min-width:0!important;display:flex;align-items:center;height:var(--mb-hdr)}
header.site .logo-box img{width:100px;height:auto}
header.site .cta-btn{display:none}
.mb-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mb-burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease}
header.site.mb-open .mb-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site.mb-open .mb-burger span:nth-child(2){opacity:0}
header.site.mb-open .mb-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mb-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* menu panel = the PC global navigation */
header.site.mb-open nav.gnav{display:block;position:fixed;left:0;right:0;top:var(--mb-hdr);bottom:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--night);padding:8px var(--gutter) 120px;border-top:1px solid var(--header-rule);white-space:normal}
header.site.mb-open nav.gnav details{position:static;border-bottom:1px solid var(--panel-border)}
header.site.mb-open nav.gnav summary,header.site.mb-open nav.gnav a.plain{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;
  font-size:16px;font-weight:700;color:var(--text);text-decoration:none;cursor:pointer}
header.site.mb-open nav.gnav a.plain{border-bottom:1px solid var(--panel-border)}
header.site.mb-open nav.gnav summary::after{content:"";width:9px;height:9px;margin-right:6px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform .2s}
header.site.mb-open nav.gnav details[open] > summary::after{transform:rotate(-135deg)}
header.site.mb-open nav.gnav .mega,header.site.mb-open nav.gnav .mega.wide,header.site.mb-open nav.gnav .mega.simple{position:static;transform:none;width:auto;display:block;
  margin:0 0 14px;padding:4px 0;border:0;border-radius:0;box-shadow:none;background:transparent}
header.site.mb-open nav.gnav .mega-col{display:block;padding:10px 0 6px;border:0}
header.site.mb-open nav.gnav .mega-col + .mega-col{border-top:1px dashed var(--panel-border)}
header.site.mb-open nav.gnav .mega :is(h5,:where(.ox-hs-h5)){margin:0 0 2px;font-size:13px;letter-spacing:.06em;color:var(--accent)}
header.site.mb-open nav.gnav .mega-concept{margin:0 0 6px;font-size:12.5px;line-height:1.7;color:var(--text-2)}
header.site.mb-open nav.gnav .mega a,header.site.mb-open nav.gnav .mega-item{display:flex;align-items:center;min-height:48px;padding:6px 8px;border-radius:8px;font-size:15px;line-height:1.6;color:var(--text);text-decoration:none}
header.site.mb-open nav.gnav .mega a:active{background:var(--cta2-hover)}
/* the header consultation button, shown at the bottom of the open menu */
header.site.mb-open .cta-btn{display:block;position:fixed;left:var(--gutter);right:var(--gutter);bottom:max(20px,env(safe-area-inset-bottom));z-index:61;padding:15px 20px}

/* ---------- sections ---------- */
.page-view section{padding-block:64px}
.page-view > .breadcrumb{padding-top:14px;font-size:12px}
.sec-title{margin-bottom:16px}
.page-view p:not(:where(.ox-hs-h1)).sec-lead,#page-top p:not(:where(.ox-hs-h1)).sec-lead,.sec-lead{font-size:15px;line-height:1.95}
.page-view .hs,.page-view .side-row{grid-template-columns:minmax(0,1fr);gap:16px}
.cta-btn{padding:14px 22px;font-size:14.5px;max-width:100%;white-space:normal}

/* FV: no PC height (913px / viewport height) on phones; content sets the height */
#s01#s01,.page-view section:is(#a-s01,#sit02-s01,#sit03-s01,#so-s01,#im-s01,#ri-s01,#sp-s01){min-height:0!important}
.page-view section:is(#a-s01,#sit02-s01,#sit03-s01,#so-s01,#im-s01,#ri-s01,#sp-s01){padding-top:96px!important;padding-bottom:56px!important}

/* final CTA */
.final-box{flex-direction:column;align-items:stretch;gap:24px}
.final-box .cta-btn{display:block}

/* FAQ */
.faq-q{padding:18px 4px;gap:12px}
.faq-a{padding:0 4px 22px 40px}

/* ---------- footer ---------- */
footer{padding-block:48px 32px}
.footer-grid{grid-template-columns:minmax(0,1fr);gap:28px}
.foot-sub-grid{grid-template-columns:minmax(0,1fr);gap:14px}
footer a{display:block;padding:7px 0}
footer .foot-legal-name a{display:inline-flex;padding:6px 0}
.footer-bottom{margin-top:32px}
}
@media (min-width:768px){.mb-burger{display:none}}

/* ---------- multi-column blocks -> one column (order of the PC markup is kept) ---------- */
@media (max-width:767px){
html body .page-view :is(.s01-grid,.card-grid-2x2,.change-grid,.dec-six,.group-grid,.im-bd,.im-cases,.im-exec,.method-steps,.trigger-row,
  ul.area-list,ol.area-list,.neutral-options,.ox-roi2,.sp-rp-pages,.gap-trio,.tobe-split,.boundary,.hs,.side-row,.pf-pair,.so-split,.so-p7,
  .im-hero,.so-hero,.ri-hero,.sp-hero,.so-sit-grid,.ri-vp,.ri-df,.comparison-list,.im-range,.so-cont-wrap,.sp-px,.sp-ex2,.nd-article,.cf-row,.so-am,.im-s02,.sp-sel,.dm-model){
  grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important}
html body .page-view :is(.flow-chain,.final-box,.so-s02-head,.news-head){flex-direction:column!important;align-items:stretch!important}
html body .page-view :is(ol.pc-steps,ol.chain5,ol.am-chain,ol.im-range-track){grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important}
html body .page-view :is(.s01-grid,.card-grid-2x2,.change-grid,.dec-six,.group-grid,.method-steps,.trigger-row,ul.area-list,ol.area-list,.neutral-options,.im-cases,.im-bd,.im-exec,.sp-rp-pages){gap:16px!important}
html body .page-view :is(.s02-card,.method-step,.group-col,.trigger-card,.change-tile,.dec-out,.no-name,.pc-name,.scope-node){max-width:100%}
}

/* ---------- shared patterns ---------- */
@media (max-width:767px){
/* "A -> B" rows: stack, arrow points down */
html body .page-view :is(.comp-row,.am-origin-row){grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html body .page-view :is(.comp-arrow,.am-o-arrow){justify-self:center;transform:rotate(90deg);line-height:1}
/* 5-step process (a / sit02 / sit03): vertical list with a line on the left */
html body .page-view .pc-steps{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding-left:0}
html body .page-view .pc-steps::before{top:22px;bottom:22px;left:22px;right:auto;border-top:0;border-left:1.5px dashed var(--orbit-strong)}
html body .page-view .pc-step{display:flex!important;align-items:center;gap:14px;text-align:left!important}
html body .page-view .pc-step .pc-num{flex:none;margin:0!important}
/* numbered item with a title and a description (a-s05) */
#a-s05#a-s05 .dm-item{grid-template-columns:40px minmax(0,1fr)!important;gap:4px 12px!important;padding:18px 18px!important}
#a-s05#a-s05 .dm-item p:not(:where(.ox-hs-h1)){grid-column:2}
}

/* ---------- wide tables kept at their PC structure: horizontal scroll inside the card ---------- */
@media (max-width:767px){
.ox-sum-two.ox-s3{grid-template-columns:minmax(0,1fr)!important}
.ox-sum-two.ox-s3 > div:not(:where(.ox-hs-h5,.ox-hs-h6)):has(> table.ox-mx){overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:6px}
.ox-sum-two.ox-s3 > div:not(:where(.ox-hs-h5,.ox-hs-h6)):has(> table.ox-mx)::before{content:"表は横にスクロールできます →";display:block;margin-bottom:8px;font-size:12px;letter-spacing:.04em;color:var(--text-2)}
table.ox-mx{min-width:560px}
}

/* ---------- imp ---------- */
@media (max-width:767px){
/* S02: the PC selector (list + panel) becomes an accordion: each panel opens under its own heading (same buttons, same script) */
#im-s02 .im-s02{display:block!important;margin-top:28px}
#im-s02 .im-acc{display:block}
#im-s02 .im-acc-h{min-height:56px;padding:12px 10px}
#im-s02 .im-acc-p{margin:10px 0 18px;padding:22px 18px 24px}
#im-s02 .im-acc-ph{font-size:18px;margin-bottom:10px;padding-bottom:10px}
#im-s02 .im-items{grid-template-columns:minmax(0,1fr)!important}
#im-s02 .im-acc.is-open .im-acc-h::after{transform:rotate(135deg)}
/* S03: six steps in one column; the loop of steps 04-06 stays a framed group and its labels are shown in place */
#im-s03 #im-s03 .im-step,#im-s03 .im-step{grid-template-columns:44px minmax(0,1fr)!important;gap:6px 14px!important;padding:20px 14px!important}
#im-s03 .im-step h3:not(:where(.ox-hs-h4)){font-size:17px}
#im-s03 .im-step p:not(:where(.ox-hs-h1)){grid-column:2!important;font-size:14px}
#im-s03 .im-step::before,#im-s03 .im-step::after,#im-s03 #im-s03 .im-step.in-loop::before,#im-s03 #im-s03 .im-step.in-loop::after{left:35px!important}
#im-s03 .im-rt{display:none}
#im-s03 .im-rt.im-cyc:has(.im-cyc-lab){display:block;position:static;width:auto;grid-column:2;margin-top:8px}
#im-s03 .im-rt.im-cyc:has(.im-cyc-lab)::before,#im-s03 .im-rt.im-cyc:has(.im-cyc-lab)::after{display:none}
#im-s03 .im-cyc-lab{position:static;transform:none;width:auto;display:inline-block}
#im-s03 .im-cyc-lab::before{display:none}
#im-s03 .im-adv{position:static;transform:none;grid-column:2;grid-row:1;justify-self:start;margin-bottom:2px}
#im-s03 .im-step:has(.im-adv) h3:not(:where(.ox-hs-h4)){grid-row:2}
#im-s03 .im-step:has(.im-adv) .im-step-n{grid-row:1/4}
#im-s03 .im-step:has(.im-adv) p:not(:where(.ox-hs-h1)){grid-row:3}
}

/* ---------- rei FV diagram: wider box so the diagram's own text grows; its two long lines may wrap ---------- */
@media (max-width:767px){
#ri-s01#ri-s01 .ri-hv{padding:14px 10px 16px!important;margin-inline:-8px}
#ri-s01 .ri-hv :is(.rv-main,.rv-note){white-space:normal!important;overflow-wrap:anywhere}
}

/* ---------- spc report thumbnails: visible cue that a tap opens the PC enlarge dialog ---------- */
@media (max-width:767px){
#sp-s04 .sp-rp-th{position:relative}
#sp-s04 .sp-rp-th::after{content:"タップで拡大";position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:var(--night);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.25)}
}

/* ---------- contact form: the card drawn behind the form fits the column on phones ---------- */
@media (max-width:767px){
#ct-s02#ct-s02 .cf{padding:28px 18px 32px!important;gap:24px!important}
#ct-s02#ct-s02 .cf::before{left:0;right:0;top:0;bottom:0}
#ct-s02 .cf-input{font-size:16px} /* 16px keeps iOS from zooming into a focused field */
}

/* header backdrop-filter makes the header the containing block of fixed children; drop it while the menu is open */
@media (max-width:767px){
header.site.mb-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--night)}
}
@media (max-width:767px){
header.site.mb-open{position:fixed;top:0;left:0;right:0;z-index:70}
html.mb-lock body{padding-top:var(--mb-hdr)} /* keeps the page from moving up while the header is fixed */
}

/* ---------- narrow-width fixes ---------- */
@media (max-width:767px){
#ct-s02 fieldset{min-width:0}
#ct-s02 :is(.cf-field,.cf-row,.cf-check,label){min-width:0;max-width:100%}
#ct-s02 .cf-check span{overflow-wrap:anywhere}
/* NEWS rows: date above the title */
.page-view li.news-row{flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
.page-view li.news-row .news-title{min-width:0;max-width:100%}
/* sit02 S03 comparison: keep the two columns (the header row names them), tighter on phones */
#sit02-s03 :is(.pf-headrow,.pf-rows li){grid-template-columns:minmax(0,.8fr) 16px minmax(0,1.2fr)!important;gap:0 8px!important}
#sit02-s03 :is(.pf-b,.pf-n){font-size:14px}
}
@media (max-width:374px){
#a-s04 ul.ox-areas{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#sit02-s03 :is(.pf-b,.pf-n){font-size:13.5px}
.wrap{padding-inline:16px}
}
@media (max-width:767px){
#ct-s02#ct-s02 .cf{grid-template-columns:minmax(0,1fr)!important}
}
/* TOP S03: steps stacked; the connectors point down between steps instead of right */
@media (max-width:767px){
#s03 .method-spine{display:none}
#s03 .method-steps{gap:40px!important}
#s03 .method-step:not(:last-child)::after{top:auto;bottom:-26px;right:auto;left:calc(50% - 5px);transform:rotate(135deg)}
}

/* ---------- headings and long phrases: break inside a phrase only when it is wider than the line ---------- */
@media (max-width:767px){
.page-view :is(:is(h1:not(:where(.ox-hs-h2)),:where(.ox-hs-h1)),:is(h2,:where(.ox-hs-h2)),h3:not(:where(.ox-hs-h4)),:is(h4,:where(.ox-hs-h4)),.am-result){overflow-wrap:anywhere}
/* tap areas: breadcrumb links, text-arrow links and the "other routes" toggle get a 44px-high touch area (look unchanged) */
html body .page-view .breadcrumb a{display:inline-block!important;padding-block:13px!important;margin-block:-13px!important}
html body .page-view a.link-line{display:inline-flex!important;align-items:center;min-height:44px!important}
html body .page-view button.no-routes-toggle{min-height:44px!important}
/* "必須 / 任意" tags in the contact form: 12px minimum on phones */
#ct-s02 .cf-tag{font-size:12px}
}
/* the 7 standard lower pages carry the Design Master reset (:is(#page-…) *:not(#cf-submit){…!important}); the same tap areas there */
@media (max-width:767px){
html body .page-view:is(#page-company,#page-contact,#page-thanks,#page-nf,#page-privacy,#page-newslist,#page-newsdetail) .breadcrumb a:not(#cf-submit){display:inline-block!important;padding-block:13px!important;margin-block:-13px!important}
html body .page-view:is(#page-company,#page-contact,#page-thanks,#page-nf,#page-privacy,#page-newslist,#page-newsdetail) a.link-line:not(#cf-submit){display:inline-flex!important;align-items:center!important;min-height:44px!important}
/* privacy article headings: ordinary line breaking when a heading is wider than the line (the phrase rule could not break it) */
html body .page-view .legal :is(:is(h2,:where(.ox-hs-h2)),h3:not(:where(.ox-hs-h4))){word-break:normal;line-break:normal}
}

/* =====================================================================================================
   Review Correction v1 (user review 11 items, 2026-10-16). Phones only (max-width:767px); PC v1.2 unchanged.
   ===================================================================================================== */
@media (max-width:767px){
/* M-FB-01 TOP S02: the four situation cards become a hand-swiped row (one card + the edge of the next; no autoplay).
   The cards keep their own heights (aligned at the top). Position "n / 4" and previous / next buttons come from mobile.js. */
html body #page-top #s02 .card-grid-2x2{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:calc(100% - 44px)!important;
  gap:12px!important;align-items:start!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
html body #page-top #s02 .card-grid-2x2::-webkit-scrollbar{display:none}
html body #page-top #s02 .card-grid-2x2 > .s02-card{scroll-snap-align:start;max-width:none;height:auto;min-height:0}
html body #page-top #s02 .card-grid-2x2:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#s02 .mb-car-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
#s02 .mb-car-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--panel-border);background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#s02 .mb-car-nav button:disabled{opacity:.35;cursor:default}
#s02 .mb-car-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#s02 .mb-car-pos{min-width:4.5em;text-align:center;font-size:14px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--text-2)}

/* M-FB-02 contract renewal S03: "expected -> now" rows read top to bottom: expectation, a down arrow, the explanation */
html body #sit02-s03 :is(.pf-headrow:not(.pf-headrow-blank),.pf-rows li){grid-template-columns:minmax(0,1fr)!important;gap:4px!important;justify-items:start}
html body #sit02-s03 .pf-headrow > span[aria-hidden]{display:none}
html body #sit02-s03 .pf-headrow:not(.pf-headrow-blank){display:flex!important;flex-direction:column;gap:0!important}
html body #sit02-s03 .pf-headrow:not(.pf-headrow-blank) > span:last-child{font-weight:700}
html body #sit02-s03 .pf-rows li{padding:16px 0!important}
html body #sit02-s03 .pf-rows .pf-arrow{display:block;justify-self:start;transform:rotate(90deg);width:1em;text-align:center;line-height:1;margin:2px 0 2px 2px}
html body #sit02-s03 :is(.pf-b,.pf-n){font-size:15px!important}

/* M-FB-03 contract renewal S04: room between the lead's last line and the dark block below it */
html body #sit02-s04 .sec-lead + .am-result{margin-top:36px!important}

/* M-FB-04 contract renewal S04 step 04: the note under the dotted line is centred like the text above it */
html body #sit02-s04 .c5-support > p:not(:where(.ox-hs-h1)).c5-sub{text-align:center}

/* M-FB-05 FV of TOP + 7 service pages: the same start line and the same CTA size on every page.
   h1 starts at the same height (TOP, which has no breadcrumb, gets the same top room as the 7 service pages);
   the main CTA is full width with the same padding, so its width and its one-line height are the same everywhere. */
/* Local Corrections v2 A-01: TOP-only exception to the common h1 start line — TOP keeps its own top room (61px, as in PC v1.2's
   narrow layout) so that its main CTA stays in the first screen at 360–430 x 844 (the common start line pushed it 9px below). */
html body #page-top #s01#s01{padding-top:61px!important}
html body :is(#s01,#a-s01,#sit02-s01,#sit03-s01,#so-s01,#im-s01,#ri-s01,#sp-s01) .cta-btn{display:block!important;width:100%!important;max-width:100%!important;
  padding:14px 18px!important;line-height:1.6!important;font-size:14.5px!important;text-align:center!important;box-sizing:border-box}

/* M-FB-06 second opinion S02: the two-way link between the stacked blocks points up and down (⇅), centred */
html body #so-s02 .so-am-flow .so-link{display:block;width:auto!important;align-self:center;justify-self:center;transform:rotate(90deg)!important;margin-inline:auto}

/* M-FB-07 improvement FV "改善できること": numbers in a fixed column, number and text aligned on their first line; rows top-aligned */
html body #im-s01 .im-hv-grid{align-items:start!important}
html body #im-s01 .im-hv-grid li{display:grid!important;grid-template-columns:2em minmax(0,1fr);align-items:start!important;column-gap:6px!important}
html body #im-s01 .im-hv-grid li .im-n{line-height:inherit}
html body #im-s01 .im-hv-grid li .nb{display:inline}

/* M-FB-08 improvement S04 examples: one compact sequence — want (heading) -> small down arrow -> the changes as a tight list -> result */
html body #im-s04 .im-case{padding:22px 18px 22px!important}
html body #im-s04 .im-flow{gap:0!important}
html body #im-s04 .im-fl-want{padding:12px 0 2px 14px!important;border:0!important;border-left:3px solid var(--accent)!important;border-radius:0!important;background:transparent!important}
html body #im-s04 .im-fl-want h3:not(:where(.ox-hs-h4)){font-size:17px!important;line-height:1.6!important;margin:4px 0 0!important}
html body #im-s04 .im-fl-dn{width:auto!important;height:auto!important;border:0!important;background:transparent!important;font-size:16px!important;line-height:1!important;padding:8px 0 8px 14px!important;margin:0!important;text-align:left!important;justify-self:start;align-self:flex-start;color:var(--link)}
html body #im-s04 .im-fl-chg{padding:12px 14px 6px!important;border-radius:12px!important}
html body #im-s04 .im-chg{gap:0!important;margin-top:6px!important}
html body #im-s04 .im-chg li{padding:9px 0 9px 16px!important;border-radius:0!important;background:transparent!important;border-bottom:1px solid var(--panel-border)!important;font-size:14.5px!important;line-height:1.6!important;position:relative}
html body #im-s04 .im-chg li:last-child{border-bottom:0!important}
html body #im-s04 .im-chg li::before{content:"";position:absolute;left:2px;top:calc(9px + .8em - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--link)}
html body #im-s04 .im-fl-res{padding:14px 16px!important}

/* M-FB-09 / M-FB-10 privacy and news article: the white card is drawn by ::before; on phones it is inset 8px from the
   column while the text used the full column, so the text ran past the card edge. The card now spans the column and
   the text gets inner space inside it (same selectors as the Design Master reset, so the padding is not reverted). */
html body .page-view:is(#page-privacy) .legal:not(#cf-submit),html body .page-view:is(#page-newsdetail) .nd-article:not(#cf-submit){padding-left:22px!important;padding-right:22px!important;box-sizing:border-box!important;min-width:0!important}
html body .page-view:is(#page-privacy) .legal::before,html body .page-view:is(#page-newsdetail) .nd-article::before{left:0!important;right:0!important}

/* M-FB-11 news list: compact rows — date above the title, 14px above and below, no extra height */
html body .page-view#page-newslist#page-newslist li.news-row:not(#cf-submit){display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:14px 4px!important;gap:2px!important;min-height:0!important}
html body .page-view#page-newslist#page-newslist li.news-row .news-title:not(#cf-submit){line-height:1.7!important;margin:0!important;flex:0 0 auto!important;width:auto!important;max-width:100%!important}
html body .page-view#page-newslist#page-newslist li.news-row .news-date:not(#cf-submit){line-height:1.6!important;margin:0!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important}
}
/* M-FB-06 audit (all diagrams): arrows between blocks that are stacked on phones point down. Direction only — glyph, colour,
   weight and size are the PC's. sit03 S03 (To-Be -> As-Is), S04 (flow), S05 (gap); spc S03: the PC narrow rule shows "↓" by
   ::before but a later PC rule made the "→" text visible as well ("↓→"), so the text is hidden again and only "↓" shows. */
@media (max-width:767px){
html body #sit03-s03 .tb-arrow,html body #sit03-s04 .flow-arrow,html body #sit03-s05 .gt-arrow{transform:rotate(90deg)}
html body #sp-s03 .sp-marr{font-size:0!important;justify-content:flex-start!important;width:auto!important;height:auto!important;border:0!important;background:transparent!important;padding:2px 0 2px 6px!important}
html body #sp-s03 .sp-marr::before{font-size:22px;line-height:1}
}
/* Regression found by the new number gate (same component type as M-FB-07): second opinion S04 numbers 01–04 sit on the
   first line of their heading when the heading wraps (360px: 02 was on the second line). */
@media (max-width:767px){
html body #so-s04 .so-row{align-items:start!important}
html body #so-s04 .so-row .so-num{line-height:32px}
html body #so-s04 .so-row h3:not(:where(.ox-hs-h4)){line-height:32px}
}
/* M-FB-05 (cont.): same start line also when the breadcrumb fits on one line (430px), same lead -> CTA gap (40px) and the same
   side room on TOP as on the service pages (TOP's FV column was 4px narrower each side at 360px). */
@media (max-width:767px){
html body .page-view:is(#page-a,#page-sit02,#page-sit03,#page-so,#page-imp,#page-rei,#page-spc) > .breadcrumb{min-height:55px;box-sizing:border-box}
html body #page-top #s01 .s01-support{margin-bottom:40px!important}
html body #page-top #s01 > .wrap{margin-inline:0!important;width:auto!important}
}
/* Local Corrections v2 A-02 (P-06 candidate): improvement S03 — a return path on the right of steps 04–06, from step 06 back to
   step 04 (arrowhead into 04), so the repeated cycle reads as a loop and not as a one-way sequence. Drawn by mobile.js. */
@media (max-width:767px){
html body #im-s03 .im-steps{position:relative}
html body #im-s03 .im-step.in-loop{padding-right:40px!important}
html body #im-s03 .mb-loop-ret{position:absolute;right:10px;width:18px;border:2px solid var(--link);border-left:0;border-radius:0 10px 10px 0;pointer-events:none}
html body #im-s03 .mb-loop-ret::before{content:"";position:absolute;left:-8px;top:-7px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid var(--link)}
}
@media (min-width:768px){#im-s03 .mb-loop-ret{display:none}}

/* =====================================================================================================
   Phase 1 v1 (Phased Production v2, 2026-10-17). Phones only (max-width:767px); PC v1.2 unchanged.
   B1 a-s04 / B3 sit03-s07 / B5 sp-s04 adopted from "Mobile Long Page Optimization Options v1" (B2, B4 not taken).
   M-FB-12 document viewer, M-FB-13 header landings, M-FB-14 TOP S02 cards of one size.
   ===================================================================================================== */
@media (max-width:767px){
/* B1 / B3: the sample diagnosis shows its label and headline; the rest opens with a button (all text stays in the page) */
.mb-hide{display:none!important}
.mb-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:6px 0 4px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--panel-border);background:transparent;color:var(--text);font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.mb-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.mb-more[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,0)}
.mb-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* B5: the three report pages as a compact list — small page image (tap to enlarge) beside its title */
#sp-s04 ol.sp-rp-pages{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
#sp-s04 li.sp-rp-it{display:grid!important;grid-template-columns:112px minmax(0,1fr);gap:4px 14px;align-items:center}
#sp-s04 li.sp-rp-it > .sp-rp-th{grid-row:1/3;width:112px}
#sp-s04 .sp-rp-th::after{right:4px!important;bottom:4px!important;padding:3px 7px!important;font-size:12px!important}

/* M-FB-14 TOP S02: every card in the row has the width and the height of the tallest card at this screen width;
   same padding, heading start and glyph position (the glyph is a background drawn from the card's top-left corner) */
html body #page-top #s02 .card-grid-2x2{align-items:stretch!important;grid-template-rows:none!important;grid-auto-rows:auto!important}
html body #page-top #s02 .card-grid-2x2 > .s02-card{display:flex!important;flex-direction:column;grid-row:auto!important;height:auto!important;margin:0!important;box-sizing:border-box}

/* M-FB-13: a section reached by a link starts right below the following header (site.js lands at the element's scroll-margin-top) */
.page-view section[id]{scroll-margin-top:calc(var(--mb-hdr) + 1px)} /* header 60px + its 1px bottom rule */

/* M-FB-12: document viewers (a / sit02 / sit03 .ox-dlg, spc #sp-rp-dlg). The page image opens fitted to the screen (whole page
   visible, aspect ratio kept); zoom with pinch, double-tap or the − / + buttons, 全体 returns to the fitted view. The image
   sits in a box of its scaled size, so scrolling reaches all four edges; the title bar with 閉じる stays above the image. */
.ox-dlg{padding:8px}
.ox-dlg-body,.sp-rp-dlg .dlg-body{touch-action:pan-x pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sp-rp-dlg{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px)}
.sp-rp-dlg .dlg-bar{padding:10px 12px;gap:8px 10px}
.sp-rp-dlg .dlg-body{display:block;flex:1 1 auto;min-height:0;padding:12px}
.ox-dlg-body{padding:12px}
.mb-zv-sz{position:relative;margin:0 auto;width:var(--zv-w);height:var(--zv-h);overflow:hidden}
.mb-zv-sz > .mb-zv-doc{position:absolute!important;left:0;top:0;margin:0!important;transform-origin:0 0;transform:scale(var(--zv-s))}
.mb-zv-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;border-top:1px solid rgba(127,160,170,.35)}
.ox-dlg .mb-zv-bar{background:#FFFFFF;color:#062530}
.sp-rp-dlg .mb-zv-bar{background:#062530;color:#E8F4F6}
.mb-zv-bar button{min-width:48px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer}
.mb-zv-bar button:disabled{opacity:.35;cursor:default}
.mb-zv-bar button:focus-visible{outline:2px solid #0A6B60;outline-offset:2px}
.sp-rp-dlg .mb-zv-bar button:focus-visible{outline-color:#6FE3D3}
.mb-zv-pct{min-width:4.2em;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
}
@media (max-width:767px){ html.mb-dlg-lock,html.mb-dlg-lock body{overflow:hidden} }

/* Phase 4 — carousels K1 a-s06 / K2 sit02-s02 / K4 sit03-s02 / K6 so-s03 / K8 ri-s02 (Phase 3 options) and X2 a-s03 / X3 a-s05 /
   X5 so-s04 / X7 so-s07 (Additional Seven options), S04-C1 sit02-s04, and the sit03-s07 lead-to-panel spacing. Phones only.
   Each list becomes one hand-swiped row with the TOP S02 controls (previous / next, "n / N", the edge of the next card, keys,
   no autoplay). Every card keeps its full text and order; in one row all cards share one width and the tallest card's height.
   K2 / K8 also show one dot per card under the controls (decorative, aria-hidden) so the number of cards and the ones still to
   come are visible at a glance. Not taken: B2, B4, S04-C2, X4A, X6, X8A, K3, K5, K7. */
@media (max-width:767px){
/* Only the side margins change (the row reaches the screen or container edge); each list keeps its own top margin from the
   page, so the space between the lead / figure above and the cards stays as in Phase 1 (+4px row padding for the card shadow). */
/* K1 / K2 / K4 / K6 / K8 (row bleeds to the page edge through the page gutter) */
html body #a-s06#a-s06 .mb-sw,html body #sit02-s02#sit02-s02 .mb-sw,html body #sit03-s02#sit03-s02 .mb-sw,html body #so-s03#so-s03 .mb-sw,html body #ri-s02#ri-s02 .mb-sw{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-auto-columns:calc(100% - 44px)!important;grid-auto-rows:auto!important;
  gap:12px!important;align-items:stretch!important;justify-items:stretch!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-left:calc(-1 * var(--gutter))!important;margin-right:calc(-1 * var(--gutter))!important;padding:4px var(--gutter) 14px!important;scroll-padding-inline:var(--gutter);scrollbar-width:none;list-style:none}
html body #a-s06#a-s06 .mb-sw::-webkit-scrollbar,html body #sit02-s02#sit02-s02 .mb-sw::-webkit-scrollbar,html body #sit03-s02#sit03-s02 .mb-sw::-webkit-scrollbar,html body #so-s03#so-s03 .mb-sw::-webkit-scrollbar,html body #ri-s02#ri-s02 .mb-sw::-webkit-scrollbar{display:none}
html body #a-s06#a-s06 .mb-sw > .mb-sw-card,html body #sit02-s02#sit02-s02 .mb-sw > .mb-sw-card,html body #sit03-s02#sit03-s02 .mb-sw > .mb-sw-card,html body #so-s03#so-s03 .mb-sw > .mb-sw-card,html body #ri-s02#ri-s02 .mb-sw > .mb-sw-card{scroll-snap-align:start;margin:0!important;height:auto!important;min-height:0!important;max-width:none!important;width:auto!important;box-sizing:border-box;align-self:stretch!important}
html body #a-s06#a-s06 .mb-sw:focus-visible,html body #sit02-s02#sit02-s02 .mb-sw:focus-visible,html body #sit03-s02#sit03-s02 .mb-sw:focus-visible,html body #so-s03#so-s03 .mb-sw:focus-visible,html body #ri-s02#ri-s02 .mb-sw:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the list itself becomes the scrolling row: no frame of its own (K8's list had an outer border) */
html body #ri-s02#ri-s02 .mb-sw{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}
/* K8: the five situations had no card frame (rows divided by rules); in the row each becomes a card like the other candidates */
html body #ri-s02#ri-s02 .mb-sw > .mb-sw-card{background:#FFFFFF!important;border:1px solid rgba(6,37,48,.12)!important;border-radius:18px!important;box-shadow:0 18px 40px rgba(20,14,40,.06)!important;padding:22px 18px 24px!important;align-content:start}
/* X2 / X3 / X5 / X7 (row bleeds to the inner edges of its container, measured by mobile.js) */
html body #a-s03#a-s03 .mb-sw,html body #a-s05#a-s05 .mb-sw,html body #so-s04#so-s04 .mb-sw,html body #so-s07#so-s07 .mb-sw{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-auto-columns:calc(100% - 44px)!important;grid-auto-rows:auto!important;
  gap:12px!important;align-items:stretch!important;justify-items:stretch!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin-left:calc(-1 * var(--mb-sw-bl,0px))!important;margin-right:calc(-1 * var(--mb-sw-br,0px))!important;padding:4px var(--mb-sw-br,0px) 14px var(--mb-sw-bl,0px)!important;scroll-padding-left:var(--mb-sw-bl,0px);scrollbar-width:none;list-style:none;
  border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}
html body #a-s03#a-s03 .mb-sw::-webkit-scrollbar,html body #a-s05#a-s05 .mb-sw::-webkit-scrollbar,html body #so-s04#so-s04 .mb-sw::-webkit-scrollbar,html body #so-s07#so-s07 .mb-sw::-webkit-scrollbar{display:none}
html body #a-s03#a-s03 .mb-sw > .mb-sw-card,html body #a-s05#a-s05 .mb-sw > .mb-sw-card,html body #so-s04#so-s04 .mb-sw > .mb-sw-card,html body #so-s07#so-s07 .mb-sw > .mb-sw-card{scroll-snap-align:start;margin:0!important;height:auto!important;min-height:0!important;max-width:none!important;width:auto!important;box-sizing:border-box;align-self:stretch!important;align-content:start!important} /* grid items keep their rows at the top when a card is stretched to the tallest card */
html body #a-s03#a-s03 .mb-sw:focus-visible,html body #a-s05#a-s05 .mb-sw:focus-visible,html body #so-s04#so-s04 .mb-sw:focus-visible,html body #so-s07#so-s07 .mb-sw:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* X2 / X5 / X7: a card frame for items that had none — the same frame as the existing cards (diff declared in the ledger) */
html body #a-s03#a-s03 .mb-sw > .mb-sw-card,html body #so-s04#so-s04 .mb-sw > .mb-sw-card,html body #so-s07#so-s07 .mb-sw > .mb-sw-card{background:#FFFFFF!important;border:1px solid rgba(6,37,48,.12)!important;border-radius:18px!important;box-shadow:0 18px 40px rgba(20,14,40,.06)!important}
html body #a-s03#a-s03 .mb-sw > .mb-sw-card{padding:22px 18px!important}
html body #so-s04#so-s04 .mb-sw > .mb-sw-card{padding:24px 18px!important}
html body #so-s07#so-s07 .mb-sw > .mb-sw-card{padding:24px 18px!important;border-top:2px solid #14917F!important} /* keeps the item's own accent rule on top */
/* controls: the TOP S02 look */
.mb-sw-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.mb-sw-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--panel-border);background:transparent;color:var(--text);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mb-sw-nav button:disabled{opacity:.35;cursor:default}
.mb-sw-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mb-sw-nav .mb-car-pos{min-width:4.5em;text-align:center;font-size:14px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--text-2)}
/* K2 / K8: one dot per card, the current card's dot filled */
.mb-sw-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.mb-sw-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--panel-border);transition:background-color .2s}
.mb-sw-dots i.on{background:var(--accent)}
/* S04-C1 sit02-s04: steps 01-05 top to bottom, number on the left joined by a line; spacing and density only */
html body #sit02-s04#sit02-s04 .am-result.flow5{padding:24px 16px 26px!important}
html body #sit02-s04#sit02-s04 ol.chain5{margin-top:18px!important;row-gap:0!important}
html body #sit02-s04#sit02-s04 ol.chain5::before{display:none!important} /* the horizontal dashed rule of the centred layout; replaced by the vertical line joining the numbers */
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;column-gap:14px!important;row-gap:6px!important;align-items:start!important;justify-items:stretch!important;text-align:left!important;padding:0 0 20px!important;position:relative}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell > .c5-num{grid-column:1!important;grid-row:1 / span 3!important;width:40px!important;height:40px!important;margin:0!important;position:relative;z-index:1;align-self:start}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell > :not(.c5-num){grid-column:2!important;min-width:0}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell > .c5-name{margin:7px 0 0!important;text-align:left!important}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell > .c5-main{text-align:left!important}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell > .c5-support{margin-top:2px!important;padding-top:8px!important}
html body #sit02-s04#sit02-s04 ol.chain5 .c5-sub{text-align:left!important}
html body #sit02-s04#sit02-s04 ol.chain5 > li.c5-cell:not(:last-child)::after{content:"";position:absolute;left:19px;top:48px;bottom:6px;width:2px;border-radius:2px;background:rgba(159,215,225,.35)}
html body #sit02-s04#sit02-s04 .dg-block{margin-top:24px!important;padding-top:20px!important}
html body #sit02-s04#sit02-s04 .dg-head{margin-bottom:10px!important}
html body #sit02-s04#sit02-s04 .ox-mod{margin-top:14px!important;row-gap:18px!important}
html body #sit02-s04#sit02-s04 .ox-sum{row-gap:12px!important}
html body #sit02-s04#sit02-s04 .ox-acts td{padding:8px 0!important}
html body #sit02-s04#sit02-s04 .ox-roi{padding:16px 18px 18px!important}
html body #sit02-s04#sit02-s04 .ox-prev{padding:18px 14px!important}
html body #sit02-s04#sit02-s04 .roi-strip{margin-top:24px!important;padding-top:20px!important}
/* sit03-s07: the lead's last line sat 4px above the dark result panel; the same 36px as the identical lead + panel in sit02-s04 (M-FB-03) */
html body #sit03-s07#sit03-s07 .sec-lead + .am-result{margin-top:36px!important}
}

/* CR-MH-01 — header consultation button on phones: official logo (left), short CTA 「相談する」 and the menu button on one row,
   in every state (top / mid / bottom of the page, menu open or closed). The CTA is the same element as the PC header CTA
   (header.site a.cta-btn, same link and landing at the inquiry form #ct-s02 through site.js); its visible label is the end of its
   own text, 「相談する」 — the first part 「自社の状況について」 stays in the DOM and in the accessible name, visually hidden on phones
   only. Mint fill / ink / pill / weight are the .cta-btn brand style. Header height (60px) unchanged. While the menu is open the
   button stays in the header row instead of being shown again at the bottom of the menu panel (no second consultation button). */
@media (max-width:767px){
header.site .logo-box{margin-right:auto}
header.site .header-row > .mb-burger{flex:none}
header.site .cta-btn,header.site.mb-open .cta-btn{flex:none;display:inline-flex!important;align-items:center;justify-content:center;position:relative;
  left:auto;right:auto;bottom:auto;z-index:auto;height:36px;padding:0 16px;font-size:14px;line-height:1;letter-spacing:.04em;white-space:nowrap}
/* tap area 44px tall (36px button + 4px above and below, inside the 60px header); nothing added sideways, so it never reaches the menu button */
header.site .cta-btn::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
header.site .cta-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
header.site .cta-btn .mb-hcta-pre{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:normal;border:0} /* wraps inside its 1px box, so the hidden text never runs past the screen edge */
}