@charset "Shift_JIS";
/* ---------------------------------------------------------------------
 * 明朝は Zen Old Mincho（Google Fonts / SIL OFL）。
 * -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Old+Mincho:wght@400;700;900&display=swap');

/* =====================================================================
   VAIO エキスパート試験
   -------------------------------------------------------------------- */

/* ---------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------- */
.vq {
  /* 色（XDデザインから抽出） */
  --vq-navy:        #0a113f;
  --vq-navy-deep:   #060b2a;
  --vq-navy-line:   #3a4270;
  --vq-gold:        #b79862;
  --vq-gold-light:  #dcc291;
  --vq-cream:       #fffdf1;
  --vq-magenta:     #c60556;
  --vq-magenta-dk:  #a30447;
  --vq-indigo:      #2807ae;
  --vq-indigo-dk:   #1e0585;
  --vq-chip:        #dfdfeb;
  --vq-chip-text:   #505694;
  --vq-blue:        #0a1cac;
  --vq-red:         #e60012;
  --vq-line:        #e3e3ea;
  --vq-bg-soft:     #f4f4f8;
  --vq-beige:       #f3eee4;
  --vq-text:        #1a1a1a;
  --vq-text-mute:   #666;

  /* 書体 */
  --vq-serif: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", serif;
  --vq-sans:  "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans",
              "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* 余白・角丸 */
  --vq-radius: 8px;
  --vq-radius-lg: 12px;

  font-family: var(--vq-sans);
  color: var(--vq-text);
  background: var(--vq-navy);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.vq *,
.vq *::before,
.vq *::after { box-sizing: border-box; }

.vq :where(p, h1, h2, h3, ul, li, figure) {
  margin: 0;
  padding: 0;
}
.vq ul { list-style: none; }
.vq img { max-width: 100%; height: auto; vertical-align: bottom; }

.vq-container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 20px;
}

.vq-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 画面切り替え */
.vq-screen { display: none; }
.vq-screen.is-active { display: block; }

.vq [hidden] { display: none !important; }

/* フォーカスリング（キーボード操作時のみ） */
.vq :focus-visible {
  outline: 3px solid var(--vq-gold-light);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------
   2. ボタン共通
   -------------------------------------------------------------------- */
.vq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, opacity .2s, transform .1s;
  text-decoration: none;
}
.vq-btn:hover { opacity: .88; }
.vq-btn:active { transform: translateY(1px); }
.vq-btn[disabled] {
  cursor: default;
  opacity: .35;
  transform: none;
}

/* スタート／結果を見る（マゼンタ・角丸4px） */
.vq-btn--cta {
  display: flex;
  width: 100%;
  max-width: 790px;
  margin-inline: auto;
  padding: 22px 24px;
  border-radius: 4px;
  background: var(--vq-magenta);
  font-size: 24px;
  letter-spacing: .08em;
}
.vq-btn--cta:hover { background: var(--vq-magenta-dk); opacity: 1; }

/* 次へ（インディゴ・ピル） */
.vq-btn--next {
  min-width: 340px;
  padding: 16px 32px;
  background: var(--vq-indigo);
  font-size: 18px;
  letter-spacing: .08em;
}
.vq-btn--next:not([disabled]):hover { background: var(--vq-indigo-dk); opacity: 1; }

.vq-linkbtn {
  border: 0;
  background: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--vq-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.vq-linkbtn:hover { color: var(--vq-indigo); }

/* ---------------------------------------------------------------
   3. スタート画面
   -------------------------------------------------------------------- */
.vq-hero {
  position: relative;
  background:
    radial-gradient(115% 90% at 72% 45%, #35384a 0%, #1c1e2b 42%, #0e0f18 100%);
  overflow: hidden;
}
.vq-hero__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: 96px 20px 104px;
  text-align: center;
}
.vq-hero__lead {
  display: inline-block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--vq-gold);
  font-family: var(--vq-serif);
  font-size: 22px;
  letter-spacing: .12em;
  color: var(--vq-gold-light);
}
.vq-hero__title { font-weight: 400; }   /* 上余白はファイル末尾で指定 */
.vq-hero__title-main {
  display: block;
  margin-top: 18px;
  font-family: var(--vq-serif);
  font-size: 56px;
  line-height: 1.35;
  letter-spacing: .18em;
  color: #fff;
}
.vq-br-sp { display: none; }

.vq-start-body {
  padding: 64px 0 88px;
  background: var(--vq-navy);
}
.vq-features {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 56px;
  color: #fff;
}
.vq-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  line-height: 1.55;
}
.vq-feature__icon {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 74px;
  height: 74px;
  background: linear-gradient(150deg, #e3cda3 0%, #b79862 55%, #9c7d49 100%);
  color: var(--vq-navy-deep);
  font-weight: 700;
  text-align: center;
}
/* 全10問：吹き出し風の八角形 */
.vq-feature__icon--count {
  clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 68%, 78% 88%, 56% 88%, 46% 100%, 40% 88%, 22% 88%, 0 68%, 0 22%);
}
/* 制限時間：円形 */
.vq-feature__icon--time { border-radius: 50%; }
/* 合格点：盾形 */
.vq-feature__icon--score {
  clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%);
  line-height: 1.1;
}
.vq-feature__icon-text { font-size: 20px; letter-spacing: .02em; }
.vq-feature__icon-label { display: block; font-size: 10px; letter-spacing: .08em; }

/* ---------------------------------------------------------------
   4. 設問画面 ─ カード枠
   -------------------------------------------------------------------- */
.vq-screen--quiz { padding: 60px 0 120px; }

.vq-card {
  border-radius: var(--vq-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.vq-card__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px 28px 18px;
  background: var(--vq-navy);
}

/* タイマー */
.vq-timer {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--vq-gold);
  border-radius: var(--vq-radius);
  color: var(--vq-gold-light);
  font-weight: 700;
}
.vq-timer__icon {
  align-self: center;
  width: 22px; height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.vq-timer__icon::before,
.vq-timer__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform-origin: 0 0;
}
.vq-timer__icon::before { width: 2px; height: 6px; transform: rotate(150deg); }
.vq-timer__icon::after  { width: 2px; height: 5px; transform: rotate(-15deg); }
.vq-timer__label { font-size: 17px; }
.vq-timer__value {
  font-size: 26px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* 残り30秒以下 */
.vq-timer.is-urgent {
  border-color: var(--vq-magenta);
  color: #ff8fb4;
}

/* 進捗 */
.vq-progress { min-width: 340px; text-align: center; }
.vq-progress__text {
  font-family: var(--vq-serif);
  font-size: 24px;
  letter-spacing: .04em;
  color: #fff;
}
.vq-progress__current { font-size: 40px; line-height: 1; }
.vq-progress__total { font-size: 20px; }
.vq-progress__bar {
  margin-top: 10px;
  height: 4px;
  background: var(--vq-navy-line);
  border-radius: 2px;
  overflow: hidden;
}
.vq-progress__fill {
  display: block;
  height: 100%;
  width: 10%;
  background: var(--vq-gold-light);
  transition: width .35s ease;
}

.vq-card__brand { justify-self: end; text-align: center; }
.vq-card__brand-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--vq-serif);
  font-size: 17px;
  letter-spacing: .1em;
  color: #fff;
}

/* カード本文 */
.vq-card__body { padding: 40px 56px 48px; }

/* ---------------------------------------------------------------
   5. 設問本体
   -------------------------------------------------------------------- */
.vq-question {
  font-size: 19px;
  line-height: 1.75;
}
/* 設問画像がある場合は横並び */
.vq-question--with-image {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}
.vq-question__figure {
  display: grid;
  place-content: center;
  padding: 16px;
  background: var(--vq-bg-soft);
  border-radius: 4px;
}
.vq-question__text { text-align: center; }
.vq-question--with-image .vq-question__text { text-align: left; }

/* 選択肢 */
.vq-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.vq-choice {
  position: relative;
  display: block;

  border: 2px solid var(--vq-line);
  border-radius: var(--vq-radius);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.vq-choice:hover { border-color: var(--vq-gold); }
.vq-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.vq-choice__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding-right: 16px;
}
.vq-choice__mark {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  align-self: stretch;
  width: 52px;
  /* 右端を斜めに切り落としたチップ */
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  background: var(--vq-chip);
  color: var(--vq-chip-text);
  font-size: 20px;
  font-weight: 700;
  border-radius: var(--vq-radius) 0 0 var(--vq-radius);
  transition: background-color .15s, color .15s;
}
.vq-choice__label {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 1.5;
}
.vq-choice__radio {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid #c9c9d4;
  border-radius: 50%;
  background: #fff;
  transition: background-color .15s, border-color .15s;
}
.vq-choice__figure {
  display: grid;
  place-content: center;
  padding: 14px 16px 20px;
}
.vq-choice__figure img { max-height: 170px; width: auto; object-fit: contain; }

