@import url('https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&display=swap');

:root {
  --page-bg: #050303;
  --paper-text: #160c06;
  --gold: #d6a83c;
  --gold-light: #f6d783;
  --purple: #190d22;
}

* { box-sizing: border-box; }

html { background: var(--page-bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: #fff7e6;
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 20, 20, .42), transparent 32rem),
    linear-gradient(180deg, #070303 0%, #020101 100%);
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

button,
input,
textarea,
select {
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font: inherit;
}

.koreda-shell {
  width: min(640px, 100%);
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 clamp(18px, 4vw, 36px);
}

.koreda-shell-question {
  padding-top: clamp(6px, 1.6vw, 16px);
}

.koreda-img,
.koreda-board-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.koreda-about,
.koreda-board {
  margin-top: -6%;
}

.koreda-board {
  position: relative;
  overflow: hidden;
}

.koreda-board-content {
  position: absolute;
  inset: 0;
}

/* Qラベル */
.koreda-q-label {
  position: absolute;
  top: 4.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  text-align: center;
  color: #f0dca8;
  text-shadow:
    0 2px 0 rgba(0,0,0,.95),
    0 0 12px rgba(148, 69, 215, .55);
  font-size: clamp(1.45rem, 4.6vw, 2.05rem);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

/* 質問文：中央の装飾線に被らない位置 */
.koreda-question-text {
  position: absolute;
  top: 15.0%;
  left: 8%;
  right: 8%;
  margin: 0;
  color: var(--paper-text);
  text-align: center;
  font-size: clamp(1rem, 4.5vw, 1.8rem);
  line-height: 1.34;
  letter-spacing: .03em;
  font-weight: 900;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  font-weight: 500;
}

/* 選択肢エリア：添付の質問ボードに合わせ、線のすぐ下から開始 */
.koreda-choices {
  position: absolute;
  top: 25.8%;
  left: 9.6%;
  right: 9.6%;
  display: grid;
  gap: clamp(10px, 2.2vw, 17px);
  margin: 0;
}

/* 選択肢ボタン：画像比率 1080:184 を潰さない */
.koreda-choice-btn {
  appearance: none;
  border: 0;
  width: 100%;
  height: clamp(50px, 13.6vw, 87px);
  min-height: 0;
  padding: 0 8.5%;
  color: #f7f2eb;
  background: url("koredaButton.webp") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-size: clamp(1.05rem, 3.35vw, 1.48rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.9),
    0 0 12px rgba(0,0,0,.9);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.45));
  opacity: 0;
  transform: translateY(-16px);
  animation: koredaChoiceIn .5s cubic-bezier(.2, .85, .2, 1.12) forwards;
  animation-delay: var(--delay, 80ms);
  transition: transform .14s ease, filter .14s ease;
}

.koreda-choice-btn:hover,
.koreda-choice-btn:focus-visible {
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.62)) brightness(1.1);
  outline: none;
}

.koreda-choice-btn:active {
  transform: translateY(1px) scale(.995);
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.5)) brightness(.96);
}

.koreda-restart {
  margin: 14px 0 0;
  text-align: center;
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: .9rem;
}

.koreda-restart a {
  color: var(--gold-light);
  text-decoration: none;
  font-weight: 800;
}

