/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .htc-header-top          - ヘッダー上段ユーティリティバー（電話・SNS・うちなーらいふ）
 * .htc-mv                  - メインビジュアル 2カラム（左テキスト・右写真）
 * .htc-mv-strip            - MV下のマーキーストリップ
 * .htc-ig-banner           - Instagramアピールバナー（左テキスト・右タイル）
 * .htc-service-grid        - 事業案内グリッド（2×3 or 2×2+full）
 * .htc-muk-banner          - 無機質住宅バナー（緑背景・2カラム）
 * .htc-worry-sec           - お悩みセクション（カーキ背景／top-custom.css）
 * .htc-reason              - 選ばれる理由（番号付き3カラム）
 * .htc-page-links          - ページ遷移リンク（横並び）
 * .htc-contact2            - お問い合わせ（中央寄せ1カラム／top-custom.css）
 * .htc-page-hero-sub       - 下層ページヒーロー（固定高さ・緑背景）
 * .htc-voice-card          - お客様の声（手紙風）
 * .htc-works-card          - 施工実績カード
 * .htc-entry-body          - ブログ詳細本文エリア
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 構造不足: ヘッダー上段ユーティリティバーの2段ヘッダー構造
 * 構造不足: MV 2カラム（左テキストボックス＋右写真）
 * 構造不足: マーキーストリップ
 * 構造不足: Instagramバナー（タイル状プレビュー）
 * 構造不足: 事業案内グリッド（1枚フィーチャー＋小カード）
 * 値の粒度不足: ヘッダー電話番号のフォントサイズ（英字セリフ）
 *
 */

/* ============================================================
   Google Fonts（本文ゴシック・見出し明朝・英字セリフ）
   ============================================================ */
/* 各ページのhead.phpでimportしているため、ここでは読み込み不要 */

/* ============================================================
   CSS変数（参考デザイン値の保管・サイト固有値）
   ============================================================ */
:root {
  --htc-green:       #0D5D37;
  --htc-green-dk:    #084327;
  --htc-green-lt:    #2a7a52;
  --htc-orange:      #FF4400;
  --htc-orange-dk:   #D93800;
  --htc-red:         #D94645;
  --htc-cream:       #f2f1e8;
  --htc-cream-2:     #E8E6D8;
  --htc-cream-3:     #DCD9C5;
  --htc-paper:       #FFFFFF;
  --htc-ink:         #1a1a1a;
  --htc-ink-2:       #4a4a4a;
  --htc-ink-3:       #7a7a78;
  --htc-line:        rgba(13, 93, 55, 0.18);
  --htc-line-soft:   rgba(13, 93, 55, 0.10);
  --htc-font-serif:  "Cormorant Garamond", "Times New Roman", serif;
  --htc-font-mincho: "Shippori Mincho B1", "Noto Serif JP", serif;
  --htc-font-sans:   "Noto Sans JP", sans-serif;
  --htc-header-top-h: 36px;
  --htc-header-main-h: 72px;
  --htc-header-total-h: 108px;
}

/* ============================================================
   共通上書き
   ============================================================ */
body {
  background: var(--htc-cream);
  font-family: var(--htc-font-sans);
}

