/* =========================================================
   style.css
   「心の6キャラ」静的サイト版 スタイルシート

   文字サイズは --uiText 1つのCSS変数で一括管理している。
   body.reader-normal / reader-large / reader-xlarge
  （js/app.js の setReaderSize() が付け替える）で値が変わり、
   本文系の要素はすべて em 単位でそこから相対計算される。

   見出しは「本文の何倍か」の2段階（--headingScale / --subheadingScale）
   のみ。個別クラスごとに数値をバラバラに書かないことで、
   将来の調整もこの先頭の数行を直すだけで済むようにしている。
   ========================================================= */

*{box-sizing:border-box}

:root{
  --uiText:24px;
  --headingScale:1.35em;
  --subheadingScale:1.15em;
  --smallScale:.86em;
}
body.reader-normal{ --uiText:24px; }
body.reader-large{ --uiText:28px; }
body.reader-xlarge{ --uiText:32px; }

html{
  min-height:100%;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:auto;
  overscroll-behavior-x:none;
}
body{
  min-height:100%;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
  overscroll-behavior-y:auto;
  background:#fffaf7;
  color:#4b342a;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:var(--uiText);
  line-height:1.65;
}

/* button/select/textarea/inputはブラウザ既定のUIフォントを使うため、
   font-familyだけでなくfont-sizeも「継承させる」ことを明示しないと、
   周りの文字サイズ設定（--uiText）が効かず極端に小さく表示される。 */
button,select,textarea,input{
  font:inherit;
}

.hidden{display:none!important}
.container{
  width:100%;
  max-width:100%;
  margin:0 auto;
  box-sizing:border-box;
  padding:8px 4px 56px;
}
@media(max-width:600px){
  .container{ padding-left:2px; padding-right:2px; }
}

/* 画面（1つずつ表示・非表示を切り替えるセクション）
   すべて通常のページスクロールに乗せる。以前はquizScreenだけ
   内部スクロール(height指定+overflow-y:auto)にしていたが、
   ページ全体のスクロール位置リセット（js/app.js show()）と
   噛み合わず「回答後にスクロールが戻らない」原因になっていたため、
   他の画面と同じ通常スクロールに統一している。 */
#startScreen,#modeScreen,#quizScreen,#handoffScreen,#loading,
#resultScreen,#encyclopediaScreen,#encyclopediaDetailScreen{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  height:auto;
  overflow:visible;
  touch-action:auto;
  overscroll-behavior:auto;
}
#quizScreen{ padding:0 0 90px; }
#questionsArea,#resultContent{ width:100%; max-width:100%; overflow:visible; }


/* =========================================================
   見出し・本文の文字サイズ
   ========================================================= */

/* 画面の主見出し */
.page-title,
.result-heading,
.character-title,
.section-title{
  font-size:var(--headingScale);
  line-height:1.4;
  font-weight:900;
  text-align:center;
  margin:8px 0 18px;
}

/* 中見出し */
.advice-title,
.hero-character-name,
.compare-name,
.talk-label{
  font-size:var(--subheadingScale);
  line-height:1.5;
  font-weight:900;
}

/* 案内文（見出しほど強調しないが、本文よりは少し大きく） */
.lead,
.character-sub{
  font-size:var(--subheadingScale);
  line-height:1.6;
  text-align:center;
}
.character-sub{ margin-top:6px; }

/* 本文はすべてbodyのサイズをそのまま継承（1em） */
.result-body,
.advice-message,
.parent-note,
.person-label,
.hero-character-text,
.book-detail-section,
.mode-desc,
.radar-note,
.question,
.answer span,
.survey-q,
.text-size-title{
  font-size:1em;
  line-height:1.75;
}
.person-label,.question,.survey-q,.text-size-title{ font-weight:900; }
.radar-note{ font-weight:800; }

