/* =====================================================================
   MIYAZAKI QUEST（/miyazaki）— styles.css（日本クエストLPと共通の部品）の上に重ねる宮崎版の差分
   方針：日本版と同じドットRPGの部品・CTA の出し分けはそのまま。色を「ひなた・南国・海・夕焼け」に寄せ、
        宮崎の冒険マップ・ご当地タブ・夕焼けの絶景セクションなど宮崎版だけの部品をここに足す
   ===================================================================== */

.mq {
  --sun: #f5a623;
  --sun-2: #ffd35a;
  --sunset: #f0782a;      /* 宮崎版のアクセント（日本版の赤の役割） */
  --sunset-2: #ff9a4a;
  --dusk: #3a2450;
  --dusk-2: #6a3a6a;
  --sea: #0f7fa8;
  --sea-deep: #0b4f74;
  --sky-3: #dff4ff;
  --tropical: #12a99a;
  --tropical-2: #0b7f78;
  --palm: #3f8f3a;
  --beach: #f6e2b0;
}
img[src*="/items/"] { image-rendering: pixelated; }

/* ---------- HERO：鵜戸神宮と日南海岸の夕暮れ ---------- */
.mq .hero-bg { background-image: url('/assets/miyazaki/vistas/udo_nichinan.png'); background-position: center 40%; }
.mq .hero-bg::after {
  background: linear-gradient(180deg, rgba(58, 36, 80, .15) 0%, rgba(58, 36, 80, 0) 30%, rgba(80, 30, 40, .35) 72%, rgba(40, 20, 40, .62) 100%);
}
.mq .hero-kicker { color: var(--sun-2); }
.mq .logo-en {
  font-size: clamp(40px, 11.6vw, 92px);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    0 8px 0 var(--sunset), 3px 8px 0 var(--sunset), -3px 8px 0 var(--sunset), 0 11px 0 var(--ink), 3px 11px 0 var(--ink), -3px 11px 0 var(--ink);
}
.hero-sub {
  margin-top: 10px; font-weight: 800; font-size: clamp(15px, 4.2vw, 20px); line-height: 1.6;
  text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
}
/* 地面は草ではなく、日南の浜と波 */
.mq .hero-ground { background: linear-gradient(#7fd3e6 0 6px, var(--sea) 6px 12px, var(--beach) 12px); }
.mq .hero-ground::before { background: repeating-linear-gradient(90deg, transparent 0 18px, #ffffff 18px 26px, transparent 26px 44px, #bfeaf5 44px 48px, transparent 48px 60px); top: -6px; height: 3px; }

/* セクションの ▶ は夕焼け色 */
.mq .sec-label::before { color: var(--sunset); }
.mq .step-no { color: var(--sunset); }
.mq .feature-title { color: var(--sea); }

/* ---------- 3. ABOUT ---------- */
.mq-about { background: linear-gradient(180deg, #fff6e2 0%, var(--paper) 60%); }
.mq-points { display: grid; gap: 12px; margin-top: 26px; }
.mq-points li { padding: 14px 16px; }
.mq-points b { display: block; font-family: var(--dot); font-weight: 400; font-size: 19px; color: var(--sunset); }
.mq-points span { display: block; font-size: 14px; line-height: 1.7; }

/* ---------- 4. 宮崎の冒険マップ ---------- */
.mq-mapsec { background: linear-gradient(180deg, #0f6f96 0%, #0b5a80 55%, #0b4f74 100%); color: #fff; }
.mq-mapsec .lead { color: #dff4ff; }
.mq-map-layout { display: grid; gap: 18px; margin-top: 28px; }
.mq-map-card { padding: 12px 12px 10px; color: var(--text); }
.mq-map-card .map-count b { color: var(--sunset); }
.mq-map { position: relative; margin-top: 8px; aspect-ratio: 2 / 3; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; background: #2a9fc8; }
.mq-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
.mq-map-label { position: absolute; z-index: 1; font-family: var(--dot); font-size: 11px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; }
.mq-sea { left: 84%; top: 56%; color: rgba(255, 255, 255, .85); writing-mode: vertical-rl; font-size: 14px; letter-spacing: .3em; }
.mq-pref { color: rgba(26, 16, 24, .45); transform: none; }
.mq-map-note { margin-top: 6px; font-size: 11px; color: var(--muted); }

.mq-pin {
  position: absolute; z-index: 2; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 0; background: none; border: 0; cursor: pointer; font: inherit;
  opacity: 0; transition: opacity .3s, transform .3s;
}
.mq-pin.is-lit { opacity: 1; }
.mq-pin-no {
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px;
  font-family: var(--dot); font-size: 14px; line-height: 1; color: #fff; background: var(--sunset);
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink);
}
.mq-pin::after { content: ''; width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.mq-pin-name {
  position: absolute; top: 50%; left: calc(100% + 3px); transform: translateY(-75%);
  font-family: var(--round); font-weight: 800; font-size: 11px; line-height: 1; white-space: nowrap;
  background: rgba(255, 250, 240, .95); color: var(--text); border: 2px solid var(--ink); border-radius: 4px; padding: 3px 4px;
}
.mq-pin.is-left .mq-pin-name { left: auto; right: calc(100% + 3px); }
.mq-pin.is-trial .mq-pin-no { background: var(--dusk-2); font-size: 11px; }
.mq-pin:hover .mq-pin-no, .mq-pin.is-active .mq-pin-no { background: var(--sun-2); color: var(--ink); }
.mq-pin:focus-visible { outline: 3px solid var(--sun-2); outline-offset: 2px; border-radius: 6px; }

.mq-route { display: grid; gap: 10px; counter-reset: none; }
.mq-stop {
  display: grid; grid-template-columns: 44px 56px 1fr; gap: 10px; align-items: center;
  background: var(--paper); color: var(--text); border: 3px solid var(--ink); border-radius: 10px; padding: 10px 12px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); transition: transform .2s, box-shadow .2s, background .2s;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.mq-stop.is-active { background: #fff3d6; transform: translateX(-2px); box-shadow: 5px 5px 0 var(--sun); }
.mq-stop-no {
  display: grid; place-items: center; height: 32px; font-family: var(--dot); font-size: 16px; color: #fff;
  background: var(--sunset); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink);
}
.mq-stop.is-start .mq-stop-no { background: var(--ink); color: var(--sun-2); font-size: 11px; }
.mq-stop.is-trial .mq-stop-no { background: var(--dusk-2); font-size: 13px; }
.mq-stop-boss { width: 56px; height: auto; }
.mq-stop h3 { font-family: var(--round); font-weight: 800; font-size: 16px; line-height: 1.4; }
.mq-stop-meta { font-family: var(--dot); font-size: 12px; color: var(--sea); line-height: 1.5; }
.mq-stop-body > p:last-child { font-size: 13px; line-height: 1.7; margin-top: 2px; }
.mq-gimmick { display: inline-block; margin-right: 6px; font-family: var(--dot); font-size: 11px; color: #fff; background: var(--tropical-2); padding: 0 5px; border-radius: 3px; vertical-align: 1px; }

.mq-endless {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin-top: 22px;
  background: linear-gradient(180deg, #3a2450, #24183a); color: #fff; border-color: var(--ink);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15), 4px 4px 0 var(--ink);
}
.mq-endless img { width: 56px; height: auto; }
.mq-endless-label { display: inline-block; font-family: var(--dot); font-size: 12px; color: var(--ink); background: var(--sun-2); padding: 0 6px; border-radius: 3px; }
.mq-endless h3 { margin-top: 4px; font-family: var(--dot); font-weight: 400; font-size: 21px; color: var(--sun-2); }
.mq-endless p:last-child { font-size: 14px; line-height: 1.75; color: #ece2f4; }

/* ---------- 5. ご当地（タブ） ---------- */
.mq-local { background: linear-gradient(180deg, #fff3d6 0%, var(--paper) 100%); }
.mq-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 26px; }
.mq-tabs button {
  min-height: 44px; font-family: var(--dot); font-size: 15px; color: var(--text); cursor: pointer;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--ink); padding: 4px 2px;
}
.mq-tabs button[aria-selected="true"] { background: var(--sunset); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.mq-panel { margin-top: 18px; }
.mq-panel[hidden] { display: none; }
.mq-panel-lead { font-weight: 700; font-size: 15px; }
.mq-panel-sub { margin-top: 22px; }
.mq-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.mq-cards li {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; align-items: center;
  background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 8px 10px; box-shadow: 3px 3px 0 var(--ink);
}
.mq-cards img { grid-row: span 2; width: 48px; height: auto; }
.mq-cards b { font-size: 14px; line-height: 1.35; font-weight: 800; }
.mq-cards span { font-size: 12px; line-height: 1.55; color: var(--muted); }
.mq-cards em { display: inline-block; margin-top: 3px; font-style: normal; font-family: var(--dot); font-size: 11px; color: #fff; background: var(--sunset); padding: 0 5px; border-radius: 3px; }
.mq-cards li.is-pick { background: #fff3d6; }
.mq-cards-sm { grid-template-columns: repeat(3, 1fr); }
.mq-cards-sm li { grid-template-columns: 1fr; text-align: center; padding: 8px 4px; }
.mq-cards-sm img { grid-row: auto; margin: 0 auto 2px; width: 44px; }
.mq-cards-sm b { font-size: 11px; }
.mq-cards-item { grid-template-columns: 1fr 1fr; }
.mq-cards-item li { grid-template-columns: 36px 1fr; padding: 8px; }
.mq-cards-item img { width: 36px; }
.mq-boss-list { margin-top: 12px; grid-template-columns: repeat(3, 1fr); }
.mq-boss-list span { background: var(--sunset); }

/* ---------- 6. 頂上の絶景（夕焼け） ---------- */
.mq-vistas { background: linear-gradient(180deg, #3a2450 0%, #8a3f5a 45%, #f0782a 100%); color: #fff; }
.mq-vistas .lead { color: #ffe9d6; }
.mq-vistas .vista-rail { margin-top: 28px; }
.mq-vistas .vista-rail img { box-shadow: 4px 4px 0 rgba(26, 16, 24, .45); }
.mq-vistas .rail-note { color: #fff3e6; }

/* ---------- 7. もっと遊ぶ ---------- */
.mq-more { display: grid; gap: 14px; margin-top: 18px; }
.mq-more li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; }
.mq-more li > img { width: 96px; height: 96px; object-fit: cover; border: 3px solid var(--ink); border-radius: 8px; background: #2a2228; }
.mq-more li > img.mq-more-ico { object-fit: contain; padding: 14px; background: #fff3d6; }
.mq-more h4 { font-family: var(--dot); font-weight: 400; font-size: 19px; color: var(--sunset); }
.mq-more p { font-size: 14px; line-height: 1.75; }

/* ---------- 8. LINE 特典 ---------- */
.benefit.is-limited { background: #fffbe6; }
.benefit.is-limited h3 { color: var(--sunset); }
.mq-benefit-note { margin-top: 14px; font-size: 12px; color: var(--muted); }

/* ---------- 9. PRE SEASON ／ 10. 日本クエストへ ---------- */
.mq-origin { background: var(--paper); padding-bottom: 32px; }
.mq-origin-card, .mq-japan-card { display: grid; gap: 14px; padding: 14px; }
.mq-origin-card > img, .mq-japan-card > img { width: 100%; aspect-ratio: 192 / 120; border: 3px solid var(--ink); border-radius: 8px; }
.mq-origin-card p, .mq-japan-card p { font-size: 14px; line-height: 1.85; }
.mq-origin-card p + p, .mq-japan-card p + p { margin-top: 8px; }
.mq-origin-quote { font-family: var(--round); font-weight: 800; font-size: 16px !important; color: var(--tropical-2); }
.mq-origin-small { font-size: 12px !important; color: var(--muted); }
.mq-japan { background: linear-gradient(180deg, var(--paper) 0%, #dff0ff 100%); padding-top: 32px; }
.mq-japan .sec-label { color: var(--sea); }
.mq-japan .sec-label::before { color: #d83a2a; }
.mq-japan-btn { margin-top: 14px; width: 100%; }

/* ---------- 12. 最後の CTA（夕焼け） ---------- */
.mq .final { background: linear-gradient(180deg, #ffe2b8 0%, #ffc58a 100%); }
.final-party { margin: 0 0 8px; }
.final-party img { width: 56px; }

/* ---------- 13. PARTNER（夜の海） ---------- */
.mq .partner { background: linear-gradient(180deg, var(--sea-deep) 0%, #10314e 100%); }
.mq-partner-case { margin-top: 18px; font-size: 13px; color: #dbe9f4; }
.mq-partner-case b { display: inline-block; margin-right: 8px; font-family: var(--dot); font-weight: 400; font-size: 12px; color: var(--ink); background: var(--sun-2); padding: 0 6px; border-radius: 3px; }

/* ---------- タブレット・PC ---------- */
@media (min-width: 720px) {
  .mq-points { grid-template-columns: repeat(3, 1fr); }
  .mq-map-layout { grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; gap: 24px; }
  .mq-map-card { position: sticky; top: calc(var(--header-h) + 16px); }
  .mq-cards { grid-template-columns: repeat(3, 1fr); }
  .mq-cards-sm { grid-template-columns: repeat(7, 1fr); }
  .mq-boss-list { grid-template-columns: repeat(7, 1fr); }
  .mq-tabs { max-width: 560px; }
  .mq-more { grid-template-columns: repeat(3, 1fr); }
  .mq-more li { grid-template-columns: 1fr; align-items: start; }
  .mq-more li > img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .mq-more li > img.mq-more-ico { padding: 32%; }
  .mq-origin-card, .mq-japan-card { grid-template-columns: 300px 1fr; align-items: center; gap: 24px; }
  .mq-japan-btn { width: auto; }
  .final-party img { width: 72px; }
}
@media (min-width: 960px) {
  .mq .gnav a { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-pin { opacity: 1; }
}