a { color: var(--htc-ink); text-decoration: none; }
h1, h2, h3, h4, h5 {
  font-family: var(--htc-font-mincho);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ============================================================
   ヘッダー
   ============================================================ */

/* --- ヘッダー上段ユーティリティバー --- */
.htc-header-top {
  background: var(--htc-cream-2);
  border-bottom: 1px solid var(--htc-line-soft);
  height: var(--htc-header-top-h);
  display: flex;
  align-items: center;
}
.htc-header-top__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
}
.htc-header-top__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--htc-green);
  font-weight: 500;
  white-space: nowrap;
  margin-right: auto;
}
.htc-header-top__tel small {
  font-family: var(--htc-font-sans);
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  color: var(--htc-ink-3);
  margin-left: 6px;
  font-weight: 400;
}
.htc-header-top__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.htc-header-top__sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--htc-line);
  border-radius: 50%;
  color: var(--htc-green);
  font-size: 1.3rem;
  transition: background 0.2s, color 0.2s;
}
.htc-header-top__sns:hover {
  background: #9D9788;
  color: var(--htc-cream);
}
.htc-header-top__uchina {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1px solid var(--htc-green);
  color: var(--htc-green);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.htc-header-top__uchina:hover {
  background: #9D9788;
  color: var(--htc-cream);
}

/* --- ヘッダー本体 --- */
.header-sticky {
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--htc-line-soft);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.header-sticky.is-fixed {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 28px rgba(13, 93, 55, 0.07);
}

/* ロゴ */
.header__logo img { height: 32px; width: auto; display: block; }

/* ヘッダーメイン高さ */
.header__inner { height: 72px; }

/* ナビ gap・padding */
.header__nav { gap: 28px; margin-right: 28px; }
.header__nav-item a { padding: 8px 0; }

/* ナビ EN ラベル: 非表示 */
.header__nav-en {
  display: none;
}

/* ナビ JA ラベル */
.header__nav-ja {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--htc-ink);
  margin-top: 3px;
}

/* サブページ ▾マーク */

/* hover・アクティブ下線: 全幅 */
.header__nav-item a:hover::after,
.header__nav-item--current a::after {
  width: 100%;
  left: 0;
  transform: none;
}

/* CTAボタン: 横並び・オレンジ */
.header__cta {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 14px 22px;
  background: var(--htc-orange);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.header__cta:hover {
  background: var(--htc-orange-dk);
  opacity: 1;
}
.header__cta::after {
  content: "→";
  font-style: normal;
}
.header__cta__sub {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 1;
  margin-top: 0;
}

/* 電話番号フォント: 通常ゴシックに上書き */
.header__tel {
  font-family: "Oswald", var(--htc-font-sans);
  font-style: normal;
}

/* 電話番号ブロック（CTAボタンの左隣） */
.htc-header-tel-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-right: 4px;
}
.htc-header-tel-hours {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--htc-ink-3);
  white-space: nowrap;
  font-family: var(--htc-font-sans);
}

/* モバイル: ヘッダー高さ据え置き（既存挙動維持） */
@media (max-width: 1100px) {
  .header__inner { height: 60px; }
  .header__cta { padding: 12px 16px; font-size: 1.2rem; }
  .htc-header-tel-block { display: none; }
}

/* ============================================================
   右側固定ボタン（PC専用：Instagram / うちなーらいふ）
   ============================================================ */
.htc-side-btns {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.htc-side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 44px;
  padding: 18px 0 20px;
  color: #fff;
  text-decoration: none;
  box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.15);
  transition: width 0.25s ease, opacity 0.2s;
  overflow: hidden;
}
.htc-side-btn i {
  font-size: 1.7rem;
  flex-shrink: 0;
}
.htc-side-btn__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  font-family: var(--htc-font-sans);
}
.htc-side-btn:hover { opacity: 0.85; }

