/* ======================================================
   KENNDO — page-index.css  (TOP / ホーム)
   ====================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  /* height固定だと、内容がビューポートより高いブラウザ窓で上下が切れる（ロゴが欠ける）。
     min-heightで「最低でも画面いっぱい(util+nav分を除く)」を満たしつつ、
     内容が上回る場合は伸びて全部見せる。上限900pxは min() 側で担保。 */
  min-height: min(calc(100vh - var(--nav-h) - var(--util-h)), 900px);
  padding: 32px 0 76px;   /* 下は多めに。窓が低いとCTAがスライダーのドットと重なるため */
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--navy);
}

/* Slider */
.slider { position: absolute; inset: 0; z-index: 0; }
.slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.slide.active { opacity: 1; }
/* 写真の読み込み前・失敗時は下地の紺が出る（.hero の background も紺） */
.slide { background-color: var(--navy-dark); }
/* 元PNG(top_hero_*.png)は残置。写真はJPEGの方が軽く、見た目の差は平均0.5/255で知覚不能 */
.slide.s1 { background-image: url('img/top_hero_1.jpg'); }
.slide.s2 { background-image: url('img/top_hero_2.jpg'); }
.slide.s3 { background-image: url('img/top_hero_3.jpg'); }

/* animated grid pattern overlay */
.slide::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,167,189,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,167,189,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}

/* kenndo.com本家と同等の明るさを優先（本家=平均輝度0.253 / 素通し）。
   ネイビーではなく黒。ネイビーだと暗くすると同時に青を塗るため雲が青灰色になる。
   この写真は文字が乗る位置に輝く雲があり、AA(4.5)を満たす濃さにすると本家の40%まで
   暗くなってしまう。よって濃度は下げ、可読性はtext-shadowで担保する方針。
   （本家も同じ判断で、実測1.1〜2:1と可読性を犠牲にしている） */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,0) 85%);
}

.hero-dots {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 10px;
}
.hero-dots i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.hero-dots i.active { background: var(--accent); transform: scale(1.4); }

.hero > .wrap { position: relative; z-index: 2; }
/* ヘッダーにも同じブランドが出るため alt="" の装飾扱い（読み上げ二重を避ける） */
.hero-logo {
  width: 96px; height: auto;
  margin-bottom: 20px;
  animation: heroText 1s ease .15s both;
}
.hero h1 {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 24px;
  /* オーバーレイを薄くした分、可読性はここで担保する（多層＝文字の縁に沿った暗いハロー） */
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.5), 0 6px 30px rgba(0,0,0,.35);
  animation: heroText 1s ease .3s both;
}
@keyframes heroText {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero .hero-lead {
  /* 写真の上では82%白は自らコントラストを捨てる。白100%にして
     オーバーレイを濃くせずに可読性を稼ぐ（＝写真のビビッドさを守る） */
  font-size: 15px; color: #fff; line-height: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.5);
  max-width: 600px; margin-bottom: 40px;
  animation: heroText 1s ease .5s both;
}
.hero .cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: heroText 1s ease .7s both;
}

/* ---- Section: 課題提起 ---- */
.qgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin: 32px 0 40px;
}
.qgrid span {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.6;
  transition: box-shadow var(--transition), transform var(--transition);
}
.qgrid span:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.closing {
  font-size: 16px; color: var(--navy); font-weight: 700;
  border-left: 4px solid var(--accent); padding-left: 18px;
  margin-top: 8px;
}

/* ---- 5 STEPS ---- */
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-bottom: 48px;
}
.step {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 20px; text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
  border: 1px solid var(--line);
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.step .no {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-darker) 100%);
  color: #fff; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.step h4 {
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--navy); line-height: 1.4; margin-bottom: 10px;
}
.step p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ---- KFI ---- */
.kfi { background: #fff; }
.kfi-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}
.kfi-photo {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: linear-gradient(135deg, #1a4a78, #0e2740);
}
.kfi-text .tagname {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--accent-text); margin-bottom: 16px;
}
.kfi-text p { font-size: 15px; line-height: 1.9; color: #48535f; margin-bottom: 20px; }
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 28px 0;
}
.stat {
  background: var(--bg-alt); border-radius: var(--radius);
  padding: 18px 20px; border-left: 4px solid var(--accent);
}
.stat b {
  display: block; font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 4px;
}
.stat span { font-size: 12.5px; color: var(--muted); }
.kfi-loop {
  font-size: 14px; color: var(--navy); font-weight: 700;
  font-style: italic; margin-bottom: 24px !important;
  padding: 14px 18px;
  background: var(--accent-light); border-radius: 6px;
}

