html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'M PLUS 1p', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
align-items: flex-start;
}

/* 親要素: 全体を横並びに配置 */
.main-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: flex-start;
    width: 80vw;
    max-width:1200px;
margin: -20px 0 0 45px !important; /* 上 0, 右 0, 下 0, 左 20px */
height:300px;
}

/* 中央のコンテンツ: アライグマの画像などを縦に並べる */
.center-content {
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position:relative;
}

#illust1{
width:110%;
height:20rem;


}

/* スコア表示の配置 (左上) へ修正 */
/* ------------------------------------ */
#score-display {
    /* ★★★ 必須: 親要素 (.center-content) を基準に重ねる ★★★ */
    position: absolute;
    
    top: 0px;      /* 上端からの距離は維持 */
    
    /* ★★★ ここを修正: 左端からの配置へ変更 ★★★ */
    left: -5px;     /* 左端からの距離 */
    /* right: 15px; */ /* 右端の指定は削除 */
    
    z-index: 50; 
    
    /* スタイル調整 (ネオン/光沢スタイルは維持) */
    color: #ffd700; 
    font-size: 1.5em; 
    font-weight: bold;
    text-shadow: 0 0 5px #ffcc00; 
    background-color: transparent;
}


#game-time-display {
    position: absolute;
    top: 0px;      /* 上端からの距離 */
    right:-5px;    /* ★★★ 右端からの距離 ★★★ */
    z-index: 50; 
    
    /* スタイル調整 (スコア表示と対になるように調整) */
    color: #ffd700; 
    font-size: 1.5em; 
    font-weight: bold;
    text-shadow: 0 0 5px #ffcc00; 
}

/* ------------------------------------ */
/* 1. ボタンコンテナの配置と横並び */
/* ------------------------------------ */
#speed-button-container {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: -40px;
    margin-left: 1vw;
    z-index: 1000;
}

/* ------------------------------------ */
/* 2. 画像ボタン共通のスタイル */
/* ------------------------------------ */
#speed-up-image-button,
#speed-down-image-button {
    /* ★★★ サイズを共通で調整 ★★★ */
    width: 40%;  /* 例: 適切なサイズに調整 */
    height: auto;
    
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

/* ------------------------------------ */
/* 3. クリック・ホバー時の効果 */
/* ------------------------------------ */
#speed-up-image-button:hover,
#speed-down-image-button:hover {
    transform: scale(1.05); 
}

#speed-up-image-button:active,
#speed-down-image-button:active {
    transform: scale(0.98); 
}

#pizza {
    width: 100px;
    height: auto;
    position: absolute;
    top: 15.4rem;
    left: -2vw;
}

#nextpizza{
position:absolute;
width:20vw;
height:auto;
top:-18vw;
left:26vw;
z-Index:5;
}

/* A. デフォルトの状態 = 光っている状態 */
/* ---------------------------------------------------- */
#ShiningPizza1.selected,
#ShiningPizza2.selected,
#ShiningPizza3.selected {
    /* ピザの要素にIDで直接スタイルを適用し、光らせる */
filter: brightness(1.4) 
            drop-shadow(0 0 25px #FF4500) /* Orangered (より強く広がる炎) */
            drop-shadow(0 0 15px #FF8C00) /* Darkorange (中心の熱い部分) */
            drop-shadow(0 0 5px white);  /* 中心に白い光を少し残して熱さを強調 */
    
    cursor: pointer;
}

#ShiningPizza1.unselected,
#ShiningPizza2.unselected,
#ShiningPizza3.unselected {
    filter: brightness(1.0) drop-shadow(0 0 0 transparent);
}

/* ---------------------------------------------------- */
/* B. 選択された後の状態 = 光っていない状態 */
/* ---------------------------------------------------- */
.unselected {
    /* JSでクリック時に追加され、光を消して通常に戻す */
    filter: brightness(1.0) drop-shadow(0 0 0 transparent); 
}

#ShiningPizza2 {
    /* クリックイベントのブロックを避けるための基本設定 */
    position: relative;
    z-index: 100;
    
    /* ★最も重要: 疑似要素が枠からはみ出さないようにする★ */
    overflow: hidden; 
}

#ShiningPizza3 {
    /* クリックイベントのブロックを避けるための基本設定 */
    position: relative;
    z-index: 100;
    
    /* ★最も重要: 疑似要素が枠からはみ出さないようにする★ */
    overflow: hidden; 
}



.pizza-container {
    width:20%;
    display: flex;
    flex-direction: column;
    gap: 10px;
align-items: center;
}

.pizza-container img{
    width: 70%;
    height: auto;
    z-Index:5;
}


.pizza-rightcontainer {
    width:20%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
align-items: center;
}

