/* 配色ルール：主役色はライトトーン（--blue, --orange）。
 * --blue-deep / --orange-deep は見出し文字・4px罫線バーなどの小さなアクセントにのみ使う。
 * セクション背景やCTAボタンなど面積の大きい要素はライトトーンを主にする。
 * ライトトーンの正確な色は、キャラクター画像のスカーフ色が決まり次第、再調整すること。 */
:root{
  --blue-deep:   #1E5FB8;
  --blue:        #3B82E0;
  --blue-soft:   #DCEBFF;
  --orange:      #FF9840;
  --orange-deep: #F2761A;
  --orange-soft: #FFE8D2;
  --cream:       #FFFBF3;
  --ink:         #253248;
  --ink-soft:    #6B7688;
  --white:       #FFFFFF;
  --radius-lg:   28px;
  --radius-md:   18px;
  --radius-sm:   12px;
  --shadow-card: 0 10px 30px rgba(30,95,184,0.12);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Nunito','M PLUS Rounded 1c',sans-serif;
  background: var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.jp{font-family:'M PLUS Rounded 1c','Nunito',sans-serif;}

/* ===== フレーム ===== */
.phone-wrap{
  max-width:420px;
  margin:24px auto;
  background: var(--white);
  border-radius: 36px;
  box-shadow: 0 24px 60px rgba(30,60,120,0.18);
  overflow:hidden;
  min-height: 780px;
  position:relative;
  border: 8px solid #16213A;
}
@media (max-width:480px){
  .phone-wrap{
    margin:0;
    border-radius:0;
    border:none;
    box-shadow:none;
    min-height:100vh;
  }
}
.screen{
  display:none;
  min-height: 780px;
  flex-direction:column;
  position:relative;
}
@media (max-width:480px){
  .screen{ min-height:100vh; }
}
.screen.active{display:flex;}

/* ===== ①スタート画面 ===== */
#screen-start{
  background:
    radial-gradient(circle at 18% 8%, var(--orange-soft) 0%, transparent 42%),
    radial-gradient(circle at 85% 18%, var(--blue-soft) 0%, transparent 48%),
    var(--white);
  padding:36px 28px 28px;
  text-align:center;
  justify-content:flex-start;
}
.brand-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--blue-soft);
  color:var(--blue-deep);
  font-weight:800;
  font-size:12px;
  letter-spacing:.04em;
  padding:6px 14px;
  border-radius:999px;
  margin:0 auto 18px;
}
.start-kicker{
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
  letter-spacing:.02em;
  margin:0 0 6px;
}
.start-title{
  font-size:30px;
  font-weight:800;
  line-height:1.35;
  margin:0 0 10px;
}
.start-title .accent{
  color:var(--orange-deep);
  position:relative;
  white-space:nowrap;
}
.start-sub{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 26px;
}
.animal-preview{
  display:flex;
  justify-content:center;
  gap:10px;
  font-size:34px;
  margin: 6px 0 30px;
}
.animal-preview span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  background:var(--white);
  border-radius:18px;
  box-shadow: var(--shadow-card);
  animation: bob 2.6s ease-in-out infinite;
  overflow:hidden;
}
.animal-preview span img{width:100%; height:100%; object-fit:cover;}
.animal-preview span:nth-child(2){animation-delay:.3s;}
.animal-preview span:nth-child(3){animation-delay:.6s;}
.animal-preview span:nth-child(4){animation-delay:.9s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.facts-row{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-bottom:30px;
}
.fact{
  text-align:center;
}
.fact b{
  display:block;
  font-size:20px;
  font-weight:800;
  color:var(--blue-deep);
}
.fact span{
  font-size:11px;
  color:var(--ink-soft);
  font-weight:700;
}

.cta-primary{
  display:block;
  width:100%;
  border:none;
  background: linear-gradient(135deg, #FFB066 0%, var(--orange) 100%);
  color:#fff;
  font-family:'M PLUS Rounded 1c',sans-serif;
  font-weight:800;
  font-size:17px;
  padding:18px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(242,118,26,0.35);
  cursor:pointer;
  letter-spacing:.02em;
}
.start-note{
  margin-top:14px;
  font-size:12px;
  color:var(--ink-soft);
}

.start-footer{
  margin-top:auto;
  padding-top:26px;
}
.parent-note{
  background:var(--cream);
  border:1.5px dashed #E3D8C4;
  border-radius:var(--radius-md);
  padding:14px 16px;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.6;
  text-align:left;
}
.parent-note b{color:var(--ink); font-weight:800;}

/* ===== スタート画面：追加ランディングセクション（悩み訴求／診断結果の一例／安心ポイント） ===== */
.landing-section{
  margin-top:36px;
  text-align:left;
}
.section-badge{
  display:inline-block;
  background:var(--blue-soft);
  color:var(--blue-deep);
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.section-heading{
  font-size:19px;
  font-weight:800;
  margin:0 0 8px;
  text-align:center;
}
.section-sub{
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  margin:0 0 20px;
  line-height:1.6;
}
.landing-section .section-heading{ text-align:center; }
.landing-section > .section-badge{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }

/* セクションA：悩み訴求カード */
.worry-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}
.worry-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px 18px;
}
.worry-icon{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:12px;
  background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}
.worry-card p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
}
.landing-lead{
  text-align:center;
  font-weight:800;
  font-size:14.5px;
  color:var(--blue-deep);
  margin:20px 0 0;
}