/* 補助的な文字。読みにくくなりすぎない下限つき */
.small-note,
.legend,
.text-size-hint,
.fun-loader-sub,
.progress-text{
  font-size:max(18px,var(--smallScale));
  line-height:1.6;
}
.legend{ font-weight:900; }


/* =========================================================
   共通パーツ
   ========================================================= */
.card{
  background:#fff;border-radius:22px;padding:22px 18px;margin:16px 0;
  box-shadow:0 4px 15px rgba(80,45,30,.08);
  overflow-wrap:anywhere;
}
.app-image{
  width:100%;max-width:100%;height:auto;display:block;border-radius:22px;
  margin:0 auto 18px
}
.image-placeholder{
  min-height:160px;border-radius:22px;background:#f3ece7;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#8a7468;margin-bottom:18px
}

.button{
  width:100%;border:0;border-radius:20px;padding:18px 16px;
  line-height:1.35;font-weight:900;min-height:78px;margin-top:16px;
  cursor:pointer;white-space:normal;text-align:center;
}
.primary{background:#ff7894;color:#fff}
.secondary{background:#6757a8;color:#fff}
.ghost{background:#fff;border:2px solid #d9cec8;color:#5b4840}

.age-select{
  width:100%;min-height:58px;padding:14px;line-height:1.5;
  border:2px solid #eadfd8;border-radius:14px;background:#fff
}

.mode-grid{display:grid;grid-template-columns:1fr;gap:18px;width:100%}
.mode-button{
  position:relative;width:100%;min-height:190px;
  padding:24px 18px 22px;border-radius:28px;cursor:pointer;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;overflow:hidden;
  line-height:1.55;
}
.mode-button:first-child{
  background:linear-gradient(145deg,#fff4d8,#fff0f6,#edf9ff);
  border:3px solid #ffc4d4;
}
.mode-button:nth-child(2){
  background:linear-gradient(145deg,#f5efff,#fff0f7,#eef9ff);
  border:3px solid #d7c4f5;
}
.mode-name{font-size:1em;line-height:1.5;font-weight:900}
.mode-desc{font-weight:700;max-width:560px}
.mode-button::after{
  content:"やってみる →";display:inline-block;margin-top:5px;
  padding:10px 20px;border-radius:999px;background:#fff;
  box-shadow:0 2px 8px rgba(70,45,40,.10);
  font-size:1em;line-height:1.4;font-weight:900;
}
.mode-button:nth-child(2)::after{ content:"チャレンジする →"; }
@media(max-width:390px){
  .mode-button{ min-height:180px; padding-left:14px; padding-right:14px; }
}

.progress{
  height:10px;background:#eee5df;border-radius:10px;
  overflow:hidden;margin-bottom:18px
}
.progress-text{ text-align:center; font-weight:900; margin-bottom:8px; }
.progress>div{height:100%;background:#ff7894;transition:width .25s}
.result-progress{
  width:100%;box-sizing:border-box;text-align:center;font-weight:900;
  margin:4px 0 12px;padding:8px 10px;border-radius:999px;background:#f5f5f5;
}

.character-head{text-align:center;margin-bottom:18px}
.character-image{
  width:150px;height:150px;object-fit:contain;
  display:block;margin:0 auto 8px
}
@media(max-width:480px){
  .character-image{width:135px;height:135px}
}

.question-card{
  background:#fff;border-radius:20px;padding:20px 14px;margin:14px 0;
  box-shadow:0 3px 12px rgba(80,45,30,.07)
}
.question{margin-bottom:14px}
.answer{
  position:relative;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  background:#f8f7f6;border:2px solid transparent;border-radius:15px;
  padding:16px 14px 16px 18px;margin:9px 0;min-height:74px;
}
.answer.selected{
  border-color:#ff7894;background:#fff0f5;
  box-shadow:0 0 0 2px rgba(255,120,148,.10);
}
.answer input[type="radio"]{
  flex:0 0 auto;width:28px;height:28px;margin:4px 0 0 0;
  accent-color:#ff7894;cursor:pointer;
}
.answer span{ flex:1 1 auto; min-width:0; }

.radar-card{
  background:#fff;border-radius:24px;padding:10px 2px 18px;margin:14px 0;
  box-shadow:0 4px 15px rgba(80,45,30,.08);overflow:visible;
}
.radar-wrap{
  width:100%;max-width:430px;margin:0 auto;
  min-height:min(92vw,620px);
}
.radar-wrap canvas{
  display:block;width:100%;max-width:100%;height:auto;margin:0 auto;
  min-height:min(92vw,620px);
}
.radar-note{
  margin:12px 8px 0;padding:13px 14px;border-radius:16px;
  background:#fff6d9;text-align:center;font-weight:800
}
.legend{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  margin:6px 0 10px;font-weight:900
}
.legend-item{display:flex;align-items:center;gap:7px}
.legend-swatch{width:18px;height:6px;border-radius:10px;display:inline-block}
.legend-child{background:#ef6b8b}
.legend-parent{background:#36a6df}

.hero-character-card{
  background:linear-gradient(180deg,#fff 0%,#fff5f7 100%);
  border:2px solid #ffc3d0;border-radius:26px;padding:22px 18px;
  margin:15px 0;text-align:center
}
.hero-character-name{margin:8px 0}
.hero-character-text{text-align:left;margin-top:12px}
.hero-rate{font-weight:900;margin-top:4px}

.compare-card{
  border:2px solid #d8cdf9;background:#faf8ff;
  border-radius:22px;padding:19px;margin:15px 0
}
.compare-name{text-align:center;margin-bottom:10px}
.person-box{background:#fff;border-radius:16px;padding:14px;margin:10px 0}
.person-label{margin-bottom:6px}
.talk-box{background:#eff9f2;border-radius:18px;padding:17px;margin-top:14px}
.talk-label{margin-bottom:8px}

.advice-card{
  border:3px solid #ffadc0;background:#fffafa;
  border-radius:25px;padding:22px 18px;overflow-wrap:anywhere;
}
.advice-title{text-align:center;margin:8px 0 16px}
.advice-character{
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;
  margin-bottom:16px;background:#fff;border-radius:18px;padding:12px;
}
.advice-character .character-image{ width:110px;height:110px;margin:0 auto }
.advice-character-name{font-size:1.08em;font-weight:900;margin-bottom:5px}
.advice-character-desc{font-size:.95em;line-height:1.65}
@media(max-width:480px){
  .advice-character{ grid-template-columns:92px 1fr; }
  .advice-character .character-image{ width:88px;height:88px; }
}

.type-box{
  background:#fff7fb;border:2px solid #ffc7d8;border-radius:20px;
  padding:18px 16px;margin-top:14px;text-align:left;
}
.type-box-title{font-size:1.08em;font-weight:900;color:#d5476a;margin-bottom:8px}
.type-box-text{line-height:1.8}

.parent-note{line-height:1.9}
.parent-highlight{
  background:#fff4d9;border-radius:16px;padding:15px 14px;
  margin:14px 0;font-weight:800;line-height:1.75
}

.encyclopedia-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:13px;margin-top:16px
}
.book-card{
  border:0;background:#fff;border-radius:20px;padding:14px 8px;
  box-shadow:0 3px 12px rgba(80,45,30,.08);cursor:pointer;
  font-size:.95em;font-weight:900;color:#4b342a
}
.book-card img{
  width:105px;height:105px;object-fit:contain;
  display:block;margin:0 auto 6px
}
.book-detail-section{
  background:#fff;border-radius:18px;padding:15px;
  margin:12px 0;line-height:1.8
}
.book-detail-title{font-size:1.08em;font-weight:900;margin-bottom:5px}
.ending-actions{
  display:grid;grid-template-columns:1fr;gap:14px;width:100%;margin-top:16px
}
.encyclopedia-launch{
  width:100%;box-sizing:border-box;min-height:130px;padding:22px 16px;
  border:3px solid #b9a4ef;border-radius:26px;
  background:linear-gradient(180deg,#fbf8ff,#f2ecff);
  line-height:1.45;font-weight:900;text-align:center;
}
.encyclopedia-launch small{
  display:block;margin-top:8px;font-size:1em;line-height:1.45;font-weight:700
}

.result-nav{ display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px }
.result-nav .button{ margin-top:0 }
.result-nav.single{ grid-template-columns:1fr }
#quizNext,#resultNav,.ending-actions{ margin-bottom:28px; }


/* =========================================================
   文字サイズ選択・ローディング演出
   ========================================================= */
.text-size-panel,.compact-size-bar{
  background:#eef8ff;border:2px solid #9fd4f0;border-radius:20px;
  padding:16px;margin:16px 0;
}
.compact-size-bar{ padding:10px 12px; margin:0 0 14px; }
.text-size-title{ text-align:center; margin-bottom:11px; }
.compact-size-bar .text-size-title{ font-size:.9em; margin-bottom:7px; }
.text-size-buttons{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.text-size-btn{
  min-height:48px;border:2px solid #a8cfe5;background:#fff;color:#3f4f58;
  border-radius:14px;padding:11px 6px;font-weight:900;cursor:pointer;
}
.text-size-btn.active{
  background:#3ca6df;border-color:#3ca6df;color:#fff;
  box-shadow:0 0 0 3px rgba(60,166,223,.18);
}
.text-size-hint{ text-align:center;margin-top:9px;color:#52656e; }
@media(max-width:480px){
  .text-size-buttons{ gap:6px; }
  .text-size-btn{ padding:10px 4px; }
}

/* 6キャラ準備中（オープニング画像の読み込み待ち） */
.opening-loader{
  min-height:250px;border-radius:22px;
  background:linear-gradient(180deg,#fff8dc 0%,#fff 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 18px;text-align:center;
}
.opening-loader-title{font-size:1.2em;line-height:1.5;font-weight:900;color:#563f36}
.opening-loader-sub{margin-top:8px;font-size:.9em;line-height:1.6;font-weight:700;color:#765f55}
.loader-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin:24px 0 10px}
.loader-dot{width:22px;height:22px;border-radius:50%;animation:characterBounce 1.15s ease-in-out infinite}
.loader-dot:nth-child(1){background:#36a6df;animation-delay:0s}
.loader-dot:nth-child(2){background:#ef6b8b;animation-delay:.12s}
.loader-dot:nth-child(3){background:#f18a32;animation-delay:.24s}
.loader-dot:nth-child(4){background:#56a968;animation-delay:.36s}
.loader-dot:nth-child(5){background:#e9ad24;animation-delay:.48s}
.loader-dot:nth-child(6){background:#8064b5;animation-delay:.60s}
@keyframes characterBounce{
  0%,55%,100%{transform:translateY(0) scale(1);opacity:.55}
  25%{transform:translateY(-12px) scale(1.16);opacity:1}
}
.loader-status{margin-top:8px;font-size:.9em;font-weight:900;color:#6c554b}

/* 分析中・送信中など、他の待機演出 */
.fun-loader{
  min-height:260px;background:linear-gradient(180deg,#fff9df 0%,#fff 100%);
  border-radius:24px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:28px 16px;text-align:center;
}
.fun-loader-title{font-size:1.1em;font-weight:900;line-height:1.5}
.fun-loader-sub{margin-top:8px}
.fun-balls{display:flex;gap:12px;justify-content:center;margin:26px 0 10px}
.fun-ball{width:24px;height:24px;border-radius:50%;animation:funBounce 1.1s ease-in-out infinite}
.fun-ball:nth-child(1){background:#36a6df;animation-delay:0s}
.fun-ball:nth-child(2){background:#ef6b8b;animation-delay:.12s}
.fun-ball:nth-child(3){background:#f18a32;animation-delay:.24s}
.fun-ball:nth-child(4){background:#56a968;animation-delay:.36s}
.fun-ball:nth-child(5){background:#e9ad24;animation-delay:.48s}
.fun-ball:nth-child(6){background:#8064b5;animation-delay:.60s}
@keyframes funBounce{
  0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-14px);opacity:1}
}

/* オープニング画像そのものが未読込のときのプレースホルダー */
#openingImageArea.image-placeholder{
  min-height:220px;
  background:
    radial-gradient(circle at 20% 25%,#ffd8e4 0 11%,transparent 12%),
    radial-gradient(circle at 80% 20%,#cdeaff 0 12%,transparent 13%),
    linear-gradient(180deg,#fff8d9,#fff);
  color:#5b3d32;text-align:center;padding:35px 20px;font-size:0;
}
#openingImageArea.image-placeholder::before{
  content:"あなたの心の中には\A6人のキャラクターがいるよ！";
  white-space:pre-line;font-weight:900;font-size:1.15rem;line-height:1.6;
}

/* おうちの人へバトンタッチ／エンディング画像領域
  （画像素材が未提供の間は常時表示バナーとして扱う。img/に
   handoff.jpg・ending.jpgを追加した場合はjs/data.jsの
   UI_IMAGE_PATHSにパスを設定すると自動で画像表示に切り替わる） */
.static-banner{
  min-height:190px;border-radius:22px;
  background:linear-gradient(180deg,#fff8dc 0%,#fff 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 18px;text-align:center;margin-bottom:18px;
}
.static-banner-title{font-size:1.2em;line-height:1.5;font-weight:900;color:#563f36}
.static-banner-sub{margin-top:8px;font-size:.9em;line-height:1.6;font-weight:700;color:#765f55}


/* =========================================================
   アンケート
   ========================================================= */
.survey-card{
  background:#fff;border-radius:22px;padding:18px 16px;margin:14px 0;
  box-shadow:0 3px 12px rgba(80,45,30,.08);
}
.survey-q{ margin:16px 0 10px; line-height:1.6; }
textarea.survey-free{
  box-sizing:border-box;width:100%;min-height:150px;resize:vertical;
  border:2px solid #d8d1cd;border-radius:16px;padding:14px;
  font:inherit;line-height:1.6;background:#fff;
}

.kids-survey{
  background:linear-gradient(180deg,#fff8d9 0%,#fff 100%);
  border-radius:26px;padding:20px 14px;
}
.kids-survey-title{font-weight:900;text-align:center;margin-bottom:8px}
.fun-choice-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 22px}
.fun-choice{
  width:100%;box-sizing:border-box;min-height:78px;
  border:2px solid #eadfd8;border-radius:20px;padding:14px;background:#fff;
  font:inherit;line-height:1.45;font-weight:900;text-align:left;
}
.fun-choice.selected{border-color:#f1a6bf;background:#fff0f6}
.kids-choice{
  display:block;width:100%;border:2px solid #eadfd8;background:#fff;
  border-radius:16px;padding:14px 12px;margin:9px 0;font:inherit;text-align:left;
}
.kids-choice.selected{border-color:#f1a6bf;background:#fff0f6}

.parent-choice{
  display:block;width:100%;border:2px solid #d7e2e8;background:#fff;
  border-radius:16px;padding:14px 12px;margin:9px 0;font:inherit;text-align:left;
}
.parent-choice.selected{border-color:#75bde3;background:#eef8ff}
.parent-choice input[type="radio"]{
  width:28px;height:28px;accent-color:#3ca6df;vertical-align:middle;
}

.survey-thanks{
  min-height:300px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;border-radius:24px;padding:26px 16px;
  background:linear-gradient(180deg,#fff8dc,#fff);
}
.survey-thanks-title{font-weight:900;line-height:1.6}


/* =========================================================
   結果を持ち帰るカード
   ========================================================= */
.takehome-card{
  width:100%;box-sizing:border-box;margin:18px 0 26px;padding:24px 14px;
  border-radius:26px;border:4px solid #e8c655;
  background:linear-gradient(180deg,#fff7cf 0%,#fffdf2 100%);
  text-align:center;
}
.takehome-title{font-size:1.28em;line-height:1.45;font-weight:900;margin-bottom:12px}
.takehome-desc{line-height:1.6;margin-bottom:14px}
.takehome-button{
  width:100%;min-height:82px;box-sizing:border-box;border:0;border-radius:20px;
  padding:16px 14px;font:inherit;font-weight:900;line-height:1.4;margin:8px 0;
}
.takehome-secondary{background:#eef7ff;color:#245c78;border:2px solid #79bce0}

.takehome-screenshot-card{
  width:100%;box-sizing:border-box;border-radius:22px;padding:18px 14px;
  background:#eef8ff;border:2px solid #9fd3ee;margin:14px 0;
}
.takehome-screenshot-title{font-weight:900;margin-bottom:8px}
.takehome-screenshot-desc{line-height:1.6}

#shareCardPreview{
  width:100%;box-sizing:border-box;margin:18px 0;padding:20px 12px;
  border-radius:24px;background:#fff;border:2px solid #eadfce;
}
.share-card-title{font-size:1.15em;font-weight:900;line-height:1.5;margin-bottom:14px}
.share-card-chart{width:100%;max-width:680px;margin:0 auto 16px}
.share-card-chart img{display:block;width:100%;height:auto}
.share-card-copy{line-height:1.65;font-weight:800;text-align:left;margin:10px 0}
.share-card-brand{font-size:max(24px,.85em);margin-top:18px;font-weight:900}
.share-card-empty{padding:16px;border-radius:16px;background:#fff3f5;line-height:1.55}
@media print{
  body *{ visibility:hidden !important; }
  #shareCardPreview,#shareCardPreview *{ visibility:visible !important; }
  #shareCardPreview{ position:absolute; left:0; top:0; width:100%; border:0; }
}

/* デジサポへの導線（親子モードのエンディングのみ） */
.digisapo-link-card{
  margin:22px 0;padding:20px 16px;border-radius:22px;background:#eef8ff;text-align:center;
}
.digisapo-link-kicker{font-weight:900;margin-bottom:10px}
.digisapo-link-text{line-height:1.65;margin-bottom:14px}
.digisapo-link-button{
  display:block;width:100%;box-sizing:border-box;padding:15px 12px;
  border-radius:16px;background:#fff;border:2px solid #73bce4;color:#245c78;
  font-weight:900;text-decoration:none;
}


/* =========================================================
   モーダル・ルビ・その他
   ========================================================= */
.app-modal-backdrop{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;padding:18px;background:rgba(20,20,20,.42);
}
.app-modal{
  width:min(94vw,620px);box-sizing:border-box;background:#fff;border-radius:26px;
  padding:24px 18px;box-shadow:0 16px 50px rgba(0,0,0,.22);text-align:center;
  font-size:var(--uiText);
}
.app-modal-title{font-weight:900;margin-bottom:12px}
.app-modal-message{line-height:1.65;margin-bottom:18px}
.app-modal-button{
  width:100%;border:0;border-radius:16px;padding:14px 12px;
  background:#3ca6df;color:#fff;font:inherit;font-weight:900;
}
.missing-pulse{
  animation:missingPulse .7s ease 2;
  outline:4px solid #f4a6bf;outline-offset:4px;
}
@keyframes missingPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }

ruby{ ruby-position:over; ruby-align:center; white-space:nowrap; }
rt{ font-size:.42em; line-height:1; font-weight:600; letter-spacing:0; }
.question ruby{ margin:0 .03em; }