:root{
  --blue:#1b4dea;
  --deep:#1236ad;
  --lime:#cdf94a;
  --ink:#101418;
  --ink-2:#3d454e;
  --muted:#5f6873;
  --line:#e2ddd0;
  --pale:#f5f3ec;
  --white:#fff;
  --body:1rem;
  --small:.875rem;
  --h1:clamp(2.4rem,5.6vw,4rem);
  --h2:clamp(2rem,4.6vw,3.2rem);
  --space:clamp(60px,7.5vw,110px);
  --gap:32px;
  --radius:4px;
  --width:1180px;
  --font:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body{
  margin:0;
  background:var(--pale);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--body);
  line-height:1.9;
  overflow-wrap:anywhere
}
a{
  color:inherit;
  text-decoration:none
}
button,input,textarea{
  font:inherit
}
a,button,input,textarea,summary{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #f3b54d;
  outline-offset:5px
}
button{
  cursor:pointer
}
p{
  margin:0 0 1.2em
}
h1,h2,h3,h4{
  line-height:1.55;
  margin:0 0 .7em;
  letter-spacing:.015em
}
h1{
  font-size:var(--h1);
  font-weight:750
}
h2{
  font-size:var(--h2)
}
h3{
  font-size:1.25rem
}
h4{
  font-size:1rem
}
small,.note{
  font-size:var(--small);
  color:var(--muted);
  line-height:1.8
}
.wrap{
  width:min(var(--width),calc(100% - 64px));
  margin-inline:auto
}
.section{
  padding-block:var(--space)
}
.subtle{
  background:var(--pale)
}
.eyebrow{
  color:var(--blue);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.06em;
  margin-bottom:20px
}
.section-heading{
  margin-bottom:42px
}
.center{
  text-align:center
}
.blue{
  color:var(--blue)
}
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:106px;
  gap:24px
}
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0
}
.brand-wordmark{
  font-size:1.65rem;
  font-weight:800;
  letter-spacing:.015em;
  color:var(--deep);
  line-height:1.4
}
.brand small{
  font-size:.75rem;
  color:var(--muted)
}
nav{
  display:flex;
  gap:24px;
  align-items:center
}
nav>a{
  font-size:.9rem;
  font-weight:600
}
nav>a:hover,.text-link:hover{
  color:var(--blue)
}
.button{
  display:inline-flex;
  gap:22px;
  justify-content:space-between;
  align-items:center;
  padding:17px 23px;
  background:var(--blue);
  color:white;
  border:1px solid var(--blue);
  border-radius:4px;
  font-weight:700;
  font-size:1rem;
  line-height:1.7;
  text-align:left;
  transition:background .15s
}
.button:hover{
  background:var(--deep);
  color:white
}
.button.small{
  padding:12px 17px;
  font-size:.875rem
}
.button.outline{
  background:#fff;
  color:var(--blue);
  border-color:#bacdeb
}
.button.outline:hover{
  background:var(--pale)
}
.button.light{
  background:#fff;
  border-color:#fff;
  color:var(--blue)
}
.menu-toggle{
  display:none
}
.skip{
  position:absolute;
  left:10px;
  top:-100px;
  background:white;
  padding:12px;
  z-index:5
}
.skip:focus{
  top:10px
}
.hero{
  padding-top:65px;
  background:linear-gradient(115deg,#fff 54%,#f3f7fe)
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:center
}
.hero h1{
  font-size:clamp(1.8rem,2.65vw,2.35rem);
  line-height:1.7;
  letter-spacing:0
}
.hero h1 em{
  font-size:5.2rem;
  color:var(--blue);
  line-height:1.2;
  font-style:normal;
  font-weight:800;
  letter-spacing:-.05em;
  margin-right:10px
}
.hero h1 em span{
  font-size:3.3rem;
  letter-spacing:0
}
.hero-copy{
  margin-top:23px;
  font-size:1.0625rem;
  color:#485f7e
}
.hero .button+.note,.b-hero .button+.note{
  margin-top:12px
}
.hero-foot{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:22px 0;
  margin-top:52px;
  font-size:.875rem;
  color:var(--muted)
}
.results-panel{
  background:white;
  border:1px solid #cbd9ed;
  border-radius:var(--radius);
  padding:27px 30px;
  box-shadow:0 14px 40px #1b4f9b0b
}
.results-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  font-size:.8125rem;
  font-weight:700
}
.pill{
  background:var(--pale);
  color:var(--blue);
  padding:3px 10px;
  white-space:nowrap
}
.metric-label{
  font-size:.9rem;
  margin:24px 0 6px
}
.main-metric{
  display:flex;
  align-items:baseline;
  gap:12px;
  white-space:nowrap;
  line-height:1.4
}
.main-metric>.before{
  font-size:2.8rem;
  color:#8796ab;
  letter-spacing:-.04em
}
.main-metric>strong{
  font-size:4rem;
  color:var(--blue);
  letter-spacing:-.04em
}
.metric-arrow{
  font-size:1.6rem;
  color:var(--muted)
}
.increase{
  margin-left:auto;
  color:var(--blue);
  font-size:1.35rem;
  font-weight:800;
  background:#eef4ff;
  border-radius:4px;
  padding:3px 9px
}
.increase small{
  color:inherit
}
.mini-metrics{
  margin:20px 0 20px;
  border-top:1px solid var(--line)
}
.mini-metrics>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  gap:12px
}
.mini-metrics p{
  font-size:.8125rem;
  margin:0
}
.mini-metrics strong{
  font-size:1.3rem;
  white-space:nowrap;
  color:var(--deep)
}
.mini-metrics strong span{
  font-size:1rem;
  color:var(--muted);
  margin:0 5px
}
.mini-metrics strong small{
  margin-left:3px
}
.results-panel>.note{
  font-size:.75rem;
  margin:0
}
.problem-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:65px
}
.problem-grid>div>p:not(.eyebrow){
  color:var(--muted)
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:19px 0;
  border-bottom:1px solid #d5dfed
}
.check-row:first-child{
  padding-top:0
}
.check-row p{
  margin:0
}
.check{
  color:var(--blue);
  background:#e1ebfb;
  border-radius:3px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-weight:700;
  line-height:1;
  margin-top:4px
}
.diagnosis-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  margin-bottom:32px
}
.diagnosis-grid article{
  border-top:2px solid #b8cdec;
  padding-top:19px
}
.number{
  font-size:1rem;
  letter-spacing:.03em;
  color:var(--blue);
  font-weight:700
}
.diagnosis-grid h3{
  margin-top:22px;
  font-size:1.125rem
}
.diagnosis-grid p{
  font-size:1rem;
  color:var(--muted)
}
.report-section{
  background:#eaf1fa
}
.report-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  align-items:center
}
.report-grid h2{
  font-size:clamp(1.6rem,2.4vw,2.15rem)
}
.report-grid>div>p{
  color:var(--muted)
}
.report-grid>div>.eyebrow{
  color:var(--blue)
}
.report-caption{
  display:flex;
  gap:16px;
  border-top:1px solid #cddcef;
  padding-top:18px
}
.report-caption>span{
  font-size:.9rem;
  color:var(--blue);
  font-weight:700
}
.report-caption p{
  font-size:.9375rem
}
.report-paper{
  background:#fff;
  padding:32px 30px;
  box-shadow:0 12px 32px #13356512;
  border-top:5px solid var(--blue)
}
.paper-top{
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:24px
}
.report-paper h3{
  font-size:1.2rem;
  margin-bottom:7px
}
.report-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#eff4fb;
  padding:15px 18px;
  margin:20px 0;
  font-size:.875rem
}
.report-summary strong{
  font-size:2rem;
  color:var(--blue);
  line-height:1.2
}
.report-summary small{
  margin-left:6px
}
.priority-list{
  list-style:none;
  padding:0;
  margin:0 0 22px
}
.priority-list li{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
  font-size:.8125rem
}
.priority-list small{
  display:block;
  font-size:.75rem
}
.status{
  font-size:.7rem;
  padding:2px 7px;
  background:#eef1f7;
  color:#47638b;
  white-space:nowrap;
  border-radius:2px;
  display:inline-block
}
.status.urgent{
  color:#9a4d24;
  background:#fcf0e5
}
.status.good{
  background:#eaf5f1;
  color:#28715c
}
.table-scroll{
  max-width:100%;
  overflow-x:auto
}
table{
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:.875rem
}
th{
  background:#eef3fa;
  font-weight:600
}
td,th{
  padding:13px 12px;
  border-bottom:1px solid var(--line)
}
.report-paper table{
  font-size:.75rem;
  min-width:360px
}
.report-paper td,.report-paper th{
  padding:10px 8px
}
.paper-bottom{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.65rem;
  color:#8794a6;
  margin-top:25px
}
.monitor{
  border:1px solid #b7ccee;
  border-radius:var(--radius);
  padding:48px;
  background:linear-gradient(120deg,#f8fbff,#fff)
}
.monitor-head{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.capacity{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--blue);
  font-size:1rem;
  border:1px solid #afc8ee;
  padding:14px 20px;
  border-radius:4px
}
.capacity strong{
  font-size:2.5rem;
  line-height:1.2
}
.monitor-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:45px;
  margin-top:22px
}
.monitor-grid p{
  color:var(--muted)
}
.clean-list{
  list-style:none;
  margin:0;
  padding:0
}
.clean-list li{
  display:flex;
  gap:10px;
  margin-bottom:10px;
  font-size:1rem
}
.clean-list li>span{
  color:var(--blue);
  flex-shrink:0
}
.promise{
  border-block:1px solid #c7d8f0;
  padding:24px 0;
  margin:24px 0;
  font-size:1.23rem;
  font-weight:700;
  line-height:1.9;
  color:var(--deep)
}
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.case{
  background:#fff;
  border:1px solid var(--line);
  padding:29px 25px;
  display:flex;
  flex-direction:column
}
.case-client{
  margin:18px 0;
  font-size:.875rem;
  color:var(--muted)
}
.case h3{
  font-size:1.125rem
}
.case>p:not(.case-client){
  font-size:.9375rem;
  color:var(--muted)
}
.case-result{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:auto;
  color:var(--blue);
  font-size:1.25rem
}
.case-grid+.note{
  margin:18px 0 0
}
.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding-top:22px
}
.plan{
  position:relative;
  border:1px solid var(--line);
  border-radius:6px;
  padding:31px 24px 20px;
  display:flex;
  flex-direction:column
}
.plan.featured{
  border:2px solid var(--blue);
  background:#f7faff
}
.popular{
  position:absolute;
  top:-25px;
  left:-2px;
  right:-2px;
  background:var(--blue);
  text-align:center;
  color:white;
  font-size:.8125rem;
  border-radius:6px 6px 0 0;
  padding:3px
}
.plan-title{
  font-weight:700;
  font-size:1.2rem
}
.plan-title>span{
  color:var(--blue);
  margin-right:5px
}
.price{
  min-height:95px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  align-content:flex-end;
  gap:0 4px;
  margin:0
}
.price small{
  flex-basis:100%;
  font-size:.8125rem
}
.price strong{
  font-size:2.3rem;
  color:var(--deep);
  line-height:1.5;
  letter-spacing:-.03em
}
.price>span{
  font-size:1rem
}
.plan-desc{
  border-top:1px solid var(--line);
  padding-top:22px;
  min-height:99px;
  font-size:.9375rem
}
.plan .clean-list{
  margin-bottom:25px;
  flex:1
}
.plan .clean-list li{
  font-size:.9375rem
}
.plan .button{
  font-size:.875rem;
  padding-inline:15px
}
.plan-budget{
  font-size:.6875rem;
  white-space:nowrap;
  margin-top:12px;
  margin-bottom:0;
  text-align:center
}
.pricing-notes{
  margin-top:25px
}
.mobile-note{
  display:none
}
.faqs{
  max-width:900px
}
details{
  border-bottom:1px solid var(--line)
}
summary{
  display:flex;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  padding:23px 0;
  font-weight:600;
  list-style:none
}
summary::-webkit-details-marker{
  display:none
}
summary>span{
  color:var(--blue)
}
details[open] summary>span{
  transform:rotate(45deg)
}
details>p{
  color:var(--muted);
  padding-right:35px
}
.heading-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:35px
}
.text-link{
  color:var(--blue);
  font-size:.9375rem;
  font-weight:700
}
.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}
.article-card{
  border:1px solid var(--line);
  background:white
}
.article-card a{
  display:block;
  height:100%
}
.article-card:hover{
  border-color:#8baee2
}
.article-art{
  height:175px;
  background:#edf3fc;
  padding:22px 25px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  color:var(--blue)
}
.article-art>span:first-child{
  font-size:.75rem;
  letter-spacing:.04em
}
.article-art>strong{
  font-size:1.55rem;
  margin-top:17px
}
.article-art .art-number{
  position:absolute;
  right:18px;
  bottom:0;
  font-size:4.3rem;
  line-height:1;
  color:#d5e2f6;
  font-weight:700
}
.card-body{
  padding:24px
}
.category{
  display:inline-block;
  font-size:.75rem;
  color:var(--blue);
  background:#edf3fc;
  padding:3px 9px
}
.card-body h3{
  font-size:1.0625rem;
  margin:15px 0 24px;
  line-height:1.85
}
.card-body .text-link{
  font-size:.8125rem
}
.closing{
  padding:72px 0;
  text-align:center;
  background:#144fae;
  color:#fff
}
.closing h2{
  font-size:var(--h2);
  margin-bottom:20px
}
.closing .eyebrow,.closing .note{
  color:#d7e7ff
}
.closing p{
  font-size:1rem
}
.closing .button{
  margin:8px 0 15px
}
footer{
  padding:45px 0
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:30px
}
.footer-inner p{
  font-size:.8125rem;
  color:var(--muted);
  margin:15px 0 0
}
.footer-inner>div:last-child>a{
  font-size:.875rem;
  display:inline-block;
  margin-left:22px
}
.footer-inner>div:last-child{
  text-align:right
}
.b-hero{
  padding:70px 0;
  background:#f3f7fd
}
.b-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:65px;
  align-items:center
}
.b-hero h1{
  font-size:clamp(2rem,3.5vw,3.1rem);
  line-height:1.65
}
.b-hero p:not(.eyebrow){
  color:#566b86
}
.b-hero .problem-sheet{
  background:white;
  border:1px solid #d2dff1;
  padding:32px;
  border-top:4px solid var(--blue)
}
.problem-sheet .eyebrow{
  margin-bottom:22px
}
.problem-sheet .check-row{
  padding:19px 0
}
.problem-sheet .check-row p{
  font-size:1.05rem;
  color:var(--ink)
}
.sheet-bottom{
  font-size:.9375rem;
  background:#eff5fd;
  margin:23px 0 0;
  padding:20px
}
.b-results{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:65px;
  align-items:center
}
.page-intro{
  padding-top:35px;
  padding-bottom:55px;
  border-bottom:1px solid var(--line)
}
.page-intro h1{
  margin-top:25px
}
.page-intro>p:last-child{
  color:var(--muted);
  margin:0
}
.breadcrumb{
  font-size:.8125rem;
  color:var(--muted);
  margin-bottom:45px
}
.breadcrumb a:hover{
  text-decoration:underline
}
.page-intro .eyebrow{
  margin:0
}
.article-list{
  padding-top:35px
}
.article-list>.note{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:25px
}
.article-list .article-grid{
  row-gap:35px
}
.pagination{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:50px;
  flex-wrap:wrap
}
.pagination a{
  border:1px solid var(--line);
  padding:9px 18px
}
.pagination [aria-current]{
  background:var(--blue);
  color:white
}
.article-detail{
  max-width:850px;
  padding-block:35px 75px
}
.article-header{
  border-bottom:1px solid var(--line);
  padding-bottom:30px;
  margin-bottom:40px
}
.article-header h1{
  font-size:clamp(1.9rem,3vw,2.55rem);
  margin-top:20px
}
.article-prose{
  max-width:760px;
  margin:auto
}
.article-prose p{
  margin-bottom:27px
}
.article-prose h2{
  font-size:1.65rem;
  border-left:4px solid var(--blue);
  padding-left:20px;
  margin:55px 0 24px
}
.article-prose li{
  margin:10px 0
}
.toc{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:10px;
  padding:28px;
  background:var(--pale);
  margin:35px 0
}
.toc a{
  font-size:.9375rem;
  font-weight:400;
  color:var(--blue)
}
figure{
  margin:35px 0
}
figure img{
  max-width:100%;
  height:auto
}
figcaption{
  font-size:.8125rem;
  color:var(--muted);
  margin-top:8px
}
.article-prose table{
  min-width:550px
}
.article-prose blockquote{
  margin:35px 0;
  border-left:3px solid #a5bfE6;
  background:var(--pale);
  padding:23px;
  font-size:1.1rem;
  color:var(--deep)
}
.article-cta{
  background:var(--pale);
  border:1px solid var(--line);
  padding:35px;
  margin-top:50px
}
.article-cta h2{
  font-size:1.4rem
}
.related{
  margin-top:60px
}
.related>h2{
  font-size:1.5rem
}
.related .article-grid{
  grid-template-columns:repeat(2,1fr)
}
.company-section{
  padding-block:25px 85px;
  max-width:900px
}
.company-table>div{
  display:grid;
  grid-template-columns:180px 1fr;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  gap:25px
}
.company-table dt{
  font-weight:700
}
.company-table dd{
  margin:0
}
.pricing-extra{
  padding:0 0 35px;
  max-width:900px
}
.pricing-extra h2{
  font-size:1.6rem
}
.contact-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  padding-block:65px 90px
}
.contact-layout aside{
  padding-top:10px
}
.contact-layout aside h2{
  font-size:1.8rem
}
.contact-layout aside p{
  color:var(--muted)
}
.contact-layout aside .eyebrow{
  color:var(--blue)
}
.demo-notice{
  font-size:.875rem;
  padding:18px 22px;
  background:#f1f5fb;
  border:1px solid var(--line);
  margin-bottom:28px
}
form label{
  display:block;
  font-size:1rem;
  font-weight:600;
  margin-bottom:22px
}
.required,.optional{
  font-size:.7rem;
  margin-left:10px;
  vertical-align:middle;
  padding:2px 6px;
  line-height:1.5
}
.required{
  color:var(--blue);
  background:#e6effe
}
.optional{
  color:var(--muted);
  background:#f0f2f5
}
input:not([type=checkbox]),textarea{
  display:block;
  width:100%;
  min-height:52px;
  margin-top:9px;
  border:1px solid #b6c6dc;
  border-radius:4px;
  padding:12px 15px;
  color:var(--ink);
  background:#fff;
  font-size:1rem
}
input:focus,textarea:focus{
  outline:2px solid #7fa4db;
  outline-offset:2px
}
input::placeholder,textarea::placeholder{
  color:#8491a4;
  font-weight:400
}
input:disabled{
  background:#edf1f7
}
.checkbox-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:400
}
.checkbox-label input{
  width:20px;
  height:20px;
  accent-color:var(--blue)
}
.form-review{
  border:1px solid var(--line);
  padding:30px;
  background:var(--pale)
}
.form-review h2{
  font-size:1.5rem
}
.form-review dt{
  font-size:.875rem;
  color:var(--muted);
  margin-top:18px
}
.form-review dd{
  margin:0;
  white-space:pre-wrap
}
.form-review [hidden],[hidden]{
  display:none!important
}
@media(min-width:1400px){
  .hero{
  padding-top:80px;
  padding-bottom:8px
}

}
@media(max-width:1050px){
  .header-inner{
  gap:20px
}
.brand small{
  font-size:.65rem
}
nav{
  gap:15px
}
nav>a{
  font-size:.8125rem
}
.hero-grid{
  gap:25px
}
.results-panel{
  padding:23px
}
.main-metric>strong{
  font-size:3.3rem
}
.main-metric>.before{
  font-size:2.3rem
}
.increase{
  font-size:1.1rem
}
.mini-metrics strong{
  font-size:1.15rem
}
.mini-metrics p{
  font-size:.75rem
}
.plan{
  padding-inline:18px
}
.plan-budget{
  font-size:.65rem
}
.b-grid,.b-results,.report-grid{
  gap:35px
}
.monitor{
  padding:35px
}
.article-art>strong{
  font-size:1.3rem
}

}
@media(max-width:800px){
  .wrap{
  width:calc(100% - 40px)
}
.header-inner{
  min-height:90px;
  flex-wrap:wrap;
  padding-block:18px;
  gap:0
}
.brand-wordmark{
  font-size:1.5rem
}
.brand small{
  font-size:.625rem
}
.menu-toggle{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  padding:8px 10px;
  font-size:.75rem;
  color:var(--deep)
}
.header-inner nav{
  display:none;
  flex-basis:100%;
  padding-top:25px;
  align-items:stretch;
  flex-direction:column;
  gap:0
}
.header-inner nav.open{
  display:flex
}
.header-inner nav>a{
  padding:13px 8px;
  border-top:1px solid var(--line);
  font-size:.9375rem
}
.header-inner nav>a.button{
  padding:14px 18px
}
.hero{
  padding-top:37px
}
.hero-grid,.b-grid,.b-results{
  grid-template-columns:1fr;
  gap:30px
}
.hero h1{
  font-size:clamp(1.5rem,5.9vw,2.5rem);
  line-height:1.8
}
.hero h1 em{
  font-size:4.2rem
}
.hero h1 em span{
  font-size:2.7rem
}
.hero-copy{
  margin-top:20px
}
.hero .button,.b-hero .button{
  font-size:.9375rem
}
.hero .eyebrow{
  font-size:.8rem
}
.hero-foot{
  flex-direction:column;
  gap:4px;
  margin-top:30px;
  padding:20px 0;
  font-size:.75rem
}
.results-panel{
  padding:23px
}
.main-metric>strong{
  font-size:3.9rem
}
.main-metric>.before{
  font-size:2.7rem
}
.increase{
  font-size:1.35rem
}
.mini-metrics p{
  font-size:.8125rem
}
.mini-metrics strong{
  font-size:1.25rem
}
.problem-grid,.report-grid,.monitor-grid,.contact-layout{
  grid-template-columns:1fr;
  gap:25px
}
.problem-grid h2 br{
  display:none
}
.diagnosis-grid{
  grid-template-columns:repeat(2,1fr);
  gap:23px
}
.diagnosis-grid h3{
  margin-top:15px
}
.diagnosis-grid p{
  font-size:.9375rem
}
.report-paper{
  padding:25px 20px
}
.report-caption{
  max-width:400px
}
.monitor{
  padding:28px 22px
}
.monitor-head{
  align-items:flex-start;
  gap:10px
}
.monitor h2{
  font-size:1.7rem
}
.capacity{
  font-size:.75rem;
  padding:9px 12px;
  gap:3px;
  white-space:nowrap
}
.capacity strong{
  font-size:1.8rem
}
.promise{
  font-size:1.1rem
}
.monitor .button{
  font-size:.875rem;
  gap:10px;
  padding-inline:15px
}
.case-grid{
  grid-template-columns:1fr
}
.case{
  padding:28px
}
.case h3 br{
  display:none
}
.case-client{
  margin:9px 0 15px
}
.plans{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:18px;
  padding:26px 0 14px;
  max-width:100%
}
.plan{
  flex:0 0 88%;
  scroll-snap-align:start;
  padding:28px 24px 20px
}
.plan-budget{
  font-size:.75rem;
  white-space:normal
}
.plan-title{
  font-size:1.3rem
}
.mobile-note{
  display:block;
  margin-top:15px
}
.plan-desc{
  min-height:0
}
.article-grid{
  grid-template-columns:repeat(2,1fr);
  gap:18px
}
.heading-row{
  display:block
}
.article-grid .article-art{
  height:150px;
  padding:18px
}
.article-art>strong{
  font-size:1.25rem
}
.card-body{
  padding:18px
}
.closing{
  text-align:left;
  padding:58px 0
}
.closing .button{
  font-size:.9375rem;
  gap:15px;
  padding:15px 18px
}
.closing .note{
  font-size:.75rem
}
.footer-inner{
  flex-direction:column
}
.footer-inner>div:last-child{
  text-align:left
}
.footer-inner>div:last-child>a{
  margin:0 22px 0 0
}
.b-hero{
  padding:40px 0
}
.b-hero h1{
  font-size:2.25rem
}
.b-hero .problem-sheet{
  padding:25px
}
.b-results h2{
  font-size:1.7rem
}
.page-intro{
  padding-bottom:35px
}
.page-intro h1{
  font-size:1.9rem
}
.breadcrumb{
  margin-bottom:30px
}
.contact-layout{
  padding-top:35px;
  gap:35px
}
.contact-layout aside{
  border-bottom:1px solid var(--line);
  padding-bottom:20px
}
.article-cta{
  padding:23px
}
.company-table>div{
  grid-template-columns:1fr;
  gap:7px
}
.article-list>.note{
  flex-direction:column;
  gap:4px
}
.article-detail{
  padding-top:25px
}
.article-header h1{
  font-size:1.8rem
}
.related .article-grid{
  grid-template-columns:1fr
}
.article-prose h2{
  font-size:1.45rem
}
.toc{
  padding:23px
}

}
@media(max-width:450px){
  .article-grid{
  grid-template-columns:1fr
}
.article-art>strong{
  font-size:1.55rem
}
.article-grid .article-art{
  height:155px
}
.main-metric{
  gap:9px
}
.main-metric>strong{
  font-size:3.5rem
}
.main-metric>.before{
  font-size:2.2rem
}
.increase{
  font-size:1.1rem;
  padding:3px 6px
}
.results-panel{
  padding:20px 17px
}
.results-label{
  font-size:.7rem
}
.mini-metrics p{
  font-size:.75rem
}
.mini-metrics strong{
  font-size:1.125rem
}
.results-panel>.note{
  font-size:.75rem
}
.report-paper{
  padding:22px 14px
}
.paper-bottom{
  flex-direction:column;
  gap:0;
  font-size:.75rem
}
.hero h1{
  font-size:1.43rem
}
.hero .button,.b-hero .button{
  font-size:.875rem;
  padding:16px;
  gap:12px
}
.hero h1 em{
  font-size:3.7rem
}
.diagnosis-grid h3{
  font-size:1rem
}
.plan{
  flex-basis:94%
}
.plan-budget{
  font-size:.7rem
}
.b-hero h1{
  font-size:2rem
}
.brand small{
  font-size:.6rem
}

}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}
*{
  transition:none!important
}

}