.pizza-rightcontainer img{
    width: 100%;
    height: auto;
    z-Index:5;
}


#illust2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* 横幅を少し広げて、アライグマの画像幅とバランスをとる */
    width: 80% !important; 
    max-width: 600px;

/*auto の代わりに margin-left に % を使うと細かく「左」へ動かせます */
    margin-top: -10px !important;  /* マイナス値にするとさらにアライグマに重なるくらい近づきます */
    margin-left: 18% !important;   /* autoから数値指定に変えて、左側の位置を固定します */
    margin-right: auto !important;
}

.text-group {
    display: flex !important;
    /* row（横並び）か column（縦並び）かは、文字の長さで決めてください */
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    gap: 15px;

position: absolute;
    top: 25%;               /* 枠の下側に固定 */
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* --- ここが最重要：配置をリセット --- */
    left: 0 !important;    /* 55%をやめて、左端に合わせる */
    transform: translateY(-50%) !important; /* X方向（横）の移動を消す */
    
    width: 120% !important; /* これで親の端から端まで届きます */
    z-index: 100;
}

/* 文章の中にあるパーツ（bやspan）は、箱ではなく「文字」として扱う */
.text-group > *, #constant-group {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    
    /* inline-flex をやめて inline（普通の文字）に戻す */
    display: inline !important; 
    
    /* パーツが縦にズレないように調整 */
    vertical-align: baseline;
}

/* ＝ の記号（もし独立した ID やクラスがあれば） */
#equal-symbol {
    font-size: 2rem;
    margin-right: 10px;
}

#illust2 .question-text,
#illust2 .questtion1-1,
#illust2 .questtion1-2,
#illust2 .questtion1-3{
position: absolute;
    top: 0%;               /* 枠内のさらに上の方へ */
    left: 63%;
    transform: translateX(-50%);
    
    width: 100% !important;  /* 横幅を広げて改行を減らす */
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.4;
    z-index: 10;
}

#ep1 {
    position: absolute;
    margin-top: 5rem;
}

#illust2 #question1-4 {
    /* 必要に応じて幅や高さを調整 */
    width: 10%;
    height: auto;
}

#illust2 .question-text{
font-size:2.5vw;  
text-align:center;  
z-Index:3;
}

#illust2 .questtion1-1{
/* 最小 1.2rem、画面に合わせて変動、最大 3rem という設定 */
  font-size: clamp(1.2rem, 8vw, 3rem);
  
  /* 枠からはみ出さないように余白（パディング）を確保 */
  padding: 0 20px;
  box-sizing: border-box; /* パディングを枠の中に含める設定 */
display:flex;
margin-top:-20%;
text-align:center;  
z-Index:3;
justify-content: center;
white-space: nowrap; /* 勝手に改行させない */
}

#answer-group {
    /* パーツを横に並べるための必須設定 */
    display: flex !important;
    flex-direction: row !important; /* 絶対に横並び */
    align-items: center !important; /* 上下の中央を揃える */
    justify-content: center !important; /* 左右の中央に集める */
    
    /* パーツ同士の隙間（ここを広げるとゆったりします） */
    gap: 15px; 

    /* 枠内の位置調整（絶対配置） */
    position: absolute;
    top: 48% !important; /* 枠の下半分に配置 */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 横幅をしっかり確保して斜線を消す */
    width: 95% !important; 
    z-index: 100;
}

/* 1. 個別の絶対位置を消す（今の設定を維持しつつ、マージンをリセット） */
#answer1, #answer1_2 {
    position: static !important;
    transform: none !important;
    width: 8.5vw !important;
    height: 1.5em !important;
    margin: 0 !important; /* 余計な隙間を消す */
font-size: 4vw !important; /* 問題文の大きさに合わせる */
    font-weight: bold;
    color: #333;
text-align:center;
}

/* 2. 定数項のグループ（＋ □）も横並びにする */
#constant-group {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: static !important; /* 独自の位置指定を解除 */
}

/* 3. answer1-3（器）自体の設定 */
#answer1-3 {
    display: inline-flex;           /* 中の input を正しく配置する */
    vertical-align: middle;
font-size: 4vw !important; /* 問題文の大きさに合わせる */
    font-weight: bold;
    color: #333;
}

/* 中の要素の absolute を解除する */
#answer1-1, #answer1, #answer1-2, #answer1-3 {
    position: static !important; /* absolute を上書き */
    transform: none !important;
    margin: 0 5px;
}

/* ★これだけがネオンブルーに光る */
.math-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;  /* 枠の幅 */
    height: 60px; /* 枠の高さ */
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #00ffff; /* ネオンブルー */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); /* 光の演出 */
    font-size: 32px;
    font-weight: bold;
    color: #333;
}

