/* ネットデビュークイズ
   デザイン: Pikara_Quiz2026 / サイト幅は既存キッズ基準 */

body {
  /* 共通CSSの min-width:1300px だと 960〜1190px で横スクロールになる */
  min-width: 0;
}

.footer {
  min-width: 0;
}

#netdebut-quiz {
  --ndq-yellow: #f6b515;
  --ndq-yellow-deep: #f0a800;
  --ndq-blue: #00a0e9;
  --ndq-blue-deep: #0084c7;
  --ndq-blue-soft: #7fd3f5;
  --ndq-orange: #f39800;
  --ndq-green: #22ac38;
  --ndq-pink: #e6007e;
  --ndq-ink: #20116f;
  --ndq-qtitle: #20116f;
  --ndq-max: 1100px;
  /* デザインPDF(1260幅): ノート931 / タイトル910 / リード679 → ノート基準で比率固定 */
  --ndq-note: 990px;
  --ndq-title: calc(var(--ndq-note) * 0.977); /* ≈968 */
  --ndq-catch: calc(var(--ndq-note) * 0.729); /* ≈722 */
  /* 未選択／選択／回答の3状態でノート高が跳ねないよう下段ステージを固定 */
  --ndq-stage-h: 310px;
  --ndq-note-pad-x: 40px;
  --ndq-note-pad-l: 68px;
  --ndq-choice: 235px;
  --ndq-choice-gap: 74px;
  --ndq-stage-w: calc(var(--ndq-choice) * 3 + var(--ndq-choice-gap) * 2);
  /* 選択後ステージ: デザイン比 preview≈47% / btn≈43% / 間≈10%（旧409+280だと間が空きすぎる） */
  --ndq-preview: 400px;
  --ndq-check-btn: 360px;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  min-height: 0;
  padding: 0;
  color: var(--ndq-ink);
  background-color: #fcdf39;
  background-image:
    repeating-linear-gradient(
      -45deg,
      #fde975 0 14px,
      #fcdf39 14px 28px
    );
  background-size: auto;
  background-repeat: repeat;
  overflow-anchor: none;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

#netdebut-quiz *,
#netdebut-quiz *::before,
#netdebut-quiz *::after {
  box-sizing: border-box;
}

#netdebut-quiz img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* --- logo: top left --- */
.ndq-logo {
  position: absolute;
  top: 36px;
  left: max(36px, calc(50% - 640px + 36px));
  right: auto;
  z-index: 6;
  margin: 0;
  text-align: left;
}

.ndq-logo img {
  width: 180px;
}

/* --- top ornate frame (PC)。横幅いっぱいに敷く --- */
.ndq-topframe {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
}

.ndq-topframe img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* --- header title --- */
.ndq-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(calc(var(--ndq-note) + 90px), 100%);
  /* 枠は横幅100%。引き上げは枠の高さ（幅の31.4%）に合わせ、960〜1920でタイトル位置を固定する */
  margin: calc(132px - 31.4%) auto 0;
  padding: 0 12px;
  text-align: center;
}

/* 1790px超で上の「？」がタイトルに被さる。枠の伸びに合わせて少しずつ下げる */
@media screen and (min-width: 1790px) {
  .ndq-header {
    margin-top: calc(-27px - 22.54%);
  }
}

/* .content h1 { margin:50px 0 0 } より詳細度を上げて中央寄せを確保 */
#netdebut-quiz .ndq-header__title {
  width: 100%;
  max-width: var(--ndq-title);
  margin: 0 auto;
}

#netdebut-quiz .ndq-header__title img {
  display: block;
  width: 100%;
  max-width: var(--ndq-title);
  height: auto;
  margin: 0 auto;
}

#netdebut-quiz .ndq-header__catch {
  width: min(100%, var(--ndq-catch));
  margin: -12px auto 18px !important;
}

.ndq-header__catch img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.ndq-brsp {
  display: none;
}

/* --- notebook board --- */
.ndq-board {
  max-width: min(calc(var(--ndq-note) + 32px), 100%);
  /* 下に黄色ストライプの余白を残してから白フッターへ（0だとノートと白帯が密着する） */
  margin: 0 auto 48px;
  padding: 0 16px;
}

.ndq-notebook {
  position: relative;
  margin: 0 auto;
  padding: 44px var(--ndq-note-pad-x) 40px var(--ndq-note-pad-l);
  border-radius: 10px;
  overflow: visible;
  background:
    linear-gradient(#c7e6ec 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, #c7e6ec 1px, transparent 1px) 0 0 / 28px 100%,
    #fff;
  /* デザインの柔らかいドロップシャドウ（ずらし影ではない） */
  box-shadow: 5px 8px 18px rgba(0, 0, 0, 0.22);
}

/* 設問ノートは下段ステージ高を確保して遷移時の縦伸び縮みを抑える（endは除外） */
#netdebut-quiz .ndq-notebook:not(.ndq-notebook--end) {
  box-sizing: border-box;
}

.ndq-notebook::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 36px;
  bottom: 36px;
  width: 34px;
  background: url("../img/notebook_spiral.png") left top / 34px auto repeat-y;
  pointer-events: none;
  z-index: 1;
}

/* --- question heading --- */
.ndq-qhead {
  display: block;
  margin: 0 0 12px;
}

.ndq-qnum {
  margin: 0;
  flex: 0 0 auto;
}

.ndq-qnum span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 42px;
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}

.ndq-qnum--blue span { background: var(--ndq-blue); }
.ndq-qnum--pink span { background: var(--ndq-pink); }
.ndq-qnum--yellow span { background: var(--ndq-orange); }

