@charset "utf-8";
/* =====================================================================
   アット採用 サービスサイト — Design System
   "NEO-BRUTALIST EDITORIAL"
   warm paper × ink-black borders × hard offset shadows × blue/orange blocks
   とがった・力強い・雑誌的。だが明るく信頼できる。
   ===================================================================== */

:root{
  --blue:        #1769c0;
  --blue-deep:   #0e4f96;
  --orange:      #f5821e;
  --orange-deep: #df6c05;
  --paper:       #f7f3ea;   /* warm off-white base */
  --paper-2:     #efe9da;
  --ink:         #14161b;   /* near-black for borders/text */
  --ink-soft:    #44484f;
  --ink-faint:   #7b8088;
  --white:       #ffffff;
  --line:        #14161b;
  --yellow:      #ffd23f;   /* sticker highlight */

  --maxw: 1180px;
  --pad: clamp(18px, 4.5vw, 52px);

  --bd:   1.5px solid var(--ink);
  --bd-3: 2px solid var(--ink);
  --hard:    4px 4px 0 var(--ink);
  --hard-sm: 2.5px 2.5px 0 var(--ink);
  --hard-lg: 6px 6px 0 var(--ink);
  --hard-bl: 4px 4px 0 var(--blue);
  --hard-or: 4px 4px 0 var(--orange);

  --ff-jp:  "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --ff-mono:"DM Mono","SFMono-Regular",ui-monospace,monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--ff-jp); font-weight:500;
  background:var(--paper); color:var(--ink);
  line-height:1.85; letter-spacing:.01em; font-feature-settings:"palt" 1;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ font-weight:900; line-height:1.24; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--orange); color:#fff; }