@keyframes koredaChoiceIn {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

/*@media (prefers-reduced-motion: reduce) {
  .koreda-choice-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .koreda-choice-btn:hover,
  .koreda-choice-btn:focus-visible,
  .koreda-choice-btn:active {
    transform: none;
  }
}*/

/* スマホ調整 */
@media (max-width: 520px) {
  .koreda-shell { width: 100%; }

  .koreda-q-label {
    top: 4.05%;
    font-size: clamp(1.28rem, 6.2vw, 1.75rem);
  }

  .koreda-question-text {
    top: 14.9%;
    left: 7.8%;
    right: 7.8%;
    font-size: clamp(.92rem, 4.8vw, 2rem);
    line-height: 1.34;
  }

  .koreda-choices {
    top: 26.0%;
    left: 9.4%;
    right: 9.4%;
    gap: clamp(8px, 2.4vw, 12px);
  }

  .koreda-choice-btn {
    height: clamp(44px, 13.6vw, 70px);
    padding: 0 8%;
    font-size: clamp(.92rem, 4.1vw, 1.18rem);
  }
}

@media (max-width: 380px) {
  .koreda-question-text {
    top: 16.7%;
    font-size: clamp(.82rem, 4vw, 1rem);
  }

  .koreda-choices {
    top: 26.2%;
    gap: 7px;
  }

  .koreda-choice-btn {
    height: clamp(39px, 13.6vw, 52px);
    font-size: clamp(.8rem, 3.9vw, .98rem);
  }
}

/* Existing result page styles */
:root {
  --bg: #17120f;
  --card: #241b16;
  --card2: #2d221b;
  --text: #fff6e8;
  --muted: #cdbda8;
  --accent: #ffb23f;
  --accent2: #ffdf9e;
  --danger: #e96f44;
  --line: rgba(255,255,255,.12);
}

body:not(.koreda-page) {
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(255,178,63,.18), transparent 34rem),
    linear-gradient(180deg, #17120f 0%, #100d0b 100%);
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-height: 1.75;
}

body:not(.koreda-page) a { color: inherit; }

.wrap {
  width: min(920px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid rgba(255,178,63,.45);
  border-radius: 999px;
  color: var(--accent2);
  background: rgba(255,178,63,.12);
  font-weight: 700;
  font-size: .82rem;
}

.card {
  margin: 16px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), var(--card);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.result-hero { text-align: center; }

.result-hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.lead {
  color: var(--muted);
  margin: 0 auto;
  max-width: 680px;
  font-size: 1.02rem;
}

.card h2 {
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 5.4vw, 2.2rem);
  line-height: 1.25;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.product-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}

.product-role {
  color: var(--accent);
  font-size: .86rem;
  font-weight: 900;
}

.product-card h3 {
  margin: 6px 0 8px;
  line-height: 1.35;
}

.product-card p {
  color: var(--muted);
  margin: 0 0 12px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.links a {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,178,63,.13);
  border: 1px solid rgba(255,178,63,.26);
  color: var(--accent2);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
}

.note {
  color: var(--muted);
  font-size: .88rem;
  margin-top: 16px;
}

.muted-card { background: rgba(255,255,255,.04); }

.answer-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
}

.actions { text-align: center; }

.primary-link {
  display: inline-flex;
  justify-content: center;
  margin-top: 18px;
  padding: 13px 18px;
  border-radius: 999px;
  color: #1b1208;
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(255,178,63,.18);
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 640px) {
  .wrap {
    width: min(100% - 22px, 920px);
    padding-top: 16px;
  }

  .card {
    padding: 18px;
    border-radius: 18px;
  }

  .product-grid { grid-template-columns: 1fr; }
}