/* ★＝ や ＋ や 文字は「装飾なし」にする */
.math-symbol {
    font-size: 4vw;
    font-weight: bold;
    font-family: 'Times New Roman', serif;
    color: #333;
    /* 背景や枠線を明示的に打ち消す */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.italic {
    font-style: italic;
}

/* a や y などの文字のスタイル */
#display-variable {
    font-style: italic;       /* 数学らしく斜体に */
    font-family: 'Times New Roman', serif;
    margin-right: 5px;        /* 文字の右側に少し余裕を */
}

/* 1. 枠（土台）: absolute はつけない */
#illust2 .waku {
    width: 115% !important;
    height: auto;
    /* 左に寄る原因を完全に消す */
    margin-top:-4em;
    margin-left:8vw;
    display: block;
}


#modal p.kekka0{
position: absolute;/*重ねたい子要素にabsolute*/
top:10%;
left: 5%;
right:5%;
font-size:200%;
text-align:center;
font-family: "Nikukyu";
color:black;
font-weight: bold;

}

#modal p.kekka1{
position: absolute;/*重ねたい子要素にabsolute*/
top:25%;
left: 5%;
right:5%;
font-size:250%;
text-align:center;
font-family: "Nikukyu";
color:black;
font-weight: bold;

}
#modal p.reload1{
position: absolute;/*重ねたい子要素にabsolute*/
top:53%;
left: 15.5%;
right: 60.5%;
font-size:140%;
text-align:center;
font-family: "Nikukyu";
color:#ff4500;
font-weight: bold;

}

.detailed-stats {
    display: flex;            /* 横並びにする魔法の言葉 */
    justify-content: center;  /* 中央に寄せる（左右均等なら space-around） */
    gap: 20px;                /* 各項目の間のスキマ */
    color: white;             /* 文字色 */
    font-size: 14px;          /* 少し小さめにすると1行に収まりやすい */
    margin: 10px 0;           /* 上下の余白 */
}

.detailed-stats p {
    margin: 0;                /* 余計な上下の隙間を消す */
    white-space: nowrap;      /* 画面が狭くても勝手に改行させない */
}

.detailed-stats span {
    color: #ffcc00;           /* 数字だけ黄色にする */
    font-weight: bold;
    margin-left: 5px;
}

/* 画面全体を覆う背景 */
#result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* 濃い半透明の背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* モーダルの中身を囲むボックス */
.modal-content {
    text-align: center;
    padding: 30px;
    
    /* 背景色を透明にして、ネオンの枠線だけが目立つようにする */
    background-color: transparent;
}

/* 外側のネオンリング（マゼンタ系の光） */
.neon-frame-outer {
    position: relative;
    width: 460px; /* サイズ調整 */
    height: 460px; /* サイズ調整 */
    border-radius: 50%; /* 円形 */
    padding: 20px;
    
    /* マゼンタの光 */
    box-shadow: 
        0 0 20px #ff00ff, 
        0 0 40px #ff00ff;
    border: 3px solid #ff00ff;
}

/* 内側のネオンリング（サイバーブルー系の光） */
.neon-frame-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 410px; /* 外側より小さく */
    height: 410px;
    border-radius: 50%;
    padding: 20px;
    
    /* 青の光 */
    box-shadow: 
        0 0 15px #00ffff, 
        0 0 30px #00ffff;
    border: 3px solid #00ffff;
    
    /* テキストを内側に配置するための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 達成メッセージ */
.result-message, .result-message-sub {
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 0 5px #ffffff;
    margin: 5px 0;
    z-index: 10;
}

/* 最終スコアの値 */
.final-score-value {
    color: #ffd700; /* ゴールド */
    font-size: 6em; /* 非常に大きく */
    font-weight: 900;
    margin: 10px 0 25px 0;
    
    /* 強力なネオン効果 (ゴールド) */
    margin-top: -5%;
    text-shadow: 
        0 0 10px #ffcc00, 
        0 0 20px #ffcc00,
        0 0 40px rgba(255, 165, 0, 0.8);
}

/* 次のステージへボタン */
.modal-content button {
    /* 以前提案したブーストカラーのスタイルを適用 */
    background: #ff6600;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    box-shadow: 
        0 0 15px rgba(255, 102, 0, 1.0),
        0 0 30px rgba(255, 165, 0, 0.6);
    transition: all 0.2s;
    margin-top: -5%;
}




/* MathJaxのHTML出力全体を対象とするセレクタ */

/* 1. すべての数式要素のフォントスタイルを「標準」に設定 */
.mjx-chtml span, 
.mjx-chtml i, 
.mjx-chtml em {
    font-style: normal !important; 
}

/* 2. 変数（b, yなど）は、数学的慣習に従って斜体に戻す */
.mjx-chtml .mi {
    font-style: italic !important; 
}