/* TOPページ固有スタイル */

/* MT調整 */
.mt-36 { margin-top: 36px; }

/* ============================================================
   MV（メインビジュアル）デザイン調整 — 全画面・白字オーバーレイ
   ============================================================ */

/* スライドショー: 全画面 */
#slideshow {
  height: 100vh;
  min-height: 560px;
  padding-top: 0;
  background: var(--htc-green-dk, #0d5d37);
}

/* MV: 背景画像の上にコピーを重ねる（グリッド解除） */
.htc-mv--full {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* 背景画像: 全画面カバー */
.htc-mv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* オーバーレイ: 文字可読性確保（左下を濃くするグラデーション） */
.htc-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

/* コピーエリア: 全画面の左上に配置・白字 */
.htc-mv__copy {
  position: absolute;
  z-index: 2;
  top: 180px;
  bottom: auto;
  justify-content: flex-start;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  padding: clamp(48px, 8vh, 96px) clamp(24px, 6vw, 80px) 0;
}

/* eyebrow: 白字 */
.htc-mv__eyebrow {
  color: #fff;
  margin-bottom: 26px;
}
.htc-mv__eyebrow::before {
  background: var(--htc-orange);
}

/* キャッチコピー: 白字・背景ボックスなし */
.htc-mv__catch {
  font-size: clamp(26px, 4vw, 56px);
  gap: 6px;
  margin-bottom: 28px;
}

.htc-mv__catch-line {
  color: #fff;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* 助詞・句読点: 小さくしてメリハリを付ける */
.htc-mv__catch-p {
  font-size: 0.62em;
  letter-spacing: 0.02em;
}

/* 2行目: 少しインデントして段違いに */
.htc-mv__catch-line:nth-child(2) {
  margin-left: clamp(28px, 6vw, 80px);
}

/* サブテキスト: 白字 */
.htc-mv__sub-en {
  color: #fff;
  font-size: 1.6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.htc-mv__sub {
  color: rgba(255, 255, 255, 0.92);
  max-width: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* CTAボタン群 */
.htc-mv__cta {
  margin-top: 34px;
}

/* 砦文字: 右下にうっすら（白） */
.htc-mv__kanji {
  right: 2vw;
  bottom: -80px;
  color: #fff;
  opacity: 0.06;
  z-index: 1;
}

/* MV左下バナー画像（640×480・mukishitsu.phpへ） */
.htc-mv__bnr {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 5vw, 80px);
  bottom: clamp(28px, 5vh, 64px);
  display: block;
  width: clamp(260px, 30vw, 440px);
  line-height: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.htc-mv__bnr img {
  width: 100%;
  height: auto;
  display: block;
}
.htc-mv__bnr:hover {
  transform: translateY(-4px);
}

/* ============================================================
   CTAボタン: インライン・角丸なし・EN::before・→::after
   ============================================================ */

.htc-mv__cta {
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ボタン共通: サイズ・形状をデザインに合わせる */
.htc-mv__cta .btn {
  display: inline-flex;
  max-width: none;
  width: auto;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 500;
  gap: 12px;
  padding: 16px 28px;
  letter-spacing: 0.14em;
}

/* btn--solid: 緑塗り */
.htc-mv__cta .btn--solid {
  background: #9D9788;
  color: var(--htc-cream);
  border-color: var(--htc-green);
}
.htc-mv__cta .btn--solid:hover {
  background: var(--htc-green-dk);
  border-color: var(--htc-green-dk);
  opacity: 1;
}

/* btn--solid: "Concrete" EN ラベル */
.htc-mv__cta .btn--solid::before {
  content: "Concrete";
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.htc-mv__cta .btn--solid::after {
  content: "→";
  transition: transform 0.2s;
}
.htc-mv__cta .btn--solid:hover::after {
  transform: translateX(4px);
}

/* btn--outline: 透過・白枠（暗い画像上で視認性を確保） */
.htc-mv__cta .btn--outline {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}
.htc-mv__cta .btn--outline:hover {
  background: #fff;
  color: var(--htc-green);
  border-color: #fff;
  opacity: 1;
}

/* btn--outline: "Contact" EN ラベル */
.htc-mv__cta .btn--outline::before {
  content: "Contact";
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.htc-mv__cta .btn--outline::after {
  content: "→";
  transition: transform 0.2s;
}
.htc-mv__cta .btn--outline:hover::after {
  transform: translateX(4px);
}

/* ============================================================
   SP: デザイン出力に合わせた1カラム縦積みレイアウト
   参考: claude-design-output/top.css @media (max-width: 880px)
   ============================================================ */
@media (max-width: 880px) {
  /* スライドショー: 全画面維持 */
  #slideshow {
    height: 100vh;
    min-height: 520px;
    padding-top: 0;
    overflow: hidden;
  }

  /* コピー: 左上配置を維持しつつ余白縮小 */
  .htc-mv__copy {
    top: 130px;
    padding: clamp(32px, 6vh, 64px) 24px 0;
  }

  /* キャッチ: 折り返し許可・インデント縮小 */
  .htc-mv__catch {
    width: 100%;
    max-width: 100%;
    font-size: clamp(22px, 6.4vw, 38px);
  }
  .htc-mv__catch-line {
    white-space: normal;
  }
  .htc-mv__catch-line:nth-child(2) {
    margin-left: clamp(16px, 4vw, 40px);
  }

  /* 砦: 非表示 */
  .htc-mv__kanji {
    display: none;
  }

  /* MV左下バナー: 縮小＋SP固定バー分を確保 */
  .htc-mv__bnr {
    width: clamp(180px, 44vw, 280px);
    left: 16px;
    bottom: 90px;
  }

  /* ボタン: ブロック表示 */
  .htc-mv__cta .btn {
    max-width: 400px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* SP狭幅: サブテキストは詰めて表示 */
  .htc-mv__sub {
    font-size: 1.3rem;
  }
}

/* ============================================================
   INDEX MV以降 セクション固有スタイル
   参考: claude-design-output/index.php + styles.css + top.css
   ============================================================ */

/* --- 背景ヘルパー（site.css に移動済み） --- */

/* --- subline（News見出し上ラベル）--- */
.htc-idx-subline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--htc-font-sans);
  font-size: 1.2rem;
  letter-spacing: 0.28em;
  color: #d95c5c;
  font-weight: 500;
  position: relative;
  top: -15px;
}
.htc-idx-subline::before {
  content: "";
  width: 32px; height: 1px;
  background: #9D9788;
  flex-shrink: 0;
}

/* --- ラベル EN（トップページ用）--- */
.htc-label-en {
  font-family: var(--htc-font-sans);
  font-size: 1.2rem;
  color: var(--htc-green);
  letter-spacing: 0.28em;
  font-weight: 500;
  display: block;
}
.htc-label-en::before {
  content: "— ";
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ============================================================
   SEC1: NEWS
   ============================================================ */
.htc-idx-news-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.htc-idx-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 4件分の高さ（1件≒56px）を上限に設定、5件目以降はスクロール */
  max-height: 224px;
  overflow-y: auto;
  /* スクロールバーデザイン */
  scrollbar-width: thin;
  scrollbar-color: var(--htc-green) var(--htc-cream-2);
}
/* Webkit 系スクロールバー */
.htc-idx-news-list::-webkit-scrollbar {
  width: 4px;
}
.htc-idx-news-list::-webkit-scrollbar-track {
  background: var(--htc-cream-2);
}
.htc-idx-news-list::-webkit-scrollbar-thumb {
  background: #9D9788;
  border-radius: 2px;
}
.htc-idx-news-list li {
  display: grid;
  grid-template-columns: 100px 110px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 2px solid var(--htc-line-soft);
  font-size: 1.4rem;
}
.htc-idx-news-list li:first-child { border-top: 2px solid var(--htc-line-soft); }
.htc-idx-news-list .date {
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: var(--htc-green);
  font-size: 1.5rem;
}
.htc-idx-news-list .tag {
  font-size: 1.0rem;
  letter-spacing: 0.16em;
  color: var(--htc-orange);
  border: 1px solid var(--htc-orange);
  padding: 3px 8px;
  text-align: center;
  font-weight: 500;
  align-self: center;
  justify-self: start;
}
.htc-idx-news-list .tag.green { color: var(--htc-green); border-color: var(--htc-green); }
.htc-idx-news-list .title { color: var(--htc-ink); line-height: 1.7; }

@media (max-width: 880px) {
  .htc-idx-news-row { grid-template-columns: 1fr; gap: 32px; }
  .htc-idx-news-list li { grid-template-columns: 90px 1fr; }
  .htc-idx-news-list .tag { grid-column: 2; }
  .htc-idx-news-list .title { grid-column: 1 / -1; }
}

/* ============================================================
   SEC3: SERVICES / OTHER BRAND
   ============================================================ */

/* 全体を上品な幅に絞る */
.htc-idx-svc-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

/* --- 共通ラベル（緑の短い横線 + 赤系テキスト）--- */
.htc-idx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: #d95c5c;
}
.htc-idx-eyebrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: #9D9788;
}

/* --- セクション見出し --- */
.htc-idx-svc-head { margin-bottom: 64px; }
.htc-idx-svc-headline {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.6rem, 3.2vw, 4.2rem);
  font-weight: 500;
  color: #333;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-top: 20px;
}
.htc-idx-svc-desc {
  margin-top: 24px;
  color: var(--htc-ink-3);
  font-size: 1.3rem;
  line-height: 2.1;
}

/* --- 右向き矢印（線 + 矢じり）共通 --- */
.htc-idx-arrow {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  background: #333;
  transition: transform 0.25s ease;
}
.htc-idx-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: translateY(-50%) rotate(45deg);
}

/* --- タイトル + 矢印 + 下線（サービス・ブランド共通）--- */
.htc-idx-svc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #c2c2c2;
}

