/* ===== tokens ===== */
:root{
  --deep:#388520;
  --green:#4a982f;
  --orange:#ff6a00;
  --orange-soft:#fff2e7;
  --yellow:#f7d875;
  --lime:#8bcf4f;
  --teal:#2f9d94;
  --light:#eef8e8;
  --bg:#f8fcf5;
  --ink:#252525;
  --sub:#6f786d;
  --line:#e6ebe3;
  --radius:20px;
  --shadow:0 8px 30px rgba(30,80,50,.06);
  --shadow-hi:0 14px 38px rgba(30,80,50,.12);
  --font:"Hiragino Maru Gothic ProN","Yu Gothic","YuGothic","BIZ UDPGothic","Meiryo",system-ui,sans-serif;
  --sec-pad:clamp(52px,4.8vw,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--ink);background:#fff;
  font-size:18px;line-height:1.85;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
.sp-br{display:none}

.container{width:min(1280px,calc(100% - 72px));margin-inline:auto}

/* ===== shared type ===== */
.sec-title{
  font-size:clamp(26px,2.4vw + 8px,42px);line-height:1.4;font-weight:800;
  text-align:center;letter-spacing:.01em;text-wrap:balance;
}
.sec-lead{text-align:center;color:var(--sub);margin-top:16px;font-size:clamp(16px,.6vw + 13px,20px)}
.eyebrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.eyebrow .num{
  font-size:clamp(34px,2vw + 18px,52px);font-weight:800;line-height:.9;
  color:var(--green);letter-spacing:-.01em;
}
.eyebrow-en{
  font-size:clamp(17px,.8vw + 13px,22px);font-weight:800;letter-spacing:.18em;color:var(--deep);
}
.eyebrow i{font-style:normal;font-size:15px;color:var(--sub);letter-spacing:.06em}
.eyebrow-center{text-align:center;font-size:16px;font-weight:700;letter-spacing:.14em;color:#8fbf6c}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:252px;height:58px;padding:0 32px;border-radius:999px;
  background:linear-gradient(100deg,#ff7f1f,var(--orange));color:#fff;
  font-size:18px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(255,106,0,.26);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn i{width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(255,106,0,.34)}
.btn--lg{height:66px;min-width:314px;font-size:19px}
.btn--solid img{width:26px}
.btn-center{display:flex;justify-content:center;margin-top:clamp(26px,2.6vw,40px)}

/* ===== header ===== */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid #e6ebe3;
}
.head-inner{height:78px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;letter-spacing:.02em}
.logo img{width:42px}
.logo img.logo-img{width:auto;height:58px}
.gnav{margin-left:auto;display:flex;gap:clamp(20px,2.2vw,38px)}
.gnav a{font-size:17px;font-weight:700;color:#4a5a44;padding:6px 0;border-bottom:2px solid transparent}
.gnav a:hover{color:var(--green);border-bottom-color:var(--green)}
.burger{display:none;width:46px;height:40px;border:1px solid var(--line);border-radius:10px;
  background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* ===== hero ===== */
.hero{background:linear-gradient(180deg,#ffffff 0%,#f3faec 100%);padding:clamp(32px,3.4vw,58px) 0 clamp(20px,2.4vw,34px)}
.hero-inner{display:grid;grid-template-columns:1fr .82fr;gap:clamp(30px,3.6vw,60px);align-items:center}
.hero-tag{
  display:inline-block;font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--green);
  background:var(--light);border-radius:999px;padding:6px 18px;margin-bottom:20px;
}
.hero h1{font-size:clamp(30px,3.5vw + 6px,58px);line-height:1.25;font-weight:800;letter-spacing:.005em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-lead{margin-top:32px;font-size:clamp(16px,.7vw + 13px,21px);line-height:1.9;color:#4a5a44}
.hero-art img{width:100%;border-radius:20px;box-shadow:0 18px 44px rgba(30,80,50,.14)}

/* ===== 3 entries (cards kept) ===== */
.entries{background:linear-gradient(180deg,#f3faec 0%,#f3faec 55%,#ffffff 100%);padding-bottom:clamp(36px,3.8vw,62px)}
.entries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.entry{
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:18px;align-content:start;min-height:214px;padding:26px 28px;background:#fff;
  border:1px solid #e6ebe3;border-radius:22px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi)}
.entry-ico{grid-row:1;width:56px;align-self:center}
.entry-name{grid-row:1;font-size:clamp(17px,.6vw + 12px,21px);font-weight:800;line-height:1.45;align-self:center;letter-spacing:.01em}
.entry-desc{grid-column:1 / -1;margin-top:14px;color:#4a5a44;
  font-size:clamp(16px,.5vw + 13px,19px);line-height:1.7;font-weight:500}
.entry-go{grid-column:1 / -1;display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;
  font-size:17px;font-weight:700;color:var(--deep)}
.entry-go i{width:7px;height:7px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:rotate(45deg)}
.entry--career{border-top:4px solid var(--lime)}
.entry--out{border-top:4px solid var(--green)}
.entry--emp{border-top:4px solid var(--teal)}
.entry--emp .entry-go i{border-color:var(--teal)}

/* ===== brand diagram (no cards) ===== */
.about{padding:var(--sec-pad) 0 clamp(40px,4vw,68px);background:#fff}
.tri{margin-top:clamp(26px,2.8vw,44px)}
.tri-heads{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.th-en{
  display:block;font-size:clamp(14px,.5vw + 11px,17px);font-weight:800;letter-spacing:.16em;
  line-height:1.1;
}
.th--career .th-en{color:var(--lime)}
.th--out .th-en{color:var(--green)}
.th--emp .th-en{color:var(--teal)}
.th b{display:block;font-size:clamp(20px,1.3vw + 13px,30px);font-weight:800;margin-top:10px;
  line-height:1.42;letter-spacing:.02em}
.th p{margin-top:10px;font-size:16px;color:var(--sub);line-height:1.7}
.tri-lines{width:100%;height:clamp(72px,7vw,120px);margin-top:6px}
.tri-hub{text-align:center;margin-top:-6px}
.tri-emblem{width:clamp(150px,14vw,220px);margin:0 auto}
.tri-hub-name{margin-top:14px;font-size:clamp(24px,1.6vw + 12px,36px);font-weight:800;
  letter-spacing:.16em;color:var(--deep)}

/* ===== feature sections ===== */
.feat{padding:var(--sec-pad) 0;background:#fff}
.feat--tint{background:#f8fcf5}
.feat-grid{display:grid;grid-template-columns:47% 1fr;gap:clamp(32px,3.6vw,60px);align-items:center}
.feat-title{font-size:clamp(25px,1.9vw + 10px,40px);line-height:1.36;font-weight:800;
  margin-top:16px;letter-spacing:.01em}
.feat-body{margin-top:20px;color:#546155;font-size:clamp(16px,.6vw + 13px,20px);line-height:1.95}
.feat-body b{color:var(--deep)}
.feat .btn{margin-top:clamp(26px,2.6vw,38px)}

/* step flow */
.steps{display:flex;align-items:flex-start;gap:8px;margin-top:clamp(26px,2.6vw,38px);flex-wrap:wrap}
.steps li{flex:1 1 0;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;padding-top:4px}
.steps li + li::before{content:"";position:absolute;left:-14px;top:26px;width:16px;height:16px;
  border-top:2px solid #9fd36d;border-right:2px solid #9fd36d;transform:rotate(45deg)}
.steps img{width:clamp(40px,3vw,52px)}
.steps span{font-size:16px;font-weight:700;color:#3b5a33;text-align:center;line-height:1.4}

/* point list */
.points{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px)}
.points li{display:flex;gap:18px;align-items:flex-start;padding-bottom:clamp(14px,1.4vw,20px);
  border-bottom:1px solid var(--line)}
.points li:last-child{border-bottom:0;padding-bottom:0}
.points img{width:clamp(38px,2.8vw,46px);flex:0 0 auto;margin-top:2px}
.points b{display:block;font-size:clamp(18px,.9vw + 13px,24px);font-weight:800;color:var(--deep)}
.points p{margin-top:6px;font-size:clamp(15px,.5vw + 13px,17px);line-height:1.8;color:var(--sub)}
.feat-art{width:min(100%,360px);aspect-ratio:1;object-fit:cover;border-radius:16px;
  box-shadow:0 12px 30px rgba(30,80,50,.10);margin:0 auto clamp(20px,2.4vw,32px)}

/* ===== 02 OUTSOURCE : big flow left, copy right ===== */
.out-grid{display:grid;grid-template-columns:44% 1fr;gap:clamp(34px,4vw,68px);align-items:center}
.out-flow{display:flex;flex-direction:column;gap:0}
.fnode{display:flex;align-items:center;gap:20px;padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);
  border:2px solid var(--line);border-radius:14px;background:#fff}
.fnode img{width:clamp(46px,3.6vw,60px);flex:0 0 auto}
.fnode b{display:block;font-size:clamp(18px,.9vw + 13px,23px);font-weight:800;color:var(--deep);letter-spacing:.02em}
.fnode span{display:block;font-size:15px;color:var(--sub);margin-top:2px}
.fnode--hub{background:linear-gradient(100deg,var(--light),#f8fcf5);border-color:#cce9ad}
.fbar{height:clamp(26px,2.4vw,38px);display:flex;justify-content:center}
.fbar span{position:relative;width:4px;background:#cfe3bb}
.fbar span::after{content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  border:8px solid transparent;border-top:11px solid #9fd36d}

/* 02 merits (cards kept) */
.merits{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,1.8vw,26px);
  margin-top:clamp(34px,3.4vw,52px)}
.merit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,26px);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.merit-card h3{font-size:clamp(18px,.9vw + 13px,23px);font-weight:800;color:var(--deep);text-align:center}
.merit-card ul{margin:16px 0 clamp(16px,1.6vw,22px);display:flex;flex-direction:column;gap:10px}
.merit-card li{display:flex;align-items:center;gap:10px;font-size:clamp(15px,.6vw + 13px,19px);
  font-weight:700;color:#3b5a33}
.merit-card li img{width:20px;flex:0 0 auto}
.merit-art{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 32%;
  border-radius:12px;margin-top:auto}

/* ===== 03 EMPLOY : full-width copy, then flow ===== */
.emp-head{max-width:820px}
.emp-title{font-size:clamp(27px,2.4vw + 10px,48px);line-height:1.3;font-weight:800;
  margin-top:16px;letter-spacing:.01em}
.emp-body{max-width:680px}
.steps--wide{margin-top:clamp(38px,3.8vw,58px);gap:14px;max-width:1020px;margin-inline:auto}
.steps--wide img{width:clamp(48px,3.8vw,70px)}
.steps--wide span{font-size:clamp(15px,.6vw + 12px,19px)}
.steps--wide li + li::before{left:-18px;top:32px;width:18px;height:18px}
.points--row{flex-direction:row;gap:clamp(20px,2.4vw,40px);margin-top:clamp(38px,3.8vw,58px)}
.points--row li{flex:1;flex-direction:column;gap:12px;border-bottom:0;padding-bottom:0;
  border-top:2px solid #dfeed2;padding-top:20px}
.points--row img{margin-top:0}

/* ===== difference : the one dark section ===== */
.diff{position:relative;overflow:hidden;padding:clamp(58px,5.2vw,92px) 0;
  background:linear-gradient(135deg,#3f8728 0%,#4a982f 55%,#57a83a 100%);color:#fff}
.diff .eyebrow-center{color:#dcf0c8}
.diff-title{margin-top:8px;text-align:center;font-size:clamp(26px,2.4vw + 8px,44px);
  line-height:1.4;font-weight:800;color:#fff;text-wrap:balance}
.diff-grid{display:grid;grid-template-columns:1fr auto 1.15fr;gap:clamp(20px,2.6vw,40px);
  align-items:stretch;margin-top:clamp(30px,3.2vw,48px);position:relative;z-index:2}
.diff-col{border-radius:var(--radius);padding:clamp(20px,2vw,30px)}
.diff-col--plain{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.diff-col--jb{background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.diff-head{text-align:center;font-weight:800;font-size:clamp(16px,.7vw + 13px,20px);
  color:#e2f3d3;margin-bottom:20px;letter-spacing:.04em}
.diff-col--jb .diff-head{color:var(--deep)}
.diff-pair{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,32px)}
.diff-pair figure{text-align:center}
.diff-pair img{width:clamp(40px,3vw,52px);margin:0 auto 8px;filter:brightness(0) invert(1) opacity(.55)}
.diff-pair figcaption{font-size:15px;color:#e2f3d3}
.diff-arrow{color:#cbe7b4;font-size:24px}
.diff-cap{text-align:center;margin-top:18px;font-size:15px;color:#d5edc0;letter-spacing:.06em}
.diff-vs{display:flex;align-items:center;justify-content:center;font-size:clamp(20px,1.4vw + 8px,30px);
  font-weight:800;letter-spacing:.1em;color:var(--yellow)}
.diff-col--jb ul{display:flex;flex-direction:column}
.diff-col--jb li{display:flex;align-items:center;gap:16px;padding:15px 4px;
  font-size:clamp(16px,.8vw + 12px,22px);font-weight:800;color:var(--deep);
  border-bottom:1px solid #e5f3df}
.diff-col--jb li:last-child{border-bottom:0}
.diff-col--jb li img{width:clamp(30px,2.2vw,40px);flex:0 0 auto}
.diff-note{position:relative;z-index:2;margin-top:clamp(26px,2.8vw,40px);text-align:center;
  font-size:clamp(16px,.6vw + 13px,20px);color:#eaf7dd}
.diff-note b{color:var(--yellow)}
.diff-city{position:absolute;right:-4%;bottom:0;width:min(58%,760px);z-index:1;
  pointer-events:none;opacity:.16}

/* ===== merit : typography, no cards ===== */
.merit{padding:var(--sec-pad) 0;background:#fff}
.merit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,60px);
  margin-top:clamp(34px,3.4vw,54px)}
.mnum{display:block;font-size:clamp(38px,2.6vw + 18px,58px);font-weight:800;line-height:.9;
  color:#cce9ad;letter-spacing:-.02em}
.mrow b{display:block;margin-top:14px;font-size:clamp(19px,1vw + 13px,25px);font-weight:800;
  color:var(--deep);letter-spacing:.02em}
.mrow p{margin-top:16px;padding-top:16px;border-top:2px solid var(--line);
  font-size:clamp(15px,.5vw + 13px,17px);line-height:1.95;color:var(--sub)}

/* ===== final CTA : buttons, not cards ===== */
.final{padding:clamp(52px,5vw,84px) 0;background:linear-gradient(135deg,#f4fbeb,#eaf7dc)}
.final-title{text-align:center;font-size:clamp(23px,1.8vw + 12px,38px);font-weight:800;line-height:1.45}
.final-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  max-width:1000px;margin:clamp(26px,2.8vw,40px) auto 0}
.fbtn{position:relative;display:flex;align-items:center;gap:16px;
  min-height:84px;padding:0 46px 0 24px;background:transparent;
  border:2px solid #cce9ad;border-radius:14px;
  font-size:clamp(16px,.8vw + 12px,20px);font-weight:800;color:var(--deep);
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.fbtn img{width:44px;flex:0 0 auto}
.fbtn i{position:absolute;right:22px;width:9px;height:9px;
  border-top:2.5px solid var(--orange);border-right:2.5px solid var(--orange);transform:rotate(45deg)}
.fbtn:hover{background:#fff;border-color:var(--orange);transform:translateY(-2px)}
.fbtn--emp{border-color:#a8dcd7}
.fbtn--emp i{border-color:var(--teal)}
.final .btn{display:flex;margin:clamp(20px,2.2vw,30px) auto 0;max-width:420px}

/* ===== footer ===== */
.site-foot{background:#fff;border-top:1px solid var(--line);padding:clamp(40px,4vw,60px) 0 clamp(28px,3vw,44px)}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.logo--foot{font-size:22px}
.logo--foot img{width:38px}
.logo--foot img.logo-img{width:auto;height:50px}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:16px;font-weight:700;color:#4a5a44}
.fnav a:hover{color:var(--green)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;
  font-size:13px;color:var(--sub)}
.foot-legal small{color:#9aa89f}

/* ================= responsive ================= */
@media (max-width:1200px){
  .container{width:min(1280px,calc(100% - 56px))}
  .hero-inner{grid-template-columns:1fr .86fr;gap:clamp(24px,3vw,44px)}
  .feat-grid,.out-grid{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:1023px){
  body{font-size:17px}
  .head-inner{height:70px}
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero-art{order:2;max-width:560px;width:100%;margin-inline:auto}
  .hero-lead{margin-top:24px}
  .entries-grid{grid-template-columns:1fr 1fr}
  .entries-grid .entry:last-child{grid-column:1 / -1}
  .tri-heads{gap:16px}
  .th p{font-size:13px}
  .feat-grid,.out-grid{grid-template-columns:1fr;gap:32px}
  .out-grid .feat-copy{order:-1}
  .points--row{flex-direction:column;gap:0}
  .points--row li{border-top:0;border-bottom:1px solid var(--line);padding:0 0 18px;
    flex-direction:row;gap:16px}
  .points--row li:last-child{border-bottom:0;padding-bottom:0}
  .diff-grid{grid-template-columns:1fr;gap:16px}
  .diff-vs{padding:6px 0}
  .diff-city{position:static;width:min(100%,560px);margin:26px auto 0;opacity:.16}
  .diff{overflow:visible}
  .merit-list{grid-template-columns:1fr 1fr;gap:28px 32px}
  .final-grid{grid-template-columns:1fr 1fr}
  .final-grid .fbtn:last-child{grid-column:1 / -1}
}

@media (max-width:767px){
  .container{width:min(1280px,calc(100% - 40px))}
  .head-inner{height:62px;gap:12px}
  .logo{font-size:20px}
  .logo img{width:34px}
  .logo img.logo-img{width:auto;height:40px}
  .gnav{position:absolute;left:0;right:0;top:62px;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .25s ease;margin-left:0}
  body.nav-open .gnav{max-height:320px}
  .gnav a{padding:15px 24px;border-bottom:1px solid var(--line)}
  .burger{display:flex;margin-left:auto}

  .hero{padding:24px 0 8px}
  .hero-tag{margin-bottom:14px}
  .hero h1{font-size:clamp(26px,7vw,35px);line-height:1.32}
  .hero-lead{font-size:16px;margin-top:20px}
  .pc-br{display:none}
  .sp-br{display:inline}
  .hero-art{max-width:420px}

  .entries{padding-bottom:40px}
  .entries-grid{grid-template-columns:1fr;gap:14px}
  .entries-grid .entry:last-child{grid-column:auto}
  .entry{min-height:0;padding:20px 22px;column-gap:14px}
  .entry-go{padding-top:14px}
  .entry-ico{width:44px}
  .entry-name{font-size:21px}
  .entry-desc{font-size:15px;margin-top:10px}
  .entry-go{margin-top:14px;font-size:15px}

  .about,.feat,.merit{padding:clamp(46px,11vw,64px) 0}
  .diff{padding:clamp(50px,12vw,70px) 0}
  .tri-heads{grid-template-columns:1fr;gap:0}
  .th{padding:18px 0;border-bottom:1px solid var(--line);text-align:left;
    display:grid;grid-template-columns:1fr auto;align-items:baseline}
  .th:last-child{border-bottom:0}
  .th-en{font-size:21px}
  .th b{margin-top:0;font-size:18px;text-align:right}
  .th p{grid-column:1 / -1;margin-top:6px;text-align:left}
  .tri-lines{display:none}
  .tri-hub{position:relative;padding-top:44px;margin-top:8px}
  .tri-hub::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:2px;height:26px;background:#cfe3bb}
  .tri-hub::after{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);
    border:7px solid transparent;border-top:10px solid #9fd36d}
  .tri-emblem{width:150px}
  .tri-hub-name{font-size:26px}

  .steps{gap:10px 4px}
  .steps li{flex:0 0 calc(50% - 14px);min-width:0}
  .steps li + li::before{display:none}
  .steps li:nth-child(odd)::after{content:"";position:absolute;right:-12px;top:24px;width:12px;height:12px;
    border-top:2px solid #9fd36d;border-right:2px solid #9fd36d;transform:rotate(45deg)}
  .steps li:last-child::after{display:none}
  .steps img{width:40px}
  .steps span{font-size:14px}
  .steps--wide li{flex:0 0 calc(33.333% - 10px)}
  .steps--wide li:nth-child(odd)::after{display:none}
  .steps--wide img{width:46px}

  .fnode{gap:14px;padding:14px 16px}
  .fnode img{width:44px}
  .fbar{height:24px}
  .merits{grid-template-columns:1fr;gap:14px}
  .merit-art{aspect-ratio:16/9}
  .feat-art{max-width:100%}

  .merit-list{grid-template-columns:1fr;gap:26px}
  .mnum{font-size:34px}
  .mrow p br{display:none}

  .final{padding:48px 0 52px}
  .final-grid{grid-template-columns:1fr;gap:12px}
  .final-grid .fbtn:last-child{grid-column:auto}
  .fbtn{min-height:70px;padding:0 40px 0 20px;font-size:17px}
  .fbtn img{width:38px}
  .btn,.btn--lg{width:100%;min-width:0;height:54px;font-size:16px}
  .final .btn{max-width:none}
  .btn--solid img{width:22px}
}

@media (min-width:1600px){
  :root{--sec-pad:92px}
  body{font-size:19px}
  .head-inner{height:84px}
  .logo{font-size:27px}
  .gnav a{font-size:18px}
}

/* ================= motion ================= */
.tri-emblem{display:block;height:auto}
.site-head{transition:box-shadow .25s ease,background-color .25s ease}
body.scrolled .site-head{box-shadow:0 6px 24px rgba(30,80,50,.08);background:rgba(255,255,255,.96)}

/* --- 動きを減らす設定でも、移動なしのフェードだけは行う --- */
.js :is(.entry,.about .sec-title,.th,.tri-hub,.feat-copy,.feat-side,.out-flow,
    .merit-card,.emp-head,.steps--wide,.points--row > li,.eyebrow-center,
    .diff-title,.diff-col,.diff-vs,.diff-note,.merit .sec-title,.merit .sec-lead,
    .mrow,.final-title,.fbtn,.final > .container > .btn){
  opacity:0;transition:opacity .5s ease}
.js :is(.entry,.about .sec-title,.th,.tri-hub,.feat-copy,.feat-side,.out-flow,
    .merit-card,.emp-head,.steps--wide,.points--row > li,.eyebrow-center,
    .diff-title,.diff-col,.diff-vs,.diff-note,.merit .sec-title,.merit .sec-lead,
    .mrow,.final-title,.fbtn,.final > .container > .btn).in{opacity:1}

@media (prefers-reduced-motion:no-preference){

  /* scroll reveal : 移動を足す */
  .js :is(.entry,.about .sec-title,.th,.tri-hub,.feat-copy,.feat-side,.out-flow,
    .merit-card,.emp-head,.steps--wide,.points--row > li,.eyebrow-center,
    .diff-title,.diff-col,.diff-vs,.diff-note,.merit .sec-title,.merit .sec-lead,
    .mrow,.final-title,.fbtn,.final > .container > .btn){
    transform:translateY(20px);
    transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}
  .js :is(.entry,.about .sec-title,.th,.tri-hub,.feat-copy,.feat-side,.out-flow,
    .merit-card,.emp-head,.steps--wide,.points--row > li,.eyebrow-center,
    .diff-title,.diff-col,.diff-vs,.diff-note,.merit .sec-title,.merit .sec-lead,
    .mrow,.final-title,.fbtn,.final > .container > .btn).in{transform:none}

  /* hero intro */
  @keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes artIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
  .js .hero-tag{animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both}
  .js .hero h1{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .10s both}
  .js .hero-lead{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) .22s both}
  .js .hero-art{animation:artIn 1.05s cubic-bezier(.2,.7,.2,1) .30s both}

  /* brand diagram sequence */
  .js .tri .tl-line path{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.15s cubic-bezier(.35,0,.2,1)}
  .js .tri.in .tl-line path{stroke-dashoffset:0}
  .js .tri.in .tl-line path:nth-child(1){transition-delay:.30s}
  .js .tri.in .tl-line path:nth-child(2){transition-delay:.16s}
  .js .tri.in .tl-line path:nth-child(3){transition-delay:.30s}
  .js .tri .tl-dot circle,.js .tri .tl-arrow path{opacity:0;transition:opacity .5s ease}
  .js .tri.in .tl-dot circle{opacity:1;transition-delay:.12s}
  .js .tri.in .tl-arrow path{opacity:1;transition-delay:1.0s}

  .js .tri .em-outer{opacity:0;transform:scale(.86);transform-box:fill-box;transform-origin:center;
    transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .tri .em-inner{opacity:0;transform:scale(.8);transform-box:fill-box;transform-origin:center;
    transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .tri .em-arc path{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.15s cubic-bezier(.35,0,.25,1)}
  .js .tri .em-node circle,.js .tri .em-mark{opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .tri .em-mark{transform:scale(.72);transform-box:fill-box;transform-origin:center}
  .js .tri.in .em-outer,.js .tri.in .em-inner{opacity:1;transform:none;transition-delay:.75s}
  .js .tri.in .em-arc path{stroke-dashoffset:0;transition-delay:.95s}
  .js .tri.in .em-arc path:nth-child(2){transition-delay:1.05s}
  .js .tri.in .em-arc path:nth-child(3){transition-delay:1.15s}
  .js .tri.in .em-node circle{opacity:1;transition-delay:1.7s}
  .js .tri.in .em-mark{opacity:1;transform:none;transition-delay:1.25s}

  /* flow arrows: gentle loop */
  @keyframes nudge{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(4px)}}
  .js .fbar span::after{animation:nudge 3.4s ease-in-out infinite}

  /* hover polish */
  .entry-ico,.fbtn img{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .entry:hover .entry-ico,.fbtn:hover img{transform:scale(1.07) rotate(-2deg)}
  .btn i,.entry-go i{transition:transform .22s ease}
  .btn:hover i{transform:rotate(45deg) translate(2px,-2px)}
  .entry:hover .entry-go i{transform:rotate(45deg) translate(2px,-2px)}
}

/* ===== 事業所向け：困りごと → 来るもの ===== */
.dmap{margin-top:clamp(30px,3.2vw,48px);position:relative;z-index:2;
  width:min(920px,100%);margin-inline:auto}
.dmap-head{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,2.6vw,44px);
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.28)}
.dmap-head span{font-size:14px;font-weight:700;letter-spacing:.06em;color:#cbe7b4}
.dmap-head span:first-child{text-align:right}
.dmap-row{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,2.6vw,44px);
  align-items:center;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid rgba(255,255,255,.18)}
.dmap-row:last-child{border-bottom:0}
.dmap-pain{font-size:clamp(17px,.9vw + 13px,23px);font-weight:700;color:#dcefcd;line-height:1.5;
  text-align:right}
.dmap-arrow{font-size:clamp(20px,1.2vw + 12px,28px);color:var(--yellow);font-weight:800}
.dmap-get{display:flex;align-items:center;gap:14px;font-size:clamp(19px,1.1vw + 13px,27px);
  font-weight:800;color:#fff;line-height:1.4}
.dmap-get img{width:clamp(28px,2.2vw,38px);flex:0 0 auto;filter:brightness(0) invert(1)}
@media (max-width:760px){
  .dmap-head{display:none}
  .dmap-row{grid-template-columns:1fr;gap:8px;text-align:center}
  .dmap-pain{text-align:center}
  .dmap-arrow{transform:rotate(90deg)}
  .dmap-get{justify-content:center}
}