/* ============================================================
   Le tiroir | site-system.css
   サイト横断のレスポンシブ / タイポグラフィ統一レイヤー
   各ページのインラインCSSの「後」に読み込むこと。
   ------------------------------------------------------------
   フォントの役割
   - 見出し・ナビ・番号      : Noto Sans JP W600 (--font-serif)
   - 本文・説明文            : ヒラギノ明朝 W3 (--font-sans)
   - 価格・英数字アクセント  : Montserrat (--font-en)
   ============================================================ */

/* ------------------------------------------------------------
   1) 日本語組版の基礎
   ------------------------------------------------------------ */
body {
  overflow-wrap: break-word;
  line-break: strict;            /* 句読点が行頭に来ない */
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* 価格・数値・電話番号は途中で折り返さない */
.funding__total-price, .funding__item-price, .type-card__price,
.tel-bar__number, .side-tel__number, .funding__total-left {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

/* 本文の読みやすい最大幅(約40字) */
.hero__desc, .page-head__lead, .concept-intro__lead, .concept-intro__desc,
.contact-intro__lead, .faq-head__lead, .estimate__desc, .consult__desc,
.fv__desc, .works-intro {
  max-width: 40em;
}
/* 中央揃えの文章はブロックごと中央へ */
.hero__desc, .estimate__desc, .concept-intro__lead, .concept-intro__desc {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   2) 画像比率の統一(カード内でガタつかないように)
   ------------------------------------------------------------ */
.rec-card__icon--ill {
  width: min(150px, 78%);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec-card__icon--ill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.step-card__icon--ill {
  width: 112px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card__icon--ill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------
   3) カード高さの統一(内容量が違っても揃える)
   ------------------------------------------------------------ */
.recommend__grid, .price-type__cards, .options__track, .works__grid { align-items: stretch; }
.rec-card, .type-card, .option-card { display: flex; flex-direction: column; }
.rec-card__desc, .option-card__desc, .type-card__desc { flex: 1; }
.contact-steps__inner { align-items: stretch; }
.step-card { display: flex; flex-direction: column; }
.step-card__desc { flex: 1; }

/* ------------------------------------------------------------
   4) タブレット帯 (769〜1024px)
   ------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --pad-side: 32px; --text-v37-pad-side: 32px; }

  /* ナビはドロワーへ(中間幅での圧迫を防ぐ) */
  .gnav { display: none; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    position: relative; z-index: 10001;
  }
  .hamburger span {
    display: block; width: 24px; height: 2px;
    background: var(--c-text); margin: 0 auto;
    transition: transform .4s ease;
  }
  .hamburger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .hamburger.is-open span { background: var(--c-white); }
  .header__inner { padding-right: calc(var(--pad-side) + 240px); }

  /* グリッドの密度を1段落とす */
  .recommend__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .options__track { grid-template-columns: repeat(3, 1fr); }
  .works__grid { grid-template-columns: repeat(2, 1fr); }
  .included__items { grid-template-columns: repeat(4, 1fr); gap: 24px 12px; }
  .flow__steps { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  .flow__arrow { display: none; }
  .contact-steps__inner { flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .contact-steps__inner > .step-card { flex: 0 1 calc(33.3% - 24px); }
  .plans__row { flex-direction: column; }
  .plans__row .plan-card { width: 100%; }

  /* 資金計画:7項目を折り返し可能に */
  .funding__items { flex-wrap: wrap; row-gap: 18px; justify-content: center; column-gap: 28px; }
  .funding__calc { flex-wrap: wrap; row-gap: 16px; }
  .funding__total-left { flex: 0 0 auto; min-width: max-content; padding-right: 20px; }

  /* 標準仕様の円を少し小さく(はみ出し防止) */
  .spec__item-img, .spec__item .ph--circle { width: 88px; height: 88px; }
}

/* ------------------------------------------------------------
   5) スマートフォン (〜768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* PC用の固定改行を解除して自然に折り返す */
  p br,
  .estimate__desc br, .cta__message br, .bottom-cta__message br,
  .consult__desc br, .type-card__desc br, .option-card__desc br,
  .rec-card__desc br, .step-card__desc br, .merit-item__desc br { display: none; }

  /* 見出しアニメーション(tx-line)の行固定も解除して自然に流す */
  .tx .tx-line, .tx .tx-inner { display: inline; }

  /* 小さすぎる文字の底上げ */
  .sec-head__note, .footer__copy { font-size: 12px; }

  /* CTAボタンは縦積み・幅を揃える */
  .estimate__buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .estimate__buttons .estimate__btn { width: 100%; text-align: center; }

  /* 本文が細くなりすぎないように */
  .hero__desc, .page-head__lead, .estimate__desc { max-width: none; }

  /* お問い合わせ:縦積み時はカードを全幅に */
  .contact-main__inner { align-items: stretch; }
  .form-card { width: 100%; }

  /* お知らせ:カテゴリーは横スクロールのチップ列に */
  .news__side {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .news__side::-webkit-scrollbar { display: none; }
}

/* 幅が特に狭い端末 (〜480px) */
@media (max-width: 480px) {
  .form-card { padding: 24px 14px; min-width: 0; }
  .form-card * { min-width: 0; }
  input, select, textarea { max-width: 100%; }
  .included__items { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .spec__grid { gap: 24px 12px; }
  .sim-fab img { width: 112px; }
}

/* ------------------------------------------------------------
   6) ヘッダーCTA:マウスオーバーの動作を完全に無効化
   ------------------------------------------------------------ */
.header__cta { transition: none; }
.header__cta:hover { transform: translateY(-50%); }
.header__cta:hover img { opacity: 1; filter: none; transform: none; }

/* ------------------------------------------------------------
   7) フッター文字・ボタン文字はW600で統一
   ------------------------------------------------------------ */
.footer a, .footer p, .footer address, .footer span { font-weight: 600; }
button,
.estimate__btn, .consult__btn, .spec__btn, .works__more-btn, .news__more-btn,
.bottom-cta__btn, .hero__cta, .form-submit, .side-card__btn, .faq-side__cta-btn,
.form-chip, .filter-tab { font-weight: 600; }

/* ------------------------------------------------------------
   8) ページタイトル・見出しの統一
   (tx-line分割後のスパンにもNoto W600を必ず適用)
   ------------------------------------------------------------ */
h1, h1 span, h2, h2 span, h3, h3 span,
.tx .tx-line, .tx .tx-inner {
  font-family: var(--font-serif);
}
h1, .hero__title, .fv__title, .page-head__title, .center-head__title,
.concept-intro__title, .contact-intro__title, .faq-head__title,
.estimate__title, .consult__title, .flow__title, .people__title {
  font-weight: 600;
  letter-spacing: .08em;
}
/* 施工事例一覧のタイトルを他ページと同じスケールに */
h1.center-head__title { font-size: clamp(30px, 2.4vw + 14px, 40px); }

/* ------------------------------------------------------------
   9) はみ出しの実対策(clipによる隠蔽に頼らない)
   ------------------------------------------------------------ */
img, svg, iframe { max-width: 100%; }
.deco { max-width: none; } /* あしらいは意図的に画面外へ出すため除外 */

/* ------------------------------------------------------------
   10) 実写真プレースホルダー(既存の.ph演出をそのまま利用)
   ------------------------------------------------------------ */
.ph--photo {
  background-size: cover;
  background-position: center;
  color: transparent;
  border: none;
}