.htc-side-btn--ig     { background: #9D9788; }
.htc-side-btn--uchina { background: var(--htc-orange); }

/* SP・タブレットでは非表示 */
@media (max-width: 1100px) {
  .htc-side-btns { display: none; }
}

/* body スクロール禁止（SPナビ開時） */
body.is-nav-open { overflow: hidden; }

/* ============================================================
   メインビジュアル
   ============================================================ */
#slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--htc-cream);
}
@media (max-width: 896px) { #slideshow { height: 80vh; } }
@media (max-width: 639px) { #slideshow { height: 70vh; } }

.htc-mv {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  height: 100%;
  align-items: end;
  position: relative;
}
.htc-mv__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 56px 80px 40px;
  position: relative;
  z-index: 2;
}
.htc-mv__eyebrow {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-orange);
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.htc-mv__eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--htc-orange);
}
.htc-mv__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
}
.htc-mv__catch-line {
  font-family: var(--htc-font-mincho);
  font-weight: 500;
  font-size: clamp(2.0rem, 2.6vw, 3.6rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  display: inline-block;
  padding: 12px 24px 14px;
  white-space: nowrap;
  box-shadow: 0 4px 22px rgba(13, 93, 55, 0.12);
}
.htc-mv__catch-line--orange {
  background: var(--htc-orange);
  color: #fff;
}
.htc-mv__catch-line--green {
  background: #9D9788;
  color: var(--htc-cream);
  margin-left: clamp(24px, 5vw, 72px);
}
.htc-mv__sub-en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-orange);
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.htc-mv__sub {
  color: var(--htc-ink-2);
  font-size: 1.4rem;
  line-height: 2;
  max-width: 38ch;
}
.htc-mv__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.htc-mv__visual {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.htc-mv__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.htc-mv__scroll {
  position: absolute;
  left: 0;
  bottom: 20px;
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--htc-green);
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.htc-mv__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--htc-green) 30%, transparent);
  animation: htcScrollLine 2.4s ease-in-out infinite;
}
@keyframes htcScrollLine {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%       { transform: scaleY(1); }
}
.htc-mv__kanji {
  position: absolute;
  font-family: var(--htc-font-mincho);
  font-size: clamp(200px, 28vw, 480px);
  line-height: 1;
  color: var(--htc-green);
  opacity: 0.04;
  bottom: -60px;
  right: -20px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 896px) {
  .htc-mv {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    position: relative;
  }
  .htc-mv__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .htc-mv__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(242, 241, 232, 0.55);
    z-index: 1;
  }
  .htc-mv__copy {
    position: relative;
    z-index: 2;
    padding: 100px 24px 60px;
  }
  .htc-mv__catch-line { white-space: normal; font-size: clamp(1.8rem, 5vw, 2.8rem); }
  .htc-mv__scroll { display: none; }
  .htc-mv__kanji { display: none; }
}

/* ============================================================
   マーキーストリップ
   ============================================================ */
.htc-mv-strip {
  background: #9D9788;
  color: var(--htc-cream);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.htc-mv-strip__track {
  display: inline-flex;
  gap: 56px;
  animation: htcMarquee 38s linear infinite;
}
.htc-mv-strip__item {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 2rem;
  letter-spacing: 0.12em;
}
.htc-mv-strip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--htc-orange);
  display: inline-block;
  vertical-align: middle;
}
@keyframes htcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 日本語マーキーアイテム: 欧字の視覚サイズに合わせて縮小 */
.htc-mv-strip__item--ja {
  font-family: var(--htc-font-sans);
  font-style: normal;
  font-size: 1.65rem;
  letter-spacing: 0.08em;
}

/* ============================================================
   セクション見出し（サイト共通スタイル）
   ============================================================ */
.htc-section-head {
  margin-bottom: 60px;
}
.htc-section-head--center { text-align: center; }

.htc-eyebrow {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--htc-orange);
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.htc-eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--htc-orange);
}
.htc-section-head--center .htc-eyebrow {
  justify-content: center;
}
.htc-section-head--center .htc-eyebrow::before { display: none; }

.htc-section-title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.4rem, 3.2vw, 4rem);
  font-weight: 500;
  color: var(--htc-green);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* ============================================================
   新着情報セクション
   ============================================================ */
.htc-news-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 896px) {
  .htc-news-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   Instagramアピールバナー
   ============================================================ */
.htc-ig-banner {
  background: var(--htc-paper);
  border: 1px solid var(--htc-line);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
}
.htc-ig-banner__left {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.htc-ig-banner__handle {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--htc-ink);
  letter-spacing: 0.04em;
}
.htc-ig-banner__desc { color: var(--htc-ink-2); font-size: 1.3rem; max-width: 52ch; }
.htc-ig-banner__right {
  position: relative;
  overflow: hidden;
  align-self: center;
  aspect-ratio: 4 / 5;
}
/* インスタ 1枚表示スライダー */
.htc-ig-slider__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
}
.htc-ig-tile {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  height: 100%;
  background: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28191/no-image.png') center / cover no-repeat;
  background-color: var(--htc-cream-2);
  overflow: hidden;
  transition: opacity .3s ease, filter .3s ease;
}
.htc-ig-tile:hover {
  opacity: .9;
  filter: brightness(1.05);
}