/* 選択中 */
.vq-choice.is-selected {
  border-color: var(--vq-gold);
  background: var(--vq-cream);
  box-shadow: 0 0 0 1px rgba(183, 152, 98, .25);
}
.vq-choice.is-selected .vq-choice__mark { background: var(--vq-gold); color: #fff; }
.vq-choice.is-selected .vq-choice__radio {
  border-color: var(--vq-gold);
  background: var(--vq-gold)
    /* チェックマーク */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center / 18px 18px no-repeat;
}

/* ○×問題 */
.vq-choices--binary {
  grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
  gap: 24px;
  margin-top: 34px;
}
.vq-choices--binary .vq-choice__head {
  flex-direction: column;
  justify-content: center;
  min-height: 128px;
  padding: 22px 16px;
}
.vq-choices--binary .vq-choice__mark { display: none; }
.vq-choices--binary .vq-choice__radio { position: absolute; top: 14px; right: 14px; }
.vq-choices--binary .vq-choice__label {
  flex: none;
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
}
.vq-choice[data-binary="maru"] .vq-choice__label { color: var(--vq-red); }
.vq-choice[data-binary="batsu"] .vq-choice__label { color: var(--vq-blue); }

/* 自由入力 */
.vq-input-wrap { margin-top: 34px; }
.vq-input {
  display: block;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: 26px 24px;
  border: 1px solid var(--vq-line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 19px;
  color: var(--vq-text);
  text-align: center;
}
.vq-input::placeholder { color: #c4c4cf; }
.vq-input:focus { border-color: var(--vq-gold); outline: none; }

/* 次へボタン行 */
.vq-nav { margin-top: 40px; text-align: center; }
.vq-nav__hint {
  margin-top: 12px;
  font-size: 14px;
  color: var(--vq-text-mute);
}

/* 回答完了 / タイムアップ */
.vq-done { padding: 60px 20px 40px; text-align: center; }
.vq-done__title {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: .06em;
}
.vq-done--complete .vq-done__title { color: var(--vq-red); }
.vq-done--timeup  .vq-done__title { color: var(--vq-blue); }
.vq-done__lead { margin-top: 18px; font-size: 18px; }
.vq-done .vq-btn--cta { max-width: 420px; margin-top: 34px; }

/* ---------------------------------------------------------------
   6. 結果画面
   -------------------------------------------------------------------- */
.vq-screen--result { padding: 60px 0 120px; }

.vq-result {
  border-radius: var(--vq-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.vq-result__head {
  padding: 26px 20px;
  background: var(--vq-navy);
  text-align: center;
}
.vq-result__head-sub {
  display: block;
  margin-top: 8px;
  font-family: var(--vq-serif);
  font-size: 22px;
  letter-spacing: .12em;
  color: #fff;
}
.vq-result__body { padding: 54px 56px 64px; text-align: center; }

.vq-result__verdict {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
}
.vq-result__verdict-word {
  font-family: var(--vq-serif);
  font-size: 76px;
  line-height: 1.1;
  letter-spacing: .1em;
  color: var(--vq-gold);
}
.vq-result.is-fail .vq-result__verdict-word { color: var(--vq-blue); }
.vq-result__score { font-size: 20px; font-weight: 700; }
.vq-result__score-num { font-size: 34px; }
.vq-result__score-total { font-size: 17px; font-weight: 400; color: var(--vq-text-mute); }

.vq-result__message { margin-top: 24px; }
.vq-result__message-main { font-size: 22px; font-weight: 700; }
.vq-result__message-sub { margin-top: 6px; font-size: 16px; }

/* 称号 */
.vq-title-box {
  max-width: 620px;
  margin: 34px auto 0;
  padding: 20px 26px 24px;
  border: 1px solid var(--vq-gold);
  border-radius: 4px;
  background: var(--vq-cream);
}
.vq-title-box__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vq-gold-light);
  font-size: 17px;
  font-weight: 700;
}
.vq-title-box__name { font-size: 22px; margin-left: .3em; }
.vq-title-box__comment { margin-top: 14px; font-size: 15px; line-height: 1.8; }

/* 合格証 */
.vq-cert { margin-top: 40px; }
.vq-cert__canvas {
  width: 100%;
  max-width: 380px;
  height: auto;
  border: 1px solid var(--vq-line);
}
.vq-cert__note { margin-top: 12px; font-size: 12px; color: var(--vq-text-mute); }

/* アクション */
.vq-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
.vq-btn--share,
.vq-btn--download {
  min-width: 240px;
  padding: 15px 28px;
  border-radius: 4px;
  background: var(--vq-indigo);
  font-size: 17px;
}
.vq-btn--retry-strong {
  min-width: 240px;
  padding: 15px 28px;
  border-radius: 4px;
  background: var(--vq-magenta);
  font-size: 17px;
}
.vq-retry-link { margin-top: 20px; }

/* 回答結果一覧 */
.vq-review__title {
  margin-top: 56px;
  padding: 16px 20px;
  background: var(--vq-navy);
  color: #fff;
  font-family: var(--vq-serif);
  font-size: 24px;
  letter-spacing: .12em;
  font-weight: 400;
}
.vq-review { margin-top: 24px; text-align: left; }

.vq-review-item {
  margin-top: 18px;
  border-radius: 4px;
  overflow: hidden;
}
.vq-review-item__head {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--vq-beige);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.vq-review-item.is-wrong .vq-review-item__head {
  background: #eaeaf0;
  cursor: default;
}
.vq-review-item__no {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 6px;
  width: 120px;
  padding: 16px 8px;
  background: rgba(255, 255, 255, .55);
  text-align: center;
}
.vq-review-item__no-label { font-size: 16px; font-weight: 700; }
.vq-review-item__no-label b { font-size: 22px; margin-left: .2em; }
.vq-review-item__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
}
.vq-review-item.is-correct .vq-review-item__icon { color: var(--vq-red); }
.vq-review-item.is-wrong   .vq-review-item__icon { color: var(--vq-blue); }
.vq-review-item__icon { font-size: 24px; line-height: 1; }

.vq-review-item__summary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 16px 0;
  font-size: 15px;
  line-height: 1.6;
}
.vq-review-item__thumb {
  flex: 0 0 auto;
  width: 76px;
  display: grid;
  place-content: center;
}
.vq-review-item__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 20px; height: 20px;
  margin-right: 18px;
  border-right: 2px solid var(--vq-gold);
  border-bottom: 2px solid var(--vq-gold);
  transform: rotate(-135deg);
  transition: transform .2s;
}
.vq-review-item__head[aria-expanded="false"] .vq-review-item__arrow { transform: rotate(45deg); }