/* ==============================
   Web font: Kaisei HarunoUmi
   魔界家族 全体フォント統一
============================== */
body,
button,
input,
textarea,
select,
.koreda-q-label,
.koreda-question-text,
.koreda-choice-btn,
.koreda-restart,
.wrap,
.card,
.product-card,
.primary-link {
  font-family: "Kaisei HarunoUmi", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.koreda-q-label,
.koreda-choice-btn,
.koreda-question-text {
  font-weight: 700;
}
/* ==============================
   Result page v4
   result.php 専用。index / answer の既存デザインに影響しないよう
   body.koreda-result-page 配下だけで上書きする。
============================== */
body.koreda-result-page {
  color: #241005;
  background:
    radial-gradient(circle at 50% 0%, rgba(89, 28, 18, .42), transparent 34rem),
    linear-gradient(180deg, #050303 0%, #010101 100%);
  line-height: 1.65;
  overflow-x: hidden;
}

.koreda-result-page a { color: inherit; }

.koreda-result-shell {
  width: min(640px, 100%);
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 18px) 0 clamp(28px, 6vw, 48px);
}

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

.kr-hero,
.kr-advice,
.kr-products,
.kr-not-now {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.kr-hero img,
.kr-advice > img,
.kr-products > img,
.kr-not-now > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.kr-advice {
  margin-top: -8%;
}

.kr-products {
  margin-top: -11%;
}

.kr-not-now {
  margin-top: -6%;
}

.kr-advice p,
.kr-product h3,
.kr-product p {
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
}

/* アドバイスボード内テキスト */
.kr-advice p {
  position: absolute;
  left: 33.6%;
  right: 7.4%;
  top: 27.8%;
  margin: 0;
  color: #210f06;
  font-size: clamp(.78rem, 2.82vw, 1.06rem);
  line-height: 1.36;
  font-weight: 700;
  letter-spacing: .035em;
}

.kr-product {
  position: absolute;
  margin: 0;
  color: #1d0e06;
}

.kr-product h3 {
  margin: 0 0 .32em;
  color: #2a1206;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.28;
}

.kr-product p {
  margin: 0;
  color: #1f0f07;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.42;
}

/* 1位 */
.kr-product-main {
  left: 22.6%;
  right: 11.2%;
  top: 15.6%;
}

.kr-product-main h3 {
  font-size: clamp(1.08rem, 4.05vw, 1.62rem);
  text-align: center;
  margin-bottom: .34em;
}

.kr-product-main p {
  font-size: clamp(.76rem, 2.92vw, 1.08rem);
}

/* 2位・3位 */
.kr-product-second,
.kr-product-third {
  left: 17.8%;
  right: 38.8%;
}

.kr-product-second { top: 53.4%; }
.kr-product-third { top: 78.2%; }

.kr-product-second h3,
.kr-product-third h3 {
  font-size: clamp(.78rem, 2.86vw, 1.05rem);
  text-align: center;
  margin-bottom: .24em;
}

.kr-product-second p,
.kr-product-third p {
  font-size: clamp(.58rem, 2.12vw, .80rem);
  line-height: 1.30;
}

/* 今じゃない */
.kr-product-no {
  left: 37.5%;
  right: 8.8%;
  top: 30.5%;
}

.kr-product-no h3 {
  text-align: center;
  font-size: clamp(.84rem, 3.12vw, 1.5rem);
  margin-bottom: .25em;
}

.kr-product-no p {
  font-size: clamp(.60rem, 2.18vw, .82rem);
  line-height: 1.30;
}

.kr-no-note {
  margin-top: .22em !important;
}

/* モールボタン：画像文字入り。ロゴ不使用の自前ボタン画像を使う */
.kr-mall-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(4px, 1vw, 7px);
  margin-top: clamp(7px, 1.8vw, 13px);
}

.kr-mall-btn {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 191;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-decoration: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.40));
  transition: transform .14s ease, filter .14s ease;
}

.kr-mall-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.kr-mall-rakuten { background-image: url("koredaResultRakuten.webp"); }
.kr-mall-yahoo { background-image: url("koredaResultYahoo.webp"); }
.kr-mall-amazon { background-image: url("koredaResultAmazon.webp"); }

.kr-mall-btn:hover,
.kr-mall-btn:focus-visible {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.52)) brightness(1.07);
  outline: none;
}

.kr-mall-btn:active {
  transform: translateY(1px) scale(.99);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) brightness(.96);
}

.kr-product-main .kr-mall-links {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.kr-product-second .kr-mall-links,
.kr-product-third .kr-mall-links,
.kr-product-no .kr-mall-links {
  width: 112%;
  margin-left: -6%;
  margin-right: -6%;
  gap: clamp(3px, .75vw, 5px);
  margin-top: clamp(5px, .95vw, 7px);
}

.kr-product-second .kr-mall-btn,
.kr-product-third .kr-mall-btn,
.kr-product-no .kr-mall-btn {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.38));
}


