/* 設計メモ・調整理由は SHINDAN_STYLE_NOTES.md 参照 */
:root{
  --gold:#C8A400;--red:#8B1A1A;--dark:#070e1c;
  --brown:#3D2B1F;--cream:#F5EDD8;--dgray:#444;--lgray:#888;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','游明朝',serif;
  background:#000;color:#fff;min-height:100vh;overflow-x:hidden;
}

/* ── 画面（スクリーン）共通 ── */
.screen{display:none;position:relative;min-height:100vh;overflow:hidden;}
.screen.active{display:block;}

.screen-bg{
  position:absolute;inset:0;z-index:0;
  background:#000;
    /* radial-gradient(ellipse 80% 50% at 50% -10%,rgba(200,164,0,.12),transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 90%,rgba(139,26,26,.10),transparent 60%),
    linear-gradient(160deg,#0f0c07,#1a1208 50%,#0d0a05); */
}
.screen-bg::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(200,164,0,.035) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(200,164,0,.035) 40px);
}

/* レイアウト */
.wrap{display:flow-root;position:relative;z-index:1;max-width:660px;margin:0 auto;
  /* padding:0 16px 72px; */
}

/* ── ローディング ── */
#loading{
  position:fixed;inset:0;z-index:200;
  background:var(--dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .45s;
}
#loading.out{opacity:0;pointer-events:none;}
.spinner{
  width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(200,164,0,.15);border-top-color:var(--gold);
  animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.spin-label{font-size:10px;letter-spacing:4px;color:rgba(200,164,0,.55);}

/* ── 診断開始案内 ── */
.intro-bg-top{
  position:absolute;top:0;left:50%;z-index:-1;
  width:min(1920px,100vw);
  transform:translateX(-50%);
  aspect-ratio:1920/786;
  background-image:url("../img/shindan/bg_shindan_top.png");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
#intro{
  width:100%;
  background-image:url("../img/shindan/bg_shindan_bottom_deco.png");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  padding:10px 0 60px 0;
  border-bottom:4px solid #856d42;
}
#screen-intro .wrap{
  position:relative;z-index:2;
  max-width:1920px;width:100%;
}
.intro-sub{
  position:absolute;top:0;left:0;z-index:2;
  width:min(273px,14.22vw);
}
.intro-sub img{
  display:block;
  width:100%;
  height:auto;
  margin-top:min(12px,0.63vw);
  margin-left:min(380px,19.79vw);
}
.intro-title-img{
  margin:min(422px,21.98vw) auto 0;
  width:min(921px,47.97vw);
  text-align:center;
}
.intro-title-img img{display:block;width:100%;height:auto;}
.intro-inner{text-align:center;}
.start-btn{
  display:block;margin:0 auto 0;
  width:min(659px,34.32vw);
  padding:0;background:none;border:none;cursor:pointer;
}
.start-btn img{display:block;width:100%;height:auto;}
.campaign-schedule-img{
  position:relative;
  margin:30px auto 0;
  width:min(1289px,77vw);
  aspect-ratio:1289/339;
  background-image:url("../img/shindan/campaign_schedule.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
.campaign-schedule-badge{
  position:absolute;left:0;top:19%;width:14.5%;
  text-align:center;color:#3D2B1F;font-weight:700;
  font-size:min(15px,0.9vw);line-height:1.4;
}
.campaign-schedule-title{
  position:absolute;left:14.5%;right:19%;top:3%;
  text-align:center;color:#f7d07c;font-weight:700;
  font-size:min(36px,2.15vw);letter-spacing:1px;
  white-space:nowrap;
}
.campaign-schedule-msg{
  position:absolute;left:16.8%;right:24%;top:39%;
  color:#fff;font-weight:700;
  font-size:min(24px,1.43vw);line-height:1.6;
}
.campaign-schedule-period{
  position:absolute;left:12%;right:19%;top:76%;
  text-align:center;
}
.campaign-schedule-period-label{
  color:#4caf50;font-weight:700;
  font-size:min(20px,1.19vw);line-height:1.6;
}
.yourtype-img{
  margin:30px auto 0;
  width:90vw;
}
.yourtype-img img{display:block;width:100%;height:auto;}
.yourtype-title{
  width:100%;margin:0 auto 12px;
  font-size:min(40px,3.61vw);font-weight:500;color:#FFD178;
}
.yourtype-desc{
  width:100%;margin:0 auto;
  font-size:min(30px,3.61vw);font-weight:500;color:#FFEDED;
  line-height:1.8;
}
.tutorial-img{
  margin:30px auto 0;
  width:89%;
  max-width:1331px;
}
.tutorial-img img{
  display:block;width:100%;height:auto;
  margin-top:-30px;
}

#screen-quiz .wrap{
  max-width:1000px;width:100%;
}

/* ── 診断画面 背景 ── */
.quiz-bg-top{
  position:absolute;top:0;left:50%;z-index:-1;
  width:min(1920px,100vw);
  transform:translateX(-50%);
  aspect-ratio:1920/588;
  background-image:url("../img/shindan/bg_shindan_quiz.png");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}
.quiz-bg-body{
  position:absolute;
  top:calc(min(1920px,100vw) * 588 / 1920);
  bottom:0;
  left:50%;z-index:-1;
  width:min(1920px,100vw);
  transform:translateX(-50%);
  background-image:url("../img/shindan/bg_question_body.png");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  border-bottom:4px solid #856d42;
}

/* ── 進捗（画像切替：progress_01〜08.png） ── */
.prog-row{position:relative;z-index:1;margin:0 0 18px;}
.prog-img-wrap{
  position:relative;
  width:77%;max-width:795px;
  margin:max(-50px,-3.6vw) auto 0;
}
.prog-img{display:block;width:100%;height:auto;}
.prog-img-ov{
  position:absolute;inset:0;
  width:100%;height:100%;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
}
.prog-img-ov.wipe-in{animation:progWipe .45s ease-out;}
@keyframes progWipe{
  from{clip-path:inset(0 100% 0 0);}
  to{clip-path:inset(0 0 0 0);}
}

/* ── 設問カード ── */
.q-card{
  margin-top: -30px;
  width:100%;
  aspect-ratio:1331/730;
  background-image:url("../img/shindan/bg_question.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  padding:7.14% 2.25% 3.76%;
  transition:opacity .28s,transform .28s;
}
.q-card.out{opacity:0;transform:translateY(-10px);}
.q-card.in{animation:qIn .32s ease;}
@keyframes qIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.q-card-inner{width:90%;margin:0 auto;}

.q-num{
  margin-top:10px;
  font-size:min(20px,2vw);
  font-weight:700;
  letter-spacing:2px;
  color:#9c8a68;
  padding-left:13.52%;
  margin-bottom:0.6%;
}
.q-theme{font-size:10px;letter-spacing:2px;color:rgba(245,237,216,.38);margin-bottom:14px;}
.q-text{
  text-align:center;
  margin-top:-2%;
  padding-left:9.5%;
  font-size:min(32px,3.2vw);font-weight:700;letter-spacing:1px;
  line-height:1.5;color:#1a1a2e;margin-bottom:68px;
}
.q-text.q-text--long{font-size:min(18px,1.8vw);line-height:1.3;}

/* ── 選択肢 ── */
.choices{display:flex;flex-direction:column;gap:11px;}
.ch-btn{
  display:flex;align-items:center;
  width:100%;
  aspect-ratio:1103/162;
  /* padding:0 4% 0 20%; */
  padding:0 4% 1.5% 20%;
  background-color:transparent;
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  border:none;cursor:pointer;transition:transform .18s;
  text-align:left;color:#fff;font-family:inherit;font-size:min(28px,2.8vw);
}
.ch-btn:hover{transform:translateX(3px);}
.ch-btn-a{background-image:url("../img/shindan/btn_question_01.png");}
.ch-btn-b{background-image:url("../img/shindan/btn_question_02.png");}
.ch-btn-a.sel{background-image:url("../img/shindan/btn_question_01_on.png");}
.ch-btn-b.sel{background-image:url("../img/shindan/btn_question_02_on.png");}
.ch-txt{line-height:1.7;}

/* ── 次へボタン ── */
.next-btn{
  display:block;width:min(480px,48vw);margin:18px auto 0;padding:0;
  background:none;border:none;cursor:pointer;
}
.next-btn img{display:block;width:100%;height:auto;}
.next-btn img.next-btn-on{display:none;}
.next-btn.show img.next-btn-off{display:none;}
.next-btn.show img.next-btn-on{display:block;}

/* ── 診断画面 ── */
#quiz{
  display:none;
  margin-top:min(588px,30.63vw);
  padding-bottom:100px;
}

/* ── 結果画面 背景 ── */
#screen-result .wrap{
  max-width:750px;width:100%;
  min-height:min(1629px,84.84vw);
}
.result-bg{
  position:absolute;top:0;bottom:0;left:50%;z-index:-1;
  width:min(1920px,100vw);
  transform:translateX(-50%);
  background-image:url("../img/shindan/bg_result.png");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  border-bottom:4px solid #856d42;
}