.vq-review-item__detail {
  padding: 20px 24px 24px;
  background: #fff;
  border: 1px solid var(--vq-line);
  border-top: 0;
  font-size: 15px;
}
.vq-review-item__detail[hidden] { display: none; }
.vq-review-item__answer { font-weight: 700; }
.vq-review-item__answer b { margin-left: .4em; color: var(--vq-red); }
.vq-review-item.is-wrong .vq-review-item__answer b { color: var(--vq-blue); }
.vq-review-item__answer-img { margin-top: 10px; max-width: 120px; }
.vq-review-item__exp-title { margin-top: 16px; font-weight: 700; }
.vq-review-item__exp-body { margin-top: 6px; line-height: 1.85; }
.vq-review-item__link {
  color: var(--vq-indigo);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   7. レスポンシブ（SP：750pxデザイン準拠）
   -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-container { padding-inline: 14px; }

  /* スタート */
  .vq-hero__inner { padding: 54px 20px 60px; }
  .vq-hero__lead { font-size: 17px; }
  .vq-logo--lg { font-size: 38px; }
  .vq-hero__title-main { font-size: 38px; letter-spacing: .14em; }
  .vq-br-sp { display: inline; }
  .vq-start-body { padding: 36px 0 56px; }
  .vq-btn--cta { padding: 18px 20px; font-size: 20px; }
  .vq-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-top: 36px;
    padding-inline: 14px;
  }
  .vq-feature { font-size: 16px; }
  .vq-feature__icon { width: 62px; height: 62px; }
  .vq-feature__icon-text { font-size: 17px; }

  /* 設問カード */
  .vq-screen--quiz,
  .vq-screen--result { padding: 24px 0 60px; }
  .vq-card__head {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 14px 12px 12px;
  }
  .vq-timer {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
  }
  .vq-timer__icon { width: 18px; height: 18px; }
  .vq-timer__label { font-size: 13px; }
  .vq-timer__value { font-size: 20px; }
  .vq-progress { min-width: 0; }
  .vq-progress__text { font-size: 17px; }
  .vq-progress__current { font-size: 28px; }
  .vq-progress__total { font-size: 14px; }
  .vq-card__brand .vq-logo { font-size: 17px; }
  .vq-card__brand-sub { font-size: 13px; line-height: 1.4; }
  .vq-card__body { padding: 24px 16px 30px; }

  /* 設問 */
  .vq-question { font-size: 17px; }
  .vq-question--with-image {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vq-question__text { text-align: left; }
  .vq-question__figure { padding: 12px; }

  /* 選択肢は1カラム */
  .vq-choices { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .vq-choice__label { font-size: 16px; }
  .vq-choice__figure img { max-height: 150px; }
  .vq-choices--binary {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .vq-choices--binary .vq-choice__head { min-height: 104px; }
  .vq-choices--binary .vq-choice__label { font-size: 46px; }

  .vq-input { padding: 20px 16px; font-size: 17px; }
  .vq-btn--next { min-width: 0; width: 100%; max-width: 380px; }

  /* 完了 */
  .vq-done { padding: 40px 8px 20px; }
  .vq-done__title { font-size: 32px; }
  .vq-done__lead { font-size: 16px; }

  /* 結果 */
  .vq-result__body { padding: 32px 16px 44px; }
  .vq-result__head-sub { font-size: 18px; }
  .vq-result__verdict { flex-direction: column; gap: 4px; }
  .vq-result__verdict-word { font-size: 56px; }
  .vq-title-box { padding: 16px 18px 20px; }
  .vq-title-box__head { font-size: 15px; }
  .vq-title-box__name { display: block; margin: 6px 0 0; font-size: 20px; }
  .vq-actions { flex-direction: column; align-items: stretch; }
  .vq-btn--share,
  .vq-btn--download,
  .vq-btn--retry-strong { min-width: 0; width: 100%; }
  .vq-review__title { font-size: 20px; }
  .vq-review-item__head { flex-wrap: wrap; gap: 0; }
  .vq-review-item__no {
    width: 96px;
    padding: 12px 6px;
  }
  .vq-review-item__summary {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 12px 12px 12px;
    font-size: 14px;
  }
  .vq-review-item__thumb { width: 56px; }
  .vq-review-item__arrow { margin-right: 12px; }
  .vq-review-item__detail { padding: 16px 14px 18px; }
}

/* ---------------------------------------------------------------
   8. モーション設定を尊重
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vq *,
  .vq *::before,
  .vq *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   9. 埋め込み時のフルブリード
   -------------------------------------------------------------------- */
.vq {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wrapper_ { overflow-x: hidden; }

/* 本番ページ側の要素を非表示にする */
.questionnaire_ .common_headline1_,
.questionnaire_ .customer_status_,
.questionnaire_ form,
.questionnaire_ .submit_ { display: none; }

.questionnaire_.col1_ { padding-top: 0; }
.questionnaire_ .top_comment_ { margin-bottom: 0; }

/* =====================================================================
 * 完了ページ向けの打ち消し
 * -------------------------------------------------------------------- */

/* 合格証 */
img.vq-cert__canvas {
  width: 100%;
  max-width: 419px !important;
  height: auto;
}
@media (max-width: 768px) {
  img.vq-cert__canvas { max-width: 304px !important; }
}

a.vq-btn,
a.vq-btn:link,
a.vq-btn:visited,
a.vq-btn:hover,
a.vq-btn:active,
a.vq-btn:focus {
  color: #fff;
  text-decoration: none;
}

/* =====================================================================
 * 演出（アニメーション）
 * -------------------------------------------------------------------- */

.vq  { position: relative; }
.vq-card { position: relative; }

/* --- 1. 開始前カウントダウン ------------------------------------- */
.vq-countdown {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  perspective: 1100px;          /* 大きいほど動きが穏やか */
  perspective-origin: 50% 50%;
}
.vq-countdown__num {
  font-family: var(--vq-sans);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #111c3d;               /* 濃紺（単色） */
  font-size: clamp(96px, 14vw, 220px);
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* 奥から手前へ迫ってくる */
.vq-countdown__num.is-pop {
  animation: vqCdIn .72s cubic-bezier(.19, .72, .24, 1) both;
}
@keyframes vqCdIn {
  0%   { opacity: 0; transform: translateZ(430px); }
  38%  { opacity: 1; }
  100% { opacity: 1; transform: translateZ(0); }
}

/* --- 2. 時間切れ --------------------------------------------------- */
.vq-timeup {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
/* 黒の透かしレイヤー。 */
.vq-timeup__sheet {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 122%;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  transform: translateY(-50%) skewY(-3deg) translateZ(260px);
  backface-visibility: hidden;
  animation: vqSheetDrop .4s cubic-bezier(.5, 0, .85, .4) both;
}
@keyframes vqSheetDrop {
  0%   { opacity: 0; transform: translateY(-62%) skewY(-3deg) translateZ(260px); }
  35%  { opacity: 1; }
  80%  { opacity: 1; transform: translateY(-50%) skewY(-3deg) translateZ(0); }
  89%  {             transform: translateY(-51%) skewY(-3deg) translateZ(14px); }
  100% { opacity: 1; transform: translateY(-50%) skewY(-3deg) translateZ(0); }
}
.vq-timeup__title {
  position: relative;
  font-family: var(--vq-sans);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  font-size: clamp(34px, 5.2vw, 76px);
  letter-spacing: .04em;
  text-indent: .04em;
  opacity: 0;
  transform: skewY(-3deg) scale(1.45);
  backface-visibility: hidden;
  animation: vqTitleDrop .34s cubic-bezier(.5, 0, .85, .4) .26s both;
}
@keyframes vqTitleDrop {
  0%   { opacity: 0; transform: skewY(-3deg) scale(1.45); }
  32%  { opacity: 1; }
  80%  { opacity: 1; transform: skewY(-3deg) scale(1); }
  89%  {             transform: skewY(-3deg) scale(1.02); }
  100% { opacity: 1; transform: skewY(-3deg) scale(1); }
}
/* 着地の衝撃でカードがわずかに沈む */
.vq-card.is-jolt { animation: vqJolt .16s ease-out both; }
@keyframes vqJolt {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* =====================================================================
 * 結果画面の演出（完了ページ）
 * -------------------------------------------------------------------- */

.vq-fall {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

/* --- 合格：桜 ------------------------------------------------------ */
/* 落下＋横流れ（左上から右下へ流される） */
.vq-petal {
  position: absolute;
  top: var(--top);
  width: var(--size);
  animation: vqBlowAcross linear infinite;
  will-change: transform;
}
@keyframes vqBlowAcross {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(var(--drift), var(--dist)); }
}
/* 突風でふわっと戻される揺れ */
.vq-petal__sway {
  display: block;
  animation: vqGust ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vqGust {
  0%   { transform: translateX(calc(var(--sway) * -1)); }
  100% { transform: translateX(var(--sway)); }
}

.vq-petal__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: var(--img) center/contain no-repeat;
  animation: vqSpin linear infinite;
  will-change: transform;
}
@keyframes vqSpin {
  0%   { transform: rotate(-18deg)  rotateY(0deg); }
  50%  { transform: rotate(162deg)  rotateY(180deg); }
  100% { transform: rotate(342deg)  rotateY(360deg); }
}

/* --- 不合格：木枯らし ---------------------------------------------- */
/* 冷たい空気の色かぶり */
.vq-chill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(90, 105, 130, .14), rgba(70, 82, 105, .22));
  opacity: 0;
  animation: vqChillIn 5s ease-out 1 both;
}
@keyframes vqChillIn {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* �@ 左から右へ流れる落ち葉 */
.vq-amb {
  position: absolute;
  left: var(--start-x);
  top: var(--top);
  width: var(--size);
  animation: vqAmble 1 both;
  will-change: transform;
}
@keyframes vqAmble {
  0%   { transform: translate(0, 0);
         animation-timing-function: cubic-bezier(.4, 0, .75, .55); }  /* 右にいくほど速く＝手前に来る */
  100% { transform: translate(var(--dx), var(--dy)); }
}

.vq-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 77px;
  transform-origin: 0 0;
  transform: translateY(var(--field-y)) scale(var(--k));
}
.vq-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  offset-path: path(var(--path));
  offset-rotate: auto;
  offset-distance: 0%;
  animation: vqFly 1 both;
  will-change: offset-distance;
}

@keyframes vqFly {
  0%   { offset-distance: 0%;
         animation-timing-function: cubic-bezier(.2, .42, .6, .73); }
  24%  { offset-distance: 27.5%;
         animation-timing-function: linear; }
  76%  { offset-distance: 67.4%;
         animation-timing-function: cubic-bezier(.5, .23, .75, .55); }
  100% { offset-distance: 100%; }
}

@supports not (offset-path: path("M 0 0")) {
  .vq-field { display: none; }
}

.vq-grow {
  display: block;
  animation: vqGrow 1 both;
  will-change: transform, opacity;
}
@keyframes vqGrow {
  0%   { opacity: 0; transform: scale(.6);
         animation-timing-function: cubic-bezier(.45, 0, .8, .5); }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(var(--smax)); }
}

.vq-off {
  position: absolute;
  left: 0;
  top: 0;
  animation: vqGrowOff 1 both;
  will-change: transform, opacity;
}
@keyframes vqGrowOff {
  0%   { opacity: 0;
         transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) scale(.6);
         animation-timing-function: cubic-bezier(.45, 0, .8, .5); }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) scale(var(--smax)); }
}

/* �C 葉そのもの */
.vq-blade {
  display: block;
  width: var(--w, 100%);
  aspect-ratio: 1;
  background: var(--img) center/contain no-repeat;
  animation: vqFlutter ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vqFlutter {
  0%   { transform: rotate(calc(var(--rot) - 22deg)) scaleY(var(--sy)); }
  100% { transform: rotate(calc(var(--rot) + 22deg)) scaleY(1); }
}

/* =====================================================================
 * ボタン・ロゴのサイズをデザインデータに合わせる
 * -------------------------------------------------------------------- */

/* --- スタート「試験を開始する」 PC 1004×82 ------------------------- */
.vq-btn--cta {
  max-width: 1004px;
  min-height: 82px;
  padding: 10px 24px;
  font-size: 28px;
}

/* --- 回答完了「結果を見る」 PC 424×82（スタートより狭い） ---------- */
.vq-done .vq-btn--cta {
  max-width: 424px;
}

/* --- 設問「次へ →」 PC 423×54 -------------------------------------- */
.vq-btn--next {
  min-width: 423px;
  min-height: 54px;
  padding: 8px 32px;
  font-size: 18px;
}

/* --- 結果画面のアクション PC 304×62 / 間隔46px --------------------- */
.vq-actions { gap: 46px; }
.vq-btn--share,
.vq-btn--download,
.vq-btn--retry-strong {
  min-width: 304px;
  min-height: 62px;
  padding: 8px 28px;
  font-size: 21px;
}
.vq-retry-link { margin-top: 37px; }

/* --- ロゴ ----------------------------------------------------------- */
.vq-logo {
  display: inline-block;
  height: 30px;
  width: 130px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25.43 25.39 222.15 51.27'%3E%3Cpath fill='%23fff' d='M 113.851562 66.121094 C 117.550781 66.121094 120.539062 63.125 120.539062 59.429688 C 120.539062 55.738281 117.550781 52.734375 113.851562 52.734375 C 110.148438 52.734375 107.152344 55.738281 107.152344 59.429688 C 107.152344 63.125 110.148438 66.121094 113.851562 66.121094 '/%3E%3Cpath fill='%23fff' d='M 157.328125 74.898438 C 150.511719 74.898438 144.296875 72.160156 139.359375 64.753906 C 134.414062 57.347656 128.324219 47.570312 124.976562 42.597656 C 121.726562 37.761719 118.6875 35.269531 113.449219 35.269531 C 108.222656 35.269531 105.167969 37.761719 101.925781 42.597656 C 98.566406 47.570312 92.480469 57.347656 87.550781 64.753906 C 82.605469 72.160156 76.40625 74.898438 69.566406 74.898438 C 62.734375 74.898438 56.527344 72.160156 51.582031 64.753906 C 46.644531 57.347656 40.84375 48.597656 37.515625 43.636719 C 34.246094 38.804688 31.199219 36.214844 25.960938 36.214844 L 25.960938 27.976562 C 33.519531 27.976562 39.945312 31.59375 45.226562 39.597656 C 50.527344 47.601562 54.464844 53.425781 57.96875 58.808594 C 61.445312 64.175781 64.773438 66.734375 69.566406 66.734375 C 74.347656 66.734375 77.6875 64.175781 81.179688 58.808594 C 84.664062 53.425781 88.914062 46.566406 94.195312 38.566406 C 99.464844 30.5625 105.890625 26.945312 113.449219 26.945312 C 121 26.945312 127.425781 30.5625 132.707031 38.566406 C 138.007812 46.566406 142.246094 53.425781 145.738281 58.808594 C 149.214844 64.175781 152.535156 66.8125 157.328125 66.8125 Z M 157.328125 74.898438 '/%3E%3Cpath fill='%23fff' d='M 176.847656 25.386719 C 172.78125 29.453125 170.3125 32.992188 170.3125 43.292969 L 170.3125 75.046875 L 179.222656 75.046875 L 179.222656 42.851562 C 179.222656 37.796875 179.585938 35.363281 182.15625 32.71875 Z M 176.847656 25.386719 '/%3E%3Cpath fill='%23fff' d='M 221.277344 67.800781 C 230.332031 67.800781 237.671875 60.242188 237.671875 50.921875 C 237.671875 41.59375 230.332031 34.035156 221.277344 34.035156 C 212.21875 34.035156 204.878906 41.59375 204.878906 50.921875 C 204.878906 60.242188 212.21875 67.800781 221.277344 67.800781 M 196.011719 50.921875 C 196.011719 36.960938 207.320312 25.648438 221.277344 25.648438 C 235.242188 25.648438 246.546875 36.960938 246.546875 50.921875 C 246.546875 64.871094 235.242188 76.191406 221.277344 76.191406 C 207.320312 76.191406 196.011719 64.871094 196.011719 50.921875 '/%3E%3C/svg%3E") no-repeat center / contain;
  font-size: 0;            /* 文字で代用していた頃の名残を消す */
}
.vq-logo--lg { height: 47px; width: 204px; }

@media (max-width: 768px) {
  /* スタート 693×83 → コンテナ幅いっぱい */
  .vq-btn--cta {
    max-width: 347px;
    min-height: 42px;
    padding: 8px 16px;
    font-size: 16px;
  }
  /* 結果を見る 561×83 */
  .vq-done .vq-btn--cta { max-width: 281px; }

  /* 次へ 561×83 */
  .vq-btn--next {
    min-width: 0;
    width: 100%;
    max-width: 281px;
    min-height: 42px;
    padding: 8px 20px;
    font-size: 16px;
  }

  .vq-actions {
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  .vq-btn--share,
  .vq-btn--download,
  .vq-btn--retry-strong {
    min-width: 0;
    width: 220px;
    min-height: 45px;
    padding: 6px 12px;
    font-size: 15px;
  }
  .vq-retry-link { margin-top: 20px; }

  .vq-logo { height: 12px; width: 52px; }
  .vq-logo--lg { height: 29px; width: 126px; }
}

/* =====================================================================
 * スタート画面をデザインデータに合わせる
 * -------------------------------------------------------------------- */

/* --- ヒーロー ------------------------------------------------------- */
.vq-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 89px;                 /* 920 → 1009 */
  max-width: 1100px;
  margin-inline: auto;
  min-height: 502px;
  padding: 40px 20px;
  text-align: center;
}
.vq-hero__text {
  flex: 0 0 auto;
  width: 380px;
}
.vq-hero__visual {
  flex: 0 0 auto;
  width: 366px;
}
.vq-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.vq-hero__lead {
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--vq-gold);
  font-size: 24px;
}
.vq-hero__title-main {
  margin-top: 28px;
  font-size: 52px;
  line-height: 1.33;         /* 2行で138px */
  letter-spacing: .1em;
}

