/* ===================================================================
 * home.css — TOP(front-page.php / block/page/top.php)
 *
 * ヒーロー: 写真の実寸比率(PC 1920:970 / SP 375:748)に固定し、中央の白いフェードに文字を重ねる。
 *   写真と一緒に拡大縮小させるため、ロゴ・キャッチ・リードの大きさは vw の clamp() で決める。
 * 主要導線バナー: ヒーローの下端に重ねる(PC のみ)。重なりは画面幅に対する % で比率を保つ。
 * KSサービスについて: 雲4つ(SP は出さない)と鳥の装飾。下端の街並みはセクションの下の余白まで伸ばす。
 * お知らせ: カテゴリのタブ(Bootstrap の nav / tab)。狭い幅では折り返さず横スクロール。
 * SNS: お知らせと1つの塊に見せるため、上の余白を持たない。
 * 採用情報・お問い合わせ: 円形の写真(円は画像側)と文の2列。
 * =================================================================== */

/* --- ヒーロー ------------------------------------------------------ */

.top-hero {
  isolation: isolate;
  aspect-ratio: 1920 / 970;
}

.top-hero__inner {
  max-width: 640px;
}

.top-hero__inner,
.top-hero__top {
  gap: clamp(8px, 1.25vw, 24px);
}

.top-hero__logo {
  width: clamp(90px, 12.135vw, 260px);
  max-width: 40%;
}

/* 3行を1文字分ずつ右へずらす。em で書き、文字の大きさが変わってもずれは1文字分のまま */
.top-hero__catch {
  font-size: clamp(22px, 2.2917vw, 50px);
  line-height: 1.4;
}

.top-hero__catch-line:nth-child(2) {
  margin-left: 1em;
}

.top-hero__catch-line:nth-child(3) {
  margin-left: 2em;
}

.top-hero__lead {
  max-width: 34em;
  font-size: clamp(13px, 0.9375vw, 20px);
}

/* --- 主要導線バナー ------------------------------------------------ */

/* 画面幅の 10% だけ上へ引き上げてヒーローに重ねる(ヒーローも幅に比例して高さが変わるため) */
.top-actions {
  z-index: 5;
  margin-top: -10%;
}

/* 1枚 300px・間隔 30px。コンテナが狭いときは3枚とも比例して縮む */
.top-actions__list {
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 30px;
}

/* 高さも幅と同じ比率で縮め、中間幅でも扁平にしない */
.top-actions .action-btn {
  aspect-ratio: 300 / 146;
  font-size: clamp(14px, 0.9375vw, 18px);
}

/* --- KSサービスについて -------------------------------------------- */

.top-about__inner {
  max-width: 46em;
}

.top-about__lead {
  line-height: 1.9;
}

.top-about__cloud--top-left {
  top: 15%;
  left: 21.15%;
  width: 9.323vw;
  max-width: 179px;
}

.top-about__cloud--bottom-left {
  top: 35%;
  left: 8.854%;
  width: 11.198vw;
  max-width: 215px;
}

.top-about__cloud--top-right {
  top: 15%;
  right: 20.47%;
  width: 9.167vw;
  max-width: 176px;
}

.top-about__cloud--bottom-right {
  top: 35%;
  right: 6.823%;
  width: 7.813vw;
  max-width: 150px;
}

/* ボタンを行の中央に保ったまま、ボタンの右へ置く(基準はボタンを包む段落) */
.top-about__bird {
  width: clamp(60px, 9.427vw, 181px);
  margin-left: clamp(16px, 7.8125vw, 150px);
}

/* 帯の直後にクリームの地を続けるため、セクションの下の余白を打ち消す */
.top-about__townscape {
  margin-top: 2.5rem;
  margin-bottom: calc(var(--space-6xl) * -1);
}

/* --- サービス内容 -------------------------------------------------- */

.top-services__group + .top-services__group {
  margin-top: var(--space-4xl);
}

.top-services__group-title {
  margin-bottom: 2.5rem;
}

.top-services__more {
  margin-top: 2.5rem;
}

