/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:url('../img/hero.jpg');
  background-size:cover;background-position:center;
  padding:86px 0;  /* 上下とも 86px 固定（画面の高さで変えない） */
}
.hero-inner{position:relative;z-index:1}
.hero-panel{display:inline-block;max-width:100%}
.hero h1{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:clamp(26px,3vw,37px);line-height:1.45;letter-spacing:.01em;color:var(--ink);
}
.hero .lede{margin-top:22px;color:var(--muted);font-size:15.5px;max-width:42ch}

/* ---------- SECTION SHELL ---------- */
section{padding:clamp(64px,9vh,104px) 0}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head h2{
  font-family:"Noto Serif JP",serif;font-size:clamp(22px,2.8vw,32px);
  line-height:1.55;margin-top:16px;font-weight:700;
}

/* ---------- PROBLEM ---------- */
.problem{background:var(--panel)}
.problem-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.problem-copy h3{
  font-family:"Noto Serif JP",serif;font-size:clamp(20px,2.4vw,27px);line-height:1.6;font-weight:700;
  padding-bottom:14px;border-bottom:2px solid var(--red);display:inline-block;margin-bottom:22px;
}
.problem-copy p{color:var(--muted);font-size:14.5px}
.problem-copy p+p{margin-top:16px}
.problem .ph{aspect-ratio:4/3}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:#fff;background:var(--red);
  font-weight:700;font-size:13.5px;padding:8px 22px;border-radius:3px;transition:background .2s;
}
.link-arrow:hover{background:var(--red-deep)}

/* ---------- STAT BAR ---------- */
.statbar{background:var(--red);color:#fff}
.statbar h2{
  font-family:"Noto Serif JP",serif;text-align:center;font-size:clamp(18px,2.2vw,24px);
  font-weight:700;margin-bottom:38px;
}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.stat-item{text-align:center;padding:0 24px;border-right:1px solid rgba(255,255,255,.25)}
.stat-item:last-child{border-right:none}
.stat-item .num{font-family:"Noto Serif JP",serif;font-size:clamp(30px,3.6vw,42px);font-weight:700;line-height:1}
.stat-item .num small{font-size:16px;font-weight:600}
.stat-item .lab{font-size:13px;margin-top:12px;margin-bottom:12px;color:#f3d6da;line-height:1.7}
.stat-note{
  text-align:center;font-size:11.5px;color:#f3d6da;margin-top:30px;letter-spacing:.02em;
}

/* ---------- SOLUTION ---------- */
.solution-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.solution-copy .eyebrow{margin-bottom:14px}
.solution-copy h3{
  font-family:"Noto Serif JP",serif;font-size:clamp(20px,2.4vw,27px);line-height:1.6;font-weight:700;
  padding-bottom:14px;border-bottom:2px solid var(--red);display:inline-block;margin-bottom:22px;
}
.solution-copy p{color:var(--muted);font-size:14.5px}
.solution .ph{aspect-ratio:4/3}

/* ---------- TECH LINEUP ---------- */
.lineup .wrap{padding-left:0;padding-right:0;max-width:none}
.tech-bg{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('../img/img04.jpg');
  background-size:cover;background-position:center;
}
.tech-bg .sec-head h2{color:#fff}
.tech-bg-inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vh,72px) 32px;position:relative;z-index:1;
}
.lineup .sec-head{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:36px}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tech-card{
  display:block;background:rgba(255,255,255,.94);backdrop-filter:blur(2px);
  border:1px solid var(--line);border-radius:6px;padding:30px 22px;text-align:center;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.tech-card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.tech-card .num{font-family:"Noto Serif JP",serif;color:var(--red);font-size:13px;font-weight:700;letter-spacing:.1em;margin-bottom:14px}
.tech-card h4{font-size:15px;font-weight:700;line-height:1.6}
.lineup-cta{text-align:center;margin-top:38px}

/* ---------- SERVICE FLOW ---------- */
.flow{background:var(--paper)}
.flow .sec-head{max-width:none}
.flow .sec-head p{color:var(--muted);font-size:14.5px;margin-top:16px;line-height:1.9}
.flow .sec-head p+p{margin-top:8px}

.flow-wrap{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:52px;align-items:start}
/* diagram (flow-ja.png) */
.flow-dia img{width:100%;height:auto;display:block}

/* copy beside diagram */
.flow-say{padding-top:6px}
.flow-say p{font-family:"Noto Serif JP",serif;font-size:16px;line-height:1.95;color:var(--ink)}
.flow-say p+p{margin-top:14px}
.flow-cta{text-align:center;margin-top:52px}
.flow-cta .btn-cta{display:inline-block;padding:8px 34px;font-size:14.5px;border-radius:3px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-panel{
    background:rgba(255,255,255,.82);backdrop-filter:blur(2px);
    padding:24px 28px;border-radius:6px;
  }
  .problem-grid,.solution-grid{grid-template-columns:1fr;gap:32px}
  .problem-grid .problem-copy{order:-1}
  .problem-grid .ph,.solution-grid .ph{display:none}
  .stat-row{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.25);padding:22px 0}
  .stat-item:last-child{border-bottom:none}
  .tech-grid{grid-template-columns:1fr 1fr}
  .tech-bg-inner{padding-left:20px;padding-right:20px}
  .flow-wrap{grid-template-columns:1fr;gap:28px}
  .flow-dia{max-width:320px}
}
@media(max-width:560px){
  .tech-grid{grid-template-columns:1fr 1fr;gap:12px}
  .tech-card{padding:20px 12px}
  .tech-card h4{font-size:13px}
  .tech-bg-inner{padding-top:40px;padding-bottom:40px}
}