:root{
  --brand:#203864;
  --ink:#ffffff;
  --muted:#cfd6e9;
  --radius:14px;
  --gap:14px;
  --max:1100px;
}

/* 画面には非表示だが読み上げ可能 */
.visually-hidden{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px; width:1px;
  overflow:hidden; white-space:nowrap;
}

/* ベース */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.7 system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--brand);
  -webkit-text-size-adjust:100%;
}

/* ===== ヘッダー ===== */
.site-header{
  background:var(--brand);
  text-align:center;
  padding:16px;
}
.site-title{
  margin:0 auto;
  max-width:var(--max);
}
.site-title img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* ===== コンテナ ===== */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:20px 16px 32px;
}

/* ===== 問題ブロック ===== */
/* 1つ目には線を出さず、2つ目以降の「上」にだけ仕切り線を表示 */
.problem{
  padding:18px 0 12px;
}


/* h2 と サンプルを横並びで1行表示 */
.problem-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  min-height:40px;
}
.problem h2{
  margin:0;
  font-size:1.1rem;
  color:#fff;
  flex:0 0 auto;
}

/* サンプル題名 */
.sample-chip{
  flex:1 1 auto;
  min-width:0;
}
.sample-chip h3{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.35);
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== 3パターン横並び（常に3列） ===== */
.pattern-row{
  display:flex;
  gap:var(--gap);
  flex-wrap:nowrap; /* 折り返しなし */
}
.pattern{
  flex:0 0 calc((100% - 2*var(--gap))/3); /* 正確に3等分 */
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.05);
  transition:transform .06s ease, box-shadow .06s ease, border-color .06s ease;
}
.pattern:hover,
.pattern:focus{
  transform:translateY(-2px);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  border-color:rgba(255,255,255,.45);
}
.pattern img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:3/2;
  object-fit:cover;
}
.pattern span{
  display:block;
  text-align:center;
  padding:8px 10px;
  font-weight:700;
  color:#fff;
}

/* ===== 広告枠 ===== */
.ad-slot{
  margin:28px 0;
  display:flex;
  justify-content:center;
}
.ad-placeholder{
  width:min(100%, 728px);
  min-height:90px;
  border:2px dashed rgba(255,255,255,.5);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  font-weight:700;
}

/* ===== CTA（Yoiyoru） ===== */
.yoiyoru-cta{
  max-width:var(--max);
  margin:10px auto 0;
  text-align:center;
}
.yoiyoru-cta.bottom{
  margin:28px auto;
}
.btn-yoiyoru{
  display:inline-block;
  padding:10px 18px;
  background:#fff;
  color:var(--brand);
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  border:2px solid #fff;
}
.btn-yoiyoru:hover,
.btn-yoiyoru:focus{
  background:transparent;
  color:#fff;
  border-color:#fff;
}

/* ===== 利用規約（<details>） ===== */
/* 横幅は .container と同じ（--max）で中央揃え、本文は淡いグレー背景＋濃い文字色 */
details.terms{
  max-width:var(--max);
  margin:2em auto;
  padding:1.5em;
  background:#f9f9f9;
  border:1px solid #ccc;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  line-height:1.8;
  color:#222;
}
/* summary をボタン風に。中央揃え */
details.terms > summary.btn-yoiyoru{
  cursor:pointer;
  display:block;
  text-align:center;
  font-weight:700;
  background:#203864;
  color:#fff;
  padding:.8em 1.5em;
  border-radius:8px;
  user-select:none;
  transition:background .3s;
  list-style:none;
}
/* Safari の▼マーカーを消す */
details.terms > summary.btn-yoiyoru::-webkit-details-marker{ display:none }
details.terms > summary.btn-yoiyoru:hover{ background:#2f4a96 }

/* 開いた時に中身の余白を少し足す */
details[open].terms{ padding-top:2em }
details.terms h2{
  margin-top:.8em;
  font-size:1.3em;
  color:#203864;
  text-align:center;
}
details.terms h3{
  margin-top:1.2em;
  font-size:1.1em;
  color:#333;
}
details.terms p{ margin:.6em 0 }

/* ===== フッター ===== */
.site-footer{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:14px 10px;
}
.site-footer p{ margin:0 }

/* ===== レスポンシブ微調整 ===== */
@media (max-width:720px){
  .pattern-row{ gap:10px }
  .pattern{ flex:0 0 calc((100% - 20px)/3) }
}


/* ===== 広告１調整 ===== */
.ad1 {width: 100%;}