/* 診断ページ（index.html）と結果ページ（result/n1〜n8.html）共通のスタイル
   ※画像は ../img/ で指定（このCSSファイルの場所が基準のため） */
  :root {
    --cream: #FFF5E6;
    --warm-white: #FFFFFF;
    --charcoal: #2C2C2C;
    --soft-charcoal: #4A4A4A;
    --accent-orange: #FF6B6B;
    --accent-yellow: #FFE66D;
    --accent-green: #4DD6A0;
    --accent-blue: #4FC3F7;
    --accent-lavender: #CE93D8;
    --light-peach: #FFE0E0;
    --light-yellow: #FFFDE7;
    --light-green: #E0FFF3;
    --light-blue: #E0F7FF;
    --light-lavender: #F3E5F5;
    --border: #FFD0C8;
    --shadow: rgba(255,107,107,0.14);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    background: #fbf5da url(../img/pattern.jpg) repeat;
    background-size: 20px 20px;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  body {
    height: 100vh;
    height: 100svh;
    font-family: "Zen Maru Gothic", sans-serif;
    background-size: 28px 28px;
    max-width: 375px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }

  html {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar {
    display: none;
  }

  body {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body::-webkit-scrollbar {
    display: none;
  }


  button {
    background: none; border: none; outline: none; -webkit-appearance: none; appearance: none;
  }

  .displaynone {
    display: none;
  }

  /* ========== INTRO ========== */
  #intro {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    bottom: calc(0px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .intro-bg { background-image: url(../img/sh_top.png); position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%;}
  .intro-bg::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);
    top: -200px; right: -200px;
  }
  .intro-bg::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
    bottom: -100px; left: -100px;
  }
  .intro-logo {
    display: block; width: 82%; max-width: 320px;
    margin: 0 auto 28px; position: relative; z-index: 1;
  }
  .intro-sub {
    font-size: 15px; color: rgba(28,72,20,0.88);
    text-align: center; line-height: 1.7;
    margin-bottom: 40px; position: relative; z-index: 1; max-width: 380px;
  }
  .intro-meta { display: flex; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
  .intro-badge {
    background: rgba(255,255,255,0.40);
    border: 2px solid rgba(255,255,255,0.70);
    border-radius: 20px; padding: 8px 16px;
    font-size: 13px; color: #1E5C14; font-weight: 700;
  }
  .start-btn {
    background: none; border: none; outline: none;
    -webkit-appearance: none; appearance: none;
    padding: 0; cursor: pointer;
    display: block; width: 70%;
    position: absolute; bottom: 4.3%; left: 50%; transform: translateX(-50%);
    z-index: 1;
  }
  .start-btn:hover {
    transform: translateY(-2px);
  }

  .top-loop {
    width: 100%;
    height: 140px;
    position: absolute; bottom: 18%;
    background-image: url(../img/top-loop.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 0;
    animation: loop-bg 60s linear infinite;
    z-index: 1;
  }
  @keyframes loop-bg {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -1000px 0;
    }
  }

  .start-btn img { width: 100%; display: block; }
  .start-btn:hover { transform: translateX(-50%) scale(1.06); transition: transform 0.2s ease; }

  /* top_bg_r1.png と同じ contain サイズのフレーム (1500x2666) */
  /* width/height は resizeIntroFrame() で動的に設定 */
  .intro-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ========== QUIZ ========== */
  #quiz {
    display: none; height: 100vh; height: -webkit-fill-available; height: 100svh;
    padding: 0; flex-direction: column;
  }
  .quiz-header {
    background: white; padding: 12px 24px;
    flex-shrink: 0; z-index: 100;
  }
  .progress-label {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
  }
  .progress-text { font-family: "M PLUS Rounded 1c", sans-serif; font-size: 16px; color: var(--soft-charcoal); font-weight: 800; }
  .progress-bar { height: 8px; background: #eee; border-radius: 10px; overflow: hidden; }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#ffacc9,#ff65c9);
    border-radius: 10px; transition: width 0.4s ease; width: 0%;
  }
  .quiz-body {
    background:url(../img/sh_sq_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    transition: background 0.4s ease;
    flex: 1;
    padding: 24px;
    padding-right: 20px;
    max-width: 540px; margin: 0 auto; width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center; /* 入りきらない時は上詰め（上側が切れて見えなくなるのを防止） */
  }
  .quiz-body::-webkit-scrollbar {
    display: none;
  }
  .quiz-body.is-special {
    background: url(../img/sh_q15_bg.png);
  }
  .quiz-loop {
    display: none;
    height: 90px;
    background-image: url(../img/top-loop.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 0;
    animation: loop-bg 60s linear infinite;
    /* .card-stack（カード）基準で配置。レイアウトの高さに影響させない（スクロール防止）
       上下位置は bottom で調整（数字を増やすと上へ）。left/right は .quiz-body の左右パディング分はみ出して端まで表示 */
    position: absolute;
    left: -24px;
    right: -20px;
    bottom: 22px;
    z-index: 2;
    pointer-events: none; /* ボタン操作の邪魔をしない */
  }
  .quiz-body.is-special .quiz-loop {
    display: block;
  }
  /* quiz-loop 表示中（連携力の質問）は質問画像を非表示 */
  .question-card.is-special .question-img {
    display: none;
  }

  /* Question card */
  .card-stack {
    position: relative; margin-bottom: 16px;
    /* カードの高さ：基本540px。画面が低い時は残りの高さに合わせて縮む（中身の高さより小さくはならない）
       最大の高さを変える場合は flex の 540px を変更 */
    flex: 0 1 540px;
    display: flex; flex-direction: column;
  }
  .question-card {
    position: relative; /* .question-num の基準位置 */
    flex: 1 1 auto; /* 高さは .card-stack に合わせる（旧 min-height: 540px） */
    background: url(../img/sh_q_waku_r1.png);
    background-size: 100% 100%; /* 枠画像を常にカード全体に収める（見切れ防止） */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    padding: 0 32px 12px 28px;
    animation: slideIn 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .question-card.is-special {
    padding-bottom: 105px;
  }
  /* .question-card.is-special .question-num {
    background: #2A9E70;
  }
  .question-card.is-special .question-category {
    background: #DAFAEF; color: #1A6040;
  }
  .question-card.is-special .question-text {
    color: #1A4030;
  }
  .question-card.is-special .slider-wrap {
    border-top-color: #9BE8C8;
  } */
  .question-card.is-special .q-slider {
    background: linear-gradient(to right, #ccc 0%, #4DD6A0 100%);
  }
  .question-card.is-special .q-slider::-webkit-slider-thumb {
    border-color: #0024af;
  }
  .question-card.is-special .slider-value-badge.coop-badge {
    width: 140px;
    background: #ffffff; color: #0024af;
    font-size: 16px;
    padding: 8px;
    border-radius: 1000px;
    margin-top: 8px;
  }
  .question-card.is-special .pct-left  { background: #ffffff; border: 3px solid #ccc; color: #0024af; font-size: 14px; font-weight: 800; padding: 4px 12px; text-align: center; }
  .question-card.is-special .pct-right { background: #ffffff; border: 3px solid #ccc; color: #0024af; font-size: 14px; font-weight: 800; padding: 4px 12px; text-align: center; }
  @keyframes slideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .question-inner {
    display: flex; align-items: center; gap: 14px;
    justify-content: center;
    position: relative;
  }
  .question-img {
    /* 枠（.question-card）の右下に固定。はみ出してスクロールが出ないよう bottom 基準で配置。微調整は bottom / right で */
    position: absolute;
    width: 80px;
    bottom: 10px;
    right: -8px;
    z-index: 2;
  }
  .question-img img {
    display: block;
    width: 100%;
    height: auto;
  }
  .question-num {
    background: url(../img/sh_q_maru.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 74px; height: 74px; flex-shrink: 0; align-self: flex-start;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 8px 6px; gap: 2px;
    /* 枠（.question-card）の左上に固定。位置の微調整は top / left で */
    position: absolute;
    top: -12px; left: -10px;
    z-index: 2;
  }
  /* ロゴ：枠（.question-card）の右上に固定（.question-num と左右対称の位置・同じくらいの大きさ）
     位置の微調整は top / right、大きさは width で */
  .question-logo {
    position: absolute;
    top: -12px; right: -10px;
    width: 74px;
    z-index: 2;
    pointer-events: none;
  }
  .question-logo img { display: block; width: 100%; height: auto; }
  .question-num .q-digit {
    font-family: "Luckiest Guy", cursive;
    font-size: 40px; font-weight: 400; color: #0024af; line-height: 1;
    margin-top: 20px;
  }
  .question-textbox {
    height: 70px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .question-text {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 16px; font-weight: 800;
    line-height: 1.4; color: #0024af;
  }

  /* ========== SLIDER ========== */
  .slider-wrap {
    border-top: 1.5px dashed #FFD0C8;
    padding: 16px 0; margin-bottom: 0;
  }
  .slider-axis-labels {
    display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;
  }
  .slider-axis-label {
    font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    transition: font-size 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  }
  .slider-axis-label.self    { background: #fff; border: #cccccc 3px solid; color: #0024af; }
  .slider-axis-label.partner { background: #fff; border: #cccccc 3px solid; color: #0024af; }
  .slider-axis-label.pct-left  { background: #F5F5F5; color: #777; }
  .slider-axis-label.pct-right { background: #E8F5E9; color: #2E7D32; }
  /* ラベル画像（jibun / partner / madamada / kanpeki）
     すべて同じ高さで表示。高さは下の height で一括調整、幅は画像の比率に合わせて自動 */
  .question-card .slider-axis-labels .slider-axis-label {
    background: none; border: none; padding: 0; border-radius: 0;
    line-height: 0;
  }
  .slider-axis-label img {
    display: block;
    height: 40px;
    width: auto;
  }

  input[type="range"].q-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 24px; border-radius: 100px; outline: none; cursor: pointer;
    border: 3px solid #0024af;
    background: linear-gradient(to right, #ffacc9 0%, #ffacc9 50%, #3394ff 50%, #3394ff 100%);
    transition: opacity 0.2s;
  }
  input[type="range"].q-slider.cooperation {
    background: linear-gradient(to right, #EEE 0%, #4DD6A0 100%);
  }
  input[type="range"].q-slider:disabled { opacity: 0.4; cursor: not-allowed; }
  input[type="range"].q-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: white; border: 3px solid #0024af;
    cursor: pointer;
    transition: transform 0.15s;
  }
  input[type="range"].q-slider:not(:disabled)::-webkit-slider-thumb:hover { transform: scale(1.15); }
  input[type="range"].q-slider:disabled::-webkit-slider-thumb { border-color: #0024af; } /* 「該当なし」選択時もフチの色は変えない */
  input[type="range"].q-slider::-moz-range-thumb {
    width: 36px; height: 36px; border-radius: 50%;
    background: white; border: 2px solid #0024af;
    cursor: pointer;
  }

  .slider-value-row {
    display: flex; justify-content: center; align-items: center;
    margin-top: 10px; gap: 6px;
  }
  .slider-value-badge {
    font-family: "Zen Maru Gothic", sans-serif; font-size: 14px; font-weight: 600;
    padding: 5px 14px; border-radius: 999px;
    background: #fff; color: #0024af;
    border: #cccccc 2px solid;
    transition: background 0.2s, color 0.2s;
    min-width: 110px; text-align: center;
    margin-top: 8px;
  }
  .slider-value-badge.na-state    { background: #F5F5F5; color: #AAAAAA; }
  .slider-value-badge.coop-badge  { background: #fff; color: #0024af; min-width: 80px; }

  /* NA button */
  .na-btn {
    width: 100%; padding: 6px 12px;
    border: 2px solid #0024af; border-radius: 999px;
    background-color: #FFF450;
    font-family: "Zen Maru Gothic", sans-serif; font-size: 14px; font-weight: 700;
    color: #0024af; cursor: pointer; transition: all 0.2s;
    margin: 8px auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .na-btn.active { background: #e3e3e3; border-color: #AAAAAA; color: #666; border-style: solid; }
  .na-btn:hover  { opacity: 0.7; }

  /* Next / Back buttons */
  .next-btn {
    display: block; width: 100%;
    padding: 0;
    cursor: pointer; transition: all 0.2s; margin: 20px auto;
    background: none; border: none; outline: none; -webkit-appearance: none; appearance: none;
  }
  .next-btn img { width: 100%; display: block; }
  .next-btn:hover { transform: scale(1.06); transition: transform 0.2s ease; }
  .next-btn:active { transform: translateY(0); }

  .back-btn {
    width: 80%; background: transparent;
    cursor: pointer; transition: all 0.2s;
    text-align: center;
    margin: 20px auto 0;
    display: flex; flex-direction:column; justify-content: center; gap: 6px;
  }
  .back-btn:hover   { transform: translateY(-2px); transform: scale(1.02); }
  .back-btn:disabled { opacity: 0.25; pointer-events: none; }

  /* ========== RESULT ========== */
  #result { background-color: #fbf5da; display: none; min-height: 100vh; animation: fadeIn 0.5s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .result-hero { text-align: center; position: relative; overflow: hidden; }
  .result-hero::before {
    content: ''; position: absolute; inset: 0;
  }
  .result-animal {
    font-size: 96px; line-height: 1; margin-bottom: 16px;
    animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative;
  }
  @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .result-label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-orange); margin-bottom: 8px; position: relative; }
  .result-type-name { font-family: "M PLUS Rounded 1c", sans-serif; font-size: clamp(26px,7vw,40px); font-weight: 500; color: var(--charcoal); margin-bottom: 16px; position: relative; }

  #result-content-bg {
    aspect-ratio: 750 / 2653;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
  }
  .sharerate {
    position: absolute; bottom: 45%;
    margin: auto;
    display: flex; justify-content: center; flex-direction: column;
    width: 100%;
    padding: 0 64px;
  }


  .dist-bar { height: 50px; border-radius: 18px; overflow: hidden; display: flex; margin: auto; width: 63vw; }
  .dist-seg {
    height: 100%; transition: width 1s ease 0.5s;
    display: flex; align-items: center; justify-content: center;
    font-family: "Zen Maru Gothic", sans-serif; font-size: 32px; font-weight: 800; color: #ffffff; overflow: hidden; white-space: nowrap;
  }



  /* シェア欄：#result-content-bg と .r_campaign のつなぎ目をまたいで配置
     HTML上は2つの間に置き、上下にマイナスの余白を付けて両側に重ねる（元の場所に隙間が残らない）。
     余白は「% ＝ 親の横幅基準」で指定しているので、背景画像と同じ比率で拡大縮小し、どの端末でも同じ位置になる。
     ・シェア欄の高さ ＝ (横幅 − 左右30px×2) × 525/657 ≒ (100% − 60px) × 0.799
     ・上に重ねる量 ＝ 高さの61%  → margin-top:    (100% − 60px) × −0.487
     ・下に重ねる量 ＝ 高さの39%  → margin-bottom: (100% − 60px) × −0.312
     ※上下の位置を調整する場合は、2つの係数の合計を −0.799 のまま保つと隙間も重なりも出ない
       （例：もっと上へ → −0.52 / −0.279） */
  .snsshare {
    aspect-ratio: 657 / 525;
    margin: calc((100% - 60px) * -0.487) 30px calc((100% - 60px) * -0.312);
    padding: 23% 20px 20px;
    border-radius: 15px;
    background: url(../img/sh_r_share.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 200;   /* 下の .r_campaign（画像）より手前に表示 */
  }


  .share-btns { display: flex; justify-content: space-evenly; margin: 10px 20px;}
  .share-btns img {
    width: 85%;
  }
  .share-btn  { border: none; cursor: pointer; transition: all 0.2s; }

  .share-btn:hover { transform: translateY(-2px); opacity: 0.9; }




  .cpinfo  {
    position: relative;
    z-index: 10;
  }

  .cpinfo img {
    width: 101%;
  }









  .r_back {
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
  }

  .topbtn {
    display: flex;
    justify-content: center;
    transform: translateY(0);
    transition: 0.2s all;
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
  }

  .topbtn:hover {
      transform: translateY(-2px);
  }

  .topbtn img {
    max-width: 200px;
  }

  footer {
    width: 100%;
    max-width: 375px;
    margin: auto;
  }

  footer img {
    width: 100%;
    height: auto;
  }

  .footer_all {
    position: relative;
    margin-top: -96px;
    z-index: 20;
  }
  .contact {
    display: flex;
    justify-content: center;
    text-align: center;
    line-height: 1.2rem;
    margin: 10px auto;
  }

  .contact_details {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 20px;
}

  .copy {
    text-align: center;
    font-size: 10px;
    font-weight: 400;
  }

  .download-btn {
    width: 100%;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .download-btn:hover { transform: translateY(-2px); }

  .download-btn img {
    width: 75%;
  }

  .retry-btn {
    display: block; width: 75%;
    cursor: pointer; transition: all 0.2s;
    background: none; border: none; outline: none; -webkit-appearance: none; appearance: none;
    position: absolute;
    margin: auto;
    bottom: 14%;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .retry-btn:hover { transform: scale(1.06); }

  .retry-btn img {
    width: 100%; display: block;
  }

  #dl-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.75);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .dl-modal-inner {
    background: #fff; border-radius: 20px;
    border: #0024af 2px solid;
    padding: 20px; width: 100%; max-width: 280px;
    text-align: center;
  }
  #dl-modal-img {
    border: #0024af 2px solid;
  }
  .dl-modal-hint {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px; font-weight: 700; color: #0024af;
    margin-bottom: 14px;
  }
  .dl-modal-hint-pc {
    display: none;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 13px; font-weight: 700; color: #0024af;
    margin-bottom: 14px;
  }
  .dl-modal-link {
    display: none;
    margin-top: 14px;
    padding: 10px 24px;
    background-color: #0024af;
    color: #fff; border-radius: 1000px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 16px; font-weight: 800;
    text-decoration: none;
  }

  .r_campaign {
    position: relative;
  }
  /* PC表示の高さ：ブラウザの高さに合わせる（最大844px）。上限は --pc-max-h で調整 */
  :root { --pc-max-h: 844px; --pc-h: min(100vh, var(--pc-max-h)); }
  @supports (height: 100svh) { :root { --pc-h: min(100svh, var(--pc-max-h)); } }
  @media (min-width: 441px) {
    body {
      height: var(--pc-h);
      overflow-y: auto;
    }
    #intro { min-height: 0; height: var(--pc-h); }
    #quiz  { height: var(--pc-h); }
    .dl-modal-hint { display: none; }
    .dl-modal-hint-pc { display: block; }
    .dl-modal-link { display: inline-block; }
  }
  .dl-modal-close {
    margin-top: 16px; padding: 6px 32px;
    border: 2px solid #0024af ; border-radius: 1000px;
    background: #fff450; color: #0024af ;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  
  @media (max-width: 440px) {
    body {
      max-width: 100%;
      box-shadow: none;
    }
  }

  @media (min-width: 441px) {
    html   { display: flex; align-items: center; justify-content: center; } /* 背景は上の html 指定（pattern.jpg）を使用 */
    body   { width: 375px; max-height: var(--pc-h); overflow-y: auto; }
    /* 各画面の左右の影が body の端で切れないよう、body の左右に影の分の余白を確保（中身の幅は375pxのまま） */
    body   { width: calc(375px + 40px); padding: 0 20px; }
    #intro {
      position: relative;
      top: auto; left: auto; right: auto; bottom: auto;
      height: var(--pc-h);
    }
    #quiz  { height: var(--pc-h); }
    #result { min-height: var(--pc-h); }
  }

  /* ========== 質問画面の高さを .intro-bg（トップ画像 1500x2666）の表示高さに合わせる ==========
     .intro-frame と同じ計算：画面幅 × 2666/1500 と 画面の高さ の小さい方。
     画面の方が縦長の場合は上下中央に配置（トップ画面と同じ位置・高さになる） */
  :root {
    --bg-ratio: calc(2666 / 1500);
    --screen-h: 100vh;
    --frame-h: min(var(--screen-h), calc(100vw * var(--bg-ratio)));
  }
  @supports (height: 100svh) { :root { --screen-h: 100svh; } }
  @media (min-width: 441px) {
    :root {
      --screen-h: var(--pc-h);
      --frame-h: min(var(--pc-h), calc(375px * var(--bg-ratio)));
    }
  }
  #quiz {
    height: var(--frame-h);
    position: relative;
    top: calc((var(--screen-h) - var(--frame-h)) / 2);
  }

  /* 各画面にうっすら影 */
  .intro-frame, #quiz, #result {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
  }

  /* ========== SURVEY（トップと質問の間のアンケート） ========== */
  #survey {
    display: none; /* 表示時は JS で flex */
    flex-direction: column;
    height: var(--frame-h);            /* 質問画面と同じ高さ・位置 */
    position: relative;
    top: calc((var(--screen-h) - var(--frame-h)) / 2);
    background: url(../img/sh_sq_bg.png) center / cover no-repeat;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
    padding: 24px 20px 20px 24px;
    overflow-y: auto;
    scrollbar-width: none;
    font-family: "Zen Maru Gothic", sans-serif;
  }
  #survey::-webkit-scrollbar { display: none; }
  .survey-inner {
    margin: 0 auto;                    /* 入りきる時は上下中央、入りきらない時は上から */
    display: flex; flex-direction: column; align-items: center;
  }
  .survey-title { width: 90%; margin: 22px auto 16px; }
  .survey-title img { display: block; width: 100%; height: auto; }
  /* 質問のまとまり（背景：sh_ankewaku.png） */
  .survey-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: url(../img/sh_ankewaku.png) center / contain no-repeat;
    padding: 7vw;
  }
  .survey-q + .survey-q { margin-top: 24px; }
  .survey-q-text {
    font-size: 16px; font-weight: 700; line-height: 1.4;
    color: #0024af;
    margin-bottom: 12px;
  }
  .survey-req { color: #ed1e79; font-size: 13px; margin-left: 2px; }
  /* 選択肢はグリッドで配置：列幅は「枠の幅 − すき間」を等分（fr）するので、どの画面幅でも左右がきれいに揃う */
  .survey-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 1問目：2列（男性・女性） */
    gap: 6px;
  }
  .survey-options.is-age {
    grid-template-columns: repeat(3, 1fr);   /* 2問目：3列（10代・20代・30代 / 40代・50代・60代） */
  }
  .survey-opt.is-long,
  .survey-opt.is-wide { grid-column: 1 / -1; }  /* 「答えたくない」「それ以上」は1行ぶち抜き（横幅いっぱい） */
  .survey-opt {
    width: 100%;   /* 幅はグリッドの列幅に合わせる */
    padding: 8px;
    text-align: center;
    background-color: #fff;
    border: 2px solid #3394FF;
    border-radius: 999px;
    color: #0024af;
    font-family: "Zen Maru Gothic", sans-serif; font-size: 14px; font-weight: 700;
    line-height: 1.4; white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease;   /* ふわっと変化 */
  }
  @media (hover: hover) {
    .survey-opt:hover { background-color: #fff450; }
  }
  .survey-opt.is-selected { background-color: #fff450; }   /* 選択中 */
  .survey-next {
    display: block; width: 85%;
    padding: 0;
    cursor: pointer; transition: opacity 0.2s, transform 0.2s;
    margin: 20px auto;
  }
  .survey-next img { display: block; width: 100%; }
  .survey-next:disabled { opacity: 0.4; cursor: not-allowed; }   /* 2問とも選ぶまで押せない */
  @media (hover: hover) {
    .survey-next:not(:disabled):hover { transform: scale(1.04); }
  }

  /* ========== PC版のみの質問画面調整（スマホには適用しない） ========== */
  .pc-br { display: none; }
  @media (min-width: 441px) {
    .question-text { font-size: 14px; }
    .slider-value-badge .pc-br { display: inline; }      /* 「自分○%」の後で改行 */
    .slider-value-badge .badge-sep { display: none; }    /* 改行時は間の全角スペースを消す */
    /* アンケート画面（タブレット・PC） */
    .survey-box { padding: min(3vw, 32px); }   /* 画面幅に合わせて変化・最大32px */
    .survey-opt { padding: 4px; }
    /* 診断結果：分担バーの幅（スマホは62vw、タブレット・PCは100%） */
    .dist-bar { width: 100%; }
  }

  /* ========== IN-APP BROWSER MODAL ========== */
  #inapp-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.75);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
  }
  #inapp-modal.show { display: flex; }
  .inapp-modal-inner {
    background: #fff; border-radius: 20px;
    padding: 24px 20px; width: 100%; max-width: 300px;
    text-align: center;
    font-family: "M PLUS Rounded 1c", sans-serif;
  }
  .inapp-modal-icon { font-size: 36px; margin-bottom: 10px; }
  .inapp-modal-title {
    font-size: 16px; font-weight: 800; color: #2C2C2C;
    margin-bottom: 10px; line-height: 1.5;
  }
  .inapp-modal-body {
    font-size: 13px; color: #555; line-height: 1.8;
    margin-bottom: 20px;
  }
  .inapp-modal-body strong { color: #FF6B6B; }
  .inapp-modal-close {
    background: #FF6B6B; color: #fff;
    border: none; border-radius: 999px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 15px; font-weight: 700;
    padding: 12px 32px; cursor: pointer;
  }

  /* ========== 結果ページ：閲覧モード（Xのリンクなどから来た人） ========== */
  .dist-cover {
    position: absolute;
    inset: -12px 44px;              /* 分担バーの周りを少し広めに覆う */
    background: rgba(90, 90, 90, 0.72);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    z-index: 5;
  }
  .dist-cover p {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 15px; font-weight: 800; line-height: 1.5;
    color: #fff;
  }
  /* ※閲覧モードでもシェア欄は表示する（応募数確保のため） */