/* --- サービス一覧（2×2）--- */
.htc-idx-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: clamp(40px, 5vw, 64px);
}
.htc-idx-svc {
  display: block;
  text-decoration: none;
  color: inherit;
}
.htc-idx-svc__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--htc-cream-2);
}
.htc-idx-svc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.htc-idx-svc:hover .htc-idx-svc__img img { transform: scale(1.05); }
.htc-idx-svc__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(1.8rem, 2vw, 2.2rem);
  font-weight: 500;
  color: #333;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.htc-idx-svc:hover .htc-idx-arrow { transform: translateX(6px); }

/* --- Other Brand 見出し --- */
.htc-idx-brand-head { margin-top: clamp(72px, 9vw, 110px); margin-bottom: 36px; }

/* --- ブランド一覧（3カラム）--- */
.htc-idx-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: clamp(36px, 4vw, 48px);
}
.htc-idx-brand {
  display: block;
  text-decoration: none;
  color: inherit;
}
.htc-idx-brand__logo {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #ddd;
  padding: 24px;
}
.htc-idx-brand__logo img {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.htc-idx-brand__name {
  font-family: var(--htc-font-mincho);
  font-size: clamp(1.6rem, 1.7vw, 1.9rem);
  font-weight: 500;
  color: #333;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.htc-idx-brand:hover .htc-idx-arrow { transform: translateX(6px); }

/* --- レスポンシブ --- */
/* タブレット: サービス2カラム維持・ブランド3カラム維持 */
@media (max-width: 880px) {
  .htc-idx-svc-head { margin-bottom: 48px; }
}
/* スマホ: すべて1カラム */
@media (max-width: 639px) {
  .htc-idx-svc-grid { grid-template-columns: 1fr; }
  .htc-idx-brand-grid { grid-template-columns: 1fr; }
  .htc-idx-svc__bar { margin-top: 18px; padding-bottom: 14px; }
}

/* ============================================================
   SEC4: PICKUP / MAIN PRODUCT（白背景・2カラム）
   ============================================================ */
.htc-pickup { background: #fff; }
.htc-pickup__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* --- 左カラム: テキスト --- */
.htc-pickup__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 4vw, 5.0rem);
  font-weight: 500;
  color: #2b2b2b;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin-top: 24px;
}
.htc-pickup__text {
  margin-top: 32px;
  color: #555;
  font-size: 1.5rem;
  line-height: 2.1;
  max-width: 46ch;
}
.htc-pickup__btn {
  display: inline-block;
  margin-top: 44px;
  background: #1a1a1a;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  padding: 22px 56px;
  text-decoration: none;
  transition: background 0.25s;
}
.htc-pickup__btn:hover { background: #000; opacity: 1; }

/* --- 右カラム: 画像 + ロゴ --- */
.htc-pickup__visual {
  position: relative;
}
.htc-pickup__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.htc-pickup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ロゴ: 画像の右下に大きく重ねる（少しはみ出す）。
   ロゴ画像はベージュ〜グレージュ系を想定 */
.htc-pickup__logo {
  position: absolute;
  right: -14px;
  bottom: -122px;
  width: clamp(160px, 42%, 320px);
  height: auto;
  pointer-events: none;
}

/* --- レスポンシブ --- */
/* タブレット: 2カラム維持・余白調整 */
@media (max-width: 880px) {
  .htc-pickup__grid { gap: clamp(28px, 4vw, 56px); }
  .htc-pickup__logo { right: 0; bottom: -18px; }
}
/* スマホ: 1カラム（テキスト→画像）*/
@media (max-width: 639px) {
  .htc-pickup__grid { grid-template-columns: 1fr; gap: 40px; }
  .htc-pickup__logo { width: 40%; right: 4px; bottom: -16px; }
  .htc-pickup__btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 24px;
  }
}

/* ============================================================
   SEC5: WORRIES（カーキ背景・斜め下部カット・枠線カード）
   ============================================================ */
.htc-worry-sec {
  background: #fff; /* 斜めカット下の白背景 */
}

/* カーキ帯: 下端を中央が下がる山型（シェブロン）にクリップ */
.htc-worry-sec__khaki {
  background: #9d9788;
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(140px, 15vw, 210px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 50% 100%, 0 calc(100% - 64px));
}

/* 内側ラッパ: 静かな余白の中央寄せ */
.htc-worry-sec__wrap {
  max-width: 1080px;
  margin: 0 auto;
}

/* 見出し */
.htc-worry-sec__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(3.0rem, 4.2vw, 4.8rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.htc-worry-sec__title-em {
  color: #333;
}
.htc-worry-sec__lead {
  margin-top: 22px;
  color: #3a3a37;
  font-size: 1.4rem;
  line-height: 2;
}

/* 悩みカード: 3カラム・透明背景・濃いグレー枠・角丸なし */
.htc-worry-sec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(48px, 6vw, 72px);
}
.htc-worry-sec__card {
  border: 2px solid rgba(40, 40, 35, 0.42);
  padding: 28px 26px;
}
.htc-worry-sec__no {
  display: block;
  font-family: var(--htc-font-serif);
  font-style: italic;
  color: #fff;
  font-size: 2.5rem;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.htc-worry-sec__q {
  font-family: var(--htc-font-mincho);
  font-size: 1.5rem;
  line-height: 1.95;
  color: #333;
  letter-spacing: 0.03em;
}

/* 案内文: 中央寄せ・白文字 */
.htc-worry-sec__msg {
  margin-top: clamp(48px, 6vw, 84px);
  text-align: center;
}
.htc-worry-sec__msg p {
  font-family: var(--htc-font-mincho);
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #fff;
}

/* ボタンエリア: 白背景・中央 */
.htc-worry-sec__btn-area {
  background: #fff;
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 20px clamp(8px, 2vw, 24px);
}
.htc-worry-sec__btn {
  display: inline-block;
  background: #000;
  color: #fff;
  font-family: var(--htc-font-mincho);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  padding: 24px 80px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.htc-worry-sec__btn:hover { opacity: 0.82; }

/* レスポンシブ */
/* タブレット: 3カラム維持（余白のみ調整）*/
@media (max-width: 880px) {
  .htc-worry-sec__card { padding: 24px 20px; }
}
/* スマホ: 1カラム・斜めカットは浅く */
@media (max-width: 639px) {
  .htc-worry-sec__grid { grid-template-columns: 1fr; }
  .htc-worry-sec__khaki {
    padding-bottom: clamp(90px, 22vw, 140px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px));
  }
  .htc-worry-sec__btn {
    display: block;
    width: 100%;
    padding: 20px 24px;
  }
}

/* ============================================================
   SEC6: REASONS
   ============================================================ */
.htc-idx-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.htc-idx-reason { position: relative; }
.htc-idx-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: 6px;
}
.htc-idx-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: 22px;
  display: block;
}
.htc-idx-reason__ph {
  aspect-ratio: 4 / 3;
  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);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.htc-idx-reason__ph[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--htc-font-serif); font-style: italic;
  font-size: 1.1rem; letter-spacing: 0.16em;
  color: rgba(13,93,55,0.4);
}
.htc-idx-reason__title {
  font-family: var(--htc-font-mincho);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--htc-green);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.htc-idx-reason__text { color: var(--htc-ink-2); font-size: 1.4rem; line-height: 2; }