/* === 2026-09-08 スマホでの横はみ出し修正 ===
   グリッド／フレックスの子要素は既定で min-width:auto のため、
   中身（min-width:360px の診断書の表や、大きな数字のパネル）より小さくなれず、
   トップページだけが横に広がっていた（390pxで18px・320pxで88pxはみ出し）。
   子要素に min-width:0 を許可し、表はカードの中だけで横スクロールさせる。 */
.report-grid>*,
.b-results>*,
.problem-grid>*,
.hero>*{
  min-width:0
}
.report-paper{
  overflow-x:auto
}
.results-panel{
  overflow-x:hidden
}
@media(max-width:450px){
  .report-paper table{
    min-width:320px
  }
}

/* === WordPress版で追加 === */
/* 迷惑送信よけの隠し項目。人には見せず、読み上げ対象からも外す。 */
.sweb-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

/* === 2026-09-09 UI調整 ===
   左カラム（短い見出し）と右カラム（背の高いカード）を align-items:center で
   並べていたため、見出しが下がって左上に大きな空白ができていた。
   上端を揃えて、視線が見出し→カードの順に流れるようにする。 */
.b-results,
.report-grid{
  align-items:start
}
.b-results>div:first-child,
.report-grid>div:first-child{
  padding-top:6px
}
/* 診断書の説明文と番号付き項目の間を詰める（間延びして見えていた） */
.report-caption{
  margin-top:18px
}
@media(max-width:800px){
  /* スマホでは1カラムになるので、上端揃えの余白は不要 */
  .b-results>div:first-child,
  .report-grid>div:first-child{
    padding-top:0
  }
}