@media (max-width: 896px) {
  .htc-ig-banner { grid-template-columns: 1fr; }
  .htc-ig-banner__left { padding: 40px 28px; }
  .htc-ig-banner__right { min-height: 160px; }
}

/* ============================================================
   事業案内グリッド
   ============================================================ */
.htc-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--htc-line);
  border: 1px solid var(--htc-line);
}
.htc-service-card {
  background: var(--htc-cream);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.25s;
  text-decoration: none;
  color: inherit;
}
.htc-service-card:hover { background: var(--htc-paper); }
.htc-service-card__no {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--htc-orange);
  letter-spacing: 0.12em;
}
.htc-service-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--htc-cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.htc-service-card__img img { max-height: 80px; width: auto; }
.htc-service-card__title {
  font-family: var(--htc-font-mincho);
  font-size: 2rem;
  font-weight: 500;
  color: var(--htc-green);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.htc-service-card__title-en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--htc-orange);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.htc-service-card__text { font-size: 1.3rem; color: var(--htc-ink-2); flex: 1; }
.htc-service-card__arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--htc-line-soft);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: var(--htc-green);
}
.htc-service-card__arrow::after { content: "→"; transition: transform 0.25s; }
.htc-service-card:hover .htc-service-card__arrow::after { transform: translateX(6px); }

.htc-service-card--feature {
  background: #9D9788;
  grid-column: span 2;
}
.htc-service-card--feature .htc-service-card__title { color: var(--htc-cream); }
.htc-service-card--feature .htc-service-card__text { color: rgba(242,241,232,0.78); }
.htc-service-card--feature .htc-service-card__arrow { color: var(--htc-cream); border-top-color: rgba(242,241,232,0.2); }
.htc-service-card--feature:hover { background: var(--htc-green-dk); }
.htc-service-card--feature .htc-service-card__img {
  background: linear-gradient(135deg, #2a4a3a, #4a6b58);
}

@media (max-width: 639px) {
  .htc-service-grid { grid-template-columns: 1fr; }
  .htc-service-card--feature { grid-column: 1; }
}

/* ============================================================
   無機質住宅バナー
   ============================================================ */
.htc-muk-banner {
  background: #9D9788;
  color: var(--htc-cream);
  position: relative;
  overflow: hidden;
}
.htc-muk-banner__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.htc-muk-banner__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 4vw, 5rem);
  color: var(--htc-cream);
  font-weight: 500;
  line-height: 1.4;
}
.htc-muk-banner__accent {
  color: var(--htc-orange);
  font-style: italic;
  font-family: var(--htc-font-serif);
}
.htc-muk-banner__text { color: rgba(242,241,232,0.78); font-size: 1.5rem; line-height: 2; margin-top: 20px; max-width: 48ch; }
.htc-muk-banner__visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #3a3a38 0%, #5a5754 50%, #757370 100%);
  position: relative;
  overflow: hidden;
}
.htc-muk-banner__visual-img { width: 100%; height: 100%; object-fit: cover; }
.htc-muk-banner__ring {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(255, 68, 0, 0.16);
  right: -180px; top: -180px;
  pointer-events: none;
}
@media (max-width: 896px) {
  .htc-muk-banner__inner { grid-template-columns: 1fr; }
  .htc-muk-banner__visual { aspect-ratio: 16 / 9; }
}

/* ============================================================
   お悩みカード — index トップ専用スタイルは top-custom.css の
   .htc-worry-sec へ移行（旧 .htc-worry-* は廃止）
   ============================================================ */

/* ============================================================
   選ばれる理由
   ============================================================ */
