/* ========================================================= ヒーローセクション＋フローティングヘッダー ※ が付いているページに適用（index.html / hearing.html / contact.html / terms-comisai.html など） ========================================================= */ /* ---------- フローティングヘッダー（ソリッド白・ライン無し） ---------- */ body.has-hero { padding-top: 0; } body.has-hero .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: auto; padding: 10px 0; margin-bottom: 0; background: #ffffff; border-bottom: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); transition: box-shadow 0.25s ease; } body.has-hero .site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); } body.has-hero .header-inner { padding: 4px 24px; } body.has-hero .logo-image { height: 50px; } /* ---------- ヒーローセクション ---------- 調整しやすいようCSS変数でまとめています。下記の値を変えるだけで背景色・クラッカーのサイズ／位置が変更できます。 ------------------------------------------- */ .hero { /* 🎨 背景カラー */ --hero-bg: #1D9E75; /* 🎉 クラッカー共通（左右同時に変わる） */ --cracker-size: 600px; /* クラッカーの大きさ（一辺） */ --cracker-top: 60%; /* 上下位置（top%）。50%=中央 */ --cracker-gap: 280px; /* 中央（テキスト側）からクラッカーまでの距離 */ /* 🔷 幾何学パターン（Memphis） */ --pattern-opacity: 0.55; /* パターン全体の濃度（0〜1） */ --pattern-size: 160px; /* タイル幅（大きいほど柄もゆったり） */ /* ☀️ サンバースト（価格の奥で放射） */ --sunburst-opacity: 0.35; /* 全体の濃度 */ --sunburst-size: 180vmax; /* サンバーストの直径 */ --sunburst-top: 50%; /* 上下位置（価格と揃える） */ /* 左クラッカー個別（未指定なら共通値を使用） */ --cracker-left-size: var(--cracker-size); --cracker-left-top: var(--cracker-top); --cracker-left-gap: var(--cracker-gap); /* 右クラッカー個別 */ --cracker-right-size: var(--cracker-size); --cracker-right-top: var(--cracker-top); --cracker-right-gap: var(--cracker-gap); position: relative; width: 100%; height: 88vh; min-height: 560px; max-height: 900px; overflow: hidden; background: var(--hero-bg); } /* ---------- 幾何学パターン（Memphis 風） ---------- */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--pattern-opacity); background-repeat: repeat; background-size: var(--pattern-size) var(--pattern-size); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='white' fill-opacity='0.28'%3E%3Ccircle cx='22' cy='34' r='5'/%3E%3Ccircle cx='128' cy='100' r='3.5'/%3E%3Ccircle cx='88' cy='16' r='2.5'/%3E%3Ccircle cx='48' cy='112' r='2.5'/%3E%3Ccircle cx='140' cy='50' r='2'/%3E%3Cpolygon points='118,130 130,148 106,148'/%3E%3C/g%3E%3Cg fill='none' stroke='white' stroke-opacity='0.28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='104' cy='30' r='8'/%3E%3Cpath d='M 18 84 q 6 -8 12 0 t 12 0 t 12 0'/%3E%3Cpath d='M 72 70 v 12 M 66 76 h 12'/%3E%3Cpath d='M 148 118 l -8 8 M 140 118 l 8 8'/%3E%3Cpolygon points='150 80, 158 90, 150 100, 142 90'/%3E%3Cpath d='M 30 148 q 5 -5 10 0'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 放射状サンバースト（価格の奥） ---------- */ .hero::after { content: ''; position: absolute; top: var(--sunburst-top); left: 50%; transform: translate(-50%, -50%); width: var(--sunburst-size); height: var(--sunburst-size); z-index: 0; pointer-events: none; opacity: var(--sunburst-opacity); border-radius: 50%; background: repeating-conic-gradient( from 0deg, rgba(255, 255, 255, 0.38) 0deg 6deg, transparent 6deg 15deg ); -webkit-mask-image: radial-gradient( circle at center, black 4%, black 22%, transparent 70% ); mask-image: radial-gradient( circle at center, black 4%, black 22%, transparent 70% ); } /* ---------- クラッカー配置（中央基点） ---------- 中央（50%）から --cracker-*-gap だけ離れた位置にクラッカーの内側エッジが来るように配置します。画面幅が変わってもテキストとの距離関係は一定に保たれます。 --------------------------------------------------- */ .hero-cracker { position: absolute; z-index: 1; pointer-events: none; background-image: url('../img/cracker.png'); background-repeat: no-repeat; background-size: contain; background-position: center; } .hero-cracker-left { width: var(--cracker-left-size); height: var(--cracker-left-size); top: var(--cracker-left-top); left: calc(50% - var(--cracker-left-gap) - var(--cracker-left-size)); transform: translateY(-50%); } .hero-cracker-right { width: var(--cracker-right-size); height: var(--cracker-right-size); top: var(--cracker-right-top); left: calc(50% + var(--cracker-right-gap)); transform: translateY(-50%) scaleX(-1); /* 左右反転 */ } /* ---------- ヒーロー内テキスト ---------- */ .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; } .hero-tagline { display: inline-block; font-size: 28px; font-weight: 700; color: #ffffff; background: #D94A3C; /* 濃いめコーラルレッド */ padding: 9px 24px; border-radius: 999px; margin: 0 0 32px; /* 価格との呼吸感UP */ letter-spacing: 0.04em; box-shadow: 0 6px 18px rgba(140, 30, 20, 0.32); } .hero-title { margin: 0 0 36px; /* 価格下の呼吸感UP */ font-weight: 900; color: #ffffff; line-height: 1.1; letter-spacing: 0.01em; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; } .hero-title-prefix { font-size: 48px; font-weight: 800; color: #ffffff; text-shadow: 0 3px 0 rgba(0, 60, 40, 0.25), 0 8px 20px rgba(0, 0, 0, 0.22); } .hero-title-num { font-size: 190px; /* 160 → 190 */ font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: -0.02em; font-family: 'Helvetica Neue', 'Arial', sans-serif; text-shadow: 0 5px 0 rgba(0, 60, 40, 0.32), /* 深緑の立体影 */ 0 12px 0 rgba(0, 0, 0, 0.10), /* 追加の立体感 */ 0 18px 32px rgba(0, 0, 0, 0.28); /* 大きくふわっと浮かせる影 */ } .hero-title-yen { font-size: 60px; font-weight: 800; color: #ffffff; text-shadow: 0 3px 0 rgba(0, 60, 40, 0.25), 0 8px 20px rgba(0, 0, 0, 0.22); } .hero-features { font-size: 28px; font-weight: 700; color: #0E5E45; /* 深緑 */ margin: 0; padding: 14px 28px; background: #F3C94A; /* 濃いゴールド */ border: 1px solid rgba(14, 94, 69, 0.12); border-radius: 8px; letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(120, 80, 0, 0.25); } /* ---------- スクロール誘導 ---------- */ .hero-scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #ffffff; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; opacity: 0.9; text-shadow: 0 2px 6px rgba(0, 60, 40, 0.25); } .hero-scroll-arrow { width: 22px; height: 22px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(45deg); animation: hero-bounce 1.6s infinite; } @keyframes hero-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(4px, 4px); } } /* ---------- レスポンシブ ---------- */ @media (max-width: 900px) { .hero { height: 80vh; min-height: 480px; --cracker-size: 220px; --cracker-gap: 200px; } .hero-tagline { font-size: 15px; padding: 7px 18px; margin-bottom: 22px; } .hero-title { margin-bottom: 26px; } .hero-title-prefix { font-size: 32px; } .hero-title-num { font-size: 110px; } .hero-title-yen { font-size: 44px; } .hero-features { font-size: 16px; padding: 12px 20px; } body.has-hero .logo-image { height: 42px; } } @media (max-width: 600px) { /* スマホでは位置ずれの原因になるため非表示（601px以上は従来どおり） */ .hero-cracker { display: none; } .hero { height: auto; /* 従来 78vh の半分（PC版は max-width:600px 未満のため影響なし） */ min-height: 39vh; /* 固定ヘッダー直下にタグラインが潜らないよう余白（601px以上は変更なし） */ padding-top: calc(env(safe-area-inset-top, 0px) + 68px); --cracker-size: 130px; --cracker-gap: 40px; /* クラッカー非表示時のフォールバック用 */ } .hero-content { padding: 20px 16px; } .hero-tagline { font-size: 13px; padding: 6px 14px; margin-bottom: 20px; } .hero-title { flex-direction: row; gap: 4px; margin-bottom: 22px; } .hero-title-prefix { font-size: 24px; } .hero-title-num { font-size: 74px; } .hero-title-yen { font-size: 30px; } .hero-features { font-size: 13px; padding: 10px 14px; line-height: 1.6; } .hero-scroll { bottom: 14px; } .hero-scroll-text { font-size: 10px; } body.has-hero .header-inner { padding: 4px 14px; } body.has-hero .logo-image { height: 38px; } } /* ---------- タブレット帯のみ：メインビジュアルの高さを 20% 短く ---------- PC（≥1200px）とスマホ（≤600px）は変更しない。既存の (max-width: 900px) と同 specificity のため、宣言順で上書きする。 */ @media (min-width: 901px) and (max-width: 1199px) { /* ベース 88vh / min 560px / max 900px の 0.8 倍 */ .hero { height: 70.4vh; min-height: 448px; max-height: 720px; } } @media (min-width: 601px) and (max-width: 900px) { /* (max-width:900px) ブロックの 80vh / 480px の 0.8 倍 */ .hero { height: 64vh; min-height: 384px; } }