/* ===== index page — unique styles (shared styles are in common.css) ===== */

/* hero */
.hero{
  position:relative;
  z-index:1; /* 子要素のz-indexをhero内に閉じ込め、ヘッダー(z:200)より下に保つ */
  background:#fff;
  padding:80px 0 0;
  overflow:visible; /* statbandカードが下にはみ出せるよう */
}

/* 写真：hero基準で右端にフィット・高さ全体 */
.hero-media{
  position:absolute;
  top:0; right:0;
  width:78%;
  height:100%;
  z-index:0;
}
/* .hero-media .ph-img はスライド用スタイルで上書き */

/* グラデーション：右端(透明)→中央(白) — hero全体にかける */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right,
    #fff      0%,
    #fff      22%,
    rgba(255,255,255,.85) 30%,
    rgba(255,255,255,.4)  68%,
    rgba(255,255,255,0)   82%
  );
  z-index:1;
  pointer-events:none;
}

/* テキスト：グラデの上に */
.hero-grid{
  position:static; /* hero-mediaをhero基準にするためstaticに */
  display:block;
  padding-bottom:72px;
}
.hero-text{
  position:relative;
  z-index:2;
  max-width:580px;
}
/* statband はhero外に出てz-index:3で重なる — hero自体に下padding確保 */
.hero{padding-bottom:70px} /* カードのtranslateY(-50%)分の余白 */

.hero h1{font-size:clamp(33px,4.4vw,52px);color:var(--navy);line-height:1.34;font-weight:900;margin:22px 0 0}
.hero h1 .hl{color:var(--main)}
.hero h1 ruby rt{font-size:.30em;color:var(--main-d);font-weight:700;letter-spacing:.18em}
.hero .sub{margin-top:26px;font-size:21px;color:#3a4d56;line-height:2.05;max-width:100%}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--navy);
  font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:999px;backdrop-filter:blur(4px)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--main)}

/* スライドショー */
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:right center; /* 右端を常に表示 */
  border-radius:0;box-shadow:none;
  opacity:0;transition:opacity .8s ease;
}
.hero-slide.active{opacity:1}

/* ドット：hero-media内に配置 */
.hero-dots{
  position:absolute;
  bottom:14px;left:0;right:0;
  display:flex;justify-content:center;gap:8px;
  z-index:4;
  pointer-events:none;
}
.hero-dot{
  pointer-events:auto;
  width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.45);transition:background .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.hero-dot.active{background:#fff;}
.hero-dot:hover{background:rgba(255,255,255,.8)}

/* バッジは非表示（背景写真と重なるため） */
.hero-badge{display:none}

/* stats band — 白カード */
.statband{position:relative;z-index:3}
.statband .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 28px rgba(0,0,0,.10);
  border:1px solid var(--line);
  padding:0;gap:0;
  margin-top:48px;
}
.stat{
  display:flex;flex-direction:row;align-items:center;
  gap:14px;
  padding:22px 28px;
  position:relative;
}
.stat+.stat::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;
  width:1px;background:var(--line);
}
.stat-ic{
  flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;
  background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;
  color:var(--main);
}
.stat-ic svg{width:24px;height:24px}
.stat-text{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:14px;color:var(--gray);font-weight:600;letter-spacing:.03em;line-height:1.3}
.stat .v{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:24px;line-height:1.2;color:var(--navy)}
.stat .v small{font-size:13px;font-weight:700;margin-left:2px;color:var(--navy)}
/* グループ名は語中で折り返すため、BRAVEの下に1行で配置 */
.stat .v.v-grp small{display:block;margin-left:0;margin-top:2px;font-size:12px;line-height:1.35;letter-spacing:.01em;word-break:keep-all}

/* problem cards */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prob{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;display:flex;gap:14px;align-items:flex-start}
.prob .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--bg-tint);display:grid;place-items:center;color:var(--main-d)}
.prob .ic svg{width:22px;height:22px}
.prob p{font-weight:600;color:var(--navy);font-size:15.5px;line-height:1.6;padding-top:7px}

/* philosophy */
.phil{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.phil-statement{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;color:var(--navy);font-size:clamp(21px,2.5vw,27px);line-height:1.85}
.phil-statement .em{color:var(--main);}
.phil-body{color:#46565e;font-size:16px;line-height:2.05;margin-top:22px}
.principles{display:flex;flex-direction:column;gap:18px}
.principle{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;box-shadow:var(--shadow-sm)}
.principle .num{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:30px;color:var(--main);opacity:.55;line-height:1}
.principle h3{font-size:18px;color:var(--navy);margin-bottom:7px}
.principle p{color:var(--gray);font-size:14.5px;line-height:1.85}

/* journey */
.journey{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-tint) 100%)}
.journey-track{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;margin-top:8px}
.jline{position:absolute;top:38px;left:7%;right:7%;height:2px;background:repeating-linear-gradient(90deg,var(--main) 0 10px,transparent 10px 20px);opacity:.5;z-index:0}
.jstop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.jstep-no{width:76px;height:76px;border-radius:50%;background:#fff;border:2px solid var(--main);display:grid;place-items:center;color:var(--main-d);box-shadow:var(--shadow-sm)}
.jstep-no svg{width:34px;height:34px}
.jmoment{margin-top:16px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;color:var(--navy);font-size:17px}
.jmoment small{display:block;font-size:13px;color:var(--gray);font-weight:600;margin-top:3px}
.jdown{margin:12px 0 10px;color:var(--main);font-size:18px}
.jcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 14px;width:100%;box-shadow:var(--shadow-sm)}
.jcard .svc{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:800;color:var(--navy);font-size:16.5px}
.jcard .role{font-size:12.5px;color:var(--main-d);font-weight:600;margin-top:3px}
.jcard .badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--cta-d);background:#FFF1E6;border-radius:999px;padding:3px 10px}

