/*
 * top.css
 * TOPページ専用スタイル
 * design-system.css → layout.css の後に読み込む
 */

/* ============================================================
 *  [1] ヒーロースライダー
 * ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-brand-primary-pale);
}

.hero__slider {
  position: relative;
  width: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms var(--ease-default);
  pointer-events: none;
}

.hero__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .hero__img {
    aspect-ratio: 16 / 6;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.00) 100%
  );
  display: flex;
  align-items: center;
}

.hero__overlay .container {
  padding-block: var(--space-10);
}

.page-hero__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.7);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}

.hero__catch {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .hero__catch {
    font-size: var(--text-5xl);
  }
}

.hero__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.88);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
  max-width: 480px;
}

@media (min-width: 768px) {
  .hero__sub {
    font-size: var(--text-base);
  }
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-base);
  backdrop-filter: blur(2px);
}

.hero__btn:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: #ffffff;
  color: #ffffff;
}

/* スライダードット */
.hero__controls {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}

.hero__dot.is-active {
  background-color: #ffffff;
  width: 24px;
}

/* ============================================================
 *  [2] お知らせ
 * ============================================================ */

.top-news__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .top-news__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }
}

.top-news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .top-news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 120px;
  }
}

.top-news__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.top-news__more {
  font-size: var(--text-xs);
  color: var(--color-brand-primary);
}

.top-news__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.top-news__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.top-news__item:first-child {
  border-top: 1px solid var(--color-border-light);
}

.top-news__date {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.top-news__badge {
  font-size: var(--text-xs);
  color: var(--color-brand-primary-dark);
  background-color: var(--color-brand-primary-light);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.top-news__link {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

.top-news__link:hover {
  color: var(--color-brand-primary);
}

/* ============================================================
 *  [3] ターゲット別 導線カード
 * ============================================================ */

.top-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .top-nav__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.top-nav__item {
  display: flex;
}

/* [3] 変更箇所① .top-nav__card の align-items を center に */
.top-nav__card {
  width: 100%;                  /* カード幅を親要素いっぱいに統一 */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;          /* flex-start → center に変更 */
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-shadow);
}

.top-nav__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.top-nav__card--line {
  background-color: var(--color-brand-primary-pale);
  border-color: var(--color-brand-primary-light);
}

/* [3] 変更箇所② アイコン丸窓 ── 修正版 */
.top-nav__card-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--color-bg-white);
  /* ↓ グローバルリセットの height:auto を封じる */
  align-self: center;
}

.top-nav__card-icon img {
  width: 100%;
  height: 100% !important;   /* グローバルの height:auto を強制上書き */
  object-fit: cover;
  display: block;
}

/* [3] 変更箇所③ card-body のテキストも中央寄せに合わせる場合 */
.top-nav__card-body {
  width: 100%;                  /* body 幅をカード幅いっぱいに */
}

.top-nav__card-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

.top-nav__card-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  text-align: center;
}

.top-nav__card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ============================================================
 *  [4] 会社コンセプト
 * ============================================================ */

.top-concept__nums {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.top-concept__num-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.top-concept__num-value {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  line-height: 1;
}

.top-concept__num-plus {
  font-size: var(--text-3xl);
}

.top-concept__num-unit {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.top-concept__num-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.top-concept__cta {
  text-align: center;
}

/* ============================================================
 *  [5] LINE CTA
 * ============================================================ */

.top-line__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .top-line__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
  }
}

.top-line__text {
  flex: 1;
}

.top-line__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .top-line__title {
    font-size: var(--text-4xl);
  }
}

.top-line__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}

.top-line__steps {
  display: flex;
  align-items: flex-start; /* SPで矢印とテキスト2行時の高さがズレないよう上揃えに変更 */
  gap: var(--space-2);
  flex-wrap: nowrap; /* 変更: wrap → nowrap（SPで折り返さないため） */
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .top-line__steps {
    align-items: center;
    gap: var(--space-3);
  }
}

.top-line__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 0; /* 追加: 3項目を均等に縮めて1行に収める */
  min-width: 0; /* 追加: flex子要素のテキストが行を押し広げるのを防止（折り返しを許可） */
}

.top-line__step-num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0; /* 追加: 数字丸が潰れないように固定 */
}

.top-line__step-text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
  overflow-wrap: break-word; /* 追加: 入りきらない場合は折り返す（3項目を1行に収めるため） */
}

.top-line__step-arrow {
  font-size: var(--text-2xl);
  color: var(--color-brand-primary-light);
  flex-shrink: 0; /* 追加: 矢印が潰れないように固定 */
  padding-top: 4px; /* 追加: 丸数字の中央付近に視覚調整（align-items: flex-startへの変更に伴う） */
}

.top-line__image {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .top-line__image {
    width: 380px;
    margin-inline: 0;
  }
}

.top-line__image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
 *  [6] サービス紹介
 * ============================================================ */

.top-services__grid {
  display: grid;
  grid-template-columns: 1fr; /* SP: 1列を明示 */
  gap: var(--space-5);
}

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

.top-services__grid > li {
  display: flex;
  width: 100%;   /* SP/PC両方でli幅を確保 */
  min-width: 0;  /* flex子要素の意図しない収縮を防止 */
}

.top-service-card {
  display: flex;
  flex-direction: column;
  width: 100%;   /* flex子要素として幅を確保 */
  height: 100%;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: var(--transition-shadow);
}

.top-service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.top-service-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-light); /* 画像未読込時のフォールバック背景 */
}

.top-service-card__img-wrap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;   /* flex/grid内のimgが本来サイズで伸びるのを防止 */
  max-height: 100%;
  object-fit: cover;
  font-size: 0;    /* 画像が読めない場合、alt文字が枠を押し広げるのを防止 */
  color: transparent; /* alt文字色を透明にし、崩れた場合の見た目を抑える */
  transition: transform var(--duration-slow) var(--ease-default);
}

.top-service-card:hover .top-service-card__img-wrap img {
  transform: scale(1.04);
}

.top-service-card__body {
  padding: var(--space-5);
}

.top-service-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.top-service-card__title {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

/* ============================================================
 *  [7] 採用 CTA
 * ============================================================ */

.top-recruit__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .top-recruit__inner {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-12);
  }
}

.top-recruit__text {
  flex: 1;
}

.top-recruit__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .top-recruit__title {
    font-size: var(--text-4xl);
  }
}

.top-recruit__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}

.top-recruit__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.top-recruit__image {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .top-recruit__image {
    width: 380px;
    margin-inline: 0;
  }
}

.top-recruit__image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
 *  [8] ブログ新着
 * ============================================================ */

.top-blog__grid {
  display: grid;
  gap: var(--space-5);
}

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

.top-blog__card {
  display: block;
  text-decoration: none;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-shadow);
}

.top-blog__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.top-blog__card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.top-blog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-default);
}

.top-blog__card:hover .top-blog__card-img img {
  transform: scale(1.04);
}

.top-blog__card-body {
  padding: var(--space-4);
}

.top-blog__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.top-blog__card-meta time {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
}

.top-blog__card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

/* ============================================================
 *  [9] Instagram
 * ============================================================ */

.top-instagram__account {
  color: var(--color-text-primary);
  text-decoration: none;
}

.top-instagram__account:hover {
  color: var(--color-brand-primary);
}

.top-instagram__placeholder {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-bottom: var(--space-4);
}

.top-instagram__feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}