/* セクションB：診断結果の一例 */
.sample-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sample-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px 18px;
}
.sample-emoji{
  flex-shrink:0;
  width:48px;height:48px;
  border-radius:14px;
  background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  overflow:hidden;
}
.sample-emoji img{width:100%; height:100%; object-fit:cover;}
.sample-name{
  font-weight:800;
  font-size:13.5px;
  margin-bottom:4px;
}
.sample-body p{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-soft);
}
.landing-note{
  font-size:11.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:16px 0 0;
  text-align:center;
}
.landing-note-small{
  font-size:11px;
  opacity:.85;
}

/* セクションD：特徴カード3枚 */
.feature-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feature-card{
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:20px 18px;
  text-align:center;
}
.feature-icon{
  width:44px;height:44px;
  margin:0 auto 12px;
  border-radius:14px;
  background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;
}
.feature-name{
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
}
.feature-card p{
  margin:0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--ink-soft);
  text-align:left;
}

/* セクションC：安心ポイント */
.promise-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}
.promise-item{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px 18px;
}
.promise-icon{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.promise-item p{
  margin:0;
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  color:var(--ink);
}

/* フッター：利用規約／プライバシーポリシー */
.bottom-cta-section{
  text-align:center;
}
.bottom-cta-section .start-note{
  margin-top:14px;
}

.legal-footer{
  text-align:center;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #EEF1F7;
  font-size:11.5px;
}
.legal-company{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
}
.legal-links{
  margin-bottom:10px;
}
.legal-footer a{
  color:var(--ink-soft);
  text-decoration:underline;
}
.legal-footer .legal-sep{
  color:#C7CEDB;
  margin:0 6px;
}
.legal-consent-note{
  margin:0 0 14px;
  font-size:10.5px;
  color:var(--ink-soft);
  opacity:.8;
  line-height:1.6;
}
.legal-copyright{
  margin:0;
  font-size:10px;
  color:var(--ink-soft);
  opacity:.65;
}

/* ===== ②質問画面 ===== */
#screen-question{padding:0;}
.q-toppanel{
  padding:20px 22px 16px;
  border-bottom:1px solid #F1F4FA;
}
.q-toplabel{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12.5px;
  font-weight:800;
  color:var(--ink-soft);
  margin-bottom:9px;
}
.q-toplabel b{color:var(--blue-deep); font-size:13px;}
.q-progress-track{
  height:7px;
  background:#EEF2F9;
  border-radius:999px;
  overflow:hidden;
}
.q-progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
  border-radius:999px;
  transition: width .3s ease;
}