/* ---- WHY KENNDO ---- */
.why {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.why .card {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 28px 24px;
  border: 1px solid var(--line);
  transition: box-shadow var(--transition), transform var(--transition);
}
.why .card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.why .card .n {
  font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 800;
  color: var(--accent); opacity: .25; line-height: 1; margin-bottom: 12px;
}
.why .card h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.5; }
.why .card p { font-size: 13.5px; color: var(--muted); line-height: 1.8; }

/* ---- チェックリスト (FOR YOU) ---- */
.checks {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 40px;
}
.checks li {
  background: #fff; border-radius: 8px;
  border: 1px solid var(--line);
  padding: 14px 18px 14px 44px;
  font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.6;
  position: relative;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.checks li::before {
  content: '✓';
  position: absolute; left: 16px; top: 14px;
  width: 20px; height: 20px; background: var(--accent-dark);
  color: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.checks li:hover { box-shadow: var(--shadow-sm); border-color: var(--accent); }

/* ---- 注力領域 ---- */
.areas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 8px;
}
.area {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px 16px;
  text-align: center; border: 1px solid var(--line);
  transition: box-shadow var(--transition), transform var(--transition);
}
.area:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* 絵文字はOS依存で見た目が変わりコーポレート用途に軽い。線画SVG＋角丸タイルに置換 */
.area .ic {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--accent-light);
  color: var(--accent-text);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.area .ic svg { width: 26px; height: 26px; display: block; }
.area:hover .ic { background: var(--accent-dark); color: #fff; transform: scale(1.06); }
.area span { font-size: 13px; color: var(--navy); font-weight: 500; line-height: 1.5; }

/* ---- 案件事例 ---- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.case {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  border: 1px solid var(--line);
  transition: box-shadow var(--transition), transform var(--transition);
}
.case:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.case .ph {
  height: 200px; background: linear-gradient(135deg, #1a4a78 0%, #0e2740 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.case .ph::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 70%);
  opacity: .18;
}
.case .ph .tag {
  font-size: 12px; color: rgba(255,255,255,.7);
  padding: 8px 14px; background: rgba(0,0,0,.3);
  border-radius: 4px; position: relative; z-index: 1;
}
.case h4 { font-size: 15px; font-weight: 700; color: var(--navy); padding: 18px 20px 6px; }
.case p { font-size: 13px; color: var(--muted); padding: 0 20px 20px; line-height: 1.7; }

/* ---- KENNDO NOTE 帯 ---- */
.notesec {
  background: var(--accent-light);
  border-top: 1px solid rgba(0,167,189,.22);
  border-bottom: 1px solid rgba(0,167,189,.22);
  padding: 72px 0;   /* 送客だけの帯。前後の本編セクション(96px)より浅くして従属関係を出す */
}
/* .eyebrow の --accent-text は --accent-light 上で5.14。この帯でもAAを満たす（common.css の注記参照） */
.notesec h2.sec { margin-bottom: 20px; }
.notesec .lead { margin-bottom: 32px; }

/* ---- 代表メッセージ ---- */
.rep {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 56px; align-items: start;
}
.rep-photo {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: linear-gradient(135deg, #1a4a78, #0e2740);
}
.rep blockquote {
  font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.8;
  border-left: 4px solid var(--accent); padding-left: 20px;
  margin-bottom: 20px; font-style: italic;
}
.rep .name { font-size: 14px; color: var(--muted); margin-bottom: 24px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .why   { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .kfi-body { grid-template-columns: 1fr; gap: 40px; }
}
/* common.css が section を64pxに落とすブレークポイント。
   合わせて下げないと、この帯だけ周囲より深くなり従属関係が反転する。 */
@media (max-width: 900px) {
  .notesec { padding: 56px 0; }
}
@media (max-width: 768px) {
  .qgrid  { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: repeat(2, 1fr); }
  .cases  { grid-template-columns: 1fr; }
  .rep    { grid-template-columns: 1fr; }
  .rep-photo { max-width: 260px; }
  .stats  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero-logo { width: 92px; margin-bottom: 18px; }  /* 縦積みロックアップは背が高い。狭い画面では詰める */
  .steps { grid-template-columns: 1fr 1fr; }
  .qgrid { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .areas  { grid-template-columns: repeat(2, 1fr); }
  .why    { grid-template-columns: 1fr; }
  .stats  { grid-template-columns: 1fr; }
}