.ndq-qtitle {
  margin: 2px 0 0;
  color: var(--ndq-qtitle);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.ndq-qtitle--img {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
}

#netdebut-quiz .ndq-qtitle--img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 64px;
  margin-left: auto;
  margin-right: auto;
}

#netdebut-quiz #q3-title {
  width: auto;
  margin: 0 !important;
}

/* Q3はリード文がないため、他問の title→lead→choices 相当の余白を qhead で確保 */
#netdebut-quiz [data-panel="q3"] .ndq-qhead {
  margin-bottom: 12px;
}

.ndq-qlead,
.ndq-scene {
  margin: 0 0 20px;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

#netdebut-quiz .ndq-qlead--img {
  display: block;
  width: 100%;
  margin: 18px auto 26px !important;
  text-align: center;
}

#netdebut-quiz .ndq-qlead--img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 53px;
  margin-left: auto;
  margin-right: auto;
}

/* --- choices --- */
#netdebut-quiz .ndq-choices {
  list-style: none;
  margin: 0 auto 54px !important;
  padding: 0;
  display: grid;
  gap: var(--ndq-choice-gap);
  justify-content: center;
  justify-items: center;
}

#netdebut-quiz .ndq-choices--3 {
  grid-template-columns: repeat(3, var(--ndq-choice));
  max-width: none;
  width: max-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

#netdebut-quiz .ndq-choices--2 {
  grid-template-columns: repeat(2, var(--ndq-choice));
  width: max-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ndq-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.ndq-choice__frame {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 0;
  background: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  line-height: 0;
}

/* 写真系（枠なし素材）用。イラスト素材に枠が含まれる場合は付けない */
.ndq-choice__frame--photo {
  border: 5px solid var(--ndq-blue);
  background: #fff;
}

.ndq-choice[data-answer="a"] .ndq-choice__frame--photo { border-color: var(--ndq-blue); }
.ndq-choice[data-answer="b"] .ndq-choice__frame--photo { border-color: var(--ndq-orange); }
.ndq-choice[data-answer="c"] .ndq-choice__frame--photo { border-color: var(--ndq-green); }

.ndq-choice:hover .ndq-choice__frame,
.ndq-choice:focus-visible .ndq-choice__frame {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
  outline: none;
}

.ndq-choice.is-selected .ndq-choice__frame {
  box-shadow: 0 0 0 4px rgba(0, 160, 233, 0.28);
}

.ndq-choice.is-locked {
  pointer-events: none;
}

.ndq-choice__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.ndq-choice__label {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 43px;
  margin: 8px 0 0;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  background: transparent;
}

.ndq-choice__label img {
  display: block;
  width: 46px;
  height: auto;
}

.ndq-choice__label--c:not(:has(img)) { background: var(--ndq-green); }

.ndq-choice__text {
  display: block;
  margin: 0 4px 2px;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

#netdebut-quiz .ndq-choice:has(.ndq-choice__text) {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  justify-content: start;
  align-items: center;
  column-gap: 12px;
  /* デザイン: 画像枠〜A/B文言は約1行分（旧20pxは空きすぎ） */
  row-gap: 8px;
  text-align: left;
}

#netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__frame {
  grid-column: 1 / -1;
  width: 100%;
}

#netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label {
  width: 38px;
  height: auto;
  margin: 0;
}

#netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label img {
  width: 38px;
}

#netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__text {
  justify-self: start;
  width: max-content;
  max-width: 220px;
  margin: 0;
  text-align: left;
  font-size: 18px;
  line-height: 1.35;
}

/* Q2 scene + options */
#netdebut-quiz .ndq-q2-layout {
  display: grid;
  grid-template-columns: 251px max-content;
  column-gap: 59px;
  align-items: start;
  width: var(--ndq-stage-w);
  max-width: 100%;
  margin: 0 auto;
}

.ndq-scene-card {
  margin: 0;
}

.ndq-scene-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.ndq-q2-layout .ndq-choices {
  margin-bottom: 0;
}

/* --- stage (preview / result / hint) --- */
#netdebut-quiz .ndq-stage {
  display: grid;
  grid-template-columns: var(--ndq-preview) 1fr;
  column-gap: 0;
  align-items: center;
  min-height: var(--ndq-stage-h);
  margin: 0 auto !important;
  width: var(--ndq-stage-w);
  max-width: 100%;
}

.ndq-stage__left {
  position: relative;
  min-height: var(--ndq-stage-h);
  width: var(--ndq-preview);
  max-width: 100%;
  display: flex;
  align-items: flex-start;
}

.ndq-placeholder {
  display: block;
  width: var(--ndq-preview);
  max-width: 100%;
  margin: 0;
  line-height: 0;
}

.ndq-placeholder img {
  display: block;
  width: var(--ndq-preview);
  max-width: 100%;
  height: auto;
}

.ndq-preview,
.ndq-result {
  margin: 0;
}

.ndq-preview[hidden],
.ndq-result[hidden],
.ndq-checkwrap[hidden],
.ndq-hint[hidden],
.ndq-placeholder[hidden] {
  display: none !important;
}

.ndq-preview__img,
.ndq-result__img {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 0;
  background: transparent;
}

.ndq-result {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 20px;
  align-items: start;
  grid-column: 1 / -1;
}

.ndq-result__body--wide {
  grid-column: 1 / -1;
}

.ndq-result__preview {
  margin: 0;
  line-height: 0;
}

.ndq-result__preview img {
  display: block;
  width: 100%;
  height: auto;
}

.ndq-result__judge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
}

