/* Theme Name: Hayac Okazaki Theme Theme URI: https://hayack.jp/ Author: SaC株式会社 Description: ハヤック岡崎店用オリジナルテーマ Version: 1.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: hayac-theme Tags: painting, local-business, responsive */ /* ===================================================== 目次 1. カスタムプロパティ（CSS変数） 2. リセット・ベース 3. タイポグラフィ 4. レイアウトユーティリティ 5. ボタン 6. ヘッダー 7. ファーストビュー 8. 信頼バー 9. 選ばれる理由 10. 塗装メニュー 11. 施工の流れ 12. 施工事例 13. お客様の声 14. FAQ 15. ショールーム案内 16. CTA 17. フッター 18. レスポンシブ（768px / 1024px） ===================================================== *//* ---------- 1. カスタムプロパティ ---------- */:root { /* カラーパレット */ --clr-primary: #1B4F8A; --clr-primary-dark: #0D3360; --clr-primary-light: #EBF2FB; --clr-accent: #E8601A; --clr-accent-dark: #C44E0E; --clr-accent-light: #FEF0E9; --clr-text: #222222; --clr-muted: #777777; --clr-border: #E5E7EB; --clr-bg: #FFFFFF; --clr-bg-alt: #F7F8FA; --clr-bg-dark: #0F1E2D; --clr-white: #FFFFFF; /* タイポグラフィ */ --font-base: 'Noto Sans JP', sans-serif; /* レイアウト */ --container-max: 1200px; --container-pad: 1.25rem; --section-pad-y: 4rem; /* デザイントークン */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 40px rgba(0, 0, 0, 0.14); --transition: 0.3s ease;}/* ---------- 2. リセット・ベース ---------- */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;}html { scroll-behavior: smooth; font-size: 16px;}body { font-family: var(--font-base); color: var(--clr-text); background-color: var(--clr-bg); line-height: 1.7; -webkit-font-smoothing: antialiased;}img { max-width: 100%; height: auto; display: block;}a { color: var(--clr-primary); text-decoration: none; transition: color var(--transition);}a:hover { color: var(--clr-accent); }ul, ol { list-style: none; }/* ---------- 3. タイポグラフィ ---------- */h1 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; line-height: 1.25; }h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.3; }h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; line-height: 1.4; }h4 { font-size: 1.125rem; font-weight: 700; }p { margin-bottom: 1rem; }p:last-child { margin-bottom: 0; }/* ---------- 4. レイアウトユーティリティ ---------- */.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;}.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: .875rem; height: auto; left: 5px; line-height: normal; padding: .875rem 1.5rem .875rem; text-decoration: none; top: 5px; width: auto; z-index: 100000;}.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad);}.section { padding-block: var(--section-pad-y);}.section--alt { background-color: var(--clr-bg-alt);}.section-header { text-align: center; margin-bottom: 2.5rem;}.section-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 0.5rem;}.section-title { font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--clr-primary-dark); margin-bottom: 0.875rem;}.section-lead { color: var(--clr-muted); font-size: 0.95rem; line-height: 1.8; max-width: 600px; margin-inline: auto;}.section-more { text-align: center; margin-top: 2rem;}/* ---------- 5. ボタン ---------- */.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: var(--radius); font-family: var(--font-base); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; border: 2px solid transparent; transition: all var(--transition); text-decoration: none; white-space: nowrap;}.btn-primary { background-color: var(--clr-primary); color: var(--clr-white); border-color: var(--clr-primary);}.btn-primary:hover { background-color: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: var(--clr-white);}.btn-accent { background-color: var(--clr-accent); color: var(--clr-white); border-color: var(--clr-accent);}.btn-accent:hover { background-color: var(--clr-accent-dark); border-color: var(--clr-accent-dark); color: var(--clr-white);}.btn-outline-white { background-color: transparent; color: var(--clr-white); border-color: var(--clr-white);}.btn-outline-white:hover { background-color: var(--clr-white); color: var(--clr-primary);}.btn-lg { padding: 1.125rem 2.5rem; font-size: 1.05rem;}.btn-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem;}/* ---------- 6. ヘッダー ---------- */.site-header { position: relative;}/* 1段目: ロゴ ／ 右側グループ */.header-top { background-color: var(--clr-white); border-bottom: 1px solid var(--clr-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);}.header-top-inner { display: flex; align-items: center; justify-content: space-between; height: 80px;}/* ロゴ（左端） */.header-logo { flex-shrink: 0; }.logo-link { display: flex; align-items: center; line-height: 1; text-decoration: none;}.logo-img { height: 54px; width: auto; display: block;}/* 右側グループ: 電話番号 + バナー（タブレット以上で表示） */.header-right { display: none; align-items: center; gap: 18px;}/* 電話番号（右寄せ） */.header-tel-block { text-align: right; white-space: nowrap;}.header-tel-label { font-size: 0.7rem; color: var(--clr-muted); margin-bottom: 0.125rem;}.header-tel-number { display: block; font-size: 1.875rem; font-weight: 900; color: var(--clr-primary); letter-spacing: 0.02em; line-height: 1; text-decoration: none; transition: color var(--transition);}.header-tel-number:hover { color: var(--clr-accent); }/* アクションバナー2枚 */.header-action-banners { display: flex; align-items: center; gap: 8px; flex-shrink: 0;}.header-action-banner { display: block; line-height: 0; text-decoration: none;}.header-action-banner img { height: 56px; width: auto; display: block; transition: opacity var(--transition);}.header-action-banner:hover img { opacity: 0.85; }/* SP専用ヘッダーアクション: 電話ボタン + メニューボタン */.sp-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0;}/* SP電話ボタン */.sp-tel-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 52px; height: 52px; background: #fff; color: #d60000; border: 2px solid #d60000; border-radius: 6px; text-decoration: none; flex-shrink: 0;}.sp-tel-btn-icon { font-size: 1.25rem; line-height: 1;}.sp-tel-btn-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1;}/* メニューボタン（ハンバーガー） */.hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 52px; height: 52px; background: #d60000; border: none; border-radius: 6px; cursor: pointer; padding: 6px; flex-shrink: 0;}.hamburger-lines { display: flex; flex-direction: column; gap: 5px; width: 22px;}.hamburger-lines span { display: block; width: 100%; height: 2px; background-color: #fff; border-radius: 2px; transition: all var(--transition);}.hamburger-label { font-size: 0.625rem; font-weight: 700; color: #fff; letter-spacing: 0.05em; line-height: 1;}.hamburger.is-active .hamburger-lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.hamburger.is-active .hamburger-lines span:nth-child(2) { opacity: 0; }.hamburger.is-active .hamburger-lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }/* 2段目: 赤グローバルナビ（タブレット以上で表示） */.header-gnav { display: none; background-color: #d60000;}.gnav-list { display: flex; list-style: none; margin: 0; padding: 0;}.gnav-list > li { flex: 1; border-left: 1px solid rgba(255, 255, 255, 0.35); border-right: 1px solid rgba(0, 0, 0, 0.12);}.gnav-list > li:first-child { border-left: none; }.gnav-list > li:last-child { border-right: none; }.gnav-list a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 76px; padding: 0 0.5rem; color: var(--clr-white); font-size: 1rem; font-weight: 700; text-decoration: none; line-height: 1.2; text-align: center; transition: background-color var(--transition); white-space: nowrap;}.gnav-list a span { display: block; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; opacity: 0.82; margin-top: 2px;}.gnav-list a:hover,.gnav-list .current-menu-item a { background-color: #a80000; color: var(--clr-white);}/* モバイルナビドロワー */.mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--clr-white); padding: 1.5rem var(--container-pad) 2rem; overflow-y: auto; z-index: 999;}.mobile-nav.is-open { display: block; }/* 右上の閉じるボタン */.mobile-nav-close { position: absolute; top: 12px; right: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; background: #d60000; color: #fff; border: none; border-radius: 6px; cursor: pointer; z-index: 10; padding: 6px; flex-shrink: 0;}.mobile-nav-close-icon { font-size: 1.5rem; font-weight: 900; line-height: 1;}.mobile-nav-close-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1;}/* ナビリスト: 閉じるボタンと重ならないよう上部に余白 */.mobile-nav-list { padding-top: 56px; margin-bottom: 2rem;}.mobile-nav-list li { border-bottom: 1px solid var(--clr-border); }.mobile-nav-list a { display: block; padding: 1rem 0.25rem; font-size: 1rem; font-weight: 700; color: var(--clr-text); text-decoration: none;}/* 電話発信CTA */.mobile-nav-tel { margin-bottom: 1rem;}.mobile-nav-tel-label { font-size: 0.8125rem; color: var(--clr-muted); text-align: center; line-height: 1.6; margin-bottom: 0.75rem;}.mobile-nav-tel-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 80px; background: #d60000; color: #fff; border-radius: 10px; text-decoration: none; padding: 1rem;}.mobile-nav-tel-btn-icon { font-size: 1.375rem; line-height: 1;}.mobile-nav-tel-btn-number { font-size: 1.875rem; font-weight: 900; letter-spacing: 0.02em; line-height: 1;}.mobile-nav-tel-btn-sub { font-size: 0.75rem; font-weight: 700; opacity: 0.9;}.mobile-nav-actions { display: flex; gap: 8px; margin-top: 1rem; margin-bottom: 1.5rem;}.mobile-nav-action-banner { flex: 1; display: block; line-height: 0; text-decoration: none;}.mobile-nav-action-banner img { width: 100%; height: auto; display: block;}/* ---------- 7. ファーストビュー ---------- */.fv-slider { overflow: hidden; background-color: #f5f5f5; position: relative;}.fv-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; padding: 0;}.fv-slider-arrow:hover { background: rgba(214, 0, 0, 0.85);}/* スマホ: 画面端から少し内側 */.fv-slider-prev { left: 10px; }.fv-slider-next { right: 10px; }.fv-slider-dots { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 0 16px; background: #fff;}.fv-slider-dot { width: 11px; height: 11px; border-radius: 50%; border: none; background: #c7c7c7; cursor: pointer; padding: 0; transition: background-color 0.25s ease;}.fv-slider-dot.is-active { background: #111; }.fv-slider-dot:hover { background: #d60000; }.fv-slider-track { display: flex; align-items: flex-start; will-change: transform; /* JSがtransformで位置制御 */}/* モバイル：1枚全幅表示 */.fv-slide { flex: 0 0 100vw;}.fv-slide img { width: 100%; height: auto; display: block;}/* PC/SP スライダー 表示切り替え */.fv-slider--sp,.fv-slider-dots--sp { display: none; } /* PC では SP を非表示 */.fv-slide a { display: block; line-height: 0; /* a タグの余白を除去 */}.fv-slide a img { display: block; }/* ---------- 8. プロモーションバナーエリア ---------- */.top-promo-section { background: linear-gradient(180deg, #fff 0%, #fff8e8 45%, #fff 100%); padding: 20px 0 32px;}.top-promo-inner { width: 96%; max-width: 980px; margin: 0 auto;}.promo-banner { margin-bottom: 16px; text-align: center;}.promo-banner:last-child { margin-bottom: 0;}.promo-banner a,.banner-link { display: block; line-height: 0; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease;}.promo-banner img,.banner-link img { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 4px; transition: opacity var(--transition);}.promo-banner a:hover,.banner-link:hover { opacity: 0.9; transform: translateY(-2px);}@media (min-width: 768px) { .top-promo-section { padding: 18px 0 26px; } .top-promo-inner { width: min(92%, 980px); } /* PCでバナー画像を少し小さく（高さ約88%） */ .promo-banner img { max-width: 800px; }}/* ---------- SP専用 問い合わせバナー（PCでは非表示） ---------- */.sp-contact-banner { display: none; background: linear-gradient(160deg, #d60000 0%, #a80000 100%); padding: 1.25rem var(--container-pad) 1.5rem; margin-bottom: 2.5rem;}.sp-contact-banner-inner { max-width: 480px; margin: 0 auto; text-align: center;}.sp-contact-banner-headline { font-size: 1rem; font-weight: 900; color: #fff200; margin-bottom: 0.5rem; letter-spacing: 0.03em;}.sp-contact-banner-desc { font-size: 0.8125rem; color: #fff; line-height: 1.6; margin-bottom: 0.875rem;}.sp-contact-tel-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: #fff; border-radius: 8px; padding: 0.75rem 1rem; text-decoration: none; margin-bottom: 0.375rem;}.sp-contact-tel-icon { font-size: 1.5rem; color: #d60000; line-height: 1; flex-shrink: 0;}.sp-contact-tel-number { font-size: 2rem; font-weight: 900; color: #d60000; letter-spacing: 0.02em; line-height: 1;}.sp-contact-tel-hours { font-size: 0.75rem; color: rgba(255, 255, 255, 0.88); margin-bottom: 1rem;}.sp-contact-btns { display: flex; gap: 0.625rem;}.sp-contact-btn { flex: 1; display: block; padding: 0.875rem 0.5rem; border-radius: 6px; font-size: 0.875rem; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.35;}.sp-contact-btn--visit { background: #fff200; color: #333;}.sp-contact-btn--estimate { background: #fff; color: #d60000;}/* スマホ: SP専用バナーを表示 / PC用バナーを非表示 / ロゴ縮小 */@media (max-width: 767px) { .sp-contact-banner { display: block; } .top-promo-section { display: none; } .logo-img { height: 44px; max-width: 160px; }} /* ---------- 11. 施工の流れ ---------- */.flow-section { background: #f7f8fa; }.flow-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;}.flow-row:last-child { margin-bottom: 0; }.flow-arrow { display: none; }.flow-card { background: #fff; border: 2px solid #e8e8e8; border-radius: 12px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);}.flow-card--highlight { border-color: var(--clr-primary); background: #fff9f9;}.flow-step-badge { display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px;}.flow-step-label { font-size: 0.6rem; font-weight: 700; color: var(--clr-primary); letter-spacing: 0.08em;}.flow-step-num { font-size: 1.75rem; font-weight: 900; color: var(--clr-primary); line-height: 1;}.flow-free-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; background: #fff0f0; color: var(--clr-primary); border: 1px solid #ffc0c0; padding: 0.2em 0.75em; border-radius: 99px; margin-bottom: 4px; align-self: flex-start;}.flow-card-title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin-bottom: 4px;}.flow-card-desc { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.75; flex: 1;}.flow-strength-note { font-size: 0.75rem; font-weight: 700; color: var(--clr-primary); background: #fff0f0; border-radius: 6px; padding: 6px 10px; margin-top: 6px;}/* ---------- 12. 施工事例 ---------- */.works-section { position: relative; background-image: linear-gradient(rgba(190, 0, 0, 0.86), rgba(158, 0, 0, 0.91)), url('assets/images/works/works-bg-roof-paint.jpg'); background-size: cover; background-position: center; padding: 72px 0 84px;}.works-section::after { content: ""; position: absolute; right: 5%; top: 58px; width: 210px; height: 155px; background-image: url('assets/images/works/works-bg-paint-brush.jpg'); background-size: cover; background-position: center; border-radius: 16px; opacity: 0.25; transform: rotate(2deg); pointer-events: none; z-index: 0;}.works-container { width: min(94%, 1180px); margin: 0 auto; position: relative; z-index: 1;}/* ヘッダー */.works-section-header { text-align: center; margin-bottom: 48px;}.works-section-label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 10px;}.works-section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 14px; text-shadow: 0 2px 6px rgba(0,0,0,0.25);}.works-count-highlight { color: #ffd400; text-shadow: 0 2px 10px rgba(0,0,0,0.3);}.works-section-desc { font-size: clamp(0.9375rem, 1.5vw, 1.125rem); color: rgba(255,255,255,0.88); line-height: 1.8;}/* カードグリッド */.works-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px;}.works-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.16); transition: transform 0.22s ease, box-shadow 0.22s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column;}.works-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.22); color: inherit;}/* 画像エリア */.works-card-media { background: #f0f0f0; padding: 14px 14px 12px;}.works-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;}.works-photo-box { position: relative; background: #ddd; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;}.works-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block;}.works-photo-empty { font-size: 0.75rem; color: #aaa; text-align: center; line-height: 1.7;}.works-photo-label { position: absolute; top: 6px; left: 6px; font-size: 0.6875rem; font-weight: 900; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 4px; z-index: 1; line-height: 1.4;}.works-photo-label.before { background: #444; color: #fff; }.works-photo-label.after { background: #f36c21; color: #fff; }.works-ba-arrow { font-size: 1.125rem; color: #bbb; flex-shrink: 0; line-height: 1;}/* カード情報 */.works-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }.works-card-title { font-size: 1.0625rem; font-weight: 900; color: #111; margin-bottom: 10px; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; overflow-wrap: break-word;}.works-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px;}.works-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.4;}.works-tag.type { background: #eaf4ff; color: #0052a8; }.works-tag.building { background: #f2f5f8; color: #445; }.works-price { display: inline-block; background: #f36c21; color: #fff; font-size: 0.875rem; font-weight: 900; padding: 4px 12px; border-radius: 6px; margin-bottom: 12px;}.works-card-text { font-size: 0.875rem; color: #444; line-height: 1.85;}/* CTAエリア */.works-cta-wrap { text-align: center; }.works-more-button { display: inline-flex; justify-content: center; align-items: center; min-width: 280px; padding: 16px 36px; border-radius: 10px; background: #ffd400; color: #b50000; font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 900; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease;}.works-more-button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); color: #b50000;}/* ---------- 13. Google口コミ ---------- */.google-reviews-section { background: #fff; padding-top: 4.5rem; padding-bottom: 3.5rem; overflow: hidden;}.google-rating-display { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap;}.google-rating-stars { color: #f6a800; font-size: 1.25rem; letter-spacing: 0.06em;}.google-rating-score { font-size: 1.125rem; font-weight: 900; color: #f6a800;}.google-rating-count { font-size: 0.875rem; color: var(--clr-muted);}/* マーキーコンテナ */.google-reviews-marquee { overflow: hidden; width: 100%; padding: 8px 0 4px;}/* カードトラック（14枚横並び） */.google-reviews-track { display: flex; align-items: stretch; gap: 20px; width: max-content; animation: googleReviewsScroll 55s linear infinite;}.google-reviews-marquee:hover .google-reviews-track { animation-play-state: paused;}@keyframes googleReviewsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); }}/* 口コミカード */.google-review-card { width: 320px; background: #fff; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09); border: 1px solid #ebebeb; flex-shrink: 0; display: flex; flex-direction: column;}.google-review-stars { color: #f6a800; font-size: 1.125rem; letter-spacing: 0.1em; margin-bottom: 12px;}.google-review-text { font-size: 0.875rem; line-height: 1.9; color: #222; flex: 1; margin-bottom: 16px;}.google-review-footer { border-top: 1px solid #f0f0f0; padding-top: 10px;}.google-review-author { font-weight: 700; font-size: 0.875rem; color: #111; margin-bottom: 2px;}.google-review-meta { font-size: 0.775rem; color: #888;}.google-review-label { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: #f3f4f6; color: #555; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;} /* 口コミセクション下部リンクエリア */ .google-reviews-more-wrap { margin-top: 20px; text-align: right;} .google-reviews-more-note { font-size: 0.875rem; color: #444; margin-bottom: 8px;} .google-reviews-more-link { display: inline-block; font-size: 1rem; font-weight: 700; color: #1B4F8A; text-decoration: none; transition: color .2s;} .google-reviews-more-link:hover { color: #0D3360; text-decoration: underline;} @media (max-width: 767px) { .google-reviews-more-wrap { text-align: center;} } /* ---------- 14. FAQ ---------- */.faq-list { max-width: 800px; margin-inline: auto;}.faq-item { border: 1px solid var(--clr-border); border-radius: var(--radius); margin-bottom: 0.75rem; background: var(--clr-white); overflow: hidden;}.faq-question { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-base); font-size: 0.9375rem; font-weight: 700; color: var(--clr-text); transition: background-color var(--transition);}.faq-question:hover { background-color: var(--clr-bg-alt); }.faq-q-badge { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: var(--clr-primary); color: var(--clr-white); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900;}.faq-question-text { flex: 1; }/* アコーディオン開閉アイコン */.faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative;}.faq-icon::before,.faq-icon::after { content: ''; position: absolute; background-color: var(--clr-muted); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform var(--transition), opacity var(--transition);}.faq-icon::before { width: 14px; height: 2px;}.faq-icon::after { width: 2px; height: 14px;}.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0;}.faq-answer { display: none; padding: 0 1.25rem 1.5rem 4.5rem;}.faq-answer p { font-size: 0.9rem; color: var(--clr-muted); line-height: 1.85;}/* ---------- 15. ショールーム案内・アクセス共通 ---------- */ /* TOP: showroom-inner はブロックコンテナのみ */ .showroom-inner { display: block;} /* アクセスグリッド: TOPページ・会社概要ページ共通 */ .company-access-grid { display: grid; grid-template-columns: 1fr; gap: 24px;} .company-access-item { margin-bottom: 48px;} .company-access-item:last-child { margin-bottom: 0;} .company-access-name { font-size: 1.125rem; font-weight: 700; color: #0052a8; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid #b8d8f0;} /* カラム */ .company-access-col { display: flex; flex-direction: column; gap: 14px;} /* 店舗写真 */ .company-access-photo { border-radius: 12px; overflow: hidden; line-height: 0;} .company-access-photo-img { width: 100%; height: 280px; object-fit: cover; display: block; border-radius: 12px;} /* Googleマップ */ .company-access-map { border-radius: 12px; overflow: hidden; background: #f5f5f5; height: 280px;} .company-access-map iframe { width: 100%; height: 100%; border: 0; display: block;} /* 営業時間・定休日 */ .company-access-hours { display: flex; flex-direction: column; gap: 6px;} .company-access-hours-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; line-height: 1.6; margin: 0;} .company-access-hours-label { font-weight: 700; color: #0052a8; flex-shrink: 0; min-width: 4.5em; font-size: 0.875rem; background: #eaf4ff; padding: 1px 8px; border-radius: 4px;} .company-access-hours-value { color: #222; font-weight: 500;} /* 住所・電話 */ .company-access-info { display: flex; flex-direction: column; gap: 8px;} .company-access-info-address { font-size: 0.9375rem; color: #333; line-height: 1.75; margin: 0; font-weight: 500;} .company-access-info-tel { margin: 0;} .company-access-info-tel a { font-size: 1.25rem; font-weight: 900; color: var(--hayack-green-dark); text-decoration: none;} .company-access-info-tel a:hover { color: #b00000;} /* 旧showroom-map クラス（後方互換） */ .showroom-map { border-radius: 16px; overflow: hidden; background: #f5f5f5; height: 280px;} .showroom-map iframe { width: 100%; height: 100%; border: 0; display: block;} .showroom-info-list { display: flex; flex-direction: column; gap: 1.125rem;} .showroom-info-item { display: flex; gap: 1rem; align-items: flex-start;} .showroom-info-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius); background-color: var(--clr-primary-light); display: flex; align-items: center; justify-content: center; font-size: 1.125rem;} .showroom-info-label { font-size: 0.7rem; font-weight: 700; color: var(--clr-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.125rem;} .showroom-info-value { font-size: 0.9375rem; color: var(--clr-text); font-weight: 500;} /* PC: 2カラム横並び */ @media (min-width: 768px) { .company-access-grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;} .company-access-photo-img { height: 380px;} .company-access-map { height: 380px;} .showroom-map { height: 380px;} } /* スマホ: マップ高さ調整 */ @media (max-width: 767px) { .company-access-map { height: 260px;} .showroom-map { height: 260px; min-height: 260px;} .showroom-map iframe { min-height: 260px;} } /* ショールーム個別ページ: アクセスセクションへのページ内リンク （.hayack-header は hayack-demo.css で position:static !important に固定解除済みのため 実際には常時表示のヘッダーは存在しないが、見出しが画面端に密着しないよう最小限の余白のみ確保する） */ #showroom-access { scroll-margin-top: 24px; } /* ショールーム個別ページ: 上部の簡易店舗情報カード（専用prefix: sr-quickinfo） */ .sr-quickinfo { padding-block: 1.75rem; background-color: var(--clr-bg-alt); border-bottom: 1px solid var(--clr-border); } .sr-quickinfo__inner { display: flex; flex-direction: column; gap: 1.25rem; } .sr-quickinfo__name { font-size: 1.125rem; font-weight: 700; color: var(--clr-text); margin-bottom: 0.5rem; } /* 店舗紹介文（showroom CPT の「店舗紹介文」欄）。店舗名の直後に置く1〜2文。 既存の .sr-quickinfo__row と同じ字送りに合わせ、下だけ少し余白を取る。 */ .sr-quickinfo__intro { font-size: 0.9375rem; color: var(--clr-text); line-height: 1.8; margin-bottom: 0.75rem; } .sr-quickinfo__row { font-size: 0.9375rem; color: var(--clr-text); line-height: 1.7; margin-bottom: 0.25rem; } .sr-quickinfo__label { display: inline-block; min-width: 4.5em; font-weight: 700; color: var(--clr-primary); margin-right: 0.5rem; } .sr-quickinfo__tel { margin-top: 0.5rem; margin-bottom: 0; } .sr-quickinfo__tel a { font-size: 1.5rem; font-weight: 900; color: var(--hayack-green-dark); text-decoration: none; } .sr-quickinfo__actions { display: flex; flex-direction: column; gap: 0.75rem; } .sr-quickinfo__actions .btn { width: 100%; } @media (min-width: 768px) { .sr-quickinfo__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } .sr-quickinfo__actions { flex-direction: row; flex-shrink: 0; } .sr-quickinfo__actions .btn { width: auto; } } /* ショールーム個別ページ: 初めてご来店される方への案内バナー（専用prefix: showroom-firstvisit-visual） */ .showroom-firstvisit-visual { display: block; max-width: 960px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .showroom-firstvisit-visual__image { width: 100%; height: auto; display: block; } /* ---------- 16. CTA ---------- */.cta-section { background: linear-gradient(135deg, #d60000 0%, #b50000 100%); padding-block: 4.5rem;}.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center;}.cta-content { width: 100%; }.cta-section .section-label { color: rgba(255, 255, 255, 0.8); }.cta-section .section-title { color: var(--clr-white); }.cta-section .section-lead { color: rgba(255, 255, 255, 0.82); }.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: 2.25rem;}.cta-tel { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none;}.cta-tel-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.78); margin-bottom: 0.125rem;}.cta-tel-number { font-size: clamp(1.875rem, 5vw, 2.5rem); font-weight: 900; color: var(--clr-white); line-height: 1; letter-spacing: 0.02em;}.cta-tel-hours { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.25rem;}.cta-divider { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5);}/* 社長写真エリア */.cta-president { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; flex-shrink: 0;}.cta-president-photo { width: 150px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.55); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);}.cta-president-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;}.cta-president-role { font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); margin: 0; letter-spacing: 0.03em;}.cta-president-name { font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.05em;}/* ---------- 17. フッター ---------- */.site-footer { background-color: #fff; color: #444; border-top: 4px solid var(--clr-accent);}.footer-main { padding-block: 3rem;}.footer-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start;}.footer-brand-logo { display: flex; align-items: center; margin-bottom: 0.875rem;}.footer-brand-logo img { height: 44px; width: auto; display: block;}.footer-brand-address { font-size: 0.8rem; line-height: 1.85; color: #666; margin-bottom: 1rem;}.footer-brand-desc { font-size: 0.85rem; line-height: 2; color: #444; margin-bottom: 1.25rem;}/* PCのみ改行（スマホでは非表示にして自然折り返し） */.footer-br-pc { display: none; }.footer-brand-tel { display: block; font-size: 1.5rem; font-weight: 900; color: var(--hayack-green-dark); text-decoration: none; margin-bottom: 0.25rem; letter-spacing: 0.02em;}.footer-brand-hours { font-size: 0.75rem; color: #666; margin-bottom: 0;}.footer-nav-title { font-size: 0.8125rem; font-weight: 700; color: var(--clr-accent); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee;}/* サイト情報 サイトマップ（大分類・中分類が分かる階層構成） */ .footer-sitemap { display: flex; flex-direction: column; gap: 1.375rem; } .footer-sitemap__home { display: inline-block; font-size: 0.9375rem; font-weight: 700; color: var(--hayack-green-dark); text-decoration: none; } .footer-sitemap__home:hover { text-decoration: underline; } .footer-sitemap__groups { display: grid; grid-template-columns: 1fr; gap: 1.375rem; } .footer-sitemap__heading { font-size: 0.875rem; font-weight: 700; color: #333; margin: 0 0 0.625rem !important; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; } .footer-sitemap__list { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .footer-sitemap__item a { font-size: 0.8125rem; color: #555; text-decoration: none; transition: color var(--transition); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; display: inline-block; max-width: 100%; } .footer-sitemap__item a:hover { color: var(--hayack-green-dark); } .footer-sitemap__item--child { padding-left: 1rem; position: relative; } .footer-sitemap__item--child::before { content: "-"; position: absolute; left: 0.2rem; color: #aaa; } .footer-sitemap__item--child a { font-size: 0.75rem; color: #777; } .footer-banners { padding-block: 1.5rem; border-top: 1px solid #eee; background: #fafafa; } /* 登録画像の寸法・比率に関わらず、統一されたバナー枠内へcontain表示する（トリミングなし・引き伸ばしなし） */ .footer-banners__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 280px)); justify-content: center; gap: 20px; } .footer-banners__item { display: block; width: min(100%, 280px); margin-inline: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } a.footer-banners__item:hover { transform: translateY(-2px); border-color: #ccc; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } a.footer-banners__item:focus-visible { outline: 2px solid var(--hayack-green-dark, #4d8f1f); outline-offset: 2px; } .footer-banners__image-wrap { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3.5 / 1; padding: 12px 16px; } .footer-banners__image { display: block; width: 100%; height: 100%; object-fit: contain; } .footer-bottom { border-top: 1px solid #eee; padding-block: 1.25rem; text-align: center; font-size: 0.8rem; color: #999; background-color: #f9f9f9;}/* ---------- 18. レスポンシブ ---------- *//* タブレット（768px以上） */@media (min-width: 768px) { :root { --container-pad: 2rem; --section-pad-y: 5rem; } /* ヘッダー2段表示切替 */ .header-right { display: flex; } .sp-header-actions { display: none; } .header-gnav { display: block; } /* PC FV：76vw中央＋左右ピーク表示 */ .fv-slider-track { align-items: stretch; height: clamp(420px, 34vw, 560px); } .fv-slide { flex: 0 0 76vw; height: 100%; opacity: 0.4; transition: opacity 0.4s ease; } .fv-slide.is-active { opacity: 1; } /* PC: 中央スライド（76vw）の端から20px内側に配置 */ .fv-slider-arrow { width: 46px; height: 46px; font-size: 34px; } .fv-slider-prev { left: calc((100% - 76vw) / 2 + 20px); } .fv-slider-next { right: calc((100% - 76vw) / 2 + 20px); } .fv-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center center; } .works-grid { grid-template-columns: repeat(3, 1fr); } .showroom-inner { grid-template-columns: 1fr 1fr; align-items: start; } .cta-actions { flex-direction: row; justify-content: center; } /* CTA: 2カラム（左コンテンツ＋右写真） */ .cta-inner { flex-direction: row; align-items: center; justify-content: center; gap: 3.5rem; text-align: center; } .cta-president-photo { width: 200px; } .footer-inner { grid-template-columns: 0.9fr 1.6fr; gap: 3rem; } .footer-br-pc { display: inline; } .footer-sitemap__groups { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 1.25rem 1.75rem; }}/* デスクトップ（1024px以上） */@media (min-width: 1024px) { :root { --section-pad-y: 6rem; } .footer-inner { grid-template-columns: 1fr 1.7fr; gap: 3.5rem; } .footer-sitemap__groups { grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 1.5rem 2rem; } /* 施工の流れ: 3列×2行 */ .flow-row { flex-direction: row; align-items: stretch; margin-bottom: 20px; } .flow-card { flex: 1; } .flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 2.25rem; color: var(--clr-primary); flex-shrink: 0; width: 36px; opacity: 0.4; }}/* ショールームマップ: スマホ調整 */@media (max-width: 767px) { .showroom-map { height: 280px; min-height: 280px; } .showroom-map iframe { min-height: 280px; }}/* FV スライダー: スマホでは SP を表示、PC を非表示 */@media (max-width: 767px) { .fv-slider--pc, .fv-slider-dots--pc { display: none; } .fv-slider--sp { display: block; } .fv-slider-dots--sp { display: flex; }}/* 施工事例: スマホ調整 */@media (max-width: 767px) { .works-section { padding: 52px 0 60px; background-image: linear-gradient(rgba(190, 0, 0, 0.92), rgba(158, 0, 0, 0.95)), url('assets/images/works/works-bg-roof-paint.jpg'); } .works-section::after { display: none; } .works-more-button { min-width: 0; width: 100%; max-width: 400px; }}/* ===================================================== 19. お問い合わせページ ===================================================== *//* お問い合わせページFV */.contact-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--hayack-green-dark) 0%, #1f4a0f 100%); padding: 4rem 0 3.5rem; text-align: center; color: #fff;}.contact-hero::before { content: ''; position: absolute; top: -60px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.contact-hero::after { content: ''; position: absolute; bottom: -80px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.contact-hero-content { position: relative; z-index: 1;}.contact-hero-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.625rem;}.contact-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1rem;}.contact-hero-desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); line-height: 1.85; max-width: 580px; margin: 0 auto;}.contact-hero-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem;}.contact-hero-badge { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.45rem 1.125rem; border-radius: 100px;}/* パンくず */.page-breadcrumb { background: #f7f8fa; border-bottom: 1px solid #e8e8e8; padding: 0.75rem 0; font-size: 0.8125rem; color: #888;}.page-breadcrumb-list { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;}.page-breadcrumb-list li + li::before { content: '›'; color: #bbb;}.page-breadcrumb-list a { color: #555; text-decoration: none;}.page-breadcrumb-list a:hover { color: var(--hayack-green-dark); }/* お問い合わせをいただく方へ */.contact-intro-section { background: #f7f8fa; padding: 4rem 0;}.contact-intro-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 2rem; max-width: 860px; margin: 0 auto;}.contact-intro-photo { flex-shrink: 0; text-align: center;}.contact-intro-photo img { width: 150px; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 12px; border: 3px solid #f0f0f0; display: block; margin: 0 auto 0.75rem;}.contact-intro-role { font-size: 0.75rem; color: #888; margin-bottom: 2px;}.contact-intro-name { font-size: 1rem; font-weight: 700; color: #222;}.contact-intro-message p { font-size: 0.9375rem; line-height: 2; color: #333; margin-bottom: 1rem;}.contact-intro-message p:last-child { margin-bottom: 0; }/* 無料相談バナー */.contact-free-banner { display: block; background: var(--clr-accent); color: #fff; text-align: center; padding: 1.125rem 1.5rem; border-radius: 10px; font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; letter-spacing: 0.02em; margin: 1.75rem auto 0; max-width: 860px; box-shadow: 0 4px 16px rgba(214, 0, 0, 0.22);}.contact-free-banner strong { font-weight: 900; font-size: 1.1em;}/* 電話問い合わせ */.contact-tel-section { background: #fff; padding: 4rem 0;}.contact-tel-box { max-width: 680px; margin: 0 auto; border: 3px solid #d60000; border-radius: 16px; padding: 2.5rem 1.75rem; text-align: center;}.contact-tel-heading { font-size: clamp(1.0625rem, 2.5vw, 1.375rem); font-weight: 900; color: #d60000; margin-bottom: 1.25rem;}.contact-tel-number-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; color: #d60000; text-decoration: none; line-height: 1; margin-bottom: 0.75rem;}.contact-tel-icon { font-size: 0.7em; }.contact-tel-meta { font-size: 0.875rem; color: #555; margin-bottom: 1.5rem; line-height: 1.8;}.contact-tel-btn { display: inline-block; background: #d60000; color: #fff; font-size: 1rem; font-weight: 900; padding: 13px 38px; border-radius: 8px; text-decoration: none; transition: background-color 0.2s ease;}.contact-tel-btn:hover { background: #b50000; color: #fff; }/* フォームセクション */.contact-form-section { background: #fff; padding: 4.5rem 0;}/* 3STEP */.contact-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 3rem; flex-wrap: wrap;}.contact-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 20px; border-radius: 8px; background: #f0f0f0; min-width: 130px; flex: 1; max-width: 200px;}.contact-step--active { background: var(--hayack-green-dark);}.contact-step-num { font-size: 0.675rem; font-weight: 700; letter-spacing: 0.1em; color: #888;}.contact-step--active .contact-step-num { color: rgba(255, 255, 255, 0.85);}.contact-step-label { font-size: 0.8125rem; font-weight: 700; color: #555; text-align: center;}.contact-step--active .contact-step-label { color: #fff;}.contact-step-arrow { font-size: 1.5rem; color: #ccc; line-height: 1; flex-shrink: 0;}/* フォーム */.contact-form-wrap { max-width: 720px; margin: 0 auto;}.contact-form { display: flex; flex-direction: column; gap: 1.375rem;}.form-row { display: flex; flex-direction: column; gap: 0.5rem;}.form-label { font-size: 0.9375rem; font-weight: 700; color: #222; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}.form-required { display: inline-block; font-size: 0.675rem; font-weight: 700; background: var(--clr-accent); color: #fff; padding: 2px 7px; border-radius: 3px; line-height: 1.5; flex-shrink: 0;}.form-optional { display: inline-block; font-size: 0.675rem; color: #888; border: 1px solid #ccc; padding: 1px 7px; border-radius: 3px; line-height: 1.5; flex-shrink: 0;}.form-input,.form-select,.form-textarea { width: 100%; padding: 13px 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 1rem; font-family: var(--font-base); color: #222; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; box-sizing: border-box;}.form-input:focus,.form-select:focus,.form-textarea:focus { outline: none; border-color: var(--hayack-green-dark); box-shadow: 0 0 0 3px rgba(77, 143, 31, 0.15);}.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer;}.form-textarea { resize: vertical; min-height: 140px; line-height: 1.7;}.form-privacy { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer;}.form-privacy input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--hayack-green-dark); cursor: pointer;}.form-privacy-text { font-size: 0.9rem; color: #333; line-height: 1.75;}.form-privacy-text a { color: var(--hayack-green-dark); text-decoration: underline;}.form-submit-wrap { text-align: center; margin-top: 0.5rem;}.form-submit-btn { display: inline-block; background: #d60000; color: #fff; font-size: 1.125rem; font-weight: 900; padding: 18px 64px; border-radius: 10px; border: none; cursor: pointer; font-family: var(--font-base); transition: background-color 0.2s ease; box-shadow: 0 4px 16px rgba(214, 0, 0, 0.28); letter-spacing: 0.03em;}.form-submit-btn:hover { background: #b50000; }.contact-sales-note { font-size: 0.8125rem; color: #999; text-align: center; margin-top: 0.75rem;}/* 送信前の注意事項 */.contact-notes { max-width: 720px; margin: 2.5rem auto 0; background: #f7f8fa; border-radius: 12px; padding: 1.75rem; border-left: 4px solid #e0e0e0;}.contact-notes h3 { font-size: 0.9375rem; font-weight: 700; color: #333; margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid #e0e0e0;}.contact-notes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem;}.contact-notes ul li { font-size: 0.875rem; color: #555; line-height: 1.75; padding-left: 1.125rem; position: relative;}.contact-notes ul li::before { content: '・'; position: absolute; left: 0; color: #d60000;}/* 店舗情報 */.contact-shop-section { background: #f7f8fa; padding: 4.5rem 0;}.contact-shop-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 960px; margin: 0 auto;}.contact-shop-name { font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 900; color: #222; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--hayack-green-dark);}.contact-shop-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem;}.contact-shop-table th,.contact-shop-table td { padding: 12px 0; border-bottom: 1px solid #e8e8e8; vertical-align: top; line-height: 1.75;}.contact-shop-table th { width: 5.5em; color: #888; font-weight: 600; white-space: nowrap; padding-right: 1rem;}.contact-shop-table td { color: #222; }.contact-shop-tel { color: #d60000; font-weight: 700; text-decoration: none;}.contact-shop-tel:hover { text-decoration: underline; }.contact-shop-map { border-radius: 16px; overflow: hidden; height: 320px; background: #e8e8e8;}.contact-shop-map iframe { width: 100%; height: 100%; border: 0; display: block;}/* レスポンシブ（768px+） */@media (min-width: 768px) { .contact-intro-card { flex-direction: row; align-items: flex-start; padding: 2.5rem; } .contact-intro-photo img { width: 180px; } .contact-steps { flex-wrap: nowrap; } .contact-step { flex: 1; max-width: none; } .contact-shop-inner { grid-template-columns: 1fr 1fr; align-items: start; } .contact-shop-map { height: 400px; }}/* ===================================================== 20. プライバシーポリシーページ ===================================================== */.privacy-content { background: #f7f8fa; padding: 4rem 0 5rem;}.privacy-inner { max-width: 960px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 2rem 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);}.privacy-page-title { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 900; color: #111; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid #e8e8e8;}.privacy-intro { font-size: 0.9375rem; color: #444; line-height: 1.9; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid #efefef;}.privacy-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #f0f0f0;}.privacy-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}.privacy-section h3 { font-size: 1rem; font-weight: 900; color: #d60000; margin-bottom: 0.875rem; padding-left: 0.875rem; border-left: 4px solid #d60000; line-height: 1.5;}.privacy-section p { font-size: 0.9375rem; color: #444; line-height: 1.9; margin-bottom: 0.75rem;}.privacy-section p:last-child { margin-bottom: 0; }.privacy-section ol { margin: 0.75rem 0 1rem 1.5rem; padding: 0;}.privacy-section ol li { font-size: 0.9375rem; color: #444; line-height: 1.9; margin-bottom: 0.375rem;}.privacy-contact-box { background: #f7f8fa; border-radius: 12px; padding: 1.25rem 1.5rem; margin-top: 1rem;}.privacy-contact-box p { font-size: 0.9375rem; color: #444; line-height: 1.75; margin-bottom: 0.375rem;}.privacy-contact-box p:last-child { margin-bottom: 0; }.privacy-contact-box a { color: #d60000; text-decoration: none;}.privacy-contact-box a:hover { text-decoration: underline; }.privacy-updated { font-size: 0.875rem; color: #999; text-align: right; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e8e8e8;}@media (min-width: 768px) { .privacy-inner { padding: 3rem 4rem; } .privacy-section h3 { font-size: 1.0625rem; }}/* ===================================================== 21. 施工事例ページ ===================================================== *//* 下層ページFV */.works-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--hayack-green-dark) 0%, #1f4a0f 100%); padding: 4rem 0 3.5rem; text-align: center; color: #fff;}.works-hero::before { content: ''; position: absolute; top: -60px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.works-hero::after { content: ''; position: absolute; bottom: -80px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.works-hero-content { position: relative; z-index: 1;}.works-hero-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.625rem;}.works-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1rem;}.works-hero-desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.85); line-height: 1.85; max-width: 580px; margin: 0 auto;}/* 一覧セクション */.works-list-section { padding: 4rem 0 5rem; background: #f7f8fa;}/* フィルター共通ラベル */.works-filter-label { font-size: 0.8125rem; font-weight: 700; color: #555; margin-bottom: 0.625rem;}/* カテゴリー絞り込み */.works-filter-wrap { margin-bottom: 1.25rem;}.works-filter-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;}.works-filter-btn { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; text-decoration: none; border: 2px solid #ddd; background: #fff; color: #555; transition: all 0.2s ease; white-space: nowrap;}.works-filter-btn:hover { border-color: #d60000; color: #d60000;}.works-filter-btn.is-active { background: #d60000; border-color: #d60000; color: #fff;}/* 地域絞り込み */.works-area-wrap { margin-bottom: 2.5rem;}.works-area-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;}.works-area-chip { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; background: #eef0f2; color: #444; border: 1px solid #d4d8de; transition: all 0.2s ease; white-space: nowrap;}.works-area-chip:hover { background: #d60000; border-color: #d60000; color: #fff;}/* カード：地域テキスト */.works-card-area { font-size: 0.75rem; color: #888; margin-bottom: 4px; line-height: 1.4;}/* 詳細ボタン */.works-detail-btn { display: block; width: 100%; margin-top: auto; padding: 11px 0; background: var(--hayack-green-dark); color: #fff; font-size: 0.875rem; font-weight: 700; text-align: center; text-decoration: none; border-radius: 6px; transition: background-color 0.2s ease;}.works-detail-btn:hover { background: #1f4a0f; color: #fff;}/* ページネーション */.works-pagination { display: flex; justify-content: center; margin-top: 2.5rem;}.works-pagination-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center;}.works-pagination-btn { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 6px; background: #fff; border: 2px solid #e0e0e0; color: #444; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease; white-space: nowrap;}.works-pagination-btn:hover { border-color: #d60000; color: #d60000;}.works-pagination-btn.is-active { background: #d60000; border-color: #d60000; color: #fff;}.works-pagination-ellipsis { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: #aaa; font-size: 1rem;}/* 下部CTA */.works-cta-section { background: linear-gradient(135deg, #d60000 0%, #8f0000 100%); padding: 4rem 0; text-align: center; color: #fff;}.works-cta-inner { max-width: 680px; margin: 0 auto;}.works-cta-title { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 900; color: #fff; margin-bottom: 1rem;}.works-cta-text { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.9); line-height: 1.85; margin-bottom: 2rem;}.works-cta-btn { display: inline-block; padding: 1rem 2.5rem; background: #fff; color: #d60000; font-size: 1.0625rem; font-weight: 900; border-radius: 10px; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease;}.works-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26); color: #b50000;}/* 施工事例ページ スマホ調整（768px未満） works-grid の3列化は既存の @media (min-width:768px) ブロックで対応済み */@media (max-width: 767px) { .works-hero { padding: 3rem 0 2.5rem; } .works-list-section { padding: 3rem 0 4rem; } .works-filter-btn { font-size: 0.8125rem; padding: 6px 13px; } .works-area-chip { font-size: 0.75rem; } .works-cta-btn { display: block; max-width: 360px; margin: 0 auto; }} /* 施工事例カード: スマホ(767.98px以下)は2列×5行(1ページ10件)で表示。 表示件数自体はinc/cpt.phpのpre_get_posts(tsk_works_listing_posts_per_page)で制御し、 ここではレイアウトと情報量の調整のみ行う（CSSで11/12件目を隠す実装ではない）。 767px境界のdevicePixelRatio丸め誤差対策として767.98pxを使用。 */ @media (max-width: 767.98px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .works-card { border-radius: 12px; min-width: 0; } .works-card-media { padding: 10px 10px 8px; } .works-before-after { gap: 3px; } /* 長い抜粋・価格帯は詳細ページへ委ね、スマホカードからは省略する（投稿データ自体は変更しない） */ .works-card-text, .works-price { display: none; } .works-detail-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: auto; } }/* ===================================================== 22. 施工事例 個別ページ（single-works.php） ===================================================== *//* 詳細コンテンツ全体のラップ */.works-single-wrap { background: #f7f8fa; padding: 3rem 0 4rem;}/* BEFORE / AFTER 写真エリア */.works-single-photos { margin-bottom: 3rem;}.works-single-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;}.works-single-photo-item { display: flex; flex-direction: column; gap: 8px;}.works-single-photo-label { display: inline-block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 4px; text-align: center; width: fit-content;}.works-single-photo-label.before { background: #444; color: #fff; }.works-single-photo-label.after { background: #f36c21; color: #fff; }.works-single-photo-box { background: #ddd; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3;}.works-single-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block;}.works-single-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%;}.works-single-photo-empty p { font-size: 0.875rem; color: #aaa; margin: 0;}.works-single-ba-arrow { font-size: 1.5rem; color: #bbb; flex-shrink: 0; text-align: center;}/* 施工概要テーブル */.works-single-summary { background: #fff; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);}.works-single-summary-title { font-size: 1.125rem; font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid #d60000;}.works-single-dl { display: flex; flex-direction: column; gap: 0;}.works-single-dl-row { display: flex; gap: 1rem; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.9375rem; line-height: 1.75;}.works-single-dl-row:last-child { border-bottom: none; }.works-single-dl-row dt { flex-shrink: 0; width: 7em; font-weight: 700; color: #666;}.works-single-dl-row dd { color: #222; flex: 1;}.works-single-price { color: #f36c21; font-weight: 900; font-size: 1.05em;}/* 本文エリア */.works-single-content { background: #fff; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);}.works-single-content-title { font-size: 1.125rem; font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid #d60000;}.works-single-body { font-size: 0.9375rem; line-height: 2; color: #333;}.works-single-body p { margin-bottom: 1rem; }.works-single-body p:last-child { margin-bottom: 0; }/* お客様の声 */.works-single-voice { background: #fff; border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);}.works-single-voice-title { font-size: 1.125rem; font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid #d60000;}.works-single-voice-body { background: #fafafa; border-left: 4px solid #d60000; border-radius: 0 8px 8px 0; padding: 1.25rem 1.5rem; margin: 0;}.works-single-voice-body p { font-size: 0.9375rem; color: #333; line-height: 1.9; margin: 0;}/* 一覧に戻るボタン */.works-single-back { text-align: center; margin-top: 2.5rem;}.works-single-back-btn { display: inline-block; padding: 12px 28px; border: 2px solid #d60000; border-radius: 8px; color: #d60000; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease;}.works-single-back-btn:hover { background: #d60000; color: #fff;}/* アーカイブ: 事例なし時 */.works-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background: #fff; border-radius: 12px;}.works-empty p { font-size: 1rem; color: #777; line-height: 1.8; margin: 0;}/* paginate_links() の .page-numbers を works-pagination スタイルに合わせる */.works-pagination-list .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 6px; background: #fff; border: 2px solid #e0e0e0; color: #444; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease; white-space: nowrap;}.works-pagination-list .page-numbers:hover { border-color: #d60000; color: #d60000;}.works-pagination-list .page-numbers.current { background: #d60000; border-color: #d60000; color: #fff;}.works-pagination-list .page-numbers.dots { border-color: transparent; background: transparent; cursor: default;}/* single-works.php スマホ調整 */@media (max-width: 767px) { .works-single-ba { grid-template-columns: 1fr; } .works-single-ba-arrow { font-size: 2rem; transform: rotate(90deg); display: block; text-align: center; } .works-single-summary, .works-single-content, .works-single-voice { padding: 1.5rem; } .works-single-dl-row { flex-direction: column; gap: 4px; } .works-single-dl-row dt { width: auto; }}/* ===================================================== 23. 施工事例 個別ページ詳細エリア（works-detail-*） ===================================================== */.works-detail-section { padding: 4rem 0 5rem; background: #f7f8fa;}.works-detail-title { text-align: center; font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 900; color: #222; margin-bottom: 2.5rem;}/* BEFORE / AFTER 写真エリア */.works-detail-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-bottom: 3rem;}/* 写真カード共通 */.works-detail-photo { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #e5e5e5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);}/* BEFORE: 控えめグレー枠 */.works-detail-photo--before { border-color: #e5e5e5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);}/* AFTER: 赤枠・強調シャドウ */.works-detail-photo--after { border-color: var(--clr-accent); box-shadow: 0 12px 32px rgba(232, 96, 26, 0.18);}/* 写真 — 縦横比を崩さず表示 */.works-detail-photo img { width: 100%; height: 420px; object-fit: cover; object-position: center center; display: block;}.works-label { position: absolute; top: 14px; left: 14px; z-index: 2; color: #fff; font-weight: 900; padding: 6px 12px; border-radius: 6px; font-size: 0.875rem; letter-spacing: 0.06em;}.works-label.before { background: #444; }.works-label.after { background: var(--clr-accent); }.works-photo-placeholder { display: flex; align-items: center; justify-content: center; height: 420px; font-size: 0.875rem; color: #aaa; background: #e8e8e8;}.works-detail-arrow { font-size: 2rem; font-weight: 900; color: #e95513; text-align: center; flex-shrink: 0;}/* 施工概要 */.works-detail-summary { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); margin-bottom: 2rem;}.works-detail-summary h3 { font-size: 1.125rem; font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid #d60000;}.works-detail-summary dl { display: grid; grid-template-columns: 9em 1fr; gap: 0; font-size: 0.9375rem; line-height: 1.75;}.works-detail-summary dt,.works-detail-summary dd { padding: 10px 0; border-bottom: 1px solid #f0f0f0;}.works-detail-summary dt { font-weight: 700; color: #555;}.works-detail-summary dd { margin: 0; color: #222;}.works-detail-summary .price { color: #e95513; font-weight: 900; font-size: 1.125rem;}/* 共通カード（施工内容・お客様の声・担当者コメント） */.works-detail-content { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); margin-bottom: 2rem; font-size: 0.9375rem; line-height: 1.9; color: #333;}.works-detail-content-heading { font-size: 1.125rem; font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--hayack-green-dark);}.works-detail-content p { margin-bottom: 1rem; }.works-detail-content p:last-child { margin-bottom: 0; }/* お客様の声 本文（左赤ライン） */.works-detail-voice-body { background: #fafafa; border-left: 4px solid var(--clr-accent); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 0; font-size: 0.9375rem; color: #333; line-height: 1.85;}/* 担当者コメント 本文（左赤ライン） */.works-detail-staff-body { background: #fafafa; border-left: 4px solid var(--clr-accent); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; font-size: 0.9375rem; color: #333; line-height: 1.85;}/* ボタンエリア（.btn-primary / .btn-secondary は .works-detail-buttons 内にスコープ） */.works-detail-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 2.5rem;}.works-detail-buttons .btn-primary,.works-detail-buttons .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 15px 28px; border-radius: 999px; font-weight: 900; font-size: 1rem; text-decoration: none; transition: all 0.2s ease;}.works-detail-buttons .btn-primary { background: #d60000; color: #fff; border: 2px solid #d60000;}.works-detail-buttons .btn-primary:hover { background: #b50000; border-color: #b50000; color: #fff;}.works-detail-buttons .btn-secondary { background: #fff; color: #333; border: 2px solid #bbb;}.works-detail-buttons .btn-secondary:hover { border-color: var(--hayack-green-dark); color: var(--hayack-green-dark);}/* スマホ調整 */@media (max-width: 767px) { .works-detail-section { padding: 2.5rem 0 3.5rem; } .works-detail-before-after { grid-template-columns: 1fr; gap: 16px; } .works-detail-arrow { transform: rotate(90deg); } .works-detail-photo img, .works-photo-placeholder { height: 260px; } .works-detail-summary dl { grid-template-columns: 1fr; gap: 0; } .works-detail-summary dt { padding-bottom: 2px; border-bottom: none; font-size: 0.8125rem; color: #888; } .works-detail-summary dd { padding-top: 0; padding-bottom: 12px; } .works-detail-buttons .btn-primary, .works-detail-buttons .btn-secondary { min-width: 0; width: 100%; max-width: 360px; }}/* ===================================================== 24. 会社概要ページ（page-company.php） ===================================================== *//* ---- 代表メッセージ ---- */.company-message-inner { display: grid; grid-template-columns: 1fr 240px; gap: 3.5rem; align-items: start;}.company-message-heading { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 900; color: #1a1a1a; line-height: 1.45; letter-spacing: 0.02em; margin-bottom: 1.5rem;}.company-message-body { font-size: 1rem; line-height: 1.9; letter-spacing: 0.02em; color: #444; margin-bottom: 1.75rem;}.company-message-body p { margin-bottom: 1.25rem; }.company-message-body p:last-child { margin-bottom: 0; }.company-message-sig { font-size: 0.9375rem; color: #333; line-height: 1.9; padding-top: 1.25rem; border-top: 1px solid #e5e5e5;}.company-message-photo-inner { border-radius: 16px; overflow: hidden; background: #e0e0e0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);}.company-message-photo-inner img { width: 100%; height: auto; display: block; border-radius: 16px;}.company-message-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 420px; color: #aaa; font-size: 0.875rem; border-radius: 16px;}.company-message-photo-caption { text-align: center; font-size: 0.875rem; color: #666; margin-top: 0.75rem;}/* ---- 会社概要テーブル ---- */.company-info-table-wrap { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);}.company-info-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.75;}.company-info-table th,.company-info-table td { padding: 14px 22px; border-bottom: 1px solid #f0f0f0; vertical-align: top; text-align: left;}.company-info-table tbody tr:last-child th,.company-info-table tbody tr:last-child td { border-bottom: none;}.company-info-table th { width: 9.5em; background: var(--clr-accent-light); font-weight: 700; color: var(--clr-accent); white-space: nowrap;}.company-info-table td { color: #222; }.company-info-tel { color: var(--hayack-green-dark); font-weight: 700; text-decoration: none;}.company-info-tel:hover { text-decoration: underline; color: var(--hayack-green-dark); }/* ---- 大切にしていること ---- */.company-reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}.company-reason-card { background: #fff; border: 1px solid #e8e8e8; border-top: 4px solid var(--clr-accent); border-radius: 12px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); transition: box-shadow var(--transition);}.company-reason-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);}.company-reason-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 1rem;}.company-reason-title { font-size: 1.0625rem; font-weight: 900; color: var(--hayack-green-dark); margin-bottom: 0.875rem;}.company-reason-text { font-size: 0.875rem; color: #555; line-height: 1.85; margin: 0;}/* ---- 施工エリア ---- */.company-area-body { max-width: 680px; margin: 0 auto; text-align: center;}.company-area-body > p { font-size: 0.9375rem; color: #555; line-height: 1.9; margin-bottom: 1.75rem;}.company-area-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}.company-area-chip { display: inline-block; padding: 8px 22px; background: #fff; border: 2px solid var(--clr-accent); border-radius: 999px; font-size: 0.875rem; font-weight: 700; color: var(--clr-accent);}/* ---- Googleマップ ---- */.company-map-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); line-height: 0;}.company-map-wrap iframe { display: block; width: 100%; height: 420px; border: 0;}/* ---- CTA 電話番号 ---- */.company-cta-tel { margin-top: 1.25rem; margin-bottom: 0;}.company-cta-tel a { font-size: 1.625rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: 0.05em;}.company-cta-tel a::before { content: '☎ '; font-size: 1.25rem;}.company-cta-tel a:hover { opacity: 0.85; color: #fff;}/* ---- スマホ対応 ---- */@media (max-width: 767.98px) { .company-message-inner { grid-template-columns: 1fr; gap: 2rem; } .company-message-photo { max-width: 190px; margin: 0 auto; } /* テーブル: ラベル上・値下の縦積みに変換 */ .company-info-table, .company-info-table tbody, .company-info-table tr { display: block; } .company-info-table tr { border-bottom: 1px solid #f0f0f0; padding: 4px 0; } .company-info-table tbody tr:last-child { border-bottom: none; } .company-info-table th, .company-info-table td { display: block; border-bottom: none; padding: 4px 16px; white-space: normal; width: auto; } .company-info-table th { background: transparent; font-size: 0.8125rem; color: var(--clr-accent); padding-bottom: 2px; } .company-info-table td { padding-top: 0; padding-bottom: 10px; } .company-reasons-grid { grid-template-columns: 1fr; gap: 1rem; } .company-map-wrap iframe { height: 280px; } .company-cta-tel a { font-size: 1.375rem; }} /* ===================================================== 24.5 会社概要ページ 実写真セクション（company-proof-* でスコープ。既存company-*は変更しない） ===================================================== */ /* 集合写真: PC=文章(約58〜60%)＋写真(約40〜42%・最大480px)の2カラム、SP=見出し→本文→写真の1カラム */ .company-proof-team { background: #fff; } .company-proof-team__inner { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.4fr); grid-template-areas: "photo body"; align-items: center; gap: 48px; } .company-proof-team__body { grid-area: body; } .company-proof-team__photo { grid-area: photo; width: 100%; max-width: 480px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10); line-height: 0; } .company-proof-team__photo img { width: 100%; height: auto; display: block; } .company-proof-team__heading { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 900; color: #1a1a1a; line-height: 1.45; letter-spacing: 0.02em; margin-bottom: 1.25rem; } .company-proof-team__text { font-size: 1rem; line-height: 1.9; letter-spacing: 0.02em; color: #444; margin: 0; } /* 実績・表彰 統合カード: PC=3カラム / タブレット=2カラム / SP=1カラム。縦横比の異なる3画像を白背景・contain枠で統一 */ .company-proof-achievements__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 2.5rem auto 0; } .company-proof-achievements__item { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); margin: 0; display: flex; flex-direction: column; } .company-proof-achievements__media { display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 16px; background: #fff; border-radius: 8px; margin-bottom: 1rem; } .company-proof-achievements__media img { width: 100%; height: 180px; object-fit: contain; } .company-proof-achievements__media--press img { max-width: 220px; } .company-proof-achievements__caption { font-size: 0.8125rem; color: #555; line-height: 1.65; margin: 0; text-align: center; } .company-proof-achievements__caption strong, .company-proof-achievements__caption span { display: block; } .company-proof-achievements__caption strong { font-size: 15px; font-weight: 700; color: #333; } .company-proof-achievements__caption span { margin-top: 4px; font-size: 13px; color: #666; } .related-banner-photo { flex-shrink: 0; width: 160px; border-radius: 12px; overflow: hidden; } .related-banner-photo__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; display: block; } /* 岡崎のいろんな場所に看板があります！（company-billboard__*。既存の.company-*系とは独立したプレフィックス） PC=3カラム／タブレット=2カラム／SP=1カラムは.company-proof-achievements__gridと同じ慣例に合わせる。 3枚とも元画像の比率が同一(1477:1108)のため、その比率に正確に合わせたaspect-ratioで object-fit:coverを使っても実質的なトリミングは発生しない */ .company-billboard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .company-billboard__card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .company-billboard__photo { display: block; width: 100%; height: auto; aspect-ratio: 1477 / 1108; object-fit: cover; } /* 設置場所キャプション: 画像より控えめな補足情報として白背景・中央揃えで表示。 .company-billboard__card は overflow:hidden + border-radius:12px のため、 画像は上側、キャプションは下側の角だけが自然に丸くクリップされる（個別のradius指定は不要） */ .company-billboard__caption { margin: 0; padding: 10px 12px 12px; background: #fff; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--clr-muted); text-align: center; } @media (min-width: 768px) and (max-width: 1023.98px) { .company-billboard__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .company-billboard__grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 420px; margin-inline: auto; } .company-billboard__caption { font-size: 12px; padding: 8px 12px 10px; } } /* 日本語の不自然な折り返し防止（会社概要ページ専用クラスのみに適用。h2/h3/pへ直接指定はしない） */ .company-message-heading, .company-proof-team__heading, .company-access-name { word-break: normal; line-break: strict; overflow-wrap: break-word; text-wrap: balance; } .company-message-body p, .company-proof-team__text, .company-proof-achievements__caption, .company-area-body > p { word-break: normal; line-break: strict; overflow-wrap: break-word; } /* 会社概要テーブル: 電話番号のみ折り返し禁止（カード全体へは指定しない） */ .company-info-tel { white-space: nowrap; } /* 汎用ユーティリティ: 日本語は文字単位で折り返されるため、CSSのword-break/line-breakだけでは 「工事」「こと」等の単語が文字の途中で分断されるのを防げない。意味のまとまりを保護する箇所にのみ使用する */ .u-nowrap { white-space: nowrap; } @media (min-width: 768px) and (max-width: 1023px) { .company-proof-achievements__grid { grid-template-columns: repeat(2, 1fr); } } /* max-width:767.98px … 767px境界でのサブピクセル丸め誤差（devicePixelRatio由来）により、 ちょうど767px相当の実効ビューポート幅で本ブロックが適用されない事例が確認されたための対策。 768px以上の挙動には影響しない */ @media (max-width: 767.98px) { .company-proof-team__inner { grid-template-columns: 1fr; grid-template-areas: "body" "photo"; gap: 28px; } .company-proof-team__photo { width: 90%; max-width: 340px; margin-inline: auto; } .company-proof-achievements__grid { grid-template-columns: 1fr; gap: 28px; max-width: 360px; } .related-banner-photo { width: 100%; max-width: 260px; margin: 0 auto; } /* 対応エリア導入文: SPのみ左揃え（PCの中央揃えは維持） */ .company-area-body > p { text-align: left; } /* 会社概要テーブル: 項目間の余白を拡大 */ .company-info-table td { padding-bottom: 16px; } } /* ---- 共有クラスへの微調整（他ページへ影響させないため body.page-id-19 でスコープ） ---- */ body.page-id-19 .section-title { line-height: 1.45; letter-spacing: 0.02em; } body.page-id-19 .section-title, body.page-id-19 .section-lead { word-break: normal; line-break: strict; overflow-wrap: break-word; } body.page-id-19 .company-reason-title { font-size: 1.125rem; line-height: 1.5; word-break: normal; line-break: strict; overflow-wrap: break-word; text-wrap: balance; } body.page-id-19 .company-reason-text { font-size: 0.9375rem; word-break: normal; line-break: strict; overflow-wrap: break-word; } /* 最下部CTA（site-bottom-cta.php・全ページ共通）: 会社概要ページのみ見出しの折り返しバランスを調整 */ body.page-id-19 .hayack-demo__bottom-cta-title { text-wrap: balance; } /* ===================================================== 25. 選ばれる理由ページ（page-reason.php） ===================================================== *//* ---- Hero ---- */.reason-hero { background: linear-gradient(130deg, #1f4a0f 0%, var(--hayack-green-dark) 45%, var(--hayack-green-medium) 80%, var(--hayack-green) 100%); color: #fff; padding: 80px 0 64px; position: relative; overflow: hidden;}.reason-hero::before { content: ''; position: absolute; top: -20%; right: 5%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(180, 230, 110, 0.25) 0%, transparent 65%); pointer-events: none;}.reason-hero::after { content: ''; position: absolute; bottom: -10%; left: -5%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%); pointer-events: none;}.reason-hero-inner { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: center;}.reason-hero-label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: #FFD600; margin-bottom: 0.6rem;}.reason-hero-title { font-size: clamp(2.375rem, 5vw, 3.75rem); font-weight: 900; line-height: 1.2; margin: 0 0 1rem; color: #fff;}.reason-hero-desc { font-size: 1rem; line-height: 1.85; color: rgba(255, 255, 255, 0.86); margin-bottom: 1.75rem;}.reason-badges { display: flex; flex-wrap: wrap; gap: 0.5rem;}.reason-badge { display: inline-block; background: #FFD600; color: #1a1a1a; font-size: 0.8125rem; font-weight: 700; padding: 0.3em 0.9em; border-radius: 999px; letter-spacing: 0.04em;}/* ---- Hero: 装飾ビジュアル ---- */.reason-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px;}.reason-hero-deco-circle { position: absolute; border-radius: 50%; pointer-events: none;}.reason-hero-deco-circle--1 { width: 280px; height: 280px; background: rgba(255, 214, 0, 0.15); top: 50%; left: 50%; transform: translate(-50%, -50%);}.reason-hero-deco-circle--2 { width: 220px; height: 220px; border: 2px solid rgba(255, 255, 255, 0.25); top: 50%; left: 50%; transform: translate(-50%, -50%);}.reason-hero-price-card { position: relative; background: #fff; border-radius: 16px; padding: 1.5rem 1.75rem; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border-top: 4px solid #d60000; min-width: 240px; z-index: 1;}.reason-hero-price-label { font-size: 0.75rem; font-weight: 700; color: #d60000; letter-spacing: 0.05em; margin: 0 0 0.5rem;}.reason-hero-price-num { font-size: 2.75rem; font-weight: 800; color: #111; line-height: 1; margin: 0 0 1rem;}.reason-hero-price-num span { font-size: 1.25rem; font-weight: 700; color: #333;}.reason-hero-price-list { list-style: none; margin: 0; padding: 0.875rem 0 0; text-align: left; display: flex; flex-direction: column; gap: 0.375rem; border-top: 1px solid #f0f0f0;}.reason-hero-price-list li { font-size: 0.8125rem; color: #333; font-weight: 600;}/* ---- 比較表 ---- */.reason-compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: start;}.reason-compare-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 2px solid #e5e5e5; display: flex; flex-direction: column;}.reason-compare-card--best { border: 3px solid #d60000; box-shadow: 0 8px 32px rgba(214, 0, 0, 0.2); transform: translateY(-8px);}.reason-compare-head { background: #d60000; color: #fff; padding: 1.5rem 1.25rem 1.25rem; text-align: center;}.reason-compare-head--mid { background: #555; }.reason-compare-head--high { background: #2a2a2a; }.reason-compare-badge { display: inline-block; background: #FFD600; color: #9a0000; font-size: 0.75rem; font-weight: 800; padding: 0.2em 0.9em; border-radius: 999px; margin-bottom: 0.6rem; letter-spacing: 0.04em;}.reason-compare-company { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.5rem;}.reason-compare-price-wrap { margin: 0; line-height: 1;}.reason-compare-price { font-size: 2.5rem; font-weight: 900; font-family: 'Montserrat', 'Noto Sans JP', sans-serif;}.reason-compare-unit { font-size: 0.9375rem; font-weight: 600; margin-left: 0.1em;}.reason-compare-caption { font-size: 0.75rem; margin: 0.35rem 0 0; opacity: 0.85;}.reason-compare-list { list-style: none; padding: 1.25rem 1.25rem 1.5rem; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 0.65rem;}.reason-compare-list li { font-size: 0.9375rem; padding-left: 1.6em; position: relative; line-height: 1.5; color: #333;}.reason-compare-list li::before { position: absolute; left: 0; font-weight: 800; top: 0.05em;}.reason-compare-list li.good::before { content: '✓'; color: #d60000; }.reason-compare-list li.quality::before { content: '★'; color: #FFD600; font-size: 0.85em; }.reason-compare-list li.cost::before { content: '▲'; color: #aaa; }.reason-compare-list li.neutral::before { content: '－'; color: #ccc; }.reason-compare-emphasis { margin-top: 2.5rem; background: #fff5f5; border: 2px solid #d60000; border-radius: 12px; padding: 1.25rem 2rem; text-align: center;}.reason-compare-emphasis p { margin: 0; font-size: 1.125rem; font-weight: 700; color: #d60000;}.reason-compare-disclaimer { margin-top: 1rem; font-size: 0.8125rem; color: #999; text-align: center;}/* ---- 5つの理由 ---- */.reason-five-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem;}/* 5枚目は中央に */.reason-five-card:last-child:nth-child(3n+2) { grid-column: 2;}.reason-five-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07); border: 1px solid #f0f0f0; display: flex; flex-direction: column;}.reason-five-head { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f0f0f0;}.reason-five-head img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}.reason-five-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}.reason-five-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}.reason-five-emoji { font-size: 3.75rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff8e1;}.reason-five-num { position: absolute; top: 10px; left: 12px; font-size: 1.625rem; font-weight: 900; color: #fff; background: #d60000; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; box-shadow: 0 2px 8px rgba(214, 0, 0, 0.4); z-index: 1;}.reason-five-body { padding: 1.25rem 1.25rem 1.5rem; flex: 1;}.reason-five-title { font-size: 1rem; font-weight: 700; color: #222; margin: 0 0 0.5rem; line-height: 1.5;}.reason-five-text { font-size: 0.9375rem; color: #555; line-height: 1.75; margin: 0;}/* ---- 品質の考え方（hayack_quolity_banner 1枚物セクション画像） ---- */ .reason-quality-visual { padding: 4rem 0; } .reason-quality-visual__picture { display: block; max-width: 1440px; margin: 0 auto; } .reason-quality-visual__img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.08); } /* ---- 選ばれる理由 → 品質基準 橋渡しブロック ---- */ .reason-five-section.section { padding-bottom: 0; } .reason-quality-bridge { max-width: 900px; margin: 0 auto; padding: 44px 24px 28px; text-align: center; } .reason-quality-bridge__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 0.625rem; } .reason-quality-bridge__title { font-size: clamp(1.375rem, 4vw, 2.125rem); font-weight: 700; color: var(--clr-primary-dark); line-height: 1.5; margin-bottom: 0.75rem; text-wrap: balance; } .reason-quality-bridge__text { font-size: 0.95rem; line-height: 1.8; color: var(--clr-muted); max-width: 700px; margin: 0 auto; } .reason-quality-bridge__arrow { display: block; width: 14px; height: 14px; margin: 22px auto 0; border-right: 3px solid var(--hayack-green-dark, #4d8f1f); border-bottom: 3px solid var(--hayack-green-dark, #4d8f1f); transform: rotate(45deg); } .reason-quality-bridge + .reason-quality-visual { padding-top: 0; } /* ---- お客様との約束 ---- */.reason-promise-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; margin-top: 2.5rem;}.reason-promise-card { background: #fff; border-radius: 16px; padding: 1.75rem 1.25rem 1.5rem; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); border: 2px solid #e8eaed; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; transition: transform 0.2s ease, box-shadow 0.2s ease;}.reason-promise-card:nth-child(1) { grid-column: span 2; }.reason-promise-card:nth-child(2) { grid-column: span 2; }.reason-promise-card:nth-child(3) { grid-column: span 2; }.reason-promise-card:nth-child(4) { grid-column: 2 / span 2; }.reason-promise-card:nth-child(5) { grid-column: 4 / span 2; }.reason-promise-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(214, 0, 0, 0.12); border-color: #d60000;}.reason-promise-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; background: #f4f5f7; border-radius: 50%; border: 2px solid #e8eaed; flex-shrink: 0;}.reason-promise-title { font-size: 0.9375rem; font-weight: 700; color: #222; line-height: 1.55; white-space: pre-line; margin: 0;}.reason-promise-text { font-size: 0.875rem; color: #444; line-height: 1.7; margin: 0;}/* ---- FAQ ---- */.reason-faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem;}.reason-faq-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid #eee;}.reason-faq-q,.reason-faq-a { display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 1.375rem;}.reason-faq-q { background: #fdf3f3; border-bottom: 1px solid #f5e0e0;}.reason-faq-a { background: #fff; }.reason-faq-q p,.reason-faq-a p { margin: 0; font-size: 0.9375rem; line-height: 1.75; color: #333; flex: 1; padding-top: 0.1rem;}.reason-faq-q p { font-weight: 600; }.reason-faq-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.0625rem; font-weight: 900; flex-shrink: 0; font-family: 'Montserrat', sans-serif;}.reason-faq-mark--q { background: #d60000; color: #fff; }.reason-faq-mark--a { background: #1B4F8A; color: #fff; }/* ---- レスポンシブ ---- */@media (max-width: 1023px) { .reason-hero-inner { grid-template-columns: 1fr; text-align: center; } .reason-hero-visual { justify-content: center; margin-top: 1.5rem; } .reason-badges { justify-content: center; } .reason-compare-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .reason-compare-card--best { transform: none; } .reason-five-grid { grid-template-columns: repeat(2, 1fr); } .reason-five-card:last-child:nth-child(3n+2) { grid-column: auto; } .reason-quality-inner { grid-template-columns: 1fr; gap: 2rem; } .reason-promise-grid { grid-template-columns: repeat(2, 1fr); } .reason-promise-card:nth-child(n) { grid-column: auto; }}/* ===================================================== 施工事例 関連ページ案内（archive-works / single-works 共通） ===================================================== *//* 一覧ページ用セクション */.works-related-nav-section { background: var(--clr-bg-alt); padding-block: 3rem;}/* 2カラムグリッド */.works-related-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;}/* カード本体 */.works-related-nav-card { display: flex; flex-direction: column; background: #fff; border: 1.5px solid rgba(232, 96, 26, 0.2); border-top: 4px solid var(--clr-accent); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); padding: 1.75rem;}/* 小見出し（一覧ページのみ） */.works-related-nav-sub { font-size: 0.75rem; font-weight: 700; color: var(--clr-accent); letter-spacing: 0.06em; margin-bottom: 0.5rem;}/* メイン見出し */.works-related-nav-title { font-size: 1.05rem; font-weight: 800; color: #1a1a1a; line-height: 1.55; margin-bottom: 0.75rem;}/* 説明文（flex: 1 でボタンを底揃え） */.works-related-nav-desc { font-size: 0.875rem; color: #555; line-height: 1.75; flex: 1; margin-bottom: 1.25rem;}/* CTAボタン */.works-related-nav-btn { display: inline-block; align-self: flex-start; background: var(--hayack-green-dark); color: #fff; font-weight: 700; font-size: 0.875rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition);}.works-related-nav-btn:hover { background: #1f4a0f; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31, 74, 15, 0.3); text-decoration: none;}/* 詳細ページ内インライン版 */.works-related-nav-inline { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--clr-border);}.works-related-nav-inline-heading { font-size: 1.1rem; font-weight: 800; color: #1a1a1a; margin-bottom: 0.4rem;}.works-related-nav-inline-sub { font-size: 0.875rem; color: #666; margin-bottom: 1.5rem;}@media (max-width: 767px) { .works-related-nav-grid { grid-template-columns: 1fr; } .works-related-nav-btn { width: 100%; text-align: center; align-self: stretch; }}/* ===================================================== 関連ページ案内バナー（page-reason / page-company 共通） ===================================================== */.related-banner-section { padding-block: 2.5rem;}.related-banner { display: flex; align-items: center; gap: 2rem; background: #fff; border: 1.5px solid rgba(232, 96, 26, 0.22); border-left: 5px solid var(--clr-accent); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07); padding: 2rem 2.5rem;}.related-banner-text { flex: 1; min-width: 0;}.related-banner-sub { font-size: 0.78rem; font-weight: 700; color: var(--clr-accent); letter-spacing: 0.06em; margin-bottom: 0.5rem; text-transform: none;}.related-banner-title { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 800; color: #1a1a1a; line-height: 1.55; margin-bottom: 0.65rem;}.related-banner-desc { font-size: 0.875rem; color: #555; line-height: 1.75;}.related-banner-action { flex-shrink: 0;}.related-banner-btn { display: inline-block; background: var(--hayack-green-dark); color: #fff; font-weight: 700; font-size: 0.9rem; padding: 0.9rem 1.75rem; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: background var(--transition), transform var(--transition), box-shadow var(--transition);}.related-banner-btn:hover { background: #1f4a0f; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31, 74, 15, 0.3); text-decoration: none;}@media (max-width: 767px) { .related-banner { flex-direction: column; align-items: stretch; padding: 1.5rem; gap: 1.25rem; } .related-banner-btn { width: 100%; text-align: center; padding: 1rem; }}@media (max-width: 767px) { .reason-hero { padding: 56px 0 48px; } .reason-hero-price-card { min-width: 0; width: 100%; max-width: 300px; } .reason-hero-price-num { font-size: 2.25rem; } .reason-five-grid { grid-template-columns: 1fr; } .reason-quality-steps { flex-direction: column; align-items: stretch; } .reason-quality-arrow { transform: rotate(90deg); align-self: center; } .reason-promise-grid { grid-template-columns: 1fr; } .reason-compare-card--best { transform: none; } .reason-quality-bridge { padding-left: 20px; padding-right: 20px; } .reason-quality-bridge__text { font-size: 0.875rem; }}/* ===================================================== 26. 来店相談予約（page-showroom-reservation.php） プレフィックス: sr- ===================================================== *//* ---------- ページヒーロー: contact-hero 準拠（赤背景・中央揃え） ---------- */.sr-page-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--hayack-green-dark) 0%, #1f4a0f 100%); padding: 4rem 0 3.5rem; text-align: center; color: #fff;}.sr-page-hero::before { content: ''; position: absolute; top: -60px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.sr-page-hero::after { content: ''; position: absolute; bottom: -80px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); pointer-events: none;}.sr-page-hero-content { position: relative; z-index: 1;}.sr-page-hero-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.625rem;}.sr-page-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 1rem;}.sr-page-hero-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.85; max-width: 560px; margin: 0 auto 0.5rem;}.sr-page-hero-sub { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.75); max-width: 480px; margin: 0 auto; line-height: 1.75;}.sr-page-hero-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem;}.sr-page-hero-badge { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.45rem 1.125rem; border-radius: 100px;}/* ---------- 導入（イントロ）セクション ---------- */.sr-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; max-width: 960px; margin: 0 auto;}.sr-intro-text { font-size: 1rem; color: #444; line-height: 1.85;}.sr-intro-text p { margin: 0 0 1rem;}.sr-intro-text p:last-child { margin-bottom: 0;}.sr-intro-emphasis { margin-top: 1.5rem; padding: 1rem 1.25rem; background: #fff5f5; border-left: 4px solid #d60000; border-radius: 0 8px 8px 0;}.sr-intro-emphasis p { font-size: 0.9375rem; color: #333; font-weight: 700; margin: 0; line-height: 1.65;}.sr-intro-img { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}.sr-intro-img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;}/* ---------- 3つの安心（理由カード） ---------- */.sr-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 960px; margin: 0 auto;}.sr-reason-card { background: #fff; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; border: 1px solid #e8e8e8; transition: box-shadow 0.25s;}.sr-reason-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);}.sr-reason-num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #d60000; color: #fff; font-size: 1.1rem; font-weight: 900; border-radius: 50%; margin: 0 auto 1rem; letter-spacing: 0.02em;}.sr-reason-icon { margin-bottom: 0.875rem;}.sr-reason-title { font-size: 1.0625rem; font-weight: 900; margin: 0 0 0.625rem; color: #222;}.sr-reason-text { font-size: 0.9375rem; color: #555; line-height: 1.75; margin: 0;}/* ---------- できること / 正式見積もりについて ---------- */.sr-docan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 960px; margin: 0 auto;}.sr-docan-card { border-radius: 12px; padding: 2rem;}.sr-docan-card--can { background: #fff; border: 2px solid #e8e8e8;}.sr-docan-card--note { background: #fff5f5; border: 2px solid #ffd0d0;}.sr-docan-head { margin-bottom: 1.25rem;}.sr-docan-badge { display: inline-block; font-size: 0.9375rem; font-weight: 900; padding: 0.5rem 1rem; border-radius: 6px;}.sr-docan-badge--can { background: #d60000; color: #fff;}.sr-docan-badge--note { background: #f5c6c6; color: #7a0000; font-size: 0.875rem;}.sr-docan-list { list-style: none; margin: 0; padding: 0;}.sr-docan-list li { font-size: 0.9375rem; color: #333; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.6;}.sr-docan-list li::before { content: '\2713'; color: #d60000; font-weight: 900; flex-shrink: 0; margin-top: 0.05em;}.sr-docan-list li:last-child { border-bottom: none;}.sr-docan-text { font-size: 0.9375rem; color: #444; line-height: 1.8; margin: 0 0 0.875rem;}.sr-docan-text:last-of-type { margin-bottom: 0;}.sr-docan-emphasis { margin-top: 1.25rem; padding: 0.875rem 1rem; background: rgba(214, 0, 0, 0.06); border-left: 3px solid #d60000; border-radius: 0 6px 6px 0;}.sr-docan-emphasis p { font-size: 0.9375rem; color: #333; font-weight: 700; margin: 0;}/* ---------- 来店相談の流れ ---------- */.sr-flow-steps { display: flex; align-items: stretch; gap: 0.5rem; max-width: 960px; margin: 0 auto 2rem;}.sr-flow-item { flex: 1; text-align: center; padding: 1.75rem 1rem; background: #fff; border-radius: 12px; border: 1px solid #e8e8e8;}.sr-flow-badge { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-bottom: 1rem;}.sr-flow-step-label { font-size: 0.625rem; font-weight: 900; letter-spacing: 0.15em; color: #d60000; line-height: 1;}.sr-flow-step-num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #d60000; color: #fff; font-size: 1.25rem; font-weight: 900; border-radius: 50%;}.sr-flow-badge--muted .sr-flow-step-label { color: #999; }.sr-flow-badge--muted .sr-flow-step-num { background: #ddd; color: #666; }.sr-flow-title { font-size: 1rem; font-weight: 900; color: #222; margin: 0 0 0.5rem; line-height: 1.3;}.sr-flow-desc { font-size: 0.875rem; color: #555; line-height: 1.7; margin: 0;}.sr-flow-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #d60000; flex-shrink: 0; padding: 0 0.125rem;}.sr-flow-note { max-width: 640px; margin: 0 auto; text-align: center; padding: 1.25rem 1.5rem; background: #fff5f5; border: 1px solid #ffd0d0; border-radius: 8px;}.sr-flow-note p { font-size: 1rem; font-weight: 700; color: #d60000; margin: 0;}/* ---------- フォームセクション ---------- */.sr-form-wrap { max-width: 720px; margin: 0 auto;}.sr-datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;}.sr-form-hint { font-size: 0.8125rem; color: #888; margin: 0.25rem 0 0;}/* 送信完了 */.sr-form-success { max-width: 640px; margin: 0 auto 2rem; text-align: center; padding: 2.5rem 2rem; background: #e6f4ea; border: 2px solid #4caf50; border-radius: 12px;}.sr-form-success-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #4caf50; color: #fff; font-size: 1.5rem; border-radius: 50%; margin: 0 auto 1.25rem;}.sr-form-success-title { font-size: 1.25rem; font-weight: 900; color: #2e7d32; margin: 0 0 0.75rem;}.sr-form-success-text { font-size: 0.9375rem; color: #444; line-height: 1.75; margin: 0 0 1rem;}.sr-form-success-tel { font-size: 0.875rem; color: #555; margin: 0;}.sr-form-success-tel-link { display: block; font-size: 1.375rem; font-weight: 900; color: #d60000; text-decoration: none; margin-top: 0.25rem;}/* エラー */.sr-form-errors { max-width: 720px; margin: 0 auto 1.5rem; padding: 1.25rem 1.5rem; background: #fdecea; border: 2px solid #e53935; border-radius: 10px; color: #b71c1c;}.sr-form-errors-title { font-size: 1rem; font-weight: 900; margin: 0 0 0.5rem;}.sr-form-errors ul { margin: 0; padding-left: 1.25rem;}.sr-form-errors li { font-size: 0.9375rem; line-height: 1.65;}/* ---------- 店舗情報 ---------- */.sr-store-inner { max-width: 960px; margin: 0 auto;}.sr-store-name { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 900; color: #222; margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 3px solid #d60000;}/* ---------- FAQ ---------- */.sr-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem;}.sr-faq-item { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; background: #fff;}.sr-faq-question { width: 100%; background: #fff5f5; border: none; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 0.875rem; cursor: pointer; text-align: left; transition: background 0.2s;}.sr-faq-question:hover { background: #ffe8e8;}.sr-faq-q-mark { flex-shrink: 0; width: 30px; height: 30px; background: #d60000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900;}.sr-faq-q-text { font-size: 1rem; font-weight: 700; color: #222; flex: 1; line-height: 1.5;}.sr-faq-icon { margin-left: auto; flex-shrink: 0; font-size: 1.25rem; font-weight: 700; color: #d60000; line-height: 1; width: 24px; text-align: center;}.sr-faq-answer { display: none; gap: 0.875rem; padding: 1rem 1.5rem 1.25rem; align-items: flex-start;}.sr-faq-item--open .sr-faq-answer { display: flex;}.sr-faq-a-mark { flex-shrink: 0; width: 30px; height: 30px; background: #e8601a; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900;}.sr-faq-a-text { font-size: 0.9375rem; color: #444; line-height: 1.75; margin: 0.25rem 0 0;}/* ---------- 最終CTA ---------- */.sr-final-cta { background: linear-gradient(135deg, #d60000 0%, #8f0000 100%); padding: 5rem 0; color: #fff; text-align: center;}.sr-final-cta-inner { max-width: 680px; margin: 0 auto;}.sr-final-cta-title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 900; color: #fff; line-height: 1.35; margin: 0 0 1rem;}.sr-final-cta-text { font-size: 1rem; color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin: 0 0 2.5rem;}.sr-btn-red { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #d60000; font-weight: 900; border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; text-align: center;}.sr-btn-red:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); color: #d60000;}.sr-btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; }.sr-btn-xl { padding: 1.125rem 3rem; font-size: 1.125rem; }.sr-final-tel { display: flex; flex-direction: column; align-items: center; margin-top: 2rem;}.sr-final-tel-label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); margin: 0 0 0.25rem;}.sr-final-tel-number { display: block; font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 900; color: #fff; text-decoration: none; line-height: 1; letter-spacing: 0.02em; margin-bottom: 0.25rem;}.sr-final-tel-hours { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin: 0;}/* ===================================================== sr- レスポンシブ（モバイル: max-width 767px） ===================================================== */@media (max-width: 767px) { /* ページヒーロー */ .sr-page-hero { padding: 3rem 0 2.5rem; } .sr-page-hero-badges { flex-direction: column; align-items: center; } .sr-page-hero-badge { width: 100%; max-width: 280px; justify-content: center; } /* イントロ */ .sr-intro-inner { grid-template-columns: 1fr; gap: 1.75rem; } .sr-intro-img { order: -1; } /* 3つの理由 */ .sr-reason-grid { grid-template-columns: 1fr; gap: 1.25rem; } /* できること */ .sr-docan-grid { grid-template-columns: 1fr; } /* 流れ */ .sr-flow-steps { flex-direction: column; gap: 0; max-width: 480px; margin-left: auto; margin-right: auto; } .sr-flow-item:first-child { border-radius: 12px 12px 0 0; } .sr-flow-item:last-child { border-radius: 0 0 12px 12px; } .sr-flow-item { border-radius: 0; border-bottom: none; } .sr-flow-item:last-child { border-bottom: 1px solid #e8e8e8; } .sr-flow-arrow { transform: rotate(90deg); font-size: 1.125rem; padding: 0.125rem 0; background: #f7f8fa; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; width: 100%; } /* フォーム */ .sr-datetime-row { grid-template-columns: 1fr; } /* CTA */ .sr-final-cta { padding: 3.5rem 0; } .sr-btn-xl { width: 100%; max-width: 360px; }}/* ===================================================== sr- レスポンシブ（タブレット: 768px〜1023px） ===================================================== */@media (min-width: 768px) and (max-width: 1023px) { .sr-reason-grid { grid-template-columns: 1fr 1fr; } .sr-flow-steps { gap: 0.375rem; }}/* ===================================================== 28. セクション区切り線 .home-section-divider ===================================================== *//* 区切り線コンテナ padding-top : ボタン下〜線まで（約56px） padding-bottom : 0（ショールーム側の section padding-top 4rem が担う）*/.home-section-divider { padding: 3.5rem 1.25rem 0; display: flex; align-items: center; justify-content: center;}/* 薄いグレーの横線 */.home-section-divider span { position: relative; display: block; width: min(960px, 100%); height: 1px; background: #e0e2e6;}/* 中央の赤いアクセント線 */.home-section-divider span::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 3px; background: #d60000; border-radius: 2px;}/* スマホ（767px以下） */@media (max-width: 767px) { .home-section-divider { padding-top: 2.5rem; padding-left: 1.25rem; padding-right: 1.25rem; } .home-section-divider span::before { width: 50px; }}/* ===================================================== 29. SP専用改行ユーティリティ / スマホボタン調整 ===================================================== *//* PC・タブレット（768px以上）では非表示 */.sp-only-break { display: none;}/* スマホ（767px以下）：改行を有効にし、ボタンを block に切り替える */@media (max-width: 767px) { .sp-only-break { display: inline; }} /* ---------- FV下 安心ポイントブロック ---------- */ .fv-tagline-block { background: linear-gradient(180deg,#fff9e6 0%,#fff 100%); border-bottom: 4px solid #d60000; box-shadow: 0 3px 12px rgba(214,0,0,.1);} .fv-tagline-inner { max-width: 1100px; margin: 0 auto; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px;} .fv-tagline-main { font-size: 0.9rem; color: #333; text-align: center; margin: 0; font-weight: 700; line-height: 1.5;} .fv-tagline-main strong { color: #d60000;} .fv-tagline-sep { display: none;} .fv-tagline-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%;} .fv-tagline-points li { background: #fff; border: 2px solid #d60000; border-top: 4px solid #d60000; border-radius: 8px; padding: 14px 8px 10px; text-align: center; font-size: 0.9rem; font-weight: 700; color: #1a1a1a; box-shadow: 0 4px 12px rgba(214,0,0,.12); line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 5px;} .fv-tagline-points li::before { font-size: 1.6rem; line-height: 1; display: block;} .fv-tagline-points li:nth-child(1)::before { content: "\01F50D";} .fv-tagline-points li:nth-child(2)::before { content: "\01F91D";} .fv-tagline-points li:nth-child(3)::before { content: "\01F6AB";} .fv-tagline-points li:nth-child(4)::before { content: "\002705";} .fv-tagline-points li strong { color: #d60000; font-size: 1.15em; background: #fff3cd; padding: 0 4px; border-radius: 3px;} @media (min-width: 768px) { .fv-tagline-inner { flex-direction: row; justify-content: center; padding: 16px 24px; gap: 20px;} .fv-tagline-main { font-size: 0.95rem; white-space: nowrap;} .fv-tagline-sep { display: block; width: 2px; height: 34px; background: #d60000; flex-shrink: 0; opacity: 0.25;} .fv-tagline-points { grid-template-columns: repeat(4, 1fr); gap: 10px; width: auto; flex: 1; max-width: 720px;} .fv-tagline-points li { padding: 16px 10px 12px;} .fv-tagline-points li::before { font-size: 1.9rem;} } /* ===================================================== シミュレーションページ専用 CSS（simv2-* クラス） page-simulation.php のみで使用。他ページには影響しない。 ===================================================== */ /* ---- ヒーロー（緑基調） ---- */ .simv2-hero { background: linear-gradient(135deg,#2d8a3e 0%,#1a6b2a 55%,#0b4518 100%); padding: 56px 0 48px; color: #fff;} .simv2-hero-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px;} .simv2-hero-text { flex: 1 1 0; min-width: 0;} .simv2-hero-catch { display: inline-block; font-size: 0.8125rem; font-weight: 700; color: #ffea00; letter-spacing: 0.08em; margin-bottom: 14px; background: rgba(255,255,255,.15); padding: 4px 16px; border-radius: 50px;} .simv2-hero-title { font-size: clamp(1.75rem,3.5vw,2.75rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 8px;} .simv2-hero-title em { font-style: normal; color: #ffea00;} .simv2-hero-subcopy { font-size: 1.0625rem; font-weight: 700; color: #ffea00; margin-bottom: 14px;} .simv2-hero-lead { font-size: 0.9375rem; color: rgba(255,255,255,.9); line-height: 1.8; margin: 0;} .simv2-hero-lead strong { color: #ffea00;} .simv2-hero-icons { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;} .simv2-hero-icon-wrap { display: flex; gap: 16px; align-items: flex-end;} .simv2-icon-house { width: 140px; height: auto; display: block;} .simv2-icon-calc { width: 88px; height: auto; display: block;} /* 悩みカード */ .simv2-hero-cards { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;} .simv2-hero-card { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.22); min-width: 185px; max-width: 210px; border-left: 4px solid #2d8a3e;} .simv2-hero-card-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1;} .simv2-hero-card-text { font-size: 0.8125rem; font-weight: 700; color: #1a3a20; line-height: 1.45;} /* ---- バッジバー（安心ポイント帯） ---- */ .simv2-badges-bar { background: #fff; border-top: 3px solid #2d8a3e; border-bottom: 1px solid #c8e6c9; padding: 16px 0;} .simv2-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; list-style: none; max-width: 1080px; margin: 0 auto; padding: 0 24px;} .simv2-badge { font-size: 0.875rem; color: #333; line-height: 1.5; display: flex; align-items: center; gap: 6px;} .simv2-badge strong { color: #1a6b2a;} /* ---- セクション共通 ---- */ .simv2-section { padding: 52px 0;} .simv2-section--input { background: #f7f8fa;} .simv2-section--result { background: #fff;} .simv2-section--form { background: #f2f7ff;} /* ---- ステップカード ---- */ .simv2-step-card { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.09); padding: 26px 20px;} .simv2-step-card--result { border-top: 4px solid #1B4F8A;} .simv2-step-card--form { border-top: 4px solid #d60000;} .simv2-step-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px;} .simv2-step-circle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: #1B4F8A; color: #fff; font-size: 1.375rem; font-weight: 900; line-height: 1; flex-shrink: 0;} .simv2-step-circle--result { background: #1B4F8A;} .simv2-step-circle--form { background: #d60000;} .simv2-step-kana { font-size: 0.6875rem; color: #aaa; letter-spacing: 0.06em; margin-bottom: 4px;} .simv2-step-title { font-size: clamp(1.25rem,3vw,1.625rem); font-weight: 900; color: #0D3360; line-height: 1.3; margin-bottom: 6px;} .simv2-step-sub { font-size: 0.875rem; color: #555; margin: 0;} .simv2-step-sub strong { color: #d60000;} /* ---- 坪入力 ---- */ .simv2-input-wrap { padding-top: 4px;} .simv2-input-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;} .simv2-input-label { font-size: 1rem; font-weight: 700; color: #1B4F8A; white-space: nowrap;} .simv2-tsubo-input { width: 120px; height: 52px; border: 2px solid #afd0ef; border-radius: 10px; padding: 0 14px; font-size: 1.5rem; font-weight: 700; text-align: center; color: #0D3360; outline: none; transition: border-color .2s; -webkit-appearance: none;} .simv2-tsubo-input:focus { border-color: #1B4F8A; box-shadow: 0 0 0 3px rgba(27,79,138,.15);} .simv2-input-unit { font-size: 1.125rem; font-weight: 700; color: #333;} .simv2-input-hint { font-size: 0.8125rem; color: #888; margin-bottom: 22px;} .simv2-start-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#e85c1a,#d60000); color: #fff; font-size: 1.125rem; font-weight: 900; padding: 15px 40px; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 18px rgba(214,0,0,.35); transition: transform .2s ease,box-shadow .2s ease; letter-spacing: 0.04em;} .simv2-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(214,0,0,.42);} .simv2-start-btn-icon { font-size: 0.9em;} .simv2-error { color: #d60000; font-size: 0.9rem; font-weight: 700; background: #fff0f0; border-left: 4px solid #d60000; padding: 10px 14px; border-radius: 6px; margin-top: 12px;} /* ---- 個別見積もり ---- */ .simv2-individual-wrap { padding: 36px 0;} .simv2-individual-box { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 16px; border: 2px solid #b8d8f0; padding: 28px 24px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.07);} .simv2-individual-icon { font-size: 2rem; margin-bottom: 10px;} .simv2-individual-title { font-size: 1.25rem; font-weight: 900; color: #0D3360; margin-bottom: 12px;} .simv2-individual-text { font-size: 0.9375rem; color: #444; line-height: 1.75; margin-bottom: 24px;} .simv2-individual-text strong { color: #1B4F8A;} .simv2-individual-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;} .simv2-btn { display: inline-block; font-size: 1rem; font-weight: 700; padding: 13px 28px; border-radius: 50px; text-decoration: none; text-align: center; transition: opacity .2s;} .simv2-btn--red { background: linear-gradient(135deg,#e85c1a,#d60000); color: #fff; box-shadow: 0 4px 14px rgba(214,0,0,.3);} .simv2-btn--green { background: #1B4F8A; color: #fff; box-shadow: 0 4px 14px rgba(27,79,138,.25);} .simv2-btn:hover { opacity: .88; color: #fff;} /* ---- 結果カード ---- */ .simv2-compare-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; margin-bottom: 24px; background: #f2f7ff; border-radius: 14px; overflow: hidden;} .simv2-brand-chip { display: inline-block; background: #ffea00; color: #222; font-size: 0.75rem; font-weight: 900; padding: 2px 10px; border-radius: 50px; margin-right: 4px;} .simv2-price-approx { font-size: 1rem;} .simv2-price-num { font-size: clamp(1.75rem,5vw,2.5rem); line-height: 1;} .simv2-price-unit { font-size: 1rem;} .simv2-price-note { font-size: 0.75rem; color: rgba(255,255,255,.6); margin: 0;} .simv2-compare-vs { padding: 0 16px; font-size: 1.125rem; font-weight: 900; color: #888;} .simv2-compare-market { padding: 22px 16px; text-align: center;} .simv2-compare-market-label { font-size: 0.875rem; color: #666; margin-bottom: 8px;} .simv2-compare-market-price { font-size: 1.375rem; font-weight: 700; color: #888; margin-bottom: 4px; line-height: 1;} .simv2-market-unit { font-size: 0.875rem;} .simv2-saving-box { background: #fff3e0; border: 2px solid #e85c1a; border-radius: 12px; padding: 14px 18px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;} .simv2-saving-label { font-size: 0.875rem; font-weight: 700; color: #e85c1a;} .simv2-saving-num { font-size: 1.75rem; font-weight: 900; color: #d60000;} .simv2-saving-suffix { font-size: 1rem; font-weight: 700; color: #d60000;} .simv2-saving-badge { font-size: 0.75rem; background: #e85c1a; color: #fff; padding: 2px 8px; border-radius: 50px;} .simv2-breakdown-link { text-align: center; margin-bottom: 18px; font-size: 0.9375rem; color: #333;} .simv2-breakdown-link a { color: #1B4F8A; font-weight: 700; text-decoration: underline;} .simv2-sp-br { display: none;} .simv2-caution { display: flex; gap: 12px; background: #fffbe6; border: 1px solid #ffe08a; border-radius: 10px; padding: 14px 16px; font-size: 0.8125rem; color: #555; line-height: 1.7;} .simv2-caution-icon { font-size: 1.125rem; flex-shrink: 0;} /* ---- フォーム ---- */ .simv2-form-thanks { text-align: center; padding: 36px 20px;} .simv2-form-thanks-icon { font-size: 2.5rem; color: #1B4F8A; margin-bottom: 12px;} .simv2-form-thanks h3 { font-size: 1.25rem; font-weight: 900; color: #0D3360; margin-bottom: 12px;} .simv2-form-thanks-hours { font-size: 0.8125rem; color: #888;} .simv2-form-desc { background: #f2f7ff; border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; font-size: 0.9375rem; color: #333; line-height: 1.75;} .simv2-form-nosim { background: #fffbe6; border: 1px solid #ffe08a; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 0.9rem; color: #555;} .simv2-form-summary { background: #edf5ff; border-radius: 12px; padding: 16px 18px; margin-bottom: 22px;} .simv2-form-summary-label { font-size: 0.875rem; font-weight: 700; color: #1B4F8A; margin-bottom: 12px;} .simv2-form-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;} .simv2-form-summary-item { display: flex; flex-direction: column; gap: 2px;} .simv2-sum-key { font-size: 0.75rem; color: #666;} .simv2-sum-val { font-size: 0.9375rem; font-weight: 700; color: #0D3360;} .simv2-sum-val--main { color: #d60000; font-size: 1.125rem;} .simv2-sum-val--saving { color: #e85c1a;} .simv2-form-errors { background: #fff0f0; border: 1px solid #ffb0b0; border-radius: 8px; padding: 14px 18px; margin-bottom: 18px;} .simv2-form-errors ul { list-style: disc inside; margin: 0; padding: 0;} .simv2-form-errors li { color: #d60000; font-size: 0.9rem; margin-bottom: 4px;} .simv2-form-row { margin-bottom: 20px;} .simv2-form-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.9375rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;} .simv2-form-required { display: inline-block; background: var(--clr-accent); color: #fff; font-size: 0.6875rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;} .simv2-form-optional { display: inline-block; background: #e5e7eb; color: #666; font-size: 0.6875rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;} .simv2-form-hint { font-size: 0.75rem; color: #888; font-weight: 400;} .simv2-form-input, .simv2-form-select { width: 100%; height: 50px; border: 1.5px solid #ccd8e8; border-radius: 10px; padding: 0 14px; font-size: 1rem; color: #1a1a1a; outline: none; transition: border-color .2s,box-shadow .2s; font-family: inherit; background: #fff; -webkit-appearance: none;} .simv2-form-input:focus, .simv2-form-select:focus { border-color: var(--hayack-green-dark); box-shadow: 0 0 0 3px rgba(77,143,31,.15);} .simv2-form-textarea { width: 100%; min-height: 140px; border: 1.5px solid #ccd8e8; border-radius: 10px; padding: 14px; font-size: 1rem; color: #1a1a1a; outline: none; resize: vertical; transition: border-color .2s,box-shadow .2s; font-family: inherit; line-height: 1.7;} .simv2-form-textarea:focus { border-color: var(--hayack-green-dark); box-shadow: 0 0 0 3px rgba(77,143,31,.15);} .simv2-form-input-note { font-size: 0.8125rem; color: #888; margin-top: 6px;} .simv2-form-privacy { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;} .simv2-form-privacy input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: #1B4F8A;} .simv2-form-privacy-text { font-size: 0.9375rem; color: #333; line-height: 1.6;} .simv2-form-privacy-text a { color: var(--hayack-green-dark); text-decoration: underline;} .simv2-form-submit-wrap { text-align: center; margin-top: 28px;} .simv2-form-submit-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,#e85c1a,#d60000); color: #fff; font-size: 1.125rem; font-weight: 900; padding: 17px 48px; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 18px rgba(214,0,0,.35); transition: transform .2s ease,box-shadow .2s ease; letter-spacing: 0.04em;} .simv2-form-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(214,0,0,.42); color: #fff;} .simv2-form-submit-icon { font-size: 1.1em;} .simv2-form-sales-note { font-size: 0.8125rem; color: #888; margin-top: 12px;} .simv2-form-tel-option { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e5e7eb; text-align: center;} .simv2-form-tel-label { font-size: 0.875rem; color: #666; margin-bottom: 8px;} .simv2-form-tel-link { display: inline-flex; align-items: center; gap: 8px; font-size: 1.625rem; font-weight: 900; color: #d60000; text-decoration: none; letter-spacing: 0.04em;} .simv2-form-tel-link:hover { color: #a80000;} .simv2-form-tel-hours { font-size: 0.8125rem; color: #888; margin-top: 6px;} /* ---- PC（768px+）---- */ @media (min-width: 768px) { .simv2-section { padding: 80px 0;} .simv2-step-card { padding: 40px 48px;} .simv2-form-summary-grid { grid-template-columns: repeat(4,1fr);} .simv2-compare-market { padding: 28px 24px;} } /* ---- スマホ（〜767px）---- */ @media (max-width: 767px) { .simv2-hero { padding: 36px 0 28px;} .simv2-hero-inner { flex-direction: column; gap: 20px;} .simv2-hero-text { width: 100%;} .simv2-hero-subcopy { font-size: 1rem;} .simv2-hero-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%;} .simv2-hero-card { min-width: 0; flex: 1 1 calc(50% - 6px); max-width: none;} .simv2-icon-house { width: 110px;} .simv2-icon-calc { width: 70px;} .simv2-hero-icon-wrap { gap: 14px;} .simv2-step-card { padding: 22px 16px; border-radius: 14px;} .simv2-start-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 15px 20px;} .simv2-compare-wrap { grid-template-columns: 1fr;} .simv2-compare-vs { padding: 8px 0; text-align: center;} .simv2-form-submit-btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 1rem;} .simv2-individual-btns { flex-direction: column; align-items: center;} .simv2-btn { width: min(280px,100%);} .simv2-sp-br { display: inline;} .simv2-form-summary-grid { grid-template-columns: 1fr 1fr;} } /* ===================================================== TOPページ 施工の流れ専用 CSS（top-flow-* クラス） 他ページには影響しない。 ===================================================== */ .top-flow-section { background: #f7f8fa;} .top-flow-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; margin-bottom: 1.5rem;} .top-flow-arrow { display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; font-size: 1.5rem; color: #D90000; flex-shrink: 0;} .top-flow-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.07); padding: 1.5rem; text-align: center; position: relative; border-top: 4px solid #e5e7eb; display: flex; flex-direction: column; align-items: center;} .top-flow-card--highlight { border-top: 4px solid #D90000; background: #fff5f5;} .top-flow-badge { display: inline-flex; flex-direction: column; align-items: center; background: #1B4F8A; color: #fff; border-radius: 8px; padding: 4px 12px; margin-bottom: 0.75rem;} .top-flow-badge--red { background: #D90000;} .top-flow-badge-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1;} .top-flow-badge-num { font-size: 1.375rem; font-weight: 900; line-height: 1.1;} .top-flow-free { display: inline-block; background: #FFD500; color: #222; font-size: 0.75rem; font-weight: 900; padding: 2px 10px; border-radius: 999px; margin-bottom: 0.5rem;} .top-flow-title { font-size: 1rem; font-weight: 900; color: #0D3360; margin-bottom: 0.5rem;} .top-flow-desc { font-size: 0.875rem; color: #555; line-height: 1.75; margin-bottom: 0;} .top-flow-note { background: #FFD500; border-radius: 10px; text-align: center; padding: 1rem 1.5rem; margin-top: 0.5rem;} .top-flow-note p { font-size: 1rem; font-weight: 900; color: #222; margin-bottom: 0;} @media (max-width: 767px) { .top-flow-row { grid-template-columns: 1fr; gap: 0;} .top-flow-arrow { transform: rotate(90deg); padding: 0.375rem 0; font-size: 1.25rem;} .top-flow-card { margin-bottom: 0.25rem;} .top-flow-note { padding: 0.875rem 1.25rem;} } /* ===================================================== フローティングコンタクトバー（fcb-*） PC: 非表示 / スマホ: 画面下部固定 ===================================================== */ .floating-contact-bar { display: none;} @media (max-width: 767px) { .floating-contact-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.18); align-items: stretch; height: 58px;} .fcb-message { display: none;} .fcb-buttons { display: flex; flex: 1; align-items: stretch;} .fcb-phone { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #d60000; color: #fff; text-decoration: none; flex: 2; gap: 1px; padding: 4px 6px; min-width: 0;} .fcb-phone__icon { font-size: 1.1rem; line-height: 1;} .fcb-phone__body { line-height: 1;} .fcb-phone__num { font-size: 0.8rem; font-weight: 900; color: #fff; white-space: nowrap;} .fcb-phone__sp-label { font-size: 0.6rem; color: rgba(255,255,255,.85);} .fcb-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; flex: 1; padding: 4px 6px; text-align: center; min-width: 0;} .fcb-btn__main { font-size: 0.7rem; font-weight: 700; white-space: nowrap;} .fcb-btn--visit { background: #1B4F8A; color: #fff;} .fcb-btn--estimate { background: #e85c1a; color: #fff;} .fcb-top { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f0f0f0; border: none; border-left: 1px solid #ddd; cursor: pointer; padding: 4px 10px; flex-shrink: 0; width: 50px;} .fcb-top__arrow { font-size: 1rem; color: #555; line-height: 1;} .fcb-top__label { font-size: 0.6rem; color: #555; margin-top: 2px;} } /* ===================================================== フッター内 複数店舗リスト（footer-stores-*） ===================================================== */ .footer-stores-list { margin-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem;} .footer-stores-title { font-size: 0.75rem; font-weight: 700; color: #888; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem;} .footer-store-entry { margin-bottom: 0.875rem; padding-bottom: 0.875rem; border-bottom: 1px solid #eee;} .footer-store-entry:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none;} .footer-store-entry-name { font-size: 0.875rem; font-weight: 700; color: #222; margin-bottom: 4px;} .footer-store-entry-addr { font-size: 0.75rem; color: #666; line-height: 1.6; margin-bottom: 4px;} .footer-store-entry-tel { font-size: 0.8125rem; margin-bottom: 0;} .footer-store-entry-tel a { color: #d60000; font-weight: 700; text-decoration: none;} .footer-store-entry-tel a:hover { color: #b00000;} /* ===================================================== グローバルナビ ドロップダウン（gnav-dropdown） JS により body 直下に移動して position:fixed で配置 ===================================================== */ .gnav-has-dropdown { cursor: pointer; } .gnav-dropdown { display: none; position: fixed; z-index: 9500; min-width: 180px; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); list-style: none; margin: 0; padding: 8px 0; border-top: 3px solid #d60000; } .gnav-dropdown.is-dd-open { display: block; } .gnav-dropdown li { margin: 0; padding: 0; } .gnav-dropdown a { display: block; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: #222; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; } .gnav-dropdown a:hover { background: #eaf4ff; color: #0052a8; } /* mobile-nav サブメニュー */ .mobile-nav-sub { display: none; list-style: none; margin: 0; padding: 4px 0 8px 16px; border-left: 3px solid #d60000; margin-left: 8px; } .mobile-nav-has-sub.is-sub-open .mobile-nav-sub { display: block; } .mobile-nav-item-with-sub { display: flex; align-items: center; gap: 0; } .mobile-nav-item-with-sub a { flex: 1; } .mobile-nav-sub-toggle { background: none; border: none; color: rgba(255,255,255,.8); font-size: 1rem; cursor: pointer; padding: 8px 12px; flex-shrink: 0; } .mobile-nav-has-sub.is-sub-open .mobile-nav-sub-toggle { color: #ffea00; } .mobile-nav-sub li { padding: 2px 0; } .mobile-nav-sub a { font-size: 0.875rem; color: rgba(255,255,255,.85); text-decoration: none; display: block; padding: 6px 8px; } .mobile-nav-sub a:hover { color: #fff; } /* ============================================== 選ばれる理由ページ FV 背景画像 スコープ: .reason-page .reason-hero のみ 他ページ・他セクションには影響しない ============================================== */ .reason-page .reason-hero { background: linear-gradient(130deg, rgba(31,74,15,0.90) 0%, rgba(77,143,31,0.86) 45%, rgba(94,168,44,0.84) 80%, rgba(121,193,65,0.82) 100%), url('assets/images/works/works-bg-wall-roller.jpg') center center / cover no-repeat; } @media (max-width: 767px) { .reason-page .reason-hero { background: linear-gradient(130deg, rgba(31,74,15,0.93) 0%, rgba(77,143,31,0.90) 45%, rgba(94,168,44,0.88) 80%, rgba(121,193,65,0.87) 100%), url('assets/images/works/works-bg-wall-roller.jpg') center top / cover no-repeat; } } /* ===================================================== ハヤック TOPページデモ 追加スタイル (hyk-*) front-page.php / header.php / footer.php で使用 ===================================================== */ /* ---- テキストロゴ ---- */ .hyk-logo-text { display: flex; flex-direction: column; gap: 3px; text-decoration: none; line-height: 1; } .hyk-logo-brand { font-size: 1.625rem; font-weight: 900; color: #1B4F8A; letter-spacing: 0.04em; } .hyk-logo-catch { font-size: 0.5625rem; font-weight: 700; color: #666; letter-spacing: 0.02em; white-space: nowrap; } @media (max-width: 767px) { .hyk-logo-brand { font-size: 1.25rem; } .hyk-logo-catch { font-size: 0.5rem; } } /* ---- ヘッダー CTAボタン（テキスト版・画像バナー代替） ---- */ .hyk-header-cta-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hyk-header-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; padding: 0 14px; border-radius: 6px; text-decoration: none; font-size: 0.8125rem; font-weight: 900; line-height: 1.3; text-align: center; white-space: nowrap; min-width: 110px; transition: opacity .2s, transform .2s; } .hyk-header-btn:hover { opacity: .88; transform: translateY(-1px); } .hyk-header-btn--visit { background: #1B4F8A; color: #fff; } .hyk-header-btn--visit:hover { color: #fff; } .hyk-header-btn--contact { background: #d60000; color: #fff; } .hyk-header-btn--contact:hover { color: #fff; } /* ---- 信頼実績バー ---- */ .hayack-trust-bar { background: linear-gradient(90deg, #1B4F8A 0%, #0D3360 100%); padding: 18px 0; } .hyk-trust-list { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 12px 4px; list-style: none; margin: 0; padding: 0 16px; } .hyk-trust-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: #fff; min-width: 66px; } .hyk-trust-icon { font-size: 1.375rem; line-height: 1; } .hyk-trust-label { font-size: 0.7rem; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,.9); } .hyk-trust-label strong { color: #ffea00; } @media (min-width: 768px) { .hayack-trust-bar { padding: 22px 0; } .hyk-trust-item { min-width: 100px; } .hyk-trust-icon { font-size: 1.75rem; } .hyk-trust-label { font-size: 0.875rem; } } /* ---- 選ばれる理由 5列グリッド ---- */ @media (min-width: 768px) { .hyk-reasons-grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 767px) { .hyk-reasons-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ---- メニュー・参考価格 ---- */ .hyk-menu-section { background: #f0f6ff; } .hyk-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 2.5rem; } @media (min-width: 768px) { .hyk-menu-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } } .hyk-menu-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 3px solid var(--clr-border); transition: transform .2s, box-shadow .2s; } .hyk-menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .hyk-menu-card--main { border-top: 3px solid #d60000; } .hyk-menu-card-photo { height: 130px; overflow: hidden; } .hyk-menu-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hyk-menu-card-body { padding: 16px 12px 18px; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; } .hyk-menu-card-label { font-size: 0.9375rem; font-weight: 900; color: #0D3360; margin-bottom: 10px; } .hyk-menu-card-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 4px; } .hyk-menu-price-num { font-size: 1.875rem; font-weight: 900; color: #d60000; line-height: 1; } .hyk-menu-price-unit { font-size: 0.8125rem; font-weight: 700; color: #d60000; } .hyk-menu-price--consult { font-size: 0.9375rem; font-weight: 700; color: #555; line-height: 1.5; margin-bottom: 4px; text-align: center; } .hyk-menu-card-tax { font-size: 0.6875rem; color: #888; margin-bottom: 4px; } .hyk-menu-card-note { font-size: 0.75rem; color: #666; line-height: 1.5; margin-top: auto; } /* ---- 初めての方へ ---- */ .hyk-first-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .hyk-first-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .hyk-first-card { background: #fff; border-radius: 12px; padding: 28px 22px 24px; box-shadow: var(--shadow); border-top: 4px solid var(--clr-primary); display: flex; flex-direction: column; gap: 12px; } .hyk-first-num { font-size: 2.25rem; font-weight: 900; color: #e5e7eb; line-height: 1; } .hyk-first-title { font-size: 1.0625rem; font-weight: 900; color: #0D3360; line-height: 1.4; margin: 0; } .hyk-first-text { font-size: 0.9rem; color: #555; line-height: 1.8; flex: 1; margin: 0; } /* ショールーム展示リスト */ .hyk-showroom-feature-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hyk-showroom-feature-list li { font-size: 0.9375rem; color: #333; font-weight: 600; padding: 8px 14px; background: #eaf4ff; border-radius: 6px; line-height: 1.5; } /* ---- 最終CTA マルチボタン ---- */ .hyk-cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; width: 100%; } .hyk-cta-tel { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.96); border-radius: 12px; padding: 14px 24px; text-decoration: none; width: 100%; max-width: 440px; box-shadow: 0 4px 18px rgba(0,0,0,.22); transition: transform .2s, box-shadow .2s; } .hyk-cta-tel:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.3); color: inherit; } .hyk-cta-tel-icon { font-size: 2rem; color: #d60000; flex-shrink: 0; line-height: 1; } .hyk-cta-tel-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .hyk-cta-tel-label { font-size: 0.6875rem; color: #555; font-weight: 600; } .hyk-cta-tel-num { font-size: 1.625rem; font-weight: 900; color: #d60000; line-height: 1; letter-spacing: 0.02em; } .hyk-cta-tel-hours { font-size: 0.6875rem; color: #888; } .hyk-btn-line { background: #06c755; border-color: #06c755; color: #fff; } .hyk-btn-line:hover { background: #05a847; border-color: #05a847; color: #fff; } .cta-section .btn-outline-white, .cta-section .hyk-btn-line { width: 100%; max-width: 440px; } @media (min-width: 768px) { .hyk-cta-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; } .hyk-cta-tel { width: auto; } .cta-section .btn-outline-white, .cta-section .hyk-btn-line { width: auto; max-width: none; min-width: 220px; } } /* ================================================================== 新FVセクション（hyk-fv-* 完全独立スタイル） 旧スライダークラス（fv-slider / fv-slide 等）は一切使わない ================================================================== */ .hyk-fv { background: linear-gradient(140deg, #EBF4FF 0%, #F0F8FF 45%, #FFFFFF 100%); border-bottom: 3px solid #1B4F8A; padding: 40px 0 48px; } .hyk-fv-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 48px; } .hyk-fv-left { flex: 1; min-width: 0; } /* 信頼タグ */ .hyk-fv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .hyk-fv-tag { font-size: 0.75rem; font-weight: 700; color: #1B4F8A; background: #fff; border: 1.5px solid #B8D4F0; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } /* メインコピー */ .hyk-fv-title { font-size: clamp(1.625rem, 3.5vw, 2.5rem); font-weight: 900; color: #0D3360; line-height: 1.3; margin: 0 0 16px; } /* サブコピー */ .hyk-fv-sub { font-size: 1rem; color: #444; line-height: 1.85; margin: 0 0 24px; } /* 電話番号ボックス */ .hyk-fv-tel-box { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding: 14px 20px; background: #fff; border-radius: 10px; border-left: 4px solid #d60000; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } .hyk-fv-tel { font-size: 1.875rem; font-weight: 900; color: #d60000; text-decoration: none; letter-spacing: 0.02em; line-height: 1; } .hyk-fv-tel:hover { color: #b00000; } .hyk-fv-tel-hours { font-size: 0.8125rem; color: #666; font-weight: 500; } /* CTAボタン群 */ .hyk-fv-btns { display: flex; flex-direction: column; gap: 10px; } .hyk-fv-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 20px; border-radius: 8px; font-size: 1rem; font-weight: 900; text-decoration: none; text-align: center; border: 2px solid transparent; transition: transform .18s, box-shadow .18s, background .18s; } .hyk-fv-btn:hover { transform: translateY(-2px); } .hyk-fv-btn-tel { background: #d60000; color: #fff; border-color: #d60000; box-shadow: 0 4px 16px rgba(214, 0, 0, .32); } .hyk-fv-btn-tel:hover { color: #fff; box-shadow: 0 6px 22px rgba(214, 0, 0, .42); } .hyk-fv-btn-contact { background: #1B4F8A; color: #fff; border-color: #1B4F8A; box-shadow: 0 4px 14px rgba(27, 79, 138, .25); } .hyk-fv-btn-contact:hover { color: #fff; background: #0D3360; border-color: #0D3360; } .hyk-fv-btn-visit { background: #fff; color: #1B4F8A; border-color: #1B4F8A; } .hyk-fv-btn-visit:hover { background: #EBF4FF; color: #1B4F8A; } /* 右カラム: 住宅写真プレースホルダー */ .hyk-fv-right { flex-shrink: 0; width: 420px; } .hyk-fv-photo-box { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #B8D4F0 0%, #8CB8E0 50%, #6699CC 100%); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 32px rgba(27, 79, 138, .18); border: 3px solid #fff; } .hyk-fv-photo-icon { font-size: 3.5rem; line-height: 1; } .hyk-fv-photo-label { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.22); } .hyk-fv-photo-sub { font-size: 0.8125rem; color: rgba(255,255,255,.85); margin: 0; } /* PC */ @media (min-width: 768px) { .hyk-fv { padding: 60px 0 68px; min-height: 520px; display: flex; align-items: center; } .hyk-fv-btns { flex-direction: row; gap: 12px; } .hyk-fv-btn { flex: 1; } } /* SP */ @media (max-width: 767px) { .hyk-fv { padding: 36px 0 44px; } .hyk-fv-wrap { flex-direction: column; gap: 28px; } .hyk-fv-right { width: 100%; max-width: 360px; margin: 0 auto; } .hyk-fv-tel { font-size: 1.625rem; } } /* ---- 旧ヒーロースタイル（hyk-hero-*）は残すが不使用 ---- */ /* ---- 静的ファーストビュー（ヒーローセクション） ---- */ .hyk-hero { position: relative; background-color: #0D3360; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 400px; display: flex; align-items: center; } .hyk-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,24,60,.78) 0%, rgba(13,40,80,.62) 55%, rgba(13,40,80,.45) 100% ); z-index: 0; } .hyk-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 56px var(--container-pad); } .hyk-hero-content { max-width: 640px; } .hyk-hero-label { display: inline-block; font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,.88); letter-spacing: 0.1em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 5px 16px; border-radius: 999px; margin-bottom: 18px; backdrop-filter: blur(4px); } .hyk-hero-title { font-size: clamp(1.5rem, 5vw, 2.625rem); font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 16px; text-shadow: 0 2px 14px rgba(0,0,0,.5); } .hyk-hero-sub { font-size: clamp(0.9375rem, 2vw, 1.0625rem); color: rgba(255,255,255,.9); line-height: 1.85; margin-bottom: 32px; text-shadow: 0 1px 8px rgba(0,0,0,.38); } .hyk-hero-btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .hyk-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 24px; border-radius: 8px; font-size: 1rem; font-weight: 900; text-decoration: none; line-height: 1; transition: transform .2s, box-shadow .2s, opacity .2s; white-space: nowrap; border: 2px solid transparent; } .hyk-hero-btn:hover { transform: translateY(-2px); } /* 電話（赤） */ .hyk-hero-btn--tel { background: #d60000; color: #fff; border-color: #d60000; font-size: 1.0625rem; box-shadow: 0 4px 18px rgba(214,0,0,.5); } .hyk-hero-btn--tel:hover { color: #fff; box-shadow: 0 8px 26px rgba(214,0,0,.55); } /* 無料診断（白） */ .hyk-hero-btn--contact { background: #fff; color: #1B4F8A; border-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.28); } .hyk-hero-btn--contact:hover { color: #1B4F8A; } /* 来店予約（透明） */ .hyk-hero-btn--visit { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.65); backdrop-filter: blur(4px); } .hyk-hero-btn--visit:hover { background: rgba(255,255,255,.22); color: #fff; } /* PC */ @media (min-width: 768px) { .hyk-hero { min-height: 520px; } .hyk-hero-inner { padding: 80px var(--container-pad); } .hyk-hero-btns { flex-direction: row; gap: 14px; align-items: center; } .hyk-hero-btn { padding: 16px 32px; } .hyk-hero-btn--tel { font-size: 1.125rem; padding: 18px 36px; } } /* ================================================================ hayack-hero — HAYACK TOPページ FV 完全独立スタイル v3 旧クラス（fv-slider / fv-slide / hyk-fv / hyk-hero 等）との 干渉ゼロ。background-image は一切使わない。 ================================================================ */ /* ---- セクション外枠 ---- */ .hayack-hero { background: linear-gradient(150deg, #E8F3FF 0%, #D4E9FF 30%, #EEF7FF 65%, #FFFFFF 100%); border-bottom: 4px solid #1B4F8A; padding: 48px 0 56px; } /* ---- 内側レイアウト: 左右2カラム ---- */ .hayack-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 48px; } /* ---- 左カラム ---- */ .hayack-hero-text { flex: 1; min-width: 0; } /* 信頼タグリスト */ .hayack-hero-tags { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .hayack-hero-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: #1B4F8A; background: #ffffff; border: 1.5px solid #9BBFDF; border-radius: 999px; padding: 5px 14px; white-space: nowrap; } /* メインコピー */ .hayack-hero-title { font-size: clamp(1.625rem, 3.5vw, 2.5rem); font-weight: 900; color: #0D3360; line-height: 1.3; margin: 0 0 16px; padding: 0; background: none; border: none; } /* サブコピー */ .hayack-hero-sub { font-size: 1rem; color: #445566; line-height: 1.9; margin: 0 0 20px; padding: 0; background: none; } /* 会社情報バッジ */ .hayack-hero-company { margin-bottom: 20px; padding: 12px 16px; background: rgba(27, 79, 138, .07); border-left: 3px solid #1B4F8A; border-radius: 0 8px 8px 0; } .hayack-hero-company-name { font-size: 0.9375rem; font-weight: 700; color: #0D3360; margin: 0 0 4px; } .hayack-hero-company-info { font-size: 0.8125rem; color: #556677; margin: 0; } /* 電話番号ボックス */ .hayack-hero-tel-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 14px 20px; background: #ffffff; border-left: 4px solid #d60000; border-radius: 0 10px 10px 0; box-shadow: 0 2px 12px rgba(0, 0, 0, .07); } .hayack-hero-tel { display: flex; align-items: center; gap: 8px; text-decoration: none; } .hayack-hero-tel-icon { font-size: 1.5rem; color: #d60000; line-height: 1; } .hayack-hero-tel-num { font-size: 2rem; font-weight: 900; color: #d60000; letter-spacing: 0.02em; line-height: 1; } .hayack-hero-tel:hover .hayack-hero-tel-num { color: #a80000; } .hayack-hero-tel-hours { font-size: 0.8125rem; color: #667788; font-weight: 500; } /* CTA ボタン群 */ .hayack-hero-cta { display: flex; flex-direction: column; gap: 10px; } .hayack-hero-btn { display: flex; align-items: center; justify-content: center; padding: 15px 20px; border-radius: 8px; font-size: 1rem; font-weight: 900; text-decoration: none; text-align: center; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; line-height: 1; } .hayack-hero-btn:hover { transform: translateY(-2px); } /* 電話（赤） */ .hayack-hero-btn-tel { background: #d60000; color: #ffffff; border-color: #d60000; box-shadow: 0 4px 16px rgba(214, 0, 0, .30); } .hayack-hero-btn-tel:hover { color: #ffffff; box-shadow: 0 6px 22px rgba(214, 0, 0, .40); } /* 無料診断（紺） */ .hayack-hero-btn-contact { background: #1B4F8A; color: #ffffff; border-color: #1B4F8A; box-shadow: 0 4px 14px rgba(27, 79, 138, .25); } .hayack-hero-btn-contact:hover { color: #ffffff; background: #0D3360; border-color: #0D3360; } /* 来店予約（白抜き） */ .hayack-hero-btn-visit { background: #ffffff; color: #1B4F8A; border-color: #1B4F8A; } .hayack-hero-btn-visit:hover { background: #EBF4FF; color: #0D3360; } /* ---- 右カラム: 写真プレースホルダー ---- */ .hayack-hero-photo { flex-shrink: 0; width: 440px; aspect-ratio: 4 / 3; background: linear-gradient(145deg, #B8D4F0 0%, #7EAED4 55%, #5A93C0 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 24px; box-shadow: 0 10px 40px rgba(27, 79, 138, .18); border: 4px solid #ffffff; text-align: center; } .hayack-hero-photo-label { font-size: 1rem; font-weight: 700; color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); margin: 0; line-height: 1.7; } /* ---- PC (768px+) ---- */ @media (min-width: 768px) { .hayack-hero { padding: 60px 0 68px; min-height: 520px; display: flex; align-items: center; } .hayack-hero-cta { flex-direction: row; gap: 12px; } .hayack-hero-btn { flex: 1; } } /* ---- SP (〜767px) ---- */ @media (max-width: 767px) { .hayack-hero { padding: 36px 0 44px; } .hayack-hero-inner { flex-direction: column; gap: 32px; padding: 0 20px; } .hayack-hero-photo { width: 100%; max-width: 400px; margin: 0 auto; } .hayack-hero-tel-num { font-size: 1.75rem; } } /* ---------- 19. ショールーム（archive-showroom.php / single-showroom.php） ---------- */ .showroom-archive-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } .showroom-archive-card { display: block; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.16); transition: transform 0.22s ease, box-shadow 0.22s ease; text-decoration: none; color: inherit; } .showroom-archive-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.22); color: inherit; } .showroom-archive-card-photo { aspect-ratio: 16 / 9; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .showroom-archive-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .showroom-archive-card-photo-empty { font-size: 0.8125rem; color: #aaa; } .showroom-archive-card-body { padding: 20px 22px 24px; } .showroom-archive-card-name { font-size: 1.125rem; font-weight: 900; color: #111; margin-bottom: 8px; } /* 店舗紹介文（一覧カード）。既存の住所行と同じ字送りに揃える。 */ .showroom-archive-card-intro { font-size: 0.875rem; color: #444; line-height: 1.7; margin-bottom: 10px; } .showroom-archive-card-address { font-size: 0.875rem; color: #555; line-height: 1.7; margin-bottom: 10px; } .showroom-archive-card-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: #333; margin-bottom: 16px; } .showroom-archive-card-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border-radius: 8px; background: var(--clr-primary); color: #fff; font-size: 0.875rem; font-weight: 700; } /* 店舗写真（外観・内観） */ .showroom-single-photos { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 900px; margin: 0 auto; } .showroom-single-photo { margin: 0; } .showroom-single-photo img { width: 100%; height: auto; border-radius: 12px; display: block; } .showroom-single-photo figcaption { text-align: center; font-size: 0.8125rem; color: var(--clr-muted); margin-top: 8px; } @media (min-width: 768px) { .showroom-archive-grid { grid-template-columns: repeat(2, 1fr); } .showroom-single-photos { grid-template-columns: 1fr 1fr; } .showroom-single-photos--single { grid-template-columns: 1fr; max-width: 600px; } } @media (min-width: 1024px) { .showroom-archive-grid { grid-template-columns: repeat(3, 1fr); } } /* 来店相談予約ページ: 店舗情報直下の「ショールーム一覧を見る」リンクを区切り線でつなげる */ .sr-store .section-more { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--clr-border); } /* 404ページ（.tsk-notfound）: 共通 .btn は white-space:nowrap のため、 「☎ 電話で相談する 0120-17-8893」ボタンが320px幅で画面外へはみ出し横スクロールが発生していた。 共通クラスは他ページ全体に影響するため変更せず、404ページ内に限定して折返しを許可する。 box-sizing:border-box はサイト全体の * リセットで適用済み */ .tsk-notfound .btn { max-width: 100%; white-space: normal; line-height: 1.4; text-align: center; } /* ---------- 20. 工事メニュー・参考価格（construction_menu） ---------- 配色ルール: 緑=ブランド/通常UI、オレンジ=軽い強調、赤=CV導線限定。 本セクションのFAQ等は新規実装のため、赤系(#d60000)ではなく このルールに沿った緑/オレンジで設計する。 */ /* カテゴリナビ（アーカイブページ上部） */ .cm-category-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; } .cm-category-nav a { display: inline-block; padding: 8px 20px; background: #fff; border: 2px solid var(--clr-accent); border-radius: 999px; font-size: 0.875rem; font-weight: 700; color: var(--clr-accent); text-decoration: none; transition: background var(--transition), color var(--transition); } .cm-category-nav a:hover, .cm-category-nav a.is-active { background: var(--clr-accent); color: #fff; } /* メニューカードグリッド（アーカイブ・カテゴリ一覧共通） */ .cm-menu-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; } @media (min-width: 768px) { .cm-menu-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cm-menu-grid { grid-template-columns: repeat(3, 1fr); } } .cm-menu-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.16); transition: transform 0.22s ease, box-shadow 0.22s ease; text-decoration: none; color: inherit; } .cm-menu-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.22); color: inherit; } .cm-menu-card-img { background: #f0f0f0; aspect-ratio: 4 / 3; overflow: hidden; } .cm-menu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-menu-card-img--empty { display: flex; align-items: center; justify-content: center; color: var(--clr-muted); font-size: 0.8125rem; background: var(--hayack-green-light, #eef8e5); } .cm-menu-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .cm-menu-card-category { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: var(--clr-accent); letter-spacing: 0.05em; margin-bottom: 6px; } .cm-menu-card-title { font-size: 1.0625rem; font-weight: 900; color: var(--hayack-green-dark); margin-bottom: 8px; line-height: 1.4; } .cm-menu-card-desc { font-size: 0.875rem; color: var(--clr-muted); line-height: 1.7; margin-bottom: 12px; } .cm-menu-card-price { font-size: 0.8125rem; font-weight: 700; color: var(--clr-text); margin-top: auto; margin-bottom: 4px; } .cm-menu-card-price strong { font-size: 1.375rem; color: var(--hayack-green-dark); margin-right: 2px; } /* 個別メニューページ: 参考価格カード */ .cm-price-card { background: var(--hayack-green-light, #eef8e5); border: 1px solid var(--hayack-green-dark); border-radius: 12px; padding: 1.75rem; text-align: center; margin-bottom: 2rem; } .cm-price-card-label { font-size: 0.8125rem; font-weight: 700; color: var(--hayack-green-dark); margin-bottom: 0.5rem; } .cm-price-card-value { font-size: 2.25rem; font-weight: 900; color: var(--hayack-green-dark); line-height: 1; } .cm-price-card-unit { font-size: 1.125rem; font-weight: 700; color: var(--hayack-green-dark); margin-left: 2px; } .cm-price-card-consult { font-size: 1.25rem; font-weight: 900; color: var(--hayack-green-dark); line-height: 1.5; } .cm-price-card-note { font-size: 0.8125rem; color: var(--clr-muted); margin-top: 0.75rem; line-height: 1.7; } /* 含まれる／含まれない工事内容リスト */ .cm-check-list { list-style: none; margin: 0; padding: 0; } .cm-check-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.625rem; font-size: 0.9375rem; line-height: 1.6; color: var(--clr-text); } .cm-check-list--included li::before { content: "✓"; position: absolute; left: 0; color: var(--hayack-green-dark); font-weight: 900; } .cm-check-list--excluded li::before { content: "✕"; position: absolute; left: 0; color: var(--clr-muted); font-weight: 900; } /* 注記ボックス（参考価格の注意書き・追加費用ケース等） */ .cm-note-box { background: #fff8f0; border-left: 4px solid var(--clr-accent); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--clr-text); line-height: 1.8; } /* FAQ（緑Q・オレンジA。CVではないため赤は使用しない） */ .cm-faq-item { border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 12px; } .cm-faq-question { width: 100%; background: #f7faf5; border: none; padding: 1.125rem 1.375rem; display: flex; align-items: center; gap: 0.875rem; cursor: pointer; text-align: left; transition: background 0.2s; } .cm-faq-q-mark { flex-shrink: 0; width: 28px; height: 28px; background: var(--hayack-green-dark); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; } .cm-faq-q-text { font-weight: 700; color: var(--clr-text); } .cm-faq-icon { margin-left: auto; flex-shrink: 0; font-size: 1.25rem; font-weight: 700; color: var(--hayack-green-dark); line-height: 1; width: 24px; text-align: center; } .cm-faq-answer { display: none; gap: 0.875rem; padding: 1rem 1.375rem 1.125rem; align-items: flex-start; } .cm-faq-item--open .cm-faq-answer { display: flex; } .cm-faq-a-mark { flex-shrink: 0; width: 28px; height: 28px; background: var(--clr-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; } .cm-faq-a-text { font-size: 0.9375rem; line-height: 1.75; color: var(--clr-text); } @media (max-width: 767px) { .cm-price-card-value { font-size: 1.875rem; } } /* ---------- 21. サービスページ共通ヘルパー（rain-leak-page / exterior-painting-page / roof-painting-page / waterproof-page） ---------- * .rl- プレフィックスは元々 rain-leak-page 用に追加したが、構造が同じ * exterior-painting-page / roof-painting-page / waterproof-page でも共通利用する（既存ページの他クラスには影響しない）。 */ .rain-leak-page .rl-hero-ctas, .exterior-painting-page .rl-hero-ctas, .roof-painting-page .rl-hero-ctas, .waterproof-page .rl-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; } .rain-leak-page .rl-hero-cta-green, .exterior-painting-page .rl-hero-cta-green, .roof-painting-page .rl-hero-cta-green, .waterproof-page .rl-hero-cta-green { background: var(--hayack-green-dark); color: #fff; } .rain-leak-page .rl-hero-cta-green:hover, .exterior-painting-page .rl-hero-cta-green:hover, .roof-painting-page .rl-hero-cta-green:hover, .waterproof-page .rl-hero-cta-green:hover { background: #1f4a0f; color: #fff; } .rain-leak-page .rl-flow-steps, .exterior-painting-page .rl-flow-steps, .roof-painting-page .rl-flow-steps, .waterproof-page .rl-flow-steps { display: flex; flex-direction: column; gap: 0; max-width: 640px; margin: 0 auto 1rem; } .rain-leak-page .rl-flow-arrow, .exterior-painting-page .rl-flow-arrow, .roof-painting-page .rl-flow-arrow, .waterproof-page .rl-flow-arrow { text-align: center; color: var(--hayack-green-dark); font-size: 1.25rem; line-height: 1; margin: 0.125rem 0; } @media (max-width: 767px) { .rain-leak-page .rl-hero-ctas, .exterior-painting-page .rl-hero-ctas, .roof-painting-page .rl-hero-ctas, .waterproof-page .rl-hero-ctas { flex-direction: column; align-items: stretch; } .rain-leak-page .rl-hero-ctas .works-cta-btn, .exterior-painting-page .rl-hero-ctas .works-cta-btn, .roof-painting-page .rl-hero-ctas .works-cta-btn, .waterproof-page .rl-hero-ctas .works-cta-btn { text-align: center; } } .rain-leak-page .rl-diagnosis-card-img, .exterior-painting-page .rl-diagnosis-card-img, .roof-painting-page .rl-diagnosis-card-img, .waterproof-page .rl-diagnosis-card-img, .roof-repair-page .rl-diagnosis-card-img { margin: -2rem -1.5rem 1.25rem; border-radius: 12px 12px 0 0; overflow: hidden; } .rain-leak-page .rl-diagnosis-card-img img, .exterior-painting-page .rl-diagnosis-card-img img, .roof-painting-page .rl-diagnosis-card-img img, .waterproof-page .rl-diagnosis-card-img img, .roof-repair-page .rl-diagnosis-card-img img { width: 100%; height: 140px; object-fit: cover; display: block; } /* ---------- 22. TOPページ 無料診断・お見積りCTAボタン（hayack-fv-ctabar__btn--red） ---------- * 対応するCSS定義が存在せず、既定のリンク色（青）で表示されていたため追加。 * 既存の赤CTA配色（--hayack-cta-red / --hayack-white、hayack-demo.cssで定義済み）に合わせる。 * home.php 内でのみ使用される単一クラスのため、他ページ・他クラスへの影響はない。 */ .hayack-fv-ctabar__btn--red { padding: 1rem 2.5rem; background: var(--hayack-cta-red); color: var(--hayack-white) !important; font-weight: 900; border-radius: 8px; text-decoration: none; transition: opacity 0.2s ease, transform 0.18s ease; } .hayack-fv-ctabar__btn--red:visited { color: var(--hayack-white) !important; } .hayack-fv-ctabar__btn--red:hover, .hayack-fv-ctabar__btn--red:focus { color: var(--hayack-white) !important; opacity: 0.88; transform: translateY(-1px); } /* ---------- 20. スタッフ・職人紹介（archive-staff.php / single-staff.php） ---------- */ .staff-archive-hero { background: var(--clr-primary); color: #fff; padding: 40px 0; text-align: center; } .staff-archive-hero__title { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; } .staff-archive-hero__sub { font-size: 0.9375rem; opacity: 0.92; } .staff-archive-section { padding: 48px 0; } .staff-archive-empty { text-align: center; color: var(--clr-muted); padding: 32px 0; } /* カード列数で写真の表示面積を調整する（写真だけを縦にcropすると顔が逆に大きく見えるため、 aspect-ratio 1/1 は維持したままカード幅を狭くして縮小する）。 SP=2列 / タブレット=3列 / PC=4列。 */ .staff-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .staff-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.16); } .staff-card__photo { aspect-ratio: 1 / 1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .staff-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .staff-card__no-photo-icon { font-size: 2.5rem; color: #ccc; } .staff-card__body { padding: 12px 8px 16px; text-align: center; } .staff-card__role { font-size: 0.8125rem; color: var(--clr-muted); margin-bottom: 2px; } .staff-card__name { font-size: 1.125rem; font-weight: 900; color: #111; margin-bottom: 2px; } /* 氏名を詳細ページへのリンクにする。見た目は従来の見出しのまま（青字・下線にしない）、 hover / キーボードフォーカス時だけリンクだと分かるようにする。 */ .staff-card__name a { color: inherit; text-decoration: none; } .staff-card__name a:hover { color: var(--clr-primary); text-decoration: underline; } .staff-card__name a:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; border-radius: 3px; } .staff-card__nickname, .staff-card__one-word { font-size: 0.875rem; color: var(--clr-primary); font-weight: 700; margin-bottom: 8px; } .staff-card__dept { font-size: 0.8125rem; color: #555; margin-bottom: 8px; } .staff-card__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; border-radius: 8px; background: var(--clr-primary); color: #fff !important; font-size: 0.875rem; font-weight: 700; text-decoration: none; margin-top: 4px; } .staff-archive-cta, .staff-single-cta { background: #f7f8fa; padding: 40px 0; text-align: center; } .staff-archive-cta__text, .staff-single-cta__text { font-size: 0.9375rem; color: #333; margin-bottom: 16px; } .staff-archive-cta__btns, .staff-single-cta__btns { display: flex; flex-direction: column; gap: 12px; align-items: center; } .staff-archive-cta__btn, .staff-single-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0.75rem 2rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; width: 100%; max-width: 320px; } .staff-archive-cta__btn--main, .staff-single-cta__btn--main { background: var(--clr-primary); color: #fff !important; } .staff-archive-cta__btn--tel, .staff-single-cta__btn--tel { background: #fff; color: var(--clr-primary) !important; border: 2px solid var(--clr-primary); } .staff-single-hero { background: var(--clr-primary); color: #fff; padding: 40px 0; text-align: center; } .staff-single-hero__label { font-size: 0.8125rem; opacity: 0.85; letter-spacing: 0.1em; margin-bottom: 4px; } .staff-single-hero__role { font-size: 0.9375rem; opacity: 0.92; margin-bottom: 4px; } .staff-single-hero__name { font-size: 1.75rem; font-weight: 900; margin-bottom: 4px; } .staff-single-hero__nickname { font-size: 1rem; opacity: 0.92; } .staff-single-section { padding: 48px 0; } .staff-single-inner { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; } .staff-single-photo { aspect-ratio: 1 / 1; background: #f0f0f0; border-radius: 16px; overflow: hidden; } .staff-single-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .staff-single-no-photo { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: #ccc; } .staff-single-one-word { text-align: center; font-size: 1rem; font-weight: 700; color: var(--clr-primary); margin-top: 12px; } .staff-single-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .staff-single-table th, .staff-single-table td { padding: 12px 16px; border-bottom: 1px solid #eee; text-align: left; font-size: 0.9375rem; } .staff-single-table th { width: 8em; background: #f7f8fa; color: #555; font-weight: 700; white-space: nowrap; } .staff-single-message { background: #f7f8fa; border-radius: 12px; padding: 20px; } .staff-single-message__heading { font-weight: 700; color: var(--clr-primary); margin-bottom: 8px; } .staff-single-message__body { font-size: 0.9375rem; line-height: 1.8; color: #333; } .staff-single-back { text-align: center; margin-top: 32px; } .staff-single-back__btn { display: inline-flex; align-items: center; gap: 6px; color: var(--clr-primary); font-weight: 700; text-decoration: none; } @media (min-width: 768px) { .staff-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .staff-card__body { padding: 16px 14px 20px; } .staff-card__btn { padding: 0.55rem 1.5rem; } .staff-archive-cta__btns, .staff-single-cta__btns { flex-direction: row; justify-content: center; } .staff-archive-cta__btn, .staff-single-cta__btn { width: auto; } .staff-single-inner { grid-template-columns: 320px 1fr; align-items: start; } } @media (min-width: 1024px) { .staff-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .staff-card__body { padding: 18px 16px 22px; } } /* ---------- 21. 屋根カバー工法（page-roof-cover.php） ---------- */ /* バナー画像（屋根カバー工法とは／検討します／メリット／注意点の4セクションで共通使用） */ .roof-cover-page .roof-cover-banner { display: block; width: 100%; max-width: 900px; margin-inline: auto; } .roof-cover-page .roof-cover-banner__image { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* 確認ポイント：写真付きカード */ .roof-cover-page .roof-cover-checkpoints__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .roof-cover-page .roof-cover-checkpoints__card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .roof-cover-page .roof-cover-checkpoints__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; } .roof-cover-page .roof-cover-checkpoints__image { display: block; width: 100%; height: 100%; object-fit: cover; } .roof-cover-page .roof-cover-checkpoints__body { padding: 18px 20px 22px; } .roof-cover-page .roof-cover-checkpoints__title { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin: 0 0 8px; } .roof-cover-page .roof-cover-checkpoints__text { font-size: 0.875rem; line-height: 1.75; color: var(--clr-muted); margin: 0; } @media (min-width: 768px) { .roof-cover-page .roof-cover-checkpoints__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .roof-cover-page .roof-cover-checkpoints__grid { grid-template-columns: repeat(3, 1fr); } /* 7件など3の倍数+1件の場合のみ、最終行の1件を中央寄せする */ .roof-cover-page .roof-cover-checkpoints__grid > :last-child:nth-child(3n+1) { grid-column: 2; } } .roof-cover-page .roof-cover-note { max-width: 680px; margin: 16px auto 0; font-size: 0.8125rem; color: var(--clr-muted); text-align: center; } .roof-cover-page .roof-cover-compare-table-wrap { max-width: 780px; margin: 0 auto; overflow-x: auto; } .roof-cover-page .roof-cover-compare-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .roof-cover-page .roof-cover-compare-table th, .roof-cover-page .roof-cover-compare-table td { padding: 12px 14px; border: 1px solid var(--clr-border); text-align: left; vertical-align: top; } .roof-cover-page .roof-cover-compare-table thead th { background: var(--clr-primary); color: #fff; } .roof-cover-page .roof-cover-compare-table tbody th { background: #f7f8fa; white-space: nowrap; } @media (max-width: 600px) { .roof-cover-page .roof-cover-compare-table { font-size: 0.8125rem; } .roof-cover-page .roof-cover-compare-table th, .roof-cover-page .roof-cover-compare-table td { padding: 8px 10px; } } /* ---------- 22. 屋根修理・板金修理（page-roof-repair.php） ---------- */ .roof-repair-page .roof-repair-text-block { max-width: 720px; margin: 0 auto; font-size: 0.9375rem; line-height: 1.8; color: var(--clr-text); } .roof-repair-page .roof-repair-text-block p { margin-bottom: 1rem; } .roof-repair-page .roof-repair-note { max-width: 680px; margin: 16px auto 0; font-size: 0.8125rem; color: var(--clr-muted); text-align: center; } .roof-repair-page .roof-repair-compare-table-wrap { max-width: 780px; margin: 0 auto; overflow-x: auto; } .roof-repair-page .roof-repair-compare-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .roof-repair-page .roof-repair-compare-table th, .roof-repair-page .roof-repair-compare-table td { padding: 12px 14px; border: 1px solid var(--clr-border); text-align: left; vertical-align: top; } .roof-repair-page .roof-repair-compare-table thead th { background: var(--clr-primary); color: #fff; } .roof-repair-page .roof-repair-compare-table tbody th { background: #f7f8fa; white-space: nowrap; } @media (max-width: 600px) { .roof-repair-page .roof-repair-compare-table { font-size: 0.8125rem; } .roof-repair-page .roof-repair-compare-table th, .roof-repair-page .roof-repair-compare-table td { padding: 8px 10px; } } /* ---------- 23. 選ばれる理由ページ強化（page-reason.php） ---------- */ .reason-page .reason-intro-text { max-width: 720px; margin: 0 auto; font-size: 0.9375rem; line-height: 1.8; color: var(--clr-text); text-align: center; } .reason-page .reason-five-link { margin-top: 12px; } .reason-page .reason-five-link a { font-size: 0.875rem; font-weight: 600; color: var(--clr-primary); text-decoration: none; } .reason-page .reason-five-link a:hover { text-decoration: underline; } /* ---------- 24. 選ばれる理由ページ ヒーローバナー（画像差し替え） ---------- */ .reason-page .reason-hero.reason-hero-banner { background: none; padding: 0 0 28px; } .reason-hero-banner__picture { display: block; width: 100%; line-height: 0; } .reason-hero-banner__image { display: block; width: 100%; height: auto; } .reason-hero-banner__ctas { margin-top: 20px; } @media (max-width: 767px) { .reason-hero-banner__ctas { margin-top: 16px; } } /* ---------- 25. 会社概要ページ ヒーローバナー（画像差し替え） ---------- */ .works-hero.company-hero-banner { background: none; padding: 0; overflow: visible; } /* overflow:visible化により基底 .works-hero の装飾円(::before/::after)がビューポート外へはみ出し 横スクロールの原因となるため、他のバナー差し替え系（works-hero-banner等）と同様に非表示にする */ .works-hero.company-hero-banner::before, .works-hero.company-hero-banner::after { content: none; } .company-hero-banner__picture { display: block; width: 100%; line-height: 0; } .company-hero-banner__image { display: block; width: 100%; height: auto; } /* ---------- 26. お問い合わせ／施工事例／ショールーム／工事メニュー ページ ヒーローバナー（画像差し替え） 共通方針：picture/imgはwidth:100%; height:auto; display:block; でトリミングせず全体を見せる ---------- */ .contact-hero.contact-hero-banner { background: none; padding: 0 0 28px; overflow: visible; text-align: initial; color: inherit; } /* overflow:visible化により基底 .contact-hero の装飾円(::before/::after)がビューポート外へはみ出し 横スクロールの原因となるため、他のバナー差し替え系（works-hero-banner等）と同様に非表示にする */ .contact-hero.contact-hero-banner::before, .contact-hero.contact-hero-banner::after { content: none; } .contact-hero-banner__picture { display: block; width: 100%; line-height: 0; } .contact-hero-banner__image { display: block; width: 100%; height: auto; } .works-hero.works-hero-banner, .works-hero.showroom-hero-banner, .works-hero.price-hero-banner { background: none; padding: 0; overflow: visible; } .works-hero.works-hero-banner::before, .works-hero.works-hero-banner::after, .works-hero.showroom-hero-banner::before, .works-hero.showroom-hero-banner::after, .works-hero.price-hero-banner::before, .works-hero.price-hero-banner::after { content: none; } .works-hero-banner__picture, .showroom-hero-banner__picture, .price-hero-banner__picture { display: block; width: 100%; line-height: 0; } .works-hero-banner__image, .showroom-hero-banner__image, .price-hero-banner__image { display: block; width: 100%; height: auto; } /* ---------- 26-1. 雨漏りページ ヒーローバナー（画像差し替え・rain-leak-page専用スコープで他ページへ影響しない） ---------- */ .rain-leak-page .works-hero.rain-leak-hero-banner { background: none; padding: 0 0 2.5rem; overflow: visible; } .rain-leak-page .works-hero.rain-leak-hero-banner::before, .rain-leak-page .works-hero.rain-leak-hero-banner::after { content: none; } .rain-leak-hero-banner__picture { display: block; width: 100%; line-height: 0; } .rain-leak-hero-banner__image { display: block; width: 100%; height: auto; } .rain-leak-hero-banner__ctas { margin-top: 1.75rem; } /* ---------- 26-2. 雨漏りページ セクション見出し画像バナー（見出し・導入文の役割を差し替え） ---------- */ .rl-section-banner { margin-bottom: 0.75rem; } .rl-section-banner__image { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 12px; } /* バナー画像のみのセクションは前後の余白が間延びして見えるため、 通常セクション（padding:4rem 0 5rem）より上下パディングを詰める。画像サイズ・画質は変更しない。 */ .rain-leak-page .works-list-section.rl-banner-section { padding: 2.5rem 0 2.75rem; } @media (max-width: 767px) { .rain-leak-page .works-list-section.rl-banner-section { padding: 2rem 0 2.25rem; } } /* ---------- 26-3. 雨漏りページ FVボタン 統一感・優先度調整（rain-leak-page専用スコープで他ページへ影響しない） ---------- * 優先度: 1) 電話で相談する 2) 無料相談する 3) ショールームで相談する * サイズ・余白は3ボタン共通化し、order（DOM順は変更しない）と配色の濃淡で優先度を表現する。 * 文言・リンク先（href / data-cta）は変更しない。 */ .rain-leak-page .rl-hero-ctas .works-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 240px; max-width: 320px; min-height: 3.25rem; padding: 0.95rem 1.5rem; font-size: 1.0625rem; box-sizing: border-box; white-space: nowrap; } .rain-leak-page .rl-hero-ctas .works-cta-btn[data-cta="rain-leak-hero-contact"] { order: 0; background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .rain-leak-page .rl-hero-ctas .works-cta-btn[data-cta="rain-leak-hero-contact"]:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } .rain-leak-page .rl-hero-cta-tel { order: -1; background: var(--hayack-cta-red); color: var(--hayack-white); border: 2px solid var(--hayack-cta-red); font-size: 1.1875rem; box-shadow: 0 6px 20px rgba(232, 0, 26, 0.35); } .rain-leak-page .rl-hero-cta-tel:hover { background: var(--hayack-cta-red-dark); border-color: var(--hayack-cta-red-dark); color: var(--hayack-white); } .rain-leak-page .rl-hero-cta-green { order: 1; background: transparent; color: var(--hayack-green-dark); border: 2px solid var(--hayack-green-dark); box-shadow: none; font-size: 0.9375rem; } .rain-leak-page .rl-hero-cta-green:hover { background: var(--hayack-green-light); color: var(--hayack-green-dark); } @media (max-width: 767px) { .rain-leak-page .rl-hero-ctas .works-cta-btn { flex: none; width: 100%; max-width: none; padding: 0.9rem 1rem; } .rain-leak-page .rl-hero-cta-tel { font-size: 1.0625rem; } } /* ---------- 26-4. 雨漏りページ 中間CTA（フォーム導線強化・rain-leak-page専用スコープ） ---------- * 押し売り感を抑えるため、FVボタンより一回り軽量なデザインにする。電話を最優先、無料相談を次点。 * ショールーム相談は中間CTAには含めない。他ページには影響しない。 */ .rain-leak-page .rl-mid-cta-section { padding: 2.5rem 0; } .rain-leak-page .rl-mid-cta { max-width: 640px; margin: 0 auto; text-align: center; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: 16px; padding: 2rem 1.75rem; box-shadow: var(--shadow); } .rain-leak-page .rl-mid-cta__title { font-size: 1.25rem; font-weight: 900; color: var(--clr-text); margin: 0 0 0.6rem; } .rain-leak-page .rl-mid-cta__desc { font-size: 0.9375rem; line-height: 1.75; color: var(--clr-muted); margin: 0 0 1.5rem; } .rain-leak-page .rl-mid-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .rain-leak-page .rl-mid-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 200px; max-width: 260px; min-height: 2.75rem; padding: 0.75rem 1.25rem; font-size: 0.9375rem; font-weight: 800; border-radius: 8px; text-decoration: none; box-sizing: border-box; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; } .rain-leak-page .rl-mid-cta-btn--tel { background: var(--hayack-cta-red); color: var(--hayack-white); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(232, 0, 26, 0.25); } .rain-leak-page .rl-mid-cta-btn--tel:hover { background: var(--hayack-cta-red-dark); border-color: var(--hayack-cta-red-dark); color: var(--hayack-white); } .rain-leak-page .rl-mid-cta-btn--contact { background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); } .rain-leak-page .rl-mid-cta-btn--contact:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } @media (max-width: 767px) { .rain-leak-page .rl-mid-cta { padding: 1.5rem 1.25rem; } .rain-leak-page .rl-mid-cta__title { font-size: 1.0625rem; } .rain-leak-page .rl-mid-cta-btn { flex: none; width: 100%; max-width: none; } } /* ---------- 26-5. 雨漏りページ 関連する工事メニュー 非表示（rain-leak-page専用スコープ） ---------- * /rain-leak/ のみ非表示。他ページの関連工事メニューには影響しない。 * 対象ページ（外壁塗装・屋根塗装・屋根修理・防水工事・屋根カバー工法）へのリンクは * グローバルナビ「工事メニュー」およびfooterから引き続き到達可能なため、内部リンクは消失しない。 */ .rain-leak-page .rl-related-menu-section { display: none; } /* ---------- 26-6. 下層ページ Hero CTA 統一・電話優先（/rain-leak/ で整えた表示を他5ページへ展開） ---------- * 対象: roof-painting-page / exterior-painting-page / waterproof-page * （既存の共有ルール = section21 で .rl-hero-ctas の flex/gap は定義済みのため、ここではボタン単位の * 統一サイズ・電話優先配色のみ追加する。section21 自体は変更しない） * ボタン文言・リンク先（href / data-cta）は変更しない。!important は使用しない。 */ .roof-painting-page .rl-hero-ctas .works-cta-btn, .exterior-painting-page .rl-hero-ctas .works-cta-btn, .waterproof-page .rl-hero-ctas .works-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 240px; max-width: 320px; min-height: 3.25rem; padding: 0.95rem 1.5rem; font-size: 1.0625rem; box-sizing: border-box; white-space: nowrap; } .roof-painting-page .rl-hero-ctas .works-cta-btn[data-cta="roof-hero-contact"], .exterior-painting-page .rl-hero-ctas .works-cta-btn[data-cta="exterior-hero-contact"], .waterproof-page .rl-hero-ctas .works-cta-btn[data-cta="waterproof-hero-contact"] { background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .roof-painting-page .rl-hero-ctas .works-cta-btn[data-cta="roof-hero-contact"]:hover, .exterior-painting-page .rl-hero-ctas .works-cta-btn[data-cta="exterior-hero-contact"]:hover, .waterproof-page .rl-hero-ctas .works-cta-btn[data-cta="waterproof-hero-contact"]:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } .roof-painting-page .rl-hero-cta-tel, .exterior-painting-page .rl-hero-cta-tel, .waterproof-page .rl-hero-cta-tel { order: -1; background: var(--hayack-cta-red); color: var(--hayack-white); border: 2px solid var(--hayack-cta-red); font-size: 1.1875rem; box-shadow: 0 6px 20px rgba(232, 0, 26, 0.35); } .roof-painting-page .rl-hero-cta-tel:hover, .exterior-painting-page .rl-hero-cta-tel:hover, .waterproof-page .rl-hero-cta-tel:hover { background: var(--hayack-cta-red-dark); border-color: var(--hayack-cta-red-dark); color: var(--hayack-white); } .roof-painting-page .rl-hero-cta-green, .exterior-painting-page .rl-hero-cta-green, .waterproof-page .rl-hero-cta-green { order: 1; background: transparent; color: var(--hayack-green-dark); border: 2px solid var(--hayack-green-dark); box-shadow: none; font-size: 0.9375rem; } .roof-painting-page .rl-hero-cta-green:hover, .exterior-painting-page .rl-hero-cta-green:hover, .waterproof-page .rl-hero-cta-green:hover { background: var(--hayack-green-light); color: var(--hayack-green-dark); } @media (max-width: 767px) { .roof-painting-page .rl-hero-ctas .works-cta-btn, .exterior-painting-page .rl-hero-ctas .works-cta-btn, .waterproof-page .rl-hero-ctas .works-cta-btn { flex: none; width: 100%; max-width: none; padding: 0.9rem 1rem; } .roof-painting-page .rl-hero-cta-tel, .exterior-painting-page .rl-hero-cta-tel, .waterproof-page .rl-hero-cta-tel { font-size: 1.0625rem; } } /* ---------- 26-7. 下層ページ Hero CTA 統一・電話優先（section21未対応のページ用。コンテナのflex/gapも個別定義） ---------- * 対象: roof-repair-page / reason-page / roof-cover-page * （これらのページは section21 の対象外のため、.rl-hero-ctas 自体の flex/gap もここで定義する） * 他ページには一切影響しない。ボタン文言・リンク先は変更しない。 */ .roof-repair-page .rl-hero-ctas, .reason-page .rl-hero-ctas, .roof-cover-page .rl-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .roof-repair-page .rl-hero-ctas .works-cta-btn, .reason-page .rl-hero-ctas .works-cta-btn, .roof-cover-page .rl-hero-ctas .works-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 240px; max-width: 320px; min-height: 3.25rem; padding: 0.95rem 1.5rem; font-size: 1.0625rem; box-sizing: border-box; white-space: nowrap; } .roof-repair-page .rl-hero-ctas .works-cta-btn[data-cta="roofrepair-hero-contact"], .reason-page .rl-hero-ctas .works-cta-btn[data-cta="reason-hero-contact"], .roof-cover-page .rl-hero-ctas .works-cta-btn[data-cta="roofcover-hero-contact"] { background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .roof-repair-page .rl-hero-ctas .works-cta-btn[data-cta="roofrepair-hero-contact"]:hover, .reason-page .rl-hero-ctas .works-cta-btn[data-cta="reason-hero-contact"]:hover, .roof-cover-page .rl-hero-ctas .works-cta-btn[data-cta="roofcover-hero-contact"]:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } .roof-repair-page .rl-hero-cta-tel, .reason-page .rl-hero-cta-tel, .roof-cover-page .rl-hero-cta-tel { order: -1; background: var(--hayack-cta-red); color: var(--hayack-white); border: 2px solid var(--hayack-cta-red); font-size: 1.1875rem; box-shadow: 0 6px 20px rgba(232, 0, 26, 0.35); } .roof-repair-page .rl-hero-cta-tel:hover, .reason-page .rl-hero-cta-tel:hover, .roof-cover-page .rl-hero-cta-tel:hover { background: var(--hayack-cta-red-dark); border-color: var(--hayack-cta-red-dark); color: var(--hayack-white); } .roof-repair-page .rl-hero-cta-green, .reason-page .rl-hero-cta-green, .roof-cover-page .rl-hero-cta-green { order: 1; background: transparent; color: var(--hayack-green-dark); border: 2px solid var(--hayack-green-dark); box-shadow: none; font-size: 0.9375rem; } .roof-repair-page .rl-hero-cta-green:hover, .reason-page .rl-hero-cta-green:hover, .roof-cover-page .rl-hero-cta-green:hover { background: var(--hayack-green-light); color: var(--hayack-green-dark); } @media (max-width: 767px) { .roof-repair-page .rl-hero-ctas, .reason-page .rl-hero-ctas, .roof-cover-page .rl-hero-ctas { flex-direction: column; align-items: stretch; } .roof-repair-page .rl-hero-ctas .works-cta-btn, .reason-page .rl-hero-ctas .works-cta-btn, .roof-cover-page .rl-hero-ctas .works-cta-btn { flex: none; width: 100%; max-width: none; padding: 0.9rem 1rem; } .roof-repair-page .rl-hero-cta-tel, .reason-page .rl-hero-cta-tel, .roof-cover-page .rl-hero-cta-tel { font-size: 1.0625rem; } } /* ---------- 26-8. 外壁塗装 費用相場ページ Hero CTA 統一・電話優先（cost-page専用スコープ） ---------- * 既に電話CTA（rl-hero-cta-tel）は正しく実装済み。ボタンは2つのみ（3つ目のrl-hero-cta-greenは存在しないため対象外）。 * section21対象外のため .rl-hero-ctas 自体の flex/gap もここで定義する。他ページには影響しない。 */ .cost-page .rl-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .cost-page .rl-hero-ctas .works-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 240px; max-width: 320px; min-height: 3.25rem; padding: 0.95rem 1.5rem; font-size: 1.0625rem; box-sizing: border-box; white-space: nowrap; } .cost-page .rl-hero-ctas .works-cta-btn[data-cta="cost-hero-contact"] { background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .cost-page .rl-hero-ctas .works-cta-btn[data-cta="cost-hero-contact"]:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } .cost-page .rl-hero-cta-tel { order: -1; background: var(--hayack-cta-red); color: var(--hayack-white); border: 2px solid var(--hayack-cta-red); font-size: 1.1875rem; box-shadow: 0 6px 20px rgba(232, 0, 26, 0.35); } .cost-page .rl-hero-cta-tel:hover { background: var(--hayack-cta-red-dark); border-color: var(--hayack-cta-red-dark); color: var(--hayack-white); } @media (max-width: 767px) { .cost-page .rl-hero-ctas { flex-direction: column; align-items: stretch; } .cost-page .rl-hero-ctas .works-cta-btn { flex: none; width: 100%; max-width: none; padding: 0.9rem 1rem; } .cost-page .rl-hero-cta-tel { font-size: 1.0625rem; } } /* ---------- 26-9. 外壁塗装 見積書の見方ページ Hero CTA 統一（estimate-page専用スコープ） ---------- * このページに電話CTAは存在しない（無料見積り依頼＋費用相場ページへの内部リンクの2ボタン構成）。 * 誤って rl-hero-cta-tel が付いていた2つ目のボタンは rl-hero-cta-green（控えめな補助リンク）に是正済み。 * 電話CTAの新設要否はレポートで提案するのみとし、ここでは追加しない。他ページには影響しない。 */ .estimate-page .rl-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .estimate-page .rl-hero-ctas .works-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.35em; flex: 1 1 240px; max-width: 320px; min-height: 3.25rem; padding: 0.95rem 1.5rem; font-size: 1.0625rem; box-sizing: border-box; white-space: nowrap; } .estimate-page .rl-hero-ctas .works-cta-btn[data-cta="estimate-hero-contact"] { order: -1; background: var(--hayack-white); color: var(--hayack-cta-red); border: 2px solid var(--hayack-cta-red); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .estimate-page .rl-hero-ctas .works-cta-btn[data-cta="estimate-hero-contact"]:hover { background: var(--hayack-cta-red); color: var(--hayack-white); } .estimate-page .rl-hero-cta-green { order: 1; background: transparent; color: var(--hayack-green-dark); border: 2px solid var(--hayack-green-dark); box-shadow: none; font-size: 0.9375rem; } .estimate-page .rl-hero-cta-green:hover { background: var(--hayack-green-light); color: var(--hayack-green-dark); } @media (max-width: 767px) { .estimate-page .rl-hero-ctas { flex-direction: column; align-items: stretch; } .estimate-page .rl-hero-ctas .works-cta-btn { flex: none; width: 100%; max-width: none; padding: 0.9rem 1rem; } } /* ---------- 26-10. 屋根修理・板金修理ページ ヒーローバナー（画像差し替え・roof-repair-page専用スコープで他ページへ影響しない） ---------- */ .roof-repair-page .works-hero.roof-repair-hero-banner { background: none; padding: 0 0 2.5rem; overflow: visible; } .roof-repair-page .works-hero.roof-repair-hero-banner::before, .roof-repair-page .works-hero.roof-repair-hero-banner::after { content: none; } .roof-repair-hero-banner__picture { display: block; width: 100%; line-height: 0; } .roof-repair-hero-banner__image { display: block; width: 100%; height: auto; } .roof-repair-hero-banner__ctas { margin-top: 1.75rem; } /* ---------- 26-11. 屋根修理・板金修理ページ バナー画像セクションの上下余白調整（roof-repair-page専用スコープ） ---------- * バナー画像のみのセクションは前後の余白が間延びして見えるため、 * 通常セクション（padding:4rem 0 5rem）より上下パディングを詰める。画像サイズ・画質は変更しない。 * .rl-section-banner / .rl-section-banner__image 自体は雨漏りページと共通の汎用クラスをそのまま利用する。 */ .roof-repair-page .works-list-section.rl-banner-section { padding: 2.5rem 0 2.75rem; } @media (max-width: 767px) { .roof-repair-page .works-list-section.rl-banner-section { padding: 2rem 0 2.25rem; } } /* ---------- 26-12. 屋根修理・板金修理ページ 症状バナーをスマホのみ非表示（roof-repair-page専用スコープ） ---------- * 「このような症状はご相談ください」のバナーのみSP(767px以下)で非表示にする。PCは現状維持。 * 画像を非表示にした分、セクション自体の余白も詰めて不自然な空白を防ぐ。 * 他の屋根修理バナー（基本説明・対応内容）や他ページの .rl-section-banner には影響しない。 */ @media (max-width: 767px) { .roof-repair-page .rr-symptom-banner-section .rl-section-banner { display: none; } .roof-repair-page .rr-symptom-banner-section { padding: 0; } } /* ---------- 26-13. 屋根修理・板金修理ページ PC用バナー横幅拡大（roof-repair-page専用スコープ・PCのみ） ---------- * 既存の .rl-section-banner__image（汎用クラス。max-width:900px）に対し、 * roof-repair-page 内でのみ PC(768px以上)で約1.3倍（900px→1170px）へ拡大する。 * .container（max-width:1200px、左右padding込み）の範囲を超えないため横スクロールは発生しない。 * width:100%; height:auto; と中央寄せ（margin:0 auto）は既存のまま変更しない。SPには適用しない。 */ @media (min-width: 768px) { .roof-repair-page .rl-section-banner__image { max-width: 1170px; } } /* ---------- 26-14. 雨漏りページ PC用バナー横幅拡大（rain-leak-page専用スコープ・PCのみ） ---------- * 屋根修理・板金修理ページ（26-13）と同じ方針。既存の .rl-section-banner__image（汎用クラス。max-width:900px）に対し、 * rain-leak-page 内でのみ PC(768px以上)で約1.3倍（900px→1170px）へ拡大する。 * .container（max-width:1200px、左右padding込み）の範囲を超えないため横スクロールは発生しない。 * width:100%; height:auto; と中央寄せ（margin:0 auto）は既存のまま変更しない。SPには適用しない。 * roof-repair-page 側の指定（26-13）や他ページの .rl-section-banner__image には影響しない。 */ @media (min-width: 768px) { .rain-leak-page .rl-section-banner__image { max-width: 1170px; } } /* ---------- 27. 岡崎市の外壁塗装 費用相場ページ ---------- */ .cost-page-subLink { color: #fff; text-decoration: underline; font-weight: 700; } .cost-page-subLink:hover { color: #ffe0e0; } /* ---------- 27-2. 関連ページ内部リンクボックス（白背景ページ共通） ---------- */ .related-links-box { background: #f2f8f4; border: 1px solid #dbeae0; border-radius: 12px; padding: 20px 24px; margin: 0 auto 2.5rem; max-width: 760px; box-sizing: border-box; } .related-links-box__label { font-size: 0.75rem; font-weight: 700; color: #4a7c59; letter-spacing: 0.05em; margin: 0 0 8px; } .related-links-box__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; } .related-links-box__list a { color: #2f6b3f; text-decoration: underline; font-weight: 700; font-size: 0.9rem; } .related-links-box__list a:hover { color: #1f4e2c; } /* ---------- 27-3. 費用相場ページ 見積書ポイント／注意点／大切にしていること バナー画像 ---------- */ .cost-banner-visual { display: block; max-width: 900px; margin: 0 auto; } .cost-banner-visual__img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } /* ---------- 28. 選ばれる理由ページ「ハヤックが選ばれる理由」8カード 実写真差し替え ---------- */ .reason-five-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ---------- 29. 選ばれる理由ページ 導入文ブロック 実写真差し替え ---------- */ .reason-intro-photo { padding-top: 2.5rem; padding-bottom: 2.5rem; } .reason-intro-photo__img { width: 100%; height: auto; display: block; border-radius: 12px; } @media (max-width: 767px) { .reason-intro-photo { padding-top: 1.75rem; padding-bottom: 1.75rem; } } /* ---------- 30. TOP「ハヤックが選ばれる3つの理由」実写真差し替え・リンク追加 ---------- */ .hayack-demo__reason-photo picture { display: block; width: 100%; height: 100%; } .hayack-demo__reason-link, .hayack-demo__inline-link { display: inline-block; margin-top: 8px; font-size: 0.875rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); text-decoration: underline; line-height: 1.6; } .hayack-demo__reason-link:hover, .hayack-demo__inline-link:hover { color: var(--hayack-green-medium, #5ea82c); } /* ---------- 32. TOP セクション末尾の中CTA（バナー化せず、緑系ボタンで主CTAと区別） ---------- */ .hayack-demo__section-cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border-radius: 999px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; background: #fff; color: var(--hayack-green-dark, #4d8f1f); border: 2px solid var(--hayack-green-dark, #4d8f1f); transition: background .2s, color .2s; max-width: 320px; text-align: center; white-space: normal; } .hayack-demo__section-cta:hover { background: var(--hayack-green-light, #eef8e5); } .hayack-demo__section-cta--strong { background: var(--hayack-green-dark, #4d8f1f); color: #fff; border-color: var(--hayack-green-dark, #4d8f1f); } .hayack-demo__section-cta--strong:hover { background: var(--hayack-green-medium, #5ea82c); color: #fff; } @media (max-width: 767px) { .hayack-demo__section-cta { width: 100%; max-width: 320px; } } /* ---------- 31. 外壁塗装の見積書の見方ページ 項目別チェック表 ---------- */ .estimate-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .estimate-check-card { background: #fff; border: 1px solid #e8e8e8; border-top: 4px solid var(--clr-accent); border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .estimate-check-card-title { font-size: 1rem; font-weight: 900; color: var(--hayack-green-dark, #4d8f1f); margin: 0 0 0.5rem !important; } .estimate-check-card-text { font-size: 0.875rem; color: #555; line-height: 1.75; margin: 0 !important; } @media (max-width: 767px) { .estimate-check-grid { grid-template-columns: 1fr; } } /* ---------- 31-2. 外壁塗装の見積書の見方ページ 各セクション本文バナー画像 ---------- */ .estimate-banner-visual { display: block; max-width: 900px; margin: 0 auto; } .estimate-banner-visual__img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } /* ---------- 32. 施工事例一覧 フィルター導線（works_area / works_type） ---------- */ .works-filter { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; background: #f7f9f7; border: 1px solid #e5ece5; border-radius: 14px; padding: 20px 24px; margin: 0 0 2rem; } .works-filter__group { flex: 1 1 260px; min-width: 0; } .works-filter__group--type { border: none; background: none; padding: 0; } .works-filter__group--type > summary { cursor: pointer; list-style: none; } .works-filter__group--type > summary::-webkit-details-marker { display: none; } .works-filter__group--type > summary::after { content: '+'; display: inline-block; margin-left: 6px; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); } .works-filter__group--type[open] > summary::after { content: '−'; } .works-filter__title { font-size: 0.875rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); margin: 0 0 10px !important; } .works-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .works-filter__group--type .works-filter__list { margin-top: 10px; } .works-filter__link { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #cfe0cf; border-radius: 999px; padding: 7px 14px; font-size: 0.8125rem; font-weight: 700; color: #2f4a2f; text-decoration: none; white-space: nowrap; } .works-filter__link:hover { background: var(--hayack-green-dark, #4d8f1f); border-color: var(--hayack-green-dark, #4d8f1f); color: #fff; } .works-filter__count { font-weight: 400; color: #6b806b; font-size: 0.75rem; } .works-filter__link:hover .works-filter__count { color: #e7f2e7; } .works-filter__all { flex: 1 1 100%; border-top: 1px dashed #d7e3d7; padding-top: 14px; text-align: right; } .works-filter__all-link { font-size: 0.8125rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); text-decoration: underline; } @media (max-width: 767px) { .works-filter { flex-direction: column; padding: 16px 18px; } .works-filter__all { text-align: left; } } /* ---------- 33. 施工事例 タームアーカイブ（works_area / works_type）専用パーツ ---------- */ .works-tax-back { margin: 14px 0 0 !important; } .works-tax-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); text-decoration: underline; } .works-tax-related-section { background: #f7f9f7; padding: 32px 0; } .works-tax-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; } .works-tax-related-list a { font-size: 0.9375rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); text-decoration: underline; } .works-tax-related-list a:hover { color: #2f5e15; } @media (max-width: 767px) { .works-tax-related-list { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ---------- 34. 施工事例詳細 工事の流れ（工事工程写真・コメント） ---------- */ .works-process__intro { margin: 0 0 1.25rem !important; } .works-process__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .works-process__item { background: #f7f9f7; border-radius: 12px; overflow: hidden; border: 1px solid #e5ece5; } .works-process__image { display: block; width: 100%; height: 190px; object-fit: cover; } .works-process__title { font-size: 1rem; font-weight: 900; color: #222; margin: 14px 16px 6px !important; } .works-process__comment { font-size: 0.875rem; line-height: 1.8; color: #444; margin: 0 16px 16px !important; } @media (max-width: 767px) { .works-process__grid { grid-template-columns: 1fr; } } /* ---------- 35. ハヤック本社ショールーム「5つの見どころ」 ---------- */ .showroom-highlights__intro { text-align: center; max-width: 640px; margin: 0 auto !important; color: #555; font-size: 0.9375rem; line-height: 1.8; } .showroom-highlights__grid { display: grid; grid-template-columns: 1fr; gap: 28px; } .showroom-highlights__card { background: #fffdf8; border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); display: flex; flex-direction: column; } .showroom-highlights__image { overflow: hidden; border-radius: 14px 14px 0 0; } .showroom-highlights__image img { display: block; width: 100%; height: 200px; object-fit: cover; } .showroom-highlights__number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--hayack-green-dark, #4d8f1f); color: #fff; font-weight: 900; font-size: 1.125rem; margin: -21px 0 0 20px; position: relative; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .showroom-highlights__title { font-size: 1.0625rem; font-weight: 900; color: #222; margin: 10px 20px 8px !important; padding-bottom: 8px; border-bottom: 3px solid var(--hayack-green-dark, #4d8f1f); } .showroom-highlights__text { font-size: 0.875rem; line-height: 1.8; color: #444; margin: 0 20px 20px !important; flex: 1; } @media (min-width: 640px) { .showroom-highlights__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .showroom-highlights__grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- 35.5 ショールーム個別: 対応スタッフ（showroom-staff__ でスコープ。既存カードCSSは上書きしない） ---------- */ .showroom-staff__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 888px; margin: 0 auto; } .showroom-staff__card { flex: 0 1 260px; max-width: 280px; background: #fffdf8; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .showroom-staff__card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); color: inherit; } .showroom-staff__photo { aspect-ratio: 3 / 4; background: var(--hayack-green-light, #eef8e5); overflow: hidden; } .showroom-staff__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .showroom-staff__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #bbb; background: var(--clr-bg-alt); } .showroom-staff__body { padding: 16px 18px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .showroom-staff__name { font-size: 1.0625rem; font-weight: 900; color: var(--clr-text); margin: 0 !important; } .showroom-staff__deptrole { display: inline-flex; padding: 3px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--clr-accent-light, #fef0e9); color: var(--clr-accent, #e8601a); margin: 0 !important; } .showroom-staff__word { font-size: 0.8125rem; color: var(--clr-muted); line-height: 1.6; margin: 0 !important; } /* スマホ（767px以下）: スタッフカードを横スライド表示に切替（scroll-snap・JS不要） .showroom-staff__grid 自体をスクロール領域として再利用し、新規ラッパー要素は追加しない ※ 767.98px … devicePixelRatioにより実効ビューポート幅が767px超767.98px未満に 丸められる環境で本ブロックが適用されない事例を確認したための対策（hayack-demo.cssの ヘッダー側と同じ対策パターン） */ @media (max-width: 767.98px) { .showroom-staff__grid { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; } .showroom-staff__grid::-webkit-scrollbar { display: none; } .showroom-staff__card { flex: 0 0 clamp(180px, 54vw, 205px); max-width: 205px; scroll-snap-align: start; } .showroom-staff__body { padding: 14px 12px 16px; } } /* ---------- 36. 現場ブログ ---------- */ .blog-cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2rem; } .blog-cat-nav__link { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #cfe0cf; border-radius: 999px; padding: 7px 16px; font-size: 0.8125rem; font-weight: 700; color: #2f4a2f; text-decoration: none; white-space: nowrap; } .blog-cat-nav__link:hover, .blog-cat-nav__link--active { background: var(--hayack-green-dark, #4d8f1f); border-color: var(--hayack-green-dark, #4d8f1f); color: #fff; } .blog-cat-nav__count { font-weight: 400; font-size: 0.75rem; opacity: .85; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-bottom: 2rem; } .blog-card { display: block; background: #fffdf8; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); color: inherit; } .blog-card__media { background: #eef2ec; aspect-ratio: 3 / 2; overflow: hidden; display: flex; align-items: center; justify-content: center; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card__no-image { font-size: 0.75rem; color: #999; } .blog-card__body { padding: 18px 20px 22px; } .blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.75rem; } .blog-card__cat { display: inline-block; background: var(--hayack-green-light, #eef8e5); color: var(--hayack-green-dark, #4d8f1f); font-weight: 700; padding: 3px 10px; border-radius: 999px; } .blog-card__date { color: #888; } .blog-card__title { font-size: 1.0625rem; font-weight: 900; color: #222; margin: 0 0 10px !important; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: break-word; } .blog-card__text { font-size: 0.875rem; color: #555; line-height: 1.8; margin: 0 0 14px !important; } .blog-card__footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee; padding-top: 12px; } .blog-card__author { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #555; } .blog-card__author img { border-radius: 50%; display: block; width: 28px; height: 28px; object-fit: cover; } .blog-card__author-noavatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #eef2ec; font-size: 0.875rem; flex-shrink: 0; } .blog-card__btn { font-size: 0.75rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); } /* 記事詳細 */ .blog-detail-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; } .blog-detail-cat { display: inline-block; background: var(--hayack-green-light, #eef8e5); color: var(--hayack-green-dark, #4d8f1f); font-weight: 700; font-size: 0.8125rem; padding: 4px 12px; border-radius: 999px; text-decoration: none; } .blog-detail-title { margin-bottom: 0.75rem !important; } .blog-detail-dates { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.8125rem; color: #888; margin-bottom: 1.5rem; } .blog-detail-thumb { margin-bottom: 2rem; border-radius: 14px; overflow: hidden; } .blog-detail-thumb img { width: 100%; height: auto; display: block; } .blog-detail-content { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); margin-bottom: 2rem; font-size: 0.9375rem; line-height: 1.9; color: #333; max-width: 100%; overflow-wrap: break-word; } .blog-detail-content h2 { font-size: 1.375rem; font-weight: 900; color: #222; margin: 2rem 0 1rem !important; padding-bottom: 0.5rem; border-bottom: 3px solid var(--hayack-green-dark, #4d8f1f); } .blog-detail-content h2:first-child { margin-top: 0 !important; } .blog-detail-content h3 { font-size: 1.125rem; font-weight: 900; color: #222; margin: 1.75rem 0 0.75rem !important; padding-left: 0.75rem; border-left: 4px solid var(--hayack-green-dark, #4d8f1f); } .blog-detail-content p { margin: 0 0 1.25rem !important; } .blog-detail-content img, .blog-detail-content video, .blog-detail-content iframe { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 1.25rem auto; } .blog-detail-content ul, .blog-detail-content ol { margin: 0 0 1.25rem 1.5rem !important; padding: 0; } .blog-detail-content li { margin-bottom: 0.5rem; } .blog-detail-content blockquote { margin: 1.5rem 0 !important; padding: 1rem 1.25rem; background: #f7f9f7; border-left: 4px solid var(--hayack-green-dark, #4d8f1f); color: #444; } .blog-detail-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.875rem; display: block; overflow-x: auto; } .blog-detail-content th, .blog-detail-content td { border: 1px solid #e0e0e0; padding: 8px 12px; text-align: left; } .blog-detail-content th { background: #f7f9f7; } /* 執筆者プロフィール */ .blog-author-box { display: flex; gap: 20px; background: #fff; border-radius: 16px; padding: 1.75rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); margin-bottom: 2rem; align-items: flex-start; } .blog-author-box__photo { flex: 0 0 96px; } .blog-author-box__photo img, .blog-author-box__photo .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; } .blog-author-box--page .blog-author-box__photo { flex-basis: 120px; } .blog-author-box--page .blog-author-box__photo img, .blog-author-box--page .blog-author-box__photo .avatar { width: 120px; height: 120px; } .blog-author-box__no-photo { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: #eef2ec; font-size: 2rem; } .blog-author-box--page .blog-author-box__no-photo { width: 120px; height: 120px; font-size: 2.5rem; } .blog-author-box__body { flex: 1; min-width: 0; } .blog-author-box__label { font-size: 0.75rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); letter-spacing: 0.05em; margin: 0 0 4px !important; } .blog-author-box__name { font-size: 1.125rem; font-weight: 900; color: #222; margin: 0 0 4px !important; } .blog-author-box__name a { color: inherit; text-decoration: none; } .blog-author-box__position { font-size: 0.8125rem; color: #666; font-weight: 700; margin: 0 0 10px !important; } .blog-author-box__profile { font-size: 0.875rem; color: #444; line-height: 1.8; margin: 0 0 10px !important; } .blog-author-box__specialty, .blog-author-box__qualification { font-size: 0.8125rem; color: #555; margin: 0 0 4px !important; } .blog-author-box__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; } .blog-author-box__link { font-size: 0.8125rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); text-decoration: underline; } /* 関連記事 */ .blog-related { margin-bottom: 2rem; } .blog-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } /* 前後記事リンク */ .blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 2rem; } .blog-prevnext__link { display: flex; flex-direction: column; gap: 4px; background: #f7f9f7; border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; } .blog-prevnext__link--next { text-align: right; align-items: flex-end; } .blog-prevnext__label { font-size: 0.75rem; font-weight: 700; color: var(--hayack-green-dark, #4d8f1f); } .blog-prevnext__title { font-size: 0.875rem; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 767px) { .blog-grid, .blog-related__grid { grid-template-columns: 1fr; } .blog-author-box { flex-direction: column; align-items: center; text-align: center; } .blog-author-box__links { justify-content: center; } .blog-prevnext { grid-template-columns: 1fr; } .blog-prevnext__link--next { text-align: left; align-items: flex-start; } .blog-detail-content { padding: 1.25rem; } } /* 記事下 関連導線ボックス（本文内 wp:html ブロックとして挿入） */ .blog-detail-content .blog-related-links-box { background: var(--hayack-green-light, #eef8e5); border-radius: 12px; padding: 1.5rem 1.75rem; margin: 2rem 0 !important; } .blog-detail-content .blog-related-links-box h2 { margin: 0 0 0.75rem !important; padding-bottom: 0 !important; border-bottom: none !important; font-size: 1.125rem; } .blog-detail-content .blog-related-links-box ul { margin: 0 !important; padding-left: 1.25rem !important; list-style: disc; } .blog-detail-content .blog-related-links-box li { margin-bottom: 0.5rem !important; } .blog-detail-content .blog-related-links-box li:last-child { margin-bottom: 0 !important; } .blog-detail-content .blog-related-links-box a { color: var(--hayack-green-dark, #4d8f1f); font-weight: 700; text-decoration: underline; } /* ===================================================== 31. 外壁塗装ページ（page-exterior-painting.php） 「外壁塗装はいつ必要か」「外壁塗装でよくある追加費用」バナー画像 ===================================================== */ .exterior-banner-visual { display: block; max-width: 900px; margin: 0 auto; } .exterior-banner-visual__image { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } /* ---------- 外壁塗装の基本工程: 横方向の流れが分かるレイアウト ---------- .rl-flow-steps / .rl-flow-arrow は rain-leak-page 等と共用のため .exterior-painting-page 配下のみに限定して上書きする（他ページへ影響なし）。 矢印（下向き）はグリッド・横スクロール双方で向きが合わなくなるため非表示にし、 STEP番号とカードの並び順（左→右・上→下）で流れを示す。 */ .exterior-painting-page .rl-flow-arrow { display: none; } .exterior-painting-page .rl-flow-steps .sr-flow-item { display: flex; flex-direction: column; } .exterior-painting-page .rl-flow-steps .sr-flow-content { display: flex; flex-direction: column; flex: 1; } .exterior-painting-page .rl-flow-steps .sr-flow-desc { flex: 1; } @media (min-width: 1024px) { .exterior-painting-page .rl-flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; max-width: 100%; } } @media (min-width: 768px) and (max-width: 1023.98px) { .exterior-painting-page .rl-flow-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 767.98px) { .exterior-painting-page .rl-flow-steps { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; margin: 0 0 1rem; } .exterior-painting-page .rl-flow-steps::-webkit-scrollbar { display: none; } .exterior-painting-page .rl-flow-steps .sr-flow-item { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; } } /* ===================================================== 32. 屋根塗装ページ（page-roof-painting.php） 「屋根塗装はいつ必要か」「屋根塗装を放置すると起きやすいこと」 「屋根塗装でよくある追加費用」バナー画像 ===================================================== */ .roof-banner-visual { display: block; width: 100%; max-width: 900px; margin-inline: auto; } .roof-banner-visual__image { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); } /* ---------- 屋根塗装の基本工程: 横方向の流れが分かるレイアウト ---------- .rl-flow-steps / .rl-flow-arrow は exterior-painting-page 等と共用のため .roof-painting-page 配下のみに限定して上書きする（他ページへ影響なし）。 矢印（下向き）はグリッド・横スクロール双方で向きが合わなくなるため非表示にし、 STEP番号とカードの並び順（左→右・上→下）で流れを示す。 */ .roof-painting-page .rl-flow-arrow { display: none; } .roof-painting-page .rl-flow-steps .sr-flow-item { display: flex; flex-direction: column; } .roof-painting-page .rl-flow-steps .sr-flow-content { display: flex; flex-direction: column; flex: 1; } .roof-painting-page .rl-flow-steps .sr-flow-desc { flex: 1; } @media (min-width: 1024px) { .roof-painting-page .rl-flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; max-width: 100%; } } @media (min-width: 768px) and (max-width: 1023.98px) { .roof-painting-page .rl-flow-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 767.98px) { .roof-painting-page .rl-flow-steps { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; margin: 0 0 1rem; } .roof-painting-page .rl-flow-steps::-webkit-scrollbar { display: none; } .roof-painting-page .rl-flow-steps .sr-flow-item { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; } } /* ===================================================== 画像バナー直後のHTML要約（content-image-summary） 画像＝詳細な図解 ／ HTML＝結論と主要な判断ポイント という役割分担。 画像より目立たせず、既存の本文色・行間に合わせる。背景は透明。 使用箇所: page-rain-leak.php / page-roof-cover.php / page-exterior-painting.php / page-roof-painting.php / single-showroom.php ===================================================== */ .content-image-summary { max-width: 900px; margin: 20px auto 0; font-size: 1rem; line-height: 1.8; color: var(--clr-text); } .content-image-summary p { margin-bottom: 0.75rem; } .content-image-summary p:last-child { margin-bottom: 0; } .content-image-summary__list { list-style: none; margin: 0 0 0.75rem; padding: 0; } .content-image-summary__list li { position: relative; padding-left: 1.15em; margin-bottom: 0.35rem; } .content-image-summary__list li::before { content: "\30FB"; position: absolute; left: 0; color: var(--clr-primary); } .content-image-summary__list li:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { .content-image-summary { max-width: 100%; margin-top: 16px; font-size: 0.9375rem; line-height: 1.75; } } /* ===================================================== ページ冒頭の直接回答（page-direct-answer） FVが画像バナーのみでリード文を持たないページに限り、パンくず直後へ配置する。 ページ全体の結論を1〜2文で示すブロックで、各セクション要約の繰り返しにはしない。 .container の内側に置く前提（左右パディングは .container が担う）。 使用箇所: page-rain-leak.php / page-reason.php / archive-showroom.php ===================================================== */ .page-direct-answer { max-width: 880px; margin: 1.75rem auto 0; padding-left: 1rem; border-left: 3px solid var(--clr-primary); font-size: 1rem; line-height: 1.8; color: var(--clr-text); } .page-direct-answer p { margin-bottom: 0; } @media (max-width: 767.98px) { .page-direct-answer { margin-top: 1.25rem; padding-left: 0.875rem; font-size: 0.9375rem; line-height: 1.75; } } /* ---------- 37. ハウスメーカー住宅の外壁塗装（page-house-maker-painting-cost.php） ---------- 既存の works-hero / works-list-section / section-header / works-card / cm-faq / page-breadcrumb をそのまま利用し、このページ固有の要素だけを .house-maker-page で スコープして追加する（既存クラスの上書き・!important は行わない）。 */ .house-maker-page .hm-answer-box { max-width: 760px; margin: 0 auto; padding: 24px 28px; background: var(--clr-primary-light); border-left: 4px solid var(--clr-primary); border-radius: 6px; } .house-maker-page .hm-answer-box__lead { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--clr-primary-dark); } .house-maker-page .hm-answer-box__text { margin: 0; font-size: 0.9375rem; line-height: 1.9; color: var(--clr-text); } .house-maker-page .hm-text-block { max-width: 760px; margin: 0 auto; font-size: 0.9375rem; line-height: 1.9; color: var(--clr-text); } .house-maker-page .hm-text-block p { margin-bottom: 1rem; } .house-maker-page .hm-list { margin: 0 0 1rem; padding-left: 1.25em; list-style: disc; } .house-maker-page .hm-list li { margin-bottom: 0.4rem; } .house-maker-page .hm-note { max-width: 760px; margin: 16px auto 0; font-size: 0.8125rem; line-height: 1.8; color: var(--clr-muted); text-align: center; } .house-maker-page .hm-note a { color: var(--clr-primary-dark); text-decoration: underline; } /* 見積書チェックポイント */ .house-maker-page .hm-point-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; } .house-maker-page .hm-point-card { position: relative; padding: 20px 20px 18px; background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 8px; } .house-maker-page .hm-point-card__no { display: inline-block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--clr-primary); } .house-maker-page .hm-point-card__title { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; color: var(--clr-text); } .house-maker-page .hm-point-card__text { margin: 0; font-size: 0.875rem; line-height: 1.8; color: var(--clr-text); } /* ページ途中CTA */ .house-maker-page .hm-midcta { max-width: 760px; margin: 0 auto; padding: 28px 24px; background: var(--clr-bg-alt); border-radius: 10px; text-align: center; } .house-maker-page .hm-midcta__title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.6; color: var(--clr-text); } .house-maker-page .hm-midcta__text { margin: 0 0 18px; font-size: 0.875rem; line-height: 1.8; color: var(--clr-muted); } /* 比較表（roof-cover / roof-repair と同じ規約） */ .house-maker-page .hm-compare-table-wrap { max-width: 860px; margin: 0 auto; overflow-x: auto; } .house-maker-page .hm-compare-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .house-maker-page .hm-compare-table th, .house-maker-page .hm-compare-table td { padding: 12px 14px; border: 1px solid var(--clr-border); text-align: left; vertical-align: top; } .house-maker-page .hm-compare-table thead th { background: var(--clr-primary); color: #fff; } .house-maker-page .hm-compare-table tbody th { background: #f7f8fa; white-space: nowrap; } /* 参考価格リスト */ .house-maker-page .hm-plan-group-title { max-width: 760px; margin: 28px auto 12px; font-size: 1.0625rem; color: var(--clr-text); } .house-maker-page .hm-plan-list { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--clr-border); } .house-maker-page .hm-plan-list__item { border-bottom: 1px solid var(--clr-border); } .house-maker-page .hm-plan-list__item a { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; padding: 14px 4px; color: var(--clr-text); text-decoration: none; } .house-maker-page .hm-plan-list__item a:hover { background: var(--clr-bg-alt); } .house-maker-page .hm-plan-list__name { font-size: 0.9375rem; } .house-maker-page .hm-plan-list__price { font-size: 0.9375rem; color: var(--clr-primary-dark); white-space: nowrap; } .house-maker-page .hm-plan-list__price strong { font-size: 1.25rem; } .house-maker-page .hm-plan-list__tax { font-size: 0.75rem; color: var(--clr-muted); } @media (max-width: 600px) { .house-maker-page .hm-answer-box { padding: 20px 18px; } .house-maker-page .hm-compare-table { font-size: 0.8125rem; } .house-maker-page .hm-compare-table th, .house-maker-page .hm-compare-table td { padding: 8px 10px; } .house-maker-page .hm-plan-list__item a { padding: 12px 2px; } } /* ===================================================== 38. 現場ブログ 記事詳細（single.php）PC版の本文・画像バランス スコープ: .blog-detail-section 配下のみ（single.php だけが持つクラス）。 min-width:1024px でのみ適用し、タブレット・スマホの現在表示は変更しない。 ===================================================== */ @media (min-width: 1024px) { /* 本文カードの外枠幅は現状維持のまま、内側の本文だけを読みやすい1カラム幅（820px）に絞る。 子要素ごとに max-width を当てる方式は .blog-detail-content ul/ol の margin-left !important と衝突して字下げが崩れるため、padding で列を作る。 上下 padding（2rem）は既存のまま変えない。 */ .blog-detail-section .blog-detail-content { padding-inline: max(2rem, (100% - 820px) / 2); } /* 本文中の施工写真は本文の読み取り幅よりさらに小さくし、 見出し・説明文と同じ視線範囲に収まるようにする（1440px時 1072px → 720px）。 height:auto・object-fit なしのままなので画像は歪まない。 */ .blog-detail-section .blog-detail-content figure.wp-block-image, .blog-detail-section .blog-detail-content > img { max-width: 720px; margin-inline: auto; } /* 冒頭アイキャッチは本文中の写真より一段大きくして視覚的な主役にする（840px）。 元画像は1477pxのため、拡大表示（画質劣化）にはならない。 */ .blog-detail-section .blog-detail-thumb { max-width: 840px; margin-inline: auto; } }