.htc-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.htc-reason__no {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-orange);
  font-size: 7.2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 4px;
}
.htc-reason__no-sub {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-green);
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  margin-bottom: 18px;
  display: block;
}
.htc-reason__img {
  aspect-ratio: 4 / 3;
  background: var(--htc-cream-2);
  margin-bottom: 20px;
  overflow: hidden;
}
.htc-reason__img img { width: 100%; height: 100%; object-fit: cover; }
.htc-reason__title {
  font-family: var(--htc-font-mincho);
  font-size: 2rem;
  color: var(--htc-green);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.htc-reason__text { font-size: 1.4rem; color: var(--htc-ink-2); line-height: 1.9; }
@media (max-width: 896px) {
  .htc-reason-grid { grid-template-columns: 1fr; gap: 40px; }
  .htc-reason__no { font-size: 5.6rem; }
}

/* ============================================================
   コラム（ブログ）
   ============================================================ */
.htc-col-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  margin-bottom: 44px;
  gap: 20px;
}
@media (max-width: 639px) { .htc-col-head { grid-template-columns: 1fr; } }

/* ============================================================
   他ページへの遷移
   ============================================================ */
.htc-page-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--htc-line);
  border-bottom: 1px solid var(--htc-line);
}
.htc-page-link {
  padding: 44px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  border-right: 1px solid var(--htc-line);
  transition: background 0.25s;
  text-decoration: none;
  color: inherit;
}
.htc-page-link:last-child { border-right: none; }
.htc-page-link:hover { background: var(--htc-paper); }
.htc-page-link__en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--htc-orange);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}
.htc-page-link__title {
  font-family: var(--htc-font-mincho);
  font-size: 1.9rem;
  color: var(--htc-green);
}
.htc-page-link__arrow {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-green);
  font-size: 1.8rem;
  transition: color 0.2s;
}
.htc-page-link:hover .htc-page-link__arrow { color: var(--htc-orange); }
@media (max-width: 896px) {
  .htc-page-links { grid-template-columns: 1fr; }
  .htc-page-link { border-right: none; border-bottom: 1px solid var(--htc-line); padding: 28px 20px; }
  .htc-page-link:last-child { border-bottom: none; }
}

/* ============================================================
   お問い合わせフォーム
   → index トップは中央寄せ1カラム（.htc-contact2／top-custom.css）へ移行。
     旧 .htc-contact__grid 等は廃止。
   ============================================================ */

/* ============================================================
   下層ページ共通
   ============================================================ */

/* ページヒーロー */
.htc-page-hero {
  background: #9D9788;
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.htc-page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 0;
}
.htc-page-hero__content {
  position: relative;
  z-index: 1;
}
.htc-page-hero__en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(242, 241, 232, 0.7);
  letter-spacing: 0.28em;
  display: block;
  margin-bottom: 10px;
}
.htc-page-hero__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 4vw, 4.8rem);
  font-weight: 500;
  color: var(--htc-cream);
  letter-spacing: 0.08em;
}
@media (max-width: 639px) {
  .htc-page-hero { padding: 56px 0; }
}

/* ============================================================
   お客様の声（手紙風カード）
   ============================================================ */
.htc-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.htc-voice-card {
  background: var(--htc-paper);
  border: 1px solid var(--htc-line);
  padding: 40px 32px;
  position: relative;
}
.htc-voice-card::before {
  content: "\201C";
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 7.2rem;
  color: var(--htc-line);
  position: absolute;
  top: 16px; left: 24px;
  line-height: 1;
}
.htc-voice-card__text {
  font-size: 1.4rem;
  line-height: 2;
  color: var(--htc-ink);
  margin-top: 32px;
  font-family: var(--htc-font-mincho);
}
.htc-voice-card__from {
  margin-top: 20px;
  font-size: 1.2rem;
  color: var(--htc-ink-3);
  text-align: right;
}
@media (max-width: 896px) { .htc-voice-grid { grid-template-columns: 1fr; } }

/* ============================================================
   施工実績カード
   ============================================================ */
.htc-works-card { display: block; text-decoration: none; color: inherit; }
.htc-works-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--htc-cream-2);
  margin-bottom: 14px;
}
.htc-works-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.htc-works-card:hover .htc-works-card__img img { transform: scale(1.04); }
.htc-works-card__cat {
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--htc-orange);
  margin-bottom: 6px;
}
.htc-works-card__title { font-family: var(--htc-font-mincho); font-size: 1.7rem; color: var(--htc-green); }

