/* ============================================================ くまのポケットLP — ビルド後の上書きスタイル ChatGPT納品のビルド成果物(index-*.css)は直接編集せず、こちらに追記してで後ろから当てる。 Astro化するときはこのファイルの内容を正規のCSSへ取り込む。 ============================================================ */ /* プレースホルダの色を明示する（2026-08-28）元のTailwind preflightは @supports (not (-webkit-appearance:-apple-pay-button)) { ::placeholder{color:currentColor} } という書き方で、Safariではこのブロックが当たらず ::placeholder{opacity:1} だけが効く。その結果、入力済みの文字と同じ濃さに見えて「もう入力済み」と誤解される。ブラウザ差をなくすため、入力欄のプレースホルダの色を固定する。 */ .contact-form input::placeholder, .contact-form textarea::placeholder { /* 2026-08-29 ユーザー指摘で 110,105,100 → 薄く調整。濃すぎると「入力済み」に見え、薄すぎると主要購買層に読みにくい。 */ color: rgb(152, 146, 139); opacity: 1; } /* ハニーポット（2026-08-28）人間には見えず、フォーカスもされず、スクリーンリーダーにも読まれない。ボットは自動入力しがちなので、埋まっていたらサーバー側で静かに破棄する。 display:none は「入力できない欄」としてスキップするボットがいるため使わない。 */ .contact-form .bp-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* 写真を選んだことが分かるようにする（2026-08-29）受領時点ではファイルを選んでも見た目が変わらず、添付できたか分からなかった。状態の付与は form-fixes.js（input.files を正として has-file クラスと data-file-name を貼る）。ここは見た目だけを担当する。 */ .contact-form .contact-photo-card.has-file { border-style: solid; border-color: #2e9e6b; background-color: #f2fbf6; background-position: center; background-size: cover; background-repeat: no-repeat; } /* サムネイルの上に文字が乗るので、白い膜を敷いて可読性を確保する */ .contact-form .contact-photo-card.has-file::before { content: ""; position: absolute; inset: 0; background: #ffffffb8; /* 写真が透けて見える濃さに調整 */ pointer-events: none; } .contact-form .contact-photo-card.has-file > * { position: relative; z-index: 1; } /* ボタンを「選択済み」の見た目に差し替える。中の文字はReactが持っているので、font-size:0 で隠して擬似要素で描く。 */ .contact-form .contact-photo-card.has-file .contact-photo-action { color: #0a7a4f; background: #d3f2e2; font-size: 0; } .contact-form .contact-photo-card.has-file .contact-photo-action::before { content: "✓ 選択済み"; font-size: 12px; font-weight: 900; } /* 選んだファイル名をカード下部に出す */ .contact-form .contact-photo-card.has-file::after { content: attr(data-file-name); position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: #0a7a4fe6; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* スマホではカードが横並びのグリッド（高さ82px）になり、下部のファイル名帯が本文と重なるため、その分の余白を確保する */ @media (max-width: 760px) { .contact-form .contact-photo-card.has-file { padding-bottom: 22px; } } /* ドラッグ＆ドロップ添付の見た目（2026-08-29）処理は form-fixes.js。ここは状態に応じた見え方だけ。 */ .contact-form .contact-photo-card.is-dragover { border-style: solid; border-color: #378db8; background-color: #eaf6fb; box-shadow: 0 0 0 4px #378db833; } /* 受け付けられない形式・容量オーバーのときに一瞬だけ赤くする */ .contact-form .contact-photo-card.is-invalid { border-style: solid; border-color: #d9534f; background-color: #fdf1f1; } .contact-form .contact-photo-card.is-invalid .contact-photo-action { color: #b33; background: #fadbdb; font-size: 0; } .contact-form .contact-photo-card.is-invalid .contact-photo-action::before { content: "この形式・容量は不可"; font-size: 11px; font-weight: 900; } /* ドラッグ＆ドロップが使えるのはPCなので、広い画面だけ案内を出す。文言はReactが持つ要素の後ろに擬似要素で足す（HTML/JSを触らずに済む） */ @media (min-width: 761px) { .contact-form .contact-upload-limits::after { content: "／ドラッグ＆ドロップでも添付できます"; } } /* 添付の取り消しボタン（2026-08-29 ユーザー指摘）一度選ぶと差し替えしかできず、空に戻せなかった。要素の生成は form-fixes.js。ここは見た目と当たり判定だけ。カード自体が（クリックでファイル選択が開く）の上に乗るので、ボタンの領域だけは確実にボタンが受け取れるよう z-index を上げる。 */ .contact-form .contact-photo-card .contact-photo-remove { position: absolute; z-index: 3; right: 4px; bottom: 1px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: #fff; color: #0a7a4f; font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } .contact-form .contact-photo-card .contact-photo-remove:hover, .contact-form .contact-photo-card .contact-photo-remove:focus-visible { background: #c0392b; color: #fff; } /* ファイル名が長いとボタンの下に潜るので、帯の右側を空けておく */ .contact-form .contact-photo-card.has-file::after { padding-right: 28px; } /* スマホは指で押すため、見た目は同じまま当たり判定だけ広げる */ @media (max-width: 760px) { .contact-form .contact-photo-card .contact-photo-remove::after { content: ""; position: absolute; top: -9px; right: -9px; bottom: -9px; left: -9px; } } /* 「送信中」の表示（2026-08-30 ユーザー指摘）写真つきだと確認画面へ移るまで数秒〜十数秒かかるため、押した瞬間だけ出す。処理は form-fixes.js。押す前から常時出すと申し込み直前に不安を与えるので出さない。 */ .contact-form .contact-sending-note { display: none; margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.6; color: #0a7a4f; } .contact-form .contact-sending-note.is-visible { display: block; } /* 押せなくなったことが見て分かるようにする */ .contact-form button[type="submit"][disabled] { opacity: .65; cursor: progress; } /* セット価格の「〜」（2026-08-30）レンジフードは設置環境で費用が変わるため「115,000円〜」と出す。円のうしろに置く必要があるので、描画側（page-*.js）に任意の接尾辞を足し、ここでは見え方だけを持つ。円マークと同じ大きさに揃える。 */ .set-price .set-price-suffix { font-family: system-ui, sans-serif; font-size: .48em; font-weight: 900; letter-spacing: 0; margin-left: 1px; } /* ===== FVの主役を社名からカテゴリへ（2026-09-04・渡邊さん判断） ===== 広告クリックの 77.9%以上が「給湯器」を含む語句なのに、着地FVに「給湯器」が1文字も無かった。最大の文字は社名でも `10,000` でもなく、扱っている商材にする。・h1 … 社名 → 「エコキュート・ガス給湯器の / 交換専門店」・実績帯 … 96px の `10,000` を小さな1行の帯へ降ろす（広告アセットとは引き続き呼応）・社名 … h1 から独立した小さな行へメーカー名（ノーリツ等）はFVに出さない判断。ページ内のメーカーナビ・商品カード・「取扱メーカー」表記は残してあり、ノーリツ検索者はスクロールで取扱いを確認する導線。既存の .hero-record の定義は参照されなくなるが、消さずに残している（index-*.css はビルド成果物のため直接編集しない）。 */ .hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; margin: 18px 0 0; color: var(--brown); font-size: 17px; font-weight: 900; letter-spacing: .02em; line-height: 1.5; } .hero-badges i { font-style: normal; font-weight: 700; color: #c9b6a6; } .hero-company { margin: 9px 0 0; color: #8a7a6d; font-size: 14px; font-weight: 800; letter-spacing: .04em; line-height: 1.5; } @media (width<=760px) { /* モバイルは .hero-copy が中央寄せなので、こちらも中央に揃える */ .hero-badges { justify-content: center; margin-top: 15px; font-size: 15px; } .hero-company { text-align: center; margin-top: 8px; font-size: 13px; } } @media (width<=370px) { .hero-badges { font-size: 14px; gap: 4px 8px; } .hero-company { font-size: 12px; } } /* 社名の行「あったかリフォーム生活くまのポケット」をFVから外した件（2026-09-04） 🔴 これは渡邊さんの明示指定。「要らないので、そのフォントサイズで注記を1行に」。 9/3コピー案は社名を「残すべきもの（触らない）」に入れていた（根拠: 指名51クリック/月が実在する）が、その判断は上書きされている。社名はヘッダーのロゴに残っているので、ページから消えたわけではない。 */ /* ===== FVに価格を出す（2026-09-04・渡邊さん案） ===== 実績10,000件をエリア横の小さい枠へ移し、空いた最大枠に価格を置く。費用・補助金で来た約70クリックがCV0だったことへの回答。数字はLPの交換例01と一致（370L・3〜5人家族／本体・標準工事・撤去処分 ¥345,000 − 補助7万円）。 ⚠️ 補助金依存の価格であること（2026-09-04 訂正）初版はここに「出す前に⑤を決めておくこと」と書いていたが、それは誤り。同じ価格表示は改修前から本番の #price にあり、⑤はこの改修が作った問題ではない。 ⑤（補助金不採択時の差額7万円の扱い）は独立した未解決事項で、これのブロッカーではない。ただし当たる回数は増える。下までスクロールした人だけが見ていたものを、来た人全員が最初に見る。種類は同じでも期待損失は上がる。 ⚠️ 給湯省エネ2026の予算枠が切れた日に、この表示は成立しなくなる。即日で価格ブロックを外す運用が要る（LP内に「予算上限に達し次第、受付が終了します」と明記済み）。 ⚠️ これは9/3コピー案の「案C（価格提示型）」に当たる。案Cは第3弾・保留の扱いで、要クライアント確認が3点ついていた。①機種を常時供給できるか ②枠切れ時に即差し替えできるか ③この金額を表看板にしてよいか。③はミラーを見せて合意を取る形で処理する。 ⚠️ 「最新機種」はLPに裏付けが無い語だったので「エコキュート」に変更済み。 */ .hero-pricenote { margin: 6px 0 0; color: #6b5d52; font-size: 14px; font-weight: 700; line-height: 1.55; letter-spacing: .01em; } /* ※以降は同じ大きさのまま、色だけ落として区切る（渡邊さん指定で1行に） */ .hero-pricenote span { color: #8a7a6d; margin-left: .5em; } @media (width<=760px) { /* サイズは元の実績表示のまま（渡邊さん指定）。「エコキュート275,000円〜」は1行に入らないので、折り返しを許す。 */ .hero-record { flex-wrap: wrap; white-space: normal; row-gap: 0; } .hero-record strong { white-space: nowrap; } /* 31字は375pxに1行で入らない（13pxで403px必要）。数字の途中で割れるのを防ぐため、※の前で明示的に折る。PCは1行のまま。 */ .hero-pricenote { text-align: center; font-size: 13px; } .hero-pricenote span { display: block; margin-left: 0; } /* h1 2行目「給湯器の交換専門」は8字。41pxだと5pxはみ出す */ .hero-brand-title > span:nth-of-type(2) { font-size: 40px; } } /* エリア横の「実績10,000件以上」— 数字を主役にする（2026-09-04 渡邊さん指定）フォントの都合で、同じサイズだと数字が小さく見える。 ⚠️ バッジと同じ行なので、使える幅はモバイルで169pxしかない。大きくしすぎると即はみ出す。変更したら必ず実測すること。 */ .area-copy b em { font-style: normal; font-size: 1.75em; letter-spacing: -.02em; color: #51382c; } @media (width<=760px) { .area-copy b { font-size: 13px; } } /* ===== モバイルだけ、上部の帯をFVの説明文の下へ動かす（2026-09-04 渡邊さん指定） ===== `.promo-bar` は

の最初の子で

の兄弟。DOM順を入れ替えるには main を flex にするしかなく、全セクションのマージン相殺が変わって縦位置が総崩れになる。そこで説明文の直後に複製を1つ置き、CSSでどちらか片方だけを出す。（複製は display:none 側が読み上げにも出ないので、二重に読まれることはない）効果（375×812 実測）: 帯 68px（4行）がFVの上から抜けるマスコットの下端 757 → 689。下の固定バー(720〜)に隠れなくなる */ .promo-bar-inline { display: none; } @media (width<=760px) { main > .promo-bar { display: none; } .promo-bar-inline { display: flex; /* 横並びだと、バッジが幅を取って右のテキストが3行に折れる。元の `.promo-bar b { max-width: 230px }` が効いているため。 FV内に置くので全幅を使えばよく、2段にすればテキストは1行に収まる（22字 × 13px ≒ 286px < 使える幅319px・375pxで実測）。 */ flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 10px; border-bottom: 0; } .promo-bar-inline b { max-width: none; text-align: center; } } /* 価格の「（税込）」は補足なので小さくする（2026-09-07 渡邊さん指定）同じ大きさだと「円（税込）〜」が115pxになり、275,000(227px) と合わせて342px。使える幅339pxを超えて3段に折れ、単位が数字から切り離される。 ⚠️ LPの他の価格は全部「税込」と明記されているが、交換例と商品カードだけ記載が無い。表記を揃える変更。交換例そのものの根拠は2026-09-07にクライアント確認予定。 */ .hero-record b i { font-style: normal; font-size: .72em; letter-spacing: 0; opacity: .85; }