.kr-unresolved {
  width: calc(100% - 36px);
  margin: clamp(10px, 2.6vw, 18px) auto 0;
  padding: clamp(18px, 4.5vw, 28px);
  border: 1px solid rgba(216,168,60,.45);
  border-radius: 18px;
  color: #f6dda1;
  background: linear-gradient(180deg, rgba(74,35,16,.96), rgba(18,8,5,.98));
  box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
}

.kr-unresolved h2 {
  margin: 0 0 .6em;
  font-size: clamp(1.12rem, 4.4vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: .05em;
}

.kr-unresolved p {
  margin: 0;
  color: #fff1c8;
  font-weight: 800;
  line-height: 1.7;
}

.kr-unresolved-sub {
  margin-top: .85em !important;
  color: rgba(255, 236, 194, .62) !important;
  font-size: .78rem;
  font-weight: 600 !important;
}

.kr-system-note {
  width: calc(100% - 36px);
  margin: 8px auto 0;
  color: rgba(255, 236, 194, .74);
  font-size: .78rem;
  line-height: 1.55;
}

.kr-actions {
  text-align: center;
  margin: clamp(14px, 4vw, 28px) 0 0;
}

.kr-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .72em 1.35em;
  border: 1px solid rgba(216,168,60,.62);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74,35,16,.96), rgba(25,10,6,.96));
  color: #f6dda1;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
}

@media (max-width: 520px) {
  .kr-advice p {
    left: 31.2%;
    right: 8.6%;
    top: 28.7%;
    font-size: clamp(.66rem, 3.05vw, .90rem);
    line-height: 1.32;
  }

  .kr-product-main {
    left: 22.9%;
    right: 11.4%;
    top: 15.5%;
  }

  .kr-product-main h3 {
    font-size: clamp(1.02rem, 4.45vw, 1.4rem);
  }

  .kr-product-main p {
    font-size: clamp(.66rem, 2.94vw, .92rem);
    line-height: 1.32;
  }

  .kr-product-second,
  .kr-product-third {
    left: 18.5%;
    right: 39.4%;
  }

  .kr-product-second h3,
  .kr-product-third h3 {
    font-size: clamp(.70rem, 3.1vw, .95rem);
  }

  .kr-product-second p,
  .kr-product-third p {
    font-size: clamp(.50rem, 2.28vw, .68rem);
    line-height: 1.24;
  }

  .kr-product-no h3 {
    font-size: clamp(.76rem, 3.5vw, 1rem);
  }

  .kr-product-no p {
    font-size: clamp(.50rem, 2.25vw, .68rem);
    line-height: 1.24;
  }
}

@media (max-width: 390px) {
  .kr-advice p {
    font-size: clamp(.65rem, 3.35vw, .82rem);
    line-height: 1.38;
  }

  .kr-product-main p {
    font-size: clamp(.66rem, 3.15vw, .85rem);
    line-height: 1.42;
  }

  .kr-product-second p,
  .kr-product-third p,
  .kr-product-no p {
    line-height: 1.34;
  }

  .kr-product-main .kr-mall-links {
    width: 100%;
  }
}