.ndq-result__judge.is-ok { color: var(--ndq-blue); }
.ndq-result__judge.is-ng { color: #e60012; }

.ndq-result__choice,
.ndq-result__status {
  display: block;
  height: auto;
}

.ndq-result__choice {
  width: 52px;
}

.ndq-result__status {
  width: auto;
  max-width: 220px;
  height: auto;
}

.ndq-result__choice-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
}

.ndq-result__choice-text--c { background: var(--ndq-green); }

.ndq-result__text {
  margin: 0 0 16px;
  color: #e60012;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

.ndq-result__explain {
  display: block;
  width: min(100%, 420px);
  height: auto;
}

.ndq-result__actions,
.ndq-checkwrap {
  margin: 0;
}

.ndq-checkwrap--q5 {
  margin: 8px 0 16px;
  text-align: center;
}

.ndq-checkwrap--q5 .ndq-btn-img img {
  width: min(100%, 360px);
}

.ndq-stage__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 0;
  min-height: var(--ndq-stage-h);
}

.ndq-notebook.is-selected .ndq-stage {
  align-items: center;
}

.ndq-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
}

#netdebut-quiz .ndq-hint__art {
  display: block;
  width: min(364px, 100%);
  max-width: 100%;
  height: auto;
}

#netdebut-quiz .ndq-qtitle--img img,
#netdebut-quiz .ndq-qlead--img img,
#netdebut-quiz .ndq-header__title img {
  max-width: 100%;
}

.ndq-hint__bubble {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.ndq-hint__bubble--pink { background: var(--ndq-pink); }
.ndq-hint__bubble--orange { background: var(--ndq-orange); }

.ndq-mascot {
  width: 110px;
  height: auto;
}

.ndq-btn-img {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.ndq-btn-img img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.ndq-result__actions .ndq-btn-img img {
  width: 220px;
}

.ndq-stage__right .ndq-checkwrap .ndq-btn-img img {
  width: var(--ndq-check-btn);
}

.ndq-btn-img:hover img,
.ndq-btn-img:focus-visible img {
  transform: translateY(-2px);
  outline: none;
}

/* buttons */
.ndq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 200px;
  min-height: 52px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.ndq-btn--check {
  background: var(--ndq-orange);
  color: #fff;
}

.ndq-btn--next {
  position: relative;
  background: var(--ndq-blue);
  color: #fff;
  padding-left: 28px;
}

.ndq-btn--next::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
}

.ndq-btn--retry {
  background: #8ea0b5;
  color: #fff;
}

#netdebut-quiz a.ndq-btn--home,
#netdebut-quiz a.ndq-btn--home:link,
#netdebut-quiz a.ndq-btn--home:visited,
#netdebut-quiz a.ndq-btn--home:hover,
#netdebut-quiz a.ndq-btn--home:active,
#netdebut-quiz a.ndq-btn--home:focus {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin-left: 0;
  text-decoration: none;
}

#netdebut-quiz .ndq-end__actions .ndq-btn--home img {
  width: auto;
  height: 47px;
  max-width: none;
}

/* hotspot Q5 */
#netdebut-quiz .ndq-q5 {
  position: relative;
  width: var(--ndq-stage-w);
  max-width: 100%;
  margin: 0 auto;
}

.ndq-q5-top {
  display: grid;
  grid-template-columns: 572px 253px;
  column-gap: 28px;
  align-items: start;
}

.ndq-hotspot {
  position: relative;
  margin: 0;
}

.ndq-hotspot__img {
  display: block;
  width: 100%;
  height: auto;
}

.ndq-hotspot__spot {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.ndq-hotspot__spot:focus-visible {
  outline: 3px dashed #fff;
  outline-offset: -3px;
}

.ndq-hotspot__spot.is-found {
  cursor: default;
}

#netdebut-quiz .ndq-q5-zoom {
  margin: 0 !important;
  line-height: 0;
}

.ndq-q5-zoom img {
  display: block;
  width: 253px;
  height: auto;
}

.ndq-q5-mid {
  position: relative;
  height: 158px;
}

#netdebut-quiz .ndq-q5-check {
  position: absolute;
  top: 36px;
  right: 0;
  margin: 0 !important;
}

.ndq-q5-check .ndq-btn-img img {
  width: 367px;
}

.ndq-q5-result {
  position: absolute;
  top: 23px;
  left: 0;
  display: flex;
  align-items: center;
}

.ndq-q5-result[hidden],
.ndq-q5-status[hidden],
.ndq-q5-status [hidden] {
  display: none !important;
}

.ndq-q5-result__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 59px;
  height: 59px;
  margin: 10px 14px 0 0;
  border-radius: 50%;
  background: var(--ndq-blue);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.ndq-q5-result__num[data-n="2"] { background: var(--ndq-orange); }
.ndq-q5-result__num[data-n="3"] { background: var(--ndq-green); }

#netdebut-quiz .ndq-q5-result__status {
  display: block;
  width: auto;
  height: 70px;
}

.ndq-q5-result__text {
  display: block;
  width: calc(var(--ndq-vbw, 341) * 1.17px);
  height: auto;
  margin: 8px 0 0 26px;
}

#netdebut-quiz .ndq-q5-summary {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  margin: 0 !important;
  text-align: center;
  line-height: 0;
}

.ndq-q5-summary img {
  display: inline-block;
  width: 806px;
  max-width: 100%;
  height: auto;
}

.ndq-q5-bottom {
  position: relative;
  height: 163px;
}

#netdebut-quiz .ndq-found {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 162px);
  column-gap: 36px;
  width: max-content;
  margin: 0 !important;
  padding: 0;
}

