/* ===================================================================== * hero-v2.css — FV（Figma v2 の headline）の形。交換ページと TOP で使う * --------------------------------------------------------------------- * 2026-10-12 に exchange.css から移した。数値は交換ページ（Figma: Desktop_v2 / headline）のもの。 * 使い方:
。背景（写真）は各ページの CSS で決める。 * ===================================================================== */ /* --------------------------------------------------------------------- * FV（Figma v2: headline 1200×665 / 縦 gap32 / padding 60 40 / 角丸40） * 数値は Figma のデザインモードで1つずつ読んだもの（フォント・行間・間隔・色すべて）。 * 塗りは上から ①線形グラデーション（#0B56A2 100% → 0%）②写真（不透明度40%）③ #0B56A2。 * 枠線（blue-60・内側4px）は非表示になっている。楕円の装飾も無い。 * 幅600以上は ①〜③ を焼き込んだ書き出し画像を敷く（下の min-width: 600px）。 * スマホ（〜599）は ③ の青一色。 * ------------------------------------------------------------------- */ /* スマホ（〜599）は Figma に無い。余白と角丸を詰め、内容幅を広げる（2026-10-12） */ .hero--v2 .hero__box { padding: 28px 18px; border-radius: 28px; } /* v1 の楕円と枠線は v2 には無い。写真の上のグラデーション（::after）も要らない */ .hero--v2 .hero__box::before, .hero--v2 .hero__box::after, .hero--v2 .hero__edge { display: none; } .hero--v2 .hero__body { display: flex; flex-direction: column; gap: 20px; } .hero--v2 .hero__catch { display: flex; flex-direction: column; gap: 5px; } /* タイトル: Noto Sans JP Bold 44 / 行間 自動（=64）/ 白 */ .hero__title { font-size: 28px; line-height: 1.45; font-weight: var(--fw-bold); color: #fff; } /* タイトルの下の黄色い行（修理TOP・お問い合わせ・料金表・コラム一覧で同じ値。TOP は top.css で大きくしている）。 */ .hero--v2 .hero__lead { font-size: 28px; line-height: 1.35; font-weight: var(--fw-bold); color: var(--c-highlight); } .hero__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; } /* 「補助金活用で実質」: Bold 29 / 行間180% / 上下に白い線3px・内側余白2px（232×62） */ .hero__label { padding-block: 2px; border-block: 3px solid #fff; font-size: 18px; line-height: 1.8; font-weight: var(--fw-bold); color: #fff; white-space: nowrap; } /* 価格: 165,000（Bold 72）／ 円〜（Bold 40）／ 税 込（Bold 22・行間28・blue-20）を gap9 で */ .hero--v2 .hero__price { display: flex; align-items: baseline; gap: 6px; color: var(--c-highlight); } .hero--v2 .hero__price b { font-size: 44px; line-height: 1.45; letter-spacing: 0; } .hero__yen { font-size: 28px; line-height: 1.45; } /* スマホは「税込」を横書きのまま「円〜」の後ろに置く。PC は1文字ずつ縦に積む（600以上の指定） */ .hero--v2 .hero__price small { display: block; font-size: 13px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-20); } /* 説明: Bold 24 / 行間180% / 1行目の「お支払い総額は345,000円〜」だけ32 / 色 blue-20、2行目は yellow */ .hero--page .hero__sub.hero__sub--ex { margin-top: 0; font-size: 14px; color: var(--fig-blue-20); } /* スマホは「お支払い総額は303,600円〜」を途中で折らず、まとめて次の行に送る */ .hero__sub--ex strong { display: inline-block; font-size: 1.3em; line-height: 1.5; font-weight: inherit; } .hero__sub-tail { display: inline-block; } /* 「（税込）」は途中で割らない（幅600で「（税」「込）」に割れていた）。 */ .hero__sub--ex small { font-size: .8333em; font-weight: inherit; white-space: nowrap; } .hero__sub--ex em { color: var(--fig-yellow); font-style: normal; } /* バッジ: 白 / 角丸100 / padding 4 20 / 文字 Bold 18・行間180%・blue-60 / 間隔16 * スマホは幅をそろえて2列、5つ目だけ横いっぱい（2026-10-12 jojiさんと決定）。PC は横に流す（600以上の指定） * スマホは白い面がボタンより目立ってボタンへの誘導を妨げるので、塗りなし・白い枠線と白文字にする（2026-10-12 フィードバック）。 * 枠線1pxの分だけ上下の padding を減らし、高さ40を保つ。 */ .hero__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hero__badges li:last-child { grid-column: 1 / -1; } .hero__badges li { padding: 3px 8px; border-radius: 100px; text-align: center; border: 1px solid #fff; color: #fff; font-size: 14px; line-height: 32px; font-weight: var(--fw-bold); } /* スマホで2行に割れたバッジが楕円になっていた（2026-10-20 フィードバック）。 * 角丸を1行の高さ40の半分に止め、2行のときは角の丸い四角にする。1行のときの形は変えない。 * 行間32のままだと2行の間が空きすぎるので、行間を詰めて高さ40は min-height で保ち、文字は上下中央に置く。 * 折り返しは語の間のスペースだけにする（幅375で「件」だけが2行目に落ちていた）。 */ @media (max-width: 599.98px) { .hero__badges li { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 20px; line-height: 1.5; word-break: keep-all; } } /* 幅320前後では「施工実績 ◯◯件」が2行に割れるので、文字と左右の余白を少し詰める。 */ @media (max-width: 374.98px) { .hero__badges li { padding-inline: 4px; font-size: 13px; } } /* ボタンの形は components.css の .hero__cta-btn（v2 以外の FV でも使うため 2026-10-14 に移した）。 */ .hero__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 0; } @media (min-width: 600px) { /* --- FV（v2） --- 数値は Figma のデザインモードの値。 */ .hero--v2 .hero__box { padding: calc(60 * var(--u)) calc(40 * var(--u)); border-radius: 40px; min-height: 0; justify-content: flex-start; } .hero--v2 .hero__body { max-width: calc(1120 * var(--u)); gap: calc(32 * var(--u)); } .hero--v2 .hero__catch { gap: calc(5 * var(--u)); } .hero__title { font-size: max(calc(29 * var(--ff)), calc(44 * var(--u))); line-height: max(calc(42.18182 * var(--ff)), calc(64 * var(--u))); } .hero--v2 .hero__lead { font-size: max(calc(30 * var(--ff)), calc(56 * var(--u))); } .hero__row { flex-wrap: nowrap; gap: calc(16 * var(--u)); } .hero__label { padding-block: 2px; font-size: max(calc(19 * var(--ff)), calc(29 * var(--u))); line-height: max(calc(34.06897 * var(--ff)), calc(52 * var(--u))); } .hero--v2 .hero__price { align-items: center; gap: calc(9 * var(--u)); font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(39.15 * var(--ff)), calc(58 * var(--u))); } .hero--v2 .hero__price b { font-size: max(calc(48 * var(--ff)), calc(72 * var(--u))); line-height: max(calc(69.33333 * var(--ff)), calc(104 * var(--u))); } .hero__yen { font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(39.15 * var(--ff)), calc(58 * var(--u))); } .hero--v2 .hero__price small { word-break: break-all; font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: max(calc(19.09091 * var(--ff)), calc(28 * var(--u))); width: calc(22 * var(--u)); } .hero__sub--ex strong { display: inline; font-size: 1.3333em; line-height: 53.6px; } .hero__sub-tail { display: inline; } .hero--page .hero__sub.hero__sub--ex { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(28.8 * var(--ff)), calc(43.2 * var(--u))); margin-top: 0; } .hero__badges { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); } .hero__badges li { border: 0; background: #fff; color: var(--fig-blue-60); padding: calc(4 * var(--u)) calc(20 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: max(calc(24.88889 * var(--ff)), calc(32 * var(--u))); } .hero__cta { flex-direction: row; gap: calc(24 * var(--u)); } } /* 600〜1023 で中身をカードの幅に比例させる指定は、全ページの FV 共通にしたので components.css へ移した。 */