@charset "UTF-8";
/* TOP専用。既存の構成・共通スタイル・下層ページを維持する。 */
:root{
  --home-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --navy:#152f43;
  --deep:#0c202e;
  --blue:#245f86;
  --cyan:#679daa;
  --pale:#edf2f3;
  --pale2:#f5f6f4;
  --ink:#203544;
  --muted:#566670;
  --line:#cbd4d8;
  --line-s:#dfe5e6;
  --grad:linear-gradient(110deg,#285c7a,#1a405b 65%,#152f43);
  --grad-b:linear-gradient(115deg,#285f83,#326e8c);
  --r-m:14px;
  --r-l:20px;
  --sh:0 10px 36px rgba(17,42,59,.06);
  --sh-l:0 14px 36px rgba(17,42,59,.12);
}
body{background:#fdfdfb;letter-spacing:.025em;font-family:var(--body-font)}
h1,h2,h3,h4{letter-spacing:.045em;line-height:1.5}
.section-title{font-size:clamp(29px,3.55vw,50px);line-height:1.5;letter-spacing:.045em}
.lead{line-height:2.1}
.label{gap:12px;letter-spacing:.16em;margin-bottom:24px;font-family:Arial,sans-serif;font-size:12px;font-weight:600}
.label b{width:30px;height:30px;border-color:var(--line);font-size:12px;letter-spacing:.02em}
.grid-bg{background-image:linear-gradient(rgba(36,77,99,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(36,77,99,.025) 1px,transparent 1px);background-size:64px 64px}
.ghost{font-family:Arial,sans-serif;font-weight:400;letter-spacing:.015em;color:#f0f3f2}
.sec-head{margin-bottom:64px}
.btn{font-size:14px;letter-spacing:.06em;gap:24px;box-shadow:none}
.btn:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.btn-primary{background:var(--grad-b)}
.btn-navy{background:var(--navy)}
.btn-white{background:#fdfdfb}
.btn-line{border-color:#aebdc5}
.btn::after{font-family:Arial,sans-serif;font-size:19px;font-weight:400}
.mini-cta{font-size:13px;letter-spacing:.055em;border-color:#9db3c0;padding-bottom:10px;gap:24px}

/* 写真の上に静かな濃淡を重ね、動画とコピーの輪郭を明確に。 */
.site-header{background:rgba(12,32,46,.94);border-bottom-color:rgba(255,255,255,.15)}
.site-header .brand{font-size:20px;letter-spacing:.055em}
.site-header .nav-tel{font-size:22px}
.site-header .nav-tel small{font-size:12px}
.nav{font-size:16px;font-weight:700;letter-spacing:.04em}
.nav a::after{height:1px;background:#a5c3ce}
.site-header .nav .nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  min-height:52px;padding:10px 14px 10px 22px;
  background:#2b607f;color:#fff;border:1px solid #6797b2;border-radius:12px;
  font-size:15px;font-weight:700;letter-spacing:.035em;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.site-header .nav .nav-cta::after{
  content:"\2192";position:static;display:grid;place-items:center;flex:none;
  width:28px;height:28px;background:rgba(255,255,255,.12);border-radius:50%;
  color:#fff;font:400 18px/1 Arial,sans-serif;transform:none;
  transition:transform .2s,background .2s;
}
.site-header .nav .nav-cta:hover{background:#34708e;border-color:#96bbcf;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.site-header .nav .nav-cta:hover::after{transform:translateX(3px);background:rgba(255,255,255,.2)}
.site-header .nav .nav-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-media img{filter:none}
.hero::before{background:linear-gradient(90deg,rgba(12,32,46,.12),rgba(12,32,46,.18) 40%,rgba(12,32,46,.62) 68%,rgba(12,32,46,.88)),linear-gradient(0deg,rgba(12,32,46,.16),transparent 45%)}
.hero h1{font-size:clamp(38px,5.2vw,74px);line-height:1.38;letter-spacing:.065em;margin-bottom:28px}
.hero h1 em{color:#acd4dc}
.hero-coord{font-size:12px;line-height:1.7;letter-spacing:.12em;color:#bfd3dc;gap:12px}
.hero-coord::before{width:24px;height:1px;background:#9bbfca}
.hero-lead{font-size:clamp(15px,1.18vw,17px);line-height:2.15;color:#e0e8ec;letter-spacing:.03em}
.hero-sns{font-size:16px;line-height:1.9;color:#bdcdd5;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.hero-scroll{color:#bdcdd5;font-family:Arial,sans-serif;font-weight:400}

/* スマホ型の意匠は維持し、輪郭と操作部を統一。 */
.carousel--hero .phone{background:#102735;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.25),0 0 0 1px rgba(208,224,232,.45) inset}
.carousel--hero .phone::before{background:#102735;top:6px;height:16px}
.carousel--hero .phone-play{background:linear-gradient(180deg,rgba(12,32,46,.04),rgba(12,32,46,.28))}
.carousel--hero .phone-play span{width:52px;height:52px;background:rgba(250,252,252,.95);box-shadow:0 4px 20px rgba(12,32,46,.16)}
.carousel--hero .phone-play svg{width:20px;height:20px}
.carousel--hero .car-item:hover .phone{transform:translateY(-3px)}
.carousel--hero .car-item figcaption a{background:rgba(12,32,46,.8);border:1px solid rgba(213,230,237,.35);color:#e1ebef;text-decoration:none;font-size:12px;padding:5px 14px;letter-spacing:.05em}
.carousel--hero .car-item figcaption a:hover{background:#2b607f}
.carousel--hero .car-ctrl{margin-top:20px;gap:12px}
.carousel--hero .car-btn,.carousel--hero .car-auto{background:rgba(12,32,46,.3);border-color:rgba(214,230,237,.45)}
.carousel--hero .car-count{font-family:Arial,sans-serif;font-weight:400;letter-spacing:.09em;color:#c1d0d7}
.carousel--hero .car-count b{font-size:17px;font-weight:500}

/* 罫線・写真・余白で構成する本文。 */
.trouble-list li{padding-block:26px;line-height:2}
.trouble-list li::before{width:6px;height:6px;margin-top:13px;background:var(--blue);border-radius:50%;transform:none}
.trouble-close{background:#edf2f2;border-radius:16px;border:1px solid #dce5e6;padding:36px 40px}
.trouble-close p{font-size:clamp(18px,1.65vw,22px);line-height:1.85}
.work-item{padding-block:52px}
.work-item h3{font-size:clamp(22px,2.15vw,29px);line-height:1.55}
.work-no{font-family:Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:.08em}
.work-body{line-height:2}
.spec>div{padding-block:12px}
.spec dd{font-weight:500}
.story-ph{border-radius:16px;box-shadow:0 12px 32px rgba(17,42,59,.06)}
.story-ph img{filter:saturate(.86) contrast(1.015)}
.story-ph::before,.story-ph::after{opacity:.65;width:20px;height:20px}
.story-tx .cap{font-family:Arial,sans-serif;font-weight:500;font-size:12px;letter-spacing:.15em}
.story-tx h3{font-size:clamp(22px,2.05vw,28px);line-height:1.65}
.story-tx p{line-height:2.05}
.story-meta{font-size:12px;letter-spacing:.04em;padding-top:16px}
.sec-navy{background:#152f43}
.sec-navy .label,.recruit-band .label{color:#b1cfda}
.sec-navy .label b,.recruit-band .label b{border-color:#698493}
.sec-navy .lead,.sec-navy p{color:#c7d5de}
.flow-step b{font-family:Arial,sans-serif;font-weight:500;letter-spacing:.1em;color:#b1cfda}
.flow-step::before{width:9px;height:9px;background:#92bac9;box-shadow:0 0 0 4px rgba(146,186,201,.12)}
.flow::before{top:8px;background:linear-gradient(90deg,#759dad,rgba(255,255,255,.18))}
.flow-step h3{font-size:18px}
.flow-step p{line-height:2}
.numbers{background:var(--grad)}
.num strong{font-family:Arial,sans-serif;font-weight:400;font-size:clamp(42px,5.25vw,72px);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.num>span{color:#d9e5eb;letter-spacing:.075em}
.num-note small{font-family:Arial,sans-serif;color:#c0d5df;font-weight:500}
.num-note b{font-size:clamp(18px,1.7vw,23px);line-height:1.65}
.reason{border-top-width:1px;border-top-color:#acbbc3;padding-top:28px}
.reason .r-no{font-family:Arial,sans-serif;font-size:28px;font-weight:400;color:#6d8899}
.reason h3{font-size:clamp(18px,1.6vw,22px);line-height:1.7}
.reason p{line-height:2}
.voice-visual::before{border-color:#9fb9bf}
blockquote.founder{border-left-width:1px;border-left-color:#9fb9bf}
blockquote.founder p{line-height:2.15}
.person{padding-top:22px}
.person strong{font-size:22px;letter-spacing:.12em}
.recruit-band::before{background:linear-gradient(90deg,#0c202e 28%,rgba(12,32,46,.78) 58%,rgba(12,32,46,.2))}
.area-map{background:#f1f5f5;border-color:#dce5e6;border-radius:16px}
.pref-list li{background:#fdfdfb;border-color:#d4dde0;font-weight:500;padding:7px 17px}
.base-card{border-radius:12px;border-color:#d4dde0}
.faq summary{font-size:clamp(16px,1.3vw,18px);padding-block:28px;line-height:1.8;letter-spacing:.035em}
.faq summary::before{background:transparent;border:1px solid #b8c7cf;color:var(--blue);font-family:Arial,sans-serif;font-weight:400}
.faq summary::after{top:38px;width:9px;height:9px;border-width:1px}
.faq details[open]{background:#edf2f2}
.faq .a{line-height:2}
.contact-row{padding-block:32px}
.contact-row small{font-family:Arial,sans-serif;font-size:12px;font-weight:500}
.contact-row .go{background:transparent;border:1px solid #bdcbd2;color:var(--blue);transition:background .25s,color .25s,transform .25s}
.contact-row:hover .go{background:var(--blue);color:#fff}
.site-footer{background:#0c202e}
.footer-bottom,.sns-note{color:#9eb2be}

@media(min-width:1440px){
  .hero-inner{gap:72px}
}
@media(max-width:1080px){
  .sec-head{margin-bottom:48px}
}
@media(max-width:860px){
  .hero::before{background:linear-gradient(180deg,rgba(12,32,46,.92),rgba(12,32,46,.83) 35%,rgba(12,32,46,.5) 70%,rgba(12,32,46,.7))}
  .hero-inner{padding-block:40px;gap:32px}
  .hero h1{font-size:clamp(38px,8.6vw,60px);line-height:1.38;margin-bottom:20px}
  .hero-coord{font-size:12px;margin-bottom:20px;letter-spacing:.09em}
  .hero-lead{font-size:15px;line-height:2}
  .hero-sns{margin-top:20px;padding-top:16px;max-width:30em}
  .carousel--hero .car-ctrl{margin-top:16px}
  .section-title{font-size:clamp(28px,4.6vw,38px);line-height:1.55}
  .trouble-close{padding:28px}
  .story{gap:28px}
  .recruit-band::before{background:linear-gradient(0deg,rgba(12,32,46,.38),#0c202e 58%)}
  .recruit-band .wrap{padding-bottom:48%}
  .sp-cta{border-top-color:#d4dfe3}
}
@media(max-width:520px){
  .section-title{font-size:clamp(25px,7.1vw,34px);letter-spacing:.025em}
  .sec-head{margin-bottom:36px;gap:24px}
  .label{margin-bottom:20px}
  .work-item{padding-block:36px}
  .work-item h3{font-size:23px}
  .trouble-list li{padding-block:22px;font-size:15px}
  .trouble-close{padding:26px 22px;gap:24px}
  .trouble-close .btn{padding-inline:18px;gap:14px}
  .story-tx h3{font-size:22px}
  .reason{gap:18px}
  .faq summary{gap:14px;padding-right:30px;font-size:16px}
  .faq .a{gap:14px;padding-right:12px;font-size:15px}
  .contact-row{padding-inline:0}
  .contact-row b{font-size:clamp(17px,4.7vw,23px)}
}

/* 新しい参考画像に合わせた極太角ゴシック。本文は400、見出しは900。 */
h1,h2,h3,h4,
.btn,.tel-num,.brand,.drawer a,
.footer-brand,.footer-tel,.footer-h,.sp-cta a,
.hero-coord,
.trouble-close p,.num-note b,.helmet span,.person strong,
.rb-team,.faq summary,.faq .a::before,.contact-row b,.area-map text{
  font-family:var(--home-font);
}
h1,h2,h3,h4{font-weight:700}
.hero h1,.section-title{
  color:#fff;
  letter-spacing:.025em;
  -webkit-text-stroke:2px #26333c;
  paint-order:stroke fill;
  text-shadow:3px 3px 0 #26333c;
}
.hero h1{line-height:1.38;-webkit-text-stroke-width:3px;text-shadow:4px 4px 0 #26333c}
.hero h1 em{color:inherit}
@media(max-width:520px){
  .hero h1,.section-title{-webkit-text-stroke-width:1.5px;text-shadow:2px 2px 0 #26333c}
}

/* 代表メッセージ：元写真の比率を保ち、被写体を切り取らない。 */
#message .voice-visual{grid-template-columns:minmax(0,1fr);gap:18px}
#message .voice-visual::before{display:none}
#message .portrait{aspect-ratio:auto;border-radius:16px}
#message .helmet{width:46%;justify-self:end;border-radius:12px}
#message .portrait picture,#message .helmet picture{display:block}
#message .portrait img,#message .helmet img{display:block;width:100%;height:auto;object-fit:contain}

/* 帯の予約余白は除去し、背景をPCの画面下端まで表示する。 */
@media(min-width:861px){
  .hero,.hero-inner{min-height:100vh;min-height:100svh}
  .hero-inner{padding-bottom:var(--s4)}
}

@media(max-width:860px){
  .site-header .brand span{font-size:16px;letter-spacing:.035em}
}

/* ヒーロー：カルーセルは端末3台分ちょうどの幅で左に寄せ、コピーは右端へ離す */
.hero-inner{width:min(calc(100% - 64px),1760px);grid-template-columns:minmax(0,1fr) minmax(272px,344px);gap:32px}
.carousel--hero{
  /* 見えている幅を3等分＝常に3台がちょうど収まる。画面が低いときは高さにも追従 */
  --item:calc((100% - var(--s3) * 2) / 3);
  max-width:min(900px,calc(87vh + var(--s3) * 2));
  margin-right:auto;
}
.hero h1{font-size:clamp(34px,3.5vw,60px);margin-bottom:22px}
.hero-lead{font-size:clamp(14px,1.05vw,16px);line-height:2.0}
.hero-sns{font-size:16px;margin-top:20px;padding-top:16px}
@media (max-width:1150px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(248px,300px);gap:24px}
}
@media (max-width:1150px){
  /* 幅が足りない画面は縦積み。3台固定ではなく、めくれる幅にする */
  .hero-inner{grid-template-columns:1fr;gap:24px;width:min(calc(100% - 56px),1760px)}
  .carousel--hero{max-width:none;margin-right:0;--item:clamp(212px,64vw,272px)}
  .hero h1{font-size:clamp(32px,9vw,44px)}
  .hero-lead{font-size:15px}
  .hero-sns{font-size:16px}
}
/* ヒーロー：写真を右へずらし、人物（元画像の42〜72%）とカルーセル・コピーを重ねない */
.hero-media img{width:100%;max-width:none;object-position:center 4%}
.carousel--hero{margin-left:0;margin-right:auto;max-width:min(45vw,900px,calc(87vh + var(--s3) * 2))}
@media (min-width:861px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(268px,340px)}
}
/* ヘッダー：文字を少し小さく、ロゴを少し大きく */
.site-header .brand{font-size:18px}
.site-header .brand span{font-size:14px;letter-spacing:.03em}
.site-header .brand img,.site-header .brand picture{width:68px;height:68px}
.nav{font-size:14px}
.site-header .nav-tel{font-size:19px}
.site-header .nav-tel small{font-size:12px}
@media (max-width:860px){
  .site-header .brand img,.site-header .brand picture{width:54px;height:54px}
  .site-header .brand span{font-size:13px}
}

/* ==========================================================================
   TOP下部セクションの刷新（2026-09-06）
   方針1：面の質感（白／淡グレー／紺／写真）を意図的に切り替えてスクロールにリズムを作る
   方針2：BtoBの判断材料（数字・対象・条件・電話番号）を大きく拾いやすくする
   方針3：現場写真を大きく使い、罫線は意味のある位置だけに減らす
   ※ ヒーロー・ヘッダー・カルーセルには手を入れていない
   ========================================================================== */

/* ---------- 共通：セクションの余白と見出しに強弱 ---------- */
.sec{padding:clamp(72px,7vw,120px) 0}
.sec-head{margin-bottom:clamp(40px,4vw,64px)}
.section-title{letter-spacing:.04em}
.label{margin-bottom:20px}

/* ---------- 01 こんな現場のお困りごと ---------- */
#trouble{background:var(--pale2)}
.trouble-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;border-top:0}
.trouble-list li{
  align-items:center;gap:16px;padding:22px 24px;border-bottom:0;
  background:#fff;border:1px solid var(--line-s);border-left:3px solid var(--cyan);
  border-radius:var(--r-m);font-size:16px;font-weight:500;line-height:1.8;color:var(--ink);
  box-shadow:var(--sh)}
.trouble-list li::before{
  content:"";flex:none;width:9px;height:9px;margin-top:0;border-radius:50%;
  background:var(--blue);transform:none}
.trouble-close{
  margin-top:40px;padding:clamp(28px,3vw,44px);border-radius:var(--r-l);
  background:var(--grad);color:#fff;align-items:center;gap:clamp(24px,3vw,48px);
  box-shadow:var(--sh-l)}
.trouble-close p{color:#fff;font-size:clamp(17px,1.7vw,22px);line-height:1.85;max-width:26em}
.trouble-close .btn{background:#fff;color:var(--navy);border:0;white-space:nowrap}
.trouble-close .btn:hover{background:var(--pale);color:var(--navy)}

/* ---------- 02 対応できる作業 ---------- */
#service{background:#fff}
.work-list{border-top:0;display:grid;gap:20px}
.work-item{
  position:relative;grid-template-columns:auto 1fr;gap:8px clamp(20px,2.4vw,40px);
  padding:clamp(26px,2.6vw,40px);border-bottom:0;
  background:var(--pale2);border-radius:var(--r-l);overflow:hidden}
.work-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-b)}
.work-no{
  grid-row:span 2;align-self:start;font-size:clamp(30px,3vw,44px);font-weight:700;
  line-height:1;color:var(--line);letter-spacing:.02em;padding-top:2px}
.work-item h3{font-size:clamp(21px,2.1vw,28px);line-height:1.5;color:var(--navy)}
.work-body{grid-column:2}
.work-item .body-col{color:var(--muted);font-size:16px;line-height:2.0;margin-top:12px}
.spec{margin-top:22px;border-top:0;background:#fff;border:1px solid var(--line-s);border-radius:var(--r-m);overflow:hidden}
.spec>div{
  grid-template-columns:96px 1fr;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line-s);
  font-size:15px;align-items:center}
.spec>div:last-child{border-bottom:0}
.spec dt{color:#fff;background:var(--blue);border-radius:999px;text-align:center;
  font-size:12px;letter-spacing:.08em;padding:5px 0}
.spec dd{color:var(--ink);font-weight:700;line-height:1.8}

/* ---------- 03 現場の記録：写真を主役に ---------- */
#works{background:var(--navy);color:#fff}
#works .section-title{color:#fff}
#works .lead,#works .story-tx p{color:#c4d2d8}
#works .label{color:var(--cyan)}
#works .label b{border-color:var(--cyan);color:var(--cyan)}
#works .ghost{color:rgba(255,255,255,.05)}
.story{gap:clamp(28px,4vw,72px);margin-bottom:clamp(48px,5vw,88px);align-items:center}
.story-ph{aspect-ratio:3/2;border-radius:var(--r-l);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.story-ph::before,.story-ph::after{display:none}
.story-tx .cap{color:var(--cyan);font-size:12px;letter-spacing:.14em}
.story-tx h3{font-size:clamp(22px,2.3vw,32px);line-height:1.5;color:#fff;margin-bottom:14px}
.story-meta{border-top:1px solid rgba(255,255,255,.2);color:#a7bcc4;font-size:12px;padding-top:14px}

/* ---------- 04 ご依頼の流れ ---------- */
#flow{background:var(--deep)}
.flow{gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,36px)}
.flow::before{background:linear-gradient(90deg,var(--cyan),rgba(255,255,255,.12))}
.flow-step{padding:28px 22px 24px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-m)}
.flow-step::before{top:-6px;left:22px;width:11px;height:11px;background:var(--cyan);
  box-shadow:0 0 0 5px rgba(103,157,170,.22)}
.flow-step b{color:var(--cyan);font-size:12px;letter-spacing:.16em}
.flow-step h3{font-size:19px;color:#fff;line-height:1.5;margin-bottom:10px}
.flow-step p{color:#bccbd2;font-size:14px;line-height:1.95}

/* ---------- 05 実績帯：数字を山場に ---------- */
.numbers{background:var(--grad)}
.numbers-grid{align-items:center}
.num{padding:clamp(44px,4.4vw,72px) clamp(20px,2.4vw,40px);border-right-color:rgba(255,255,255,.22)}
.num strong{font-size:clamp(46px,6vw,84px);letter-spacing:-.01em;line-height:1;color:#fff}
.num>span{margin-top:14px;font-size:13px;letter-spacing:.1em;color:#c3d6de}
.num-note b{font-size:clamp(17px,1.5vw,21px);line-height:1.65}
.num-note small{color:var(--cyan);letter-spacing:.16em}
.num-note p{color:#c3d6de}

/* ---------- 06 選ばれる理由 ---------- */
#reasons{background:#fff}
.reasons{gap:clamp(24px,2.6vw,40px)}
.reason{
  grid-template-columns:1fr;gap:14px;padding:clamp(26px,2.6vw,38px);
  background:var(--pale2);border-radius:var(--r-l);
  border-top:3px solid var(--blue)}
.reason .r-no{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--blue)}
.reason h3{font-size:clamp(18px,1.8vw,23px);line-height:1.6;color:var(--navy);margin-bottom:0}
.reason p{color:var(--muted);font-size:16px;line-height:2.0}

/* ---------- 07 代表あいさつ ---------- */
#message{background:var(--pale)}
.voice-grid{gap:clamp(40px,5vw,88px)}
blockquote.founder{
  position:relative;margin:28px 0 0;padding:clamp(26px,2.6vw,40px);padding-left:clamp(34px,3.4vw,56px);
  background:#fff;border-left:4px solid var(--cyan);border-radius:0 var(--r-l) var(--r-l) 0;
  box-shadow:var(--sh)}
blockquote.founder p{font-size:16px;line-height:2.05;color:var(--ink)}
.person{border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
.person strong{font-size:21px;color:var(--navy)}

/* ---------- 08 採用への入口 ---------- */
.recruit-band::before{
  background:linear-gradient(90deg,var(--deep) 26%,rgba(12,32,46,.86) 52%,rgba(12,32,46,.35))}
.recruit-band .section-title{color:#fff}
.recruit-band .body-col{color:#c8d6dc;font-size:16px;line-height:2.0}

/* ---------- 09 対応エリア ---------- */
#area{background:#fff}
.area-map{background:var(--pale2);border-color:var(--line-s);border-radius:var(--r-l);
  padding:clamp(26px,2.8vw,44px)}
.pref-list{gap:12px;margin-top:26px}
.pref-list li{padding:11px 22px;font-size:15px;background:var(--pale2);
  border-color:var(--line-s);color:var(--navy);border-radius:999px}
.base-card{background:var(--navy);border:0;border-radius:var(--r-l);color:#fff;
  padding:clamp(24px,2.6vw,36px);margin-top:28px}
.base-card dt{color:var(--cyan);font-size:12px;letter-spacing:.12em}
.base-card dd{color:#fff;font-size:16px;line-height:1.9}

/* ---------- 10 よくある質問 ---------- */
#faq{background:var(--pale2)}
.faq{border-top:0;display:grid;gap:12px;margin-top:0}
.faq details{border-bottom:0;background:#fff;border:1px solid var(--line-s);
  border-radius:var(--r-m);overflow:hidden;transition:box-shadow .25s}
.faq details[open]{box-shadow:var(--sh)}
.faq summary{padding:20px 60px 20px 22px;font-size:clamp(16px,1.5vw,18px);line-height:1.7;
  color:var(--navy);min-height:64px;align-items:center}
.faq summary:hover{background:var(--pale2)}
.faq summary::before{background:var(--blue);color:#fff;width:28px;height:28px;font-size:12px;margin-top:0;font-weight:700}
.faq summary::after{right:24px;top:50%;margin-top:-6px;border-color:var(--blue)}
.faq .a{padding:0 24px 22px 74px;color:var(--muted);font-size:16px;line-height:2.0}
.faq .a::before{display:none}

/* ---------- 11 お問い合わせ：電話番号を最大に ---------- */
#contact{background:var(--navy)}
#contact .section-title{color:#fff}
#contact .lead{color:#c4d2d8}
#contact .label{color:var(--cyan)}
#contact .label b{border-color:var(--cyan);color:var(--cyan)}
.contact-rows{border-top:0;display:grid;gap:14px;margin-top:clamp(32px,3vw,48px)}
.contact-row{grid-template-columns:212px minmax(0,1fr) auto}
.contact-row small{white-space:nowrap}
.contact-row{
  padding:clamp(22px,2.2vw,32px) clamp(22px,2.4vw,36px);border-bottom:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l);align-items:center;transition:background .25s,border-color .25s}
.contact-row:hover{background:rgba(255,255,255,.12);border-color:var(--cyan)}
.contact-row small{color:var(--cyan);font-size:12px;letter-spacing:.12em}
.contact-row b{color:#fff;font-size:clamp(22px,2.6vw,34px);letter-spacing:.01em}
.contact-row .go{background:var(--cyan);color:var(--deep);width:52px;height:52px}
.contact-row:hover .go{background:#fff}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .reasons{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .trouble-list{grid-template-columns:1fr;gap:12px}
  .trouble-close{margin-top:28px}
  .work-item{grid-template-columns:1fr;padding:24px 20px}
  .work-no{grid-row:auto}
  .work-body{grid-column:1}
  .spec>div{grid-template-columns:80px 1fr;gap:12px;padding:11px 14px;font-size:14px}
  .story-ph{aspect-ratio:4/3}
  .reasons{grid-template-columns:1fr}
  .faq summary{padding:18px 52px 18px 18px}
  .faq .a{padding:0 18px 20px 58px}
  .contact-row{padding:20px}
}
@media (max-width:520px){
  .spec>div{grid-template-columns:1fr;gap:6px}
  .spec dt{justify-self:start;padding:5px 16px}
  .faq .a{padding-left:18px}
}

/* ==========================================================================
   セクション背景（2026-09-07 改訂）／要件定義書：BACKGROUND_SPEC.md
   グリッド線・斜線は使わない。面の光（ラジアルグラデーション）と
   極薄の大型英字、境目の細罫だけで奥行きをつくる。
   ========================================================================== */

/* 格子パターンは全面的に不使用にする */
.grid-bg{background-image:none}

/* ---------- 共通：面の切り替わりを示す上端の罫 ---------- */
#trouble,#service,#works,#flow,#reasons,#message,#area,#faq,#contact{position:relative}
#service,#reasons{overflow:hidden}
#trouble::before,#service::before,#works::before,#flow::before,
#reasons::before,#message::before,#area::before,#faq::before,#contact::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(103,157,170,.45) 18%,rgba(103,157,170,.45) 82%,transparent)}
#trouble>.wrap,#service>.wrap,#works>.wrap,#flow>.wrap,
#reasons>.wrap,#message>.wrap,#area>.wrap,#faq>.wrap,#contact>.wrap{position:relative;z-index:2}

/* ---------- 1. #trouble：やわらかい光 ---------- */
#trouble{
  background-color:var(--pale2);
  background-image:
    radial-gradient(90% 70% at 10% 0%,rgba(36,95,134,.09),transparent 60%),
    radial-gradient(70% 60% at 100% 100%,rgba(36,95,134,.06),transparent 62%)}

/* ---------- 2. #service：光＋極薄の大型英字 ---------- */
#service{
  background-color:#fff;
  background-image:
    radial-gradient(85% 65% at 0% 8%,rgba(36,95,134,.055),transparent 58%),
    radial-gradient(75% 60% at 100% 92%,rgba(36,95,134,.05),transparent 60%)}
#service::after{
  content:"SCOPE";position:absolute;right:0;bottom:3%;z-index:0;pointer-events:none;
  font-family:Arial,sans-serif;font-weight:700;font-size:clamp(90px,12vw,190px);line-height:1;
  letter-spacing:-.03em;color:rgba(36,77,99,.04);white-space:nowrap;user-select:none}

/* ---------- 3. #works：奥行きの光 ---------- */
#works{
  background-color:var(--navy);
  background-image:
    radial-gradient(85% 60% at 88% 0%,rgba(103,157,170,.16),transparent 64%),
    radial-gradient(70% 55% at 0% 100%,rgba(103,157,170,.10),transparent 62%)}

/* ---------- 4. #flow：奥行きの光 ---------- */
#flow{
  background-color:var(--deep);
  background-image:
    radial-gradient(95% 70% at 8% 0%,rgba(103,157,170,.16),transparent 62%),
    radial-gradient(70% 60% at 100% 100%,rgba(40,92,122,.22),transparent 64%)}

/* ---------- 5. .numbers：既存のグラデーションのまま ---------- */
.numbers{position:relative;background-image:var(--grad)}

/* ---------- 6. #reasons：光＋極薄の大型英字 ---------- */
#reasons{
  background-color:#fff;
  background-image:
    radial-gradient(85% 65% at 100% 0%,rgba(36,95,134,.07),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(36,95,134,.05),transparent 62%)}
#reasons::after{
  content:"WHY";position:absolute;left:0;bottom:2%;z-index:0;pointer-events:none;
  font-family:Arial,sans-serif;font-weight:700;font-size:clamp(90px,12vw,190px);line-height:1;
  letter-spacing:-.03em;color:rgba(36,77,99,.038);white-space:nowrap;user-select:none}

/* ---------- 7. #message：やわらかい光 ---------- */
#message{
  background-color:var(--pale);
  background-image:
    radial-gradient(100% 75% at 88% 0%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(36,95,134,.05),transparent 62%)}

/* ---------- 9. #area：やわらかい光 ---------- */
#area{
  background-color:#fff;
  background-image:
    radial-gradient(80% 65% at 100% 6%,rgba(36,95,134,.06),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(36,95,134,.045),transparent 62%)}

/* ---------- 10. #faq：やわらかい光 ---------- */
#faq{
  background-color:var(--pale2);
  background-image:
    radial-gradient(80% 60% at 6% 0%,rgba(36,95,134,.06),transparent 60%),
    radial-gradient(70% 60% at 100% 100%,rgba(36,95,134,.05),transparent 62%)}

/* ---------- 11. #contact：奥行きの光 ---------- */
#contact{
  background-color:var(--navy);
  background-image:
    radial-gradient(85% 70% at 50% 0%,rgba(103,157,170,.16),transparent 64%),
    radial-gradient(60% 50% at 0% 100%,rgba(40,92,122,.24),transparent 62%)}

@media (max-width:860px){
  #service::after,#reasons::after{font-size:clamp(64px,20vw,110px)}
}

/* 動画操作：3台の下中央にまとめた濃紺のコントロール。 */
.carousel--hero .car-ctrl{width:258px;max-width:none;justify-content:center;gap:4px;margin:24px auto 0;padding:6px;border:1px solid #9bb6c166;border-radius:40px;background:rgba(12,32,44,.78);box-shadow:0 8px 24px #06151d33}
.carousel--hero .car-btn,.carousel--hero .car-auto{flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;color:#eff5f3}
.carousel--hero .car-btn svg{width:18px;height:18px;stroke-width:1.5}
.carousel--hero .car-count{justify-content:center;gap:8px;min-width:86px;margin:0;color:#b8cbd2;font-size:13px;line-height:1.5;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.carousel--hero .car-count b{font-size:19px;font-weight:400;min-width:0;color:#fff}
.carousel--hero .car-auto{border-left:1px solid #9bb6c144;border-radius:0 30px 30px 0}
.carousel--hero .car-btn:hover:not(:disabled),.carousel--hero .car-auto:hover{background:#e5eeec;color:#14313d}
.carousel--hero .car-btn:focus-visible,.carousel--hero .car-auto:focus-visible{outline:2px solid #bdeaf1;outline-offset:2px}
@media(max-width:860px){.carousel--hero .car-ctrl{margin-left:max(0px,calc((100vw - 56px - 258px)/2));margin-right:0}}

/* PC：赤枠の位置へコピーを少し左上に寄せる。 */
@media(min-width:1151px){.hero-copy{position:relative;left:clamp(-64px,-4vw,-40px);top:-100px}}

/* モバイルでPC用45vw制限によるスマホ画像の見切れを防ぐ */
@media(max-width:860px){
  .carousel--hero{width:100%;max-width:none;margin-inline:0}
  .carousel--hero .car-track{mask-image:none;-webkit-mask-image:none}
}

/* モバイルTOPはスマホのカルーセルを先頭に表示 */
@media(max-width:860px){
  .hero-inner>.carousel--hero{grid-column:1;grid-row:1}
  .hero-inner>.hero-copy{grid-column:1;grid-row:2}
}