/* --- スタート画面下部 ----------------------------------------------- */
.vq-start-body { padding: 50px 0 88px; }
.vq-features {
  gap: 76px;                 /* 01→02 が74、02→03 が79 */
  margin-top: 54px;
}
.vq-feature { gap: 14px; line-height: 1.68; }

/* --- フィーチャーのアイコン ----------------- */
.vq-feature__icon {
  background: none no-repeat center / contain;
  clip-path: none;
}
.vq-feature__icon--count {
  width: 94px;  height: 96px;
  padding-bottom: 11px;      /* 吹き出しの尖りぶん、文字を上に寄せる */
  background-image: url("/ec/img/vaio_expert/icon_count.png");
}
.vq-feature__icon--time {
  width: 87px;  height: 97px;
  border-radius: 0;
  background-image: url("/ec/img/vaio_expert/icon_time.png");
}
.vq-feature__icon--score {
  width: 109px; height: 84px;
  padding-bottom: 13px;
  background-image: url("/ec/img/vaio_expert/icon_score.png");
}
.vq-feature__icon-text  { font-size: 22px; }
.vq-feature__icon-label { font-size: 11px; }

@media (max-width: 768px) {
  /* ヒーロー： 縦積み。ノートPCはタイトルの下 */
  .vq-hero__inner {
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 30px 14px 48px;
  }
  .vq-hero__text { width: 100%; max-width: 226px; }
  .vq-hero__visual { width: 200px; }
  .vq-hero__lead { padding-bottom: 8px; font-size: 15px; }
  .vq-hero__title-main {
    margin-top: 18px;
    font-size: 31px;
    line-height: 1.4;
  }

  .vq-start-body { padding: 32px 0 56px; }
  .vq-features {
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 20px;
    margin-top: 36px;
    padding-inline: 0;
  }
  .vq-feature { gap: 15px; font-size: 14px; }
  .vq-feature__icon--count { width: 56px; height: 57px; padding-bottom: 7px; }
  .vq-feature__icon--time  { width: 56px; height: 62px; }
  .vq-feature__icon--score { width: 65px; height: 50px; padding-bottom: 8px; }
  .vq-feature__icon-text   { font-size: 15px; }
  .vq-feature__icon-label  { font-size: 9px; }
}

/* --- スタート画面の微調整 ------------------------------------------- */
.vq-hero__lead {
  white-space: nowrap;
  letter-spacing: .1em;
}

.vq-hero__title { margin-top: 33px; }

.vq-feature__icon--time { color: var(--vq-gold-light); }

@media (max-width: 768px) {
  .vq-hero__title  { margin-top: 58px; }
  .vq-hero__visual { margin-top: 82px; }
}

/* =====================================================================
 * 詳細度の調整
 * -------------------------------------------------------------------- */

.vq .vq-hero__lead   { padding-bottom: 12px; }   /* <p>  罫線までの間隔 */
.vq .vq-hero__title  { margin-top: 33px; }       /* <h1> ロゴの上 */
.vq .vq-features     { margin-top: 54px; }       /* <ul> ボタンからの距離 */

@media (max-width: 768px) {
  .vq .vq-hero__lead   { padding-bottom: 8px; }
  .vq .vq-hero__title  { margin-top: 58px; }
  .vq .vq-hero__visual { margin-top: 82px; }     /* <p>  ノートPCの上 */
  .vq .vq-features     { margin-top: 36px; }
}

/* =====================================================================
 * 設問画面・結果画面をデザインデータに合わせる（優先度A）
 * -------------------------------------------------------------------- */

/* --- A5 進捗バー  幅403 / 高さ6 -------------------------------------- */
.vq-progress { min-width: 403px; }
.vq-progress__bar {
  height: 6px;
  border-radius: 3px;
  margin-top: 8px;
}

/* --- A6 「難問」バッジ  78×44 --------------------------------------- */
.vq-badge {
  display: grid;
  place-content: center;
  width: 78px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: #c00;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1;
  color: #fff;
}

/* --- A3 選択肢の間隔と高さ ------------------------------------------ */
.vq-choices {
  column-gap: 28px;
  row-gap: 15px;
}
.vq-choices:has(.vq-choice__figure) {
  column-gap: 48px;
  row-gap: 28px;
}
.vq-choice__head { min-height: 68px; }

/* --- A4 ラジオ 26 → 38 ----------------------------------------------- */
.vq-choice__radio { width: 38px; height: 38px; }
.vq-choice.is-selected .vq-choice__radio { background-size: 26px 26px; }

.vq-choices--binary { gap: 47px; }
.vq-choices--binary .vq-choice__radio { top: 12px; right: 11px; }

/* --- A2 自由入力  812×152・左寄せ ------------------------------------ */
/* VAIOストア共通CSSに */
.vq input.vq-input {
  width: 100%;
  max-width: 812px;
  height: auto;
  margin: 0 auto;
  padding: 26px 24px;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
}

.vq input.vq-input:focus {
  border-color: var(--vq-gold);
  outline: none;
}

/* --- A7 タイムアップの文字  693×136（≒95px） ------------------------- */
.vq-timeup__title { font-size: clamp(34px, 8vw, 95px); }

@media (max-width: 768px) {
  .vq-progress { min-width: 0; }
  /* SP 77×46 → 38×23 */
  .vq-badge {
    width: 38px;
    height: 23px;
    margin-bottom: 10px;
    font-size: 13px;
    border-radius: 3px;
  }
  .vq-choices { column-gap: 12px; row-gap: 12px; }
  .vq-choices:has(.vq-choice__figure) { column-gap: 12px; row-gap: 14px; }
  .vq-choices--binary { gap: 14px; }
  .vq-choice__head { min-height: 58px; }
  .vq-choice__radio { width: 28px; height: 28px; }
  .vq-choice.is-selected .vq-choice__radio { background-size: 20px 20px; }
  .vq input.vq-input {
    padding: 20px 16px;
    font-size: 17px;
  }
}