/* ============================================================
   ブログ（コラム一覧 / 詳細）
   ============================================================ */
.htc-entry-body { font-size: 1.6rem; line-height: 2; }
.htc-entry-body h2 { font-size: 2.4rem; margin: 40px 0 16px; color: var(--htc-green); }
.htc-entry-body h3 { font-size: 2rem; margin: 30px 0 12px; color: var(--htc-green); }
.htc-entry-body p { margin-bottom: 20px; }
.htc-entry-body img { max-width: 100%; height: auto; margin: 20px 0; }
.htc-entry-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--htc-line);
  font-size: 1.3rem;
  color: var(--htc-ink-2);
}
.htc-entry-meta__date {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-green);
  font-size: 1.5rem;
}
.htc-entry-meta__cat {
  color: var(--htc-orange);
  border: 1px solid var(--htc-orange);
  padding: 2px 10px;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
}
.htc-entry-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--htc-cream-2);
  margin-bottom: 36px;
}
.htc-entry-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   協力会社募集ページ
   ============================================================ */
.htc-partner-table { width: 100%; }

/* ============================================================
   フッター（htc-fn 新デザイン・4ブロック横並び）
   ============================================================ */
.htc-footer-new {
  background: #f2f1e8;
  color: var(--htc-ink-2);
  font-size: 1.3rem;
}

/* ボディ */
.htc-fn__body {
  padding: 64px 0 0;
}

/* 上段3カラム（ロゴ+住所 | SNS+連絡先 | ナビ）／ナビ下にマップ */
.htc-fn__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 56px;
  align-items: start;
}

/* --- Block 1: ロゴ + 住所 --- */
.htc-fn__logo {
  display: block;
  margin-bottom: 22px;
}
.htc-fn__logo img {
  height: 52px;
  width: auto;
}
.htc-fn__address {
  font-size: 1.3rem;
  line-height: 2;
  color: var(--htc-ink-2);
}

