/* ===================================================================== HP-v2 Original Modernized — TOP ページのみ適用される refinements --------------------------------------------------------------------- - 適用先: のみ（30 ページには影響しない） - 範囲: Hero / typography / spacing / card / image usage の微修正のみ - 非目標: レイアウト変更・SaaS 化・ブランド化・モノクロ化 - 目標: 2020 年前後の医療 LP 感（濃い overlay / 太字バナー / 装飾ピル）を引き算 ===================================================================== */ /* ===================================================================== 1. HERO refinement — overlay 軽量化 + タイポ静音化 ===================================================================== */ /* 高さを抑え圧迫感を軽減（critical CSS と整合） */ body.index-mod .hero { min-height: 75vh; padding-bottom: 4rem; } /* Eyebrow: ボーダー付きピル UI を撤去し、左に細罫線を引く控えめな扱いへ */ body.index-mod .hero__eyebrow { display: inline-flex; align-items: center; gap: .75rem; border: 0; padding: 0; background: transparent; color: rgba(255,255,255,.92); font-weight: 500; letter-spacing: .12em; text-transform: none; /* 「江坂駅徒歩2分／ …認定施設」が狭い端末でも1行に収まるよう自動縮小＋nowrap */ font-size: clamp(0.68rem, 3.2vw, 0.8125rem); white-space: nowrap; margin-bottom: 1.5rem; } body.index-mod .hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,.6); } /* タイトル: 太字バナー感を抑える（weight 700 → 500、サイズ控えめ、行間を少し広く） */ body.index-mod .hero__title { font-weight: 500; font-size: clamp(1.45rem, 4.5vw, 3.25rem); line-height: 1.45; letter-spacing: .005em; margin-bottom: 1.5rem; text-shadow: 0 2px 24px rgba(0,0,0,.15); } /* Lead: 不透明度を上げ可読性確保、最大幅広め */ body.index-mod .hero__lead { color: rgba(255,255,255,.94); max-width: 540px; /* スマホは文（最長24字）が1行に収まるよう幅連動で自動縮小。上限1rem */ font-size: clamp(0.7rem, 3.5vw, 1rem); line-height: 1.95; margin-bottom: 2.25rem; text-shadow: 0 1px 12px rgba(0,0,0,.20); } /* リード文はフレーズ単位(inline-block)で折り返し、孤立文字（「応。」等）を防ぐ。さらに各フレーズ内部は nowrap で折り返さない（「2文字だけ落ちる」を防止） */ body.index-mod .hero__lead span { display: inline-block; white-space: nowrap; } /* Hero 内 CTA ボタン: 丸み・サイズを整え、写真の上で浮きすぎないように */ body.index-mod .hero .btn--lg { border-radius: 10px; padding: 1rem 1.875rem; font-size: .9375rem; letter-spacing: .04em; min-height: 48px; } body.index-mod .hero .btn--primary { background: #1A2E44; box-shadow: 0 8px 24px rgba(0,0,0,.18); } body.index-mod .hero .btn--primary:hover { background: #2D4A6B; transform: translateY(-1px); } /* ===================================================================== 2. Typography refinement — 見出しを少し軽く、間隔を整理 ===================================================================== */ /* セクション見出し（en）：装飾感を抑え、サブヘッダ感を強める */ body.index-mod .section-heading__en { font-weight: 500; letter-spacing: .25em; font-size: .75rem; opacity: .85; } /* セクション見出し（ja）：weight 700 → 600 で重さ軽減 */ body.index-mod .section-heading__ja { font-weight: 600; letter-spacing: .005em; } /* セクションリード: 行間広め、最大幅統一 */ body.index-mod .section-heading__lead { max-width: 640px; margin-inline: auto; line-height: 1.95; } /* ===================================================================== 3. Spacing refinement — セクション間の呼吸を均一化 ===================================================================== */ body.index-mod main .section { padding-block: 5rem; } @media (min-width: 1024px) { body.index-mod main .section { padding-block: 5.5rem; } } /* container 内縦リズム整え */ body.index-mod .section-heading { margin-bottom: 1rem; } /* ===================================================================== 4. Card refinement — 装飾を引き算、輪郭を柔らかく ===================================================================== */ /* 症状カード: emoji × 円形背景の装飾を撤去 → アイコンを小さく無背景に（絵文字自体は意味伝達として残す。背景円が "2020 年医療 LP 感" の主因） */ body.index-mod .symptom-card { border-radius: 12px; border-width: 1px; padding: 1.25rem .875rem 1rem; gap: .625rem; background: var(--c-surface); } body.index-mod .symptom-card:hover { border-color: var(--c-accent); box-shadow: 0 6px 18px rgba(26,46,68,.06); background: var(--c-surface); } body.index-mod .symptom-card__icon { width: 32px; height: 32px; background: transparent; font-size: 20px; opacity: .85; } body.index-mod .symptom-card__label { font-weight: 600; font-size: .875rem; line-height: 1.5; } /* feature-item の番号: ベタ塗り円 → 細罫アウトライン円、weight 軽く（院長の "3つの専門性" を権威ではなく整理として見せる） */ body.index-mod .feature-item__number { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); font-weight: 500; font-size: 1.0625rem; } /* feature-item__title: 見出しを少し軽く */ body.index-mod .feature-item__title { font-weight: 600; } /* スマホ：番号(48px)がタイトル列を圧迫し折り返す問題。番号を幅連動で縮小＋gap圧縮、タイトルは狭い端末のみ微縮小。端末幅に応じて自動調整 */ @media (max-width: 600px) { body.index-mod .feature-item { gap: var(--sp-3); } body.index-mod .feature-item__number { width: clamp(30px, 8.5vw, 40px); height: clamp(30px, 8.5vw, 40px); font-size: clamp(0.85rem, 3.4vw, 1.0625rem); } body.index-mod .feature-item__title { font-size: clamp(1.05rem, 5.5vw, 1.25rem); } } /* ボタン全般: 角丸を統一感ある 10px に（4px は硬い印象） */ body.index-mod .btn { border-radius: 10px; letter-spacing: .04em; } /* ヒーローの予約ボタン：大腸/胃/肛門でサイズを統一（中央寄せ＋同一幅、スマホは全幅） */ body.index-mod .hero__buttons .btn { justify-content: center; min-width: 224px; } @media (max-width: 600px) { /* スマホは全幅だと大きすぎるため、統一幅で少し小さめに（高さ・余白も抑える） */ body.index-mod .hero__buttons .btn { width: auto; min-width: 200px; padding: 0.7rem 1.4rem; min-height: 44px; font-size: 0.875rem; } /* HEROタイトル：スマホで小さく細く見えるため、大きめ＋太字に（「おなかとおしりのクリニック」12字が折り返さない範囲で最大化）*/ body.index-mod .hero__title { font-size: clamp(1.25rem, 6.2vw, 1.75rem); font-weight: 700; line-height: 1.4; letter-spacing: 0; } /* ヒーローは小さくせず（min-height:75vh維持）、コンテンツ(タイトル〜ボタン)を下寄せにして「ボタン3つの後の余白」を無くす。上寄せ(flex-start)だと下に空きが出る。 hero__content を全高ストレッチ＋縦flexで下詰めにする（ヘッダー被りは padding-top で回避）*/ /* ヒーロー自体を縦flex＋下詰めにし、コンテンツ全体（タイトル〜ボタン）を画像下端へ。ボタン下の余白を最小化。上は padding-top でヘッダー被りを回避。ヒーロー高さ(75vh)は維持 */ /* タイトルは一番上のまま、ボタンだけ下端へ。 iOS対策：親(min-height)依存の flex:1 は子が伸びないため、hero__content 自身に min-height:75vh を持たせて自前で高さを確保し、margin-top:auto でボタンを下端へ */ body.index-mod .hero { align-items: stretch; padding-bottom: 0; /* 既存64pxを除去 */ } body.index-mod .hero__content { min-height: 75vh; display: flex; flex-direction: column; padding-left: 1rem; padding-right: 1rem; padding-top: 84px; padding-bottom: 1.25rem; } body.index-mod .hero__buttons { margin-top: auto; } } /* ===================================================================== 5. Image usage refinement — 施設写真 4 枚で 2×2 グリッド ===================================================================== */ body.index-mod .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width: 768px) { body.index-mod .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } body.index-mod .photo-grid__item { border-radius: 12px; overflow: hidden; } body.index-mod .photo-grid__item img { transition: transform .4s cubic-bezier(.25,.46,.45,.94); } body.index-mod .photo-grid__item:hover img { transform: scale(1.03); } /* 院長ブロック: 写真はカラーのまま、引用ブロックの太装飾を引き算 */ body.index-mod .doctor-block__message { border-left: 2px solid var(--c-accent); background: transparent; padding-left: 1.25rem; font-style: normal; font-weight: 400; color: var(--c-text-mid); line-height: 1.95; } /* ===================================================================== 6. WEB 予約セクション refinement — ボタン角の硬さを和らげる ===================================================================== */ body.index-mod #reserve .btn--lg { border-radius: 10px; }