/* === 実測値のビフォーアフター図（記事内・インラインSVG） ===
   画像ファイルを作らず、テーマの色をそのまま使う。スマホでも崩れない。 */
.metric-fig{
  margin:34px 0;
  padding:26px 24px 20px;
  background:var(--pale,#f1f5fb);
  border:1px solid var(--line,#dce4f0);
  border-radius:var(--radius,10px)
}
.metric-fig figcaption{
  font-size:.875rem;
  color:var(--muted,#6b7a90);
  margin-top:14px;
  line-height:1.75
}
.metric-fig .fig-title{
  font-size:.9375rem;
  font-weight:700;
  color:var(--deep,#12213a);
  margin-bottom:16px
}
.metric-fig svg{
  display:block;
  width:100%;
  height:auto;
  max-width:520px
}


/* === 2026-09-09 図版（線画ダイアグラム） ===
   「文字だけだとわからない」への対応。写真は使わず、自作のSVGで仕組みを見せる。 */
.fig-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,2.4vw,28px);
  margin:0 0 clamp(20px,3vw,32px)
}
.fig{
  margin:0;
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white)
}
.fig-title{
  font-size:var(--small);
  font-weight:700;
  color:var(--blue);
  letter-spacing:.04em;
  margin-bottom:14px
}
.fig svg{
  display:block;
  width:100%;
  height:auto;
  max-width:340px;
  margin:0 auto
}
.fig-note{
  margin:14px 0 0;
  font-size:var(--small);
  line-height:1.85;
  color:var(--muted)
}
.fig-note strong{color:var(--ink)}

/* 図の中の部品 */
.fig-box{fill:var(--white);stroke:#b9cbe4;stroke-width:1.5}
.fig-box-accent{fill:var(--blue);stroke:none}
.fig-box-stack{fill:#d7e3f7;stroke:none}
.fig-circle{fill:var(--pale);stroke:#b9cbe4;stroke-width:1.5}
.fig-line{stroke:var(--blue);stroke-width:1.8;fill:none}
.fig-line-dash{stroke:#a9bcd6;stroke-width:1.6;fill:none;stroke-dasharray:5 5}
.fig-arrow-head-a{fill:#a9bcd6}
.fig-arrow-head-b{fill:var(--blue)}
.fig-t{
  font-family:var(--font);
  font-size:12px;
  font-weight:700;
  fill:var(--ink)
}
.fig-t-muted{font-weight:500;fill:var(--muted)}
.fig-t-on{fill:#fff}


/* === 2026-09-09 控えめなアニメーション ===
   JSが動いているときだけ初期状態を隠す（html.js）。
   JSが落ちても中身が消えないようにするため、CSSだけでは絶対に隠さない。 */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease
}
.js .reveal.is-visible{
  opacity:1;
  transform:none
}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}


/* =========================================================
   2026-09-09  デザインB（青ベタ＋黄緑）への外装差し替え
   既存のクラスはそのまま使い、見た目だけ上書きする。
   ========================================================= */

h1,h2{font-weight:900;letter-spacing:-.012em;line-height:1.28}
h3{font-weight:700}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase}

/* ---- ヘッダー ---- */
.site-header{background:var(--pale);border-bottom:2px solid var(--ink)}
.header-inner{min-height:76px}
.brand{gap:11px}
.brand-wordmark{font-weight:900;letter-spacing:-.01em}
.brand small{color:var(--muted)}

/* ---- ボタン ---- */
.button{
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;font-weight:900;padding:15px 28px;gap:12px;
  transition:transform .18s ease,box-shadow .18s ease
}
.button:hover{background:var(--lime);color:var(--ink);box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}
.button span{transition:transform .2s ease}
.button:hover span{transform:translate(4px,-4px)}
.button.small{padding:9px 18px;font-size:.8125rem}
.button.outline{background:#fff}
.button.outline:hover{background:#fff}

/* ---- ヒーロー ---- */
.b-hero{background:var(--blue);color:#fff;padding-block:clamp(46px,6vw,84px)}
.b-grid{grid-template-columns:1fr 1.02fr;gap:clamp(28px,4vw,56px)}
.b-hero h1{color:#fff;font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:1.24}
.b-hero p:not(.eyebrow):not(.note){color:#d9e5ff}
.b-hero .eyebrow{color:#bcd0ff}
.b-hero .note{color:#bcd0ff}
.b-hero strong{color:#fff}
.hero-kicker{display:flex;gap:22px;align-items:center;font-size:.8125rem;letter-spacing:.2em;color:#bcd0ff;margin-bottom:22px}
.hero-kicker::after{content:"";flex:1;max-width:90px;height:1px;background:#7fa2ff}
.uline{position:relative;display:inline-block}
.uline svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.34em;overflow:visible}
.uline path{
  stroke:var(--lime);stroke-width:9;fill:none;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:sweb-uline 1.7s ease-in-out 2s forwards
}
@keyframes sweb-uline{to{stroke-dashoffset:0}}
.hero-cta{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media(max-width:860px){
  .b-grid{grid-template-columns:1fr}
  .hero-cta{align-items:stretch}
  .hero-cta .button{width:100%;justify-content:center}
  .hero-cta .note{text-align:center}
}

/* ---- ヒーローの図（人 → 自社サイト） ---- */
.hero-visual{position:relative;justify-self:center;width:min(100%,430px)}
.hero-visual svg{width:100%;height:auto;overflow:visible}
.hv-people{fill:#fff}
.hv-p{opacity:0;animation:sweb-pop .7s ease forwards;animation-delay:calc(.7s + var(--i) * .2s)}
.hv-line{stroke:rgba(255,255,255,.9);stroke-width:2;fill:none;stroke-linecap:round;
  animation:sweb-draw 1.5s ease-in-out forwards;animation-delay:calc(.9s + var(--i) * .22s)}
@keyframes sweb-draw{to{stroke-dashoffset:0}}
@keyframes sweb-pop{to{opacity:1}}
.hv-card{filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.hv-cap{fill:#c3d5ff;font-family:var(--font);font-size:13px;letter-spacing:.06em}

/* ---- 面（セクション背景） ---- */
.subtle{background:var(--pale)}
.section.ink{background:var(--ink);color:#fff}
.section.ink .eyebrow{color:var(--lime)}
.section.ink h2{color:#fff}
.section.ink p{color:#b9c1cb}
.section.ink strong{color:#fff}

/* ---- カード類（白面は必ず文字色を持たせる） ---- */
.results-panel,.problem-sheet,.fig,.plan,.report-paper,.monitor,.case{
  color:var(--ink);border-radius:var(--radius)
}
.results-panel{background:#fff;border:3px solid var(--ink);box-shadow:none;padding:clamp(22px,3vw,30px)}
.results-label{border-bottom:2px solid var(--ink);font-weight:700}
.pill{background:var(--lime);color:var(--ink);font-weight:900;border-radius:999px;padding:3px 12px;font-size:.75rem}
.problem-sheet{background:#fff;border:3px solid var(--ink);box-shadow:none}
.main-metric strong{color:var(--blue)}
.increase{background:var(--lime);color:var(--ink);font-weight:900;border-radius:999px}
.mini-metrics strong{font-weight:900}

/* ---- 実績スライド ---- */
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.slide-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:860px){.slide-grid{grid-template-columns:1fr;gap:28px}}
.slide-tag{font-size:.8125rem;font-weight:700;color:var(--blue);letter-spacing:.04em;margin-bottom:14px}
.slide-h{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:900;line-height:1.3;margin:0 0 .7em}
.dots-wrap{display:flex;justify-content:center;gap:10px;margin-top:28px}
.dot-b{width:34px;height:6px;border-radius:99px;border:0;background:#cfc9ba;cursor:pointer;padding:0;transition:background .25s ease}
.dot-b.is-on{background:var(--blue)}
.dot-b:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---- 図解（イラスト版） ---- */
.fig-pair{gap:clamp(18px,2.6vw,30px)}
.fig{background:#fff;border:3px solid var(--ink);padding:clamp(24px,3vw,34px)}
.fig-title{color:var(--blue);margin-bottom:20px}
.fig svg{max-width:360px;margin:6px auto 0}
.fig-note{margin-top:24px}
.i-person{fill:#9fbcf5}
.i-person-on{fill:var(--blue)}
.i-me{fill:var(--deep)}
.i-doc{fill:#fff;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round}
.i-docline{stroke:#a8c0f5;stroke-width:2.6;stroke-linecap:round}
.i-site{fill:#eef2ff;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round}
.i-arrow{stroke:var(--blue);stroke-width:2.8;fill:none;stroke-linecap:round}
.i-arrow-w{stroke:#b9c2cd;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-dasharray:6 6}
.i-plate{fill:#e6ecfb}
.i-t{font-family:var(--font);font-size:12.5px;font-weight:700;fill:var(--ink)}
.i-tm{font-family:var(--font);font-size:11.5px;font-weight:500;fill:var(--muted)}

/* ---- 料金 ---- */
.plan{background:#fff;border:3px solid var(--ink)}
.plan.featured{background:var(--blue);color:#fff;border-color:var(--ink)}
.plan.featured .plan-title,.plan.featured .plan-desc,.plan.featured li{color:#dde6ff}
.plan.featured .price{color:var(--lime)}
.plan.featured .note,.plan.featured .plan-budget{color:#b9ccff}
.price{font-weight:900;color:var(--blue)}
.popular{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-weight:900}

/* ---- 記事カード・その他 ---- */
.article-card{border:3px solid var(--ink);border-radius:var(--radius);background:#fff;color:var(--ink)}
.monitor{background:#fff;border:3px solid var(--ink)}
.case{background:#fff;border:3px solid var(--ink)}
.report-paper{background:#fff;border:3px solid var(--ink)}
.capacity strong{color:var(--blue)}

/* ---- 最終CTA ---- */
.section.cta-final{background:var(--lime);color:var(--ink);text-align:center}
.section.cta-final h2{color:var(--ink)}
.section.cta-final p{color:var(--ink-2)}
.section.cta-final .button{background:var(--blue);color:#fff;border-color:var(--ink)}
.section.cta-final .button:hover{background:var(--deep);color:#fff}

/* ---- 動きを減らす設定 ---- */
@media(prefers-reduced-motion:reduce){
  .uline path{animation:none;stroke-dashoffset:0}
  .hv-line,.hv-p{animation:none}
  .hv-line{stroke-dashoffset:0!important}
  .hv-p{opacity:1}
  .slides{scroll-behavior:auto}
}

/* ---- 最終CTA（.closing）を黄緑面に ---- */
.closing{background:var(--lime);color:var(--ink);text-align:center}
.closing h2{color:var(--ink)}
.closing p{color:var(--ink-2)}
.closing .eyebrow{color:var(--blue)}
.closing .button,.closing .button.light{background:var(--blue);color:#fff;border:2px solid var(--ink)}
.closing .button:hover,.closing .button.light:hover{background:var(--deep);color:#fff}
.closing .note{color:#4a5560}

/* ---- 2026-09-09 反映後の手直し ---- */
/* ヒーロー下の注記が濃い色のままだったので、青地でも読める色にする
   （元の .b-hero p:not(.eyebrow) のほうが強かったため、同じ強さで後から上書きする） */
.b-hero p.note{color:#bcd0ff}
.b-hero p.hero-kicker{color:#bcd0ff}

/* ヘッダーを詰める（PC 109px / スマホ 137px と高すぎた） */
.header-inner{min-height:72px;gap:18px}
.brand small{font-size:.625rem;line-height:1.5}
.brand-mark{flex:none}
@media(max-width:860px){
  .brand small{display:none}
  .header-inner{min-height:62px;gap:12px}
  .menu-toggle{background:var(--lime);border:2px solid var(--ink);color:var(--ink);font-weight:900;border-radius:999px}
}

/* ブランドはマークと文字を横並びにする（縦積みのままだとヘッダーが伸びる）
   タグラインはヒーローで大きく出しているので、ヘッダーからは外す */
.brand{flex-direction:row;align-items:center;gap:11px}
.brand small{display:none}
.brand-wordmark{font-size:1.375rem;color:var(--ink);line-height:1.3}
.header-inner{min-height:68px}
@media(max-width:860px){
  .brand-wordmark{font-size:1.25rem}
  .header-inner{min-height:60px}
}

/* 濃い面のセクションでも、中の白いカードは自前の文字色を持たせる
   （.section.ink p / strong が白カードの中まで効いて、数字が白く消えていた） */
.section.ink .results-panel,
.section.ink .fig,
.section.ink .plan,
.section.ink .monitor,
.section.ink .case,
.section.ink .problem-sheet{color:var(--ink)}
.section.ink .results-panel p,
.section.ink .fig p,
.section.ink .case p,
.section.ink .monitor p{color:var(--muted)}
.section.ink .results-panel strong,
.section.ink .fig strong,
.section.ink .case strong,
.section.ink .monitor strong{color:var(--ink)}
.section.ink .results-panel .results-label span{color:var(--ink)}
.section.ink .results-panel .pill{color:var(--ink)}
.section.ink .mini-metrics small{color:var(--muted)}

/* ---- スマホの手直し ---- */
@media(max-width:860px){
  /* 字間が広すぎて小見出しが折り返していた */
  .eyebrow{letter-spacing:.16em;font-size:.7rem}
  .closing .eyebrow{letter-spacing:.1em}
}
/* スライドが中途半端な位置で止まらないようにする */
.slide{scroll-snap-stop:always}

/* =========================================================
   2026-09-09  デモ（/preview/design-b/）と寸法を揃える
   本番は見出しが小さく本文が大きく、メリハリが弱かった。
   ========================================================= */
body{line-height:1.85}

/* 見出し：デモと同じ最大80px */
.b-hero h1{font-size:clamp(2.75rem,8.4vw,5rem);line-height:1.24}

/* ヒーローの間隔 */
.b-grid{gap:40px}

/* ボタン：高さをデモと同じ54pxに（本番は61pxで重かった） */
.button{min-height:54px;padding:0 30px;font-size:1rem;line-height:1.4}
.button.small{min-height:40px;padding:0 18px;font-size:.8125rem}

/* ヒーローの図：デモより大きく */
.hero-visual{width:min(100%,510px)}
@media(max-width:860px){ .hero-visual{width:min(100%,360px);margin:0 auto} }

/* 料金カードの内側余白をデモに合わせる */
.plan{padding:26px 22px}

/* ---- 面の使い分け（デモと同じ）：地は生成り、切り替えたい面だけ白 ---- */
.subtle{background:var(--white)}
.section.white{background:var(--white)}
.article-prose,.contact-layout,.company-section{background:transparent}

/* =========================================================
   2026-09-09  文字が背景に埋もれる箇所の一括修正
   面（青／濃い／黄緑）ごとに文字色を決め、
   その面の上に乗る白いカードは自前の文字色を持たせる。
   ========================================================= */

/* デモにない薄い青の面をやめ、生成り／白に寄せる */
.report-section{background:var(--pale)}
.report-summary{background:var(--pale)}

/* ── 青い面（ヒーロー）の上 ── */
.b-hero,.b-hero p,.b-hero li,.b-hero span,.b-hero small,.b-hero strong,.b-hero div{color:#e2eaff}
.b-hero h1,.b-hero h2,.b-hero h3,.b-hero strong{color:#fff}
.b-hero .eyebrow,.b-hero .hero-kicker{color:#d6e2ff}
.b-hero p.note{color:#d3e0ff}

/* ── 濃い面（もともとSEOの会社では…）の上 ── */
.section.ink,.section.ink p,.section.ink li,.section.ink span,.section.ink small,.section.ink div{color:#c3cbd6}
.section.ink h1,.section.ink h2,.section.ink h3,.section.ink strong{color:#fff}
.section.ink .eyebrow{color:var(--lime)}

/* ── 黄緑の面（最終CTA）の上 ── */
.closing,.closing p,.closing span,.closing small,.closing div{color:#2b333d}
.closing h2,.closing strong{color:var(--ink)}
.closing .eyebrow{color:var(--deep)}
.closing .note{color:#414b57}

/* ── どの面に乗っても、白いカードの中は自前の文字色 ── */
.results-panel,.problem-sheet,.fig,.plan,.monitor-card,.case,.report-paper,.article-card,
.b-hero .results-panel,.b-hero .problem-sheet,
.section.ink .results-panel,.section.ink .fig,
.closing .results-panel{color:var(--ink)}
.results-panel p,.problem-sheet p,.fig p,.monitor-card p,.case p,.report-paper p,.article-card p,
.b-hero .problem-sheet p,.b-hero .results-panel p,
.section.ink .results-panel p,.section.ink .fig p{color:var(--muted)}
.results-panel strong,.problem-sheet strong,.fig strong,.monitor-card strong,.case strong,
.report-paper strong,.article-card strong,
.b-hero .problem-sheet strong,.section.ink .results-panel strong{color:var(--ink)}
.results-panel span,.problem-sheet span,.report-paper span,
.b-hero .problem-sheet span,.section.ink .results-panel span{color:inherit}
.paper-bottom,.paper-bottom span{color:var(--muted)}

/* 青のプランカード（featured）は中が濃色なので明るい文字に */
.plan.featured,.plan.featured p,.plan.featured li,.plan.featured span{color:#dde6ff}
.plan.featured .plan-title,.plan.featured strong{color:#fff}
.plan.featured .price{color:var(--lime)}

/* 詳細度で負けていた分を名指しで上書き
   （.problem-grid > div > p:not(.eyebrow) のほうが強く、濃い面で灰色のままだった） */
.section.ink .problem-grid > div > p,
.section.ink .problem-grid > div > p:not(.eyebrow){color:#c3cbd6}
.section.ink .problem-grid > div > p strong{color:#fff}

/* 青いプランカードの中の小さい文字 */
.plan.featured small,.plan.featured .note,.plan.featured .plan-budget{color:#d6e2ff}
.b-hero small{color:#d3e0ff}

/* 記事カードの飾り番号：背景とほぼ同化していた（比1.17）。
   元が .article-art .art-number なので、同じ詳細度で上書きする。 */
.article-art .art-number{color:#6285bd}

/* =========================================================
   2026-09-10  無料モニターを「特別枠」として見せる
   前後が生成り／白の面なので、ここだけ青ベタにして浮かせる。
   ========================================================= */
.monitor{
  background:var(--blue);color:#fff;
  border:3px solid var(--ink);border-radius:var(--radius);
  padding:clamp(28px,4vw,52px);
  box-shadow:10px 10px 0 var(--ink)
}
.monitor h2{color:#fff}
.monitor .eyebrow{color:var(--lime)}
.monitor-head{align-items:flex-start;gap:24px;flex-wrap:wrap}

/* 今月の枠：黄緑のバッジで一番目立たせる */
.capacity{
  display:flex;align-items:baseline;gap:6px;flex-direction:row;flex-wrap:wrap;
  background:var(--lime);color:var(--ink);border:3px solid var(--ink);
  border-radius:999px;padding:12px 24px;font-weight:900;font-size:1rem
}
.capacity .capacity-month{
  font-size:.8125rem;background:var(--ink);color:var(--lime);
  border-radius:999px;padding:3px 12px;margin-right:6px
}
.capacity strong{font-size:2rem;line-height:1;font-weight:900}

.monitor-lead{color:#dde6ff;margin:22px 0 30px;font-size:1.0625rem;line-height:1.95;max-width:44em}
.monitor-lead strong{color:#fff}

.monitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,24px);align-items:start}
@media(max-width:820px){.monitor-grid{grid-template-columns:1fr}}

.monitor-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(20px,2.6vw,28px)}
.monitor-card-title{font-weight:900;font-size:.9375rem;margin-bottom:14px;color:var(--ink)}
.monitor-card .clean-list li{color:var(--ink-2)}
.monitor-card .clean-list li span{color:var(--blue)}

.safe-list{list-style:none;margin:0;padding:0}
.safe-list li{position:relative;padding-left:0;margin-bottom:14px;font-size:.875rem;color:var(--muted);line-height:1.75}
.safe-list li:last-child{margin-bottom:0}
.safe-list b{display:block;font-size:.9375rem;font-weight:900;color:var(--ink);margin-bottom:2px}

.promise{
  margin-top:26px;background:rgba(255,255,255,.1);border:0;border-radius:var(--radius);
  padding:clamp(20px,2.6vw,26px);color:#dde6ff;font-size:.9375rem;line-height:1.95
}
.promise-q{font-weight:900;color:var(--lime);margin-bottom:8px;font-size:1rem}
.promise strong{color:#fff}

.monitor-cta{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.monitor-cta .button{background:var(--lime);color:var(--ink);border:3px solid var(--ink)}
.monitor-cta .button:hover{background:#fff;box-shadow:5px 5px 0 var(--ink)}
.monitor-cta .note{color:#c9d8ff}
@media(max-width:720px){
  .monitor{box-shadow:6px 6px 0 var(--ink)}
  .monitor-cta{align-items:stretch}
  .monitor-cta .button{width:100%;justify-content:center}
  .monitor-cta .note{text-align:center}
}

/* 青ベタの無料モニター内：説明文は明るい文字で */
.monitor p{color:#dde6ff}
.monitor .promise p{color:#dde6ff}
.monitor .promise .promise-q{color:var(--lime)}
.monitor .monitor-lead{color:#dde6ff}
.monitor .monitor-cta .note{color:#d6e2ff}
/* 白カードの中だけは自前の文字色に戻す */
.monitor .monitor-card p{color:var(--muted)}
.monitor .monitor-card .monitor-card-title{color:var(--ink)}
.monitor .monitor-card li{color:var(--ink-2)}
.monitor .monitor-card b{color:var(--ink)}

/* ---- 無料モニター：トップは要約、詳細は /monitor/ ---- */
.safe-row{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
@media(max-width:900px){.safe-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.safe-row{grid-template-columns:1fr;gap:12px}}
.safe-row li{
  background:rgba(255,255,255,.12);border-radius:var(--radius);
  padding:16px 18px;font-size:.8125rem;line-height:1.7;color:#f0f4ff
}
.safe-row b{display:block;font-size:.9375rem;font-weight:900;color:#fff;margin-bottom:4px}
.text-link.light{color:var(--lime);font-weight:700;font-size:.9375rem}
.text-link.light:hover{color:#fff}
.monitor .text-link.light{color:var(--lime)}

/* 詳細ページ側：白地に置く版のカード */
.monitor-card.light{background:#fff;border:3px solid var(--ink)}
.monitor-card.light .clean-list li{color:var(--ink-2)}

/* 詳細ページのヒーロー内バッジ */
.b-hero .capacity{margin-bottom:6px}
.b-hero .hero-cta{gap:16px}

/* 青い面の中に置いた黄緑バッジ：面の白文字ルールが中まで効いて読めなかった */
.b-hero .capacity,
.b-hero .capacity strong,
.b-hero .capacity span{color:var(--ink)}
.b-hero .capacity .capacity-month{color:var(--lime)}

/* ---- 運営・支援の実績（一部） ---- */
.logos-block{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(22px,3vw,30px)}
.logos-title{font-weight:900;font-size:1rem;color:var(--ink);margin:0 0 4px}
.logos-title span{font-weight:500;font-size:.8125rem;color:var(--muted)}
.logos-sub{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--blue);margin:20px 0 10px}
.logos-sub:first-of-type{margin-top:16px}
.logos{display:grid;gap:8px}
.logo-item{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--line);border-radius:var(--radius);padding:11px 13px
}
.logo-mark{
  /* 正方形のマークと横長のワードマークが混在するので、
     左の列幅を64pxで固定して行の頭を必ず揃える */
  flex:none;width:64px;height:40px;
  display:grid;place-items:center
}
.logo-mark.client{
  width:40px;height:40px;margin-inline:12px;border-radius:8px;
  background:var(--ink);color:#fff;font-weight:900;font-size:.9375rem
}
.logo-mark.brand{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px;
  width:40px;height:40px;margin-inline:12px
}
.logo-mark.brand.wide{width:64px;margin-inline:0;padding:0;border:0;background:transparent}
.logo-mark.brand img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.logo-body b{font-size:.9375rem;font-weight:900;color:var(--ink);line-height:1.4}
.logo-body small{font-size:.75rem;color:var(--muted);line-height:1.5}
.logo-metric{
  flex:none;font-size:.8125rem;font-weight:900;color:var(--blue);
  background:var(--pale);border-radius:999px;padding:5px 12px;white-space:nowrap
}
.logo-item.more{
  justify-content:center;border-style:dashed;color:var(--muted);
  font-size:.8125rem;font-weight:700;padding:13px
}
.logos-note{font-size:.75rem;color:var(--muted);margin:16px 0 0;line-height:1.7}
/* 濃い面の上に置くので、中の文字色は自前で持たせる */
.section.ink .logos-block,.section.ink .logos-block p,.section.ink .logos-block b{color:var(--ink)}
.section.ink .logos-block small,.section.ink .logos-note,.section.ink .logos-title span{color:var(--muted)}
.section.ink .logos-sub{color:var(--blue)}
.section.ink .logo-mark{color:#fff}
/* .section.ink span (0,2,1) が .logo-metric / .logos-sub を灰色に塗ってしまうので、
   同じ面の中だけ specificity を上げて取り戻す */
.section.ink .logos-block .logo-metric{color:var(--blue)}
.section.ink .logos-block p.logos-sub{color:var(--blue)}
.section.ink .logos-block .logo-item.more{color:var(--muted)}
@media(max-width:520px){
  /* スマホは flex の折り返しに任せず grid で位置を決め打ちする。
     flex-wrap だと「ロゴだけ1行目・社名が2行目」に落ちる行と
     落ちない行が混ざり、並びがバラバラに見えるため。
     1行目＝ロゴ＋社名／2行目＝指標バッジ（社名の頭に揃える）。 */
  a.logo-item{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:"mark body" "metric metric";
    gap:10px 12px;align-items:center
  }
  a.logo-item .logo-mark{grid-area:mark}
  a.logo-item .logo-body{grid-area:body;min-width:0}
  a.logo-item .logo-metric{grid-area:metric;justify-self:start;margin-left:76px}
}

/* 事例カード：社名の下に業種を小さく添える */
.case-biz{display:block;font-size:.75rem;font-weight:500;color:var(--muted);margin-top:2px}

/* ================= 実績ページ（/results/） ================= */
.lead-note{
  max-width:44em;margin:-18px 0 34px;color:var(--muted);
  font-size:.9375rem;line-height:1.9
}

/* 自社サイトのカード */
.rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.rec{
  background:#fff;border:3px solid var(--ink);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:14px
}
.rec-head{display:flex;align-items:center;gap:13px}
.rec-head > div{min-width:0}
.rec-head b{display:block;font-size:1.0625rem;font-weight:900;color:var(--ink);line-height:1.4}
.rec-head small{display:block;font-size:.75rem;color:var(--muted);margin-top:2px;line-height:1.5}
.rec .logo-mark{width:48px;height:48px}
.rec-desc{font-size:.875rem;line-height:1.9;color:var(--ink-2);margin:0}
.rec-metrics{display:grid;gap:8px;margin:4px 0 0;padding-top:14px;border-top:2px solid var(--line)}
.rec-metrics > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rec-metrics dt{font-size:.8125rem;color:var(--muted);margin:0}
.rec-metrics dd{margin:0;white-space:nowrap}
.rec-metrics dd strong{font-size:1.25rem;font-weight:900;color:var(--blue);letter-spacing:.01em}
.rec-metrics dd span{font-size:.8125rem;font-weight:700;color:var(--blue);margin-left:2px}

/* 支援先の詳細 */
.case-detail{
  background:#fff;border:3px solid var(--ink);border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);margin-bottom:20px
}
.case-detail-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.case-detail-head > div{min-width:0}
.case-detail-head .number{flex:none;line-height:1.3}
.case-detail-head h3{font-size:clamp(1.125rem,2.2vw,1.5rem);font-weight:900;color:var(--ink);line-height:1.6;margin:6px 0 0}
.case-detail .case-client{font-size:.875rem;font-weight:900;color:var(--ink);margin:0}
.case-detail-body{display:grid;gap:22px}
.cd-block p{font-size:.9375rem;line-height:1.95;color:var(--ink-2);margin:0 0 10px}
.cd-block p:last-child{margin-bottom:0}
.cd-block strong{font-weight:900;color:var(--ink)}
.cd-label{
  font-size:.75rem;font-weight:900;letter-spacing:.1em;color:var(--blue);
  margin:0 0 10px;padding-left:11px;border-left:4px solid var(--blue)
}
.cd-block ul{margin:0 0 10px;padding-left:1.15em}
.cd-block li{font-size:.9375rem;line-height:1.9;color:var(--ink-2);margin-bottom:6px}
.cd-small{font-size:.8125rem !important;color:var(--muted) !important;line-height:1.8 !important}
.cd-block.honest{background:var(--pale);border-radius:var(--radius);padding:20px 22px}
.cd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.cd-metrics > div{border:2px solid var(--line);border-radius:var(--radius);padding:14px}
.cd-metrics p{font-size:.75rem;color:var(--muted);margin:0 0 6px;line-height:1.5}
.cd-metrics strong{display:block;font-size:1.125rem;font-weight:900;color:var(--ink);letter-spacing:.01em}
.cd-metrics strong span{color:var(--muted);font-weight:700;margin:0 3px}
.cd-metrics em{
  display:inline-block;margin-top:6px;font-style:normal;font-size:.8125rem;font-weight:900;
  color:var(--blue);background:var(--pale);border-radius:999px;padding:3px 10px
}

/* 数字の見方 */
.honest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.honest-grid > div{
  background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:24px
}
.honest-grid h3{font-size:1rem;font-weight:900;color:var(--ink);line-height:1.6;margin:0 0 10px}
.honest-grid p{font-size:.9375rem;line-height:1.95;color:var(--ink-2);margin:0}
.honest-grid strong{font-weight:900;color:var(--ink)}

@media(max-width:860px){
  .rec-grid,.honest-grid{grid-template-columns:1fr}
  .cd-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .case-detail-head{flex-direction:column;gap:8px}
  .cd-metrics{grid-template-columns:1fr}
}
.results-more{margin-top:26px}

/* ---- ボタンの中の矢印が消える問題（スマホで発覚・2026-09-10） ----
   .b-hero span / .plan.featured span / .closing span が「面の文字色」を
   ボタンの中の <span>↗</span> にまで塗ってしまい、
   ライム色のボタンに淡い青の矢印＝ほぼ見えない状態になっていた。
   矢印はボタン自身の文字色を継ぐのが正しいので、そこだけ取り戻す。 */
.button span,
.b-hero .button span,
.plan.featured .button span,
.closing .button span,
.monitor .button span,
.section.ink .button span,
.section.cta-final .button span{color:inherit}

/* ---- 実績の行をリンクにする（2026-09-10） ---- */
a.logo-item{
  color:inherit;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease
}
a.logo-item:hover{border-color:var(--blue);transform:translateX(2px)}
a.logo-item:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---- 無料モニターの残枠（○○✕で「もう埋まりはじめている」を伝える） ---- */
.capacity-slots{display:inline-flex;align-items:center;gap:5px;margin-right:9px}
.capacity-slots i{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);
  display:grid;place-items:center;font-size:9px;font-style:normal;line-height:1;
  background:transparent;color:transparent
}
.capacity-slots i.taken{background:var(--ink);color:var(--lime)}
.capacity-rest{font-size:1rem;font-weight:900}
.capacity-rest strong{font-size:2rem;line-height:1;font-weight:900;margin:0 2px}
.b-hero .capacity-slots i{border-color:var(--ink)}
.b-hero .capacity-slots i.taken{background:var(--ink);color:var(--lime)}
.b-hero .capacity-rest,.b-hero .capacity-rest strong{color:var(--ink)}

/* ---- 実績カード（v2.9.0：実測値の表つき・カード全体がリンク） ---- */
a.rec{
  color:inherit;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
a.rec:hover{border-color:var(--blue);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
a.rec:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.rec-head b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec-tag{
  font-size:.6875rem;font-weight:900;letter-spacing:.06em;
  background:var(--pale);color:var(--muted);
  border-radius:999px;padding:2px 9px
}
.rec-key{
  display:flex;align-items:baseline;gap:9px;margin:0;
  padding:12px 14px;background:var(--pale);border-radius:var(--radius)
}
.rec-key span{font-size:.75rem;font-weight:700;color:var(--muted)}
.rec-key strong{font-size:1.125rem;font-weight:900;color:var(--blue)}
.rec-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.rec-table th,.rec-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.rec-table thead th{
  font-size:.6875rem;font-weight:700;color:var(--muted);
  border-bottom:2px solid var(--line);white-space:nowrap
}
.rec-table thead th:first-child,.rec-table tbody th{text-align:left;font-weight:700;color:var(--muted)}
.rec-table tbody th{font-size:.8125rem}
.rec-table tbody td{
  font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.rec-table .u{font-size:.6875rem;font-weight:700;margin-left:2px;color:var(--muted)}
.rec-trend{font-size:.8125rem;line-height:1.8;color:var(--ink-2);margin:0}
.rec-link{
  font-size:.8125rem;font-weight:900;color:var(--blue);
  display:inline-flex;align-items:center;gap:5px;margin-top:auto
}
a.rec:hover .rec-link span{transform:translate(3px,-3px)}
.rec-link span{transition:transform .18s ease}

/* 事例カードの社名リンク */
.case-client a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line)}
.case-client a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.case-client .ext{font-size:.75rem;color:var(--blue)}
.origin-more{margin-top:26px}

/* ---- 実績カード：ビフォー／アフターの2列 ---- */
.rec-plan{
  font-size:.6875rem;font-weight:900;letter-spacing:.02em;
  background:var(--blue);color:#fff;border-radius:999px;padding:2px 10px
}
.rec-table thead th:nth-child(2){color:var(--muted)}
.rec-table thead th:last-child{color:var(--blue)}
.rec-table td.before{color:var(--muted);font-weight:700}
.rec-table td.after{color:var(--blue)}

/* 実績カードの表：スマホでは項目名が3行に折れるので詰める */
@media(max-width:520px){
  .rec-table{font-size:.75rem}
  .rec-table th,.rec-table td{padding:7px 4px}
  .rec-table thead th{font-size:.625rem}
  .rec-table tbody th{width:46%}
}

/* ---- 実績カード：スマホは横スライドにする（縦に6枚は長すぎるため） ---- */
.rec-dots{display:none}
@media(max-width:860px){
  .rec-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(88%,340px);
    align-items:stretch;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:6px;
    scrollbar-width:none
  }
  .rec-grid::-webkit-scrollbar{display:none}
  .rec{scroll-snap-align:start;scroll-snap-stop:always}
  .rec-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
  .rec-dots .dot-b{width:26px;height:5px}
}

/* ---- 図：BEFORE → AFTER をはっきり見せる（2026-09-10） ---- */
.fig-step{
  display:inline-block;margin-right:9px;
  font-size:.625rem;font-weight:900;letter-spacing:.12em;
  border-radius:999px;padding:3px 9px;vertical-align:1px
}
.fig-before .fig-title{color:var(--muted)}
.fig-before .fig-step{background:var(--line);color:var(--ink)}
.fig-before{background:var(--pale);border-color:var(--line)}
.fig-before svg{opacity:.72}
.fig-after .fig-title{color:var(--blue)}
.fig-after .fig-step{background:var(--blue);color:#fff}
.fig-after{background:var(--white);border:3px solid var(--ink)}
.fig-arrow{
  font-size:1.75rem;font-weight:900;color:var(--blue);
  line-height:1;text-align:center;flex:none
}
.fig-dots{display:none}
.fig-summary{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 0 clamp(32px,4vw,48px);font-size:1rem;font-weight:900;color:var(--muted)
}
.fig-summary i{font-style:normal;color:var(--blue)}
.fig-summary strong{
  color:var(--ink);background:var(--lime);
  border-radius:999px;padding:5px 16px;border:2px solid var(--ink)
}

/* スマホは横スライド（縦に積むと図2枚で3画面ぶんになるため） */
@media(max-width:720px){
  .fig-pair{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(88%,340px);
    align-items:stretch;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:6px;
    scrollbar-width:none;
    margin-bottom:0
  }
  .fig-pair::-webkit-scrollbar{display:none}
  .fig{scroll-snap-align:start;scroll-snap-stop:always}
  .fig-arrow{display:none}
  .fig-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .fig-dots .dot-b{width:26px;height:5px}
  .fig-summary{margin-top:20px;font-size:.9375rem}
}

/* ---- 実績カードの表にも BEFORE / AFTER をはっきり出す ---- */
.rec-table thead th{vertical-align:bottom;padding-bottom:8px}
.ba{
  display:inline-block;font-size:.5625rem;font-weight:900;letter-spacing:.1em;
  border-radius:999px;padding:2px 8px;margin-bottom:4px
}
.ba-b{background:var(--line);color:var(--ink)}
.ba-a{background:var(--blue);color:#fff}
.ba-cap{display:block;font-size:.625rem;font-weight:700;color:var(--muted)}
/* 「いま」側の列に薄い面を敷いて、結果がどちらかを一目で分かるようにする */
.rec-table thead th:last-child,
.rec-table td.after{background:rgba(27,77,234,.055)}
.rec-table tbody tr:last-child td.after{border-radius:0 0 4px 4px}
.rec-table thead th:last-child{border-radius:4px 4px 0 0}

/* ===== v2.25.0 クリックしてほしいところは黄色（山田さん指示 2026-10-06） ===== */
:root{--cta:#ffd60a;--cta-deep:#f5c400}
.button:not(.outline),
.header-inner nav>a.button,
.hero .button:not(.outline),.b-hero .button:not(.outline),
.plan .button:not(.outline),.plan.featured .button,
.closing .button,.closing .button.light,
.section.cta-final .button,.monitor .button:not(.outline),.monitor-cta .button,
.section.ink .button:not(.outline){background:var(--cta)!important;color:var(--ink)!important;border:2px solid var(--ink)!important}
.button:not(.outline):hover,
.header-inner nav>a.button:hover,
.closing .button:hover,.section.cta-final .button:hover,.monitor-cta .button:hover{background:var(--cta-deep)!important;color:var(--ink)!important}
.button:not(.outline) span{color:inherit!important}

/* かんたん診断 */
.check-intro h1{margin-bottom:10px}
.check-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;padding-bottom:var(--space)}
.check-layout>*{min-width:0}
.check-card{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:32px;box-shadow:8px 8px 0 var(--ink)}
.quick-check{display:grid;gap:18px}
.quick-check label{display:grid;gap:8px;font-weight:700}
.quick-check input[type=url],.quick-check input[type=email]{width:100%;min-height:56px;padding:0 16px;font-size:1.0625rem;border:2px solid var(--ink);border-radius:var(--radius);background:#fff;font-family:inherit}
.quick-check input:focus{outline:3px solid var(--cta);outline-offset:2px}
.quick-check .button{width:100%;justify-content:center;font-size:1.0625rem}
.quick-check .note{margin:0;color:var(--muted);font-size:var(--small)}
.check-points h2{font-size:1.5rem;margin:0 0 16px}
.check-points ol{margin:0;padding:0;list-style:none;counter-reset:cp;display:grid;gap:14px}
.check-points li{counter-increment:cp;position:relative;padding-left:46px;line-height:1.7;color:var(--ink-2)}
.check-points li::before{content:counter(cp,decimal-leading-zero);position:absolute;left:0;top:0;font-weight:900;color:var(--blue);font-size:1.15rem}
.check-points li strong{display:block;color:var(--ink)}
.check-points .note{color:var(--muted);font-size:var(--small);margin-top:18px}
@media(max-width:860px){.check-layout{grid-template-columns:1fr;gap:32px}.check-card{padding:22px;box-shadow:5px 5px 0 var(--ink)}}

/* シミュレーター */
.sim-section{background:#fff}
.sim-lead{max-width:640px;color:var(--ink-2)}
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:28px;align-items:stretch}
.sim>*{min-width:0}
.sim-inputs{display:grid;gap:20px;align-content:start}
.sim fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.sim legend{font-weight:700;margin-bottom:8px}
.sim fieldset label{display:flex;gap:12px;align-items:center;padding:14px 16px;border:2px solid var(--line);border-radius:var(--radius);cursor:pointer;background:var(--pale)}
.sim fieldset label:has(input:checked){border-color:var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
.sim fieldset input{accent-color:var(--blue);width:20px;height:20px;flex:none}
.sim fieldset span{font-weight:700;display:grid}
.sim fieldset small{font-weight:400;color:var(--muted)}
.sim-profit{display:grid;gap:8px;font-weight:700}
.sim-profit input{min-height:56px;padding:0 16px;font-size:1.25rem;font-weight:700;border:2px solid var(--ink);border-radius:var(--radius);width:100%;font-family:inherit}
.sim-presets{display:flex;flex-wrap:wrap;gap:8px}
.sim-presets button{min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:700;font-family:inherit;cursor:pointer;color:var(--ink)}
.sim-presets button:hover{background:var(--cta)}
.sim-result{background:var(--ink);color:#fff;border-radius:var(--radius);padding:30px;display:grid;gap:12px;align-content:start}
.sim-result .sim-label{margin:0;color:#c3cbd6;font-weight:700}
.sim-result .sim-big{margin:0;font-size:clamp(3.4rem,8vw,5rem);font-weight:900;line-height:1;color:var(--cta)}
.sim-result .sim-big small{font-size:1.25rem;margin-left:6px;color:#fff}
.sim-result .sim-sub{margin:0;line-height:1.8;color:#fff}
.sim-result .sim-sub strong{color:var(--cta)}
.sim-result .button{justify-self:start;margin-top:6px}
.sim-result .note{margin:0;color:#c3cbd6;font-size:.8125rem;line-height:1.7}
@media(max-width:860px){.sim{grid-template-columns:1fr}.sim-result{padding:22px}.sim-result .button{width:100%;justify-content:center}}

/* ===== v2.26.0 記事内の診断・シミュレーター＋導線を黄色で目立たせる ===== */
.article-check{margin:48px 0;border:3px solid var(--ink);border-radius:var(--radius);background:#fff;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.article-check-band{margin:0!important;background:var(--cta);color:var(--ink);font-weight:900;padding:12px 22px;border-bottom:3px solid var(--ink);letter-spacing:.04em}
.article-check-body{padding:22px}
.article-check-lead{margin:0 0 16px!important;line-height:1.8}
.article-check-lead strong{background:linear-gradient(transparent 58%,var(--cta) 58%)}
.article-prose .quick-check label{margin:0}
.article-prose .quick-check .note{margin:0!important}
.sim-inline{margin:48px 0;border:3px solid var(--ink);border-radius:var(--radius);padding:22px;background:var(--pale)}
.sim-inline-title{margin:0 0 8px!important;font-weight:900;font-size:1.3rem;line-height:1.5;color:var(--ink)}
.sim-inline-title span{display:inline-block;background:var(--cta);border:2px solid var(--ink);font-size:.75rem;padding:2px 10px;margin-right:10px;vertical-align:middle;border-radius:999px}
.sim-inline .sim-lead{margin:0!important}
.sim-inline .sim{grid-template-columns:1fr;gap:18px;margin-top:18px}
.sim-inline .sim-result{padding:22px}
.sim-inline .sim-result p{margin:0!important}
.sim-inline .sim-result .button{width:100%;justify-content:center}
.article-prose .sim fieldset label{margin:0}
/* 記事末尾の案内も黄色 */
.article-cta{background:#fff8d1!important;border:3px solid var(--ink)!important;border-top:10px solid var(--cta)!important;border-radius:var(--radius)}
/* 本文中の「診断・相談・モニター・料金」へのリンクは黄色のマーカー */
.article-prose a[href*="/check/"]:not(.button),
.article-prose a[href*="/contact/"]:not(.button),
.article-prose a[href*="/monitor/"]:not(.button),
.article-prose a[href*="/pricing/"]:not(.button),
.article-prose a[href*="#simulator"]{color:var(--ink)!important;font-weight:700;text-decoration:none;background:linear-gradient(transparent 55%,var(--cta) 55%);padding:0 2px}
.article-prose a[href*="/check/"]:not(.button):hover,.article-prose a[href*="/contact/"]:not(.button):hover{background:var(--cta)}
/* 記事内の表：スマホでは表の中だけ横にスクロール（ページ全体をはみ出させない） */
.article-prose table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:860px){.article-prose table{min-width:0}.article-prose th,.article-prose td{min-width:7.5em}}

/* ===== v2.28.0 記事のイラスト・図解（文字ばかりで読みづらい→目で追える形に） ===== */
.article-prose .sweb-illust{margin:28px 0 32px}
.article-prose .sweb-illust img{display:block;width:100%;height:auto;border-radius:12px;border:2px solid var(--ink)}
.article-prose .sweb-fig{margin:36px 0;padding:24px;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--blue)}
.article-prose .sweb-fig-title{margin:0 0 16px!important;font-weight:900;font-size:1.125rem;line-height:1.5;padding-left:12px;border-left:6px solid var(--cta)}
.article-prose .sweb-fig-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.article-prose .sweb-fig-list li{margin:0;padding:14px 16px;background:var(--pale);border-radius:8px;display:grid;gap:4px;position:relative;line-height:1.6}
.article-prose .sweb-fig-list li strong{color:var(--ink);font-size:1.0625rem}
.article-prose .sweb-fig-list li span{color:var(--ink-2);font-size:.9375rem}
/* 手順・流れ：番号の丸＋下向きの矢印 */
.article-prose .sweb-fig-steps,.article-prose .sweb-fig-flow{counter-reset:sf}
.article-prose .sweb-fig-steps li,.article-prose .sweb-fig-flow li{counter-increment:sf;padding-left:62px;min-height:56px}
.article-prose .sweb-fig-steps li::before,.article-prose .sweb-fig-flow li::before{content:counter(sf);position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;display:grid;place-items:center}
.article-prose .sweb-fig-steps li:not(:last-child)::after,.article-prose .sweb-fig-flow li:not(:last-child)::after{content:"";position:absolute;left:28px;bottom:-12px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--blue);z-index:1}
.article-prose .sweb-fig-flow li::before{background:var(--ink);color:var(--cta)}
/* チェック：黄色のチェック */
.article-prose .sweb-fig-check li{padding-left:56px}
.article-prose .sweb-fig-check li::before{content:"✓";position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:6px;background:var(--cta);border:2px solid var(--ink);color:var(--ink);font-weight:900;display:grid;place-items:center;font-size:.95rem}
/* 比較：左＝いま（灰）→右＝こうする（青） */
.article-prose .sweb-fig-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.article-prose .sweb-fig-side{border-radius:8px;padding:16px}
.article-prose .sweb-fig-side.is-before{background:var(--pale);border:2px dashed #b9b3a4}
.article-prose .sweb-fig-side.is-after{background:#eef3ff;border:2px solid var(--blue)}
.article-prose .sweb-fig-label{margin:0 0 8px!important;font-weight:900;display:inline-block;padding:2px 10px;border-radius:999px;font-size:.875rem}
.article-prose .is-before .sweb-fig-label{background:#e4e0d6;color:var(--ink)}
.article-prose .is-after .sweb-fig-label{background:var(--blue);color:#fff}
.article-prose .sweb-fig-side ul{margin:0;padding-left:1.2em}
.article-prose .sweb-fig-side li{margin:6px 0;line-height:1.6;font-size:.9375rem}
.article-prose .sweb-fig-vs{align-self:center;font-size:1.6rem;font-weight:900;color:var(--blue)}
@media(max-width:640px){
  .article-prose .sweb-fig{padding:18px;box-shadow:4px 4px 0 var(--blue)}
  .article-prose .sweb-fig-compare{grid-template-columns:1fr}
  .article-prose .sweb-fig-vs{justify-self:center;transform:rotate(90deg)}
}
.article-prose .sweb-fig-vs{display:block;line-height:1;text-align:center}
@media(max-width:640px){.article-prose .sweb-fig-vs{width:1.6rem;margin:-2px auto;transform:rotate(90deg)}}

/* ---- オプションメニュー（2026-10-06 v2.29.0） ---- */
.sweb-opt-lead{max-width:760px;margin:18px 0 0;color:var(--ink-2)}
.sweb-opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:12px}
.sweb-opt-card{background:#fff;border:3px solid var(--ink);border-radius:6px;padding:28px 24px 22px;display:flex;flex-direction:column;min-width:0}
.sweb-opt-title{font-weight:700;font-size:1.2rem;margin:0}
.sweb-opt-tag{display:inline-block;font-style:normal;font-size:.75rem;font-weight:900;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;margin-left:6px;vertical-align:3px}
.sweb-opt-card .price{min-height:0;margin-top:10px}
.sweb-opt-desc{border-top:1px solid var(--line);padding-top:18px;font-size:.9375rem}
.sweb-opt-card .clean-list{flex:1;margin-bottom:22px}
.sweb-opt-card .clean-list li{font-size:.9375rem}
.sweb-opt-card .button{font-size:.875rem;padding-inline:15px}
.sweb-opt-small{font-size:.75rem;margin:-10px 0 14px}
.sweb-opt-notes{margin-top:22px}
.sweb-opt-link{margin:22px 0 0;font-size:.9375rem}
.sweb-opt-link a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--blue)}
.sweb-opt-link strong{color:var(--blue)}
@media(max-width:720px){.sweb-opt-grid{grid-template-columns:1fr}}

/* ===== v2.30.0 全ページの読みやすさ点検（2026-10-07 山田さん指摘） ===== */
/* 文節で改行する（BudouXが動かない環境でもChromeは auto-phrase で同じ効果） */
budoux-ja{display:contents}
h1,h2,h3{word-break:auto-phrase}
p,li{text-wrap:pretty}

/* 最終CTA：黄緑の面に黄色いボタンだと見分けがつかない → 黒いボタンに */
.closing .button,.closing .button.light{background:var(--ink)!important;color:#fff!important;border:2px solid var(--ink)!important;box-shadow:0 4px 0 rgba(16,20,24,.25)}
.closing .button:hover,.closing .button.light:hover{background:#2a323b!important;color:#fff!important}
.closing .button span{color:var(--lime)!important}

/* 小さすぎる文字を12px以上に */
.ba{font-size:.75rem!important}
.ba-cap{font-size:.75rem!important}
.rec-plan,.rec-table thead th,.rec-table .u{font-size:.75rem}
.plan-budget{font-size:.75rem}
.sweb-opt-small{font-size:.8125rem}

/* 実績：単位は数字の横に（ピルに入れない） */
.cd-metrics strong .cd-unit{font-size:.8125rem;font-weight:700;color:var(--muted);margin-left:2px}
.cd-metrics p{font-size:.8125rem}

/* カードのすぐ下の注記が詰まっている */
.rec-dots + .note,.case-detail + .note,.honest-grid + .note,.case-grid + .note,.monitor-grid + .note,.diagnosis-grid + .note{margin-top:24px}
.cd-small{margin-top:14px}

/* 料金ページ：ページ見出しと同じ見出しが2回続くので、下の1つを隠す */
.page-id-10 #pricing .section-heading > .eyebrow,.page-id-10 #pricing .section-heading > h2{display:none}
.page-id-10 #pricing{padding-top:24px}
/* 「ご契約の前に」がすぐ上の黒い枠に貼り付いている */
.pricing-extra{padding-top:clamp(48px,6vw,72px)}

@media(max-width:600px){
  /* 番号つきの説明（01〜04）は2列だと1行6〜7文字で読みにくい → 1列に */
  .diagnosis-grid{grid-template-columns:1fr!important;gap:18px!important}
  .diagnosis-grid h3{margin-top:8px!important}
  /* 料金カード：タイトルと金額の間の大きな空白をなくす */
  .plan .price{min-height:0;margin-top:14px}
  /* 実績カードの表：項目名が1文字ずつ折れないように */
  .rec-table{table-layout:fixed}
  .rec-table th:first-child{width:42%}
  .rec-table th:nth-child(2){width:24%}
  .rec-table thead th{white-space:normal;vertical-align:bottom}
  .rec-table tbody th{white-space:normal;font-size:.8125rem;line-height:1.5}
  .rec-table th,.rec-table td{padding:9px 4px}
  .rec-table tbody td{font-size:.8125rem;white-space:nowrap}
  /* 記事の表：3列が細くなりすぎる */
  .article-prose table{font-size:.875rem}
  .article-prose th,.article-prose td{padding:10px 8px!important;line-height:1.7}
}
/* v2.30.1 小さいラベルを12px以上に・スライドの点を見やすく押しやすく */
@media(max-width:860px){.eyebrow{font-size:.75rem}}
.fig-step,.rec-tag,.optional,.required,.report-paper .tag,.report-paper span[class*=tag]{font-size:.75rem!important}
.dot-b{background:#a8a08d;padding:10px 0;background-clip:content-box;height:26px!important;box-sizing:border-box}
.rec-dots .dot-b,.fig-dots .dot-b{height:25px!important}
.dot-b.is-on{background-clip:content-box}
/* v2.30.3 実績カード：BEFORE/AFTERを折らない・カード名を1行に収める */
.ba{white-space:nowrap}
@media(max-width:600px){.rec-head b{font-size:.9375rem;letter-spacing:0}}
/* ---- 代理店ページのヒーロー図（2026-10-07 v2.31.1） ---- */
.pv-label{fill:#c3d5ff;font-family:var(--font);font-size:12px;letter-spacing:.08em}
.pv-name{fill:var(--ink);font-family:var(--font);font-size:15px;font-weight:900}
.pv-sub{fill:#5f6873;font-family:var(--font);font-size:11px;font-weight:700}
.pv-pill{fill:var(--ink);font-family:var(--font);font-size:11px;font-weight:900}
.pv-back{opacity:0;transform:translate(14px,10px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.18));animation:pv-in .8s ease 1.5s forwards}
@keyframes pv-in{to{opacity:1;transform:none}}
.pv-write{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:pv-write 3.6s ease-in-out infinite;animation-delay:calc(2.2s + var(--i) * .5s)}
@keyframes pv-write{0%{transform:scaleX(0)}55%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.pv-gear{animation:pv-spin 6s linear infinite}
.pv-gear>*{transform-box:view-box}
@keyframes pv-spin{to{transform:translate(326px,246px) rotate(360deg)}}
.pv-gear{transform:translate(326px,246px)}
.pv-flowline{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:4 6}
.pv-dot{opacity:0;animation:sweb-pop .3s ease 2.2s forwards}
@media(prefers-reduced-motion:reduce){
  .pv-back{opacity:1;transform:none;animation:none}
  .pv-write{transform:scaleX(1);animation:none}
  .pv-gear{animation:none}
  .pv-dot{display:none}
}
.pv-name-s{font-size:13px}
/* ---- 協業のご相談・代理店募集への導線（2026-10-07 v2.32.0） ---- */
.sweb-partner-link{margin-top:14px}
.partner-band{background:var(--ink);padding:22px 0}
.partner-band a{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;color:#fff;text-decoration:none}
.partner-band-tag{background:var(--lime);color:var(--ink);font-weight:900;font-size:.8125rem;border-radius:999px;padding:4px 14px}
.partner-band-text{color:#dfe5ee;font-size:.9375rem;flex:1;min-width:240px}
.partner-band-go{color:var(--lime);font-weight:900;font-size:.9375rem;white-space:nowrap}
.partner-band a:hover .partner-band-go{text-decoration:underline}