/* --- Block 2: SNS + 連絡先 --- */
.htc-fn__sns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.htc-fn__sns > a:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--htc-line);
  border-radius: 50%;
  color: var(--htc-green);
  font-size: 1.6rem;
  transition: background 0.2s, color 0.2s;
}
.htc-fn__sns > a:first-child:hover {
  background: var(--htc-orange);
  border-color: var(--htc-orange);
  color: #fff;
  opacity: 1;
}
.htc-fn__uchina-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--htc-green);
  border-radius: 6px;
  color: var(--htc-green);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.htc-fn__uchina-btn:hover { background: #9D9788; color: #fff; opacity: 1; }
.htc-fn__tel {
  font-size: 1.5rem;
  color: var(--htc-ink);
  margin-bottom: 14px;
}
.htc-fn__tel a {
  color: var(--htc-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.htc-fn__tel a:hover { color: var(--htc-green); opacity: 1; }
.htc-fn__hours {
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--htc-ink-2);
}

/* --- Block 3: ナビ + マップ（同じブロックに縦積み・上段右）--- */
.htc-fn__navmap {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  padding-top: 10px;
}
.htc-fn__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.htc-fn__nav-item {
  font-size: 1.3rem;
  color: var(--htc-ink);
  font-weight: 500;
  line-height: 1.6;
  padding: 4px 20px;
  white-space: nowrap;
  transition: color 0.2s;
}
.htc-fn__nav-item:last-child { padding-right: 0; }
.htc-fn__nav-item + .htc-fn__nav-item {
  border-left: 1px solid var(--htc-line);
}
.htc-fn__nav-item:hover { color: var(--htc-green); opacity: 1; }

/* --- マップ（Block 3内・ナビ直下・580×200px・角丸なし）--- */
.htc-fn__map {
  width: 580px;
  max-width: 100%;
  height: 200px;
  overflow: hidden;
  border: 1px solid var(--htc-line);
}
.htc-fn__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- コピーライトバー（濃緑・白・中央）--- */
.htc-fn__bottom {
  background: var(--htc-green-dk);
  text-align: center;
  padding: 18px 20px;
}
.htc-fn__copy {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: #fff;
}

/* --- レスポンシブ --- */
/* タブレット: 上段2カラム＋（ナビ+マップ）全幅 */
@media (max-width: 896px) {
  .htc-fn__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0 24px 48px;
  }
  .htc-fn__navmap {
    grid-column: 1 / -1;
    grid-row: auto;
    align-items: stretch;
    padding-top: 20px;
    border-top: 1px solid var(--htc-line);
  }
  .htc-fn__nav { justify-content: center; }
  .htc-fn__map { width: 100%; max-width: none; height: 240px; }
}
/* スマホ: 1カラム（ロゴ→住所→SNS→電話→ナビ→地図）*/
@media (max-width: 639px) {
  .htc-fn__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .htc-fn__navmap {
    align-items: stretch;
    border-top: none;
    padding-top: 0;
  }
  .htc-fn__nav {
    display: none;
  }
  .htc-fn__map { height: 240px; }
  .htc-fn__bottom { padding: 16px 20px 80px; } /* SP固定バー分 */
}

/* SP固定バー分の余白（旧クラス互換） */
.footer-bottom { padding-bottom: 20px; }
@media (max-width: 639px) { .footer-bottom { padding-bottom: 70px; } }

/* ============================================================
   SP固定バー
   ============================================================ */
.sp-fixed-bar {
  display: none;
}
@media (max-width: 896px) {
  .sp-fixed-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: #9D9788;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .sp-fixed-bar__item {
    flex: 1;
    background: #9D9788;
    color: var(--htc-cream);
    text-align: center;
    padding: 12px 8px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.15);
    text-decoration: none;
  }
  .sp-fixed-bar__item:last-child { border-right: none; background: var(--htc-orange); }
  .sp-fixed-bar__item i { font-size: 1.6rem; }

  .page-top {
    bottom: 70px;
  }
}

/* ============================================================
   テキスト装飾
   ============================================================ */
.font-en { font-family: var(--htc-font-serif); font-style: italic; }
.font-mincho { font-family: var(--htc-font-mincho); }
.text-orange { color: var(--htc-orange); }
.text-green  { color: var(--htc-green); }
.text-cream  { color: var(--htc-cream); }

/* ============================================================
   共通CTA セクション（contact-cta.php で使用）
   ============================================================ */
.htc-section-green {
  background: #9D9788;
  color: var(--htc-cream);
}
.htc-section-green .container > div {
  text-align: center;
}
.htc-cta-label-en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--htc-orange);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: block;
}
.htc-cta-title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 3.8vw, 5.2rem);
  font-weight: 500;
  color: var(--htc-cream);
  line-height: 1.5;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.htc-cta-text {
  font-size: 1.45rem;
  color: rgba(242, 241, 232, 0.78);
  line-height: 2;
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 36px;
}
.htc-cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.htc-cta-buttons > * {
  justify-content: center;
  width: 100%;
}
@media (min-width: 640px) {
  .htc-cta-buttons > * {
    width: 320px;
  }
}
.htc-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.htc-btn-orange::after { content: "→"; transition: transform 0.2s; }
.htc-btn-orange:hover { background: #000; border-color: #000; opacity: 1; }
.htc-btn-orange:hover::after { transform: translateX(4px); }
.htc-btn-orange .en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.htc-btn-ghost-cream {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  border: 1px solid var(--htc-cream);
  background: transparent;
  color: var(--htc-cream);
  text-decoration: none;
  transition: background 0.2s;
}
.htc-btn-ghost-cream::after { content: "→"; transition: transform 0.2s; }
.htc-btn-ghost-cream:hover { background: rgba(242,241,232,0.15); opacity: 1; }
.htc-btn-ghost-cream:hover::after { transform: translateX(4px); }
.htc-btn-ghost-cream .en {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ============================================================
   共通ページヒーロー（下層ページ）
   参考: claude-design-output/styles.css .page-hero
   ============================================================ */
.htc-page-hero {
  position: relative;
  padding: 188px 0 100px; /* 108px(ヘッダー絶対配置分) + 80px(デザイン値) */
  background: #FFFFFF;
  overflow: hidden;
  border-bottom: 1px solid var(--htc-line-soft);
}

/* 右上オレンジ グラデーション装飾 */
.htc-page-hero__deco {
  position: absolute;
  right: -60px;
  top: -40px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 68, 0, 0.35), rgba(255, 68, 0, 0) 60%);
  pointer-events: none;
  display: block;
}

