/**
 * ハセガワ住設 共通部品層。
 *
 * 位置づけ:
 *   hs-ui-foundation.css（token）→ **hs-components.css（部品）** → ページ固有CSS
 *
 * 中身の出所は service-pages.css である。サービス一覧・詳細だけで使っていた
 * コンテナ、見出し帯、ボタン、サービスカード、FAQ、CTAパネルを、トップページと
 * 共有するためにここへ移した。値は1つも変更していない。
 *
 * セレクタは全て `.hs-ui` 配下へscopeしてある。本ファイルは全ページで読み込むため、
 * scopeを外すと未移行ページ（TCDが描画する領域）へ視覚指定が漏れる。
 * コーディング規則「共通基礎層は全ページで読み込む場合も未移行ページへ視覚指定を
 * 適用してはならない」に対応する。
 *
 * ページ固有の上書き（`.hs-service-detail .hs-service__section-head` など）は
 * service-pages.css 側に残してある。詳細度は同じ (0,2,0) で、読み込み順が
 * hs-components.css → service-pages.css のため、上書き側が後勝ちする。
 * この依存順を崩さないこと（functions.php の wp_enqueue_style の $deps で担保）。
 */

/* ===================================================================
 * ボックスモデル
 *
 * 部品層は単独で成立する必要がある。ページ固有層（`.hs-service-archive *` や
 * `.hs-front *`）の box-sizing に依存すると、それらを読み込まない文脈——
 * 単一投稿下部のCTAなど——で padding と border が幅に加算される。
 * 実際に375pxでCTAボタンが 272px + padding48 + border4 = 324px になり
 * 横スクロールが出た。部品のrootと子孫に対して明示する。
 * =================================================================== */

.hs-ui .hs-cta,
.hs-ui .hs-cta *,
.hs-ui .hs-service-card,
.hs-ui .hs-service-card *,
.hs-ui .hs-service-faq,
.hs-ui .hs-service-faq *,
.hs-ui .hs-service-button {
  box-sizing: border-box;
}

/* ===================================================================
 * レイアウト共通
 * =================================================================== */

.hs-ui .hs-service__container {
  margin-inline: auto;
  max-width: var(--hs-container);
  width: calc(100% - 40px);
}

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

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

