/** * /guarantee 全額返金保証制度・無料体験ページ — タイポグラフィを教室ページに揃える * --------------------------------------------------------------------------- * 本ページの旧セクション（返金保証の説明・条件リスト・受講生の声）は、 * 教室ページ（single-school.php）とタイポグラフィが大きくズレていた。 * * スマホ(375px) PC(1280px) * 旧セクション本文 13.44px / 行間2.13 23px / 行間2.13 * 条件リスト 13.44px / 行間2.18 22px / 行間2.18 * 受講生の声 13.44px / 行間2.33 21px / 行間2.33 * 教室ページの本文 14.59px / 行間1.8 15.2px / 行間1.8 * * つまり * - スマホでは**教室ページより小さい**（シニア向けとして不利） * - PCでは**1.5倍も大きい**（1画面に入る情報が極端に少ない） * - 行間が 2.1〜2.33 と広すぎる * という状態だった。旧CSSが .875rem → 1.4375rem と 768px 以上で一気に拡大していたため。 * * ここでは教室ページの本文と同じ **.95rem / 行間1.8** に統一する。 * テーマはルートのフォントサイズ自体を 15.36px→16px にスケールさせるので、 * .95rem と書くだけでスマホ14.59px・PC15.2px となり、教室ページと完全に一致する。 * （＝ブレークポイントごとの上書きは不要） * * 文章そのものは一切変更していない。 */ .p-guarantee-explanation__lead, .p-guarantee-detail__text, .p-guarantee-detail__attention, .p-guarantee-detail__condition-item, .p-guarantee-voice__text { font-size: .95rem; line-height: 1.8; } /* 教室ページのFAQ部品を流用しているため、回答の段落もそちらに揃える。 .p-faq-item__answer が display:flex なので、複数段落は .p-faq-item__answer-body でまとめてから積む（横並び防止）。 */ .p-faq-item__answer-body { flex: 1; min-width: 0; } .p-faq-item__answer-body > p + p { margin-top: .8em; } /* =========================================================================== * 余白リスケール — 教室ページ（single-school.php）のスペーシング体系へ寄せる * --------------------------------------------------------------------------- * 教室ページの原理は「セクションは padding のみ・margin 不使用 → 境界が常に一定」。 * /guarantee は margin 組みだったため PC の境界が [80,270,80,260,107,110]（3.38倍のばらつき） * になっていた。ここでは境界ごとに“オーナーを1つ”に決めて完全均一化する。 * * 実測（Chromium / http://karun.local/guarantee/） * SP375 : 10365 → 9817 (-548px / -5.3%) * PC1280 : 9355 → 8223 (-1132px / -12.1%) * セクション境界: PC 80px × 6 / SP 60px × 6（最大/最小 = 1.00） * * 本文テキストは1文字も変更していない（page-guarantee.php は無改変）。 * font-size / line-height / タップ領域 / 画像サイズも縮めていない。縦は余白からだけ取る。 * =========================================================================== */ /* --------------------------------------------------------------------------- * 1. セクション境界（単一オーナー制） * * .l-school-faq / .l-school-flow は自前で padding:60px 0（PC 80px 0）を持つ。 * これは教室ページの既定値そのものなので **上書きしない**。 * 代わりに、その padding が境界を担う箇所（faq→体験 / 流れ→声）は * 隣接セクションの margin-top を 0 にして二重取りを止める。 * padding を持つ隣人がいない箇所（声→電話 / 電話→フォーム）だけ margin で 60/80 を作る。 * → 6箇所すべて SP 60px / PC 80px に揃う。 * * .l-guarantee-explanation だけは「パンくず直下」なので、あえてリズムから外して * 一段狭くする。教室ページも .l-detail-info が margin-top:32px/57px と * 自セクションの padding(60/80) より狭い値を使っており、その作法に合わせている。 * ------------------------------------------------------------------------- */ .l-guarantee-explanation { margin-top: 30px; } /* was 2rem = SP 30.7 / PC 61 */ .l-guarantee-experience { margin-top: 0; } /* was 5.625rem = SP 86.4 / PC 190 → faq の padding-bottom が担う */ /* 声セクションは**自身が緑の背景ボックス**で、直前の flow も黄色のグラデーション背景を持つ。 背景色を持つセクション同士では padding が色の内側に入るため「隣の padding が境界を担う」方式が 成立せず、色と色が密着してしまう（実測 gap 0px）。ここは margin で実体のある間隔を作る。 */ .l-guarantee-voice { margin-top: 60px; } /* was 5.625rem = SP 86.4 / PC 180 */ .l-guarantee-form { margin-top: 60px; } /* was 3.5rem = SP 53.8 / PC 110 */ @media screen and (min-width: 768px) { .l-guarantee-explanation { margin-top: 60px; } .l-guarantee-voice { margin-top: 80px; } .l-guarantee-form { margin-top: 80px; } } /* --------------------------------------------------------------------------- * 2. 全額返金保証セクション * * PC ではこのセクションの 59%（722px）が余白だった。主犯は3つ: * (a) __lead の margin-top が1つ目の段落にも効き、h2 の margin-bottom 50px と * 直列に加算されて PC で 95px の穴になっていた → 1つ目は 0、段落間だけ戻す * (b) __content の margin-top 110px と detail の padding-top 91px が連続 → 40 + 40 * (c) detail の padding-bottom 107px → 40 * * あわせて PC の行長も是正する。本文 61.8字 / 条件 56.6字 は教室部品（FAQ 46.9字・ * 流れ 39.1字）から完全に外れていた。max-width:800px + __inner の padding 解除で * 本文 47.4字 / 条件 44.1字（コスト約 +110px）。シニア向けなので高さより行長を優先する。 * ------------------------------------------------------------------------- */ .p-guarantee-explanation__lead { margin-top: 0; } /* was SP 26.9 / PC 45（両段落に効いていた） */ .p-guarantee-explanation__lead + .p-guarantee-explanation__lead { margin-top: 16px; } .p-guarantee-explanation__content { margin-top: 30px; } /* was SP 57.6 / PC 110 */ .p-guarantee-detail { padding: 25px 20px; } /* was SP 38.4 / PC 91・107 */ .p-guarantee-detail__text:nth-child(n+2) { margin-top: 16px; } /* was SP 19.2 / PC 49 */ .p-guarantee-detail__condition { margin-top: 25px; } /* was SP 38.4 / PC 70 */ .p-guarantee-detail__condition-list { margin-top: 16px; } /* was SP 26.9 / PC 40 */ /* 中黒「・」は ::before の生成文字（HTMLには存在しない＝本文カウント対象外）。 本文が .95rem になったのに .875rem/1.375rem 固定のままで、PC では本文15.2pxに対し22px、 SP では逆に padding-left(13.44px) より字送り(14.59px)が広く **本文に1.15px 食い込んでいた**。 font-size を継承させ、字下げを em 基準にして +2.19px のクリアランスを確保する。 ※ padding-left は base に置くこと（PC だけに書くと SP の食い込みが残る） */ .p-guarantee-detail__condition-item { padding-left: 1.15em; } .p-guarantee-detail__condition-item::before { font-size: inherit; } /* 条件6項目は1〜3件目が複数行。項目間が 0 だと「・」だけを頼りに一続きに見えるので、 規約テキストがページで最も密なブロックにならないよう L4 の余白を入れる */ .p-guarantee-detail__condition-item + .p-guarantee-detail__condition-item { margin-top: 12px; } @media screen and (min-width: 768px) { .p-guarantee-explanation__lead { padding: 0; max-width: 800px; margin-left: auto; margin-right: auto; } .p-guarantee-explanation__lead + .p-guarantee-explanation__lead { margin-top: 20px; } .p-guarantee-explanation__content { margin-top: 40px; } .p-guarantee-detail { padding: 40px; max-width: 800px; margin-left: auto; margin-right: auto; } /* styles.css の PC 指定 width:1382px / padding:0 50px を解除。 これをやらないと max-width:800px を入れても内側が二重パディングになる */ .p-guarantee-detail__inner { width: auto; max-width: none; padding: 0; } .p-guarantee-detail__text:nth-child(n+2) { margin-top: 20px; } .p-guarantee-detail__condition { margin-top: 30px; padding: 20px 25px 25px; } .p-guarantee-detail__condition-list { margin-top: 20px; } } /* --------------------------------------------------------------------------- * 3. SP で見出しが折り返しアイコンが単独行に落ちる問題 * * 21文字の2見出し（FAQ「かるん♪講師が…」／フォーム「お問い合わせフォームから…」）だけが * flex-wrap:wrap でアイコンが単独行に落ち、実測 121.9px になっていた（他3見出しは 50px）。 * nowrap にするとテキスト領域 273px で同じ2行のまま、行ボックスが max(50, 59.9) = 59.9px に。 * → 1見出し -62px × 2 = -124px。 * * font-size（19.968px）とアイコン径（50px）は **絶対に変えない**。 * 縮めれば追加で 6.9px/見出し 稼げるが、同一ページ内で h2 が2種類に割れる代償に見合わない。 * .p-guarantee-faq / .p-guarantee-form は page-guarantee.php 専用クラスなので、 * 教室ページ・トップページの .p-heading--sub には一切届かない。 * ------------------------------------------------------------------------- */ .p-guarantee-faq .p-heading--sub, .p-guarantee-form .p-heading--sub { flex-wrap: nowrap; } /* .p-heading--sub__icon には flex-shrink 指定が無いので、nowrap 下で 50px 円が潰れないよう明示 */ .p-guarantee-faq .p-heading--sub__icon, .p-guarantee-form .p-heading--sub__icon { flex-shrink: 0; } /* --------------------------------------------------------------------------- * 4. よくあるご質問（教室ページの .p-faq-item をそのまま利用） * 末尾アイテムの margin-bottom:20px はセクション padding と二重になる死に余白。 * .p-guarantee-faq でスコープするので front-page（inc/helpers-faq.php 経由）と * single-school の FAQ には届かない。 * ------------------------------------------------------------------------- */ .p-guarantee-faq .p-faq-item:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * 5. 無料体験のご案内バナー（#freeTrial） * PC はセクション高 384px を __text-wrapper の内容高が決めている（__img は height:100%） * ので、text-wrapper 側を詰めると画像ごと縮む。 * 本文だけ 1.0625rem/1.75（SP16.32・PC17、1920帯は 1.5rem=24px）と教室ページから * 外れていたので .95rem/1.8 に統一する。base 1行で 1920帯の上書きも同時に無効化される。 * * ※ .p-guarantee-experience__img / __img-wrapper / __img::before には触らない。 * 写真は CSS background（SP: experience_img01-sp.jpg を center/contain、 * PC: experience_img01.jpg を right top/cover）で入っており、 * background-size や background-position を上書きすると構図が変わる。 * ------------------------------------------------------------------------- */ .p-guarantee-experience__text { font-size: .95rem; line-height: 1.8; } .p-guarantee-experience__body { margin-top: 16px; } /* was 1.25rem = SP 19.2 / PC 20 */ .p-guarantee-experience__foot { margin-top: 20px; } /* was 1.5rem = SP 23 / PC 24 */ /* SPではテキスト列が縦積みになり、黄色いCTAボタンの下端がそのままセクション下端になる。 直後の .p-school-flow は黄グラデーションの背景を持つため、実測でボタンと帯が 0px で密着していた。 ボタン（rgb(255,234,101)）と帯（rgb(255,247,215)）は近い色なので境目が溶ける。 セクション側に下余白を持たせて、色と色の間に地の色を挟む。 PCは画像が右カラムに回りボタンが下端に来ないため不要（実測で密着なし）。 */ @media screen and (max-width: 767px) { .p-guarantee-experience { padding-bottom: 40px; } } @media screen and (min-width: 768px) { .p-guarantee-experience__text-wrapper { padding-top: 25px; padding-bottom: 25px; /* was 2.5rem = 40 上下 */ } } /* --------------------------------------------------------------------------- * 6. 無料体験の流れ（教室ページの .p-flow-step をそのまま利用） * * .p-flow-steps の margin-bottom:50px は教室ページの .p-school-flow__cta（h=107px） * のための余白。本ページに CTA は無く丸ごと死に余白。 * ただし **これだけでは -25px しか減らない**。最終ステップの margin-bottom:25px が * 親の下端を突き抜けてマージン相殺し、max(25, 0) = 25px が残るため。 * 実測: steps のみ 1044.4→1019.4 / 両方入れて 994.4（差分ちょうど 25px）。 * * 連結線 ::after は top:55px 起点・height:calc(100% - 20px) で、 * 現状すでに次カードへ 10px はみ出している（実測 [10,10,10] の既存バグ）。 * margin-bottom は教室ページと同じ 25px のまま維持したうえで、 * height を calc(100% - 30px) にすると重なりが [0,0,0] になる（25 - 55 = -30）。 * カード padding / gap / number 径は教室ページと同一値のまま。 * ------------------------------------------------------------------------- */ .p-guarantee-flow .p-flow-steps { margin-bottom: 0; } .p-guarantee-flow .p-flow-step:last-child { margin-bottom: 0; } .p-guarantee-flow .p-flow-step:not(:last-child)::after { height: calc(100% - 30px); } /* --------------------------------------------------------------------------- * 7. 受講生の声 * * PC は float 回り込みで __text-wrapper 幅 1105px＝1行 約72.7文字。読みづらいうえ * 行が長いぶん高さが極小になり、余白比率が 54% に跳ね上がっていた。 * flex 2カラムにして 42.9文字に是正する（教室ページの FAQ 46.9字と同帯）。 * * ※ 画像は 318px のまま維持する。experience_person01.png には * 「滝ノ水教室Mさん　65歳」が焼き込まれており、これが体験談の唯一の帰属表示。 * alt="" なので文字数チェックでは検出できない。240px 以下に縮めると * 実効 13px を割って本文（15.2px）より小さくなるため、絶対に縮めないこと。 * * ※ 1920px 帯では .l-inner が 1600px（内容 1500px）になるので、声ボックスの幅も * 1500px に戻さないと左右 210px ずつズレる。行長は __content の max-width で * 固定しているので、幅を戻しても 42.9文字のまま（高さコスト 0）。 * ------------------------------------------------------------------------- */ .p-guarantee-voice__container { padding-top: 24px; padding-bottom: 24px; } /* was SP 26.9・30.7 / PC 53・48 */ @media screen and (min-width: 768px) { /* 色ボックスの幅を .l-inner の内容幅（1180 - 50*2 = 1080）に合わせる */ .p-guarantee-voice { width: 1080px; max-width: calc(100% - 100px); } .p-guarantee-voice__inner { width: auto; max-width: none; padding: 0 40px; } .p-guarantee-voice__container { padding-top: 40px; padding-bottom: 40px; } .p-guarantee-voice__content { margin-top: 20px; display: flex; align-items: flex-start; gap: 30px; max-width: 1000px; /* 1920帯でも行長を一定に保つ */ margin-left: auto; margin-right: auto; } .p-guarantee-voice__img-wrapper { float: none; margin: 0; flex-shrink: 0; } /* 318px は維持 */ .p-guarantee-voice__text-wrapper { margin-top: 0; flex: 1; min-width: 0; } .p-guarantee-voice__text:nth-child(n+2) { margin-top: 16px; } /* was 1.375rem = 22 */ .p-guarantee-voice__text:nth-child(3) { clear: none; } /* float 解除に伴い不要 */ } @media screen and (min-width: 1920px) { .p-guarantee-voice { width: 1500px; } /* .l-inner が 1600px になる帯。内容幅 1500 に合わせる */ } /* --------------------------------------------------------------------------- * 8. お電話でのお申し込み（セクションごと削除済み） * フォーム内の電話受付カード（.kef-call）が総合受付 052-581-1337 と受付時間を * 同じ内容で、しかも営業時間による在席判定つきで出しているため重複だった。 * page-guarantee.php から .p-reception ブロックを削除したので、 * ここで指定するものは無い（.p-reception* 自体は他10テンプレートの共有クラスなので触らない）。 * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * 9. お申し込みフォーム（#freeTrialForm）— 最大の削減源 * * __container の padding-bottom（SP 92.2 / PC 188）が送信ボタンの下に死に余白を作っていた。 * __lead は PC で 24px と本文より大きかったので .95rem に統一。 * * ※ 外枠の .p-form（白カード）は page-guarantee.php 側でクラスごと外した。 * .kef が自前で .kef-card を持つため白カードの二重掛けになり、 * SPで左右20pxずつを無駄に食っていたため。 * .p-form 自体は page-digisoro.php と共有しているので CSS には触れていない。 * ※ .kef（[karun_trial_form] の出力）自体には触らない。 * ------------------------------------------------------------------------- */ .p-guarantee-form__container { padding-top: 40px; padding-bottom: 48px; } /* was SP 46.1・92.2 / PC 103・188 */ .p-guarantee-form__lead { margin-top: 16px; font-size: .95rem; line-height: 1.8; } .p-guarantee-form__content { margin-top: 24px; } /* was SP 38.4 / PC 84 */ @media screen and (min-width: 768px) { .p-guarantee-form__container { padding-top: 60px; padding-bottom: 60px; } .p-guarantee-form__lead { margin-top: 20px; } .p-guarantee-form__content { margin-top: 30px; } } /* --------------------------------------------------------------------------- * 10. アンカー着地位置（縦の高さには影響しない既存バグの修正） * * .p-header は position:fixed で 66px / ≥768 80px / ≥1920 150px。 * 既存は #freeTrial の 768〜1919px 帯が未定義（ヘッダー80pxに対し66pxしか逃がさず14px潜る）、 * #freeTrialForm は全帯で未定義（parts/experience.php 経由で10テンプレートから * /guarantee/#freeTrialForm と叩かれる主要CTA なのに着地時に見出しが隠れていた）。 * * guarantee.css は is_page('guarantee') 限定で読まれるので、 * single-school.php:1002 の同名 id（#freeTrialForm）には影響しない。 * ------------------------------------------------------------------------- */ #freeTrial, #freeTrialForm { scroll-margin-top: 66px; } @media screen and (min-width: 768px) { #freeTrial, #freeTrialForm { scroll-margin-top: 80px; } } @media screen and (min-width: 1920px) { #freeTrial, #freeTrialForm { scroll-margin-top: 150px; } }