/* --- タイマーの時計アイコン ------------------------------------------ */
.vq-timer__icon {
  width: 22px;
  height: 25px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96.3775' height='111.214' viewBox='0 0 96.3775 111.214'%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00175562 0.000973027 C -0.00175562 -25.20325 -20.43421 -45.635705 -45.638434 -45.635705 C -70.842657 -45.635705 -91.275111 -25.20325 -91.275111 0.000973027 C -91.275111 25.205196 -70.842657 45.637651 -45.638434 45.637651 C -20.43421 45.637651 -0.00175562 25.205196 -0.00175562 0.000973027 Z M -0.00175562 0.000973027 ' transform='matrix(0.992982, 0, 0, -0.992982, 93.197056, 62.582997)'/%3E%3C/g%3E%3Cpath fill='currentColor' d='M 52.902344 64.304688 C 52.902344 67.136719 50.808594 69.429688 48.230469 69.429688 C 45.648438 69.429688 43.554688 67.136719 43.554688 64.304688 C 43.554688 61.472656 45.648438 59.179688 48.230469 59.179688 C 50.808594 59.179688 52.902344 61.472656 52.902344 64.304688 '/%3E%3Cg%3E%3Cpath fill='none' stroke-width='4.252' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00157479 -0.000424126 L 14.427814 -12.018358 L 37.326797 9.03958 ' transform='matrix(0.992982, 0, 0, -0.992982, 33.903907, 52.370673)'/%3E%3C/g%3E%3Cpath fill='none' stroke-width='9.921' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000833557 0.00050601 L -0.000833557 -11.498159 ' transform='matrix(0.992982, 0, 0, -0.992982, 47.879734, 4.926284)'/%3E%3Cpath fill='none' stroke-width='9.921' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000468689 0.00050601 L 20.550002 0.00050601 ' transform='matrix(0.992982, 0, 0, -0.992982, 37.676247, 4.926284)'/%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00126588 0.00103367 L 6.07261 -8.378082 ' transform='matrix(0.992982, 0, 0, -0.992982, 14.833288, 17.395558)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000633017 0.0000702681 L 11.151852 8.088081 ' transform='matrix(0.992982, 0, 0, -0.992982, 9.610004, 21.84382)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000301237 0.00103367 L -6.074177 -8.378082 ' transform='matrix(0.992982, 0, 0, -0.992982, 80.92608, 17.395558)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000934096 0.0000702681 L -11.153419 8.088081 ' transform='matrix(0.992982, 0, 0, -0.992982, 86.149365, 21.84382)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96.3775' height='111.214' viewBox='0 0 96.3775 111.214'%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00175562 0.000973027 C -0.00175562 -25.20325 -20.43421 -45.635705 -45.638434 -45.635705 C -70.842657 -45.635705 -91.275111 -25.20325 -91.275111 0.000973027 C -91.275111 25.205196 -70.842657 45.637651 -45.638434 45.637651 C -20.43421 45.637651 -0.00175562 25.205196 -0.00175562 0.000973027 Z M -0.00175562 0.000973027 ' transform='matrix(0.992982, 0, 0, -0.992982, 93.197056, 62.582997)'/%3E%3C/g%3E%3Cpath fill='currentColor' d='M 52.902344 64.304688 C 52.902344 67.136719 50.808594 69.429688 48.230469 69.429688 C 45.648438 69.429688 43.554688 67.136719 43.554688 64.304688 C 43.554688 61.472656 45.648438 59.179688 48.230469 59.179688 C 50.808594 59.179688 52.902344 61.472656 52.902344 64.304688 '/%3E%3Cg%3E%3Cpath fill='none' stroke-width='4.252' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00157479 -0.000424126 L 14.427814 -12.018358 L 37.326797 9.03958 ' transform='matrix(0.992982, 0, 0, -0.992982, 33.903907, 52.370673)'/%3E%3C/g%3E%3Cpath fill='none' stroke-width='9.921' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000833557 0.00050601 L -0.000833557 -11.498159 ' transform='matrix(0.992982, 0, 0, -0.992982, 47.879734, 4.926284)'/%3E%3Cpath fill='none' stroke-width='9.921' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000468689 0.00050601 L 20.550002 0.00050601 ' transform='matrix(0.992982, 0, 0, -0.992982, 37.676247, 4.926284)'/%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.00126588 0.00103367 L 6.07261 -8.378082 ' transform='matrix(0.992982, 0, 0, -0.992982, 14.833288, 17.395558)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000633017 0.0000702681 L 11.151852 8.088081 ' transform='matrix(0.992982, 0, 0, -0.992982, 9.610004, 21.84382)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000301237 0.00103367 L -6.074177 -8.378082 ' transform='matrix(0.992982, 0, 0, -0.992982, 80.92608, 17.395558)'/%3E%3C/g%3E%3Cg%3E%3Cpath fill='none' stroke-width='5.102' stroke-linecap='butt' stroke-linejoin='miter' stroke='currentColor' stroke-opacity='1' stroke-miterlimit='10' d='M -0.000934096 0.0000702681 L -11.153419 8.088081 ' transform='matrix(0.992982, 0, 0, -0.992982, 86.149365, 21.84382)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.vq-timer__icon::before,
.vq-timer__icon::after { content: none; }

@media (max-width: 768px) {
  /* --- SPのタイマー  枠153×97 → 77×49 ---------------------------------- */
  .vq-timer {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
    row-gap: 0;
    min-width: 77px;
    min-height: 49px;
    padding: 5px 9px;
  }
  .vq-timer__icon {
    grid-row: 1 / 3;
    width: 19px;
    height: 21px;
  }
  .vq-timer__label { grid-column: 2; font-size: 12px; line-height: 1.2; }
  .vq-timer__value { grid-column: 2; font-size: 16px; line-height: 1.2; }
}

/* --- 共通CSSの要素セレクタを打ち消す（選択肢） ----------------------- */
.vq label.vq-choice {
  margin: 0;
  padding: 0;
  line-height: inherit;
}
.vq .vq-choice input.vq-choice__input {
  width: 1px;
  height: 1px;
  margin: 0;
  border: 0;
  background: none;
}

/* --- 選択肢の記号チップ（A/B/C/D） ----------------------------------- */
.vq-choice__head {
  /* position は付けない。 */
  padding-left: 67px;
  gap: 0;
}
.vq-choice__mark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62px;
  height: auto;
  padding-right: 8px;
  border-radius: 6px 0 0 6px;   /* 枠線2px分、外側の8pxより内側 */
  font-size: 22px;
}
.vq-choice__label { margin-right: 16px; }

.vq-choices--binary .vq-choice__head { padding-left: 16px; }

.vq-choices--image .vq-choice__mark {
  bottom: auto;
  height: 68px;
}

@media (max-width: 768px) {
  .vq-choice__head { padding-left: 56px; }
  .vq-choice__mark { width: 52px; padding-right: 6px; font-size: 18px; }
  .vq-choice__label { margin-right: 12px; }
  .vq-choices--binary .vq-choice__head { padding-left: 16px; }
  .vq-choices--image .vq-choice__mark { height: 58px; }
}

/* =====================================================================
 * 結果画面をデザインデータに合わせる
 * -------------------------------------------------------------------- */

/* --- ヘッダー 1104×163 ----------------------------------------------- */
.vq-result__head {
  display: grid;
  place-content: center;
  min-height: 163px;
  padding: 20px;
}
.vq-result__head-sub { margin-top: 10px; font-size: 26px; }

/* --- 合否と点数 ------------------------------------------------------ */
.vq-result__body { padding: 74px 60px 64px; }   /* ヘッダー→合否 74px */
.vq-result__verdict { gap: 37px; }
.vq-result__verdict-word {
  font-size: 130px;
  letter-spacing: .18em;
}
.vq-result.is-fail .vq-result__verdict-word {
  font-size: 100px;
  letter-spacing: .17em;
}
.vq-result__score-num   { font-size: 43px; }
.vq-result__score       { font-size: 24px; }
.vq-result__score-total { font-size: 20px; }

/* --- お祝いメッセージ 451×77（2行）／合否から57px ---------------------- */
.vq-result__message { margin-top: 57px; }
.vq-result__message-main { font-size: 24px; }
.vq-result__message-sub  { margin-top: 8px; font-size: 20px; }

/* --- 称号ボックス 612×179 -------------------------------------------- */
.vq-title-box {
  max-width: 612px;
  min-height: 179px;
  margin-top: 27px;              /* メッセージ→称号 */
  padding: 26px 30px 30px;
}
.vq-title-box__head { padding-bottom: 26px; font-size: 20px; }   /* 罫線まで */
.vq-title-box__comment { margin-top: 29px; font-size: 17px; }

/* --- 合格証 419×419／称号から47px、注記まで29px ------------------------ */
.vq-cert { margin-top: 47px; }
.vq-cert__note { margin-top: 29px; }

/* --- 回答結果 ------------------------------------------------------- */
.vq-review__title {
  margin-top: 76px;             /* ボタン群からの距離 */
  min-height: 82px;
  display: grid;
  place-content: center;
  padding: 16px 20px;
  font-size: 36px;
}
.vq-review { margin-top: 21px; }
.vq-review-item { margin-top: 24px; }
.vq-review-item__no { width: 143px; padding: 13px 8px; }
.vq-review-item__no-label { font-size: 20px; }
.vq-review-item__no-label b { font-size: 28px; }
.vq-review-item__result { gap: 8px; font-size: 20px; }
.vq-review-item__icon { font-size: 40px; }        /* ○×の丸 59×59 相当 */
.vq-review-item__summary { padding: 20px 16px 20px 0; font-size: 16px; }
.vq-review-item__detail { padding: 24px 28px 28px; font-size: 16px; }
.vq-review-item__answer { font-size: 17px; }

@media (max-width: 768px) {
  /* ヘッダー 694×149 → 347×75 */
  .vq-result__head { min-height: 75px; padding: 12px; }
  .vq-result__head-sub { margin-top: 5px; font-size: 17px; }

  .vq-result__body { padding: 34px 17px 40px; }
  .vq-result__verdict-word { font-size: 62px; letter-spacing: .12em; }
  .vq-result.is-fail .vq-result__verdict-word { font-size: 52px; }
  .vq-result__score-num   { font-size: 26px; }
  .vq-result__score       { font-size: 16px; }
  .vq-result__score-total { font-size: 13px; }

  /* 称号ボックス 610×263 → 305×131 */
  .vq-title-box {
    max-width: 305px;
    min-height: 131px;
    margin-top: 22px;
    padding: 16px 20px 20px;
  }
  .vq-title-box__head { padding-bottom: 20px; font-size: 16px; }
  .vq-title-box__comment { margin-top: 15px; font-size: 15px; }

  /* 回答結果 見出し 169×40 → 84×20 */
  .vq-review__title { margin-top: 48px; min-height: 50px; font-size: 20px; }
  .vq-review-item__no { width: 60px; }
  .vq-review-item__no-label { font-size: 15px; }
  .vq-review-item__no-label b { font-size: 20px; }
  .vq-review-item__result { font-size: 15px; }
  .vq-review-item__icon { font-size: 28px; }
  .vq-review-item__summary { font-size: 14px; }
  .vq-review-item__detail { font-size: 14px; }
}