/* ==============================
   result.php 微調整 v2
   - 吹き出し内の文字収まり優先
   - アフィリエイトボタンを少し大きめに調整
   resultページ限定の上書き
============================== */
body.koreda-result-page .kr-advice p {
  right: 7.2%;
  font-size: clamp(.78rem, 2.82vw, 1.06rem);
  line-height: 1.34;
}
body.koreda-result-page .kr-product p {
  line-height: 1.34;
}
body.koreda-result-page .kr-product-main p {
  font-size: clamp(.75rem, 2.9vw, 1.06rem);
  line-height: 1.34;
}
body.koreda-result-page .kr-product-second p,
body.koreda-result-page .kr-product-third p {
  font-size: clamp(.57rem, 2.08vw, .78rem);
  line-height: 1.24;
}
body.koreda-result-page .kr-product-no p {
  font-size: clamp(.58rem, 2.12vw, .90rem);
  line-height: 1.25;
}
body.koreda-result-page .kr-product-second .kr-mall-links {
  width: 117%;
  margin-left: -18%;
  margin-right: -9%;
	position: absolute;
	bottom:-150%;
}
body.koreda-result-page .kr-product-third .kr-mall-links {
  width: 117%;
  margin-left: -18%;
  margin-right: -9%;
	position: absolute;
	bottom:-150%;
}
body.koreda-result-page .kr-product-no .kr-mall-links {
  width: 100%;
  margin-left: -2%;
  margin-right: -9%;
	position: absolute;
	bottom:-37%;
}
body.koreda-result-page .kr-mall-btn {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.48));
}
@media (max-width: 520px) {
  body.koreda-result-page .kr-advice p {
    font-size: clamp(.64rem, 2.95vw, .86rem);
    line-height: 1.28;
  }
  body.koreda-result-page .kr-product-main p {
    font-size: clamp(.64rem, 2.82vw, .88rem);
    line-height: 1.28;
  }
  body.koreda-result-page .kr-product-second .kr-mall-links,
  body.koreda-result-page .kr-product-third .kr-mall-links,
  body.koreda-result-page .kr-product-no .kr-mall-links {
    width: 122%;
    margin-left: -11%;
    margin-right: -11%;
  }
}
@media (max-width: 390px) {
  body.koreda-result-page .kr-advice p,
  body.koreda-result-page .kr-product-main p,
  body.koreda-result-page .kr-product-second p,
  body.koreda-result-page .kr-product-third p,
  body.koreda-result-page .kr-product-no p {
    line-height: 1.22;
  }
}

/* ==============================
   result.php 文字密度・下寄せ調整 v4
   参考画像の各ボックス内文字数に寄せる最終上書き
   - アドバイス：約20文字/行
   - 本命：約17文字/行
   - 2位・3位：約17文字/行
   - 今じゃない：約22文字/行
   - ボタンは行数に関わらず各枠の下寄せ
============================== */
body.koreda-result-page {
  line-height: 1.45;
}

body.koreda-result-page .kr-advice p,
body.koreda-result-page .kr-product h3,
body.koreda-result-page .kr-product p {
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  text-wrap: auto;
}

/* アドバイス欄：幅を少し絞り、文字を上げて約20文字/行へ */
body.koreda-result-page .kr-advice p {
  left: 34.8%;
  right: 8.2%;
  top: 28.0%;
  font-size: clamp(15px, 3.02vw, 20.4px);
  line-height: 1.2;
  letter-spacing: .025em;
  font-weight: 800;
}

/* 商品枠共通：ボタン下寄せ用 */
body.koreda-result-page .kr-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

body.koreda-result-page .kr-product h3 {
  flex: 0 0 auto;
  line-height: 1.18;
  letter-spacing: .04em;
}

body.koreda-result-page .kr-product p {
  flex: 0 0 auto;
  line-height: 1.24;
  letter-spacing: .018em;
}

body.koreda-result-page .kr-mall-links {
  flex: 0 0 auto;
  margin-top: auto !important;
  position: static !important;
  bottom: auto !important;
}

/* 本命：本文17文字程度。タイトルは本文よりかなり大きめ */
body.koreda-result-page .kr-product-main {
  left: 24.0%;
  right: 10.4%;
  top: 15.3%;
  height: 27.8%;
}

body.koreda-result-page .kr-product-main h3 {
  font-size: clamp(25px, 4.9vw, 31px);
  margin-bottom: .35em;
  text-align: center;
}