#result{display:none;}
#result.show{display:block;animation:qIn .5s ease;}

.res-announce{
  position:relative;left:50%;transform:translateX(-50%);
  width:min(1920px,100vw);
  /* margin-bottom:20px; */
}
.res-announce img{display:block;width:100%;height:auto;}

.res-campaign{
  margin-top:max(-60px,-5.85vw);
  position:relative;left:50%;transform:translateX(-50%);
  width:min(922.5px,90vw);
  aspect-ratio:1025/410;
  background-image:url("../img/shindan/bg_result_campaign.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  margin-bottom:16px;
}
.campaign-title{
  position:absolute;
  width:100%;
  padding-left:16%;
  top:5%;
  text-align:center;color:#766532;font-weight:700;
  font-size:min(26px,3.15vw);letter-spacing:1px;
  white-space:nowrap;
}
.campaign-msg{
  position:absolute;
  width:100%;
  padding-left:16%;
  top:32%;
  text-align:center;
  font-size:min(20px,2.15vw);
  font-weight:700;line-height:1.5;
  color:#1a1a2e;
}
.xshare-btn{
  position:absolute;left:53%;top:63%;
  transform:translate(-50%,-50%);
  width:42%;
  padding:0;background:none;border:none;cursor:pointer;
}
.xshare-btn img{display:block;width:100%;height:auto;}
.campaign-period{
  position:absolute;
  /* left:4%;right:4%; */
  width:100%;
  padding-left:5%;
  bottom:1%;
  text-align:center;
}
.campaign-period-label{
  font-size:min(19px,1.85vw);font-weight:700;
  color:#1b6e2c;letter-spacing:1px;margin-bottom:2%;
}

.result-actions{
  display:flex;gap:min(20px,1.95vw);
  width:90%;max-width:700px;margin:0 auto;
}
.result-action-btn{
  flex:1;display:block;
  padding:min(20px,1.95vw) 0;
  border:none;border-radius:999px;
  font-family:inherit;font-weight:700;
  font-size:min(27px,2.64vw);
  color:#fff;cursor:pointer;text-align:center;
  transition:transform .18s,opacity .18s;
}
.result-action-btn:hover{opacity:.9;transform:translateY(-2px);}
.result-action-retry{background:#143153;}
.result-action-back{background:#5a341d;}

.app-info{
  width:min(750px,73.17vw);
  margin:10% auto 4%;
  display:flex;align-items:stretch;gap:4%;
}
.app-info-icon{flex:0 0 auto;width:min(162px,15.80vw);}
.app-info-icon img{
  display:block;width:100%;height:auto;
  /* border-radius:12%; */
}

.app-info-table{
  flex:1;min-width:0;display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:center;
  row-gap:min(6px,0.59vw);
  column-gap:min(16px,1.56vw);
}
.app-info-row{display:contents;}
.app-info-label{
  background:#766532;color:#fff;font-weight:700;text-align:center;
  white-space:nowrap;
  padding:min(8px,0.78vw) min(16px,1.56vw);
  font-size:min(22px,2.15vw);
}
.app-info-value{
  color:#fff;font-weight:700;
  font-size:min(22px,2.15vw);
}

.app-store-links{
  width:min(600px,58.54vw);
  margin:16px auto 70px;
  display:flex;align-items:center;gap:4%;
}
.app-store-btn,.google-play-btn{
  display:block;flex:0 0 auto;
  height:min(101px,8.29vw);
}
.app-store-btn img,.google-play-btn img{display:block;width:auto;height:100%;}

/* ── フッター ── */
.footer{
  position:relative;z-index:1;
  text-align:center;
  padding:min(60px,3.13vw) min(30px,1.56vw);
}
.footer-links{
  font-size:clamp(12.6px,1.53vw,29.4px);letter-spacing:1px;color:#fff;
  font-weight:500;
  margin-bottom:min(39px,2.03vw);
}
.footer-links a{color:inherit;text-decoration:none;}
.footer-links a:hover{color:var(--gold);}
.footer-links .sep{margin:0 min(21px,1.09vw);color:rgba(245,237,216,.35);}
.footer-logos{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:min(42px,2.19vw);
  background:#fff;border-radius:min(30px,1.56vw);
  width:min(780px,40.63vw);padding:min(24px,1.25vw) min(48px,2.5vw);margin:0 auto min(39px,2.03vw);
}
.footer-logos img{height:min(73px,3.8vw);width:auto;display:block;flex-shrink:0;}
.footer-copyright{
  font-family:'Zen Maru Gothic',sans-serif;
  font-size:clamp(9.36px,0.9vw,17.28px);letter-spacing:1px;color:#fff;font-weight:600;
  margin-bottom:min(30px,1.56vw);
}
.footer-copyright-sub{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:1px;color:#fff;
  margin-bottom:min(30px,1.56vw);
}
.footer-trademark{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:600;
  font-size:clamp(9.36px,0.9vw,17.28px);letter-spacing:1px;color:#fff;
}

/* ── モバイル対応（max-width:1000px）。詳細は SHINDAN_STYLE_NOTES.md 参照 ── */
@media(max-width:1000px){

  /* ── 共通（footer） ── */
  .footer-logos{
    width:90%;max-width:400px;
    gap:16px;padding:14px 20px;
  }
  .footer-logos img{height:44px;}
  .footer-links{font-size:14px;}
  .footer-copyright,
  .footer-trademark{font-size:11px;}

  /* ── screen-intro ── */
  .intro-bg-top{
    background-size:121% auto;
    background-position:center 0%;
    aspect-ratio:1920/935;
  }
  /* .intro-bg-top{aspect-ratio:1920/950;} */
  .start-btn{width:70%;max-width:320px;}
  .intro-sub{left:-10vw;width:19vw;}
  .intro-title-img{
    width:85%;
    margin-top:min(285px,32vw);
  }
  .campaign-schedule-img{
    width:94%;
    aspect-ratio:auto;
    background-image:url("../img/shindan/bg_share.png");
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;flex-direction:column;align-items:center;
    gap:6px;
    padding:16px 12px;
    margin: 60px auto 78px;
  }
  .campaign-schedule-img::after{
    content:'';
    position:absolute;
    right:-8px;bottom:-75px;
    width:clamp(120px,24vw,240px);height:clamp(95px,19vw,190px);
    background-image:url("../img/shindan/amazon_card.png");
    background-size:contain;background-repeat:no-repeat;
    pointer-events:none;
  }
  .campaign-schedule-title,
  .campaign-schedule-msg,
  .campaign-schedule-period{
    position:static;
    width:auto;left:auto;right:auto;top:auto;bottom:auto;
    padding-left:0;
  }
  .campaign-schedule-title{
    font-size:18px;
    white-space:normal;
  }
  .campaign-schedule-msg{font-size:14px;}
  .campaign-schedule-period-label{font-size:12px;}
  .campaign-schedule-badge{
    position:absolute;
    left:-8px;top:-70px;
    width:clamp(90px,18vw,180px);height:clamp(90px,18vw,180px);
    background-image:url("../img/shindan/share_badge.png");
    background-size:contain;background-repeat:no-repeat;background-position:center;
  }
  .yourtype-title{font-size:clamp(14px,4.8vw,48px);}
  .yourtype-desc{font-size:clamp(11px,3.0vw,34px);}
  .tutorial-img{width:94%;margin-top:7vh;}

  /* ── screen-quiz ── */
  #screen-quiz .wrap{
    --quiz-bg-h:770;
  }
  .quiz-bg-top{
    background-size:130% auto;
    background-position:center 0%;
    aspect-ratio:1920 / var(--quiz-bg-h);
  }
  .quiz-bg-body{
    top:calc(min(1920px,100vw) * var(--quiz-bg-h) / 1920);
  }
  #quiz{
    margin-top:min(calc(var(--quiz-bg-h) * 1px),calc(var(--quiz-bg-h) / 1920 * 100vw));
  }
  .prog-img-wrap{width:90%;top:-1.52vw;}
  .q-num{font-size:16px;margin-top:min(10px,1vw);}
  .q-card{margin-top:-0.5vh;}
  .q-text{font-size:22px;margin-bottom:min(68px,6.8vw);}
  .q-text.q-text--long{font-size:16px;}
  .ch-btn{font-size:clamp(10px,3.2vw,16px);}
  .next-btn{width:60%;}

  /* ── screen-result ── */
  .res-announce img{
    aspect-ratio:1000/580;
    object-fit:cover;object-position:center;
  }
  .res-campaign{
    position:relative;left:auto;transform:none;
    width:min(750px,96vw);
    margin:-25px auto 16px;
    aspect-ratio:auto;
    background-image:url("../img/shindan/bg_result_campaign_nocard.png");
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;flex-direction:column;align-items:center;
    gap:10px;
    padding:20px 16px;
  }
  .res-campaign::after{
    content:'';
    position:absolute;
    left:-8px;top:15px;
    width:clamp(94px,24vw,240px);height:clamp(95px,19vw,190px);
    background-image:url("../img/shindan/amazon_card.png");
    background-size:contain;background-repeat:no-repeat;
    pointer-events:none;
  }
  .campaign-title,
  .campaign-msg,
  .xshare-btn,
  .campaign-period{
    position:static;
    width:auto;left:auto;right:auto;top:auto;bottom:auto;
    padding-left:0;transform:none;
  }
  .campaign-title{
    font-size:clamp(12px,3.0vw,24px);
    white-space:normal;
    padding-top:5px;
    padding-left:9vw;
  }
  .campaign-msg{font-size:clamp(11px,2.8vw,28px);margin-top:20px;}
  .xshare-btn{width:80%;/*margin:2vh 0;*/}
  .campaign-period-label{font-size:clamp(11px,2.6vw,26px);}
  .result-actions{width:94%;}
  .result-action-btn{font-size:min(32.4px,3.17vw);}
  .app-info{width:92%;justify-content:center;}
  .app-info-label,
  .app-info-value{font-size:clamp(11px,2.2vw,22px);}
  .app-info-table{flex:0 1 auto;}
  .app-store-links{width:92%;justify-content:center;}
  .app-store-btn,.google-play-btn{height:min(151.5px,12.44vw);}
}

@media(max-width:480px){
  .footer-copyright-sub{font-size:10px;}
}

/* ── 応募規約 レイヤーポップアップ ── */
.modal-overlay{
  display:none;
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;
  padding:24px;
}
.modal-overlay.show{display:flex;}
.modal-box{
  position:relative;
  background:#fff;color:#1a1a2e;
  width:min(680px,100%);
  max-height:85vh;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
}
.modal-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  font-size:28px;line-height:1;color:#666;
}
.modal-close:hover{color:#1a1a2e;}
.modal-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:48px 32px 40px;
}
.modal-title{
  font-size:clamp(16px,2vw,22px);font-weight:700;
  letter-spacing:1px;margin-bottom:20px;
  border-bottom:2px solid #1a1a2e;padding-bottom:12px;
}
.modal-lead{
  font-size:14px;line-height:1.9;color:#333;margin-bottom:16px;
  white-space:pre-line;
}