/* =====================================================================
 * SPの微調整
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- カードヘッダー ------------------------------------------------- */
  .vq-card__head { gap: 8px; }
  .vq-progress__text {
    white-space: nowrap;
    font-size: 12px;
  }
  .vq-progress__current { font-size: 20px; }
  .vq-progress__total   { font-size: 11px; }
  .vq-card__brand-sub {
    max-width: 72px;          /* 8文字が入り切らず2行になる */
    margin-inline: auto;
    font-size: 11px;
    line-height: 1.3;
  }

  /* --- 結果画面の合否と点数 ------------------------------------------- */
  .vq-result__verdict { align-items: center; }
}

/* =====================================================================
 * 回答結果一覧の配色
 * -------------------------------------------------------------------- */
.vq-review-item {
  padding-bottom: 10px;         /* 解説エリアの下に残す色枠 */
  background: #e6e7eb;
}
.vq-review-item.is-correct { background: #f8f4ef; }

.vq-review-item__head { background: transparent; }
.vq-review-item.is-wrong .vq-review-item__head { background: transparent; }

/* 左カラム（問番号・記号・点数）190×― */
.vq-review-item__no {
  width: 190px;
  padding: 13px 8px;
  background: #dbdce2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
}
.vq-review-item.is-correct .vq-review-item__no { background: #f1eae0; }

/* 「問X」の下の区切り線（左カラムの幅いっぱい） */
.vq-review-item__no-label {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}

/* 点数の文字色は記号にそろえる */
.vq-review-item.is-correct .vq-review-item__result { color: var(--vq-magenta); }
.vq-review-item.is-wrong   .vq-review-item__result { color: var(--vq-blue); }

/* 解説エリアは白。左右に10pxの色枠を残す */
.vq-review-item__detail {
  margin: 0 10px;
  border: 0;
}

@media (max-width: 768px) {
  .vq-review-item__no { width: 60px; padding: 10px 6px; gap: 10px; }
  .vq-review-item__no-label { padding-bottom: 6px; }
  .vq-review-item { padding-bottom: 8px; }
  .vq-review-item__detail { margin: 0 8px; }
}

/* =====================================================================
 * SPの追加調整
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* --- 本番ページ側のNEWS一覧を隠す ----------------------------------- */
  #news_wrapper { display: none; }

  /* --- 回答結果の記号と点数を縦積みに ----------------------------------- */
  .vq-review-item__result {
    flex-direction: column;
    gap: 6px;
    line-height: 1.2;
  }
  .vq-review-item__icon { font-size: 30px; }
}

/* --- 回答結果：設問テキストの左余白 ---------------------------------- */
.vq-review-item__summary { padding-left: 19px; }

@media (max-width: 768px) {
  .vq-review-item__summary { padding-left: 12px; padding-right: 12px; }
}

/* =====================================================================
 * デザイン準拠のための調整（2026-08-27）
 * -------------------------------------------------------------------- */

/* --- 実装で足していた2点を取り下げる ------------------------------- */
.vq-timer.is-urgent {
  border-color: var(--vq-gold);
  color: var(--vq-gold-light);
}
.vq-nav__hint { display: none; }

/* --- カードの白枠 --------------------------------------------------- */
.vq-card,
.vq-result {
  border: 1px solid #fff;
}

/* --- SPのNEWS一覧 --------------------------------------------------- */

/* --- 重なり順の是正 -------------------------------------------------- */
.vq { position: static; }
.vq-screen--quiz { position: relative; }

/* --- サイト側の要素セレクタとの衝突を避ける -------------------------- */
.vq-card__head,
.vq-result__head {
  position: static;
  width: auto;
  top: auto;
  left: auto;
}

/* =====================================================================
 * 追加修正（2026-08-27／リーダー指示）
 * -------------------------------------------------------------------- */

/* --- �@ VAIOロゴをテキストに戻す -------------------------------------- */
.vq-logo {
  height: auto;
  width: auto;
  background: none;
  font-family: "DINNextLTPro", var(--vq-sans);
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .2em;
  text-indent: .2em;          /* 字間ぶん右に寄るのを打ち消して中央に見せる */
  color: #fff;
}
.vq-logo--lg { font-size: 46px; }

/* --- �A カードヘッダー ---------------------------------- */
.vq-card__head {
  min-height: 96px;
  padding: 0 20px;
  gap: 20px;
}
.vq-timer {
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 69px;
  gap: 9px;
  padding: 6px 14px;
}
.vq-timer__icon  { width: 34px; height: 40px; }
.vq-timer__label { font-size: 22px; }
.vq-timer__value { font-size: 30px; }

.vq-progress { min-width: 403px; }
.vq-progress__text    { font-size: 40px; }
.vq-progress__current { font-size: 60px; }
.vq-progress__total   { font-size: 24px; }
.vq-progress__bar     { height: 4px; margin-top: 8px; }

.vq-card__brand .vq-logo { font-size: 13px; }   /* 73×17 相当 */
.vq-card__brand-sub { margin-top: 4px; font-size: 23px; }

/* --- �B 難問バッジを小さく ------------------------------------------- */
.vq-badge {
  width: 58px;
  height: 32px;
  margin-bottom: 12px;
  font-size: 16px;
  border-radius: 3px;
}

/* --- �C 設問テキストは左揃え ------------------------------------------ */
.vq-question__text { text-align: left; }

/* --- �D�E�F 結果画面の文字 -------------------------------------------- */
.vq-result__score-total { color: var(--vq-text); }          /* /100点中 を黒に */
.vq-result__verdict-word,
.vq-result.is-fail .vq-result__verdict-word {
  font-size: 120px;
  font-weight: bold;
}
.vq-review__title { font-weight: bold; }

/* --- �G 「問」と「1」の位置ずれ --------------------------------------- */
.vq-review-item__no-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  line-height: 1;
}
.vq-review-item__no-label b { margin-left: 0; }

/* --- �H 回答結果の帯をコンパクトに ------------------------------------ */
.vq-review-item__no {
  padding: 10px 8px;
  gap: 8px;
}
.vq-review-item__no-label   { padding-bottom: 6px; }
.vq-review-item__summary    { padding-top: 12px; padding-bottom: 12px; }
.vq-review-item__icon       { font-size: 32px; }
.vq-review-item__result     { gap: 6px; }

@media (max-width: 768px) {
  .vq-logo { font-size: 12px; }
  .vq-logo--lg { font-size: 28px; }
  .vq-card__brand .vq-logo { font-size: 9px; }
  .vq-card__brand-sub { font-size: 11px; }

  .vq-card__head { min-height: 0; padding: 10px 12px; }
  .vq-timer {
    min-width: 77px;
    min-height: 49px;
    padding: 5px 9px;
    gap: 7px;
  }
  .vq-timer__icon  { width: 19px; height: 21px; }
  .vq-timer__label { font-size: 12px; }
  .vq-timer__value { font-size: 16px; }
  .vq-progress__text    { font-size: 12px; }
  .vq-progress__current { font-size: 20px; }
  .vq-progress__total   { font-size: 11px; }

  .vq-badge { width: 44px; height: 24px; margin-bottom: 8px; font-size: 12px; }

  .vq-result__verdict-word,
  .vq-result.is-fail .vq-result__verdict-word { font-size: 60px; }

  .vq-review-item__no { padding: 8px 6px; gap: 6px; }
  .vq-review-item__summary { padding-top: 10px; padding-bottom: 10px; }
  .vq-review-item__icon { font-size: 26px; }
}

/* --- ロゴ（テキスト）のサイズ調整 ------------------------------------- */
.vq-logo--lg             { font-size: 52px; }   /* TOP：見出しと同サイズ */
.vq-card__brand .vq-logo { font-size: 24px; }   /* 設問カード */
.vq-result__head .vq-logo{ font-size: 32px; }   /* 結果画面 */

/* 点数まわりの文字色を黒で統一 */
.vq-result__score,
.vq-result__score-num,
.vq-result__score-total { color: #000000; }

@media (max-width: 768px) {
  .vq-logo--lg { font-size: 31px; }             /* SPの見出しと同サイズ */
}

/* --- �@ 問題番号の位置 ------------------------------------------------ */
.vq-progress__current {
  position: relative;
  top: .07em;
}

/* --- �A 解説内の回答画像 ---------------------------------------------- */
img.vq-review-item__answer-img {
  max-width: 128px;
  height: auto;
}

/* --- �B フッター ------------------------------------------------------ */
/* フッターのタグはPC版とSP版で違う */
body.vq-in-quiz footer,
body.vq-in-quiz #footer { display: none; }

/* --- フッターを隠したあとの余白 -------------------------------------- */
html.vq-in-quiz,
html.vq-in-quiz body,
html.vq-in-quiz .wrapper_ {
  background: #0a113f !important;
}

/* --- 完了ページの「ホームへ戻る」ボタン ------------------------------ */
html.vq-in-quiz .questionnaire_ .submit_ { display: none; }

/* --- フィーチャーのアイコンを画像だけにする --------------------------- */
.vq-feature__icon-text,
.vq-feature__icon-label { display: none; }

/* --- 選択肢の記号チップ --------------- */
.vq-choice__head { padding-left: 65px; }

.vq-choice__mark {
  width: 55px;
  padding-right: 6px;
  font-size: 30px;
  font-weight: 700;

  clip-path: polygon(0 0, 100% 0, 73% 100%, 0 100%);
}

.vq-choices--image .vq-choice__mark { height: 63px; }

@media (max-width: 768px) {
  .vq-choice__head { padding-left: 54px; }
  .vq-choice__mark {
    width: 46px;
    padding-right: 5px;
    font-size: 22px;
  }
  .vq-choices--image .vq-choice__mark { height: 54px; }
  .vq-choices--binary .vq-choice__head { padding-left: 16px; }
}

.vq-choices--binary .vq-choice__head { padding-left: 16px; }

/* =====================================================================
 * 設問画像あり × 選択肢はテキストのみ ― PCのレイアウト
 * -------------------------------------------------------------------- */
@media (min-width: 769px) {

  /* --- グリッド本体 --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) {
    display: grid;
    grid-template-columns: 308px 1fr;
    column-gap: 32px;
    row-gap: 0;                         /* 行間は各要素の margin で作る */
    align-items: start;

    padding: 36px 30px 32px;
  }

  /* --- 難問バッジ：1行目を丸ごと使う --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) > .vq-badge {
    grid-column: 1 / -1;
  }

  /* --- .vq-question の内側グリッドを解く --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) > .vq-question--with-image {
    display: contents;
  }

  /* --- 画像枠：1列目・2行ぶんにまたがる --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) .vq-question__figure {
    grid-column: 1;
    grid-row: span 2;
    align-self: start;
    width: 308px;
    height: 230px;
    padding: 16px;
  }

  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) .vq-question__figure img {
    max-width: 276px;
    max-height: 198px;
    width: auto;
    height: auto;
  }

  /* --- 設問文：2列目の1行目 --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) .vq-question__text {
    grid-column: 2;
  }

  /* --- 選択肢：2列目の2行目。ここが今回の主目的 --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) > .vq-choices {
    grid-column: 2;
    margin-top: 36px;        /* 設問文の下端 → 選択肢の上端 */
    column-gap: 18px;        /* 全幅時の28から、デザインの19相当へ */
    row-gap: 16px;
  }
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) .vq-choice__head {
    min-height: 64px;        /* 全幅時の68 → デザインの66相当 */
  }

  /* --- 次へ：全幅の最終行・カード中央 --- */
  .vq-card__body:has(.vq-question--with-image):has(.vq-choices:not(.vq-choices--image):not(.vq-choices--binary)) > .vq-nav {
    grid-column: 1 / -1;
    margin-top: 30px;        /* .vq-nav の40を上書き */
  }
}

