/**
 * A-Z 発音ビジュアライザー（[phonics_mouth]）専用スタイル
 * 口のSVGモーフィング部分（.mouth-part / .state-*）は
 * /Users/majimanjiwifi/Downloads/最新.html の <style> をそのまま移植したもの。
 * レイアウト部分（Tailwindユーティリティクラス）のみ、サイト共通の書式に置き換えている。
 */

.phonics-mouth-wrap {
    max-width: 960px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    /* 今後追加する下側の固定ナビメニュー用にスペースを確保しておく */
    padding-bottom: 50px;
}

.phonics-mouth-header {
    text-align: center;
    margin-bottom: 24px;
}

.phonics-mouth-header h2 {
    font-size: 22px;
    font-weight: 900;
    color: #1e293b;
    margin: 0 0 6px;
}

/* mouth-container内に下揃えで出す「ボタンをタップで、お手本をcheck！」のポップメッセージ。
   最初のボタンが押されるまで表示し、押されたらフェードアウトして消える。 */
.phonics-mouth-start-hint {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: #1e293b;
    white-space: nowrap;
    z-index: 5;
    transition: opacity .3s;
}

.phonics-mouth-start-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.phonics-mouth-columns {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .phonics-mouth-columns {
        flex-direction: row;
        align-items: flex-start;
    }
    .phonics-mouth-avatar-col {
        width: 33%;
        flex-shrink: 0;
        position: sticky;
        top: 20px;
    }
    .phonics-mouth-buttons-col {
        width: 67%;
    }
}

.phonics-mouth-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Bluetoothモード切替。mouth-containerの下側の枠に重ねて表示する。 */
/* mouth-containerの上に1行・左揃えで出す案内文 */
.phonics-mouth-bluetooth-hint {
    position: relative;
    width: 100%;
    margin: 5px 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
    white-space: nowrap;
    font-size: 13px;
    font-weight: bold;
    color: #64748b;
}

#phonics-mouth-bluetooth-hint-text {
    cursor: pointer;
}

/* Bluetooth遅延の理由ツールチップ。PCはCSSの:hover(隣接するテキストのhover)、
   スマホはJS側でクリック/タップ時に.is-visibleを付け外しして表示する。 */
.phonics-mouth-bluetooth-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 200px;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    pointer-events: none;
    z-index: 20;
}

#phonics-mouth-bluetooth-hint-text:hover + .phonics-mouth-bluetooth-tooltip,
.phonics-mouth-bluetooth-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 「スピーカー」と「有線イヤホン」の区切りに使うプラグ端子アイコン。テキスト中に
   インラインで挿入されるため、文字とベースラインを合わせる。 */
.phonics-mouth-hint-icon-jack {
    vertical-align: -6px;
    margin: 0 3px;
}

/* 先頭のイヤホン/スピーカーアイコン。対応する単語（有線イヤホン/スピーカー）の
   直前にテキストと一緒にインラインで組み立てられるため、こちらも文字と
   ベースラインを合わせる。 */
#phonics-mouth-hint-icon-earbuds,
#phonics-mouth-hint-icon-speaker {
    vertical-align: -8px;
    margin-right: 4px;
}

.phonics-mouth-hint-word-on {
    color: #2563eb;
}

.phonics-mouth-hint-word-off {
    color: #ef4444;
}

.phonics-mouth-container-wrap {
    position: relative;
}

.phonics-mouth-device-toggle {
    position: absolute;
    top: 6px;
    left: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    padding: 6px 11px;
    cursor: pointer;
    line-height: 0;
}

.phonics-mouth-bluetooth-logo {
    /* flexコンテナ内だとwidth:autoでアスペクト比計算が効かないことがあるため、
       viewBox(180:52)から計算した固定幅を直接指定する */
    width: 90px;
    height: 26px;
    flex-shrink: 0;
}

.phonics-mouth-bluetooth-logo-on {
    display: none;
}

/* ONの時：ボタン全体の背景を青、枠線を白、ロゴを色版に切り替える */
.phonics-mouth-device-toggle.is-on {
    background: #2563eb;
    border-color: #fff;
}

.phonics-mouth-device-toggle.is-on .phonics-mouth-bluetooth-logo-off {
    display: none;
}

.phonics-mouth-device-toggle.is-on .phonics-mouth-bluetooth-logo-on {
    display: block;
}

/* ページ読み込み直後（または端末変更検知時）のサジェスト演出（5秒間だけ光る/点滅する） */
.phonics-mouth-device-toggle.is-suggesting {
    animation: phonics-mouth-bt-suggest 1s ease-in-out infinite;
}

#phonics-mouth-bluetooth-hint-text.is-suggesting {
    animation: phonics-mouth-hint-blink 1s ease-in-out infinite;
}

@keyframes phonics-mouth-hint-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

@keyframes phonics-mouth-bt-suggest {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, .5);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
}

.phonics-mouth-label-area {
    margin-top: 16px;
    text-align: center;
    width: 100%;
}

#current-label {
    font-size: 40px;
    font-weight: 900;
    color: #334155;
    letter-spacing: .04em;
    height: 48px;
    text-transform: uppercase;
}

/* 1パターンしか無いボタンのcurrent-ipaも、複数パターンボタンの①②③セグメント
   （.phonics-mouth-current-ipa-seg）と同じピル型の見た目に揃える。ただし1個しか
   無いので①のような番号バッジは付けない（.phonics-mouth-current-ipa-seg-badgeは
   使わない）。 */
.phonics-mouth-current-ipa {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    text-transform: none;
    margin-left: 4px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.phonics-mouth-current-ipa:hover {
    background: #e2e8f0;
}

/* EAR/EA/TH/OOのような複数パターンまとめボタン専用。current-labelの下に
   ①②③の発音記号を常に並べて出し、再生中のものだけ.is-activeでハイライトする。
   #current-labelは高さ固定(48px)であふれるとレイアウトが崩れるため、
   専用の別要素(#current-ipa-group)に分けている。 */
#current-ipa-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    min-height: 0;
}

.phonics-mouth-current-ipa-seg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.phonics-mouth-current-ipa-seg:hover {
    background: #e2e8f0;
}

.phonics-mouth-current-ipa-seg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* 連続再生中／単独再生中に、今鳴っているパターンのセグメントをハイライトする */
.phonics-mouth-current-ipa-seg-active {
    background: #facc15;
    border-color: #eab308;
    color: #1e293b;
}

/* OUのように発音記号が特に多い（5パターン）ボタンは、PC/スマホ問わず常に
   ボタン2個分の幅を使う（.phonics-mouth-btn-2col-mobileはスマホ限定なので
   別クラスにしている）。 */
.phonics-mouth-btn-2col-always {
    grid-column: span 2;
}

/* ボタン本体に出す複数パターン分の発音記号（例:「/iː/ /eɪ/ /ɛ/」）。番号は付けず、
   1個のipaより長いのでnowrapを解除し、折り返しを許可する。 */
.phonics-mouth-btn-ipa-multi {
    white-space: normal;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
}

/* 番号の代わりにパターンごとに色分けして区別する */
.phonics-mouth-btn-ipa-multi-seg-1 { color: #2563eb; }
.phonics-mouth-btn-ipa-multi-seg-2 { color: #16a34a; }
.phonics-mouth-btn-ipa-multi-seg-3 { color: #ea580c; }
.phonics-mouth-btn-ipa-multi-seg-4 { color: #9333ea; }

#instruction-text {
    font-size: 13px;
    font-weight: bold;
    color: #94a3b8;
    margin-top: 6px;
    min-height: 24px;
}

/* schwaボタン自体のラベル文字（A E O U）も紫色にする */
.phonics-mouth-btn-schwa .phonics-mouth-btn-label {
    color: #7c3aed;
}

#example-words {
    margin-top: 4px;
    min-height: 28px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
}

.phonics-mouth-example-play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #2563eb;
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, transform .1s;
}

.phonics-mouth-example-play-btn:hover {
    background-color: #eff6ff;
}

.phonics-mouth-example-play-btn:active {
    transform: scale(.92);
}

/* クリックしても音は鳴らない案内専用ボタン。ホバー/フォーカスでツールチップを表示する */
.phonics-mouth-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 130px;
    padding: 8px 10px;
    background: #fff;
    border: 2px solid #2563eb;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    border-radius: 8px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 10;
}

.phonics-mouth-tooltip-blue {
    color: #2563eb;
}

.phonics-mouth-example-play-btn:hover .phonics-mouth-tooltip,
.phonics-mouth-example-play-btn:focus .phonics-mouth-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 単語＋発音記号のペア。発音記号は単語の下に表示する */
.phonics-mouth-example-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.phonics-mouth-example-word,
.phonics-mouth-example-ipa {
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 4px;
    transition: box-shadow .15s, background-color .15s;
}

.phonics-mouth-example-word:hover,
.phonics-mouth-example-ipa:hover {
    background-color: rgba(37, 99, 235, .08);
}

.phonics-mouth-example-word {
    font-weight: 700;
    color: #1e293b;
}

.phonics-mouth-example-ipa {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
}

/* 対象の綴り／発音記号だけを青色にする */
.phonics-mouth-highlight {
    color: #2563eb;
    font-weight: 700;
}