/* 3つの理由：画像1枚で掲載する場合 */
.htc-idx-reasons-img img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 880px) {
  .htc-idx-reasons-grid { grid-template-columns: 1fr; gap: 40px; }
  .htc-idx-reason__no { font-size: 5.6rem; }
}

/* ============================================================
   SEC7: COLUMN
   ============================================================ */
.htc-idx-col-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 24px;
}
.htc-idx-col-head h2 {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 3.4vw, 4.0rem);
  font-weight: 500;
  color: var(--htc-green);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.htc-idx-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.htc-idx-col-card { display: block; text-decoration: none; color: inherit; }
.htc-idx-col-card__ph {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--htc-cream-2) 0%, var(--htc-cream-3) 100%);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s;
}
.htc-idx-col-card__ph[data-tag]::after {
  content: attr(data-tag);
  position: absolute; bottom: 10px; right: 12px;
  font-family: var(--htc-font-serif); font-style: italic;
  font-size: 1.1rem; letter-spacing: 0.16em;
  color: rgba(13,93,55,0.4);
}
.htc-idx-col-card__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: var(--htc-ink-2);
  margin-bottom: 10px;
}
.htc-idx-col-card__meta .date {
  font-family: var(--htc-font-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--htc-green);
  letter-spacing: 0.02em;
}
.htc-idx-col-card__meta .tag { color: var(--htc-orange); }
.htc-idx-col-card__title {
  font-family: var(--htc-font-mincho);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--htc-ink);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.htc-idx-col-card__text { font-size: 1.3rem; color: var(--htc-ink-2); line-height: 1.8; }