.q-body{
  padding:22px 22px 100px;
  flex:1;
  overflow:hidden;
}
.q-content{
  animation: fadeIn .35s ease;
}
.q-content.slide-out-left{ animation: slideOutLeft .22s ease forwards; }
.q-content.slide-out-right{ animation: slideOutRight .22s ease forwards; }
.q-content.slide-in-right{ animation: slideInRight .3s ease forwards; }
.q-content.slide-in-left{ animation: slideInLeft .3s ease forwards; }
@keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
@keyframes slideOutLeft{to{opacity:0; transform:translateX(-26px);}}
@keyframes slideOutRight{to{opacity:0; transform:translateX(26px);}}
@keyframes slideInRight{from{opacity:0; transform:translateX(26px);} to{opacity:1; transform:translateX(0);}}
@keyframes slideInLeft{from{opacity:0; transform:translateX(-26px);} to{opacity:1; transform:translateX(0);}}

.q-sublabel{
  font-size:12.5px;
  font-weight:700;
  color:var(--orange-deep);
  margin-bottom:14px;
}
.q-sub-count{color:var(--ink-soft); font-weight:800;}

.q-card{
  background:var(--white);
  border:1.5px solid #EEF1F7;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:28px 22px;
  margin-bottom:22px;
}
.q-text{
  font-size:19px;
  font-weight:800;
  line-height:1.6;
  margin:0;
  white-space:pre-line;
}