/* =====================================================================
 * 画像あり選択肢の帯 ― PC / SP 共通
 * -------------------------------------------------------------------- */

/* --- �@ 帯の上の隙間をなくす --- */
.vq-choices--image .vq-choice {
  display: flex;
  flex-direction: column;
}

/* --- �A 帯本体：高さを明示し、下に区切り線を引く --- */
.vq-choices--image .vq-choice__head {
  position: relative;      /* 記号チップの基準をこの帯にする */
  align-items: center;
  min-height: 63px;        /* デザインの帯 66 相当 */
  padding-block: 0;
  border-bottom: 1px solid var(--vq-line);
}

/* --- �B 記号チップを帯いっぱいに伸ばす --- */
.vq-choices--image .vq-choice__mark {
  top: 0;
  bottom: 0;
  height: auto;            /* 63px / 54px の固定高を解除 */
  border-radius: 6px 0 0 0;
}

@media (max-width: 768px) {
  .vq-choices--image .vq-choice__head { min-height: 54px; }
}

/* --- 選択中は区切り線もゴールドにする --------------------------------- */
.vq-choices--image .vq-choice.is-selected .vq-choice__head {
  border-bottom-color: var(--vq-gold);
}

/* --- 選択肢テキストを太字に ------------------------------------------- */
.vq-choice__label { font-weight: bold; }

/* --- 帯の上に隙間が出る件の保険 --------------------------------------- */
.vq .vq-choice input.vq-choice__input {
  position: absolute;
  top: 0;
  left: 0;
}
.vq-choices--image .vq-choice__head { margin: 0; }

/* =====================================================================
 * 結果画面「あなたの思考タイプ」ボックス ― デザインに合わせる
 * -------------------------------------------------------------------- */
.vq-title-box {
  max-width: 612px;
  min-height: 179px;
  margin-top: 27px;
  padding: 8px 22px 16px;

  border: 8px solid #ede5d8;
  border-radius: 0;
  background: #fff;
}
.vq-title-box__head {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--vq-navy);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vq-navy);
}
.vq-title-box__name {
  margin-left: .3em;
  font-size: 30px;
}
.vq-title-box__comment {
  margin-top: 19px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.8;
  color: var(--vq-text);
}

@media (max-width: 768px) {
  .vq-title-box {
    max-width: 305px;
    min-height: 131px;
    margin-top: 22px;
    padding: 8px 10px 12px;
    border-width: 4px;
  }
  .vq-title-box__head {
    padding-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
  }

  .vq-title-box__name {
    display: inline;
    margin-left: .3em;
    font-size: 18px;
  }
  .vq-title-box__comment {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
  }
}

/* =====================================================================
 * 回答結果：正解の行だけ文字が水色になる（iOS Safari）
 * -------------------------------------------------------------------- */
.vq-review-item__head {
  color: var(--vq-text);
  -webkit-text-fill-color: currentColor;
  font-size: inherit;
}

/* =====================================================================
 * SPのカードヘッダー
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {

  .vq-card__head {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: none;          /* 2段組みのときの指定を解除 */
    align-items: end;
    column-gap: 12px;
    row-gap: 0;
    min-height: 74px;
    padding: 0 12px 13px;
  }

  /* --- タイマー：[時計] 残り / 5:00 --- */
  .vq-timer { grid-area: auto; }
  .vq-timer__label,
  .vq-timer__value { line-height: 1; }
  .vq-timer { row-gap: 0; }             /* 2120行の gap: 7px を打ち消す */

  /* --- 進捗：カード中央に 131px --- */
  .vq-progress {
    grid-area: auto;
    min-width: 0;            /* ← 403px を打ち消す。はみ出しの直接の原因 */
    width: 100%;
    max-width: 131px;
    margin-inline: auto;
  }
  .vq-progress__text { line-height: 1; }
  .vq-progress__bar  { height: 3px; margin-top: 6px; }

  /* --- ブランド：ロゴの下に「エキスパート／試験」を2行で --- */
  .vq-card__brand {
    grid-area: auto;
    justify-self: end;
    display: block;
    text-align: center;
  }

  .vq-card__brand .vq-logo {
    width: auto;
    height: auto;
    font-size: 13px;
  }

  .vq-card__brand-sub {
    display: block;
    max-width: none;
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0;
  }
}

/* =====================================================================
 * CMSテンプレートの「ホームへ戻る」ボタンを隠す
 * -------------------------------------------------------------------- */
.submit_:has(> input[value="ホームへ戻る"]) { display: none; }
input.button_[value="ホームへ戻る"] { display: none; }

/* =====================================================================
 * 明朝まわりをデザインに合わせる
 * -------------------------------------------------------------------- */

.vq-result__verdict-word { font-weight: 700; }

.vq-result__message-main,
.vq-result__message-sub { font-family: var(--vq-serif); }

.vq-feature__text {
  font-family: var(--vq-serif);
  font-weight: 400;
}
.vq-feature__icon-text,
.vq-feature__icon-label {
  font-family: var(--vq-serif);
  font-weight: 900;
}

/* =====================================================================
 * ゴシックのウェイトをデザインに合わせる
 * -------------------------------------------------------------------- */

/* Medium に上げる */
.vq-question,
.vq-input,
.vq-done__lead { font-weight: 500; }

.vq-btn,
.vq-result__score,
.vq-review-item__no-label,
.vq-review-item__result { font-weight: 500; }

/* Bold に上げる */
.vq-badge { font-weight: 700; }

/* =====================================================================
 * TOP：「あなたのVAIO知識はどれくらい？」の罫線（PC / SP 共通）
 * -------------------------------------------------------------------- */
.vq .vq-hero__lead {
  display: inline-block;
  padding-bottom: 0;
}

/* =====================================================================
 * TOP：アイコンを4つに増やし、PCは2列2行にする
 * -------------------------------------------------------------------- */

/* --- 4つめ：プレゼントのアイコン --- */
.vq-feature__icon--gift {
  width: 77px;
  height: 86px;
  background-image: url("/ec/img/vaio_expert/icon_gift.png");
}

/* --- PCのみ2列2行 --- */
@media (min-width: 769px) {
  .vq-features {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    column-gap: 114px;
    row-gap: 52px;
  }
}

/* --- SPは1列のまま。アイコンだけ他と同じ比率（PCの約0.6倍）で縮める --- */
@media (max-width: 768px) {
  .vq-feature__icon--gift { width: 46px; height: 51px; }
}

/* =====================================================================
 * TOP：「VAIO」ロゴと「エキスパート試験」の間隔
 * -------------------------------------------------------------------- */
.vq-hero__title-main { margin-top: 14px; }

@media (max-width: 768px) {
  .vq-hero__title-main { margin-top: 0; }
}

/* =====================================================================
 * TOP：SPの縦の余白を2箇所
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq .vq-hero__title  { margin-top: 33px; }
  .vq .vq-hero__visual { margin-top: 30px; }
}

/* =====================================================================
 * TOP（SP）：罫線→「VAIO」の間隔を、「VAIO」→「エキスパート試験」に合わせる
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq .vq-hero__title { margin-top: 17px; }
}

/* =====================================================================
 * TOP：アイコン横のテキストの左端をそろえる
 * -------------------------------------------------------------------- */
.vq-feature__icon { width: 109px; }

@media (max-width: 768px) {
  .vq-feature__icon { width: 65px; }
}

/* =====================================================================
 * 開始前カウントダウン ― 参考動画に合わせる
 * -------------------------------------------------------------------- */
.vq { isolation: isolate; }

.vq-countdown {

  position: fixed;
  inset: 0;
  background: var(--vq-navy);
  animation: vqCdWipe .6s cubic-bezier(.76, 0, .24, 1) both;
}
@keyframes vqCdWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.vq-countdown__num {
  color: #fff;
  font-size: clamp(96px, 16vw, 220px);   /* 1400px幅で220pxになる */
}
.vq-countdown__num.is-pop {
  animation: none;
  opacity: 1;
}

/* =====================================================================
 * カウントダウン中だけフッターも濃紺にする
 * -------------------------------------------------------------------- */
html.vq-counting,
html.vq-counting body,
html.vq-counting .wrapper_ {
  background: #0a113f !important;
}