.htc-idx-col-card:hover .htc-idx-col-card__title { color: var(--htc-green); }
.htc-idx-col-card:hover .htc-idx-col-card__ph { opacity: 0.85; }

@media (max-width: 880px) {
  .htc-idx-col-head { grid-template-columns: 1fr; }
  .htc-idx-col-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   施工実績セクション下の白ボーダー
   ============================================================ */
.htc-works-wrap {
  border-bottom: 1px solid #fff;
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* ============================================================
   COLUMN（ダミー｜後日ブログCMSに差し替え）
   ============================================================ */
.htc-column {
  padding-top: 60px;
}
.htc-column__head {
  margin-bottom: 40px;
}
.htc-column__title {
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 3.4vw, 4.2rem);
  font-weight: 500;
  color: #333;
  letter-spacing: 0.06em;
  margin-top: 16px;
}

/* 記事リスト（行レイアウト：左サムネ・右本文）*/
.htc-column__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.htc-column__item {
  display: grid;
  grid-template-columns: 230px 1fr;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  transition: box-shadow 0.2s;
}
.htc-column__item:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.htc-column__thumb {
  background: #fff;
  min-height: 150px;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.htc-column__body {
  background: #ededeb;
  padding: 28px 32px;
}
.htc-column__date {
  font-family: var(--htc-font-mincho);
  font-size: 1.5rem;
  color: #555;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.htc-column__text {
  font-size: 1.4rem;
  line-height: 1.95;
  color: #555;
}

/* View more ボタン（右寄せ・枠線）*/
.htc-column__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}
.htc-column__more-btn {
  display: inline-block;
  border: 1px solid #999;
  padding: 16px 52px;
  font-family: var(--htc-font-mincho);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: #333;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.htc-column__more-btn:hover {
  background: #9D9788;
  border-color: var(--htc-green);
  color: #fff;
  opacity: 1;
}

@media (max-width: 639px) {
  .htc-column__item { grid-template-columns: 1fr; }
  .htc-column__thumb {
    min-height: 180px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .htc-column__body { padding: 22px 20px; }
  .htc-column__more-btn { width: 100%; text-align: center; padding: 16px 24px; }
}

/* ============================================================
   SEC9: CONTACT（中央寄せ1カラム・アイコン見出し・赤ボタン）
   ============================================================ */
.htc-contact2 {
  background: #fff;
}
.htc-contact2__inner {
  max-width: 840px;
  margin: 0 auto;
}

/* --- 見出しエリア（中央寄せ）--- */
.htc-contact2__head {
  text-align: center;
}
.htc-contact2__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--htc-font-mincho);
  font-size: clamp(2.8rem, 3.6vw, 4.2rem);
  font-weight: 500;
  color: #2b2b2b;
  letter-spacing: 0.06em;
}
.htc-contact2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  background: var(--htc-orange);
  color: #fff;
  font-size: 0.68em;
  border-radius: 6px;
}
.htc-contact2__desc {
  margin-top: 24px;
  color: #444;
  font-size: 1.4rem;
  line-height: 2;
}