body.koreda-result-page .kr-product-main p {
  font-size: clamp(19px, 3.72vw, 23.6px);
  line-height: 1.27;
  font-weight: 900;
}

body.koreda-result-page .kr-product-main .kr-mall-links {
  width: 118%;
  margin-left: -20%;
  margin-right: auto;
  gap: clamp(7px, 1.25vw, 9px);
}

/* 2位・3位：本文17文字程度。タイトルは本文より大きく */
body.koreda-result-page .kr-product-second,
body.koreda-result-page .kr-product-third {
  left: 18.4%;
  right: 36.4%;
  height: 16.5%;
}

body.koreda-result-page .kr-product-second { top: 52.1%; }
body.koreda-result-page .kr-product-third { top: 77.2%; }

body.koreda-result-page .kr-product-second h3,
body.koreda-result-page .kr-product-third h3 {
  font-size: clamp(17px, 3.25vw, 20.4px);
  line-height: 1.18;
  margin-bottom: .23em;
  text-align: center;
}

body.koreda-result-page .kr-product-second p,
body.koreda-result-page .kr-product-third p {
  font-size: clamp(13.8px, 2.55vw, 16.4px);
  line-height: 1.22;
  font-weight: 800;
}

body.koreda-result-page .kr-product-second .kr-mall-links,
body.koreda-result-page .kr-product-third .kr-mall-links {
  width: 117%;
  margin-left: -19%;
  margin-right: auto;
  gap: clamp(4px, .8vw, 6px);
}

/* 今じゃない：本文22文字程度。タイトルは本文より大きく */
body.koreda-result-page .kr-product-no {
  left: 36.8%;
  right: 9.8%;
  top: 29.0%;
  height: 50.5%;
}

body.koreda-result-page .kr-product-no h3 {
  font-size: clamp(18px, 3.45vw, 22px);
  line-height: 1.18;
  margin-bottom: .25em;
  text-align: center;
}

body.koreda-result-page .kr-product-no p {
  font-size: clamp(12.7px, 2.45vw, 15.5px);
  line-height: 1.22;
  font-weight: 800;
}

body.koreda-result-page .kr-product-no .kr-mall-links {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  gap: clamp(4px, .8vw, 6px);
}

body.koreda-result-page .kr-no-note {
  margin-top: .15em !important;
}

@media (max-width: 520px) {
  body.koreda-result-page .kr-advice p {
    left: 34.2%;
    right: 8.4%;
    top: 28.2%;
    font-size: clamp(11.7px, 3.10vw, 15.6px);
    line-height: 1.22;
  }

  body.koreda-result-page .kr-product-main h3 {
    font-size: clamp(19.5px, 5.05vw, 25px);
  }
  body.koreda-result-page .kr-product-main p {
    font-size: clamp(15px, 3.80vw, 19px);
    line-height: 1.23;
  }

  body.koreda-result-page .kr-product-second h3,
  body.koreda-result-page .kr-product-third h3 {
    font-size: clamp(13.6px, 3.35vw, 17px);
  }
  body.koreda-result-page .kr-product-second p,
  body.koreda-result-page .kr-product-third p {
    font-size: clamp(10.9px, 2.62vw, 13.8px);
    line-height: 1.18;
  }

  body.koreda-result-page .kr-product-no h3 {
    font-size: clamp(14.2px, 3.55vw, 18px);
  }
  body.koreda-result-page .kr-product-no p {
    font-size: clamp(10.1px, 2.52vw, 12.7px);
    line-height: 1.08;
  }

  body.koreda-result-page .kr-product-main .kr-mall-links {
    width: 117%;
    gap: 5px;
  }
  body.koreda-result-page .kr-product-second .kr-mall-links,
  body.koreda-result-page .kr-product-third .kr-mall-links {
    width: 113%;
    gap: 3px;
  }
  body.koreda-result-page .kr-product-no .kr-mall-links {
    width: 94%;
    gap: 3px;
  }
}

