/**
 * トップページ固有CSS。
 *
 * 位置づけ:
 *   hs-ui-foundation.css（token）→ hs-components.css（部品）→ **hs-front-page.css**
 *
 * 自前のマークアップは全セレクタを `.hs-front` 配下へscopeしてある。トップページの
 * TCDコンテンツビルダー（フリースペース）へ挿入する各セクションは、いずれも
 * `.hs-ui.hs-front` を持つラッパーで包まれる。
 *
 * **例外がひとつある。** 末尾の「TCDが描画するボタン」は、親テーマが出力する
 * `.p-cb-button.c-button01` を直接上書きする。scopeの外だが意図的である。理由は
 * その節のコメントに書いてある。
 *
 * TCD側の前提（2026-07-27に本番で実測）:
 * - フリースペースの内側 `.p-cb-item-inner.l-inner` が横幅を決める。
 *   1440pxで1100px（左右margin 162.5px、padding 0）、375pxで335px（左右margin 20px）。
 *   したがって本ファイルでは左右のgutterを持たない。`.hs-service__container` を
 *   ここで使うと `calc(100% - 40px)` が二重にかかる。
 * - セクションの背景色と上下paddingはTCDのコンテンツビルダー設定側にある。
 *   `#service` と `#company` は背景 `#F7F9FC`。上下paddingは項目ごとに異なるため、
 *   本ファイルの各セクションが自前で `--hs-block-space-y` 分の余白を持つ。
 */

/* ===================================================================
 * ルートと文字組み
 * サービス一覧（.hs-service-archive）の基本文字組みと同じ値を、
 * トップページのscopeへ適用する。
 * =================================================================== */

.hs-front {
  overflow: hidden;
}

.hs-front * {
  box-sizing: border-box;
}

.hs-front h2,
.hs-front h3,
.hs-front p,
.hs-front ul,
.hs-front ol {
  margin-top: 0;
}

.hs-front h2,
.hs-front h3 {
  color: var(--hs-text);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
}

.hs-front h2 {
  font-size: 25px;
  line-height: 1.5;
}

.hs-front h3 {
  font-size: 18px;
  line-height: 1.6;
}

.hs-front a {
  color: inherit;
}

/* ===================================================================
 * セクションの外枠
 * =================================================================== */

.hs-front__section {
  padding: var(--hs-block-space-y, 76px) 0;
}

/*
 * TCD側で上下paddingを持つ項目（`#company` は72px）に載せる場合は、
 * セクション側の余白を打ち消して二重にしない。
 */
.hs-front__section--flush {
  padding: 0;
}

.hs-front__container {
  margin-inline: auto;
  max-width: var(--hs-container);
  width: 100%;
}

.hs-front__section-head {
  margin-bottom: 34px;
  max-width: 820px;
}

.hs-front__section-head > p:last-child {
  color: var(--hs-text-sub);
  margin-bottom: 0;
  margin-top: 16px;
}

/*
 * セクション末尾の一覧リンク。
 * 640px未満では `.hs-service-button` が `width:100%` になるため、幅を指定しない。
 * `min-width` を無条件に置くと、320px幅の端末で `l-inner`（280px）を超えて
 * 横スクロールが出る。
 */
/*
 * `.hs-front` を前置しているのは詳細度のため。上の `.hs-front p { margin-top: 0 }` が
 * (0,1,1) で、`.hs-front__more` 単独 (0,1,0) より強い。前置しないと margin-top が
 * 打ち消され、ボタンがグリッドに貼り付く。
 */
.hs-front .hs-front__more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/*
 * 一覧・会社概要へ移動するボタンは、部品の既定（15px / 56px）より一回り大きくする。
 * セクションを締める位置に単独で置くため、既定のままだと弱い。
 * トップページのscope内だけで上書きし、サービスページ側の同じ部品には影響させない。
 * 詳細度は (0,3,0) で、部品層の `.hs-ui .hs-service-button` (0,2,0) に勝つ。
 */
.hs-front .hs-front__more .hs-service-button,
.hs-front .hs-front__company .hs-service-button {
  font-size: 16px;
  min-height: 64px;
}