/* --- 電話案内（中央・下線）--- */
.htc-contact2__tel {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ccc;
}
.htc-contact2__tel-label {
  font-size: 1.3rem;
  color: #555;
  letter-spacing: 0.04em;
}
.htc-contact2__tel-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--htc-green);
}
.htc-contact2__tel-num i { color: var(--htc-green); font-size: 1.6rem; }
.htc-contact2__tel-num strong {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- フォーム（CMS出力をスコープしてスタイリング）--- */
.htc-contact2__form {
  max-width: 820px;
  margin: clamp(40px, 6vw, 72px) auto 0;
}
.htc-contact2__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.htc-contact2__form select,
.htc-contact2__form textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 1.4rem;
  font-family: inherit;
  color: #333;
  box-sizing: border-box;
}
.htc-contact2__form textarea { min-height: 150px; resize: vertical; }
.htc-contact2__form input:focus,
.htc-contact2__form select:focus,
.htc-contact2__form textarea:focus {
  outline: none;
  border-color: var(--htc-green);
}

/* 必須ラベル（CMS側に .req 等がある場合の保険）*/
.htc-contact2__form .req,
.htc-contact2__form .required {
  font-size: 1.0rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--htc-red);
  padding: 2px 7px;
  font-weight: 500;
  border-radius: 2px;
}

