@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .ht-loader                           - ローダー（全ページ・毎回。白地にロゴ＋流れる細いバー）
 * .ht-header / .ht-gnav / .ht-drop     - ヘッダー（スクロールで縮小＋影）・ナビ（中央から広がる固定幅の下線）・ヘッダー下端に付くドロップダウン
 * .ht-toggle / .ht-spnav               - ハンバーガー・画面全体を覆うSPメニュー（サブメニューは＋で開閉）
 * .ht-head                             - 英字ラベル（黄色の短い線）＋日本語見出し
 * .ht-btn                              - ピル型ボタン（線／塗り／黄色）。幅240px固定。文字は左寄せ・右端に●（hover で反転し●が右へ）
 * .ht-btn-arrow                        - ピル型＋右端に丸の矢印（事業内容の「商品紹介」。白地に青い線＋青丸、hover で反転）
 * .ht-mv                               - 写真全面＋青のグラデーション＋下端のwave＋黄色マーカーのキャッチ
 * .ht-hero                             - 下層のタイトル帯（写真＋グラデーション＋wave）。--simple は記事詳細
 * .ht-wave                             - セクション下端のゆるやかな波（SVG）
 * .ht-ph                               - 未受領素材のプレースホルダ（斜線＋ラベル）
 * .ht-reveal                           - 写真の出し方（左からカーテンが開く＋中の写真が少し拡大から戻る。1回だけ）
 * .ht-info / .ht-svc / .ht-reason      - TOP：対応エリア等の小カード・事業内容カード（写真＋丸アイコン）・選ばれる理由（切り替え式）
 * .ht-topprod / .ht-works / .ht-work   - TOP：商品紹介の導線／施工実績カード（CMS）
 * .ht-cta                              - 共通お問い合わせ（電話カード＋フォームカード）
 * .ht-footer / .ht-pagetop             - フッター（ロゴ・ナビ・地図）／ページトップ
 * .ht-intro                            - 下層の導入文
 * .ht-msg / .ht-profile / .ht-access   - 会社概要：代表ごあいさつ／会社情報（dl）／アクセス
 * .ht-svcitem / .ht-flow / .ht-area    - 事業内容：左右交互の各事業／アフターサービスのSTEP／対応エリア（写真＋地図）
 * .ht-prod / .ht-eco                   - 商品紹介：商品カード／省エネ関連事業
 * .ht-pager / .ht-entry                - 施工実績：ページ送り／記事詳細
 * .ht-tel / .ht-cmsform / .ht-privacy  - お問い合わせ：電話／フォームCMSの上書き（同意で送信ボタンを有効化）／プライバシーポリシー
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 値の粒度不足   ：clamp() で幅に追従する余白・文字サイズ（section・heading・button が固定値）。ブレークポイント 1099／899／767／599px
 * 指定方向不足   ：英字ラベルの左右に短い線（中央寄せ）／左だけに線（左寄せ）の出し分け
 * 状態不足       ：ヘッダーのスクロール後の縮小（ロゴ・社名・上段の電話をふわっと畳む）／同意チェックで送信ボタンを有効化
 * 構造不足       ：ヘッダー下端に付くドロップダウン（下の角だけ丸める）／写真の下辺に丸アイコンが半分かかるカード／2枚ずつ見せて1枚ずつ送るカード切り替え
 * 装飾パターン不足：下端のゆるやかな wave（SVG）／黄色の蛍光マーカー（70〜92%）／未受領素材の斜線プレースホルダ
 *
 */

/* ==========================================================
   土台（Claude Design は body に行高・字間の指定があるため、それに合わせる）
   ========================================================== */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: #FFFFFF;
  color: #1F2D3D;
  font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}