/* ===================================================================
 * サービス（カード4枚）
 * カード本体は hs-components.css の `.hs-service-card` をそのまま使う。
 * =================================================================== */

.hs-front__service-grid {
  display: grid;
  gap: 24px;
}

/*
 * カード見出しの文字組み。サービス一覧のカード見出しと同じ実効値に合わせてある
 * （640px未満で22px、640px以上で28px。2026-07-27に本番 /service/ で実測）。
 * トップではセクションh2の下位になるためh3を使うが、見た目は一覧と揃える。
 *
 * 一覧側は service-pages.css の `.hs-service-card h2` と
 * `@media (min-width: 640px) .hs-service-archive h2` の2箇所で決まっている。
 * 値を変えるときは3箇所を一緒に見直すこと。
 */
.hs-front .hs-service-card h3 {
  font-size: 22px;
  line-height: 1.5;
}

/* ===================================================================
 * ハセガワ住設の強み（5点）
 * 3列＋2列の折り返しになるため、flexで中央寄せして最終行の穴を作らない。
 * =================================================================== */

.hs-front__strength-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs-front__strength-list li {
  background: var(--hs-white);
  box-shadow: 0 16px 42px rgba(0, 71, 127, 0.09);
  display: flex;
  /*
   * flex-growは0にする。5件は3列＋2列に折り返すため、growを許すと
   * 最終行の2枚だけが伸びて1行目とカード幅が揃わない。
   */
  flex: 0 1 100%;
  flex-direction: column;
  min-width: 0;
  padding: 32px 28px 34px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hs-front__strength-list li:hover {
  box-shadow: 0 24px 54px rgba(0, 71, 127, 0.17);
  transform: translateY(-4px);
}

.hs-front__strength-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 26px;
}

/*
 * 円形番号は、サービス一覧の相談工程および強みページと同じ形式に揃えてある
 * （青→シアンのグラデーション、56px、8pxのリング）。
 * 円は形状に役割があるため border-radius を使う。
 */
.hs-front__strength-number {
  align-items: center;
  background: linear-gradient(135deg, var(--hs-blue), var(--hs-cyan));
  border-radius: 50%;
  box-shadow: 0 0 0 8px #eaf6fb;
  color: var(--hs-white);
  display: flex;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  height: 56px;
  justify-content: center;
  letter-spacing: -0.02em;
  line-height: 1;
  width: 56px;
}

.hs-front__strength-icon {
  color: var(--hs-cyan);
  flex-shrink: 0;
  height: 50px;
  opacity: 0.5;
  width: 50px;
}

.hs-front__strength-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.hs-front__strength-icon circle,
.hs-front__strength-icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.hs-front__strength-list h3 {
  color: var(--hs-text);
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 12px;
}

.hs-front__strength-list p {
  color: var(--hs-text-sub);
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 0;
}

/* ===================================================================
 * 会社概要への導線
 * 「これからも、この街とともに」の直後に置く。表は廃止した。
 * =================================================================== */

.hs-front__company {
  display: flex;
  justify-content: center;
}

/* ===================================================================
 * よくある質問（7件）
 * 開閉は details/summary のネイティブ動作。JavaScriptを足さない。
 * =================================================================== */

.hs-front__faq {
  margin-inline: auto;
  max-width: 880px;
}

/*
 * 締めのCTAは `.hs-cta` / `.hs-cta-panel` として hs-components.css にある。
 * 同じ部品を単一投稿の下部フリースペースでも使うため、トップ限定の本ファイルには置けない。
 */

/* ===================================================================
 * ブレークポイント
 * =================================================================== */

@media (min-width: 640px) {
  .hs-front h2,
  .hs-front .hs-service-card h3 {
    font-size: 28px;
  }

  .hs-front__strength-list li {
    flex-basis: calc(50% - 10px);
  }

  /*
   * 640px以上では `.hs-service-button` が `width: auto` になる。
   * 下限だけ揃えて、文言が長い場合は伸びるようにする。固定幅にすると
   * 「ハセガワ住設の強みを詳しく見る →」が収まらない。
   */
  .hs-front__more .hs-service-button,
  .hs-front__company .hs-service-button {
    min-width: 360px;
    padding-inline: 36px;
  }
}