.lp p,.lp li,.lp dd,.lp dt,.lp td,.lp th,.lp summary,.lp label{ font-size:1rem; }
.lp small{ font-size:14px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.lp{ position:relative; }
.section{ padding-block:clamp(60px,8vw,108px); position:relative; }
.section + .section{ border-top:var(--bd-3); }
.section--blue{ background:var(--blue); color:#fff; }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:var(--paper); }

/* mono kicker (旧 eyebrow) */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--ff-mono); font-weight:500; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow); border:var(--bd);
  padding:.45em 1em; box-shadow:var(--hard-sm); margin:0 0 1.4rem;
}
.eyebrow.is-blue{ background:#fff; color:var(--blue-deep); }
.section--blue .eyebrow{ background:var(--orange); color:#fff; border-color:#fff; box-shadow:4px 4px 0 #fff; }
.eyebrow .dot{ width:7px; height:7px; background:var(--orange); }
.eyebrow.is-blue .dot{ background:var(--blue); }

.s-head{ font-size:clamp(1.8rem,4.6vw,3.05rem); line-height:1.18; letter-spacing:-.02em; color:var(--ink); margin:0 0 1.2rem; }
.section--blue .s-head{ color:#fff; }
.s-head .b{ color:var(--blue); }
.s-head .o{ color:var(--orange); }
.s-head .mark{ background:var(--yellow); box-shadow:0 0 0 2px var(--yellow); padding:0 .06em; }
.section--blue .s-head .mark{ color:var(--ink); }
.s-lead{ font-size:clamp(1rem,1.4vw,1.1rem); line-height:2; color:var(--ink-soft); max-width:62ch; font-weight:500; }
.section--blue .s-lead{ color:rgba(255,255,255,.92); }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .s-lead{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:58px; padding:0 1.9em; border:var(--bd-3); border-radius:2px;
  background:var(--orange); color:#fff;
  font-weight:900; font-size:1.02rem; letter-spacing:.01em; cursor:pointer;
  box-shadow:var(--hard); transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .2s;
}
.btn .ar{ transition:transform .2s var(--ease); }
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--orange-deep); }
.btn:hover .ar{ transform:translateX(4px); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn--blue{ background:var(--blue); } .btn--blue:hover{ background:var(--blue-deep); }
.btn--line{ background:#06c755; color:#fff; }
.btn--line:hover{ background:#05b34c; }
.btn--line .li{ width:1.25em; height:1.25em; flex:none; }
.btn--ghost{ background:#fff; color:var(--ink); }
.btn--ghost:hover{ background:var(--yellow); }
.btn--lg{ min-height:66px; font-size:1.1rem; padding:0 2.3em; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.center .btn-row{ justify-content:center; }
.section--blue .btn--ghost{ border-color:#fff; box-shadow:6px 6px 0 rgba(0,0,0,.35); }

/* ---------- header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:60; height:74px; display:flex; align-items:center;
  background:var(--paper); border-bottom:var(--bd-3);
  transition:height .3s var(--ease);
}
.site-head.is-scrolled{ height:64px; }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:40px; width:auto; transition:height .3s var(--ease); }
.is-scrolled .brand img{ height:34px; }
.nav{ display:flex; align-items:center; gap:24px; }
.nav a.navlink{ position:relative; font-family:var(--ff-mono); font-size:.85rem; font-weight:500; letter-spacing:.02em; color:var(--ink); padding:.2em 0; }
.nav a.navlink::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a.navlink:hover::after{ transform:scaleX(1); }
.head-cta{ display:flex; align-items:center; gap:14px; }
.head-tel{ font-family:var(--ff-mono); font-weight:500; color:var(--blue-deep); font-size:1.05rem; letter-spacing:.01em; white-space:nowrap; line-height:1.1; }
.head-tel span{ display:block; font-size:.6rem; color:var(--ink-faint); letter-spacing:.06em; }
.head-cta .btn{ min-height:46px; padding:0 1.2em; font-size:.92rem; box-shadow:var(--hard-sm); }
.head-cta .btn:hover{ box-shadow:2px 2px 0 var(--ink); }
.nav-toggle{ display:none; }
@media (max-width:980px){
  .nav,.head-tel{ display:none; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; width:48px; height:48px; align-items:center; justify-content:center; background:var(--yellow); border:var(--bd); box-shadow:var(--hard-sm); cursor:pointer; }
  .nav-toggle span{ width:20px; height:2.5px; background:var(--ink); transition:.3s var(--ease); }
  .mobile-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-open .nav-toggle span:nth-child(2){ opacity:0; }
  .mobile-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
.mnav{ position:fixed; inset:0; z-index:55; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:2px; padding:90px var(--pad) 40px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.mobile-open .mnav{ opacity:1; visibility:visible; }
.mnav a{ font-size:1.42rem; font-weight:900; color:var(--ink); padding:.5em 0; border-bottom:var(--bd); }
.mnav a .en{ font-family:var(--ff-mono); font-weight:500; color:var(--orange-deep); font-size:.56em; margin-left:.7em; }
.mnav .btn{ margin-top:26px; }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:120px 0 72px; overflow:hidden; }
.hero::before{ /* faint grid */
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--paper-2) 1px,transparent 1px),linear-gradient(90deg,var(--paper-2) 1px,transparent 1px);
  background-size:46px 46px; mask:linear-gradient(180deg,#000,transparent 88%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:46px; align-items:center; }
.hero__badge{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-mono); font-weight:500; font-size:.86rem; color:var(--ink);
  background:#fff; border:var(--bd); box-shadow:var(--hard-sm); padding:.5em 1em; margin-bottom:1.6rem; transform:rotate(-1.5deg); }
.hero__badge .d{ width:9px; height:9px; background:var(--orange); }
.hero__eyebrow{ font-size:clamp(.95rem,1.4vw,1.12rem); font-weight:700; line-height:1.7; color:var(--ink); margin:0 0 1.1rem;
  padding-left:.85em; border-left:4px solid var(--orange); }
.hero h1{ font-size:clamp(2.3rem,6.3vw,4.5rem); line-height:1.12; letter-spacing:-.03em; color:var(--ink); margin:0 0 1.5rem; }
.hero h1 .o{ color:var(--orange); } .hero h1 .b{ color:var(--blue); }
.hero h1 .u{ background:var(--yellow); box-shadow:0 0 0 3px var(--yellow); }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.16rem); color:var(--ink-soft); line-height:2; margin:0 0 2rem; max-width:40ch; font-weight:500; }
.hero__meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__chip{ display:inline-flex; align-items:center; gap:.5em; font-size:.88rem; font-weight:700; color:var(--ink);
  background:#fff; border:var(--bd); padding:.45em .95em; box-shadow:var(--hard-sm); }
.hero__chip svg{ width:18px; height:18px; }

.hero__art{ position:relative; }
.hero__art .blob{ position:absolute; inset:18px -10px -16px 22px; background:var(--orange); border:var(--bd-3); z-index:0; }
.hero__art .card{ position:relative; z-index:2; background:#fff; border:var(--bd-3); box-shadow:var(--hard-lg); padding:18px; }
.hero__art .card svg{ width:100%; height:auto; }

.hero .anim{ opacity:0; transform:translateY(20px); animation:rise .8s var(--ease) forwards; }
.hero .anim.a1{ animation-delay:.04s } .hero .anim.a2{ animation-delay:.14s } .hero .anim.a3{ animation-delay:.26s } .hero .anim.a4{ animation-delay:.4s } .hero .anim.a5{ animation-delay:.54s }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hero .anim{ animation:none; opacity:1; transform:none; } }

/* ---------- marquee ---------- */
.marquee{ background:var(--ink); color:var(--paper); border-block:var(--bd-3); overflow:hidden; }
.marquee__track{ display:flex; gap:0; white-space:nowrap; animation:scroll 24s linear infinite; }
.marquee__track span{ font-family:var(--ff-mono); font-weight:500; font-size:1rem; letter-spacing:.04em; padding:14px 0; }
.marquee__track span::after{ content:"／"; color:var(--orange); margin:0 1.4em; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }

/* ---------- pain before/after ---------- */
.pains{ display:grid; gap:24px; margin-top:48px; }
.pain{ display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; }
.pain__card{ position:relative; padding:30px 26px; border:var(--bd-3); background:#fff; box-shadow:var(--hard); }
.pain__card.is-before{ background:var(--paper-2); }
.pain__card.is-after{ background:#fff; box-shadow:var(--hard-bl); }
.pain__label{ display:inline-block; font-family:var(--ff-mono); font-weight:500; font-size:.74rem; letter-spacing:.08em; padding:.25em .9em; border:var(--bd); margin-bottom:1em; }
.is-before .pain__label{ color:var(--ink); background:var(--paper); }
.is-after .pain__label{ color:#fff; background:var(--orange); border-color:var(--ink); }
.pain__ic{ width:52px; height:52px; margin-bottom:.4em; }
.pain__card h3{ font-size:1.18rem; color:var(--ink); margin:.2em 0 .55em; line-height:1.4; }
.pain__card p{ font-size:.95rem; color:var(--ink-soft); line-height:1.9; font-weight:500; }
.pain__mid{ display:flex; align-items:center; justify-content:center; }
.pain__mid .arrow{ width:48px; height:48px; display:grid; place-items:center; background:var(--orange); color:#fff; border:var(--bd-3); box-shadow:var(--hard-sm); font-size:1.2rem; font-weight:900; }

/* ---------- flow (4 steps) ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.flow__item{ position:relative; background:#fff; border:var(--bd-3); box-shadow:var(--hard); padding:26px 22px 28px; transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.flow__item:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.flow__num{ font-family:var(--ff-mono); font-weight:500; font-size:.82rem; letter-spacing:.08em; color:#fff; background:var(--ink); display:inline-block; padding:.2em .7em; }
.flow__ic{ width:80px; height:80px; margin:14px 0 10px; }
.flow__item h3{ font-size:1.24rem; color:var(--ink); margin-bottom:.4em; }
.flow__item p{ font-size:.92rem; color:var(--ink-soft); line-height:1.85; font-weight:500; }
.flow__item .tag{ display:inline-block; margin-top:1em; font-family:var(--ff-mono); font-size:.76rem; font-weight:500; color:var(--orange-deep); border:var(--bd); padding:.25em .8em; }
.flow__item::after{ content:""; position:absolute; right:-14px; top:42px; width:26px; height:26px; z-index:3;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>"); }
.flow__item:last-child::after{ display:none; }

/* ---------- tools (3 cards) ---------- */
.tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.tool{ background:#fff; border:var(--bd-3); box-shadow:var(--hard); padding:32px 26px; transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.tool:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.tool__ic{ width:70px; height:70px; margin-bottom:14px; border:var(--bd); padding:8px; background:var(--paper); }
.tool h3{ font-size:1.26rem; color:var(--ink); margin-bottom:.45em; }
.tool p{ font-size:.94rem; color:var(--ink-soft); line-height:1.9; font-weight:500; }
.tool__no{ font-family:var(--ff-mono); font-weight:500; color:var(--orange-deep); font-size:.8rem; letter-spacing:.08em; }
.section--blue .tool{ background:#fff; }

/* ---------- plans ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:var(--bd-3); box-shadow:var(--hard); padding:32px 26px; transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.plan:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.plan.is-reco{ background:var(--blue); color:#fff; box-shadow:var(--hard-or); }
.plan.is-reco .plan__name,.plan.is-reco .plan__price b{ color:#fff; }
.plan.is-reco .plan__catch,.plan.is-reco .plan__price .u,.plan.is-reco .plan__split{ color:rgba(255,255,255,.9); }
.plan.is-reco .plan__price{ border-top-color:rgba(255,255,255,.4); }
.plan.is-reco .plan__split .g{ color:var(--yellow); }
.plan__badge{ position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-2deg); background:var(--orange); color:#fff; border:var(--bd); box-shadow:var(--hard-sm); font-weight:900; font-size:.84rem; padding:.35em 1.1em; white-space:nowrap; }
.plan__name{ font-family:var(--ff-mono); font-weight:500; font-size:1.35rem; color:var(--blue-deep); letter-spacing:.02em; }
.plan__catch{ font-size:.92rem; color:var(--ink-soft); min-height:3.2em; margin:.4em 0 1.1em; line-height:1.75; font-weight:500; }
.plan__price{ border-top:var(--bd); padding-top:1.1em; color:var(--ink); }
.plan__price b{ font-family:var(--ff-mono); font-weight:500; font-size:2.7rem; color:var(--ink); line-height:1; }
.plan__price .u{ font-size:.9rem; color:var(--ink-soft); }
.plan__split{ margin-top:.9em; font-size:.89rem; color:var(--ink-soft); line-height:1.8; font-weight:500; }
.plan__split .g{ color:var(--orange-deep); font-weight:900; }

/* ---------- cases / photo cards ---------- */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.case{ display:flex; flex-direction:column; background:#fff; border:var(--bd-3); box-shadow:var(--hard); overflow:hidden; transition:transform .14s var(--ease), box-shadow .14s var(--ease); }
.case:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.case__photo{ position:relative; aspect-ratio:16/10; background:var(--paper-2); border-bottom:var(--bd-3); overflow:hidden; }
.case__photo img{ width:100%; height:100%; object-fit:cover; }
.case__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; color:var(--blue-deep); }
.case__ph svg{ width:38px; height:38px; }
.case__ph span{ font-family:var(--ff-mono); font-size:.78rem; }
.case__badge{ position:absolute; top:12px; left:12px; z-index:2; background:var(--ink); color:#fff; font-family:var(--ff-mono); font-weight:500; font-size:.76rem; padding:.3em .9em; }
.case__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:.5em; flex:1; }
.case__meta{ font-family:var(--ff-mono); font-size:.82rem; color:var(--orange-deep); font-weight:500; }
.case__title{ font-size:1.14rem; color:var(--ink); line-height:1.5; font-weight:900; }
.case__stats{ display:flex; gap:14px; margin:.4em 0; }
.case__stat{ border:var(--bd); padding:.5em .7em; flex:1; }
.case__stat .n{ font-family:var(--ff-mono); font-weight:500; font-size:1.3rem; color:var(--orange-deep); line-height:1; }
.case__stat .l{ font-size:.74rem; color:var(--ink-faint); margin-top:.4em; }
.case__voice{ font-size:.9rem; color:var(--ink-soft); line-height:1.85; border-top:var(--bd); padding-top:.85em; margin-top:auto; font-weight:500; }

/* ---------- faq ---------- */
.faq{ max-width:840px; margin:48px auto 0; display:grid; gap:16px; }
.faq-item{ background:#fff; border:var(--bd-3); box-shadow:var(--hard-sm); overflow:hidden; transition:box-shadow .14s, transform .14s; }
.faq-item[open]{ box-shadow:var(--hard); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.7em; padding:1.15em 3em 1.15em 1.3em; position:relative; font-weight:900; font-size:1.04rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q{ font-family:var(--ff-mono); font-weight:500; color:var(--orange-deep); flex:0 0 auto; }
.faq-item summary::after{ content:"+"; position:absolute; right:.9em; top:50%; transform:translateY(-50%); font-family:var(--ff-mono); font-size:1.5rem; color:var(--blue); transition:transform .25s var(--ease); }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(135deg); }
.faq-item .a{ padding:0 1.4em 1.3em 2.7em; color:var(--ink-soft); font-size:.96rem; line-height:1.95; font-weight:500; }

/* ---------- final CTA ---------- */
.final{ position:relative; overflow:hidden; padding-block:clamp(60px,8vw,108px); background:var(--orange); color:var(--ink); border-top:var(--bd-3); }
.final::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.18;
  background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px); background-size:40px 40px; }
.final .wrap{ position:relative; z-index:2; text-align:center; }
.final h2{ color:var(--ink); font-size:clamp(1.9rem,4.8vw,3.1rem); margin-bottom:1rem; letter-spacing:-.02em; }
.final h2 .o{ color:#fff; -webkit-text-stroke:1.5px var(--ink); }
.final p{ color:var(--ink); max-width:52ch; margin:0 auto 2.1rem; line-height:1.95; font-weight:500; }
.final .btn--ghost{ background:#fff; color:var(--ink); }
.final .btn{ box-shadow:var(--hard); }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:var(--paper); padding:58px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.3fr; gap:40px; }
.foot-brand img{ height:42px; width:auto; margin-bottom:1.1em; background:var(--paper); padding:6px 10px; }
.foot-brand p{ color:rgba(247,243,234,.75); font-size:.92rem; line-height:1.95; max-width:34ch; }
.foot-col h4{ font-family:var(--ff-mono); font-weight:500; color:var(--orange); font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1em; }
.foot-col a,.foot-col p{ display:block; color:rgba(247,243,234,.75); font-size:.92rem; padding:.3em 0; transition:color .2s; }
.foot-col a:hover{ color:var(--orange); }
.foot-tel{ font-family:var(--ff-mono); font-weight:500; font-size:1.4rem; color:#fff !important; }
.foot-addr{ font-size:.85rem !important; line-height:1.8; }
.foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(247,243,234,.18); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.foot-bottom small{ color:rgba(247,243,234,.5); font-family:var(--ff-mono); }
.foot-bottom .links{ display:flex; gap:18px; }
.foot-bottom .links a{ color:rgba(247,243,234,.6); font-size:.85rem; }
.foot-bottom .links a:hover{ color:var(--orange); }

/* ---------- floating LINE button ---------- */
.line-fab{ position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:72px; height:72px; border-radius:50%; background:#06c755; color:#fff;
  border:var(--bd-3); box-shadow:var(--hard); text-decoration:none;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .2s; }
.line-fab:hover{ background:#05b34c; transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.line-fab:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.line-fab__ic{ width:26px; height:26px; }
.line-fab__tx{ font-size:.62rem; font-weight:900; line-height:1.05; text-align:center; letter-spacing:.02em; }
@media (max-width:680px){
  .line-fab{ right:14px; bottom:14px; width:62px; height:62px; }
  .line-fab__ic{ width:23px; height:23px; }
  .line-fab__tx{ font-size:.56rem; }
}

/* ---------- breadcrumb + page hero (下層共通) ---------- */
.crumb{ padding-top:100px; }
.crumb ol{ display:flex; flex-wrap:wrap; gap:.5em; font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-faint); }
.crumb li::after{ content:"/"; margin-left:.5em; color:var(--ink-faint); }
.crumb li:last-child::after{ display:none; }
.crumb a:hover{ color:var(--orange-deep); }
.phead{ padding:38px 0 52px; }
.phead h1{ font-size:clamp(2rem,5.4vw,3.4rem); color:var(--ink); line-height:1.18; letter-spacing:-.02em; }
.phead h1 .o{ color:var(--orange); } .phead h1 .b{ color:var(--blue); }
.phead p{ color:var(--ink-soft); margin-top:1.1rem; max-width:60ch; line-height:1.95; font-weight:500; }

/* ---------- misc ---------- */
.tentative{ font-size:14px; color:var(--orange-deep); }
.note{ font-size:14px; color:var(--ink-faint); }
.section--blue .note{ color:rgba(255,255,255,.8); }
.mt-s{ margin-top:1.2rem } .mt-m{ margin-top:2.2rem } .mt-l{ margin-top:3.2rem }
.sp-br{ display:none } @media (max-width:680px){ .sp-br{ display:inline } }

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:30px; }
  .hero__art{ max-width:440px; margin-inline:auto; order:-1; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow__item:nth-child(2)::after{ display:none; }
  .tools,.plans,.cases{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; }
}
@media (max-width:680px){
  .flow{ grid-template-columns:1fr; }
  .flow__item::after{ content:""; right:auto; left:34px; top:auto; bottom:-15px; transform:rotate(90deg); }
  .pain{ grid-template-columns:1fr; }
  .pain__mid{ transform:rotate(90deg); margin:-6px 0; }
  .foot-grid{ grid-template-columns:1fr; }
}