/* --- お知らせ ------------------------------------------------------ */

/* 1項目の幅は「4等分(間隔 .gap-1 を引いてから割る)、ただし 140px 以上」。入りきらない分は横スクロール */
.top-news__tabs {
  margin-bottom: 2.5rem;
  padding: 6px;
  overscroll-behavior-x: contain;
  background: var(--project-color-bg-tab);
  scrollbar-width: none;
}

.top-news__tabs::-webkit-scrollbar {
  display: none;
}

.top-news__tab {
  flex: 0 0 max(140px, calc((100% - 3 * var(--space-xs)) / 4));
}

.top-news__tab-btn {
  min-height: 44px;
  padding-block: 10px;
  color: var(--project-color-text);
}

.top-news__tab-btn:hover,
.top-news__tab-btn:focus {
  color: var(--project-color-text);
}

.top-news__tab-btn.active {
  background: var(--project-color-primary);
  color: var(--project-color-text-on-fill);
  font-weight: 700;
}

.top-news__more {
  margin-top: 2.5rem;
}

/* --- SNS ----------------------------------------------------------- */

.top-sns__banner {
  min-height: 84px;
  padding-inline: 2.5rem;
  border-radius: var(--project-radius-lg);
}

.top-sns__banner:hover {
  opacity: 0.9;
}

.top-sns__banner--instagram {
  background: linear-gradient(90deg, #7b2bb5 0%, #d62976 55%, #f79b3b 100%); /* token-ignore: Instagram のブランド配色(外部サービス固有色) */
}

.top-sns__banner--facebook {
  background: #1877f2; /* token-ignore: Facebook のブランド色(外部サービス固有色) */
}

.top-sns__icon {
  width: 52px;
  height: 52px;
}

.top-sns__note {
  font-size: var(--fs-sm);
}

/* --- 採用情報 / お問い合わせ・ご相談 -------------------------------- */

/* 1列目は写真の原寸(採用 578px / お問い合わせ 568px)を画面幅に比例させた幅 */
.top-recruit,
.top-contact {
  grid-template-columns: minmax(240px, clamp(240px, 29.01vw, 578px)) minmax(0, 1fr);
  gap: var(--space-4xl);
}

.top-contact {
  grid-template-columns: minmax(0, 1fr) minmax(240px, clamp(240px, 27.08vw, 568px));
}

.top-recruit__catch,
.top-contact__text {
  font-size: 1.5rem;
}

.top-recruit__text {
  line-height: 1.9;
}

/* 電話番号はセクション見出しと同格の大きさ。上の余白は文字の大きさ 1つ分 */
.top-contact__tel {
  margin-top: 1em;
  font-size: 2.5rem;
  line-height: 1.2;
}

.top-contact__tel a {
  color: var(--project-color-text);
  text-decoration: none;
}

.top-contact__tel a:hover {
  text-decoration: underline;
}

/* --- 中間幅 -------------------------------------------------------- */

/* 本文の列が狭まるので、電話番号を折り返さない大きさに縮める */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .top-contact__tel {
    font-size: 1.625rem;
  }
}

/* --- SP ------------------------------------------------------------ */

@media (max-width: 767.98px) {
  .top-hero {
    aspect-ratio: 375 / 748;
  }

  .top-hero__inner,
  .top-hero__top {
    gap: var(--space-md);
  }

  .top-hero__logo {
    width: 107px;
    max-width: none;
  }

  .top-hero__catch {
    font-size: 1.25rem;
  }

  .top-hero__lead {
    font-size: 0.9375rem;
  }

  .top-about__townscape {
    margin-bottom: -3.5rem;
  }

  .top-services__group + .top-services__group {
    margin-top: 2.5rem;
  }

  .top-sns__banner {
    padding-inline: var(--space-lg);
  }

  .top-recruit,
  .top-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .top-recruit__visual {
    max-width: 302px;
  }

  .top-contact__visual {
    max-width: 325px;
  }

  .top-contact__tel {
    font-size: 1.875rem;
  }
}