@media (max-width: 390px) {
  body.koreda-result-page .kr-advice p {
    font-size: clamp(11px, 3.16vw, 12.4px);
    line-height: 1.4;
  }
  body.koreda-result-page .kr-product-main p,
  body.koreda-result-page .kr-product-second p,
  body.koreda-result-page .kr-product-third p,
  body.koreda-result-page .kr-product-no p {
    line-height: 1.16;
  }
}


/* ==============================
   result.php Android表示安定化 v5
   - Android Chromeの自動文字拡大を抑制
   - 画像ボタン内の隠しテキスト位置を安定化
============================== */
body.koreda-result-page {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.koreda-result-page .kr-advice p,
body.koreda-result-page .kr-product h3,
body.koreda-result-page .kr-product p {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
	margin-bottom: 5px;
}

body.koreda-result-page .kr-mall-btn {
  position: relative;
}

/* ==============================
   Q5送信後ローディング v10.2
   - Q5タップ後、result.php が返るまで表示
   - 表示するのは assets/koredaLoading.webp の画像のみ
   - 文字・枠・ボックス背景は出さない
============================== */
.koreda-loading-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 1, 1, .68);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.koreda-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.koreda-loading-core {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: koredaLoadingImageBreath 1.45s ease-in-out infinite;
  will-change: opacity, transform, filter;
}

.koreda-loading-image {
  display: block;
  width: min(320px, 50vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.55));
}

@keyframes koredaLoadingImageBreath {
  0%, 100% {
    opacity: .38;
    transform: scale(.985);
    filter: brightness(.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
    filter: brightness(1.18);
  }
}

/* Q5送信時、submitボタンをdisabledにせず連打だけ防ぐ */
.koreda-choices.is-submitting {
  pointer-events: none;
}


.kr-share {
  text-align: center;
  margin: clamp(18px, 4vw, 28px) 0 0;
}

.kr-share-btn {
  display: inline-block;
  width: min(100%, 560px);
  text-decoration: none;
  line-height: 0;
}

.kr-share-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* 魔界家族トップへボタン */
.mkz-bottom-nav {
  width: 100%;
  text-align: center;
  margin: 60px auto 24px;
}

.mkz-top-link {
  display: inline-block;
  line-height: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.mkz-top-link img {
  width: 220px !important;
  max-width: 40vw !important;
  height: auto;
  display: block;
}

.mkz-top-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.mkz-top-link:active {
  transform: translateY(1px) scale(0.98);
}

/* スマホ微調整 */
@media (max-width: 640px) {
  .mkz-bottom-nav {
    margin: 40px auto 20px;
  }

  .mkz-top-link img {
    width: 40vw;
    min-width: 140px;
    max-width: 190px;
  }
}


/* Adsence */
.admon-ad-block {
  width: 100%;
  max-width: 400px;
  margin: 32px auto;
  box-sizing: border-box;
	display: none; /*審査待ち*/
}

.admon-frame {
  width: 100%;
  box-sizing: border-box;
}

/* 01：アドマモン＋上枠 */
.admon-frame-top {
  width: 100%;
  aspect-ratio: 640 / 184;
  background-image: url("adframe-01.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

/* 02：縦に伸びる中央 */
.admon-frame-middle {
  width: 100%;
  min-height: 100px;
  background-image: url("adframe-02.webp");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  box-sizing: border-box;

  /*
    640px幅時：
    左右枠＋余白を避けて、広告エリアを中央320px前後にする
  */
  padding: 0px 12% 0px 14%;
}

/* 広告本体を中央に置く */
.admon-adsense-box {
  width: 100%;
  max-width: 320px;
  min-height: 250px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* AdSense本体 */
.admon-adsense-box .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 250px;
}

/* 03：下枠 */
.admon-frame-bottom {
  width: 100%;
  aspect-ratio: 640 / 58;
  background-image: url("adframe-03.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}