.ndq-found li {
  position: relative;
  line-height: 0;
}

.ndq-found__img {
  display: block;
  width: 162px;
  height: 162px;
}

.ndq-found__num {
  position: absolute;
  top: -18px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ndq-blue);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.ndq-found li[data-found="2"] .ndq-found__num { background: var(--ndq-orange); }
.ndq-found li[data-found="3"] .ndq-found__num { background: var(--ndq-green); }

#netdebut-quiz .ndq-q5-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  line-height: 0;
  pointer-events: none;
}

.ndq-q5-hint img {
  display: block;
  width: 407px;
  height: auto;
}

.ndq-q5-status__remain,
.ndq-q5-status__next {
  position: absolute;
  top: -122px;
  right: 0;
}

.ndq-q5-status__remain,
.ndq-q5-status__next img {
  display: block;
  width: 148px;
  height: auto;
}

.ndq-q5-status__mascot {
  position: absolute;
  right: 68px;
  bottom: -10px;
  width: 165px;
  height: auto;
  pointer-events: none;
}

#netdebut-quiz .ndq-q5-final {
  position: absolute;
  top: 50%;
  left: 623px;
  margin: 0 !important;
  transform: translateY(-50%);
}

#netdebut-quiz .ndq-peek--q5 {
  width: 132px;
}

#netdebut-quiz .ndq-q5-final {
  z-index: 3;
}

.ndq-q5-final .ndq-btn-img img {
  width: auto;
  height: 48px;
}

/* end */
#netdebut-quiz:has(#ndq-board[data-q="end"]) .ndq-header__catch {
  display: none;
}

#netdebut-quiz .ndq-notebook--end {
  padding: 32px 0 40px;
  text-align: center;
}

#netdebut-quiz .ndq-end__art {
  position: relative;
  z-index: 2;
  width: 900px;
  max-width: 100%;
  margin: 0 auto !important;
  line-height: 0;
  transform-origin: 50% 60%;
  animation: ndqEndPop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s both;
}

.ndq-end__art img {
  display: block;
  width: 100%;
  height: auto;
}

.ndq-end__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px auto 0;
  animation: ndqEndFade 0.4s ease-out 0.8s both;
}

#netdebut-quiz .ndq-end__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 !important;
}

#netdebut-quiz .ndq-end__actions .ndq-btn--home,
#netdebut-quiz .ndq-end__actions .ndq-btn--home:link,
#netdebut-quiz .ndq-end__actions .ndq-btn--home:visited,
#netdebut-quiz .ndq-end__actions .ndq-btn--home:hover,
#netdebut-quiz .ndq-end__actions .ndq-btn--home:active,
#netdebut-quiz .ndq-end__actions .ndq-btn--home:focus {
  margin-left: 0;
  text-decoration: none !important;
}

@keyframes ndqEndPop {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: none; }
}

@keyframes ndqEndFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #netdebut-quiz .ndq-end__art,
  .ndq-end__footer {
    animation: none;
  }
}

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

/* footer banners（キッズ共通サイズ。黄地の上に乗らないよう白帯） */
#netdebut-quiz .life-common-footer {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 30px 0;
  background: #fff;
}

#netdebut-quiz .life-common-footer p {
  margin: 0 50px 0 0;
  flex: 0 0 auto;
  max-width: none;
}

#netdebut-quiz .life-common-footer p:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

#netdebut-quiz .life-common-footer img {
  width: auto;
  max-width: 266px;
  height: auto;
}

