/* ========================================
   トップページ専用スタイル
   ======================================== */

/* ----------------------------------------
   ヒーロー（キャッチコピー専用）
---------------------------------------- */
.home-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(var(--space-xl), 6vw, var(--space-4xl));
  background: var(--bg-white);
}

.home-hero__inner {
  width: min(1100px, 92vw);
  margin-inline: auto;
  text-align: center;
}

.home-hero__title {
  margin: 0 0 var(--space-xl);
  font-weight: var(--font-weight-black);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.home-hero__line {
  display: block;
  font-size: clamp(3.2rem, 8vw, 8rem);
  color: var(--main-text);
}

.home-hero__subtitle {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.7;
  color: var(--auxiliary-text);
}

/* ----------------------------------------
   トップページ：ヒーローの中央寄せ＆行間調整
   既存の共通レイアウトを壊さないためホーム限定で上書き
---------------------------------------- */
body.home .hero-content,
body.front-page .hero-content {
  text-align: center;
  margin: 0 auto;
  padding-right: 0;
}

body.home .hero-title,
body.front-page .hero-title {
  line-height: 1.2; /* 既定1.1 → 少し広げる */
}

body.home .hero-title .title-jp + .title-jp,
body.front-page .hero-title .title-jp + .title-jp {
  margin-top: 0.2em; /* 行間の視覚的ゆとりを追加 */
}

body.home .hero-subtitle,
body.front-page .hero-subtitle {
  line-height: 1.8; /* 既定1.6 → 広げる */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------
   トップページ：ヒーロー・スライドインジケーター
---------------------------------------- */
body.home .hero,
body.front-page .hero { position: relative; }

body.home .hero-indicator,
body.front-page .hero-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vw, 40px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  gap: 12px;
  width: min(640px, 92vw);
  z-index: 4;
  pointer-events: none;
  color: #fff;
  /* 背景・枠・影を排除してミニマル表示 */
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* 円形インジケータ */
body.home .hero-indicator__circle,
body.front-page .hero-indicator__circle {
  position: relative;
  width: 120px;
  height: 120px;
}

body.home .hero-indicator__svg,
body.front-page .hero-indicator__svg {
  display: block;
  width: 120px;
  height: 120px;
  transform: rotate(-90deg); /* 上を起点に */
}

body.home .hero-indicator__svg .ring-bg,
body.front-page .hero-indicator__svg .ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 8;
}

body.home .hero-indicator__svg .ring-progress,
body.front-page .hero-indicator__svg .ring-progress {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292; /* 2 * PI * 54 ≈ 339.292 */
  stroke-dashoffset: 339.292; /* 0%から開始 */
  transition: stroke-dashoffset linear;
}

body.home .hero-indicator__count,
body.front-page .hero-indicator__count {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

body.home .hero-indicator__count .current,
body.front-page .hero-indicator__count .current { font-size: clamp(2.2rem, 3.2vw, 2.8rem); font-weight: var(--font-weight-black); }
body.home .hero-indicator__count .sep,
body.front-page .hero-indicator__count .sep { display: none; }
body.home .hero-indicator__count .total,
body.front-page .hero-indicator__count .total { opacity: 0.85; font-size: 1.1rem; margin-top: 0.25em; }
body.home .hero-indicator__count .total::before,
body.front-page .hero-indicator__count .total::before { content: '/'; margin-right: 0.2em; }

/* 旧スタイルは削除（円形中央配置に一本化） */

/* 直線プログレスは廃止（円形に統合） */

/* dot pagination */
body.home .hero-indicator__dots,
body.front-page .hero-indicator__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body.home .hero-indicator__dot,
body.front-page .hero-indicator__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  transform: scale(1);
  transition: transform 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

body.home .hero-indicator__dot.is-active,
body.front-page .hero-indicator__dot.is-active {
  background: var(--accent-color);
  box-shadow: 0 0 0 6px rgba(255,215,0,0.18), 0 6px 14px rgba(0,0,0,0.25);
  transform: scale(1.25);
}

/* 統計セクション */
.stats-grid {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  background-color: var(--bg-white);
  padding: var(--space-2xl);
  transition: var(--transition);
}

/* タブレットでの縦長対策 */
@media (max-width: 1024px) {
  .stat-item {
    padding: var(--space-xl);
  }
}

/* スマホでの縦長対策 */
@media (max-width: 767px) {
  .stat-item {
    padding: var(--space-lg);
  }
}

.stat-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

.stat-number {
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: var(--font-weight-black);
  color: var(--emphasis);
  margin-bottom: var(--space-md);
  line-height: 1;
}

.stat-label {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  color: var(--main-text);
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.stat-description {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--auxiliary-text);
  width: 100%;
  margin: 0;
  padding: 0 var(--space-md);
  word-break: break-all;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 767px) {
  .stat-description {
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
    line-height: 1.7;
    word-break: break-all;
    overflow-wrap: break-word;
  }
}

/* サービスカード専用スタイル */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card .card-content h3 {
  margin-bottom: var(--space-md);
}

.service-card .card-content p {
  flex: 1;
  margin-bottom: var(--space-lg);
}

/* サービス一覧のグリッド調整 */
.services-grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .service-card .card-image img {
    height: 280px;
  }
}

@media (min-width: 1200px) {
  .service-card .card-image img {
    height: 320px;
  }
}

/* ニュースリスト */
.news-list {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px) {
  .news-list {
    padding: 0 var(--space-md);
  }
}

.news-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-line);
  transition: var(--transition);
}

.news-item:hover {
  transform: translateX(var(--space-sm));
}

.news-date {
  font-size: var(--text-sm);
  color: var(--auxiliary-text);
  min-width: 120px;
}

.news-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--main-text);
}

.news-category {
  background-color: var(--emphasis);
  color: var(--bg-white);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* 会社情報 */
.company-info {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-lg);
}

@media (max-width: 767px) {
  .company-info {
    padding: 0 var(--space-md);
  }
}

.company-stats {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .company-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .company-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.company-stat {
  text-align: center;
  background-color: var(--bg-white);
  padding: var(--space-xl);
}

.company-stat h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-sm);
  color: var(--main-text);
}

.company-stat p {
  font-size: var(--text-base);
  color: var(--auxiliary-text);
}