.phonics-mouth-example-word.is-playing {
    box-shadow: 0 0 0 2px #2563eb;
    background-color: rgba(37, 99, 235, .08);
}

.phonics-mouth-buttons-col h3 {
    font-size: 12px;
    font-weight: bold;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 10px;
}

.phonics-mouth-buttons-col h3:not(:first-child) {
    margin-top: 24px;
}

.phonics-mouth-btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    column-gap: 10px;
    row-gap: 16px;
}

/* 「組み合わせ」の意味グループ区切り線(.phonics-mouth-col-divider-line)を実測位置に
   position:absoluteで重ねるための基準にする。 */
#extra-buttons-2 {
    position: relative;
    /* 「組み合わせ」はPCでも常にAR/OR系・母音系・子音系の3グループが
       それぞれ2列ずつ(計6列)になるよう固定する。auto-fillの可変列数だと
       画面幅次第で1行に収まる個数が変わり、意味グループの区切りと
       ボタンの折り返し位置がズレてしまうため。スマホは下の@media側で
       従来通りauto-fillに上書きする。 */
    grid-template-columns: repeat(6, 1fr);
}

/* 区切り線本体。PC/スマホ問わずposition:absoluteにしてグリッドの自動配置から
   完全に外す（これが無いとPC表示時に通常のグリッド項目として扱われ、
   JS側で入れた実測の高さ(数百px)がそのままそのボタンの行の高さになって
   しまい、最下段の行が異常に間延びするバグになる）。線自体（border-left）は
   PC/スマホ共通でここに書き、点線にする。 */
.phonics-mouth-col-divider-line {
    position: absolute;
    top: 0;
    width: 0;
    pointer-events: none;
    border-left: 2px dashed #94a3b8;
}

/* NGの上に引く横の区切り線。縦線と同じ理由でposition:absoluteにし、
   グリッドの自動配置から外す。 */
.phonics-mouth-row-divider-line {
    position: absolute;
    left: 0;
    height: 0;
    pointer-events: none;
    border-top: 2px dashed #94a3b8;
}

/* az-buttons/extra-buttonsは別々のgridコンテナなので、gridのrow-gapだけでは
   2つの間にすき間ができない。ここで明示的にすき間を作る。 */
.phonics-mouth-btn-grid + .phonics-mouth-btn-grid {
    margin-top: 16px;
}

.phonics-mouth-group-box {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    border: none;
    border-radius: 14px;
    /* グリッドの行内で、隣の単独ボタンと上下幅を必ず揃える */
    align-self: stretch;
}

.phonics-mouth-btn {
    flex: 1;
    transition: all .1s;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
}

.phonics-mouth-btn:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}

.phonics-mouth-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.phonics-mouth-btn-active {
    background-color: #facc15 !important;
    color: #1e293b !important;
    border-color: #eab308 !important;
    transform: scale(.95) !important;
    box-shadow: none !important;
}

/* 押したボタンと同じ音（phoneme_fileが同一）の仲間のボタンを、押している間だけ
   薄い黄色でハイライトする（transformは掛けない＝押した本人だけ縮小させる）。 */
.phonics-mouth-btn-same-sound {
    background-color: #fef9c3 !important;
    border-color: #fde047 !important;
}

/* 【マジックE】ラベル：タップ/ホバーで説明ツールチップが出るバッジ。通常ボタン2マス分の幅。
   .phonics-mouth-btnより後ろに書かないとカスケードで負けて上書きされるので注意。 */
.phonics-mouth-label-pill {
    position: relative;
    /* .phonics-mouth-btnのoverflow:hiddenのままだと、ボタンの外側にはみ出して
       表示されるツールチップが切り取られて見えなくなるため、ここで解除する。 */
    overflow: visible;
    flex: 1;
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    cursor: pointer;
    /* nowrapのまま文字数の多いラベルが来ると、overflow:visible(上の理由で解除済み)と
       あいまって箱の外にテキストがはみ出してしまうため、はみ出し防止にnormalにする
       （<br>による明示的な改行はnowrapでも効くが、それでも収まらない場合の保険）。 */
    white-space: normal;
    font-size: 13px;
}

/* 「組み合わせ」セクションが畳まれている間、#extra-buttons-2の中身
   （各ボタン・グループボックス）をすべて隠す。 */
.phonics-mouth-combo-collapsed > * {
    display: none;
}

/* 「組み合わせ」の開閉トグルボタン。v2-writing.phpのid="ai-correction-btn"と
   同じ見た目（白背景・色付き枠線・太字・角丸・軽い影のコールトゥアクション風）に
   揃え、色だけこのページのテーマ（緑）にしている。 */
.phonics-mouth-combo-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 5px 0;
    padding: 7px 14px;
    background: #fff;
    color: #16a34a;
    border: 2px solid #16a34a;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(22, 163, 74, .18);
    transition: background-color .15s, box-shadow .15s;
}

.phonics-mouth-combo-toggle-btn:hover {
    background: #f0fdf4;
    box-shadow: 0 4px 10px rgba(22, 163, 74, .25);
}

.phonics-mouth-combo-toggle-btn-icon {
    flex-shrink: 0;
    transition: transform .2s ease;
}

.phonics-mouth-combo-toggle-btn.is-expanded .phonics-mouth-combo-toggle-btn-icon {
    transform: rotate(180deg);
}

/* 【組み合わせ】ラベル：マジックEと同じピル型だが薄い緑色にする */
.phonics-mouth-label-pill-green {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* 【基礎の音】ラベル：背景色なし、テキストと枠線は濃い黒色にする */
.phonics-mouth-label-pill-plain {
    background-color: transparent;
    border-color: #1e293b;
    color: #1e293b;
}

/* 【弱化ver】ラベル：schwaボタンと同じ紫系の色 */
.phonics-mouth-label-pill-purple {
    background-color: #f3e8ff;
    border-color: #d8b4fe;
    color: #7c3aed;
}

/* ラベルピル共通のツールチップ（説明文または画像）。PCはホバー、スマホはタップで
   .is-visibleが付いて表示される。Bluetooth案内のツールチップと同じ考え方。 */
.phonics-mouth-label-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    pointer-events: none;
    z-index: 20;
}

/* ホバーで表示されるのは案内テキスト等（.phonics-mouth-label-tooltip-imageを除く）
   のみ。図解画像はクリック時の.is-visibleでしか表示しない。 */
.phonics-mouth-label-pill:hover .phonics-mouth-label-tooltip:not(.phonics-mouth-label-tooltip-image),
.phonics-mouth-label-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.phonics-mouth-label-tooltip img {
    display: block;
    max-width: 200px;
    width: 100%;
    border-radius: 4px;
}

/* 画像入りツールチップは、ボタンの位置に関わらず画面中央に固定表示する
   （基礎の音のように画面上端に近いボタンだと、通常の絶対配置ではボタンの
   真上にはみ出して見切れてしまうため）。ボタンに重なっても構わない。
   枠(背景・padding・角丸)は無くし、画像自体にドロップシャドウだけ付ける。
   PC/タブレットは画面幅の70%（スマホは末尾の@mediaで90%に上書き）。 */
.phonics-mouth-label-tooltip-image {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    background: none;
    padding: 0;
    border-radius: 0;
    width: 70vw;
    max-width: 70vw;
    z-index: 100;
}

.phonics-mouth-label-tooltip-image img {
    max-width: 100%;
    width: 100%;
    border-radius: 8px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}

/* ラベルピルは.phonics-mouth-btn:hoverの汎用ホバー色より後ろに書いて、
   ホバー時も自分の色（赤/緑/黒枠/紫）を保つようにする。 */
.phonics-mouth-btn.phonics-mouth-label-pill:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
    transform: none;
    box-shadow: none;
}

.phonics-mouth-btn.phonics-mouth-label-pill-green:hover {
    background-color: #dcfce7;
    border-color: #86efac;
}

.phonics-mouth-btn.phonics-mouth-label-pill-plain:hover {
    background-color: transparent;
    border-color: #1e293b;
}

.phonics-mouth-btn.phonics-mouth-label-pill-purple:hover {
    background-color: #f3e8ff;
    border-color: #d8b4fe;
}

/* schwaボタンの枠線を紫にする。.phonics-mouth-btnの基本border(後ろの場所で
   定義)より後ろに置かないとカスケードで負けて灰色に戻ってしまう。 */
.phonics-mouth-btn-schwa {
    border-color: #7c3aed;
}

.phonics-mouth-btn-schwa:hover {
    border-color: #7c3aed;
}

/* PCは「基礎の音」、スマホは箱が狭いので短縮した「基礎」を表示する。
   .phonics-mouth-label-shortはスマホ用@mediaで表示に切り替える。 */
.phonics-mouth-label-short {
    display: none;
}

/* マジックE（A/I/U/E/O）の枠線はピンクにする */
.phonics-mouth-btn-magic-e {
    border-color: #f472b6;
}

/* OO以下（拡張ブレンド音、#extra-buttons-2の中身）は枠線だけ濃い緑にする。
   蛍光色にならないよう明度を落とした緑（#166534）を使う。ラベルピル自身は除外。 */
#extra-buttons-2 .phonics-mouth-btn:not(.phonics-mouth-label-pill) {
    border-color: #166534;
}

