/* ===== ボタン(幅400・センター) ===== */
.kentei-modal-buttons{
  display:flex;
  justify-content:center;
}
.kentei-modal-buttons img{
  display:block;
  width:600px;
  max-width:100%;
  height:auto;
}

/* ===== overlay濃さ（好みで調整OK） ===== */
.modaal-overlay{
  background:rgba(0,0,0,.75) !important;
}

/* ===== モーダル全体：画像のブルー背景 ===== */
.kentei-qmodal{
  background:#4A97D1; /* 画像の背景色に合わせ */
  color:#fff;
}

/* modaalの内側余白を消して「画像っぽい見え方」に寄せる */
.modaal-inline .modaal-container{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.modaal-inline .modaal-content{
  padding:0 !important;
}

/* 本体（800px画像相当の比率に寄せる） */
.kentei-qmodal__inner{
  position:relative;
  width:min(800px, 92vw);
  padding:48px 56px 44px;  /* 画像の余白感 */
  box-sizing:border-box;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* 左上ロゴ */
.kentei-qmodal__logo{
  position:absolute;
  top:34px;
  left:44px;
}
.kentei-qmodal__logo img{
  width:120px;
  height:auto;
  display:block;
}

/* ブロック（問題1つ分） */
.kentei-qmodal__block{
  display:grid;
  grid-template-columns: 92px 1fr; /* 左「問題」列 */
  column-gap:26px;
  align-items:start;
  margin-top:150px; /* ロゴ下の開始位置を画像に寄せる */
}
.kentei-qmodal__block--spaced{
  margin-top:70px; /* 2問目との間隔 */
}

/* 「問題」 */
.kentei-qmodal__tag{
  color:#FFEE00;
  font-weight:800;
  font-size:34px;
  line-height:1;
  letter-spacing:0.02em;
  margin-top:6px;
}

/* 問題文 */
.kentei-qmodal__q{
  font-weight:800;
  font-size:30px;
  line-height:1.3;
  letter-spacing:0.01em;
}

/* 正解行 */
.kentei-qmodal__a{
  display:flex;
  gap:28px;
  align-items:baseline;
  margin-top:14px;
  color:#C9E8FF; /* 画像の淡い水色に寄せ */
  font-weight:800;
}
.kentei-qmodal__akey{
  font-size:28px;
}
.kentei-qmodal__aval{
  font-size:30px;
}

/* 下部の黄色キャッチ */
.kentei-qmodal__footer{
  text-align:center;
  color:#FFEE00;
  font-weight:800;
  margin-top:70px;
}
.kentei-qmodal__footerLine1{
  font-size:28px;
  line-height:1.2;
}
.kentei-qmodal__footerLine2{
  font-size:28px;
  line-height:1.2;
  margin-top:10px;
}

/* SP微調整 */
@media (max-width: 768px){
  .kentei-qmodal__inner{
    padding:36px 20px 28px;
  }
  .kentei-qmodal__logo{
    top:18px;
    left:18px;
  }
  .kentei-qmodal__block{
    margin-top:120px;
    grid-template-columns: 78px 1fr;
    column-gap:16px;
  }
  .kentei-qmodal__tag{ font-size:26px; }
  .kentei-qmodal__q{ font-size:22px; }
  .kentei-qmodal__akey{ font-size:20px; }
  .kentei-qmodal__aval{ font-size:22px; }
  .kentei-qmodal__footerLine1,
  .kentei-qmodal__footerLine2{ font-size:20px; }
}
/* ===== modaal のセンタリングと背景を安定させる ===== */

/* コンテナ自体をちゃんと中央に */
.modaal-wrapper .modaal-container{
  width: min(800px, 92vw) !important;
  margin: 6vh auto !important;          /* ←左右autoで強制センター */
  box-sizing: border-box !important;
  left: auto !important;               /* 変なleft指定を殺す */
  right: auto !important;
}

/* inlineモーダルの「白い箱」側（ここに背景を載せる） */
.modaal-inline .modaal-container{
  background: #4A97D1 !important;      /* ←ここが最重要。透明をやめる */
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;         /* 角丸からはみ出さない */
}

/* 中身の余白はコンテンツ側へ */
.modaal-inline .modaal-content{
  padding: 0 !important;
  background: transparent !important;
}

/* あなたの作った本体は「背景なし」にしてOK（背景はcontainerが担当） */
.kentei-qmodal{
  background: transparent !important;
}

/* 内側のレイアウト（前回の指定を維持） */
.kentei-qmodal__inner{
  width: 100% !important;              /* container幅にフィット */
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 48px 56px 44px;
  position: relative;
  color: #fff;
}
/* 下部キャッチだけ明朝体に */
.kentei-qmodal__footer{
  font-family: "Noto Serif JP", "Hiragino Mincho ProN",
               "Yu Mincho", "MS PMincho", serif;
  letter-spacing: 0.04em;   /* 明朝らしい呼吸 */
}

/* 行ごとの微調整（任意だがおすすめ） */
.kentei-qmodal__footerLine1,
.kentei-qmodal__footerLine2{
  font-weight: 600;
}
/* ===== SP最適化 ===== */
@media (max-width: 768px){

  /* 1) ボタン：幅90%に */
  .kentei-modal-buttons{
    justify-content:center;
  }
  .kentei-modal-buttons img{
    width:90vw;       /* 画面の90% */
    max-width:420px;  /* 念のため上限（好みで） */
  }

  /* 2) モーダル：余白を減らし、画面幅を有効活用 */
  .kentei-qmodal__inner{
    width:92vw !important;
    padding:26px 16px 22px;
  }

  /* ロゴも少しだけ縮める（見た目が詰まるので） */
  .kentei-qmodal__logo{
    top:14px;
    left:14px;
  }
  .kentei-qmodal__logo img{
    width:75px; /* 120→96 */
  }

  /* 3) レイアウト：左「問題」列を細く、gapも縮める */
  .kentei-qmodal__block{
    margin-top:92px;                 /* 上の空き詰める */
    grid-template-columns: 45px 1fr; /* 左列を細く */
    column-gap:12px;
  }
  .kentei-qmodal__block--spaced{
    margin-top:40px;                 /* 2問目との間隔も詰める */
  }

  /* 4) 文字サイズ：少し小さめに */
  .kentei-qmodal__tag{ font-size:18px; }
  .kentei-qmodal__q{
    font-size:17px;
    line-height:1.35;
  }
  .kentei-qmodal__a{ margin-top:10px; gap:16px; }
  .kentei-qmodal__akey{ font-size:16px; }
  .kentei-qmodal__aval{ font-size:18px; }

  /* 5) SPでは <br> を無効化して「改行を少なく」する */
  .kentei-qmodal__q br{
    display:none;
  }

  /* 下部キャッチも少し詰める（明朝は維持） */
  .kentei-qmodal__footer{
    margin-top:40px;
  }
  .kentei-qmodal__footerLine1,
  .kentei-qmodal__footerLine2{
    font-size:17px;
  }
}

/* 既存CSSの aタグスタイルに巻き込まれて崩れるのを防ぐ */
.kentei-modal-buttons{
  text-align:center; /* 念のため */
}

.kentei-modal-trigger{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  position:static !important;
  text-decoration:none !important;
}

.kentei-modal-trigger img{
  display:block;
  width:600px;        /* PC想定：以前の要件に戻す */
  max-width:100%;
  height:auto;
}

/* SPは90% */
@media (max-width: 768px){
  .kentei-modal-trigger img{
    width:90vw;
    max-width:420px;
  }
}