/* GABボーダー突破模試：共通土台 moshi-base.css のテーマ上書き。
   テーマ色は記事アイキャッチ（2024/07/gab-border.png）の実測から。
   占有率1位は淡いピーチ #FFCDAC（41.9%・背景ベタ）で白文字が乗らないため、同じアイキャッチ内で
   唯一の濃色アクセント #0086CB（6.1%）を主色系に採用した。
   ただし #0086CB は白文字で 3.98:1 しか出ず 14px の「次へ」ボタンでAAを満たさないので、
   --m-deep には同系を1段暗くした #0071AE（5.29:1）を置き、#0086CB は --m-blue（アクセント）側で使う。
   （生HEXは書かない＝土台側は全部 var() で参照している。reference_moshi_css_vars_defeated_by_hardcoded_hex） */
.gabb-moshi {
  --m-deep: #0071AE;
  --m-deep-d: #00567F;
  --m-deep-l: #E4F2FB;
  --m-blue: #0086CB;
  --m-blue-d: #0071AE;
  --m-mist: #F4FAFE;
  --m-shade: #A9D2EC;
  --m-shadow-rgb: 0, 86, 127;
  --m-orange: #E58B12;
  --m-orange-d: #9A5700;
}

#gabb-honban-moshi,
#gabb-practice { scroll-margin-top: 88px; }

.gabb-ad-anchor {
  display: block;
  width: 0;
  height: 0;
}

/* 検査名を端末モックの下へ潜らせない。 */
.gabb-moshi .moshi-gate-kicker {
  max-width: 100%;
  white-space: normal;
}

@container (max-width: 345px) {
  .gabb-moshi .moshi-gate-kicker { font-size: 10px; }
  .gabb-moshi .moshi-intro-title { font-size: 17px; }
}

/* 計数の図表（gabmoshi_render_chart のSVG/表）は横に長い。狭い画面では図だけ横スクロールで逃がす。 */
.gabb-moshi .moshi-q-figure { overflow-x: auto; }
.gabb-moshi .moshi-q-figure .gab-nchart { min-width: 0; }
.gabb-moshi .moshi-q-figure svg { max-width: 100%; height: auto; }
.gabb-moshi .moshi-q-text th,
.gabb-moshi .moshi-rb-review-q th { white-space: nowrap; }

/* 言語は長文が問題文の頭に入る。本文と設問の切れ目が分かるよう、長文側を引用ブロックで見せる。 */
.gabb-moshi .moshi-q-text .gabb-passage,
.gabb-moshi .moshi-rb-review-q .gabb-passage {
  display: block;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--m-shade);
  background: var(--m-mist);
  font-size: .96em;
  line-height: 1.8;
  text-align: left;
}
.gabb-moshi .moshi-q-text .gabb-stmt,
.gabb-moshi .moshi-rb-review-q .gabb-stmt {
  display: block;
  font-weight: 700;
  text-align: left;
}

/* ===== 結果：企業別ボーダーに対する現在地（この模試だけの画面） ===== */
.gabb-moshi .moshi-rb-border {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}
.gabb-moshi .moshi-rb-border-row {
  padding: 10px 12px;
  border: 1px solid var(--m-shade);
  border-radius: 10px;
  background: #fff;
  opacity: .62;
}
/* 到達済みの段は色を入れて「越えた線」が一目で分かるようにする。 */
.gabb-moshi .moshi-rb-border-row.is-cleared {
  background: var(--m-deep-l);
  opacity: 1;
}
.gabb-moshi .moshi-rb-border-row.is-you {
  border: 2px solid var(--m-deep);
  box-shadow: 0 4px 10px rgba(var(--m-shadow-rgb), .16);
}
.gabb-moshi .moshi-rb-border-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.gabb-moshi .moshi-rb-border-pct {
  font-size: 17px;
  font-weight: 800;
  color: var(--m-deep-d);
  letter-spacing: .02em;
}
.gabb-moshi .moshi-rb-border-you {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--m-deep);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.gabb-moshi .moshi-rb-border-co {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--m-ink);
  text-align: left;
}
.gabb-moshi .moshi-rb-border-note {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--m-sub);
  text-align: left;
}

/* 「超えられるボーダー」が未達（5割未満）のときだけ、段ラベルより文字数が多いので1段小さくする。 */
.gabb-moshi .moshi-rb-hero-num.is-none { font-size: .62em; letter-spacing: .01em; }

/* intro画面を持たない（開いた瞬間に1問目）ので、検査の仕様はこの1行だけで示す。
   moshi-bar の上に置き、帯より弱く・本文より締めて出す。 */
.gabb-moshi .moshi-spec-line {
  margin: 16px 18px 0;
  padding: 9px 13px;
  border: 1px solid var(--m-shade);
  border-radius: 11px;
  background: var(--m-mist);
  color: var(--m-sub);
  font-size: 12px;
  line-height: 1.65;
  text-align: left;
}
.gabb-moshi .moshi-spec-line strong {
  color: var(--m-deep-d);
  font-weight: 700;
}
@media (max-width: 720px) {
  .gabb-moshi .moshi-spec-line {
    margin: 12px 12px 0;
    padding: 8px 11px;
    font-size: 11.5px;
    border-radius: 10px;
  }
}

/* ===== 手置き広告 [ad_gabb]（2026-09-01）＝ ad用の自己完結スコープ。mikiwame-moshi.css の .mikiwame-ad と同値 ===== */
.gabb-ad {
  container-type: inline-size;
  color: #333;
  font-family: inherit;
}
.gabb-ad .gabb-ad-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 12px auto;
  padding: 15px 20px;
  border-radius: 10px;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 4px 0 #c75b00, 0 8px 16px rgba(26, 80, 57, .2);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.gabb-ad .gabb-ad-btn:hover {
  color: #fff !important;
  opacity: .94;
  transform: translateY(-1px);
}
.gabb-ad .gabb-ad-btn:active {
  box-shadow: 0 1px 0 #c75b00;
  transform: translateY(3px);
}
.gabb-ad .gabb-ad-btn .fa { margin-right: 6px; }
.gabb-ad .gabb-ad-btn--main { background: #27a69a; box-shadow: 0 4px 0 #1c8a80, 0 8px 16px rgba(26, 80, 57, .14); } /* 模試=house標準の緑CTA(ミニ=橙/模試=緑) */
.gabb-ad .gabb-ad-btn--main:active { box-shadow: 0 1px 0 #1c8a80; }
.gabb-ad .gabb-ad-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  opacity: .95;
}
/* ===== 手置き広告 [ad_gabb]（2026-09-01）＝ box32 内のベネフィット/実績/注記。e3-moshi.css の e3-ad 同名クラスと同値 ===== */
.gabb-ad .gabb-ad-benefits {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  text-align: left;
}
.gabb-ad .gabb-ad-benefits li {
  position: relative;
  margin: 0;
  padding: 5px 0 5px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #252525;
}
.gabb-ad .gabb-ad-benefits li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.78em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #252525;
}
.gabb-ad .gabb-ad-proof {
  margin: 4px 0 2px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #808080;
}
.gabb-ad .gabb-ad-proof + .gabb-ad-btn { margin-top: 2px; }
.gabb-ad .gabb-ad-note {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: #ff0000;
}