@media (min-width: 860px) {
  .hs-front__section-head {
    margin-bottom: 42px;
  }

  .hs-front__service-grid {
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-front__strength-list {
    gap: 24px;
  }

  .hs-front__strength-list li {
    flex-basis: calc(33.333% - 16px);
  }

  .hs-front .hs-front__more {
    margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-front__strength-list li {
    transition: none;
  }

  .hs-front__strength-list li:hover {
    transform: none;
  }
}

/* ===================================================================
 * TCDが描画するボタン（`.p-cb-button.c-button01`）
 *
 * 対象は3つ。いずれも親テーマが出力するため、マークアップには手を入れられない。
 *   - #news    「お知らせ一覧を見る」   include/front-page/view-post.php
 *   - #column  「お役立ちコラム一覧を見る」 同上
 *   - split_layout「会社概要を見る」     include/front-page/view-split_layout.php:58
 * 見た目を `.hs-service-button--outline` へ揃える。
 *
 * **なぜトップページ限定の本ファイルに置くか。**
 * `.c-button01` は親テーマの汎用ボタンだが、2026-07-28時点で公開15URLのうち
 * トップページにしか出現しない（他13URLで0件）。全ページ層へ置くと、将来TCDが
 * 別ページで使ったときに巻き添えで見た目が変わる。他ページへ出るようになったら、
 * そのとき全ページ層へ移すか判断する。
 *
 * **詳細度は (0,2,0) が必要。**
 * テーマオプションの `tcd-custom-css` が子テーマCSSより**後**にheadへ出る
 * （実測: … → hasegawa-front-page → tcd-custom-css）。そこに
 * `.p-cb-button { margin: 32px auto 0 }` があるため、(0,1,0) では勝てない。
 *
 * **margin は指定しない。**
 * 中央寄せ（#news / #column の `margin: 32px auto 0`）と左寄せ（split_layout の
 * `margin-left: 0`、SPでは `margin-left: auto` で中央）を親テーマが出し分けている。
 * 上書きするとこの出し分けが壊れる。
 *
 * **transition と hover の浮き上がりは足さない。**
 * 親テーマの `.c-button01` が `transition: … !important` を持っており、`!important`
 * で殴り返さない限り上書きできない。その中身は `transform 1.2s` で、
 * `.hs-service-button:hover` の `translateY(-2px)`（0.2s）を付けると1.2秒かけて
 * のろのろ動く。背景色と文字色は親テーマ側の 0.3s で変化するため、hoverの反転は
 * そのまま成立する。浮き上がりの有無だけが新設ボタンとの差になる。
 * =================================================================== */

/*
 * `--hs-*` は hs-ui-foundation.css が `.hs-ui` に対して定義している。このボタンは
 * `.hs-ui` の外にあり var() が解決できないため、同じ値をここで再宣言する。
 * 値を変えるときは hs-ui-foundation.css と一緒に見直すこと。
 */
.p-cb-button.c-button01 {
  --hs-blue: #005aa0;
  --hs-white: #ffffff;
  align-items: center;
  background: var(--hs-white);
  border: 1px solid var(--hs-blue);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--hs-blue);
  display: flex;
  font-size: 16px;
  font-weight: 700;
  gap: 10px;
  height: auto;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1.5;
  min-height: 64px;
  min-width: 0;
  padding: 14px 24px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.p-cb-button.c-button01::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

@media (any-hover: hover) {
  .p-cb-button.c-button01:hover {
    background: var(--hs-blue);
    color: var(--hs-white);
  }

  .p-cb-button.c-button01:hover::after {
    transform: translateX(4px);
  }
}

/*
 * 下限は `min(360px, 100%)` にする。`360px` を無条件に置くと、split_layout の
 * 本文カラムが狭い幅で溢れる。768pxでは本文カラムが357px（padding込み、内側317px）
 * しかなく、横スクロールが出た（実測: 素の状態753px → 777px）。
 * #news / #column は `l-inner` 内で幅に余裕があるため360pxのまま。
 */
@media (min-width: 640px) {
  .p-cb-button.c-button01 {
    min-width: min(360px, 100%);
    padding-inline: 36px;
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-cb-button.c-button01::after {
    transition: none;
  }
}