/* state: when result showing, hide idle stage pieces via JS classes */
#netdebut-quiz .ndq-notebook.is-answered .ndq-stage__right {
  display: none;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-stage {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--ndq-stage-h);
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-stage__left {
  width: 100%;
  min-height: var(--ndq-stage-h);
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result {
  display: grid;
  grid-template-columns: var(--ndq-preview) minmax(0, 1fr);
  column-gap: 34px;
  align-items: start;
  min-height: var(--ndq-stage-h);
  width: var(--ndq-stage-w);
  max-width: 100%;
  margin: 0 auto !important;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__preview {
  align-self: start;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding-bottom: 4px;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__actions {
  margin-top: auto !important;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__judge {
  gap: 14px;
  margin: 0 0 8px !important;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__choice {
  width: 58px;
  height: auto;
  margin-top: 14px;
  flex: 0 0 auto;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__status {
  width: auto;
  max-width: none;
  height: 70px;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__text {
  margin: 0 0 24px !important;
  padding-left: 72px;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__text:has(.ndq-result__explain.is-twoline) {
  margin-top: 12px !important;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__explain {
  display: block;
  width: calc(var(--ndq-vbw, 259) * 1.16px);
  max-width: 100%;
  height: auto;
}

#netdebut-quiz .ndq-notebook.is-answered .ndq-result__actions .ndq-btn-img img {
  width: auto;
  height: 48px;
}

.ndq-peek {
  position: absolute;
  right: 14px;
  bottom: 0;
  width: 230px;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.ndq-notebook:not(.is-answered) .ndq-peek {
  display: none;
}

.ndq-notebook.is-selected .ndq-hint {
  display: none;
}

.ndq-q5-hint__sp,
.ndq-q5-sp-mascot,
.ndq-sp-mascot,
.ndq-hint__split {
  display: none;
}

/* --- 中間幅（751〜1099px。PC固定幅のはみ出し／ヘッダー切れを防ぐ） --- */
@media screen and (min-width: 901px) and (max-width: 1099px) {
  #netdebut-quiz {
    /* 間隔はPCの74pxを優先。画像幅だけノート内に合わせて縮める */
    --ndq-choice-gap: 74px;
    --ndq-note-pad-x: clamp(24px, 3.7vw, 40px);
    --ndq-note-pad-l: clamp(40px, 6.3vw, 68px);
  }

  .ndq-header__title,
  .ndq-header__title img {
    max-width: min(var(--ndq-title), 100%);
  }

  #netdebut-quiz .ndq-choices--3,
  #netdebut-quiz .ndq-choices--2 {
    width: 100%;
    max-width: var(--ndq-stage-w);
    gap: var(--ndq-choice-gap);
  }

  #netdebut-quiz .ndq-choices--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #netdebut-quiz .ndq-choices--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #netdebut-quiz .ndq-q2-layout {
    grid-template-columns: minmax(0, 251px) minmax(0, 1fr);
    column-gap: clamp(28px, 5.5vw, 59px);
    width: 100%;
    max-width: var(--ndq-stage-w);
  }

  #netdebut-quiz .ndq-q2-layout .ndq-choices--2 {
    width: 100%;
    max-width: none;
  }

  #netdebut-quiz .ndq-stage {
    width: 100%;
    max-width: var(--ndq-stage-w);
    grid-template-columns: minmax(0, var(--ndq-preview)) minmax(0, 1fr);
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result {
    width: 100%;
    max-width: var(--ndq-stage-w);
    grid-template-columns: minmax(0, var(--ndq-preview)) minmax(0, 1fr);
    column-gap: clamp(16px, 3.1vw, 34px);
  }

  .ndq-q5-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 29.7%);
    column-gap: clamp(16px, 2.6vw, 28px);
  }

  .ndq-q5-zoom img {
    width: 100%;
    max-width: 253px;
  }

  .ndq-q5-check .ndq-btn-img img {
    width: 367px;
    max-width: 100%;
  }

  #netdebut-quiz .ndq-found {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: calc(162px * 3 + 36px * 2);
    column-gap: 36px;
  }

  .ndq-peek {
    width: min(230px, 24vw);
  }
}

/* --- SP（900px以下。中間幅での重なり回避のためスマホ判定を引き上げ） --- */
/* SPデザインは幅750px基準のvw。900pxまでは同じSPレイアウトを使う */
@media screen and (max-width: 900px) {
  #netdebut-quiz {
    --ndq-note-pad-x: 4.13vw;
    --ndq-note-pad-l: 4.13vw;
    --ndq-choice-gap: 1.33vw;
    padding: 0;
  }

  .ndq-brsp {
    display: inline;
  }

  /* header */
  .ndq-logo {
    position: absolute;
    top: 2.67vw;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
  }

  .ndq-logo img {
    width: 24vw;
  }

  .ndq-header {
    max-width: none;
    margin: -3.7vw auto 0;
    padding: 0 2vw;
  }

  .ndq-header__title {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .ndq-header__title img,
  #netdebut-quiz .ndq-header__title img {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  #netdebut-quiz .ndq-header__catch {
    width: 86.1vw;
    margin: 5.3vw auto 4.3vw !important;
  }

  /* notebook */
  .ndq-board {
    max-width: none;
    margin: 0 auto 6.4vw;
    padding: 0 5.6vw;
  }

  .ndq-notebook {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 4vw var(--ndq-note-pad-x) 4vw 5.2vw;
    border-radius: 1.3vw;
    background:
      linear-gradient(#c7e6ec 1px, transparent 1px) 0 0 / 100% 4.43vw,
      linear-gradient(90deg, #c7e6ec 1px, transparent 1px) 0 0 / 4.43vw 100%,
      #fff;
    box-shadow: 1.3vw 1.3vw 2vw rgba(0, 0, 0, 0.1);
  }

  .ndq-notebook::before {
    left: -1.6vw;
    top: 5vw;
    bottom: 2vw;
    width: 4.27vw;
    background-size: 4.27vw auto;
  }

  /* title / lead（SP用SVGは750px幅で等倍） */
  #netdebut-quiz .ndq-qtitle--img img,
  #netdebut-quiz .ndq-qlead--img img {
    width: calc(var(--ndq-vbw, 579) / 7.5 * 1vw);
    max-width: 100%;
    height: auto;
  }

  #netdebut-quiz #q3-title {
    margin: 0 !important;
  }

  #netdebut-quiz #q3-title img {
    width: calc(var(--ndq-vbw, 505) / 7.5 * 1vw);
    height: auto;
  }

  #netdebut-quiz .ndq-qhead {
    margin: 0 0 3.2vw;
  }

  #netdebut-quiz [data-panel="q3"] .ndq-qhead {
    margin-bottom: 3.7vw;
  }

  #netdebut-quiz #q3-title {
    min-height: 0;
  }

  #netdebut-quiz .ndq-qlead--img {
    min-height: 17.6vw;
    margin: 0 auto !important;
  }

  #netdebut-quiz [data-panel="q5"] .ndq-qlead--img {
    min-height: 0;
    margin-bottom: 3.2vw !important;
  }

  /* choices */
  #netdebut-quiz .ndq-choices,
  #netdebut-quiz .ndq-choices--3,
  #netdebut-quiz .ndq-choices--2 {
    width: max-content;
    max-width: 100%;
    min-height: 40.67vw;
    align-content: start;
    gap: 1.33vw;
    margin: 0 auto !important;
  }

  #netdebut-quiz .ndq-choices--3 {
    grid-template-columns: repeat(3, 26vw);
  }

  #netdebut-quiz .ndq-choices--2 {
    grid-template-columns: repeat(2, 26vw);
  }

  .ndq-choice,
  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
    text-align: center;
  }

  .ndq-choice__frame {
    border-radius: 2vw;
  }

  .ndq-choice__label,
  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label {
    width: 6.67vw;
    height: auto;
    margin: 1vw 0 0;
  }

  .ndq-choice__label img,
  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label img {
    width: 6.67vw;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__text {
    max-width: none;
    margin: 0.8vw 0 0;
    color: #222;
    font-size: 2.67vw;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }

  #netdebut-quiz .ndq-q2-layout {
    grid-template-columns: 26vw max-content;
    column-gap: 1.33vw;
    align-items: start;
    width: max-content;
    max-width: 100%;
    min-height: 40.67vw;
    margin: 0 auto;
  }

  #netdebut-quiz .ndq-q2-layout .ndq-choices {
    min-height: 0;
    margin: 0 !important;
  }

  .ndq-scene-card img {
    width: 100%;
  }

  /* stage（PCの min-height:310px を打ち消し、余白の原因を除去） */
  #netdebut-quiz .ndq-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 0;
    gap: 0;
    margin: 0 auto !important;
  }

  .ndq-stage__left,
  .ndq-stage__right {
    display: block;
    width: 100%;
    min-height: 0;
    align-items: center;
    gap: 0;
    padding: 0;
    text-align: center;
  }

  /* 選択直後、プレビュー画像の読み込み前に高さが 0 になってノートが縮み、黄色背景が動く */
  .ndq-stage__left {
    min-height: 37.95vw;
  }

  /* 選択前のヒントと「こたえをみる」の高さを揃え、押した瞬間にノートが伸びて黄線がずれないようにする */
  #netdebut-quiz .ndq-stage__right {
    min-height: 58vw;
  }

  .ndq-placeholder,
  .ndq-placeholder img,
  .ndq-preview,
  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__preview {
    width: 54.4vw;
    margin-left: auto;
    margin-right: auto;
  }

  .ndq-placeholder img,
  .ndq-preview__img {
    aspect-ratio: 410 / 286;
    height: auto;
  }

  #netdebut-quiz .ndq-hint {
    align-items: center;
    margin: 3.33vw 0 0 !important;
  }

  #netdebut-quiz .ndq-hint__art {
    width: 50.4vw;
  }

  #netdebut-quiz .ndq-stage__right .ndq-checkwrap {
    margin: 4vw 0 0 !important;
    text-align: center;
  }

  .ndq-stage__right .ndq-checkwrap .ndq-btn-img img {
    width: 75.2vw;
    height: auto;
  }

  /* result（PCの min-height:310px を打ち消し。余白の再発を防ぐ） */
  #netdebut-quiz .ndq-notebook.is-answered .ndq-stage,
  #netdebut-quiz .ndq-notebook.is-answered .ndq-stage__left {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0 !important;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0 auto !important;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__body {
    flex: 1 0 auto;
    align-items: center;
    width: 100%;
    padding: 0;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__judge {
    justify-content: center;
    gap: 1.6vw;
    margin: 2.3vw 0 0 !important;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__choice {
    width: 6.67vw;
    margin-top: 1.3vw;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__status {
    height: 8vw;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__text {
    width: 100%;
    margin: 2.67vw 0 0 !important;
    padding-left: 0;
    text-align: center;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__explain {
    width: calc(var(--ndq-vbw, 597) / 7.5 * 1vw);
    max-width: 100%;
    margin: 0 auto;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__actions {
    align-self: center;
    margin: 4vw auto 2vw !important;
    padding-top: 0;
    line-height: 0;
  }

  #netdebut-quiz .ndq-notebook.is-answered .ndq-result__actions .ndq-btn-img img {
    width: 75.2vw;
    height: auto;
  }

  .ndq-peek {
    right: 2.7vw;
    width: 21.3vw;
  }

  #netdebut-quiz .ndq-peek--q5 {
    display: none;
  }

  /* Q5 */
  #netdebut-quiz .ndq-q5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  #netdebut-quiz .ndq-q5 [hidden] {
    display: none !important;
  }

  .ndq-q5-mid,
  .ndq-q5-bottom {
    display: contents;
  }

  .ndq-q5-top {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    row-gap: 0;
  }

  .ndq-hotspot {
    width: 80vw;
  }

  #netdebut-quiz .ndq-q5-zoom {
    margin: 2.5vw 0 0 !important;
  }

  .ndq-q5-zoom img {
    width: 23.2vw;
  }

  #netdebut-quiz .ndq-q5-check,
  #netdebut-quiz .ndq-q5-hint,
  .ndq-q5-result,
  #netdebut-quiz .ndq-q5-summary,
  .ndq-q5-status,
  #netdebut-quiz .ndq-q5-final {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    grid-row: 2;
    margin: 2vw 0 0 !important;
  }

  #netdebut-quiz .ndq-q5-check,
  #netdebut-quiz .ndq-q5-hint {
    grid-column: 1 / -1;
  }

  .ndq-q5-result,
  #netdebut-quiz .ndq-q5-summary {
    grid-column: 1;
  }

  .ndq-q5-status,
  #netdebut-quiz .ndq-q5-final {
    grid-column: 2;
    align-self: start;
    z-index: 1;
    margin-right: 4vw !important;
  }

  #netdebut-quiz .ndq-q5 .ndq-q5-sp-mascot {
    display: block;
    flex: 0 0 auto;
    width: 20.7vw;
    height: auto;
  }

  /* ボタン自体を中央に。マスコットは右に逃がす（グループ中央寄せでボタンが左に見えるのを防ぐ） */
  #netdebut-quiz .ndq-q5-check {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
  }

  .ndq-q5-check .ndq-btn-img {
    display: inline-block;
    margin-bottom: 2.7vw;
  }

  .ndq-q5-check .ndq-btn-img img {
    width: 49.6vw;
  }

  #netdebut-quiz .ndq-q5-check .ndq-q5-sp-mascot {
    position: absolute;
    left: calc(50% + 26vw);
    bottom: 0;
    width: 20.7vw;
  }

  #netdebut-quiz .ndq-q5-hint {
    pointer-events: auto;
  }

  .ndq-q5-hint__pc {
    display: none !important;
  }

  .ndq-q5-hint__sp {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1vw;
    line-height: 1;
  }

  .ndq-q5-hint__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 59.3vw;
    height: 12vw;
    margin-bottom: 2vw;
    padding-top: 1vw;
    border-radius: 6vw;
    background: #f6b516;
    color: #fff;
    font-size: 4.2vw;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .ndq-q5-hint__bubble rt {
    font-size: 1.7vw;
    font-weight: 700;
  }

  .ndq-q5-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 4vw;
    box-sizing: border-box;
  }

  .ndq-q5-result__num {
    width: 7.2vw;
    height: 7.2vw;
    margin: 1.3vw 2vw 0 0;
    font-size: 4.3vw;
  }

  #netdebut-quiz .ndq-q5-result__status {
    height: 8vw;
  }

  .ndq-q5-result__text {
    flex: 0 0 auto;
    width: calc(var(--ndq-vbw, 539) / 7.5 * 1vw);
    max-width: 100%;
    margin: 2vw 0 0;
  }

  .ndq-q5-status__remain,
  .ndq-q5-status__next {
    position: static;
    top: auto;
    right: auto;
  }

  .ndq-q5-status__remain,
  .ndq-q5-status__next img {
    width: 19.2vw;
  }

  .ndq-q5-status__mascot {
    display: none;
  }

  #netdebut-quiz .ndq-q5-summary {
    margin: 1.6vw 0 0 2.7vw !important;
    text-align: left;
  }

  .ndq-q5-summary img {
    width: calc(var(--ndq-vbw, 405) / 7.5 * 1vw);
    max-width: 100%;
  }

  .ndq-q5-final .ndq-btn-img img {
    width: 20.3vw;
    height: auto;
  }

  #netdebut-quiz .ndq-found {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(3, 18.9vw);
    column-gap: 5.07vw;
    justify-content: center;
    width: 100%;
    margin: 6vw 0 2.7vw !important;
  }

  .ndq-found li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .ndq-found__img {
    width: 18.9vw;
    height: 18.9vw;
  }

  #netdebut-quiz .ndq-found li.is-done .ndq-found__img {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 26.2vw;
  }

  .ndq-found__num {
    top: -1.9vw;
    right: -2.3vw;
    width: 5.9vw;
    height: 5.9vw;
    font-size: 3.4vw;
  }

  /* end */
  #netdebut-quiz:has(#ndq-board[data-q="end"]) .ndq-board {
    margin-top: 10vw;
  }

  #netdebut-quiz .ndq-notebook--end {
    display: block;
    min-height: 0;
    padding: 4.8vw 0 8vw;
  }

  /* end_mascot_sp.png は2倍書き出し（1477px → 738.5px） */
  #netdebut-quiz .ndq-end__art {
    width: 98.5vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 49.25vw) !important;
  }

  .ndq-end__footer,
  #netdebut-quiz .ndq-end__actions {
    flex-direction: column;
  }

  #netdebut-quiz .life-common-footer {
    display: block;
    width: 100%;
    margin-left: 0;
    padding: 5vw;
  }

  #netdebut-quiz .life-common-footer p {
    margin-right: 0;
    margin-bottom: 5vw;
  }

  #netdebut-quiz .life-common-footer p:last-child {
    margin-bottom: 0;
  }

  #netdebut-quiz .life-common-footer img {
    width: 100%;
    max-width: 100%;
  }

  /* Q1 再入稿（2026-10-16）。選択肢は上に2つ・下に1つ。PCには出さない */
  #netdebut-quiz [data-panel="q1"] .ndq-choices--3 {
    grid-template-columns: 32.8vw 32.8vw;
    column-gap: 5.47vw;
    row-gap: 2.4vw;
    min-height: 0;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 4vw !important;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-choices--3 > li:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 32.8vw;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-choice__label,
  #netdebut-quiz [data-panel="q1"] .ndq-choice__label img {
    width: 8.5vw;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-placeholder,
  #netdebut-quiz [data-panel="q1"] .ndq-placeholder img,
  #netdebut-quiz [data-panel="q1"] .ndq-preview,
  #netdebut-quiz [data-panel="q1"] .ndq-preview__img,
  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__preview,
  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__img {
    width: 54.4vw;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-stage__right .ndq-checkwrap {
    margin: 4vw 0 0 !important;
    text-align: center;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-stage__right .ndq-checkwrap .ndq-btn-img img,
  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__actions .ndq-btn-img img {
    width: 75.2vw;
    height: auto;
  }

  #netdebut-quiz .ndq-sp-mascot {
    display: block;
    width: 24vw;
    height: auto;
    margin: 2vw auto 0;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__actions {
    align-self: center;
    margin: 4vw auto 2vw !important;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__judge {
    margin-top: 3vw !important;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__choice {
    width: 8.5vw;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-notebook.is-answered .ndq-result__status {
    height: 10vw;
  }

  #netdebut-quiz [data-panel="q1"] .ndq-peek {
    display: none;
  }

  #netdebut-quiz .ndq-hint {
    align-items: center;
    width: 100%;
    margin: 3.2vw 0 0 !important;
  }

  #netdebut-quiz .ndq-hint__art {
    display: none;
  }

  #netdebut-quiz .ndq-hint__split,
  #netdebut-quiz .ndq-q5-hint__sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #netdebut-quiz .ndq-q5-hint__sp .ndq-hint__chara {
    order: 1;
    margin-top: 1.5vw;
  }

  #netdebut-quiz .ndq-q5-hint__sp .ndq-hint__bubble {
    order: 2;
    margin-top: 2vw;
  }

  #netdebut-quiz .ndq-hint__bubble {
    display: block;
    width: 75.2vw;
    max-width: 100%;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  #netdebut-quiz .ndq-hint__chara {
    display: block;
    width: 27.6vw;
    height: auto;
    margin-top: 2.4vw;
  }

  /* Q2〜Q6。選択画像の左端を「次へ」ボタン・Q2の場面枠と揃える。文言は画像のすぐ右 */
  #netdebut-quiz .ndq-choices--3:has(.ndq-choice__text),
  #netdebut-quiz .ndq-choices--2,
  #netdebut-quiz .ndq-q2-layout .ndq-choices {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    width: 75.2vw;
    max-width: 100%;
    min-height: 0;
    row-gap: 2.8vw;
    margin: 0 auto 3vw !important;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) {
    display: grid;
    grid-template-columns: 34vw minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-content: start;
    column-gap: 2.4vw;
    row-gap: 0.4vw;
    align-items: center;
    width: 100%;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__frame {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 8.5vw;
    margin: 0 auto;
    justify-self: center;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__label img {
    width: 8.5vw;
  }

  #netdebut-quiz .ndq-choice:has(.ndq-choice__text) .ndq-choice__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 3.6vw;
    line-height: 1.45;
    white-space: normal;
    text-align: center;
  }

  #netdebut-quiz .ndq-q2-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 0;
    gap: 3.2vw;
    margin: 0 auto 1vw;
  }

  #netdebut-quiz .ndq-scene-card {
    width: 75.2vw;
  }

  #netdebut-quiz .ndq-q2-layout .ndq-choices {
    width: 75.2vw;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto !important;
  }

  #netdebut-quiz .ndq-peek {
    display: none;
  }

  #netdebut-quiz .ndq-q5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #netdebut-quiz .ndq-q5-top {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #netdebut-quiz .ndq-hotspot,
  #netdebut-quiz .ndq-hotspot__img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  #netdebut-quiz .ndq-q5-zoom img {
    width: 34vw;
  }

  #netdebut-quiz .ndq-q5-check,
  #netdebut-quiz .ndq-q5-result,
  #netdebut-quiz .ndq-q5-summary {
    order: 2;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
  }

  #netdebut-quiz .ndq-q5-hint,
  #netdebut-quiz .ndq-q5-status,
  #netdebut-quiz .ndq-q5-final {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
  }

  #netdebut-quiz .ndq-q5-check {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #netdebut-quiz .ndq-q5-check .ndq-btn-img {
    order: 2;
    display: block;
    width: 75.2vw;
    max-width: 100%;
    margin: 3vw 0 0;
  }

  #netdebut-quiz .ndq-q5-check .ndq-btn-img img,
  #netdebut-quiz .ndq-q5-final .ndq-btn-img img,
  #netdebut-quiz .ndq-q5-status__remain,
  #netdebut-quiz .ndq-q5-status__next,
  #netdebut-quiz .ndq-q5-status__next img {
    width: 75.2vw;
    max-width: 100%;
    height: auto;
  }

  /* 最終画面のSP画像は 1364px 幅。他のSPボタン（1196px）と同じ縮尺にする */
  #netdebut-quiz .ndq-end__actions .ndq-btn-img img,
  #netdebut-quiz .ndq-end__actions a.ndq-btn--home img {
    width: calc(1364 / 1196 * 75.2vw);
    max-width: 92vw;
    height: auto;
  }

  #netdebut-quiz .ndq-q5-check .ndq-q5-sp-mascot {
    position: static;
    left: auto;
    bottom: auto;
    order: 1;
    display: block;
    width: 27.6vw;
    height: auto;
    margin: 1.5vw auto 0;
  }

  #netdebut-quiz .ndq-q5-result {
    justify-content: center;
    align-content: center;
    padding-left: 0;
    /* マスコットと同じ高さにして、下の枠が状態で上下にずれないようにする */
    min-height: 30.5vw;
    box-sizing: border-box;
  }

  #netdebut-quiz .ndq-q5-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2vw 0 0 !important;
    min-height: 30.5vw;
    box-sizing: border-box;
    text-align: center;
  }

  /* viewBox 405の等倍だと小さい */
  #netdebut-quiz .ndq-q5-summary img {
    width: 77.1vw;
    max-width: 100%;
    height: auto;
  }

  #netdebut-quiz .ndq-q5-status {
    display: flex;
    justify-content: center;
  }

  #netdebut-quiz .ndq-q5-status__remain,
  #netdebut-quiz .ndq-q5-status__next,
  #netdebut-quiz .ndq-q5-status__next img {
    width: 75.2vw;
    max-width: 100%;
    height: auto;
  }

  #netdebut-quiz .ndq-found {
    order: 4;
    margin-top: 4vw !important;
  }

  #netdebut-quiz .ndq-end__actions {
    align-items: center;
  }
}