/* マジックEの行だけ、周りを囲む黒枠を消す。.phonics-mouth-group-boxより後ろに書くこと。
   align-items:flex-startにしないと、中の赤枠(U)がpadding分だけ他より背が高いせいで
   行全体(stretch)がその高さに引っ張られ、ボタンが縦長に見えてしまう。 */
.phonics-mouth-group-box-plain {
    border: none;
    padding: 0;
    /* Uのグループがpadding/borderを持たなくなったので、他の単独ボタンと自然にstretchで揃う */
    align-items: stretch;
}

/* U(/juː/と/uː/の2個)グループ。枠線は無し（他のグループと同じ） */
.phonics-mouth-group-box-red {
    /* 中に2個ボタンが入る分、他の1マスのボタンの2倍の幅を確保して縮まないようにする */
    flex: 2;
    /* 親(.phonics-mouth-group-box-plain)がalign-items:flex-startなので、
       このボックスだけ他のボタンと同じ高さになるよう明示的にstretchさせる */
    align-self: stretch;
}

/* ①②の番号バッジ：ボタン上側の枠線に上下中央揃えで重ねる */
.phonics-mouth-btn-numbered {
    position: relative;
    overflow: visible;
}

.phonics-mouth-btn-number-badge {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid #2563eb;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    color: #2563eb;
    line-height: 1;
    pointer-events: none;
}

/* ①②バッジ付きボタン（OO/TH/マジックEのU/基礎の音のA・U等）は、文字・発音記号・
   バッジ（枠と数字）を全て青色にして「2パターンある音」であることを目立たせる。 */
.phonics-mouth-btn-numbered .phonics-mouth-btn-label,
.phonics-mouth-btn-numbered .phonics-mouth-btn-ipa {
    color: #2563eb;
}

.phonics-mouth-btn-label {
    white-space: nowrap;
    font-size: 15px;
}

/* is-long/is-very-longの縮小はスマホ幅でのはみ出し対策。PCはボタン幅に余裕があるので
   縮小せず、他のボタンと同じ15pxのまま表示する（末尾のモバイル用@mediaで上書きする）。 */

.phonics-mouth-btn-ipa {
    font-size: 12px;
    font-weight: normal;
    color: #475569;
    white-space: nowrap;
}

/* ==========================================
   口のSVGモーフィング（以下、最新.htmlより移植）
   ========================================== */

#mouth-container {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 256px;
    background-color: #ffe4c4;
    border: 8px solid #1e293b;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .2);
    transition: background-color .3s;
}

#mouth-container svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
}

