/* ============================================================================ よりそいリフォーム｜プラン比較デモ（シンプルプラン）- style.css ---------------------------------------------------------------------------- 原本サイト「よりそいリフォーム」（07_samples/07_工務店・設備/yorisoi-reform/ assets/css/style.css）のデザインルール（配色・タイポグラフィ・余白・ ヘッダー/フッター/ヒーロー等の基本デザイン）をそのまま踏襲しています。 このプランで使用しないセクション（お困りごと／施工事例Before-After／ ご相談の流れ）のスタイルは含めていません（スタンダードプラン制作時に追加）。 代わりに、複数ページ構成に伴うヘッダーの現在地表示・ページ冒頭タイトル帯・ お問い合わせフォームのスタイルを追加しています。 色は index.html の に出力される :root 変数（--color-main など）を 参照しています。色を変えたいときは ../shared/company-data.mjs の theme を 編集してください（3サイト共通に反映されます）。 ========================================================================== */ /* ---- Reset / base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: hidden; } body { margin: 0; overflow-x: hidden; background: var(--color-base); color: var(--color-text); font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; font-size: 17.5px; line-height: 1.95; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul, ol, dl { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p, dd { margin: 0; } button { font: inherit; border: 0; background: none; cursor: pointer; } /* ---- Shared layout / parts ---- */ .section-inner { max-width: 1140px; margin: 0 auto; padding: 100px 24px; } @media (max-width: 768px) { .section-inner { padding: 68px 20px; } } .section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; } .kicker { display: inline-flex; align-items: center; padding: 7px 20px; border-radius: 999px; background: var(--color-beige); color: var(--color-main-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; } .section-head h1, .section-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.65; letter-spacing: .01em; } .section-lead { margin-top: 18px; color: var(--color-text-muted); font-size: 16px; line-height: 2; } .section-more { margin-top: 40px; text-align: center; } .link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-main-dark); border-bottom: 1.5px solid var(--color-main); padding-bottom: 3px; } .link-more:hover { color: var(--color-main); } /* ボタン：高齢者にも押しやすいよう、大きめのタップ領域と文字サイズを確保 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 19px 38px; border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: .02em; min-height: 60px; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn-primary { background: var(--color-main); color: var(--color-white); box-shadow: 0 14px 28px -12px rgba(78, 95, 83, .55); } .btn-primary:hover { background: var(--color-main-dark); transform: translateY(-2px); } .btn-outline { background: var(--color-white); color: var(--color-text); border: 1.5px solid var(--color-main); } .btn-outline:hover { background: var(--color-beige); transform: translateY(-2px); } .demo-notice { margin-top: 16px; max-width: 440px; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); background: var(--color-beige); border-radius: 12px; padding: 14px 20px; } .demo-notice[hidden] { display: none; } /* ============================================================================ Header（比較デモ用：プランバッジ・複数ページの現在地表示を追加） ============================================================================ */ .header { position: sticky; top: 0; z-index: 100; background: rgba(252, 250, 246, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .header-inner { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .header-logo-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--color-main); color: var(--color-white); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .header-logo-mark svg { width: 22px; height: 22px; } .header-logo-text { font-size: 1.1rem; font-weight: 700; line-height: 1.25; display: flex; flex-direction: column; letter-spacing: .01em; } .header-logo-text small { font-size: .62rem; font-weight: 500; letter-spacing: .06em; color: var(--color-text-muted); } .header-plan-badge { flex-shrink: 0; margin-right: auto; padding: 5px 14px; border-radius: 999px; background: var(--color-beige); color: var(--color-main-dark); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; } .header-nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font-size: .9rem; font-weight: 600; } .header-nav a:hover { color: var(--color-main-dark); } .header-nav a[aria-current='page'] { color: var(--color-main-dark); } .header-reserve { background: var(--color-main); color: var(--color-white) !important; padding: 13px 24px; border-radius: 10px; font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; } .header-reserve:hover { background: var(--color-main-dark); } .header-menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; flex-shrink: 0; } .header-menu-btn span { display: block; width: 26px; height: 2.5px; background: var(--color-text); margin: 0 auto; transition: transform .25s ease, opacity .25s ease; } @media (max-width: 1080px) { .header-plan-badge { display: none; } .header-nav { position: fixed; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); background: var(--color-base); flex-direction: column; align-items: flex-start; padding: 30px 28px; gap: 26px; font-size: 1.08rem; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility .3s ease; overflow-y: auto; } .header-nav.is-open { transform: translateX(0); opacity: 1; visibility: visible; } .header-reserve { width: 100%; text-align: center; justify-content: center; } .header-menu-btn { display: flex; } .header-menu-btn.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .header-menu-btn.is-open span:nth-child(2) { opacity: 0; } .header-menu-btn.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } } /* ============================================================================ Hero — 白い箱は使わず、写真の上に直接テキストを乗せる（PC）。 人物は右寄り構図を想定し、左側だけを読みやすくするグラデーションのみ使用。 スマホは768px以下のメディアクエリで写真ブロック＋テキストブロックの 上下2分割レイアウトに切り替える。 ============================================================================ */ .hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; } .hero-photo { position: absolute; inset: 0; } .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(252, 250, 246, .90) 0%, rgba(252, 250, 246, .5) 24%, rgba(252, 250, 246, 0) 50%), linear-gradient(100deg, rgba(252, 250, 246, .62) 0%, rgba(252, 250, 246, .22) 34%, rgba(252, 250, 246, 0) 58%); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 55%; } .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px 60px; } .hero-content { max-width: 600px; } .hero-title { font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.6; color: var(--color-text); } /* 読点等の位置での「任意の改行」。PCでは1行のまま（非表示）、スマホ用メディアクエリ側で表示する。 */ .soft-break { display: none; } .hero-lead { margin-top: 22px; font-size: 1.05rem; font-weight: 500; color: var(--color-text); line-height: 1.95; } .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } /* ---- スマホのヒーロー：PCと同じ「写真の上にテキストを重ねる」構造を維持する ---- 3プラン（シンプル／スタンダード／育てる）共通仕様。 よりそいリフォームのヒーロー写真は、人物（ご夫婦）が写真の右寄り（おおむね中央から 右端にかけて）に立っており、左側は床・部屋の余白になっている。スマホでもこの余白側 （左）にテキストを配置することで、人物の顔・身体にテキストが重ならないようにしている。 PC版のようにフルブリードの高さ（640px）にはせず、写真の縦幅を抑えることで 人物を大きくズームしすぎずに全身がフレーム内に収まるようにしている。 別の写真に差し替える場合は、人物の位置に応じて object-position・グラデーションの 帯の幅を再調整すること。 */ @media (max-width: 768px) { .hero { min-height: clamp(380px, 104vw, 440px); align-items: stretch; } .hero-photo::after { background: linear-gradient(100deg, rgba(252, 250, 246, .88) 0%, rgba(252, 250, 246, .8) 32%, rgba(252, 250, 246, .4) 48%, rgba(252, 250, 246, 0) 62%), linear-gradient(0deg, rgba(252, 250, 246, .38) 0%, rgba(252, 250, 246, 0) 24%); } .hero-photo img { object-position: 76% 38%; } .hero-inner { display: flex; padding: 22px 18px 20px; } .hero-content { max-width: 56%; display: flex; flex-direction: column; flex: 1; } .hero-title { font-size: 1.6rem; line-height: 1.45; } .soft-break { display: block; } .hero-lead { margin-top: 10px; font-size: .8rem; line-height: 1.65; } .hero-actions { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .hero-actions .btn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 10px; font-size: .74rem; white-space: normal; text-align: center; line-height: 1.3; } } /* ============================================================================ Service（よりそいリフォームでできること） ============================================================================ */ .service { background: var(--color-base); } .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .service-card { display: grid; grid-template-columns: 42% 1fr; align-items: stretch; background: var(--color-beige); border-radius: 18px; overflow: hidden; } .service-card-photo { overflow: hidden; } .service-card-photo img { width: 100%; height: 100%; object-fit: cover; } .service-card-body { padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; } .service-card-body h3 { font-size: 1.1rem; font-weight: 700; } .service-card-body p { margin-top: 10px; font-size: .9rem; color: var(--color-text-muted); line-height: 1.9; } @media (max-width: 860px) { .service-grid { grid-template-columns: 1fr; } .service-card { grid-template-columns: 1fr; } .service-card-photo { aspect-ratio: 16 / 9; } } /* 「できること」ページの2番目・3番目のグループ（室内・廊下／浴室・トイレ）だけ、 見出し上の余白を詰める（前グループ最後のカード〜次の見出しの間隔を縮める）。 1番目のグループ（玄関・外まわり）・カード同士の間隔（.service-grid の gap）・ 他ページの .service（TOPの4項目など）には影響しない。 */ #indoor .section-inner, #bath-toilet .section-inner { padding-top: 62px; } @media (max-width: 768px) { #indoor .section-inner, #bath-toilet .section-inner { padding-top: 42px; } } /* ============================================================================ Values（大切にしていること）— 写真なし ============================================================================ */ .values { background: var(--color-beige); } .value-list { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-item { background: var(--color-white); border-radius: 20px; padding: 32px 26px; } .value-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-accent); letter-spacing: .04em; } .value-body { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--color-border); } .value-body h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.55; } .value-body p { margin-top: 12px; font-size: .9rem; color: var(--color-text-muted); line-height: 1.9; } @media (max-width: 860px) { .value-list { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } /* ============================================================================ About（会社案内） ============================================================================ */ .about { background: var(--color-base); } /* ページタイトル帯（.page-lead）のすぐ下に来るときだけ、上の余白を少し詰める （会社案内・お問い合わせページのみ。他のページの間隔には影響しない）。 */ .page-lead + .about .section-inner { padding-top: 60px; } @media (max-width: 768px) { .page-lead + .about .section-inner { padding-top: 40px; } } .about-note { margin-top: 18px; font-size: .8rem; color: var(--color-text-muted); } .about-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .about-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; } .about-photo img { width: 100%; height: 100%; object-fit: cover; } .about-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.65; } .about-text { margin-top: 22px; color: var(--color-text-muted); font-size: .98rem; line-height: 2.05; } .about-info { margin-top: 30px; border-top: 1px solid var(--color-border); } .about-info-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .about-info-row dt { font-size: .86rem; font-weight: 700; color: var(--color-main-dark); } .about-info-row dd { font-size: .92rem; color: var(--color-text); } @media (max-width: 860px) { .about-inner { grid-template-columns: 1fr; gap: 30px; } } /* ============================================================================ CTA ============================================================================ */ .cta { padding: 96px 24px; background: linear-gradient(160deg, var(--color-beige), #E9E2D2); } .cta-card { max-width: 620px; margin: 0 auto; text-align: center; } .cta-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.65; } .cta-card > p { margin-top: 20px; color: var(--color-text-muted); font-size: 1rem; line-height: 2; } .cta-card .btn { margin-top: 34px; } .cta-meta { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-border); } .cta-phone { font-size: 1.55rem; font-weight: 700; letter-spacing: .03em; color: var(--color-main-dark); } .cta-phone small { display: block; margin-top: 4px; font-size: .72rem; font-weight: 500; color: var(--color-text-muted); } .cta-hours { margin-top: 8px; font-size: .88rem; color: var(--color-text-muted); } @media (max-width: 640px) { .cta { padding: 64px 20px; } .cta-card .btn { width: 100%; } } /* ============================================================================ ページ冒頭タイトル帯（サービス・会社案内ページ） ============================================================================ */ .page-lead { background: var(--color-beige); } .page-lead .section-inner { padding: 72px 24px 56px; } .page-lead .section-head { margin-bottom: 0; } @media (max-width: 768px) { .page-lead .section-inner { padding: 52px 20px 40px; } } /* ============================================================================ お問い合わせフォーム ============================================================================ */ .contact { background: var(--color-beige); } .contact-form { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .form-row { display: flex; flex-direction: column; gap: 8px; } .form-row label { font-size: .92rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .required { font-size: .68rem; font-weight: 700; color: var(--color-white); background: var(--color-accent); border-radius: 4px; padding: 2px 8px; } .form-row input, .form-row textarea { font: inherit; font-size: .95rem; padding: 14px 16px; border: 1.5px solid var(--color-border); border-radius: 10px; background: var(--color-white); color: var(--color-text); resize: vertical; } .form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--color-main); outline-offset: 1px; } .contact-form .btn { align-self: center; margin-top: 6px; } .contact-form .demo-notice { align-self: center; text-align: center; max-width: 480px; } /* ============================================================================ Footer ============================================================================ */ .footer { background: #3F4A41; color: rgba(252, 250, 246, .85); } .footer-inner { max-width: 1080px; margin: 0 auto; padding: 56px 24px 32px; text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.1rem; font-weight: 700; color: var(--color-white); } .footer-brand .header-logo-mark { background: rgba(252, 250, 246, .14); } .footer-brand small { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .06em; opacity: .75; } .footer-nav { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: .86rem; } .footer-contact { margin-top: 20px; font-size: .86rem; opacity: .85; } .footer-sample-notice { margin: 26px auto 0; max-width: 520px; font-size: .78rem; line-height: 1.8; opacity: .75; padding: 14px 18px; border: 1px solid rgba(252, 250, 246, .22); border-radius: 12px; } .footer-copyright { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(252, 250, 246, .14); font-size: .76rem; opacity: .65; } /* ============================================================================ スタンダードプランで追加するセクション （原本サイト「よりそいリフォーム」の trouble / cases / flow と同じデザイン言語を 踏襲し、そこにスタンダード独自の「困りごと→改善方法→相談導線」構成 （service-detailed）や、施工事例ページ用の詳細内訳（case-detail）、 独立した会社案内・お問い合わせページ用のパーツを追加している） ============================================================================ */ /* ---- Trouble（こんなお困りごとはありませんか？／TOPページ） ---- */ .trouble { background: var(--color-beige); } .trouble-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 26px; } .trouble-card { display: flex; flex-direction: column; background: var(--color-white); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 34px -22px rgba(51, 54, 49, .35); } .trouble-card-photo { aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; } .trouble-card-photo img { width: 100%; height: 100%; object-fit: cover; } .trouble-card-body { flex: 1; padding: 22px 20px 26px; } .trouble-card-body h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.55; } .trouble-card-body p { margin-top: 10px; font-size: .92rem; color: var(--color-text-muted); line-height: 1.85; } @media (max-width: 860px) { .trouble-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 560px) { .trouble-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } } /* ---- Cases（施工事例 Before / After／TOPプレビュー・施工事例ページ共通） ---- */ .cases { background: var(--color-beige); } .case-list { display: flex; flex-direction: column; gap: 56px; } .case-item { background: var(--color-white); border-radius: 22px; padding: 32px; box-shadow: 0 24px 48px -30px rgba(51, 54, 49, .4); } .case-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .case-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; } .case-photo img { width: 100%; height: 100%; object-fit: cover; } .case-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 6px 16px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--color-white); } .case-tag-before { background: rgba(90, 87, 79, .88); } .case-tag-after { background: var(--color-main); } .case-arrow { color: var(--color-main); font-size: 1.6rem; font-weight: 700; } .case-body { margin-top: 28px; text-align: center; } .case-number { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--color-main-dark); background: var(--color-beige); border-radius: 999px; padding: 5px 16px; margin-bottom: 14px; } .case-body h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.55; } .case-body > p { margin-top: 14px; font-size: .95rem; color: var(--color-text-muted); line-height: 1.95; max-width: 560px; margin-left: auto; margin-right: auto; } @media (max-width: 720px) { .case-item { padding: 22px 18px; } .case-compare { grid-template-columns: 1fr; gap: 12px; } .case-arrow { display: none; } } /* ---- 施工事例一覧ページ（cases.html）：カードグリッド ---- */ .case-list-section { background: var(--color-base); } .case-list-intro { max-width: 720px; margin: 0 auto 40px; text-align: center; font-size: .92rem; color: var(--color-text-muted); line-height: 1.9; } .case-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .case-card { display: block; background: var(--color-white); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -28px rgba(51, 54, 49, .35); transition: transform .2s ease, box-shadow .2s ease; } .case-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -26px rgba(51, 54, 49, .45); } .case-card-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .case-card-photo img { width: 100%; height: 100%; object-fit: cover; } .case-card-badge { position: absolute; top: 14px; right: 14px; background: var(--color-accent); color: var(--color-white); font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 5px 12px; border-radius: 999px; } .case-card-body { padding: 26px 26px 28px; } .case-card-category { display: inline-flex; font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--color-main-dark); background: var(--color-sub, var(--color-beige)); border-radius: 999px; padding: 5px 14px; margin-bottom: 12px; } .case-card-body h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.6; } .case-card-meta { margin-top: 14px; display: flex; gap: 20px; padding: 12px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .case-card-meta dt { font-size: .72rem; color: var(--color-text-muted); } .case-card-meta dd { margin-top: 2px; font-size: .94rem; font-weight: 700; color: var(--color-text); } .case-card-body > p { margin-top: 14px; font-size: .88rem; color: var(--color-text-muted); line-height: 1.85; } .case-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: .88rem; font-weight: 700; color: var(--color-main-dark); } .case-card-more .icon { width: 16px; height: 16px; } .case-list-note { margin-top: 36px; text-align: center; font-size: .8rem; color: var(--color-text-muted); } @media (max-width: 720px) { .case-card-grid { grid-template-columns: 1fr; gap: 26px; } } /* ---- 施工事例詳細ページ（case-01.html等） ---- */ .case-detail-lead .section-head { max-width: 760px; margin-bottom: 32px; } .case-spec-grid { max-width: 720px; margin: 0 auto; display: grid; /* 育てるプランは項目ごとに表示・非表示が入れ替わる（1〜5項目）ため、 固定4列ではなく auto-fit で常に1行に均等配置し、空セルの色帯が 余らないようにしている。 */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; } .case-spec-grid > div { background: var(--color-white); padding: 18px 14px; text-align: center; } .case-spec-grid dt { font-size: .72rem; color: var(--color-text-muted); } .case-spec-grid dd { margin-top: 6px; font-size: 1rem; font-weight: 700; color: var(--color-main-dark); } .case-narrative { background: var(--color-base); } .case-narrative-inner { max-width: 720px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 36px; } .case-narrative-block h2 { font-size: 1.05rem; font-weight: 700; color: var(--color-main-dark); } .case-narrative-block p { margin-top: 12px; font-size: .96rem; color: var(--color-text-muted); line-height: 1.95; } .case-staff-comment { background: var(--color-base); } .case-staff-comment .section-inner { padding-top: 0; } .staff-comment-card { max-width: 640px; margin: 0 auto; background: var(--color-beige); border-radius: 20px; padding: 30px 32px; text-align: center; } .staff-comment-card h2 { font-size: 1rem; font-weight: 700; color: var(--color-main-dark); } .staff-comment-card p { margin-top: 14px; font-size: .96rem; color: var(--color-text); line-height: 1.9; } /* 上（本文）との間に適度な余白を、下（次のCTAセクションの色の切り替わり）との 間には十分な白背景の余白を残し、背景の境界線にリンクが重なって見えないようにする。 */ .case-back-link { padding: 32px 24px 64px; text-align: center; } .case-back-link .link-more { display: inline-flex; } @media (max-width: 640px) { .case-spec-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } /* ---- お客様投稿例（通常投稿のシンプルな表示イメージ） ---- 工事費目安・工期などの専用欄は使わず、タイトル・日付・カテゴリー・アイキャッチ・ 本文だけのシンプルな構成。読みにくさ・レイアウト崩れが起きないよう、本文幅は 読みやすい幅に制限し、本文内画像も最大幅いっぱいに収まるようにしている。 */ .post-simple-lead .section-head { max-width: 720px; } @media (max-width: 480px) { /* お客様投稿例のタイトルは、シンプルプランのタイトル等と違って任意の改行位置を 指定していないため（カード見出し・SEOタイトルなど複数箇所で同じ文字列を そのまま再利用しているため、区切り文字を混ぜられない）、狭い画面では 文字サイズを少し下げて1行に収め、1文字だけが次行に残る状態を避けている。 */ .post-simple-lead h1 { font-size: 1.3rem; line-height: 1.5; } } .post-simple-date { margin-top: 10px; font-size: .84rem; color: var(--color-text-muted); } .post-simple-body { background: var(--color-base); } .post-simple-inner { max-width: 680px; margin-left: auto; margin-right: auto; } .post-simple-type-note { margin-bottom: 32px; font-size: .8rem; line-height: 1.8; color: var(--color-text-muted); background: var(--color-beige); border-radius: 12px; padding: 14px 18px; text-align: center; } .post-simple-featured { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; } .post-simple-featured img { width: 100%; height: 100%; object-fit: cover; } .post-simple-content { margin-top: 36px; } .post-simple-content p { font-size: .98rem; color: var(--color-text); line-height: 2.05; } .post-simple-content p + p { margin-top: 22px; } .post-simple-inline-image { margin: 28px 0; border-radius: 14px; overflow: hidden; } .post-simple-inline-image img { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .post-simple-featured { aspect-ratio: 4 / 3; } } /* ---- Flow（ご相談から工事まで／TOPページ） ---- */ .flow { background: var(--color-base); } .flow-timeline { max-width: 640px; margin: 0 auto; position: relative; padding-left: 8px; } .flow-timeline::before { content: ''; position: absolute; left: 25px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); border-radius: 2px; } .flow-step { position: relative; display: flex; gap: 24px; } .flow-step + .flow-step { margin-top: 36px; } .flow-step-dot { position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: var(--color-main); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 700; } .flow-step-body { padding-top: 8px; } .flow-step-body h3 { font-size: 1.05rem; font-weight: 700; } .flow-step-body p { margin-top: 8px; font-size: .92rem; color: var(--color-text-muted); line-height: 1.9; } /* ---- About teaser（TOPページ「よりそいリフォームについて」短縮版） ---- */ .about-teaser { background: var(--color-beige); } .about-teaser-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .about-teaser-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; } .about-teaser-photo img { width: 100%; height: 100%; object-fit: cover; } .about-teaser-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; line-height: 1.65; } .about-teaser-body p { margin-top: 18px; color: var(--color-text-muted); font-size: .96rem; line-height: 2; } .about-teaser-body .link-more { margin-top: 22px; display: inline-block; } @media (max-width: 860px) { .about-teaser-inner { grid-template-columns: 1fr; gap: 26px; } } /* ---- できることページ（スタンダード）：困りごと→改善方法→相談導線 ---- */ .service-detailed .section-head { margin-bottom: 40px; } .trouble-quote-block { max-width: 640px; margin: 0 auto 40px; background: var(--color-beige); border-radius: 18px; padding: 26px 28px; } .service-detailed.section-soft .trouble-quote-block { background: var(--color-white); } .trouble-quote-block h3 { font-size: .96rem; font-weight: 700; color: var(--color-main-dark); } .trouble-quote-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .trouble-quote-list li { font-size: .92rem; color: var(--color-text-muted); line-height: 1.8; padding-left: 18px; position: relative; } .trouble-quote-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } .solutions-heading { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 1rem; font-weight: 700; margin-bottom: 22px; } .solutions-heading-icon { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--color-main); color: var(--color-white); align-items: center; justify-content: center; } .solutions-heading-icon .icon { width: 14px; height: 14px; } .service-grid-detailed .service-card-body h4 { font-size: 1.05rem; font-weight: 700; } .service-grid-detailed .service-card-body p { margin-top: 10px; font-size: .88rem; color: var(--color-text-muted); line-height: 1.85; } /* ---- 私たちについてページ：会社概要の分離部分 ---- */ .section-company-info { background: var(--color-base); } .about-info-standalone { max-width: 640px; margin: 0 auto; } .area-highlight { text-align: center; max-width: 640px; margin: 0 auto 28px; font-size: .96rem; font-weight: 700; color: var(--color-main-dark); } /* ---- お問い合わせページ：冒頭メッセージ・電話／フォーム導線 ---- */ .contact-intro { background: var(--color-base); } .contact-example-list { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .contact-example-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; color: var(--color-text); background: var(--color-beige); border-radius: 14px; padding: 16px 18px; } .contact-example-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; color: var(--color-main); } .contact-methods { background: var(--color-beige); } .contact-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-method-card { background: var(--color-white); border-radius: 20px; padding: 32px 28px; text-align: center; } .contact-method-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--color-sub, var(--color-beige)); color: var(--color-main); align-items: center; justify-content: center; margin-bottom: 16px; } .contact-method-icon .icon { width: 22px; height: 22px; } .contact-method-card h3 { font-size: 1.1rem; font-weight: 700; } .contact-method-hours { margin-top: 6px; font-size: .86rem; color: var(--color-text-muted); } .contact-method-text { margin: 14px 0 0; font-size: .92rem; color: var(--color-text-muted); line-height: 1.85; min-height: 3.7em; } .contact-method-card .cta-phone { margin-top: 14px; } .contact-method-card .btn { margin-top: 20px; width: 100%; } @media (max-width: 720px) { .contact-methods-grid { grid-template-columns: 1fr; } } /* ---- ヘッダーナビゲーション：5ページ分でも窮屈にならないよう少し広い幅から ハンバーガーメニューへ切り替える（シンプルプランは1080pxのまま・変更なし） ---- */ @media (max-width: 1180px) and (min-width: 1081px) { .header-nav { gap: 12px; font-size: .84rem; } .header-reserve { padding: 11px 18px; } } /* ============================================================================ Back to Top（ページ上部へ戻るボタン） 3プラン（シンプル／スタンダード／育てる）共通の標準仕様。プランごとの機能差では ないため、価格や導線とは無関係に全ページ・全プランで同じ見た目・挙動にすること。 初期状態は非表示（opacity:0 / visibility:hidden）。ある程度スクロールすると assets/js/script.js が .is-visible を付与して表示する。 ============================================================================ */ .back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 48px; height: 48px; border-radius: 50%; background: var(--color-main); color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -12px rgba(78, 95, 83, .6); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease; } .back-to-top svg { width: 20px; height: 20px; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--color-main-dark); } @media (max-width: 768px) { .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } .back-to-top svg { width: 18px; height: 18px; } /* スマホでは著作権表記がBack to Topボタンの真下に来て重なりやすいため、 フッター最下部だけ少し余白を足して避ける。 */ .footer-inner { padding-bottom: 76px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ============================================================================ 育てるホームページプラン専用の追加スタイル ---------------------------------------------------------------------------- ・施工事例カードの複数カテゴリー表示 ・Beforeなしの施工事例詳細（Afterのみの大きな写真） ・追加写真ギャラリー／YouTube動画プレースホルダー ・施工事例専用入力画面デモ（case-editor.html） ========================================================================== */ /* ---- 施工事例カード：複数カテゴリーのバッジ表示 ---- */ .case-card-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .case-card-categories .case-card-category { margin-bottom: 0; } /* ---- 施工事例詳細：Before / After（上下に1枚ずつ大きく表示） ---- */ .case-photo-section .section-inner { padding-top: 64px; padding-bottom: 64px; } .case-photo-stack { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .case-photo-large { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 24px 48px -30px rgba(51, 54, 49, .4); } .case-photo-large img { width: 100%; height: 100%; object-fit: cover; } .case-photo-large .case-tag { top: 18px; left: 18px; font-size: .84rem; padding: 8px 20px; } /* ---- 施工事例詳細：その他の写真ギャラリー（メイン写真＋サムネイル切り替え） ---- */ .case-gallery-block { max-width: 900px; margin: 56px auto 0; } .case-gallery-heading { text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--color-main-dark); margin-bottom: 24px; } .case-gallery-main { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-beige); } .case-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-gallery-main-static { box-shadow: 0 24px 48px -30px rgba(51, 54, 49, .4); } .case-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--color-main-dark); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; box-shadow: 0 10px 24px -10px rgba(51, 54, 49, .5); transition: background .15s ease, transform .15s ease; } .case-gallery-nav:hover { background: var(--color-white); transform: translateY(-50%) scale(1.06); } .case-gallery-prev { left: 16px; } .case-gallery-next { right: 16px; } .case-gallery-thumbs { margin-top: 14px; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .case-gallery-thumb { flex: 0 0 auto; width: 92px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: .65; transition: opacity .15s ease, border-color .15s ease; } .case-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-gallery-thumb:hover { opacity: .9; } .case-gallery-thumb.is-active { border-color: var(--color-main); opacity: 1; } @media (max-width: 640px) { .case-photo-section .section-inner { padding-top: 44px; padding-bottom: 44px; } .case-photo-stack { gap: 24px; } .case-gallery-block { margin-top: 40px; } .case-gallery-nav { width: 38px; height: 38px; font-size: 1.25rem; } .case-gallery-thumb { width: 76px; } } /* ---- 施工事例詳細：YouTube動画（デモではプレースホルダー表示） ---- */ .case-video-placeholder { margin-top: 14px; padding: 36px 20px; border-radius: 16px; background: var(--color-beige); text-align: center; } .case-video-play { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--color-main); color: var(--color-white); font-size: 1rem; } .case-video-label { margin-top: 14px; font-size: .84rem; color: var(--color-text-muted); } .case-video-url { margin-top: 4px; font-size: .9rem; font-weight: 700; color: var(--color-main-dark); word-break: break-all; } .case-video-demo-note { margin-top: 10px; font-size: .78rem; color: var(--color-text-muted); } /* ---- 施工事例専用入力画面デモ（case-editor.html） ---- */ .case-editor-notice-section .section-inner { padding-top: 0; padding-bottom: 40px; } .case-editor-notice { max-width: 900px; margin: 0 auto; background: var(--color-beige); border-radius: 16px; padding: 24px 28px; } .case-editor-notice p { font-size: .92rem; color: var(--color-text); line-height: 1.9; } .case-editor-notice p + p { margin-top: 10px; } .case-editor-section .section-inner { padding-top: 0; } .case-editor-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; } .case-editor-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; } .case-editor-presets-label { font-size: .86rem; font-weight: 700; color: var(--color-text-muted); margin-right: 4px; } .case-editor-preset-btn { padding: 10px 18px; min-height: auto; font-size: .84rem; } .case-editor-form { display: flex; flex-direction: column; gap: 28px; } .case-editor-fieldset { border: 1px solid var(--color-border); border-radius: 16px; padding: 22px 22px 26px; } .case-editor-legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: .96rem; font-weight: 700; color: var(--color-main-dark); } .case-editor-step-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--color-main); color: var(--color-white); font-size: .74rem; font-weight: 700; } .case-editor-field { margin-top: 18px; } .case-editor-field:first-child { margin-top: 4px; } .case-editor-field-label { display: block; font-size: .86rem; font-weight: 700; color: var(--color-text); } .case-editor-required { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--color-accent); color: var(--color-white); font-size: .68rem; font-weight: 700; vertical-align: middle; } .case-editor-help { margin-top: 6px; font-size: .78rem; color: var(--color-text-muted); line-height: 1.7; } .case-editor-input, .case-editor-textarea { width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-white); color: var(--color-text); font-size: .92rem; font-family: inherit; } .case-editor-textarea { resize: vertical; line-height: 1.8; } .case-editor-checkbox-group, .case-editor-radio-group { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; } .case-editor-checkbox, .case-editor-radio { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--color-text); } .case-editor-photo-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; } .case-editor-photo-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-white); text-align: center; transition: border-color .15s ease, background .15s ease; } .case-editor-photo-btn img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; } .case-editor-photo-btn span { font-size: .7rem; color: var(--color-text-muted); line-height: 1.4; } .case-editor-photo-btn:hover { border-color: var(--color-main); } .case-editor-photo-btn.is-selected { border-color: var(--color-main); background: var(--color-beige); } .case-editor-photo-btn.is-selected span { color: var(--color-main-dark); font-weight: 700; } /* ---- Before/After：未選択の枠 ⇄ 選択後の1枚プレビュー ---- */ .case-editor-photo-slot { margin-top: 12px; } .case-editor-photo-pick-btn, .case-editor-photo-change-btn { padding: 12px 22px; min-height: auto; font-size: .84rem; } .case-editor-photo-preview { position: relative; max-width: 260px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 10px; } .case-editor-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-editor-photo-remove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px; background: rgba(51, 54, 49, .72); color: var(--color-white); font-size: .95rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .case-editor-photo-remove:hover { background: rgba(51, 54, 49, .9); } /* ---- その他の写真：選んだ分だけのサムネイル（×で削除） ---- */ .case-editor-gallery-thumbs-edit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .case-editor-gallery-thumbs-edit:empty { margin-top: 0; } .case-editor-gallery-thumb-edit { position: relative; width: 92px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; } .case-editor-gallery-thumb-edit img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-editor-gallery-thumb-edit .case-editor-photo-remove { width: 22px; height: 22px; top: 4px; right: 4px; font-size: .8rem; } /* ---- 画像選択モーダル（Before/After/その他の写真で共用） ---- */ .case-editor-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(51, 54, 49, .55); display: flex; align-items: center; justify-content: center; padding: 24px; } .case-editor-modal-overlay[hidden] { display: none; } .case-editor-modal { width: 100%; max-width: 720px; max-height: 86vh; display: flex; flex-direction: column; background: var(--color-white); border-radius: 20px; padding: 28px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .4); } .case-editor-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .case-editor-modal-header h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .case-editor-modal-close { width: 34px; height: 34px; border-radius: 999px; font-size: 1.2rem; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; } .case-editor-modal-close:hover { background: var(--color-beige); } .case-editor-modal-note { margin-top: 10px; font-size: .8rem; color: var(--color-text-muted); line-height: 1.7; } .case-editor-modal-grid { margin-top: 18px; overflow-y: auto; padding-right: 4px; } .case-editor-modal-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .case-editor-modal-count { font-size: .8rem; color: var(--color-text-muted); } .case-editor-modal-actions { display: flex; gap: 10px; margin-left: auto; } .case-editor-modal-actions .btn { padding: 12px 22px; min-height: auto; font-size: .86rem; } @media (max-width: 640px) { .case-editor-modal { padding: 20px; max-height: 90vh; } .case-editor-modal-overlay { padding: 12px; } } .case-editor-preview-sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; } .case-editor-preview-label { font-size: .78rem; font-weight: 700; color: var(--color-text-muted); margin-top: 18px; } .case-editor-preview-label:first-child { margin-top: 0; } .case-editor-preview-frame { border: 1px solid var(--color-border); border-radius: 16px; padding: 22px 20px; background: var(--color-white); max-height: 620px; overflow-y: auto; } .case-editor-empty-note { font-size: .82rem; color: var(--color-text-muted); line-height: 1.8; } .case-editor-mini-lead .kicker { font-size: 10px; padding: 5px 14px; } .case-editor-mini-lead h3 { margin-top: 10px; font-size: 1.05rem; font-weight: 700; line-height: 1.6; } .case-editor-mini-spec { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .case-editor-mini-spec > div { padding: 10px 8px; } .case-editor-mini-spec dd { font-size: .84rem; } .case-editor-mini-stack { margin-top: 18px; gap: 14px; } .case-editor-mini-photo { aspect-ratio: 16 / 10; box-shadow: none; } .case-editor-mini-gallery-block { margin-top: 20px; } .case-editor-mini-gallery-block h4 { font-size: .84rem; font-weight: 700; color: var(--color-main-dark); margin-bottom: 10px; } .case-editor-mini-gallery-block .case-gallery-main { aspect-ratio: 16 / 10; } .case-editor-mini-gallery-block .case-gallery-main-static { box-shadow: none; } .case-editor-mini-gallery-block .case-gallery-nav { width: 34px; height: 34px; font-size: 1.1rem; } .case-editor-mini-gallery-block .case-gallery-thumb { width: 56px; } .case-editor-preview-frame .case-narrative-block { margin-top: 20px; } .case-editor-preview-frame .case-narrative-block h4 { font-size: .88rem; font-weight: 700; color: var(--color-main-dark); } .case-editor-preview-frame .case-narrative-block p { margin-top: 8px; font-size: .84rem; color: var(--color-text-muted); line-height: 1.8; } .case-editor-mini-staff { margin-top: 20px; padding: 18px 18px; } .case-editor-mini-staff h4 { font-size: .84rem; font-weight: 700; color: var(--color-main-dark); } .case-editor-mini-staff p { margin-top: 8px; font-size: .84rem; } .case-editor-mini-backlink { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: .8rem; font-weight: 700; color: var(--color-main-dark); } .case-editor-list-preview, .case-editor-top-preview { border: 1px solid var(--color-border); border-radius: 16px; padding: 14px; background: var(--color-white); } .case-editor-mini-card { box-shadow: none; } .case-editor-mini-card .case-card-body { padding: 16px 18px 18px; } .case-editor-mini-card .case-card-photo { aspect-ratio: 16 / 10; } @media (max-width: 960px) { .case-editor-layout { grid-template-columns: 1fr; } .case-editor-preview-sticky { position: static; } } @media (max-width: 640px) { .case-editor-photo-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .case-editor-fieldset { padding: 18px 16px 20px; } }