/* HCi-AS本番模試：共通土台 moshi-base.css のテーマ上書き＋HCi-AS固有画面。
   テーマ色は記事アイキャッチ（hci-as_towa.png）のドミナントカラー #2A3CAA（占有率47.9%）を実測して採用。
   白文字コントラスト＝9.0:1（AAA）。 */
.hci-moshi {
  --m-deep: #2A3CAA;
  --m-deep-d: #1E2C82;
  --m-deep-l: #E8EAF8;
  --m-blue: #4457C9;
  --m-blue-d: #2E3E96;
  --m-mist: #F4F5FC;
  --m-shade: #B9C0E6;
  --m-shadow-rgb: 30, 44, 130;
}

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

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

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

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

/* ===== 一対比較法：A/Bの2文を並べて提示する（HCi-AS固有の出題形式） ===== */
.hci-moshi .moshi-ab-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--m-line);
  border-radius: 10px;
  background: #fff;
}
.hci-moshi .moshi-ab-row + .moshi-ab-row { margin-top: 8px; }

.hci-moshi .moshi-ab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--m-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.hci-moshi .moshi-ab-mark.is-b { background: var(--m-blue); }

.hci-moshi .moshi-ab-text {
  font-size: 15px;
  line-height: 1.65;
  padding-top: 3px;
}

@container (max-width: 345px) {
  .hci-moshi .moshi-ab-row { padding: 10px; gap: 8px; }
  .hci-moshi .moshi-ab-text { font-size: 14px; }
}

/* ===== 結果：尺度バーの下に添える「どう見えるか」の1行 ===== */
.hci-moshi .moshi-rb-axis-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--m-sub);
}

/* ===== 結果：面接で深掘りされやすいポイント2つ ===== */
.hci-moshi .moshi-rb-probes {
  display: grid;
  gap: 10px;
  margin: 0 0 4px;
}
.hci-moshi .moshi-rb-probe {
  border: 1px solid var(--m-shade);
  border-radius: 12px;
  background: var(--m-mist);
  padding: 12px 14px;
}
.hci-moshi .moshi-rb-probe-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.hci-moshi .moshi-rb-probe-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--m-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.hci-moshi .moshi-rb-probe-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-deep-d);
}
.hci-moshi .moshi-rb-probe-tag {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--m-deep-d);
  background: var(--m-deep-l);
  border-radius: 999px;
  padding: 3px 10px;
}
.hci-moshi .moshi-rb-probe-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--m-ink);
}

/* ヒーロー右側は数値でなく尺度名を出すので、数値用の大きさを落として折り返す。 */
.hci-moshi .moshi-rb-hero-num--text {
  font-size: 16px;
  line-height: 1.4;
  white-space: normal;
  word-break: normal;
}

/* 家族共通の .moshi-q-hint は inline-flex なので、注記が折り返すと <strong> が別のフレックス
   アイテムになり「1」と「つ」が分断される（reference_moshi_family_q_hint_inline_flex_breaks_on_wrap）。
   HCi-ASは「正解はありません」まで書くぶん注記が長く必ず折り返すので、この模試だけ
   通常のインラインボックスへ戻して素直に折り返させる。 */
.hci-moshi .moshi-q-hint {
  display: inline-block;
  line-height: 1.7;
}

/* ===== HCi-AS記事内広告 [hci_konowaka]（988方式の konowaka 差し替え先） =====
   骨格は家族共通（cbts/tracs 等と同じ）。ボタン色は house 標準＝ミニ橙／模試緑で、
   テーマ色（インディゴ）ではない＝家族横断で「緑＝本番模試」を守るため。 */
.hci-ad {
  container-type: inline-size;
  color: #333;
  font-family: inherit;
}
.hci-ad .hci-ad-phones-link { display: block; }
.hci-ad .hci-ad-konowaka-phones {
  display: block;
  width: min(100%, 480px);
  height: auto;
  margin: 2px auto 12px;
  filter: drop-shadow(0 8px 10px rgba(30, 44, 130, .2));
}
.hci-ad .hci-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(30, 44, 130, .12);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.hci-ad .hci-ad-btn:hover {
  color: #fff !important;
  opacity: .94;
  transform: translateY(-1px);
}
.hci-ad .hci-ad-btn:active {
  box-shadow: 0 1px 0 #c75b00;
  transform: translateY(3px);
}
.hci-ad .hci-ad-btn .fa { margin-right: 6px; }
.hci-ad .hci-ad-btn--light { background: #ff9902; }
/* 本番模試＝house標準の緑CTA（ミニ＝橙／模試＝緑）。テーマ色ではなく家族共通の緑で揃える。 */
.hci-ad .hci-ad-btn--main { background: #27a69a; box-shadow: 0 4px 0 #1c8a80, 0 8px 16px rgba(30, 44, 130, .14); }
.hci-ad .hci-ad-btn--main:active { box-shadow: 0 1px 0 #1c8a80; }
.hci-ad .hci-ad-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  opacity: .95;
}