/* 送信ボタン: 赤・中央・やや広め・角丸ごく小 */
.htc-contact2__form input[type="submit"],
.htc-contact2__form button[type="submit"],
.htc-contact2__form button {
  display: block;
  margin: clamp(32px, 4vw, 48px) auto 0;
  min-width: 240px;
  background: #e2332d;
  color: #fff;
  border: none;
  border-radius: 2px;
  padding: 17px 40px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.htc-contact2__form input[type="submit"]:hover,
.htc-contact2__form button[type="submit"]:hover,
.htc-contact2__form button:hover { opacity: 0.88; }
/* 送信ボタン内のメールアイコン（CMS出力に含まれる場合）は非表示 */
.htc-contact2__form button i,
.htc-contact2__form button svg,
.htc-contact2__form button img,
.htc-contact2__form input[type="submit"] i { display: none; }

/* レスポンシブ: スマホは1カラム（ラベル上・入力下）*/
@media (max-width: 639px) {
  .htc-contact2__form input[type="submit"],
  .htc-contact2__form button[type="submit"],
  .htc-contact2__form button {
    width: 100%;
    min-width: 0;
  }
}

/* btn-ghost（ghost ボタン）*/
.htc-idx-btn-ghost {
  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-green);
  background: transparent;
  color: var(--htc-green);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.htc-idx-btn-ghost::after { content: "→"; transition: transform 0.2s; }
.htc-idx-btn-ghost:hover { background: #9D9788; color: var(--htc-cream); opacity: 1; }
.htc-idx-btn-ghost:hover::after { transform: translateX(4px); }
.htc-idx-btn-ghost .en {
  font-family: var(--htc-font-serif); font-style: italic;
  font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em;
}

/* btn-orange */
.htc-idx-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 var(--htc-orange);
  background: var(--htc-orange);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}
.htc-idx-btn-orange::after { content: "→"; transition: transform 0.2s; }
.htc-idx-btn-orange:hover { background: var(--htc-orange-dk); border-color: var(--htc-orange-dk); opacity: 1; }
.htc-idx-btn-orange:hover::after { transform: translateX(4px); }
.htc-idx-btn-orange .en {
  font-family: var(--htc-font-serif); font-style: italic;
  font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em;
}