.hs-ui .hs-service__section-label {
  color: var(--hs-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ===================================================================
 * ボタン
 * =================================================================== */

/*
 * 枠線は1px。2026-07-28に2pxから細くした。
 *
 * 見た目が変わるのはアウトライン版（`--outline`）だけである。塗りつぶし版
 * （既定、`--light`、`--estimate`）はいずれも `border-color` を背景と同色に
 * 揃えているため枠線が見えない。`box-sizing: border-box` と `min-height: 56px`
 * により外形も変わらない（内容 22.5px ＋ padding 28px ＋ border 2px = 52.5px で
 * min-height が効く）。サービス一覧・詳細の同じ部品も同様。
 */
.hs-ui .hs-service-button {
  align-items: center;
  background: var(--hs-blue);
  border: 1px solid var(--hs-blue);
  border-radius: 4px;
  color: var(--hs-white) !important;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.5;
  min-height: 56px;
  padding: 14px 24px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.hs-ui .hs-service-button:hover {
  background: var(--hs-blue-deep);
  border-color: var(--hs-blue-deep);
  transform: translateY(-2px);
}

.hs-ui .hs-service-button--light {
  background: var(--hs-white);
  border-color: var(--hs-white);
  color: var(--hs-blue-deep) !important;
}

.hs-ui .hs-service-button--light:hover {
  background: #eef8ff;
  border-color: #eef8ff;
}

.hs-ui .hs-service-button--estimate {
  background: #f0ad32;
  border-color: #f0ad32;
  box-shadow: 0 12px 28px rgba(20, 38, 52, 0.2);
  color: #173042 !important;
  gap: 14px;
  padding-inline: 28px;
}

.hs-ui .hs-service-button--estimate::after {
  content: "→";
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hs-ui .hs-service-button--estimate:hover {
  background: #ffc75c;
  border-color: #ffc75c;
  color: #173042 !important;
}

.hs-ui .hs-service-button--estimate:hover::after {
  transform: translateX(4px);
}

/*
 * 一覧ページへ移動するための補助ボタン。
 *
 * 塗りつぶしの `--hs-blue` にすると、カード内の「詳しく見る」（`#f0ad32`）や
 * 見積りCTAと同じ重さになり、どれが主動線か分からなくなる。回遊のための
 * リンクは主張を一段下げ、線と文字だけで示す。hoverで塗りつぶしへ反転する。
 */
.hs-ui .hs-service-button--outline {
  background: var(--hs-white);
  border-color: var(--hs-blue);
  color: var(--hs-blue) !important;
  gap: 10px;
}

.hs-ui .hs-service-button--outline::after {
  content: "→";
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hs-ui .hs-service-button--outline:hover {
  background: var(--hs-blue);
  border-color: var(--hs-blue);
  color: var(--hs-white) !important;
}

.hs-ui .hs-service-button--outline:hover::after {
  transform: translateX(4px);
}

/* ===================================================================
 * サービスカード
 * =================================================================== */

.hs-ui .hs-service-card {
  background: var(--hs-white);
  border: 1px solid var(--hs-line);
  border-radius: 0;
  box-shadow: 0 16px 42px rgba(0, 71, 127, 0.09);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.hs-ui .hs-service-card__media {
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
}

.hs-ui .hs-service-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  width: 100%;
}

.hs-ui .hs-service-card:hover .hs-service-card__media img {
  transform: scale(1.025);
}

.hs-ui .hs-service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 24px 24px;
}

.hs-ui .hs-service-card__eyebrow {
  color: var(--hs-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

/*
 * 見出しレベルはページによって変わる。サービス一覧はセクション見出しと並列のh2、
 * トップページはセクションh2の下位なのでh3になる。
 *
 * **文字サイズはここで持たない。** 元の service-pages.css には
 * `.hs-service-card h2 { font-size: 22px }` があったが、同じ詳細度 (0,1,1) の
 * `@media (min-width: 640px) { .hs-service-archive h2 { font-size: 28px } }` が
 * 後方にあるため、640px以上では22pxが効いていなかった（2026-07-27に本番の
 * /service/ で実測。カードh2は28px、セクションh2も28px）。
 *
 * この共通層へ `.hs-ui` を付けると詳細度が (0,2,1) へ上がり、22pxが勝つように
 * 変わってしまう。公開中の見た目を変えないため、文字サイズはページ側の責務にした。
 * 各ページの基本文字組み（`.hs-service-archive h2` / `.hs-front .hs-service-card h3`）が
 * 指定する。
 *
 * なお22pxと28pxのどちらが妥当かは別途の判断とする。現状はカード見出しと
 * セクション見出しが同じ28pxで、階層が平坦になっている。
 */
.hs-ui .hs-service-card :is(h2, h3) {
  margin-bottom: 14px;
}

.hs-ui .hs-service-card :is(h2, h3) a {
  text-decoration: none;
}

.hs-ui .hs-service-card :is(h2, h3) a:hover {
  color: var(--hs-blue);
}

.hs-ui .hs-service-card__body > p:not(.hs-service-card__eyebrow, .hs-service-card__audience) {
  color: var(--hs-text-sub);
  margin-bottom: 18px;
}

.hs-ui .hs-service-card__points {
  border-top: 1px solid var(--hs-line);
  list-style: none;
  margin-bottom: 18px;
  padding: 16px 0 0;
}

.hs-ui .hs-service-card__points li {
  color: var(--hs-text-sub);
  font-size: 13px;
  line-height: 1.65;
  padding-left: 18px;
  position: relative;
}

.hs-ui .hs-service-card__points li + li {
  margin-top: 6px;
}

.hs-ui .hs-service-card__points li::before {
  background: var(--hs-cyan);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 1px;
  position: absolute;
  top: 0.7em;
  width: 6px;
}

.hs-ui .hs-service-card__audience {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}

.hs-ui .hs-service-card__audience span {
  background: #edf7fc;
  border-radius: 999px;
  color: var(--hs-blue-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 6px 10px;
}

.hs-ui .hs-service-card__link {
  align-items: center;
  background: #f0ad32;
  box-shadow: 0 8px 22px rgba(20, 38, 52, 0.13);
  color: #173042 !important;
  display: flex;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  margin-top: auto;
  min-height: 54px;
  padding: 14px 20px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.hs-ui .hs-service-card__link span {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.hs-ui .hs-service-card__link:hover span {
  transform: translateX(4px);
}

.hs-ui .hs-service-card__link:hover {
  background: #ffc75c;
  transform: translateY(-2px);
}

/* ===================================================================
 * FAQ（開閉）
 * 上下線は「区切り」の役割を持つためborderを使う。装飾ではない。
 * =================================================================== */

.hs-ui .hs-service-faq {
  border-top: 1px solid var(--hs-line);
}

.hs-ui .hs-service-faq details {
  border-bottom: 1px solid var(--hs-line);
}

.hs-ui .hs-service-faq summary {
  color: var(--hs-text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  list-style: none;
  padding: 22px 44px 22px 42px;
  position: relative;
}

.hs-ui .hs-service-faq summary::-webkit-details-marker {
  display: none;
}

.hs-ui .hs-service-faq summary::before {
  color: var(--hs-blue);
  content: "Q";
  font-size: 18px;
  left: 8px;
  position: absolute;
  top: 19px;
}

.hs-ui .hs-service-faq summary::after {
  color: var(--hs-blue);
  content: "+";
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  right: 10px;
  top: 17px;
}

.hs-ui .hs-service-faq details[open] summary::after {
  content: "−";
}

.hs-ui .hs-service-faq details p {
  color: var(--hs-text-sub);
  margin-bottom: 0;
  padding: 0 20px 24px 42px;
}

/* ===================================================================
 * 締めのCTAパネル
 * =================================================================== */

.hs-ui .hs-service-cta {
  color: var(--hs-white);
  padding: var(--hs-block-space-y, 76px) 0;
}

.hs-ui .hs-service-cta__inner {
  display: grid;
  gap: 28px;
}

.hs-ui .hs-service-cta h2 {
  color: var(--hs-white);
  margin-bottom: 14px;
}

.hs-ui .hs-service-cta p {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 0;
}

/* ===================================================================
 * 内包型CTAパネル
 *
 * 上の `.hs-service-cta` は全幅セクション用で、サービスページが使う。
 * こちらはTCDコンテンツビルダーの内側（`.l-inner` の 1100px）に置く版で、
 * トップページと単一投稿下部のフリースペースが使う。全幅にできないため別に持つ。
 *
 * 背景はfoundationの `.hs-block--surface-deep` から取る。配色をここに複製しない。
 * 文字サイズを自前で持つのは、単一投稿ではページ固有CSSが読み込まれないためである。
 * =================================================================== */

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

.hs-ui .hs-cta-panel {
  color: var(--hs-white);
  padding: 44px 24px;
}

.hs-ui .hs-cta-panel__inner {
  display: grid;
  gap: 28px;
}

.hs-ui .hs-cta-panel h2 {
  color: var(--hs-white);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin: 0 0 14px;
  text-align: left;
}

.hs-ui .hs-cta-panel p {
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

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

@media (min-width: 640px) {
  .hs-ui .hs-service-button {
    width: auto;
  }

  /*
   * 本文ブロックのh2は640px以上で28pxになるが、CTAパネルは上げない。
   * 内包型で横幅が 1100px しかなく、右のボタン（330px＋gap56px）を除くと
   * 文字の入る幅は約600pxになる。28pxだと「…ご相談くだ／さい」のように
   * 語の途中で折り返す。
   */
  .hs-ui .hs-cta-panel h2 {
    font-size: 25px;
  }
}

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

  .hs-ui .hs-service-card__body {
    padding: 32px 30px 28px;
  }

  .hs-ui .hs-service-cta__inner {
    align-items: center;
    gap: 56px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hs-ui .hs-service-cta .hs-service-button {
    min-width: 330px;
  }

  .hs-ui .hs-cta-panel {
    padding: 56px;
  }

  .hs-ui .hs-cta-panel__inner {
    align-items: center;
    gap: 56px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hs-ui .hs-cta-panel .hs-service-button {
    min-width: 330px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-ui .hs-service-button,
  .hs-ui .hs-service-card__media img,
  .hs-ui .hs-service-card__link,
  .hs-ui .hs-service-card__link span,
  .hs-ui .hs-service-button--estimate::after,
  .hs-ui .hs-service-button--outline::after {
    transition: none;
  }
}