/* AIロコモ検診 LP  style.css  (seek-force.com/locomo-screening/) */
:root{
  --green:#2E7D32;
  --green-d:#1F5E24;
  --green-l:#7CB342;
  --pale:#F3F6E7;
  --pale2:#F8FAF0;
  --pink:#FDF1F1;
  --ink:#24302A;
  --sub:#5B6660;
  --line:#E3E8DC;
  --w:1120px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;color:var(--ink);background:#fff;line-height:1.8;font-size:15px;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
em{font-style:normal;color:var(--green);}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── header ── */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(20px,calc((100% - var(--w))/2));}
.brand img{height:40px;width:auto;}
header nav{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:500;}
header nav a:hover{color:var(--green);}
.smallbtn{background:var(--green);color:#fff!important;padding:8px 16px;border-radius:4px;font-weight:700;}
.smallbtn:hover{background:var(--green-d);}

/* ── hero ── */
.hero-full{max-width:var(--w);margin:0 auto;}
.hero-full-picture img{width:100%;height:auto;}
.hero-summary{max-width:var(--w);margin:0 auto;padding:24px 20px 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;}
.hero-summary p{font-size:13px;color:var(--sub);line-height:1.9;}
.hero-summary small{display:block;font-size:11px;color:#8A938D;margin-top:6px;}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-radius:4px;font-weight:700;font-size:14px;transition:.2s;}
.btn.secondary{border:1.5px solid var(--green);color:var(--green);background:#fff;width:100%;max-width:380px;}
.btn.secondary:hover{background:var(--green);color:#fff;}
.audience-band{background:var(--pale);display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:16px 20px;font-size:13px;font-weight:700;color:var(--green);max-width:var(--w);margin:0 auto;}

/* ── section 共通 ── */
.section{position:relative;max-width:var(--w);margin:0 auto;padding:72px 48px;}
.section.pale{background:var(--pale);}
.section.dark{background:var(--pink);}
.section-head{margin-bottom:36px;padding-right:120px;}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--green-d);margin-bottom:14px;}
.section h2,.contact h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.55;letter-spacing:.02em;}
.section-head > p:not(.eyebrow){margin-top:16px;font-size:14px;color:var(--sub);}
.section-mascot{position:absolute;top:48px;right:48px;width:96px;text-align:center;}
.section-mascot img{width:100%;}
.section-mascot figcaption,.contact figcaption{font-size:10px;color:var(--sub);margin-top:2px;}
.note{font-size:11px;color:#7C857F;margin-top:20px;line-height:1.8;}
h3{font-size:16px;font-weight:700;line-height:1.6;}
.illustration{width:100%;aspect-ratio:4/3;object-fit:cover;}
.clinical-photo{width:100%;aspect-ratio:16/9;object-fit:cover;}

/* ── 01 about ── */
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;}
.about-grid p{font-size:14px;color:var(--sub);margin-bottom:14px;}
.about-grid p.large{font-size:16px;color:var(--ink);font-weight:500;line-height:1.9;}
.tags{display:flex;gap:10px;margin-top:20px;}
.tags span{border:1px solid var(--line);color:var(--green);font-weight:700;font-size:13px;padding:6px 22px;border-radius:2px;background:#fff;}
.stat{background:var(--pale2);border:1px solid var(--line);padding:28px 24px;text-align:center;}
.stat p{font-size:12px!important;color:var(--sub);margin:0!important;}
.stat strong{display:block;font-size:44px;font-weight:900;color:var(--green);line-height:1.3;letter-spacing:.02em;}
.stat strong span{font-size:16px;margin-left:2px;}
.stat small{display:block;margin-top:14px;font-size:10px;color:#8A938D;line-height:1.7;text-align:left;}
.signs{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);}
.signs h3{margin-bottom:20px;}
.signs ul{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.signs li{border:1px solid var(--line);background:#fff;padding:12px;}
.signs li span{display:block;font-size:12px;font-weight:700;margin-top:8px;line-height:1.6;}

/* ── 02 why now ── */
.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.columns article{border-top:2px solid var(--green-l);padding-top:20px;}
.columns .illustration{background:#fff;}
.number{font-size:11px;font-weight:700;color:var(--green);margin:18px 0 6px;}
.columns h3{margin-bottom:10px;}
.columns article > p:last-child{font-size:13px;color:var(--sub);}

/* ── 03 solution ── */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.features article{border:1px solid var(--line);background:#fff;padding:20px 20px 24px;}
.card-photo{margin-bottom:18px;overflow:hidden;}
.feature-label{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--green);margin-bottom:6px;}
.features h3{margin-bottom:8px;}
.features article > p:not(.feature-label){font-size:13px;color:var(--sub);}
.features small{display:block;font-size:11px;color:#8A938D;margin-top:10px;line-height:1.7;}
.product-note{margin-top:32px;background:var(--pale);border-left:4px solid var(--green);padding:20px 24px;}
.product-note strong{display:block;font-size:14px;margin-bottom:6px;}
.product-note p{font-size:12px;color:var(--sub);}

/* ── 04 benefits ── */
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;}
.benefits article{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid #EFD9D9;}
.benefits article:nth-last-child(-n+2){border-bottom:none;}
.benefits span{font-size:26px;font-weight:300;color:var(--green);line-height:1.2;flex-shrink:0;}
.benefits h3{margin-bottom:8px;}
.benefits p{font-size:12.5px;color:var(--sub);}

/* ── 06 workflow ── */
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.workflow article{background:#fff;padding-bottom:20px;}
.workflow article > *:not(img){padding:0 16px;}
.workflow span{display:block;font-size:22px;font-weight:700;color:var(--green);margin-top:16px;}
.workflow .time{font-size:10px;color:var(--green);margin:2px 0 8px;}
.workflow h3{font-size:15px;margin-bottom:6px;}
.workflow article > p:last-child{font-size:12px;color:var(--sub);}

/* ── 07 intro ── */
.intro{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;counter-reset:step;}
.intro li{counter-increment:step;position:relative;border:1px solid var(--line);background:#fff;padding:22px 24px 22px 68px;}
.intro li::before{content:counter(step,decimal-leading-zero);position:absolute;left:24px;top:22px;font-size:16px;font-weight:700;color:var(--green);}
.intro b{display:block;font-size:15px;margin-bottom:4px;}
.intro p{font-size:12px;color:var(--sub);}

/* ── 08 contact ── */
.contact{max-width:var(--w);margin:0 auto;background:var(--pale);border-top:3px solid var(--green-l);padding:56px 48px 40px;display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center;}
.contact h2{margin-bottom:14px;}
.contact p{font-size:13px;color:var(--sub);}
.contact .buttons{margin:22px 0 28px;}
.contact .phone{font-size:13px;color:var(--ink);}
.contact .phone a{font-size:20px;font-weight:900;margin-left:6px;}
.contact figure{text-align:center;}

/* ── footer ── */
footer{max-width:var(--w);margin:0 auto;padding:32px 48px 40px;}
.footer-brand{font-size:13px;font-weight:700;}
.footer-brand span{display:block;font-size:10px;font-weight:400;color:var(--sub);}
.copyright{font-size:10px;color:#9AA29D;margin-top:12px;}
.mobile-cta{display:none;}

/* ══ タブレット（〜960px）══ */
@media (max-width:960px){
  .section{padding:64px 32px;}
  .section-mascot{right:28px;top:40px;width:80px;}
  .about-grid{grid-template-columns:1fr;gap:28px;}
  .stat{max-width:420px;}
  .signs ul{grid-template-columns:repeat(2,1fr);}
  .columns{grid-template-columns:repeat(3,1fr);gap:18px;}
  .workflow{grid-template-columns:repeat(2,1fr);gap:18px;}
  .benefits{gap:0 32px;}
  .contact{padding:48px 32px 36px;}
  footer{padding:28px 32px 96px;}
}

/* ══ スマホ（〜640px）══ */
@media (max-width:640px){
  body{font-size:14px;padding-bottom:64px;}
  header{padding:8px 16px;}
  .brand img{height:32px;}
  header nav a:not(.smallbtn){display:none;}
  .smallbtn{padding:7px 12px;font-size:12px;}
  .hero-summary{grid-template-columns:1fr;gap:16px;padding:20px 16px 24px;}
  .btn.secondary{max-width:none;}
  .audience-band{flex-direction:column;align-items:center;gap:4px;font-size:12px;}
  .section{padding:52px 18px;}
  .section-head{padding-right:76px;margin-bottom:28px;}
  .section-mascot{right:14px;top:40px;width:64px;}
  .section h2,.contact h2{font-size:21px;}
  .about-grid p.large{font-size:15px;}
  .stat{max-width:none;}
  .stat strong{font-size:38px;}
  .signs{margin-top:44px;padding-top:32px;}
  .signs ul{gap:10px;}
  .signs li{padding:8px;}
  .signs li span{font-size:11.5px;}
  .columns{grid-template-columns:1fr;gap:32px;}
  .features{grid-template-columns:1fr;gap:18px;}
  .benefits{grid-template-columns:1fr;}
  .benefits article,.benefits article:nth-last-child(2){border-bottom:1px solid #EFD9D9;}
  .benefits article:last-child{border-bottom:none;}
  .workflow{grid-template-columns:1fr 1fr;gap:12px;}
  .workflow article > *:not(img){padding:0 10px;}
  .workflow span{font-size:18px;margin-top:10px;}
  .workflow h3{font-size:13.5px;}
  .intro{grid-template-columns:1fr;gap:12px;}
  .intro li{padding:18px 18px 18px 58px;}
  .intro li::before{left:18px;top:18px;}
  .contact{grid-template-columns:1fr;padding:44px 18px 32px;gap:16px;}
  .contact figure{width:120px;margin:0 auto;}
  .contact .btn{font-size:13px;}
  footer{padding:24px 18px 24px;}
  .mobile-cta{display:flex;justify-content:center;align-items:center;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--green);color:#fff;font-weight:700;font-size:14px;padding:14px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
}
@media (max-width:640px){
  .columns .illustration{max-width:240px;margin:0 auto;}
}
@media (max-width:380px){
  .workflow{grid-template-columns:1fr;}
}