[id] { scroll-margin-top: 96px; }
a { color: #1B5E9E; text-decoration: none; transition: color .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .3s ease; }
a:hover { opacity: 1; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
strong { font-weight: 700; }

@keyframes ht-bounce { 0%, 10%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(-3px); } }

/* 装飾の画像・イラストは選択・ドラッグさせない */
.ht-deco, .ht-ill, .ht-hero__bg, .ht-mv__img, .ht-reason__deco, .ht-cta__deco, .ht-wave { pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* 改行の出し分け（1099px以下だけ改行／899px以下で改行しない） */
.ht-br-sp { display: none; }
@media (max-width: 1099px) { .ht-br-sp { display: inline; } }
@media (max-width: 899px) { .ht-br-pc900 { display: none; } }
@media (max-width: 767px) { .ht-br-pc767 { display: none; } }
/* 600〜899px だけ改行 */
.ht-nowrap { white-space: nowrap; }
.ht-br-tab899 { display: none; }
@media (min-width: 600px) and (max-width: 899px) { .ht-br-tab899 { display: inline; } }
/* 600〜1099px だけ改行 */
.ht-br-tab { display: none; }
@media (min-width: 600px) and (max-width: 1099px) { .ht-br-tab { display: inline; } }
/* 599px 以下だけ改行 */
.ht-br-sp599 { display: none; }
@media (max-width: 599px) { .ht-br-sp599 { display: inline; } }

/* 写真（枠いっぱい） */
.ht-fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 未受領素材のプレースホルダ（斜線＋ラベル） */
.ht-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #DCE7F2 0 14px, #E8F0F8 14px 28px); }
.ht-ph__label { padding: 6px 12px; border-radius: 5px; background: rgba(255, 255, 255, .85); color: #4A5A6B; font-family: ui-monospace, Menlo, monospace; font-size: 12px; text-align: center; }
.ht-msg__photo-frame .ht-ph__label { line-height: 1.6; }

.ht-dot { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #1B5E9E; }
.ht-dot--yellow { background: #F2B135; }
.ht-ico { display: block; flex-shrink: 0; }
.ht-ill { display: block; width: 44px; height: auto; }

/* ==========================================================
   ローダー（白地にロゴ＋細いバーが流れるだけの軽いもの。全ページ・毎回。読み込みが終わったら 0.5秒でふわっと消える）
   ========================================================== */
.ht-loader { display: none; }
.ht-loading .ht-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #FFFFFF; transition: opacity .5s ease, visibility .5s ease; }
/* 別ページへ移るときは 0.3秒で重ねる。次のページもローダーが出た状態で始まるので、つなぎ目が見えない */
.is-leaving .ht-loader { transition-duration: .3s; }
.ht-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ht-loader__logo { display: block; width: min(200px, 50vw); height: auto; pointer-events: none; user-select: none; }
.ht-loader__bar { position: relative; overflow: hidden; width: min(160px, 40vw); height: 3px; border-radius: 2px; background: #E3EBF3; }
.ht-loader__bar::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 2px; background: #1B5E9E; animation: ht-loader-bar 1.2s ease-in-out infinite; }
@keyframes ht-loader-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .ht-loading .ht-loader { display: none; } }

/* ==========================================================
   レイアウト
   ========================================================== */
.ht-main { display: block; }
/* ページ切り替え：開くときは下から12pxふわっと（0.6秒）、サイト内の別ページへ移るときはふわっと消える（0.3秒）。common.js で .is-loaded／.is-leaving を付ける */
.ht-js .ht-main { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.ht-js.is-loaded .ht-main { opacity: 1; transform: translateY(0); }
.ht-js.is-leaving .ht-main, .ht-js.is-leaving .ht-cta, .ht-js.is-leaving .ht-footer { opacity: 0; transition: opacity .3s ease; }
.ht-cta, .ht-footer { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .ht-js .ht-main { transform: none; transition: none; } }
.ht-sec { padding: clamp(64px, 9vw, 112px) clamp(20px, 4vw, 40px); }
.ht-sec--md { padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px); }
.ht-sec--list { padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px) clamp(64px, 9vw, 112px); }
.ht-sec--grid { padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px); }
.ht-sec--pt0 { padding-top: 0; }
.ht-sec--pb0 { padding-bottom: 0; }
.ht-sec--pale { background: #F4F8FC; }
.ht-sec--round-top { border-radius: 10px 10px 0 0; }
.ht-sec--blue { position: relative; overflow: hidden; background: #1B5E9E; color: #FFFFFF; }
.ht-inner { max-width: 1180px; margin: 0 auto; }
.ht-inner--1100 { max-width: 1100px; }
.ht-inner--1000 { max-width: 1000px; }
.ht-inner--980 { max-width: 980px; }
.ht-inner--880 { max-width: 880px; }
.ht-inner--860 { max-width: 860px; }
.ht-inner--820 { max-width: 820px; }
.ht-stack { display: flex; flex-direction: column; }
.ht-stack--48 { gap: 48px; }
.ht-stack--40 { gap: 40px; }
.ht-stack--36 { gap: 36px; }
.ht-stack--32 { gap: 32px; }
.ht-stack--24 { gap: 24px; }

/* ==========================================================
   見出し（英字ラベル＋黄色の短い線＋日本語）
   ========================================================== */
.ht-head { display: flex; flex-direction: column; gap: 6px; }
.ht-head--center { align-items: center; text-align: center; }
.ht-head__en { display: flex; align-items: center; gap: 10px; color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .2em; }
.ht-head__bar { display: block; flex-shrink: 0; width: 24px; height: 3px; border-radius: 2px; background: #F2B135; }
.ht-head__ja { color: #14304F; font-weight: 700; font-size: clamp(25px, 3vw, 34px); line-height: 1.5; }
.ht-head--white .ht-head__en, .ht-head--white .ht-head__ja { color: #FFFFFF; }
.ht-head--cta { gap: 8px; }
.ht-head--cta .ht-head__ja { font-size: clamp(22px, 3vw, 32px); }

/* ==========================================================
   ボタン（ピル型・幅240pxでそろえる。文字は左寄せ、右端に小さな●。hover で塗りが反転し、●が右へ少し動く）
   ========================================================== */
.ht-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; width: 240px; max-width: 100%; height: 50px; padding: 0 48px 0 30px; border: 2px solid transparent; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.9; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.ht-btn::after { content: "●"; position: absolute; top: 50%; right: 30px; font-size: .5em; line-height: 1; transform: translateY(-50%); transition: right .5s ease, color .3s ease; }
.ht-btn:hover::after { right: 20px; }
.ht-btn__arrow { font-family: "Barlow Semi Condensed", sans-serif; }
.ht-btn--line { border-color: #1B5E9E; background: #FFFFFF; color: #1B5E9E; }
.ht-btn--line:hover { background: #1B5E9E; color: #FFFFFF; }
.ht-btn--fill { border-color: #1B5E9E; background: #1B5E9E; color: #FFFFFF; }
.ht-btn--fill:hover { background: #FFFFFF; color: #1B5E9E; }
.ht-btn--yellow { border-color: #F2B135; background: #F2B135; color: #14304F; }
.ht-btn--yellow:hover { background: #FFFFFF; color: #14304F; }
.ht-btn--yellow::after { color: #14304F; }
.ht-btn--sm { font-size: 14px; }
.ht-btn--start { align-self: flex-start; }
.ht-btns { display: flex; justify-content: center; }
@media (max-width: 767px) { .ht-btn--start { align-self: center; } }

/* ピル型＋右端に丸の矢印（事業内容の「商品紹介」）。白地に青い線＋青丸、hover で色が反転（矢印は動かさない） */
.ht-btn-arrow { display: inline-flex; align-self: flex-start; align-items: center; justify-content: space-between; gap: 16px; width: 240px; max-width: 100%; height: 48px; margin-top: 8px; padding: 0 9px 0 28px; border: 2px solid #1B5E9E; border-radius: 999px; background: #FFFFFF; color: #1B5E9E; transition: background-color .3s ease, color .3s ease; }
.ht-btn-arrow__label { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.ht-btn-arrow__circle { display: flex; overflow: hidden; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1B5E9E; color: #FFFFFF; transition: background-color .3s ease, color .3s ease; }
.ht-btn-arrow__circle .ht-ico { width: 11px; height: auto; }
.ht-btn-arrow:hover { background: #1B5E9E; color: #FFFFFF; }
.ht-btn-arrow:hover .ht-btn-arrow__circle { background: #FFFFFF; color: #1B5E9E; }
/* hover で矢印が丸の右へ抜け、左から戻ってくる */
.ht-btn-arrow:hover .ht-btn-arrow__circle .ht-ico { animation: ht-arrow-pass .6s ease; }
@keyframes ht-arrow-pass { 0% { transform: translateX(0); } 45% { transform: translateX(26px); } 46% { transform: translateX(-26px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .ht-btn-arrow:hover .ht-btn-arrow__circle .ht-ico { animation: none; } }
@media (max-width: 767px) { .ht-btn-arrow { align-self: center; } }

/* タグ */
.ht-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-chip { display: inline-block; padding: 4px 14px; border-radius: 5px; background: #EBF2F9; color: #1B5E9E; font-weight: 700; font-size: 13px; line-height: 1.9; }
.ht-chip--sm { padding: 2px 12px; font-size: 12px; }
@media (max-width: 767px) { .ht-chip { border-radius: 3px; } }
/* CMS のカテゴリ名が空のときは、中身のないタグを出さない */
.ht-chip:empty { display: none; }

.ht-marker { background: linear-gradient(transparent 70%, #F2B135 70%, #F2B135 92%, transparent 92%); color: #FFFFFF; }

/* セクション下端のゆるやかな波 */
.ht-wave { position: absolute; left: 0; bottom: -1px; z-index: 2; display: block; width: 100%; }
.ht-wave--mv { height: clamp(60px, 8vw, 120px); }
.ht-wave--hero { height: clamp(32px, 4.5vw, 64px); }

/* ==========================================================
   ヘッダー
   ========================================================== */
.ht-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #FFFFFF; transition: box-shadow .3s ease; }
.ht-header.is-scrolled { box-shadow: 0 6px 20px rgba(20, 48, 79, .08); }
.ht-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 18px clamp(20px, 3vw, 40px); transition: padding .35s ease; }
.ht-header.is-scrolled .ht-header__inner { padding-top: 14px; padding-bottom: 14px; }
.ht-header__logo { display: flex; flex-direction: column; flex-shrink: 0; align-items: center; color: #000000; }
.ht-header__logo:hover { color: #000000; }
.ht-header__logo-img { display: block; width: auto; height: 58px; transition: height .35s ease; }
.ht-header.is-scrolled .ht-header__logo-img { height: 42px; }
.ht-header__name { display: block; overflow: hidden; max-height: 30px; margin-top: 6px; padding-left: 4px; font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; opacity: 1; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; }
.ht-header.is-scrolled .ht-header__name { max-height: 0; margin-top: 0; opacity: 0; }
.ht-header__name-br { display: none; }
.ht-header__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.ht-header__util { display: flex; align-items: center; gap: 14px; overflow: hidden; max-height: 60px; margin-bottom: 10px; opacity: 1; transition: max-height .35s ease, opacity .25s ease, margin-bottom .35s ease; }
.ht-header.is-scrolled .ht-header__util { max-height: 0; margin-bottom: 0; opacity: 0; }
.ht-header__tel { display: flex; flex-direction: column; align-items: flex-end; margin-right: 6px; line-height: 1.2; }
.ht-header__tel-num { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 26.5px; letter-spacing: .03em; transition: color .3s ease; }
.ht-header__tel-num:hover { color: #14304F; }
.ht-header__tel-time { color: #14304F; font-weight: 700; font-size: 12px; }
/* 電話の右の丸いアイコンボタン（メール＝黄色／地図＝赤。赤は対応エリアの地図ピンと同じ色） */
.ht-hbtn { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #FFFFFF; }
.ht-hbtn:hover { color: #FFFFFF; }
/* hover でアイコンが1回転（参考：sns-list） */
.ht-hbtn__icon { display: block; width: 24px; height: 24px; pointer-events: none; user-select: none; }
.ht-hbtn:hover .ht-hbtn__icon { transform: rotate(360deg); transition: transform 1s ease; }
.ht-hbtn--mail { background: #F2B135; }
.ht-hbtn--map { background: #D7373F; }
.ht-header__sptel { display: none; }

/* PCナビ：文字色は変えない。下線は中央から広がる固定幅（32px）。カレントは黄色 */
.ht-gnav { display: flex; gap: 36px; transition: gap .35s ease; }
.ht-header.is-scrolled .ht-gnav { gap: 32px; }
.ht-gnav__item { position: relative; }
.ht-gnav__link { position: relative; display: block; padding: 10px 4px 4px; color: #1A1A1A; font-weight: 700; font-size: 16px; line-height: 1.6; letter-spacing: .06em; white-space: nowrap; transition: font-size .35s ease; }
.ht-gnav__link:hover { color: #1A1A1A; }
.ht-header.is-scrolled .ht-gnav__link { font-size: 15px; }
.ht-gnav__line { position: absolute; left: 50%; bottom: 0; width: 32px; height: 2px; margin-left: -16px; border-radius: 1px; background: #BFD3E6; transform: scaleX(0); transform-origin: center; transition: transform .3s ease; }
.ht-gnav__item:hover .ht-gnav__line { transform: scaleX(1); }
.ht-gnav__item.is-current .ht-gnav__line { background: #F2B135; transform: scaleX(1); }

/* ドロップダウン：ヘッダーの下端にくっつける（上の角は丸めない・下の角だけ丸める） */
.ht-drop { position: absolute; top: 100%; left: 50%; z-index: 5; padding-top: 18px; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .4s ease, visibility .5s ease; }
.ht-header.is-scrolled .ht-drop { padding-top: 16px; }
.ht-gnav__item:hover .ht-drop, .ht-gnav__item:focus-within .ht-drop { opacity: 1; visibility: visible; }
/* ヘッダーの真下から下に向かって伸びる（見える範囲を上から下へ広げる。影の分は左右・下に余白を取る） */
.ht-drop__box { position: relative; display: flex; flex-direction: column; padding: 12px 8px; border-radius: 0 0 10px 10px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(20, 48, 79, .12); clip-path: inset(0 -40px 100% -40px); transition: clip-path .5s ease; }
.ht-gnav__item:hover .ht-drop__box, .ht-gnav__item:focus-within .ht-drop__box { clip-path: inset(0 -40px -40px -40px); }
.ht-drop__link { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 5px; color: #1A1A1A; font-weight: 500; font-size: 14px; line-height: 1.5; white-space: nowrap; transition: background-color .3s ease; }
.ht-drop__link:hover { background: #EBF2F9; color: #1A1A1A; }

.ht-header-space { height: 134px; }

/* ハンバーガー・SPメニュー（1099px 以下） */
.ht-toggle { display: none; }
.ht-spnav { display: none; }

@media (max-width: 1099px) {
  .ht-header__inner { gap: 16px; height: 84px; padding: 0 16px; }
  .ht-header.is-scrolled .ht-header__inner { padding: 0 16px; }
  .ht-header__logo { flex-direction: row; gap: 10px; min-width: 0; }
  .ht-header__logo-img, .ht-header.is-scrolled .ht-header__logo-img { height: 40px; }
  .ht-header__name, .ht-header.is-scrolled .ht-header__name { overflow: visible; max-height: none; margin: 0; padding: 0; font-size: 14px; opacity: 1; }
  .ht-header__name-br { display: inline; }
  .ht-header__right { display: none; }
  .ht-header__sptel { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 52px; border-radius: 999px; background: #F2B135; color: #14304F; }
  .ht-header-space { height: 84px; }

  .ht-toggle { position: fixed; top: 20px; right: 16px; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 999px; background: #1B5E9E; cursor: pointer; }
  .ht-toggle__line { display: block; width: 18px; height: 2px; border-radius: 1px; background: #FFFFFF; transition: transform .35s ease, opacity .2s ease; }
  .is-menu-open .ht-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .is-menu-open .ht-toggle__line:nth-child(2) { opacity: 0; }
  .is-menu-open .ht-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .ht-spnav { position: fixed; top: 84px; left: 0; right: 0; bottom: 0; z-index: 49; display: flex; flex-direction: column; height: calc(100dvh - 84px); padding: 4px 20px 40px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #E3EBF3; background: #FFFFFF; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
  .is-menu-open .ht-spnav { opacity: 1; visibility: visible; transform: translateY(0); }
  .is-menu-open { overflow: hidden; }
}
.ht-spnav__list { display: flex; flex-direction: column; }
.ht-spnav__item { border-bottom: 1px solid #E3EBF3; }
.ht-spnav__row { display: flex; align-items: center; gap: 12px; }
.ht-spnav__link { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 4px; color: #1A1A1A; }
.ht-spnav__link:hover { color: #1A1A1A; }
.ht-spnav__ja { font-weight: 700; font-size: 17px; line-height: 1.5; letter-spacing: .06em; white-space: nowrap; }
.ht-spnav__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .16em; }
.ht-spnav__chev { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 4px; }
.ht-spnav__open { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 4px; padding: 0; border: none; border-radius: 50%; background: #EBF2F9; cursor: pointer; }
.ht-spnav__open .ht-ico { transition: transform .3s ease; }
.ht-spnav__open[aria-expanded="true"] .ht-ico { transform: rotate(45deg); }
.ht-spnav__sub { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.ht-spnav__sub-in { display: flex; flex-direction: column; padding: 0 4px 12px 8px; }
.ht-spnav__sublink { display: flex; align-items: center; gap: 10px; padding: 5px 4px; color: #3A4A5C; font-weight: 500; font-size: 14px; }
.ht-spnav__sublink:hover { color: #1B5E9E; }
.ht-spnav__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.ht-spnav__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 68px; padding: 0 12px; border: 2px solid; border-radius: 5px; line-height: 1.1; white-space: nowrap; }
.ht-spnav__btn--tel { border-color: #1B5E9E; background: #FFFFFF; color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: .02em; }
.ht-spnav__btn--mail { border-color: #F2B135; background: #F2B135; color: #14304F; font-weight: 700; font-size: 14px; }
.ht-spnav__btn--tel:hover { color: #1B5E9E; }
.ht-spnav__btn--mail:hover { color: #14304F; }
.ht-spnav__time { margin-top: 12px; color: #3A4A5C; font-size: 13px; text-align: center; }

/* ==========================================================
   TOP：メインビジュアル
   ========================================================== */
.ht-mv { position: relative; display: flex; align-items: center; overflow: hidden; min-height: clamp(560px, 82vh, 780px); background: #1B5E9E; }
@media (max-width: 1099px) { .ht-mv { min-height: auto; } }
/* CMSスライダーに差し替えても外枠に追従するよう、#slideshow の高さを MV と同じにする */
/* CMS の中の重なり順（z-index 1〜5）を #slideshow の中に閉じ込めて、青のグラデーション・キャッチより下に置く */
#slideshow.ht-mv__slide { position: absolute; inset: 0; z-index: 0; height: 100%; }
#slideshow .swiper-slide, #slideshow .main_slider__inner { width: 100%; height: 100%; }
/* スライダーCMS：CMS 側の高さは auto（写真の比率なり）なので、MV の高さに合わせて写真を敷き詰める */
#slideshow #cms-slider-1-1-area, #slideshow .slider_wrapper, #slideshow .main_slider__outer { height: 100% !important; }
.ht-mv__img, #slideshow .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ht-mv__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 58, 100, .88) 0%, rgba(27, 94, 158, .62) 48%, rgba(27, 94, 158, .12) 100%); }
/* 768px 以上：キャッチのある左側は同じ濃さのまま、右側（写真だけの部分）を薄くする。スマホは文字が右まで来るので上のまま */
@media (min-width: 768px) { .ht-mv__overlay { background: linear-gradient(100deg, rgba(20, 58, 100, .88) 0%, rgba(27, 94, 158, .62) 45%, rgba(27, 94, 158, .2) 68%, rgba(27, 94, 158, 0) 100%); } }
.ht-mv__inner { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px) clamp(96px, 13vw, 180px); }
.ht-mv__body { display: flex; flex-direction: column; gap: 28px; max-width: 640px; }
.ht-mv__catch { color: #FFFFFF; font-weight: 700; font-size: clamp(25px, 4vw, 52px); line-height: 1.5; letter-spacing: .1em; text-shadow: 0 2px 16px rgba(10, 30, 60, .3); }
/* キャッチはふわっと2段階で出す（大きい文字 → 0.6秒後に小さい文字）。common.js で .is-mv-in を付ける */
.ht-js .ht-mv__catch, .ht-js .ht-mv__lead { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease, transform 1.2s ease; }
.ht-js.is-mv-in .ht-mv__catch, .ht-js.is-mv-in .ht-mv__lead { opacity: 1; transform: none; }
.ht-js.is-mv-in .ht-mv__lead { transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .ht-js .ht-mv__catch, .ht-js .ht-mv__lead { transform: none; } }
.ht-mv__catch-last { letter-spacing: .02em; white-space: nowrap; }
.ht-mv__lead { max-width: 640px; color: #FFFFFF; font-size: clamp(15px, 1.4vw, 17px); line-height: 2; text-wrap: pretty; }

/* ==========================================================
   TOP：会社紹介
   ========================================================== */
.ht-about__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.ht-about__illust { position: relative; display: block; width: min(100%, 600px); }
.ht-about__illust-base { display: block; width: 100%; height: auto; }
/* 雲：イラストの中の元の位置（上から10.22%）に置いて、その場で上下に7px ふわふわ（雲ごとのずらし方・速さは index.php の style で指定） */
.ht-about__cloud { position: absolute; top: 10.22%; width: 4.25%; height: auto; animation: ht-cloud 2.4s ease-in-out infinite alternate; }
@keyframes ht-cloud { from { transform: translateY(-3.5px); } to { transform: translateY(3.5px); } }
@media (prefers-reduced-motion: reduce) { .ht-about__cloud { animation: none; } }
.ht-about__lead { color: #14304F; font-weight: 700; font-size: clamp(17px, 2.1vw, 24px); line-height: 1.7; text-wrap: pretty; }
.ht-about__txt { max-width: 760px; color: #3A4A5C; line-height: 2.1; text-align: center; text-wrap: pretty; }
@media (min-width: 1100px) { .ht-about__txt { max-width: 840px; } }
@media (max-width: 1099px) { .ht-about__txt { text-align: left; } }
/* 対応エリア・協力店：淡い青の1枚の帯に2項目。間を細い縦線で区切る（767px 以下は縦に並べて横線） */
.ht-about__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 20px; padding: 28px 0; border-radius: 10px; background: #FAF7EF; text-align: left; }
.ht-info { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 clamp(16px, 2.5vw, 32px); }
.ht-info + .ht-info { border-left: 1px solid #F1E6C4; }
.ht-info__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; color: #F2B135; }
.ht-info__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-info__label { color: #1B5E9E; font-weight: 700; font-size: 14px; letter-spacing: .1em; line-height: 1.6; }
.ht-info__main { color: #14304F; font-weight: 700; font-size: 20px; line-height: 1.5; }
.ht-info__main--en { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 22px; }
.ht-info__note { color: #4A5A6B; font-size: 13px; line-height: 1.6; }
.ht-info__txt--aeon { gap: 6px; }
/* 対応エリアは協力店側と同じ体裁（上＝ロゴの文字と同じくらいの大きさの黒系、下＝協力店名と同じ） */
.ht-info__txt--area { gap: 6px; }
.ht-info__txt--area .ht-info__main { color: #1F2D3D; font-size: 18px; line-height: 1.4; }
.ht-info__txt--area .ht-info__note { color: #1F2D3D; font-weight: 500; font-size: 14px; line-height: 1.6; }
.ht-info__aeon { display: block; width: auto; height: 36px; }
.ht-info__aeon-name { color: #1F2D3D; font-weight: 500; font-size: 14px; line-height: 1.6; }
@media (max-width: 899px) {
  .ht-about__info { grid-template-columns: 1fr; padding: 0 24px; }
  .ht-info { justify-content: flex-start; padding: 22px 0; }
  .ht-info + .ht-info { border-left: none; border-top: 1px solid #F1E6C4; }
}

/* ==========================================================
   TOP：事業内容カード（写真の下辺に丸アイコンが半分かかる）
   ========================================================== */
/* 5つを横に並べて、PC 3枚・999px以下 2枚・599px以下 1枚を見せる。前へ／次へ・ドットで1枚ずつ送る（js/common.js） */
.ht-svc__wrap { display: grid; grid-template-areas: "head ctrl" "view view"; grid-template-columns: 1fr auto; align-items: end; gap: 48px 24px; }
.ht-svc__head { grid-area: head; min-width: 0; }
.ht-svc__view { grid-area: view; overflow: hidden; }
.ht-svc__ctrl { grid-area: ctrl; }
.ht-svc { --n: 3; --i: 0; display: flex; gap: 24px; transform: translateX(calc(var(--i) * -1 * ((100% - (var(--n) - 1) * 24px) / var(--n) + 24px))); transition: transform .5s ease; }
.ht-svc__item { flex: 0 0 calc((100% - (var(--n) - 1) * 24px) / var(--n)); min-width: 0; }
@media (max-width: 999px) { .ht-svc { --n: 2; } }
@media (max-width: 599px) { .ht-svc { --n: 1; } }
.ht-svc__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.ht-svc__arrow { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid #1B5E9E; border-radius: 50%; background: #FFFFFF; color: #1B5E9E; cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
.ht-svc__arrow:hover { background: #1B5E9E; color: #FFFFFF; }
.ht-svc__arrow:disabled { opacity: .35; cursor: default; }
.ht-svc__arrow:disabled:hover { background: #FFFFFF; color: #1B5E9E; }
.ht-svc__dots { display: flex; align-items: center; gap: 10px; }
.ht-svc__dot { width: 12px; height: 12px; padding: 0; border: none; border-radius: 50%; background: #C9D8E8; cursor: pointer; transition: background-color .3s ease; }
.ht-svc__dot.is-active { background: #F2B135; }
.ht-svc__dot[hidden] { display: none; }
@media (max-width: 767px) {
  .ht-svc__wrap { row-gap: 32px; }
  .ht-svc__ctrl { gap: 12px; }
  .ht-svc__arrow { width: 36px; height: 36px; }
  .ht-svc__arrow .ht-ico { width: 13px; height: 13px; }
  .ht-svc__dots { gap: 6px; }
  .ht-svc__dot { width: 8px; height: 8px; }
  /* 600〜767px は2枚並びで幅が狭いので、見出しが2行にならないよう少し小さく */
  .ht-svc .ht-svc__body { padding-right: 20px; padding-left: 20px; }
  .ht-svc .ht-svc__ttl { font-size: 18px; }
}
/* ふわっと出す指定（data-aos）は外側の .ht-svc__item に付ける（AOS が transition を上書きして、カードの影が一瞬で出るのを防ぐ） */
.ht-svc__item { display: flex; }
.ht-svc__card { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #FFFFFF; color: #1F2D3D; }
.ht-svc__card:hover { color: #1F2D3D; }
.ht-svc__media { position: relative; display: block; aspect-ratio: 3 / 2; }
.ht-svc__photo { position: absolute; inset: 0; display: block; overflow: hidden; }
.ht-svc__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ht-svc__card:hover .ht-svc__photo img { transform: scale(1.06); }
.ht-svc__icon { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #FFFFFF; transform: translate(-50%, 50%); }
.ht-svc__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 52px 26px 24px; }
.ht-svc__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .18em; text-align: center; }
.ht-svc__ttl { margin: -4px 0 4px; color: #14304F; font-weight: 700; font-size: 20px; line-height: 1.5; text-align: center; }
.ht-svc__txt { color: #3A4A5C; font-size: 15px; line-height: 1.9; }
.ht-svc__more { display: flex; align-self: flex-end; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: #1B5E9E; font-weight: 700; font-size: 13px; }

/* ==========================================================
   TOP：選ばれる理由（PC 2枚・767px以下 1枚ずつ送る。見出しは左寄せ、ボタン・ドットは見出しの右。スマホも同じ）
   ========================================================== */
.ht-reason__deco { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 見出し（左）とボタン・ドット（右）を同じ行に、カードはその下（スマホも同じ配置。ボタンは小さく） */
.ht-reason__inner { position: relative; display: grid; grid-template-areas: "head ctrl" "view view"; grid-template-columns: 1fr auto; align-items: end; gap: 48px 24px; }
.ht-reason__head { grid-area: head; min-width: 0; }
.ht-reason__view { grid-area: view; }
.ht-reason__ctrl { grid-area: ctrl; }
.ht-reason__view { overflow: hidden; }
.ht-reason__track { --i: 0; display: flex; gap: 24px; transform: translateX(calc(var(--i) * -1 * ((100% - 24px) / 2 + 24px))); transition: transform .5s ease; }
.ht-reason__card { display: flex; flex: 0 0 calc((100% - 24px) / 2); flex-direction: column; gap: 22px; padding: clamp(28px, 3.5vw, 44px); border-radius: 10px; background: #FFFFFF; color: #1F2D3D; }
.ht-reason__top { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); text-align: left; }
.ht-reason__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: clamp(76px, 7vw, 96px); height: clamp(76px, 7vw, 96px); border-radius: 50%; background: #EBF2F9; }
.ht-reason__icon--wide .ht-ill { width: 46px; }
.ht-reason__ttlbox { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ht-reason__no { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .16em; }
.ht-reason__ttl { color: #14304F; font-weight: 700; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; text-wrap: pretty; }
.ht-reason__txt { color: #3A4A5C; font-size: 15px; line-height: 2; }
.ht-reason__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.ht-reason__arrow { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid #FFFFFF; border-radius: 50%; background: transparent; color: #FFFFFF; cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
.ht-reason__arrow:hover { background: #FFFFFF; color: #1B5E9E; }
.ht-reason__arrow:disabled { opacity: .35; cursor: default; }
.ht-reason__arrow:disabled:hover { background: transparent; color: #FFFFFF; }
.ht-reason__dots { display: flex; align-items: center; gap: 10px; }
.ht-reason__dot { width: 12px; height: 12px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: background-color .3s ease; }
.ht-reason__dot.is-active { background: #F2B135; }
.ht-reason__dot--sp { display: none; }
@media (max-width: 1099px) { .ht-reason__top { flex-direction: column; text-align: center; } }
@media (max-width: 767px) {
  /* スマホも見出しの右にボタン・ドット（小さくする） */
  .ht-reason__inner { row-gap: 32px; }
  .ht-reason__ctrl { gap: 12px; }
  .ht-reason__arrow { width: 36px; height: 36px; }
  .ht-reason__arrow .ht-ico { width: 13px; height: 13px; }
  .ht-reason__dots { gap: 6px; }
  .ht-reason__dot { width: 8px; height: 8px; }
  .ht-reason__track { transform: translateX(calc(var(--i) * -1 * (100% + 24px))); }
  .ht-reason__card { flex-basis: 100%; }
  .ht-reason__dot--sp { display: block; }
}

/* ==========================================================
   TOP：商品紹介への導線
   ========================================================== */
/* 左半分＝写真（上下・左端まで枠いっぱい）、右半分＝文字。767px 以下は写真を上に4:3で */
.ht-topprod { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; overflow: hidden; border-radius: 10px; background: #F4F8FC; }
.ht-topprod__media { position: relative; overflow: hidden; min-height: 380px; background: #FFFFFF; }
.ht-topprod__media img, .ht-topprod__media .ht-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-topprod__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(32px, 5vw, 56px); }
.ht-topprod__txt { color: #3A4A5C; text-wrap: pretty; }
@media (max-width: 767px) {
  .ht-topprod { grid-template-columns: 1fr; }
  .ht-topprod__media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ==========================================================
   施工実績（TOP・一覧共通のカード。CMS の出力も同じクラスで組む）
   ========================================================== */
.ht-works-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ht-works-head .ht-btn { margin: 0; }
@media (max-width: 767px) { .ht-works-head .ht-btn { margin: 0 auto; } }
.ht-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.ht-work { display: flex; }
.ht-work__link { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 2px solid #E3EBF3; border-radius: 10px; background: #FFFFFF; color: #1F2D3D; transition: border-color .3s ease; }
.ht-work__link:hover { border-color: #1B5E9E; color: #1F2D3D; }
.ht-work__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.ht-work__media > img, .ht-work__media > .ht-ph { display: flex; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ht-work__link:hover .ht-work__media > img, .ht-work__link:hover .ht-work__media > .ht-ph { transform: scale(1.06); }
.ht-work__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.ht-work__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ht-work__date { color: #4A5A6B; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; }
/* 一覧のタイトルは1行まで（それ以上は …） */
.ht-work__title { overflow: hidden; color: #14304F; font-weight: 700; font-size: 17px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.ht-work__place { color: #4A5A6B; font-size: 13px; }
.ht-works-empty { grid-column: 1 / -1; color: #3A4A5C; text-align: center; }
.ht-cms-pager { display: none; }

/* ページ送り */
.ht-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ht-pager__tri { display: block; flex-shrink: 0; }
.ht-pager__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 180px; max-width: 100%; height: 50px; padding: 0 24px; border: 2px solid #1B5E9E; border-radius: 999px; color: #1B5E9E; font-weight: 700; font-size: 15px; transition: background-color .3s ease, color .3s ease; }
.ht-pager__btn:hover { background: #1B5E9E; color: #FFFFFF; }

/* ==========================================================
   共通：お問い合わせ（CTA）
   ========================================================== */
.ht-cta { position: relative; overflow: hidden; background: #1B5E9E; color: #FFFFFF; }
.ht-cta__deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.ht-cta__inner { position: relative; display: flex; flex-direction: column; gap: 32px; max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 40px); }
.ht-cta__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ht-cta__lead { color: #FFFFFF; font-size: clamp(15px, 1.3vw, 16px); line-height: 1.9; }
.ht-cta__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ht-cta__card { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 26px 28px; border-radius: 10px; color: #14304F; transition: background-color .3s ease, color .3s ease; }
.ht-cta__card:hover { color: #FFFFFF; }
.ht-cta__card--tel { background: #FFFFFF; }
.ht-cta__card--tel:hover { background: #14304F; }
.ht-cta__card--form { background: #F2B135; }
.ht-cta__card--form:hover { background: #14304F; }
.ht-cta__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; }
.ht-cta__card--tel .ht-cta__icon { background: #F2B135; color: #14304F; }
.ht-cta__card--form .ht-cta__icon { background: #FFFFFF; color: #14304F; }
.ht-cta__txt { display: flex; flex-direction: column; line-height: 1.35; }
.ht-cta__tel { color: inherit; transition: color .3s ease; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: clamp(20px, 2.8vw, 30px); }
.ht-cta__form { font-weight: 700; font-size: clamp(16px, 2.4vw, 24px); white-space: nowrap; }
.ht-cta__sub { font-weight: 700; font-size: 13px; }
.ht-cta__card--tel .ht-cta__sub { color: inherit; }
/* hover：背景ネイビー・文字は白（丸いアイコンの色は変えない） */

/* ==========================================================
   フッター
   ========================================================== */
.ht-footer { background: #14304F; color: #FFFFFF; }
.ht-footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: center; gap: clamp(32px, 4vw, 56px); max-width: 1180px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 40px) 32px; }
.ht-footer__info { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ht-footer__logo { display: flex; flex-direction: column; align-self: center; align-items: stretch; gap: 10px; width: 200px; }
.ht-footer__logo img { display: block; width: 100%; height: auto; }
.ht-footer__name { display: block; font-weight: 700; font-size: 19px; line-height: 1.3; text-align: justify; text-align-last: justify; white-space: nowrap; }
.ht-footer__addr { font-size: 14px; line-height: 1.9; text-align: center; }
.ht-footer__addr a { color: #FFFFFF; }
.ht-footer__num { display: inline-block; }
.ht-footer__num + .ht-footer__num { margin-left: 1.2em; }
.ht-footer__nav { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 4px 20px; }
.ht-footer__link { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: #FFFFFF; font-size: 14px; }
.ht-footer__link:hover { color: #F2B135; }
@media (max-width: 767px) {
  .ht-footer__nav { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0 22px; }
  .ht-footer__link { gap: 6px; padding: 5px 0; font-size: 13px; white-space: nowrap; }
}
.ht-footer__map { overflow: hidden; min-height: 220px; border-radius: 10px; background: #1B5E9E; }
.ht-footer__map iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; }
.ht-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.ht-footer__copy { max-width: 1180px; margin: 0 auto; padding: 18px clamp(20px, 4vw, 40px); color: #C9D6E4; font-family: "Barlow Semi Condensed", "Zen Kaku Gothic New", sans-serif; font-size: 12px; letter-spacing: .06em; }

.ht-pagetop { position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 56px; height: 56px; border: 2px solid #FFFFFF; border-radius: 50%; background: #1B5E9E; color: #FFFFFF; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.ht-pagetop.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
.ht-pagetop:hover { border-color: #1B5E9E; background: #FFFFFF; color: #1B5E9E; }
.ht-pagetop span { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .1em; }

/* ==========================================================
   下層：タイトル帯・パンくず・導入文
   ========================================================== */
.ht-hero { position: relative; overflow: hidden; background: #1B5E9E; color: #FFFFFF; }
.ht-hero__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ht-hero__bg.ht-pos-30 { object-position: center 30%; }
.ht-hero > .ht-ph { position: absolute; inset: 0; }
.ht-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 48, 79, .86) 0%, rgba(27, 94, 158, .7) 55%, rgba(27, 94, 158, .4) 100%); }
.ht-hero__inner { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 40px) clamp(72px, 10vw, 128px); }
.ht-hero__en { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: clamp(30px, 6vw, 64px); line-height: 1.1; letter-spacing: .04em; }
.ht-hero__ja { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.9; }
.ht-bread { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 12px; }
.ht-bread a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.ht-bread a:hover { color: #FFFFFF; text-decoration-color: transparent; }
.ht-hero--simple .ht-hero__inner { padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(64px, 8vw, 104px); }
.ht-hero--simple .ht-hero__en { font-size: clamp(25px, 4vw, 44px); }
.ht-hero--simple .ht-bread { margin-top: 0; }

.ht-intro { padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px) 0; }
.ht-intro__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 820px; margin: 0 auto; text-align: center; }
.ht-intro__head { margin-bottom: clamp(10px, 2vw, 22px); }
.ht-intro__ttl { color: #14304F; font-weight: 700; font-size: clamp(17px, 2.1vw, 24px); line-height: 1.7; text-wrap: pretty; }
/* PC（1100px以上）は1行で（枠より少し長いので折り返さず左右中央に） */
@media (min-width: 1100px) { .ht-intro__ttl--pc1line { white-space: nowrap; } }
.ht-intro__txt { color: #3A4A5C; text-align: center; text-wrap: pretty; }
@media (max-width: 1099px) { .ht-intro__txt { text-align: left; } }

/* ==========================================================
   会社概要
   ========================================================== */
.ht-msg-wrap { gap: clamp(36px, 5vw, 56px); }
.ht-msg { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px); }
.ht-msg__photo { position: relative; flex: 1 1 340px; max-width: 440px; margin: 0 auto; }
.ht-msg__photo-back { position: absolute; top: -14px; left: -14px; right: 14px; bottom: 14px; border-radius: 10px; background: #EBF2F9; }
.ht-msg__photo-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; }
.ht-msg__body { display: flex; flex: 1.3 1 420px; flex-direction: column; gap: 20px; }
.ht-msg__body p { color: #1F2D3D; font-size: clamp(15px, 1.3vw, 16px); line-height: 2.1; text-wrap: pretty; }
.ht-msg__body .ht-msg__sign { display: flex; align-self: flex-end; align-items: baseline; gap: 14px; margin-top: 12px; color: #14304F; font-weight: 700; font-size: 16px; line-height: 1.9; }
.ht-msg__role { color: #4A5A6B; font-size: 13px; }
.ht-msg__name { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .12em; }

.ht-profile { border-top: 2px solid #1B5E9E; }
.ht-profile__row { display: grid; grid-template-columns: minmax(max-content, 28%) 1fr; border-bottom: 1px solid #E3EBF3; }
.ht-profile__row dt { padding: 20px clamp(12px, 2vw, 28px); background: #F4F8FC; color: #14304F; font-weight: 700; font-size: 15px; white-space: nowrap; }   /* 「対応エリア」が途中で改行しないように */
.ht-profile__row dd { padding: 20px clamp(12px, 2vw, 28px); color: #1F2D3D; font-size: 15px; line-height: 1.8; }

.ht-access { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; }
/* 地図と右側（所在地・協力店）の高さをそろえる。右側の箱は高さいっぱいに伸ばす。縦に並ぶ幅では地図に 300px を確保 */
.ht-access__map { position: relative; flex: 2 1 480px; overflow: hidden; min-height: 300px; border-radius: 10px; background: #DCE7F2; }
.ht-access__map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.ht-access__side { display: flex; flex: 1 1 280px; flex-direction: column; gap: 16px; }
.ht-access__box { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: center; padding: 28px; border-radius: 10px; background: #FFFFFF; }
.ht-access__box--aeon { align-items: flex-start; gap: 12px; }
.ht-access__label { color: #1B5E9E; font-weight: 700; font-size: 14px; letter-spacing: .1em; }
.ht-access__addr { color: #1F2D3D; font-size: 15px; line-height: 1.8; }
.ht-access__aeon { display: block; width: auto; height: 36px; }
.ht-access__aeon-name { color: #1F2D3D; font-weight: 500; font-size: 14px; line-height: 1.7; }

/* ==========================================================
   事業内容
   ========================================================== */
.ht-svclist { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px); }
.ht-svcitem { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 56px); }
.ht-svcitem--rev { flex-direction: row-reverse; }
.ht-svcitem__media { position: relative; flex: 1 1 380px; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 10px; background: #F4F8FC; }
.ht-svcitem__body { display: flex; flex: 1 1 380px; flex-direction: column; gap: 14px; }
.ht-svcitem__num { display: flex; align-items: center; gap: 14px; margin-bottom: -10px; }
@media (max-width: 599px) { .ht-svcitem__num { margin-bottom: -8px; } }
.ht-svcitem__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; }
.ht-svcitem__icon .ht-ill { width: 36px; }
@media (max-width: 599px) { .ht-svcitem__icon .ht-ill { width: 30px; } }
.ht-svcitem__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em; }
.ht-svcitem__ttl { color: #14304F; font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.5; }
/* スマホは画面幅に合わせて少し縮め、長い見出しも1行に収める（390px で 18px） */
@media (max-width: 599px) { .ht-svcitem__ttl { font-size: min(18px, 4.6vw); } }
.ht-svcitem__txt { color: #3A4A5C; text-wrap: pretty; }

.ht-flowbox { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); max-width: 1100px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: 10px; background: #F4F8FC; }
.ht-flowbox__txt { max-width: none; margin: 0 auto; color: #3A4A5C; font-size: clamp(15px, 1.3vw, 16px); line-height: 2; text-align: center; text-wrap: pretty; }
@media (max-width: 1099px) { .ht-flowbox__txt { text-align: left; } }
.ht-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.ht-flow__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px 28px; border-radius: 10px; background: #FFFFFF; text-align: center; }
.ht-flow__step { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .18em; }
.ht-flow__icon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #EBF2F9; }
.ht-flow__icon .ht-ill { width: 46px; }
.ht-flow__ttl { color: #14304F; font-weight: 700; font-size: 19px; }
.ht-flow__txt { color: #3A4A5C; font-size: 14px; line-height: 1.7; }
.ht-flow__arrow { position: absolute; top: 50%; left: -40px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transform: translateY(-50%); }
.ht-flow__item--main { background: #1B5E9E; }
.ht-flow__item--main .ht-flow__step { color: #F2B135; }
.ht-flow__item--main .ht-flow__icon { background: #FFFFFF; }
.ht-flow__item--main .ht-flow__ttl, .ht-flow__item--main .ht-flow__txt { color: #FFFFFF; }
@media (max-width: 767px) {
  .ht-flowbox__txt br { display: none; }
  .ht-flow { grid-template-columns: 1fr; gap: 40px; }
  .ht-flow__arrow { top: -38px; left: 50%; transform: translateX(-50%) rotate(90deg); }
}

.ht-area__head { max-width: 1180px; margin: 0 auto clamp(32px, 5vw, 56px); }
.ht-area { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px); max-width: 1100px; margin: 0 auto; }
.ht-area__photos { display: grid; flex: 1 1 420px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); min-width: 0; }
.ht-area__photo { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 10px; }
.ht-area__photo--main { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.ht-area__photo--main img { object-position: center 70%; }
.ht-area__label { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 5px; background: rgba(30, 30, 30, .72); color: #FFFFFF; font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.ht-area__text { display: flex; flex: 1 1 420px; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ht-area__txt { color: #3A4A5C; font-size: clamp(15px, 1.3vw, 16px); line-height: 1.9; text-wrap: pretty; }
.ht-area__map { position: relative; width: min(280px, 64%); margin-top: 16px; }
.ht-area__map img { display: block; width: 100%; height: auto; }
/* ピン先＝会社の位置（姫路市青山西。姫路の市街地の少し北西・内陸）。地図画像の兵庫県の範囲から換算 */
.ht-area__pin { position: absolute; top: 41%; left: 15%; display: block; width: 26px; line-height: 0; transform: translate(-50%, -100%); }
.ht-area__pin svg { display: block; width: 26px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); animation: ht-bounce 2s ease infinite; }

/* ==========================================================
   商品紹介
   ========================================================== */
.ht-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.ht-prod { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #E3EBF3; border-radius: 10px; background: #FFFFFF; }
.ht-prod__media { overflow: hidden; aspect-ratio: 4 / 3; background: #F4F8FC; }
.ht-prod__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 28px; }
.ht-prod__ttlbox { display: flex; flex-direction: column; gap: 4px; }
.ht-prod__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .18em; }
.ht-prod__ttl { color: #14304F; font-weight: 700; font-size: 20px; line-height: 1.5; }
/* タブレット（2列）・スマホで「オール電化・太陽光発電関連設備」が2行にならないよう、少し小さく */
@media (max-width: 899px) { .ht-prod__ttl { font-size: 18px; } }
@media (max-width: 599px) { .ht-prod__ttl { font-size: min(20px, 4.4vw); } }
.ht-prod__spec { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ht-prod__spec div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.ht-prod__spec dt { color: #1B5E9E; font-weight: 700; }
.ht-prod__spec dd { color: #3A4A5C; word-break: auto-phrase; }   /* 「導入」などの言葉の途中で改行しない（対応ブラウザのみ） */
.ht-prod__spec dd.is-todo { color: #6A7988; }

.ht-eco { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: 10px; background: #F4F8FC; }
.ht-eco__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: #FFFFFF; }
.ht-eco__icon .ht-ill { width: 56px; }
.ht-eco__body { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; }
.ht-eco__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em; }
.ht-eco__ttl { color: #14304F; font-weight: 700; font-size: 22px; line-height: 1.5; }
.ht-eco__txt { color: #3A4A5C; font-size: clamp(15px, 1.3vw, 16px); }
@media (max-width: 767px) { .ht-eco__btn { margin: 0 auto; } }

/* ==========================================================
   施工実績：記事詳細
   ========================================================== */
.ht-entry { display: flex; flex-direction: column; gap: 28px; max-width: 860px; margin: 0 auto; }
.ht-entry__head { display: flex; flex-direction: column; gap: 12px; }
.ht-entry__head .ht-work__date { font-size: 13px; }
.ht-entry__ttl { position: relative; padding-bottom: 20px; border-bottom: 2px solid #E3EBF3; color: #14304F; font-weight: 700; font-size: clamp(17px, 2.6vw, 28px); line-height: 1.5; }
/* 下線の左側だけ青（PC 120px、幅に合わせて縮める） */
.ht-entry__ttl::after { content: ""; position: absolute; left: 0; bottom: -2px; width: clamp(64px, 15vw, 120px); height: 2px; background: #1B5E9E; }
.ht-entry__photo { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 10px; }
.ht-entry__photo .ht-ph__label { padding: 8px 14px; font-size: 13px; }
.ht-entry__spec { overflow: hidden; border: 1px solid #E3EBF3; border-radius: 10px; }
.ht-entry__spec div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; border-bottom: 1px solid #E3EBF3; }
.ht-entry__spec div:last-child { border-bottom: none; }
.ht-entry__spec dt { padding: 16px 22px; background: #F4F8FC; color: #14304F; font-weight: 700; font-size: 14px; }
.ht-entry__spec dd { padding: 16px 22px; color: #6A7988; font-size: 14px; }
.ht-entry__body { color: #3A4A5C; }
.ht-entry__body.is-todo { color: #6A7988; }
/* CMS の本文（<p> と <br> で組む）。写真は枠いっぱい・角丸、段落の間は <br> の1行分 */
.ht-entry__body { line-height: 1.9; }
.ht-entry__body p { margin: 0; }
.ht-entry__body img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px; }
.ht-entry__body a { color: #1B5E9E; text-decoration: underline; }
/* 前後の記事＋一覧：左＝前の記事（新しい）、中央＝一覧、右＝次の記事（古い）。前後は枠なしの文字リンク。767px 以下は前後を1段目、一覧を2段目の中央に */
.ht-entry__nav { display: grid; grid-template-areas: "newer list older"; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 12px; padding-top: 32px; border-top: 2px solid #E3EBF3; }
.ht-entry__navlink { display: inline-flex; align-items: center; gap: 10px; color: #14304F; font-weight: 700; font-size: 14px; }
.ht-entry__navlink:hover { color: #14304F; }
/* hover は三角だけ黄色に（下線なし） */
.ht-entry__navlink .ht-pager__tri { color: #1B5E9E; transition: color .3s ease; }
.ht-entry__navlink:hover .ht-pager__tri { color: #F2B135; }
.ht-entry__nav-newer { grid-area: newer; justify-self: start; }
.ht-entry__nav-list { grid-area: list; }
.ht-entry__nav-older { grid-area: older; justify-self: end; }
@media (max-width: 767px) {
  .ht-entry__nav { grid-template-areas: "newer older" "list list"; grid-template-columns: 1fr 1fr; }
  .ht-entry__nav-list { justify-self: center; }
}

/* ==========================================================
   お問い合わせ
   ========================================================== */
.ht-tel__txt { color: #3A4A5C; text-align: center; text-wrap: pretty; }
@media (max-width: 1099px) { .ht-tel__txt { text-align: left; } }
.ht-tel__box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(28px, 4vw, 40px); border-radius: 10px; background: #F4F8FC; text-align: center; }
.ht-tel__num { display: flex; align-items: center; gap: 14px; color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: clamp(30px, 5vw, 44px); line-height: 1.2; }
.ht-tel__num:hover { color: #1B5E9E; }
.ht-tel__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #F2B135; color: #14304F; }
.ht-tel__time { color: #3A4A5C; font-size: 15px; }
/* 営業・勧誘お断りの注記（2026-10-26 依頼710849） */
.ht-tel__note { color: #3A4A5C; font-size: clamp(12px, 3.4vw, 14px); text-align: center; text-wrap: pretty; }
@media (max-width: 1099px) { .ht-tel__note { text-align: left; } }

/* フォームCMS（.form-contents）を claude-design-output のフォームの見た目に合わせる。CMS の mail-form.css より詳細度を上げて上書き */
.ht-cmsform .form-contents { padding: 0; background: none; }
/* 迷惑送信対策の隠し入力欄が1行分の高さを取らないように */
.ht-cmsform .form-contents form > input { display: block; }
.ht-cmsform .form-contents form dl { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin: 0; border-top: 2px solid #1B5E9E; }
.ht-cmsform .form-contents form dl dt:not(.pattern-exclusion) { float: none; display: flex; align-items: center; width: auto; margin: 0; padding: 24px 0; border-bottom: 1px solid #E3EBF3; color: #14304F; font-weight: 700; font-size: 15px; line-height: 1.9; }
.ht-cmsform .form-contents form dl dt:not(.pattern-exclusion):has(+ dd textarea) { align-items: flex-start; padding-top: 36px; }
.ht-cmsform .form-contents form dl dd:not(.pattern-exclusion) { width: auto; margin: 0; padding: 24px 0 24px 28px; border-bottom: 1px solid #E3EBF3; }
/* 必須・任意のバッジ（CMS は文字の前に出すので、デザインどおり文字の後ろに並べ替える） */
.ht-cmsform .form-contents dl dt:not(.pattern-exclusion) span { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 10px; }
.ht-cmsform .form-contents dl dt:not(.pattern-exclusion) span::before { top: 0; margin: 0; padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: 11px; line-height: 20px; }
.ht-cmsform .form-contents dl dt:not(.pattern-exclusion) span.required::before { content: "必須"; background: #F2B135; color: #14304F; }
.ht-cmsform .form-contents dl dt:not(.pattern-exclusion) span.optional::before { content: "任意"; background: #E3EBF3; color: #4A5A6B; }
.ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea,
.ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea-serect { display: block; width: 100%; max-width: none; height: 52px; margin: 0; padding: 0 16px; border: 1px solid #CCDAE8; border-radius: 5px; background: #F4F8FC; color: #1F2D3D; font-size: 15px; transition: border-color .3s ease, background-color .3s ease; }
.ht-cmsform .form-contents dd:not(.pattern-exclusion) textarea.textarea { height: 218px; padding: 14px 16px; line-height: 1.8; resize: vertical; }
.ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea:focus,
.ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea-serect:focus { border-color: #1B5E9E; background: #FFFFFF; outline: none; }
.ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea::placeholder { color: #8796A6; }
/* 同意欄＋送信ボタン（同意欄は common.js で差し込む） */
.ht-form__foot { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 0 0; }
.ht-form__agree { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: #1F2D3D; font-size: 15px; cursor: pointer; }
.ht-form__agree input { width: 20px; height: 20px; margin: 0; accent-color: #1B5E9E; }
.ht-form__agree a { color: #1B5E9E; text-decoration: underline; }
.ht-form__agree a:hover { text-decoration-color: transparent; }
.ht-form__req { padding: 0 8px; border-radius: 999px; background: #F2B135; color: #14304F; font-weight: 700; font-size: 11px; line-height: 20px; }
.ht-cmsform .form-contents .submit-btn { display: block; width: auto; min-width: min(100%, 320px); height: 60px; margin: 0; padding: 0 40px; border: none; border-radius: 999px; background: #B8C4D0; color: #FFFFFF; font-weight: 700; font-size: 16px; letter-spacing: .03em; cursor: not-allowed; transition: background-color .3s ease; }
.ht-cmsform .form-contents .submit-btn::before { display: none; }
.ht-cmsform .form-contents .submit-btn:hover { background: #B8C4D0; }
.ht-cmsform .form-contents .submit-btn:not(:disabled) { background: #1B5E9E; cursor: pointer; }
.ht-cmsform .form-contents .submit-btn:not(:disabled):hover { background: #14487A; }
.ht-cmsform .form-contents .form-thanks-msg { padding: clamp(28px, 4vw, 40px); border: none; border-radius: 10px; background: #F4F8FC; color: #1F2D3D; text-align: center; }
.ht-cmsform .form-contents .form-thanks-msg .back-home-btn a { display: inline-flex; align-items: center; justify-content: center; width: 240px; max-width: 100%; height: 50px; margin-top: 16px; border: 1.5px solid #1B5E9E; border-radius: 999px; background: #FFFFFF; color: #1B5E9E; font-weight: 700; }
.ht-cmsform .form-contents .form-thanks-msg .back-home-btn a:hover { background: #1B5E9E; color: #FFFFFF; }
/* 幅が狭いときは項目名の下に入力欄（claude-design-output の折り返しと同じ） */
@media (max-width: 615px) {
  .ht-cmsform .form-contents form dl { grid-template-columns: 1fr; }
  .ht-cmsform .form-contents form dl dt:not(.pattern-exclusion), .ht-cmsform .form-contents form dl dt:not(.pattern-exclusion):has(+ dd textarea) { padding: 24px 0 0; border-bottom: none; }
  .ht-cmsform .form-contents form dl dd:not(.pattern-exclusion) { padding: 12px 0 24px; }
}
/* iOS Safari の入力時ズーム対策：タッチ端末では入力欄を 16px 以上にする */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"], input[type="date"],
  select, textarea, .ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea, .ht-cmsform .form-contents dd:not(.pattern-exclusion) .textarea-serect { font-size: 16px; }
}

.ht-privacy { display: flex; flex-direction: column; gap: 18px; max-width: 880px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border-radius: 10px; background: #F4F8FC; }
.ht-privacy__head { display: flex; flex-direction: column; gap: 4px; }
.ht-privacy__en { color: #1B5E9E; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em; }
.ht-privacy__ttl { color: #14304F; font-weight: 700; font-size: 22px; }
.ht-privacy__lead { color: #3A4A5C; font-size: 14px; }
.ht-privacy__list { display: flex; flex-direction: column; gap: 14px; color: #3A4A5C; font-size: 14px; line-height: 1.85; }
.ht-privacy__list strong { display: block; color: #14304F; }

/* ==========================================================
   写真の出し方（MV・下層の見出し帯・カード以外）：画面に入ると左からカーテンが開くように現れ、中の写真は少し拡大した状態から戻る
   common.js が .ht-reveal を付け、画面に入ったら一度だけ .is-in を付ける。横に並ぶ写真は少しずつ時間差（--ht-delay）
   ========================================================== */
.ht-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1) var(--ht-delay, 0s); }
.ht-reveal.is-in { clip-path: inset(0 0 0 0); }
/* 中の写真のズームは scale で動かす（hover の拡大 transform と重ならないように） */
.ht-reveal img, .ht-reveal .ht-ph { scale: 1.12; transition: transform .5s ease, scale 1.8s cubic-bezier(.22, 1, .36, 1) var(--ht-delay, 0s); }
.ht-reveal.is-in img, .ht-reveal.is-in .ht-ph { scale: 1; }
@media (prefers-reduced-motion: reduce) { .ht-reveal { clip-path: none; transition: none; } .ht-reveal img, .ht-reveal .ht-ph { scale: 1; } }

/* ==========================================================
   スクロールでふわっと出す（下から20px）
   ========================================================== */
[data-aos="fade-up"] { transform: translate3d(0, 20px, 0); }