/* =====================================================================
 * PCのカードヘッダー 3点の調整
 * -------------------------------------------------------------------- */
@media (min-width: 769px) {

  /* --- �@ 「残り」と「1:30」の下端をそろえる ------------------------- */
  .vq-timer__label {
    position: relative;
    top: 3.5px;
  }

  /* --- �A 「N問目/10問中」とバーの間を詰める ------------------------- */
  .vq-progress__text { line-height: 1; }
  .vq-progress__bar  { margin-top: 7px; }

  /* --- �B ブランドの上下の余白をそろえる ----------------------------- */
  .vq-card__brand-sub {
    margin-top: 12px;
    line-height: 1;
  }
}

/* =====================================================================
 * SPの○×選択肢を縦積みにする
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-choices--binary {
    grid-template-columns: minmax(0, 290px);
    justify-content: center;
    gap: 15px;
  }
  .vq-choices--binary .vq-choice__head { min-height: 116px; }

  .vq-choices--binary .vq-choice__radio { top: 8px; right: 10px; }
}

/* =====================================================================
 * 時間切れ演出の文言と書体（PC / SP 共通）
 * -------------------------------------------------------------------- */
.vq-timeup__title { font-family: var(--vq-serif); }

/* =====================================================================
 * 結果画面の余白調整
 * -------------------------------------------------------------------- */
@media (min-width: 769px) {
  .vq-result__head { min-height: 108px; }
  .vq-result__head-sub { line-height: 1; }
}

/* ---------------------------------------------------------------------
 * 【SP】結果画面
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-result__head-sub { margin-top: 0; font-size: 17px; }

  .vq-result__body { padding-top: 24px; }

  .vq-result__verdict-word { line-height: 1; }
  .vq-result__score,
  .vq-result__score-num,
  .vq-result__score-total { line-height: 1; }

  .vq-result__message { margin-top: 22px; }
  .vq-result__message-main { line-height: 1.4; }
  .vq-result__message-sub  { margin-top: 0; font-size: 16px; line-height: 1.4; font-weight: 700; }

  /* --- 不合格のときの「不合格」→「〇点/100点中」 -------------------- */
  .vq-result.is-fail .vq-result__verdict { gap: 15px; }
}

/* =====================================================================
 * 回答結果：アコーディオンを閉じているときの下余白（PC / SP 共通）
 * -------------------------------------------------------------------- */
.vq-review-item:has(.vq-review-item__detail[hidden]) { padding-bottom: 0; }

/* =====================================================================
 * SP：回答結果の「あなたの回答：」と回答内容
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-review-item__answer {
    font-size: 17px;
    line-height: 1.5;
  }
  .vq-review-item__answer b {
    display: block;
    margin-left: 0;
    font-size: 17px;
  }
}

/* =====================================================================
 * SP：回答結果一覧で、設問のサムネイルを設問文の下へ移す
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-review-item__summary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vq-review-item__thumb {
    order: 1;                /* 設問文（order 0）より後ろへ */
    align-self: flex-start;
    width: 80px;
  }
}

/* =====================================================================
 * SP：TOPのリード文が右に寄る
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  .vq-hero__text { max-width: none; }
}

/* =====================================================================
 * 合格証に桜がかからないようにする
 * -------------------------------------------------------------------- */
.vq-cert {
  position: relative;
  z-index: 6;
}

/* =====================================================================
 * 回答結果「解説」の頭の三角
 * -------------------------------------------------------------------- */
.vq-review-item__exp-title::before { content: "\25B6"; }

/* =====================================================================
 * SNSシェアのモーダル
 * -------------------------------------------------------------------- */

/* --- 覆いと箱 --- */
.vq-share {
  position: fixed;
  inset: 0;
  z-index: 60;                 /* 桜(5) より上。サイトの固定ヘッダーより下 */
  display: grid;
  place-items: center;
  padding: 20px;
}
.vq-share[hidden] { display: none; }

.vq-share__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 17, 63, .55);
}

.vq-share__box {
  position: relative;          /* 覆いより前に出す */
  width: 407px;
  max-width: 100%;
  border-radius: 6px;
  background: #f8f5f0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* --- ヘッダー --- */
.vq-share__head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 60px;
  padding: 8px 48px;
  background: #f1eae0;
}
.vq-share__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vq-text);
}

.vq-share__close {
  position: absolute;
  top: 50%;
  right: 9.5px;                /* 中心22 − 半径12.5 */
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.vq-share__close::before,
.vq-share__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--vq-navy);
}
.vq-share__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vq-share__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* ホバーでの色変化は付けない（ご指定） */

/* --- 本体 --- */
.vq-share__body { padding: 30px 20px 27px; }

/* --- SNSアイコン --- */
/* --- アイソレーション（不可侵領域）--------------------------------- */
.vq-share__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;                   /* ロゴ60px の半分 × 両側 */
}
.vq-share__sns {
  display: block;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  background: center / contain no-repeat;

}

.vq-share__sns--x {
  width: 55px;
  height: 55px;
  background-image: url("/ec/img/vaio_expert/sns_x.png");
}
.vq-share__sns--fb   { background-image: url("/ec/img/vaio_expert/sns_facebook.png"); }
.vq-share__sns--line { background-image: url("/ec/img/vaio_expert/sns_line.png"); }

/* --- URLをコピーする --- */
.vq-share__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 281px;
  max-width: 100%;
  min-height: 50px;
  margin: 30px auto 0;
  padding: 6px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--vq-magenta);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  /* ホバーでの色変化は付けない（ご指定） */
}

.vq-share__copy::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: center / contain no-repeat url("/ec/img/vaio_expert/link.png");
}

/* コピー完了の合図 */
.vq-share__copy.is-done { background: var(--vq-indigo-dk); }

/* --- SP --- */
@media (max-width: 768px) {
  .vq-share { padding: 16px; }
  .vq-share__box { width: 340px; }
  .vq-share__head { min-height: 52px; padding: 8px 44px; }
  .vq-share__title { font-size: 14px; }
  .vq-share__body { padding: 24px 16px 22px; }

  .vq-share__list { gap: 52px; }
  .vq-share__sns { width: 52px; height: 52px; }
  .vq-share__sns--x { width: 48px; height: 48px; }
  .vq-share__copy {
    width: 100%;
    gap: 16px;
    min-height: 46px;
    margin-top: 24px;
    font-size: 15px;
  }
  .vq-share__copy::after { width: 26px; height: 26px; }
}

/* =====================================================================
 * 扉ページの注記
 * -------------------------------------------------------------------- */
.vq-start-note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  visibility: hidden;
}
html.vq-guest .vq-start-note { visibility: visible; }

@media (max-width: 768px) {
  .vq-start-note { margin-top: 12px; font-size: 12px; }
}

/* =====================================================================
 * ページ上下の白帯を消す
 * -------------------------------------------------------------------- */
.wrapper_:has(#vq.vq) {
  background: #0a113f;
}

/* =====================================================================
 * スタート画面（試験ページ）
 * -------------------------------------------------------------------- */
/* :has(.vq-ready) で試験ページのスタート画面だけに限定する。
   扉ページ（フリーページ）の .vq-screen--start には当てない */
.vq-screen--start:has(.vq-ready) {
  /* カウントダウンの数字（fixed inset:0 の中央 ＝ 50vh）と高さをそろえる。
     .wrapper_ の padding-top 110px のぶん開始位置が下がっているので、
     下にも同じ 110px を確保すると中心が 50vh に一致する */
  --vq-start-offset: 220px;
  min-height: calc(100vh - var(--vq-start-offset));
  padding: 40px 0;
}
/* .vq-screen.is-active の display:block に勝たせる */
.vq-screen--start.is-active:has(.vq-ready) {
  display: flex;
  align-items: center;
}
.vq-screen--start:has(.vq-ready) > .vq-container { width: 100%; }

.vq-ready {
  width: 343px;
  max-width: 100%;
  margin-inline: auto;
  padding: 30px 20px 28px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

/* --- スペック3項目 --- */
.vq-ready__spec {
  display: flex;
  margin-bottom: 22px;
}
.vq-ready__spec-item {
  flex: 1 1 0;
  min-width: 0;
}
.vq-ready__spec-item + .vq-ready__spec-item {
  border-left: 1px solid var(--vq-line);
}
.vq-ready__spec-label {
  display: block;
  font-family: var(--vq-serif);
  font-size: 12px;
  line-height: 1;
  color: var(--vq-gold);
}
.vq-ready__spec-value {
  display: block;
  margin-top: 14px;
  font-family: var(--vq-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--vq-text);
}
.vq-ready__spec-value b {
  font-size: 24px;
  font-weight: 400;
}

/* --- ボタンと注記 --- */
.vq-ready .vq-btn--cta {
  width: 303px;
  max-width: 100%;
  min-height: 62px;
  margin-inline: auto;
  padding: 10px 16px;
}
.vq-ready__note {
  margin-top: 14px;
  font-family: var(--vq-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--vq-text-mute);
}

@media (max-width: 768px) {
  .vq-screen--start:has(.vq-ready) {
    --vq-start-offset: 160px;
    min-height: calc(100svh - var(--vq-start-offset));
    padding: 24px 0;
  }
}

/* =====================================================================
 * PC：スタートカードを拡大（幅1.5倍／高さ・文字1.2倍）
 * -------------------------------------------------------------------- */
@media (min-width: 769px) {
  .vq-ready {
    width: 515px;
    padding: 30px 30px 28px;
  }
  .vq-ready__spec { margin-bottom: 20px; }
  .vq-ready__spec-label { font-size: 14px; }
  .vq-ready__spec-value {
    margin-top: 12px;
    font-size: 17px;
  }
  .vq-ready__spec-value b { font-size: 29px; }

  .vq-ready .vq-btn--cta {
    width: 455px;
    min-height: 74px;
    font-size: 20px;
  }
  .vq-ready__note {
    margin-top: 12px;
    font-size: 14px;
  }
}

/* =====================================================================
 * autostart のときスタート画面を見せない
 * -------------------------------------------------------------------- */
html.vq-autostart .vq-screen--start { visibility: hidden; }