.mouth-part {
    transition-property: all;
    transition-duration: var(--trans-dur, .22s);
    transition-timing-function: var(--trans-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.throat-bg { fill: #3a0ca3; }
.lip-color { fill: #ff758f; stroke: #1e293b; stroke-width: 6px; stroke-linejoin: round; }
.teeth     { fill: #ffffff; stroke: #1e293b; stroke-width: 4px; stroke-linejoin: round; }
.tongue    { fill: #e63946; stroke: #1e293b; stroke-width: 4px; stroke-linejoin: round; }

/* 0. クローズ（口を完全に閉じたニュートラル状態） */
.state-closed .upper-lip  { d: path("M 80 150 C 120 70 160 110 200 120 C 240 110 280 70 320 150 C 260 150 220 150 200 150 C 180 150 140 150 80 150 Z"); }
.state-closed .lower-lip  { d: path("M 80 150 C 140 150 180 150 200 150 C 220 150 260 150 320 150 C 280 200 240 210 200 210 C 160 210 120 200 80 150 Z"); }
.state-closed .mouth-hole { d: path("M 80 150 C 140 150 180 150 200 150 C 220 150 260 150 320 150 C 260 150 220 150 200 150 C 180 150 140 150 80 150 Z"); }
.state-closed .upper-teeth { d: path("M 110 150 C 150 150 250 150 290 150 L 280 150 C 240 150 160 150 120 150 Z"); opacity: 0; }
.state-closed .lower-teeth { d: path("M 130 150 C 160 150 240 150 270 150 L 260 150 C 240 150 160 150 140 150 Z"); opacity: 0; }
.state-closed .tongue-path  { d: path("M 140 150 C 140 150 260 150 260 150 C 260 150 140 150 140 150 Z"); opacity: 0; }

/* 0-1. クローズ（Lの後のニュートラル状態：口は閉じるが舌は上顎にある） */
.state-closed-l .upper-lip  { d: path("M 80 150 C 120 70 160 110 200 120 C 240 110 280 70 320 150 C 260 150 220 150 200 150 C 180 150 140 150 80 150 Z"); }
.state-closed-l .lower-lip  { d: path("M 80 150 C 140 150 180 150 200 150 C 220 150 260 150 320 150 C 280 200 240 210 200 210 C 160 210 120 200 80 150 Z"); }
.state-closed-l .mouth-hole { d: path("M 80 150 C 140 150 180 150 200 150 C 220 150 260 150 320 150 C 260 150 220 150 200 150 C 180 150 140 150 80 150 Z"); }
.state-closed-l .upper-teeth { d: path("M 110 150 C 150 150 250 150 290 150 L 280 150 C 240 150 160 150 120 150 Z"); opacity: 0; }
.state-closed-l .lower-teeth { d: path("M 130 150 C 160 150 240 150 270 150 L 260 150 C 240 150 160 150 140 150 Z"); opacity: 0; }
.state-closed-l .tongue-path  { d: path("M 115 150 C 140 135 180 128 200 128 C 220 128 260 135 285 150 C 250 150 150 150 115 150 Z"); opacity: 0; }

/* A, AE: 口を大きく開ける、舌は下で広く見え、上の歯しっかり、下の歯チラッと */
.state-a .upper-lip  { d: path("M 73 164 C 118 50 164 90 200 100 C 236 90 282 50 327 164 C 273 113 227 123 200 123 C 173 123 127 113 73 164 Z"); }
.state-a .lower-lip  { d: path("M 73 164 C 127 197 173 207 200 207 C 227 207 273 197 327 164 C 291 240 245 248 200 248 C 155 248 118 240 73 164 Z"); }
.state-a .mouth-hole { d: path("M 73 164 C 127 113 173 123 200 123 C 227 123 273 113 327 164 C 273 197 227 207 200 207 C 173 207 127 197 73 164 Z"); }
.state-a .upper-teeth { d: path("M 100 128 C 150 158 250 158 300 128 L 285 98 C 240 113 160 113 115 98 Z"); opacity: 1; }
.state-a .lower-teeth { d: path("M 110 187 C 155 182 245 182 290 187 L 275 200 C 245 202 155 202 125 200 Z"); opacity: 1; }
.state-a .tongue-path  { d: path("M 95 177 C 125 155 165 140 200 140 C 235 140 275 155 305 177 C 280 220 240 240 200 240 C 160 240 120 220 95 177 Z"); opacity: 1; }

/* I, Y: 口の横幅はそのまま、Sのように歯を大きく出して上90%, 下80%くらい埋める */
.state-i .upper-lip  { d: path("M 60 150 C 110 70 160 100 200 105 C 240 100 290 70 340 150 C 280 130 230 135 200 135 C 170 135 120 130 60 150 Z"); }
.state-i .lower-lip  { d: path("M 60 150 C 120 170 170 175 200 175 C 230 175 280 170 340 150 C 300 220 250 230 200 230 C 150 230 100 220 60 150 Z"); }
.state-i .mouth-hole { d: path("M 60 150 C 120 130 170 135 200 135 C 230 135 280 130 340 150 C 280 170 230 175 200 175 C 170 175 120 170 60 150 Z"); }
.state-i .upper-teeth { d: path("M 45 147 C 120 149 280 149 355 147 L 315 98 C 255 110 145 110 85 98 Z"); opacity: 1; }
.state-i .lower-teeth { d: path("M 55 160 C 120 156 280 156 345 160 L 275 188 C 245 184 155 184 125 188 Z"); opacity: 1; }
.state-i .tongue-path  { d: path("M 110 160 C 135 152 265 152 290 160 C 275 190 125 190 110 160 Z"); opacity: 1; }

/* マジックE（A/I）専用: 唇や歯の形はstate-iと同じだが、舌の座標数がstate-aと合わないと
   モーション1→2で舌だけ補間できず一瞬で切り替わってしまう。舌の形だけstate-aのまま据え置いて、
   唇・歯だけ滑らかにIの形へモーフィングさせる（暫定対応）。 */
.state-i-magicE .upper-lip  { d: path("M 60 150 C 110 70 160 100 200 105 C 240 100 290 70 340 150 C 280 130 230 135 200 135 C 170 135 120 130 60 150 Z"); }
.state-i-magicE .lower-lip  { d: path("M 60 150 C 120 170 170 175 200 175 C 230 175 280 170 340 150 C 300 220 250 230 200 230 C 150 230 100 220 60 150 Z"); }
.state-i-magicE .mouth-hole { d: path("M 60 150 C 120 130 170 135 200 135 C 230 135 280 130 340 150 C 280 170 230 175 200 175 C 170 175 120 170 60 150 Z"); }
.state-i-magicE .upper-teeth { d: path("M 45 147 C 120 149 280 149 355 147 L 315 98 C 255 110 145 110 85 98 Z"); opacity: 1; }
.state-i-magicE .lower-teeth { d: path("M 55 160 C 120 156 280 156 345 160 L 275 188 C 245 184 155 184 125 188 Z"); opacity: 1; }
.state-i-magicE .tongue-path  { d: path("M 110 177 C 136 167 168 162 200 162 C 232 162 264 167 290 177 C 271 217 235 237 200 237 C 165 237 129 217 110 177 Z"); opacity: 1; }

/* Y専用（Iとは分離）: 横幅を左右10縮小、口角を5下げ、上下の歯を5下げ */
.state-y .upper-lip  { d: path("M 70 155 C 116 70 163 100 200 105 C 237 100 284 70 330 155 C 274 130 228 135 200 135 C 172 135 126 130 70 155 Z"); }
.state-y .lower-lip  { d: path("M 70 155 C 126 170 172 175 200 175 C 228 175 274 170 330 155 C 293 220 246 230 200 230 C 154 230 107 220 70 155 Z"); }
.state-y .mouth-hole { d: path("M 70 155 C 126 130 172 135 200 135 C 228 135 274 130 330 155 C 274 170 228 175 200 175 C 172 175 126 170 70 155 Z"); }
.state-y .upper-teeth { d: path("M 45 152 C 120 154 280 154 355 152 L 315 103 C 255 115 145 115 85 103 Z"); opacity: 1; }
.state-y .lower-teeth { d: path("M 55 165 C 120 161 280 161 345 165 L 275 193 C 245 189 155 189 125 193 Z"); opacity: 1; }
.state-y .tongue-path  { d: path("M 110 160 C 135 152 265 152 290 160 C 275 190 125 190 110 160 Z"); opacity: 1; }

/* U: 縦に少し丸く開く */
.state-u .upper-lip  { d: path("M 93 150 C 132 55 165 95 200 105 C 235 95 268 55 307 150 C 257 118 228 125 200 125 C 172 125 143 118 93 150 Z"); }
.state-u .lower-lip  { d: path("M 93 150 C 143 185 172 195 200 195 C 228 195 257 185 307 150 C 270 238 235 245 200 245 C 165 245 132 238 93 150 Z"); }
.state-u .mouth-hole { d: path("M 93 150 C 143 118 172 125 200 125 C 228 125 257 118 307 150 C 257 185 228 195 200 195 C 172 195 143 185 93 150 Z"); }
.state-u .upper-teeth { d: path("M 130 125 C 160 148 240 148 270 125 L 258 100 C 225 110 175 110 142 100 Z"); opacity: 1; }
.state-u .lower-teeth { d: path("M 130 192 C 160 172 240 172 270 192 L 258 205 C 225 198 175 198 142 205 Z"); opacity: 1; }
.state-u .tongue-path  { d: path("M 135 182 C 158 175 242 175 265 182 C 245 205 155 205 135 182 Z"); opacity: 1; }

/* schwa: Uと同じ形だが、口角(左右の唇の合わせ目)だけ7下げる */
.state-schwa .upper-lip  { d: path("M 93 163 C 132 60 165 95 200 105 C 235 95 268 60 307 163 C 257 118 228 125 200 125 C 172 125 143 118 93 163 Z"); }
.state-schwa .lower-lip  { d: path("M 93 163 C 143 185 172 195 200 195 C 228 195 257 185 307 163 C 270 238 235 240 200 240 C 165 240 132 238 93 163 Z"); }
.state-schwa .mouth-hole { d: path("M 93 163 C 143 120 172 127 200 127 C 228 127 257 120 307 163 C 257 183 228 193 200 193 C 172 193 143 183 93 163 Z"); }
.state-schwa .upper-teeth { d: path("M 130 125 C 160 148 240 148 270 125 L 258 100 C 225 110 175 110 142 100 Z"); opacity: 1; }
.state-schwa .lower-teeth { d: path("M 130 192 C 160 172 240 172 270 192 L 258 205 C 225 198 175 198 142 205 Z"); opacity: 1; }
.state-schwa .tongue-path  { d: path("M 135 182 C 158 175 242 175 265 182 C 245 205 155 205 135 182 Z"); opacity: 1; }

/* OO: Uより唇を丸くすぼめ、開きを狭くする（Wと同じモーション） */
.state-oo .upper-lip  { d: path("M 145 155 C 160 85 182 118 200 122 C 218 118 240 85 255 155 C 230 134 212 138 200 138 C 188 138 170 134 145 155 Z"); }
.state-oo .lower-lip  { d: path("M 145 155 C 170 166 188 172 200 172 C 212 172 230 166 255 155 C 240 205 218 212 200 212 C 182 212 160 205 145 155 Z"); }
.state-oo .mouth-hole { d: path("M 145 155 C 170 134 188 138 200 138 C 212 138 230 134 255 155 C 230 166 212 172 200 172 C 188 172 170 166 145 155 Z"); }
.state-oo .upper-teeth { d: path("M 165 138 C 180 144 220 144 235 138 L 230 125 C 215 130 185 130 170 125 Z"); opacity: 1; }
.state-oo .lower-teeth { d: path("M 170 170 C 185 168 215 168 230 170 L 225 175 C 215 174 185 174 175 175 Z"); opacity: 0; }
.state-oo .tongue-path  { d: path("M 155 165 C 175 152 225 152 245 165 C 230 185 170 185 155 165 Z"); opacity: 1; }

/* マジックE（O）専用: 唇や歯の形はstate-ooと同じだが、舌の座標数がstate-oと合わないと
   モーション1→2で舌だけ補間できず一瞬で切り替わってしまう。舌の形だけstate-oのまま据え置いて、
   唇・歯だけ滑らかにOOの形へモーフィングさせる（暫定対応）。 */
.state-oo-magicE .upper-lip  { d: path("M 145 155 C 160 85 182 118 200 122 C 218 118 240 85 255 155 C 230 134 212 138 200 138 C 188 138 170 134 145 155 Z"); }
.state-oo-magicE .lower-lip  { d: path("M 145 155 C 170 166 188 172 200 172 C 212 172 230 166 255 155 C 240 205 218 212 200 212 C 182 212 160 205 145 155 Z"); }
.state-oo-magicE .mouth-hole { d: path("M 145 155 C 170 134 188 138 200 138 C 212 138 230 134 255 155 C 230 166 212 172 200 172 C 188 172 170 166 145 155 Z"); }
.state-oo-magicE .upper-teeth { d: path("M 165 138 C 180 144 220 144 235 138 L 230 125 C 215 130 185 130 170 125 Z"); opacity: 1; }
.state-oo-magicE .lower-teeth { d: path("M 170 170 C 185 168 215 168 230 170 L 225 175 C 215 174 185 174 175 175 Z"); opacity: 0; }
.state-oo-magicE .tongue-path  { d: path("M 145 195 C 155 185 178 180 200 180 C 222 180 245 185 255 195 C 245 213 222 221 200 221 C 178 221 155 213 145 195 Z"); opacity: 1; }

/* E: 横に引いて少し開く */
.state-e .upper-lip  { d: path("M 80 163 C 123 70 166 100 200 105 C 234 100 277 70 320 163 C 269 135 226 135 200 135 C 174 135 131 135 80 163 Z"); }
.state-e .lower-lip  { d: path("M 80 163 C 131 188 174 193 200 193 C 226 193 269 188 320 163 C 286 230 243 240 200 240 C 157 240 114 230 80 163 Z"); }
.state-e .mouth-hole { d: path("M 80 163 C 131 135 174 135 200 135 C 226 135 269 135 320 163 C 269 188 226 193 200 193 C 174 193 131 188 80 163 Z"); }
.state-e .upper-teeth { d: path("M 61 128 C 124 170 276 170 340 128 L 320 98 C 264 112 137 112 80 98 Z"); opacity: 1; }
.state-e .lower-teeth { d: path("M 109 185 C 148 175 252 175 291 185 L 278 195 C 252 190 148 190 122 195 Z"); opacity: 1; }
.state-e .tongue-path  { d: path("M 124 178 C 135 171 168 167 200 167 C 233 167 266 171 277 178 C 268 191 234 197 200 197 C 167 197 133 191 124 178 Z"); opacity: 1; }

/* O: 横幅を15%広げて丸く開く */
.state-o .upper-lip  { d: path("M 111 163 C 136 45 176 85 200 95 C 224 85 265 45 289 163 C 245 112 220 118 200 118 C 180 118 156 112 111 163 Z"); }
.state-o .lower-lip  { d: path("M 111 163 C 156 205 176 215 200 215 C 220 215 245 205 289 163 C 265 255 235 262 200 262 C 165 262 136 255 111 163 Z"); }
.state-o .mouth-hole { d: path("M 111 163 C 156 112 176 118 200 118 C 220 118 245 112 289 163 C 245 205 220 215 200 215 C 176 215 156 205 111 163 Z"); }
.state-o .upper-teeth { d: path("M 111 118 C 131 148 269 148 289 118 L 284 100 C 264 108 136 108 116 100 Z"); opacity: 1; }
.state-o .lower-teeth { d: path("M 165 218 C 180 212 220 212 235 218 L 230 228 C 215 224 185 224 170 228 Z"); opacity: 1; }
.state-o .tongue-path  { d: path("M 145 195 C 155 185 178 180 200 180 C 222 180 245 185 255 195 C 245 213 222 221 200 221 C 178 221 155 213 145 195 Z"); opacity: 1; }

/* AL専用: Oの形をベースに横幅を少し縮小、上の歯を非表示（Oには影響しない） */
.state-al-o .upper-lip  { d: path("M 120 150 C 143 45 178 85 200 95 C 222 85 258 45 280 150 C 240 112 218 118 200 118 C 182 118 160 112 120 150 Z"); }
.state-al-o .lower-lip  { d: path("M 120 150 C 160 205 178 215 200 215 C 218 215 240 205 280 150 C 258 255 232 262 200 262 C 168 262 143 255 120 150 Z"); }
.state-al-o .mouth-hole { d: path("M 120 150 C 160 112 178 118 200 118 C 218 118 240 112 280 150 C 240 205 218 215 200 215 C 178 215 160 205 120 150 Z"); }
.state-al-o .upper-teeth { d: path("M 111 118 C 131 148 269 148 289 118 L 284 100 C 264 108 136 108 116 100 Z"); opacity: 0; }
.state-al-o .lower-teeth { d: path("M 165 218 C 180 212 220 212 235 218 L 230 228 C 215 224 185 224 170 228 Z"); opacity: 1; }
.state-al-o .tongue-path  { d: path("M 145 195 C 165 175 235 175 255 195 C 235 230 165 230 145 195 Z"); opacity: 1; }

/* B, M, P: ニュートラル状態から上下幅をさらに15%縮めてキュッと結ぶ */
.state-bmp .upper-lip  { d: path("M 101 147 C 133 105 169 120 200 123 C 231 120 267 105 299 147 C 250 150 223 150 200 150 C 177 150 151 150 101 147 Z"); }
.state-bmp .lower-lip  { d: path("M 101 147 C 151 150 178 150 200 150 C 223 150 250 150 299 147 C 268 195 232 205 200 205 C 169 205 133 195 101 147 Z"); }
.state-bmp .mouth-hole { d: path("M 101 150 C 151 150 178 150 200 150 C 223 150 250 150 299 150 C 250 150 223 150 200 150 C 178 150 151 150 101 150 Z"); }
.state-bmp .upper-teeth { d: path("M 110 150 C 150 150 250 150 290 150 L 280 150 C 240 150 160 150 120 150 Z"); opacity: 0; }
.state-bmp .lower-teeth { d: path("M 130 150 C 160 150 240 150 270 150 L 260 150 C 240 150 160 150 140 150 Z"); opacity: 0; }
.state-bmp .tongue-path  { d: path("M 140 150 C 140 150 260 150 260 150 C 260 150 140 150 140 150 Z"); opacity: 0; }

/* B, P のリリース（破裂）: 縦幅を15%小さく調整 */
.state-p-release .upper-lip  { d: path("M 137 158 C 155 85 178 113 200 119 C 222 113 245 85 263 158 C 232 130 214 135 200 135 C 186 135 169 130 137 158 Z"); }
.state-p-release .lower-lip  { d: path("M 137 158 C 169 168 187 172 200 172 C 214 172 232 168 263 158 C 245 205 218 212 200 212 C 182 212 155 205 137 158 Z"); }
.state-p-release .mouth-hole { d: path("M 137 158 C 169 130 187 135 200 135 C 214 135 232 130 263 158 C 232 168 214 172 200 172 C 187 172 169 168 137 158 Z"); }
.state-p-release .upper-teeth { d: path("M 155 135 C 170 138 230 138 245 135 L 240 120 C 220 125 180 125 160 120 Z"); opacity: 1; }
.state-p-release .lower-teeth { d: path("M 155 168 C 170 165 230 165 245 168 L 240 175 C 220 172 180 172 160 175 Z"); opacity: 1; }
.state-p-release .tongue-path  { d: path("M 150 162 C 170 152 230 152 250 162 C 240 175 160 175 150 162 Z"); opacity: 1; }

/* S, Z: 横幅を15%縮め、上下の歯が口の中を完全に埋め尽くす */
.state-sz .upper-lip  { d: path("M 76 150 C 117 60 163 90 200 95 C 237 90 283 60 324 150 C 274 120 228 125 200 125 C 172 125 126 120 76 150 Z"); }
.state-sz .lower-lip  { d: path("M 76 150 C 126 180 172 185 200 185 C 228 185 274 180 324 150 C 283 235 246 245 200 245 C 154 245 117 235 76 150 Z"); }
.state-sz .mouth-hole { d: path("M 76 150 C 126 120 172 125 200 125 C 228 125 274 120 324 150 C 274 180 228 185 200 185 C 172 185 126 180 76 150 Z"); }
.state-sz .upper-teeth { d: path("M 65 150 C 120 155 280 155 335 150 L 310 90 C 260 100 140 100 90 90 Z"); opacity: 1; }
.state-sz .lower-teeth { d: path("M 65 150 C 120 145 280 145 335 150 L 310 210 C 260 200 140 200 90 210 Z"); opacity: 1; }
.state-sz .tongue-path  { d: path("M 150 150 C 150 150 250 150 250 150 C 250 150 150 150 150 150 Z"); opacity: 0; }

/* X専用のS: 口の外形だけKと同じ幅にする（歯・舌はSZのまま） */
.state-sz-x .upper-lip  { d: path("M 98 158 C 130 70 170 100 200 105 C 230 100 270 70 302 158 C 255 130 220 135 200 135 C 180 135 145 130 98 158 Z"); }
.state-sz-x .lower-lip  { d: path("M 98 158 C 145 170 180 175 200 175 C 220 175 255 170 302 158 C 270 220 230 230 200 230 C 170 230 130 220 98 158 Z"); }
.state-sz-x .mouth-hole { d: path("M 98 158 C 145 130 180 135 200 135 C 220 135 255 130 302 158 C 255 170 220 175 200 175 C 180 175 145 170 98 158 Z"); }
.state-sz-x .upper-teeth { d: path("M 65 155 C 120 160 280 160 335 155 L 310 95 C 260 105 140 105 90 95 Z"); opacity: 1; }
.state-sz-x .lower-teeth { d: path("M 65 155 C 120 150 280 150 335 155 L 310 215 C 260 205 140 205 90 215 Z"); opacity: 1; }
.state-sz-x .tongue-path  { d: path("M 150 150 C 150 150 250 150 250 150 C 250 150 150 150 150 150 Z"); opacity: 0; }

/* J: 口をすぼめて、歯を80%くらい見せる */
.state-j .upper-lip  { d: path("M 127 164 C 150 70 177 95 200 100 C 223 95 250 70 273 164 C 240 120 217 125 200 125 C 183 125 160 120 127 164 Z"); }
.state-j .lower-lip  { d: path("M 127 164 C 160 180 183 185 200 185 C 217 185 240 180 273 164 C 250 230 223 238 200 238 C 177 238 150 230 127 164 Z"); }
.state-j .mouth-hole { d: path("M 127 164 C 160 120 183 125 200 125 C 217 125 240 120 273 164 C 240 180 217 185 200 185 C 183 185 160 180 127 164 Z"); }
.state-j .upper-teeth { d: path("M 120 142 C 152 160 248 160 280 142 L 264 95 C 232 105 168 105 136 95 Z"); opacity: 1; }
.state-j .lower-teeth { d: path("M 124 167 C 152 155 248 155 276 167 L 260 205 C 232 200 168 200 140 205 Z"); opacity: 1; }
.state-j .tongue-path  { d: path("M 144 163 C 160 148 240 148 256 163 C 248 183 152 183 144 163 Z"); opacity: 1; }

/* F, V: 下唇を上の歯で軽く噛む */
.state-f .upper-lip  { d: path("M 70 150 C 110 60 160 100 200 110 C 240 100 290 60 330 150 C 270 125 220 132 200 132 C 180 132 130 125 70 150 Z"); }
.state-f .lower-lip  { d: path("M 70 150 C 130 140 180 142 200 142 C 220 142 270 140 330 150 C 290 215 240 225 200 225 C 160 225 110 215 70 150 Z"); }
.state-f .mouth-hole { d: path("M 70 150 C 130 125 180 132 200 132 C 220 132 270 125 330 150 C 270 140 220 142 200 142 C 180 142 130 140 70 150 Z"); }
.state-f .upper-teeth { d: path("M 100 132 C 145 146 255 146 300 132 L 285 100 C 245 112 155 112 115 100 Z"); opacity: 1; }
.state-f .lower-teeth { d: path("M 140 190 C 160 185 240 185 260 190 L 250 200 C 230 200 170 200 150 200 Z"); opacity: 0; }
.state-f .tongue-path  { d: path("M 130 170 C 150 160 250 160 270 170 C 260 195 140 195 130 170 Z"); opacity: 0; }

/* TH: 舌先が上下の歯の間に挟まる */
.state-th .upper-lip  { d: path("M 85 150 C 122 65 163 102 200 110 C 237 102 278 65 315 150 C 260 128 220 134 200 134 C 180 134 140 128 85 150 Z"); }
.state-th .lower-lip  { d: path("M 85 150 C 140 154 180 160 200 160 C 220 160 260 154 315 150 C 278 208 237 218 200 218 C 163 218 122 208 85 150 Z"); }
.state-th .mouth-hole { d: path("M 85 150 C 140 128 180 134 200 134 C 220 134 260 128 315 150 C 260 154 220 160 200 160 C 180 160 140 154 85 150 Z"); }
.state-th .upper-teeth { d: path("M 105 134 C 148 146 252 146 295 134 L 282 108 C 242 118 158 118 118 108 Z"); opacity: 1; }
.state-th .lower-teeth { d: path("M 125 172 C 158 151 242 151 275 172 L 265 186 C 242 180 158 180 135 186 Z"); opacity: 0; }
.state-th .tongue-path  { d: path("M 85 150 C 140 128 180 134 200 134 C 220 134 260 128 315 150 C 260 154 220 160 200 160 C 180 160 140 154 85 150 Z"); opacity: 1; }

/* Q, W, QU: 強く中央にすぼめる */
.state-qw .upper-lip  { d: path("M 145 150 C 160 85 182 118 200 122 C 218 118 240 85 255 150 C 230 134 212 138 200 138 C 188 138 170 134 145 150 Z"); }
.state-qw .lower-lip  { d: path("M 145 150 C 170 166 188 172 200 172 C 212 172 230 166 255 150 C 240 205 218 212 200 212 C 182 212 160 205 145 150 Z"); }
.state-qw .mouth-hole { d: path("M 145 150 C 170 134 188 138 200 138 C 212 138 230 134 255 150 C 230 166 212 172 200 172 C 188 172 170 166 145 150 Z"); }
.state-qw .upper-teeth { d: path("M 165 138 C 180 144 220 144 235 138 L 230 125 C 215 130 185 130 170 125 Z"); opacity: 1; }
.state-qw .lower-teeth { d: path("M 170 170 C 185 168 215 168 230 170 L 225 175 C 215 174 185 174 175 175 Z"); opacity: 0; }
.state-qw .tongue-path  { d: path("M 155 165 C 175 152 225 152 245 165 C 230 185 170 185 155 165 Z"); opacity: 1; }

/* W専用（2段階）: 1段目=qwの縦幅を少し縮めたもの、2段目=oの口角を少し下げたもの。
   歯・舌はmouth-holeでクリップされるので、それぞれqw/oのものをそのまま流用する。 */
.state-w1 .upper-lip  { d: path("M 145 150 C 160 85 182 118 200 122 C 218 118 240 85 255 150 C 230 140 212 142 200 142 C 188 142 170 140 145 150 Z"); }
.state-w1 .lower-lip  { d: path("M 145 150 C 170 162 188 166 200 166 C 212 166 230 162 255 150 C 240 205 218 212 200 212 C 182 212 160 205 145 150 Z"); }
.state-w1 .mouth-hole { d: path("M 145 150 C 170 140 188 142 200 142 C 212 142 230 140 255 150 C 230 162 212 166 200 166 C 188 166 170 162 145 150 Z"); }
.state-w1 .upper-teeth { d: path("M 165 138 C 180 144 220 144 235 138 L 230 125 C 215 130 185 130 170 125 Z"); opacity: 1; }
.state-w1 .lower-teeth { d: path("M 170 170 C 185 168 215 168 230 170 L 225 175 C 215 174 185 174 175 175 Z"); opacity: 0; }
.state-w1 .tongue-path  { d: path("M 155 165 C 175 152 225 152 245 165 C 230 185 170 185 155 165 Z"); opacity: 1; }

.state-w2 .upper-lip  { d: path("M 111 168 C 136 45 176 85 200 95 C 224 85 265 45 289 168 C 245 112 220 118 200 118 C 180 118 156 112 111 168 Z"); }
.state-w2 .lower-lip  { d: path("M 111 168 C 156 205 176 215 200 215 C 220 215 245 205 289 168 C 265 255 235 262 200 262 C 165 262 136 255 111 168 Z"); }
.state-w2 .mouth-hole { d: path("M 111 168 C 156 112 176 118 200 118 C 220 118 245 112 289 168 C 245 205 220 215 200 215 C 176 215 156 205 111 168 Z"); }
.state-w2 .upper-teeth { d: path("M 111 118 C 131 148 269 148 289 118 L 284 100 C 264 108 136 108 116 100 Z"); opacity: 1; }
.state-w2 .lower-teeth { d: path("M 165 218 C 180 212 220 212 235 218 L 230 228 C 215 224 185 224 170 228 Z"); opacity: 1; }
.state-w2 .tongue-path  { d: path("M 145 195 C 155 185 178 180 200 180 C 222 180 245 185 255 195 C 245 213 222 221 200 221 C 178 221 155 213 145 195 Z"); opacity: 1; }

/* QU前半: QとWの座標を平均した口の形 */
.state-qu-avg .upper-lip  { d: path("M 120 158 C 146 70 177 100 200 105 C 224 100 255 70 280 158 C 244 130 216 135 200 135 C 184 135 157 130 120 158 Z"); }
.state-qu-avg .lower-lip  { d: path("M 120 158 C 157 170 184 175 200 175 C 216 175 244 170 280 158 C 255 220 224 230 200 230 C 177 230 146 220 120 158 Z"); }
.state-qu-avg .mouth-hole { d: path("M 120 158 C 157 130 184 135 200 135 C 216 135 244 130 280 158 C 244 170 216 175 200 175 C 184 175 157 170 120 158 Z"); }
.state-qu-avg .upper-teeth { d: path("M 115 135 C 150 156 250 156 285 135 L 275 105 C 235 115 165 115 125 105 Z"); opacity: 1; }
.state-qu-avg .lower-teeth { d: path("M 135 180 C 160 166 240 166 265 180 L 255 190 C 235 185 165 185 145 190 Z"); opacity: 1; }
.state-qu-avg .tongue-path  { d: path("M 142 166 C 160 155 240 155 259 166 C 246 181 155 181 142 166 Z"); opacity: 1; }

/* QU後半: 口の形・舌・下の歯は同じ。上の歯だけ非表示にして消える動きを作る */
.state-qu-avg2 .upper-lip  { d: path("M 120 158 C 146 70 177 100 200 105 C 224 100 255 70 280 158 C 244 130 216 135 200 135 C 184 135 157 130 120 158 Z"); }
.state-qu-avg2 .lower-lip  { d: path("M 120 158 C 157 170 184 175 200 175 C 216 175 244 170 280 158 C 255 220 224 230 200 230 C 177 230 146 220 120 158 Z"); }
.state-qu-avg2 .mouth-hole { d: path("M 120 158 C 157 130 184 135 200 135 C 216 135 244 130 280 158 C 244 170 216 175 200 175 C 184 175 157 170 120 158 Z"); }
.state-qu-avg2 .upper-teeth { d: path("M 115 85 C 150 106 250 106 285 85 L 275 55 C 235 65 165 65 125 55 Z"); opacity: 1; }
.state-qu-avg2 .lower-teeth { d: path("M 135 180 C 160 166 240 166 265 180 L 255 190 C 235 185 165 185 145 190 Z"); opacity: 1; }
.state-qu-avg2 .tongue-path  { d: path("M 142 166 C 160 155 240 155 259 166 C 246 181 155 181 142 166 Z"); opacity: 1; }

/* H: リラックスして息を出す（Aの80%くらいの開き、上の歯は隠す） */
.state-h .upper-lip  { d: path("M 70 150 C 115 70 165 102 200 110 C 235 102 285 70 330 150 C 275 115 225 123 200 123 C 175 123 125 115 70 150 Z"); }
.state-h .lower-lip  { d: path("M 70 150 C 125 195 175 203 200 203 C 225 203 275 195 330 150 C 295 225 245 233 200 233 C 155 233 105 225 70 150 Z"); }
.state-h .mouth-hole { d: path("M 70 150 C 125 115 175 123 200 123 C 225 123 275 115 330 150 C 275 195 225 203 200 203 C 175 203 125 195 70 150 Z"); }
.state-h .upper-teeth { d: path("M 110 115 C 150 115 250 115 290 115 L 280 90 C 240 100 160 100 120 90 Z"); opacity: 0; }
.state-h .lower-teeth { d: path("M 130 203 C 160 203 240 203 270 203 L 260 215 C 240 210 160 210 140 215 Z"); opacity: 1; }
.state-h .tongue-path  { d: path("M 120 203 C 150 180 250 180 280 203 C 265 225 135 225 120 203 Z"); opacity: 1; }

/* K, C, G, Q: 横幅を縮め、上下の歯をしっかり見せる */
.state-kgc .upper-lip  { d: path("M 98 158 C 130 70 170 100 200 105 C 230 100 270 70 302 158 C 255 130 220 135 200 135 C 180 135 145 130 98 158 Z"); }
.state-kgc .lower-lip  { d: path("M 98 158 C 145 170 180 175 200 175 C 220 175 255 170 302 158 C 270 220 230 230 200 230 C 170 230 130 220 98 158 Z"); }
.state-kgc .mouth-hole { d: path("M 98 158 C 145 130 180 135 200 135 C 220 135 255 130 302 158 C 255 170 220 175 200 175 C 180 175 145 170 98 158 Z"); }
.state-kgc .upper-teeth { d: path("M 115 135 C 150 158 250 158 285 135 L 275 105 C 235 115 165 115 125 105 Z"); opacity: 1; }
.state-kgc .lower-teeth { d: path("M 135 180 C 160 163 240 163 265 180 L 255 190 C 235 185 165 185 145 190 Z"); opacity: 1; }
.state-kgc .tongue-path  { d: path("M 129 167.5 C 145 157.5 255 157.5 272 167.5 C 261 177.5 140 177.5 129 167.5 Z"); opacity: 1; }

/* N: 舌を上顎に広くつける */
.state-n .upper-lip  { d: path("M 98 158 C 130 70 170 100 200 105 C 230 100 270 70 302 158 C 255 135 220 140 200 140 C 180 140 145 135 98 158 Z"); }
.state-n .lower-lip  { d: path("M 98 158 C 145 165 180 170 200 170 C 220 170 255 165 302 158 C 270 220 230 230 200 230 C 170 230 130 220 98 158 Z"); }
.state-n .mouth-hole { d: path("M 98 158 C 145 135 180 140 200 140 C 220 140 255 135 302 158 C 255 165 220 170 200 170 C 180 170 145 165 98 158 Z"); }
.state-n .upper-teeth { d: path("M 115 135 C 150 158 250 158 285 135 L 275 105 C 235 115 165 115 125 105 Z"); opacity: 1; }
.state-n .lower-teeth { d: path("M 135 180 C 160 163 240 163 265 180 L 255 190 C 235 185 165 185 145 190 Z"); opacity: 1; }
.state-n .tongue-path  { d: path("M 129 167.5 C 145 157.5 255 157.5 272 167.5 C 261 177.5 140 177.5 129 167.5 Z"); opacity: 1; }

/* D, T のタップ（接触）: 舌が上顎に張り付き下の歯を覆うため下の歯は非表示 */
.state-d .upper-lip  { d: path("M 84 164 C 126 55 167 92 200 100 C 233 92 274 55 316 164 C 266 120 225 128 200 128 C 175 128 134 120 84 164 Z"); }
.state-d .lower-lip  { d: path("M 84 164 C 134 180 175 190 200 190 C 225 190 266 180 316 164 C 283 232 241 240 200 240 C 159 240 117 232 84 164 Z"); }
.state-d .mouth-hole { d: path("M 84 164 C 134 120 175 128 200 128 C 225 128 266 120 316 164 C 266 180 225 190 200 190 C 175 190 134 180 84 164 Z"); }
.state-d .upper-teeth { d: path("M 95 128 C 145 142 255 142 305 128 L 290 95 C 245 110 155 110 110 95 Z"); opacity: 1; }
.state-d .lower-teeth { d: path("M 130 190 C 160 182 240 182 270 190 L 260 202 C 240 198 160 198 140 202 Z"); opacity: 0; }
.state-d .tongue-path  { d: path("M 115 180 C 140 135 180 130 200 130 C 220 130 260 135 285 180 C 250 205 150 205 115 180 Z"); opacity: 1; }

/* D, T のリリース（破裂）: 舌を弾いて下げる */
.state-d-release .upper-lip  { d: path("M 84 164 C 126 55 167 95 200 105 C 233 95 275 55 316 164 C 266 125 225 132 200 132 C 175 132 134 125 84 164 Z"); }
.state-d-release .lower-lip  { d: path("M 84 164 C 134 175 175 182 200 182 C 225 182 266 175 316 164 C 283 235 241 240 200 240 C 159 240 117 235 84 164 Z"); }
.state-d-release .mouth-hole { d: path("M 84 164 C 134 125 175 132 200 132 C 225 132 266 125 316 164 C 266 175 225 182 200 182 C 175 182 134 175 84 164 Z"); }
.state-d-release .upper-teeth { d: path("M 95 132 C 145 144 255 144 305 132 L 290 95 C 245 110 155 110 110 95 Z"); }
.state-d-release .lower-teeth { d: path("M 130 182 C 160 176 240 176 270 182 L 260 195 C 240 190 160 190 140 195 Z"); }
.state-d-release .tongue-path  { d: path("M 130 180 C 150 170 250 170 270 180 C 260 205 140 205 130 180 Z"); }

/* L: Dの口の形をそのまま使用。弾かず、舌を上の歯の裏につけたまま口を閉じる */
.state-l .upper-lip  { d: path("M 74 164 C 119 55 164 92 200 100 C 236 92 281 55 326 164 C 272 120 227 128 200 128 C 173 128 128 120 74 164 Z"); }
.state-l .lower-lip  { d: path("M 74 164 C 128 180 173 190 200 190 C 227 190 272 180 326 164 C 290 232 245 240 200 240 C 155 240 110 232 74 164 Z"); }
.state-l .mouth-hole { d: path("M 74 164 C 128 120 173 128 200 128 C 227 128 272 120 326 164 C 272 180 227 190 200 190 C 173 190 128 180 74 164 Z"); }
.state-l .upper-teeth { d: path("M 95 128 C 145 142 255 142 305 128 L 290 95 C 245 110 155 110 110 95 Z"); opacity: 1; }
.state-l .lower-teeth { d: path("M 130 190 C 160 182 240 182 270 190 L 260 202 C 240 198 160 198 140 202 Z"); opacity: 0; }
.state-l .tongue-path  { d: path("M 115 180 C 140 135 180 130 200 130 C 220 130 260 135 285 180 C 250 205 150 205 115 180 Z"); opacity: 1; }

/* R: Lの口の形をコピーし、横幅を左右15ずつ縮小。舌はRオリジナル（宙に浮く形）を維持 */
.state-r .upper-lip  { d: path("M 114 163 C 145 55 175 92 200 100 C 225 92 255 55 286 163 C 249 120 219 128 200 128 C 181 128 152 120 114 163 Z"); }
.state-r .lower-lip  { d: path("M 114 163 C 152 180 181 190 200 190 C 219 190 249 180 286 163 C 261 232 231 240 200 240 C 169 240 139 232 114 163 Z"); }
.state-r .mouth-hole { d: path("M 114 163 C 152 120 181 128 200 128 C 219 128 249 120 286 163 C 249 180 219 190 200 190 C 181 190 152 180 114 163 Z"); }
.state-r .upper-teeth { d: path("M 108 128 C 152 160 248 160 293 128 L 279 95 C 240 110 160 110 121 95 Z"); opacity: 1; }
.state-r .lower-teeth { d: path("M 129 182 C 160 159 240 159 271 182 L 261 194 C 240 190 160 190 139 194 Z"); opacity: 1; }
.state-r .tongue-path  { d: path("M 115 170 C 121 160 161 155 200 155 C 240 155 279 160 285 170 C 272 185 236 193 200 193 C 164 193 128 185 115 170 Z"); opacity: 1; }

/* AR: AとRの座標を平均した中間状態（速度を均一にするための経由点） */
.state-ar-mid .upper-lip  { d: path("M 94 164 C 132 53 170 91 200 100 C 231 91 269 53 307 164 C 261 117 223 126 200 126 C 177 126 140 117 94 164 Z"); }
.state-ar-mid .lower-lip  { d: path("M 94 164 C 140 189 177 199 200 199 C 223 199 261 189 307 164 C 276 236 238 244 200 244 C 162 244 129 236 94 164 Z"); }
.state-ar-mid .mouth-hole { d: path("M 94 164 C 140 117 177 126 200 126 C 223 126 261 117 307 164 C 261 189 223 199 200 199 C 177 199 140 189 94 164 Z"); }
.state-ar-mid .upper-teeth { d: path("M 104 128 C 151 159 249 159 297 128 L 282 97 C 240 112 160 112 118 97 Z"); opacity: 1; }
.state-ar-mid .lower-teeth { d: path("M 120 185 C 158 171 243 171 281 185 L 268 197 C 243 196 158 196 132 197 Z"); opacity: 1; }
.state-ar-mid .tongue-path  { d: path("M 113 174 C 129 164 165 159 200 159 C 236 159 272 164 288 174 C 272 201 236 215 200 215 C 165 215 129 201 113 174 Z"); opacity: 1; }

/* IR/ER/UR: EとRの座標を平均した中間状態 */
.state-ir-mid .upper-lip  { d: path("M 97 163 C 134 63 171 96 200 103 C 230 96 266 63 303 163 C 259 128 223 132 200 132 C 178 132 142 128 97 163 Z"); }
.state-ir-mid .lower-lip  { d: path("M 97 163 C 142 184 178 192 200 192 C 223 192 259 184 303 163 C 274 231 237 240 200 240 C 163 240 127 231 97 163 Z"); }
.state-ir-mid .mouth-hole { d: path("M 97 163 C 142 128 178 132 200 132 C 223 132 259 128 303 163 C 259 184 223 192 200 192 C 178 192 142 184 97 163 Z"); }
.state-ir-mid .upper-teeth { d: path("M 85 128 C 138 165 262 165 317 128 L 300 97 C 252 111 149 111 101 97 Z"); opacity: 1; }
.state-ir-mid .lower-teeth { d: path("M 119 184 C 154 167 246 167 281 184 L 270 195 C 246 190 154 190 131 195 Z"); opacity: 1; }
.state-ir-mid .tongue-path  { d: path("M 120 174 C 128 166 165 161 200 161 C 237 161 273 166 281 174 C 270 188 235 195 200 195 C 166 195 131 188 120 174 Z"); opacity: 1; }

/* 口の断面図（側面）ポップアップ。ボタンのホバー/クリック/タップで表示する */
.phonics-mouth-side-popup {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 2px solid #1e293b;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s linear;
}

/* 「組み合わせ」（複数パターンまとめボタン）自身のパターン再生中は、枠線を
   #extra-buttons-2のボタンと同じ緑にする。 */
.phonics-mouth-side-popup-combo {
    border-color: #166534;
}

.phonics-mouth-side-popup.is-visible {
    opacity: 1;
    transition: opacity .15s ease;
}

/* 断面図の画像(1〜2枚)＋矢印をまとめる行。ポップアップ自体は縦積み
   (説明文バッジ→この行)なので、横並びはこちらで担当する。 */
.phonics-mouth-side-frames {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 発音の説明文（instruction-textと同じ内容）を「モーション1」ラベルと同じ
   白背景・太字バッジのスタイルで表示する。音素1個につき共通の説明のため、
   モーションごとの画像の外側・上に専用の行として1個だけ置く。最大2行まで。 */
.phonics-mouth-side-desc {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    color: #000;
    text-align: center;
    /* 横幅は固定pxではなくJS側で実測した枠(フレーム行)の90%を都度styleに入れる
       （showSideViewPopup内）。ここでmax-widthを指定すると実測値が無視されて
       常に狭く見えてしまうため入れない。2モーション（画像2枚）タイプは横幅に
       余裕があり必ず1行に収まる想定のため、折り返さず、はみ出す場合だけ
       JS側でフォントサイズを縮小して1行に収める。 */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.phonics-mouth-side-popup img {
    display: block;
    width: 165px;
    height: 165px;
    object-fit: cover;
    border-radius: 50%;
}

.phonics-mouth-side-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.phonics-mouth-side-frame-label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #000;
    background: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* 画像が1枚だけの断面図で、モーション1ラベルと同じ場所（画像の左上寄せ、重ねる形）
   に発音の説明を出す時の上書き。最大2行まで折り返す。 */
.phonics-mouth-side-frame-label-desc {
    white-space: normal;
    max-width: 95%;
    text-align: center;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.phonics-mouth-side-arrow {
    flex-shrink: 0;
}

/* ==========================================
   スマホ用の上書き。同じ詳細度のベース（PC）ルールより
   後ろに書かないとカスケードで負けて無効化されるため、
   ファイルの一番最後に置いている。
   ========================================== */
@media (max-width: 767px) {
    #example-words {
        padding-bottom: 5px;
    }
    /* 画像入りツールチップはスマホでは画面幅の90%にする */
    .phonics-mouth-label-tooltip-image {
        width: 90vw;
        max-width: 90vw;
    }
    .phonics-mouth-header {
        margin-bottom: 8px;
    }
    .phonics-mouth-header h2 {
        font-size: 20px;
        font-weight: 700;
        white-space: nowrap;
    }
    .phonics-mouth-label-area {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .phonics-mouth-btn-grid {
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 6px;
    }
    /* OO以下（拡張ブレンド音）はスマホでボタン幅を1.5倍(36px→54px)にする */
    #extra-buttons-2 {
        grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    }
    /* マジックEの行は#extra-buttons単体に1個(span 7)のボックスしか入っていない。
       auto-fit/auto-fillだと「使われない余分な列」の折りたたみがブラウザによって
       うまく効かず、右側に空白が残ることがあったため、常に7等分になる
       repeat(7, 1fr)に固定して確実に画面幅いっぱいまで埋める。 */
    #extra-buttons {
        grid-template-columns: repeat(7, 1fr);
    }
    /* IR/ER/UR・EAR・AIRはスマホ幅だと半端に折り返されてしまうため、この3個だけ
       ボタン2個分の幅に広げる。IR/ER/URは行の先頭(1列目)に強制し、EAR・AIRが
       そのまま横に並んで3個で1行(2+2+2)に収まるようにする。 */
    .phonics-mouth-btn-2col-mobile {
        grid-column: span 2;
    }
    .phonics-mouth-btn-newrow-mobile {
        grid-column: 1 / span 2;
    }
    /* schwa(A E O U)ボタンはスマホで2トラック分を確保し、そのままボタン自体を
       トラック幅いっぱいまで広げる（justify-self指定なし＝デフォルトのstretch）。 */
    .phonics-mouth-btn-schwa {
        grid-column: span 2;
    }
    /* 「あいまいな発音の場合」ラベル（schwaボタンの直前）も同様に2トラック分使う。
       通常のラベルピル(基礎の音／組み合わせ)は1トラックのまま短縮表示するのに対し、
       こちらは短縮せず全文表示したいため専用に幅を広げる。 */
    .phonics-mouth-label-pill-purple {
        grid-column: span 2;
    }
    .phonics-mouth-btn {
        flex-direction: row;
        gap: 3px;
        padding: 5px;
    }
    .phonics-mouth-btn-label,
    .phonics-mouth-btn-ipa {
        white-space: nowrap;
    }
    .phonics-mouth-btn-label {
        font-size: 13px;
    }
    .phonics-mouth-btn-label.is-long {
        font-size: 10px;
    }
    .phonics-mouth-btn-label.is-very-long {
        font-size: 7px;
    }
    .phonics-mouth-btn-ipa {
        font-size: 9px;
    }
    /* 複数パターンまとめボタンの発音記号は長いため、上のnowrap指定を上書きして
       折り返しを許可する（このブロックより後ろに書かないとカスケードで負ける）。 */
    .phonics-mouth-btn-ipa-multi {
        white-space: normal;
        font-size: 8px;
    }
    .phonics-mouth-current-ipa-seg,
    .phonics-mouth-current-ipa {
        font-size: 13px;
        padding: 2px 6px;
    }
    /* schwaボタンは2トラック分の幅があるので、is-very-long(7px)より少し大きく表示する。
       上のis-very-long指定より後ろに書かないとカスケードで負ける。 */
    .phonics-mouth-btn-schwa .phonics-mouth-btn-label {
        font-size: 12px;
    }
    .phonics-mouth-btn-schwa .phonics-mouth-btn-ipa {
        font-size: 11px;
    }
    /* IR/ER/UR・EAR・AIRも2トラック分の幅があるので、schwaと同じ理由で
       is-very-long(7px)より大きく表示する。上のis-very-long指定より
       後ろに書かないとカスケードで負ける。 */
    .phonics-mouth-btn-2col-mobile .phonics-mouth-btn-label,
    .phonics-mouth-btn-newrow-mobile .phonics-mouth-btn-label {
        font-size: 12px;
    }
    .phonics-mouth-btn-2col-mobile .phonics-mouth-btn-ipa,
    .phonics-mouth-btn-newrow-mobile .phonics-mouth-btn-ipa {
        font-size: 11px;
    }

    /* 画面幅が狭い端末（iPhone SE等）だとポップ総幅(画像2枚+矢印)が画面幅を
       超えてしまい、画面外はみ出し防止のガードで強制左寄せになって中央揃えが
       崩れることがあるため、画像を画面幅基準で縮小する。正方形は維持して
       object-fit:coverによる真円クロップが崩れないようにする。 */
    .phonics-mouth-side-popup img {
        width: min(165px, 30vw);
        height: min(165px, 30vw);
    }
    .phonics-mouth-side-arrow {
        width: 16px;
        height: 16px;
    }
    .phonics-mouth-side-frame-label {
        /* 「モーション1（Uと同じ）」のように文字数が増えたため、狭い画面でも
           画像の枠から大きくはみ出さないよう小さめにしている（要目視確認）。 */
        font-size: 9px;
    }
    .phonics-mouth-side-desc {
        font-size: 11px;
    }
    .phonics-mouth-side-frame-label-desc {
        font-size: 9px;
    }

    /* マス幅が狭いスマホでも「マジックE」が消えず1行に収まるように、幅を2マス分に戻して縮小する */
    .phonics-mouth-label-pill {
        flex: 2;
        font-size: 9px;
        padding-left: 2px;
        padding-right: 2px;
    }

    /* 基礎の音ラベルはaz-buttons(グリッド)内の1マスに収まる必要があり、
       他のラベルより箱が狭い。「基礎の音」の代わりに短縮した「基礎」を
       表示することで、文字を大きく見せられるようにする。 */
    .phonics-mouth-label-full {
        display: none;
    }
    .phonics-mouth-label-short {
        display: inline;
        font-size: 13px;
    }

    /* スマホは中央揃え。white-space:nowrap（基本ルールで指定済み）により折り返しは
       発生しないため、必ず1行のまま表示される。ただし画面幅を超えるとその分は
       見切れる/横スクロールの原因になるので、拡大しすぎないよう注意。 */
    .phonics-mouth-bluetooth-hint {
        justify-content: center;
        text-align: center;
        font-size: 12.5px;
    }

    /* 口の絵（SVG）は#mouth-container svgのwidth/height:100%でそのまま比率維持のまま
       縮小されるので、位置がズレることなく枠だけ75%の高さになる */
    #mouth-container {
        height: 192px; /* 256px の75% */
    }

    .phonics-mouth-label-area {
        margin-top: 3.5px; /* 5px の70% */
        margin-bottom: 3.5px; /* 5px の70% */
    }

    /* Uのグループ内gapぶん、A/I/E/Oより少し狭く見えていたのを補正して幅を揃える */
    .phonics-mouth-group-box-red {
        flex: 2.2;
        gap: 2px;
    }
}