voice-mika.com を、
壊さず整えるとこうなる。

あなたは「ボイストレーナーみか（voice-mika.com）」の改修を任されたAIです。金継ぎの診断の結果に沿って、次の手順で直してください。本番公開の前に、必ず依頼主の承認を取ってください。

手順1. 次の追補スタイルを、対象ページの </head> 直前にそのまま貼る。文言・リンク先・HTMLの構造は変えない。

<style id="kintsugi-repair">
/* ══ 金継ぎ追補スタイル（naoshi planner 自動生成・2026-08-25）══
   元の規則と同じセレクタ・同じmediaで後から上書きする。:root の変数は触らない。
   直した行: 20・手で見る行: 23 */
/* [contrast] コントラスト比1.79→基準4.5以上（既存色 #333333・背景#81D742） */
.-btn-n > .c-mvBtn__btn { color: #333333; }
/* [contrast] コントラスト比3.48→基準4.5以上（既存色 #090909・背景#F74A4A） ⚠inherited（祖先 .is-style-btn_normal a の規則を上書き＝配下全部に効く） */
.is-style-btn_normal a { color: #090909; }
/* [contrast] コントラスト比1.84→基準4.5以上（既存色 #333333・背景#62D847） ⚠inherited（祖先 .is-style-btn_shiny a の規則を上書き＝配下全部に効く） */
.is-style-btn_shiny a { color: #333333; }
/* [contrast] コントラスト比2.16→基準4.5以上（既存色 #333333・背景#F59B5F） ⚠inherited（祖先 .cap_box_ttl の規則を上書き＝配下全部に効く） */
.cap_box_ttl { color: #333333; }
/* [contrast] コントラスト比1.84→基準4.5以上（既存色 #333333・背景#62D847） ⚠inherited（祖先 .is-style-btn_normal a の規則を上書き＝配下全部に効く） */
.is-style-btn_normal a { color: #333333; }
/* [font] 役割「ボタン」の 14px を近いサイズ 16px へ寄せる（25%以内・一番使われている値へ） */
.c-gnav > .menu-item > a .ttl { font-size: 16px; }
/* [color] 似て非なる色 #FFFFFF → #F7F7F7 */
.l-header__bar { color: #F7F7F7; }
/* [color] 似て非なる色 #FFFFFF → #F7F7F7 */
.is-style-btn_normal a { color: #F7F7F7; }
/* [color] 似て非なる色 #FFFFFF → #F7F7F7 */
.is-style-btn_shiny a { color: #F7F7F7; }
/* [color] 似て非なる色 #FFFFFF → #F7F7F7 */
.cap_box_ttl { color: #F7F7F7; }
/* [color] 似て非なる色 #FFFFFF → #F7F7F7 ⚠via-var --wp--preset--color--white（共有3箇所。変数は触らず規則側で上書き） */
.has-white-color { color: #F7F7F7 !important; }
/* [color] 似て非なる色 #FFF8EB → #F7F7F7 ⚠via-var --capbox-color--bg（共有2箇所。変数は触らず規則側で上書き） */
.cap_box_content { background-color: #F7F7F7; }
/* [color] 似て非なる色 #FDFDFD → #F7F7F7 ⚠via-var --color_content_bg（共有8箇所。変数は触らず規則側で上書き） */
.is-style-default > .c-tabList .c-tabList__button:hover, .is-style-default > .c-tabList .c-tabList__button[aria-selected="true"] { color: #F7F7F7; }
/* [color] 似て非なる色 #FDFDFD → #F7F7F7 ⚠via-var --color_footer_bg（共有1箇所。変数は触らず規則側で上書き） */
.l-footer { background-color: #F7F7F7; }
/* [color] 似て非なる色 #000000 → #090909 */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) { color: #090909; }
/* [color] 似て非なる色 #000000 → #090909 ⚠via-var --wp--preset--color--black（共有3箇所。変数は触らず規則側で上書き） */
.has-black-color { color: #090909 !important; }
@media (min-width: 600px) {
  /* [font] 役割「ボタン」の 14px を近いサイズ 16px へ寄せる（25%以内・一番使われている値へ） */
  .c-mvBtn__btn { font-size: 16px; }
  /* [font] 役割「ボタン」の 14px を近いサイズ 16px へ寄せる（25%以内・一番使われている値へ） */
  .c-tabList__button { font-size: 16px; }
  /* [font] 役割「ボタン」の 13px を近いサイズ 16px へ寄せる（25%以内・一番使われている値へ） */
  .l-footer__nav a { font-size: 16px; }
}
@media (max-width: 767px) {
  /* [color] 似て非なる色 #FFFFFF → #F7F7F7 ⚠mobile-only */
  .c-widget__title.-spmenu { color: #F7F7F7; }
}

/* ══ 手仕事（金継ぎ・結）2026-08-25 ══
   色付きCTA/見出し帯は「白文字のまま地を濃くして」コントラスト床（4.5）に載せる。
   naoshi は白文字→濃色に寄せていたが、CTAは白文字のほうが手触りが良いので地側を濃くする。 */
/* 緑CTA（メルマガ/サービス一覧/LINE/swell釦）: #81D742・#62D847 → 深緑 */
.c-mvBtn__btn { background-color: #2E7D32 !important; }
.c-mvBtn__btn, .-btn-n > .c-mvBtn__btn { color: #FFFFFF !important; }
.is-style-btn_shiny a { background: #2E7D32 !important; color: #FFFFFF !important; }
.swell-block-button__link { background-color: #2E7D32 !important; }
.swell-block-button__link, .swell-block-button__link > span { color: #FFFFFF !important; }
/* 赤CTA（プロフィール詳細/公式メルマガ/お問い合わせ）: #F74A4A → 濃赤 */
.is-style-btn_normal a { background-color: #C62828 !important; color: #FFFFFF !important; }
/* 橙の見出し帯（Substack/note のキャプション見出し）: #F59B5F → 濃橙 */
.cap_box_ttl { background-color: #C15A1C !important; }
.cap_box_ttl, .cap_box_ttl > span { color: #FFFFFF !important; }

/* 小タップ標的（SNSアイコン列）26×22 → 両辺24px以上（WCAG 2.5.8） */
.c-iconList__link { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* 言葉の泣き別れ（mobileで「コンプ|レックス」）: 文節折り */
.wp-block-list li { word-break: auto-phrase; }

/* 極小文字（mobileのドロワーメニュー 11.7px → 12px以上） */
@media (max-width: 767px) {
  .l-header .c-gnav .menu-item > a,
  .l-header .c-gnav .menu-item > a .ttl { font-size: 13px; }
}

/* ── 詰め（結・2回目）── */
/* 橙見出し帯: #C15A1C は白文字4.42でわずかに床未満 → もう一段濃く（4.5クリア） */
.cap_box_ttl { background-color: #A84C10 !important; }
/* mobileドロワーのメニュー文字 11.7px → 12px以上（極小文字の破れ） */
@media (max-width: 767px) {
  .menu-item > a { font-size: 13px !important; }
}
/* ヒーローの白文字は写真の上（機械は地色#FDFDFDで測れず＝比1.02は誤差）。
   実際の読みやすさだけ影で底上げする（機械の数値は変わらない＝見送り扱い） */
.p-mainVisual__slideTitle, .p-mainVisual__slideText, .p-mainVisual__scrollLabel {
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ── 詰め（結・3回目）── */
/* 公式LINE釦は元は緑（inlineで緑を載せた is-style-btn_normal）。赤ルールに巻き込まれるので
   href で狙って緑を維持（他の緑CTAと同じ深緑で白文字が床に載る） */
.swell-block-button__link[href*="line.me"] { background-color: #2E7D32 !important; }
</style>

手順2. 幅1280・768・390pxの3つで表示を確かめる。読めない文字・画面右端からのはみ出し・要素の重なりが出ていたら、その場で直す。

手順3. 余力があれば、AIの定番パターンを上から順に外す。依頼主が意図して選んだ表現なら残す:
- SCROLLの矢印: 「SCROLL ↓」の印は、最初の画面で次が見えないことの代償です。印を消し、最初の画面の高さを「次のセクションの頭が少し見える」まで詰めます。

手順4. 次はマーケ診断の処方。文面や構成が変わるので、実施の前に依頼主に確認する:
- 主役（本人）が最初の画面にいない: ヒーローに本人の写真（または声を連想させる主役ビジュアル）を大きく置き、海の素材写真は差し替えるか装飾に下げる。
- 出口が7つ・本命の無料入口が最下部: 本命の無料入口（メルマガかLINEどちらか1つ）を最初の画面の近くに上げ、外部SNSは「もっと見る」としてまとめる。
- ヒーローの一文が「誰に」を言っていない: 最初の一文を「〈誰〉が〈何〉できる」に。例:「話し方に自信が持てない人が、声の分析で“伝わる声”に変わる」。
- アクセントが原色で賑やか: アクセントは1〜2色に絞る（主役ボタンは1色）。セクションの地色の種類を減らす。

手順5. 仕上げの確認。低コントラスト0件・12px未満の文字0件・角丸3種以内・横はみ出し0件を保てていれば完了。