/* service detail */
.svc-list{display:flex;flex-direction:column;gap:26px}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
.svc-row.rev .svc-media{order:2}
.svc-media{align-self:stretch;display:flex}.svc-media .ph-img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.svc-info{padding:38px 42px}
.svc-info .tag{font-size:12.5px;font-weight:700;color:var(--main-d);letter-spacing:.05em}
.svc-info h3{font-size:27px;color:var(--navy);margin:8px 0 4px;font-weight:900}
.svc-info .ja{font-size:14px;color:var(--gray);font-weight:600;margin-bottom:16px}
.svc-info ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.svc-info li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#3a4d56;line-height:1.65}
.svc-info li::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--bg-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F88A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.svc-detail-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14.5px;font-weight:700;color:var(--main-d);transition:.18s}
.svc-detail-link:hover{gap:13px;color:var(--navy)}
.svc-flag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--cta);border-radius:999px;padding:4px 13px;margin-bottom:12px}
.svc-main-flag{display:inline-block;font-size:12px;font-weight:700;color:var(--main-d);background:var(--bg-tint);border-radius:999px;padding:4px 13px;margin-bottom:12px}

/* numbers */
.numbers{background:var(--navy);color:#fff}
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px}
.numcard{padding:30px 4px;border-top:3px solid var(--main)}
.numcard .big{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:clamp(40px,5vw,60px);line-height:1;color:#fff}
.numcard .big small{font-size:22px;font-weight:800;color:var(--main);margin-left:4px}
.numcard .lab{margin-top:12px;color:#9cc5d4;font-weight:600;font-size:14.5px}
.numbers .sec-title{color:#fff}
.numbers .eyebrow{color:#7ec6da}
.numbers .eyebrow::before{background:var(--main)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;position:relative}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--bg-tint);color:var(--main-d);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;display:grid;place-items:center;font-size:16px}
.step h3{font-size:17px;color:var(--navy);margin:16px 0 8px}
.step p{font-size:14px;color:var(--gray);line-height:1.8}

/* news (home preview) */
section#news{background:linear-gradient(180deg,var(--bg) 0%,#fff 100%)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.news-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 24px;transition:.2s}
.news-item:hover{border-color:var(--main);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.news-item .meta{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.news-item time{font-size:13px;color:var(--gray);font-weight:600}
.news-item .cat{font-size:11px;font-weight:700;color:var(--main-d);background:var(--bg-tint);border-radius:999px;padding:3px 11px}
.news-item h3{font-size:16px;color:var(--navy);line-height:1.6;font-weight:700}

/* cases dark (home) */
.cases-dark{background:linear-gradient(160deg,#183B4A 0%,#1a5878 45%,#183B4A 100%)}
.cases-dark .sec-title{color:#fff}
.cases-dark .eyebrow{color:#7ec6da}
.cases-dark .eyebrow::before{background:var(--main)}
.cases-dark .lead{color:#a9bfc7}
.cases-dark .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.cases-dark .btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.cases-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}

/* responsive — index-page-specific */
@media(max-width:980px){
  /* hero: 写真を下に配置（背景から通常フローに戻す） */
  .hero-media{
    position:relative;
    width:100%; height:260px;
    margin-top:36px;
  }
  .hero-media::after{display:none}
  .hero::after{display:none}
  .hero-media .ph-img{border-radius:14px}
  /* ドットはhero-media内に収まるためモバイルでも自動表示 */
  .hero-grid{padding-bottom:0}
  .hero-text{max-width:100%}
  .phil{grid-template-columns:1fr;gap:34px}
  .journey-track,.steps,.num-grid{grid-template-columns:repeat(2,1fr)}
  .jline{display:none}
  .svc-row{grid-template-columns:1fr}
  .svc-row.rev .svc-media{order:0}
  .svc-media .ph-img{min-height:260px;height:260px}
  .statband .wrap{grid-template-columns:repeat(2,1fr)}
  .stat+.stat::before{display:none}
  /* 2列時：左列の右ボーダーだけ残す */
  .stat:nth-child(2)::before,.stat:nth-child(4)::before{display:none}
  .prob-grid,.news-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .prob-grid,.news-grid,.journey-track,.steps,.num-grid{grid-template-columns:1fr}
  .statband .wrap{grid-template-columns:repeat(2,1fr)}
  .svc-info{padding:28px 24px}
  .hero h1{font-size:32px}
}