.scale{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scale-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  border-radius:var(--radius-md);
  border:2px solid #EEF1F7;
  background:#fff;
  cursor:pointer;
  transition:.15s;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
  width:100%;
  text-align:left;
  font-family:inherit;
}
.scale-option:hover{border-color:var(--blue); background:var(--blue-soft);}
.scale-option.selected{
  border-color:var(--orange-deep);
  background:var(--orange-soft);
}
.dots{display:flex; gap:4px; flex-shrink:0;}
.dots i{
  width:8px; height:8px;
  border-radius:50%;
  background:#E3E8F0;
  display:block;
  font-style:normal;
}
.dots i.on{background:var(--orange-deep);}
.scale-option.selected .dots i{background:#F4C7A0;}
.scale-option.selected .dots i.on{background:var(--orange-deep);}

.q-bottomnav{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid #F1F4FA;
}
.nav-btn{
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:#F1F4FA;
  color:var(--ink-soft);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-family:inherit;
}
.nav-btn:disabled{opacity:.35; cursor:default;}
.nav-btn-main{
  width:54px; height:54px;
  background: linear-gradient(135deg, #FFB066 0%, var(--orange) 100%);
  color:#fff;
  font-size:20px;
  box-shadow:0 8px 18px rgba(242,118,26,0.35);
}
.nav-btn-main:disabled{
  background:#E3E8F0;
  box-shadow:none;
  opacity:1;
  color:#B8C0D0;
}

/* ===== ③結果画面 ===== */
#screen-result{padding:0 0 30px;}
.result-hero{
  background: linear-gradient(160deg, var(--blue) 0%, #4C9AF0 55%, #79C2FF 100%);
  padding:34px 24px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.result-hero::before, .result-hero::after{
  content:'';
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.result-hero::before{width:180px;height:180px; top:-60px; right:-50px;}
.result-hero::after{width:120px;height:120px; bottom:-40px; left:-30px;}
.result-eyebrow{
  color:rgba(255,255,255,0.85);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:14px;
}
.result-animal-badge{
  width:152px;height:152px;
  margin:0 auto 16px;
  background:#fff;
  border-radius:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:78px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.18);
  animation: pop .4s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.result-animal-badge img{width:100%; height:100%; object-fit:cover;}
@keyframes pop{0%{transform:scale(.4) rotate(-8deg); opacity:0;}100%{transform:scale(1) rotate(0); opacity:1;}}
.result-type-name{
  color:#fff;
  font-size:28px;
  font-weight:800;
  margin:0 0 8px;
}
.result-tagline{
  display:inline-block;
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  padding:7px 16px;
  border-radius:999px;
  backdrop-filter: blur(2px);
}

.result-body{
  margin-top:0;
  padding:20px 20px 0;
}
.result-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:22px 20px;
  margin-bottom:16px;
}
.result-card h3{
  font-size:14px;
  font-weight:800;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.result-card h3 .bar{
  width:4px;height:14px;background:var(--orange-deep);border-radius:3px;
}
.result-desc{
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink);
  margin:0;
}

/* レーダー */
.radar-wrap{display:flex; justify-content:center; margin: 4px 0 10px;}
.radar-wrap svg{width:100%; height:auto; max-width:300px;}
.radar-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 14px;
  margin-top:14px;
}
.radar-legend-item{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
  border-bottom:1px dashed #EEF1F7;
  padding-bottom:6px;
}
.radar-legend-item b{color:var(--blue-deep); font-size:12.5px;}

.hint-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hint-list li{
  display:flex;
  gap:10px;
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
}
.hint-list li::before{
  content:'🐾';
  flex-shrink:0;
  font-size:12px;
  margin-top:3px;
}

.lock-card{
  background: linear-gradient(135deg, var(--orange-soft) 0%, #FFF6EA 100%);
  border:1.5px dashed var(--orange);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  text-align:center;
  margin-bottom:18px;
}
.lock-card .lock-icon{font-size:26px; margin-bottom:8px;}
.lock-card h4{
  font-size:15px;
  font-weight:800;
  margin:0 0 8px;
}
.lock-card p{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 16px;
}
.cta-line[hidden]{ display:none; }
.cta-line{
  display:block;
  width:100%;
  border:none;
  background:#06C755;
  color:#fff;
  font-family:'M PLUS Rounded 1c',sans-serif;
  font-weight:800;
  font-size:15.5px;
  padding:15px;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(6,199,85,0.3);
  margin-bottom:10px;
  cursor:pointer;
}
.cta-line:disabled{
  opacity:.6;
  cursor:default;
  box-shadow:none;
}
#line-friend-add-link{
  margin:0 0 4px;
}
.line-success{
  padding-top:2px;
}
.line-success-icon{
  font-size:24px;
  margin-bottom:6px;
}
.line-success p{
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0;
}
.line-error{
  padding-top:2px;
}
.line-error p{
  font-size:12.5px;
  color:#C0392B;
  line-height:1.7;
  margin:0 0 12px;
}
.link-btn[hidden]{ display:none; }
.link-btn{
  display:block;
  margin:18px auto 0;
  background:none;
  border:none;
  color:var(--ink-soft);
  font-weight:700;
  font-size:12.5px;
  text-decoration:underline;
  cursor:pointer;
}

/* ===== モーダル ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(37,50,72,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:50;
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  padding:28px 24px;
  max-width:340px;
  width:100%;
  text-align:center;
}
.modal-icon{font-size:30px; margin-bottom:10px;}
.modal-card h4{
  font-size:16px;
  font-weight:800;
  margin:0 0 10px;
}
.modal-card p{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 20px;
}
.modal-actions{display:flex; flex-direction:column; gap:10px;}
.modal-btn{
  border:none;
  border-radius:999px;
  padding:14px;
  font-weight:800;
  font-size:14.5px;
  cursor:pointer;
  font-family:'M PLUS Rounded 1c',sans-serif;
}
.modal-btn-primary{
  background: linear-gradient(135deg, #FFB066 0%, var(--orange) 100%);
  color:#fff;
  box-shadow: 0 10px 20px rgba(242,118,26,0.3);
}
.modal-btn-secondary{
  background:#F1F4FA;
  color:var(--ink-soft);
}

/* ===== トースト ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:12px 20px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  z-index:60;
  animation: toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);}}