.htc-page-hero__inner {
  position: relative;
  z-index: 1;
}

/* パンくず */
.htc-page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  color: var(--htc-ink-3);
  margin-bottom: 24px;
}
.htc-page-hero__breadcrumb a {
  color: var(--htc-ink-3);
  text-decoration: none;
  transition: color 0.2s;
}
.htc-page-hero__breadcrumb a:hover { color: var(--htc-green); }
.htc-page-hero__breadcrumb .sep { opacity: 0.5; margin: 0 2px; }

/* 英語ラベル */
.htc-page-hero__label {
  display: block;
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--htc-orange);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-align: left;
}

/* h1 */
.htc-page-hero__title {
  font-family: var(--htc-font-mincho);
  font-weight: 500;
  font-size: clamp(3.6rem, 5vw, 6.4rem);
  color: var(--htc-green);
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: left;
}

/* リード文 */
.htc-page-hero__lead {
  margin-top: 22px;
  max-width: 110ch;
  color: var(--htc-ink-2);
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: left;
}

/* ページ番号（右下） */
.htc-page-hero__num {
  position: absolute;
  right: 32px;
  bottom: 28px;
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--htc-green);
  opacity: 0.6;
  letter-spacing: 0.1em;
}

@media (max-width: 639px) {
  /* SP: ヘッダー60px + 余白40px */
  .htc-page-hero { padding: 100px 0 80px; }
  .htc-page-hero__num { display: none; }
}

/* ============================================================
   セクション背景色ヘルパー（全ページ共通）
   ============================================================ */
.htc-idx-paper,
.htc-section-paper   { background: var(--htc-paper); }

.htc-idx-cream2,
.htc-section-cream2  { background: var(--htc-cream-2); }

/* ============================================================
   ページローディングオーバーレイ
   ============================================================ */
#htc-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}
#htc-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}
#htc-loading img {
  width: 500px;
  max-width: 90vw;
  height: auto;
}

/* ============================================================
   サンクスページ
   ============================================================ */
.htc-thanks {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0 80px;
}
.htc-thanks__lead {
  font-family: var(--htc-font-mincho);
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 2;
  color: var(--htc-ink);
  margin-bottom: 32px;
}
.htc-thanks__note {
  font-size: 1.3rem;
  color: var(--htc-ink-2);
  line-height: 2;
  margin-bottom: 40px;
}
.htc-thanks__tel {
  margin-bottom: 48px;
}
.htc-thanks__tel a {
  font-family: var(--htc-font-serif);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 700;
  color: var(--htc-green);
  letter-spacing: 0.05em;
  text-decoration: none;
}
.htc-thanks__tel a:hover {
  opacity: 0.75;
}
.htc-thanks__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border: 2px solid var(--htc-green);
  color: var(--htc-green);
  background: transparent;
  font-family: var(--htc-font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.htc-thanks__btn::after {
  content: "→";
  transition: transform 0.25s;
}
.htc-thanks__btn:hover {
  background: #9D9788;
  color: #fff;
  opacity: 1;
}
.htc-thanks__btn:hover::after {
  transform: translateX(5px);
}

.fa-chevron-right:before { content: ""; }

/* 施工実績 ブログCMS一覧のサムネイル画像に細いボーダー */
.htc-works-cms-area .card-blog__img {
  border: 1px solid var(--htc-line);
}