:root{
  --blue:#0b67c9;
  --deep:#0a3e91;
  --orange:#ff6f17;
  --yellow:#ffc83d;
  --pink:#ff72ae;
  --green:#2fb765;
  --red:#ef4c3e;
  --sky:#50bdf5;
  --cream:#fff6dc;
  --ink:#2b210f;
  --line:#cfb277;
  --shadow:0 16px 32px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(255,216,82,.5), transparent 18%),
    radial-gradient(circle at 90% 10%, rgba(80,189,245,.5), transparent 20%),
    linear-gradient(180deg,#dff5ff,#fff5da 55%,#fff);
}
button{font-family:inherit;cursor:pointer}
.phone-shell{
  width:min(430px,100vw);
  margin:0 auto;
  min-height:100vh;
  background:#111;
  box-shadow:0 0 38px rgba(0,0,0,.24);
  position:relative;
}
.app{
  min-height:100vh;
  background:#fff;
  overflow:hidden;
  position:relative;
}
.screen{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  animation:fadeIn .25s ease both;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.full-image{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center top;
}
.hotspot{
  position:absolute;
  border:none;
  background:rgba(255,255,255,0);
  border-radius:22px;
}
.hotspot:focus-visible{outline:4px solid rgba(255,130,0,.75)}
.home-start{left:10%;right:10%;bottom:11%;height:11%}
.home-how{left:25%;right:25%;bottom:4%;height:6%}
.char-card-hot{position:absolute;border:none;background:rgba(255,255,255,0);border-radius:20px}
.char1{left:6%;top:18%;width:42%;height:34%}
.char2{left:52%;top:18%;width:42%;height:34%}
.char3{left:6%;top:52%;width:42%;height:32%}
.char4{left:52%;top:52%;width:42%;height:32%}
.char-confirm{left:16%;right:16%;bottom:5%;height:9%}
.back-btn,.home-btn{
  position:absolute;
  z-index:20;
  top:22px;
  width:72px;height:72px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--blue);
  font-weight:1000;
  font-size:15px;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  border:3px solid rgba(180,145,85,.55);
}
.back-btn{left:18px}
.home-btn{right:18px}
.back-btn span,.home-btn span{display:block;font-size:26px;line-height:22px}

/* 共通デザイン背景 */
.fantasy-bg{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.9), transparent 16%),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.75), transparent 13%),
    linear-gradient(180deg,#bfeeff 0%,#ecf9ff 27%,#fff8e5 68%,#fff3ce 100%);
  padding:22px 20px 28px;
}
.fantasy-bg:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(#ffcf3b 2px, transparent 3px),
    radial-gradient(#4ebdff 2px, transparent 3px);
  background-size:44px 44px,62px 62px;
  opacity:.32;
  pointer-events:none;
}
.content{position:relative;z-index:2}
.logo-mini{
  margin:8px auto 8px;
  width:max-content;
  max-width:76%;
  padding:7px 14px 9px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff8d9,#ffd36c);
  border:3px solid #0f78d5;
  box-shadow:0 5px 0 #07589e, 0 12px 20px rgba(0,0,0,.14);
  text-align:center;
  transform:rotate(-1deg);
}
.logo-mini .l1{font-weight:1000;font-size:23px;color:#e94723;text-shadow:2px 2px 0 #fff}
.logo-mini .l2{font-weight:1000;font-size:22px;color:#13a243;text-shadow:2px 2px 0 #fff}
.logo-mini .l3{display:block;background:#0b67c9;color:#fff;border-radius:999px;padding:4px 12px;margin-top:2px;font-weight:1000}
.ribbon{
  width:max-content;
  max-width:92%;
  margin:0 auto 14px;
  padding:10px 22px;
  background:linear-gradient(180deg,#fff1b9,#ffd56c);
  border:3px solid #c9902d;
  border-radius:18px;
  font-size:28px;
  font-weight:1000;
  text-align:center;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
}

/* Question */
.question-screen{padding-top:18px}
.progress-wrap{
  margin:102px 0 20px;
}
.qtop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.qstar{
  margin:auto;
  width:88px;height:76px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:1000;font-size:30px;
  background:#ff9a16;
  clip-path:polygon(50% 0%,61% 30%,94% 30%,67% 49%,79% 84%,50% 63%,21% 84%,33% 49%,6% 30%,39% 30%);
  text-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.qcount{
  position:absolute;
  right:24px;
  top:96px;
  background:#fffdf5;
  border:3px solid #b99d6b;
  border-radius:999px;
  padding:10px 20px;
  font-size:26px;
  font-weight:1000;
}
.stars-line{
  display:flex;align-items:center;gap:7px;margin:8px 0 22px;
}
.star-dot{
  width:30px;height:30px;border-radius:50%;
  background:#d7d7d7;
  border:3px solid #bcbcbc;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:1000;font-size:15px;
}
.star-dot.done{background:#ff9815;border-color:#ffba22}
.star-linebar{height:4px;flex:1;background:#d1d1d1;border-radius:999px}
.question-card{
  background:#fffefa;
  border:3px solid #c9b89d;
  border-radius:30px;
  padding:24px 18px;
  margin-bottom:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  position:relative;
}
.question-card:after{
  content:"";
  position:absolute;left:60px;bottom:-20px;
  border-width:22px 18px 0 18px;
  border-style:solid;
  border-color:#c9b89d transparent transparent transparent;
}
.question-card h2{
  margin:0;
  font-size:25px;
  line-height:1.65;
  text-align:center;
  font-weight:1000;
}
.choices{display:grid;gap:12px}
.choice{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:76px;
  border-radius:22px;
  background:#fffef9;
  border:4px solid var(--c);
  padding:10px 14px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.choice-letter{
  width:52px;height:52px;border-radius:50%;
  background:var(--c);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:29px;font-weight:1000;
  text-shadow:2px 2px 0 rgba(0,0,0,.25);
  flex:0 0 auto;
}
.choice-icon{font-size:36px;line-height:1;flex:0 0 auto}
.choice-text{font-size:19px;font-weight:1000;line-height:1.35}
.guide{
  margin-top:16px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.speech{
  flex:1;
  background:#fffdf9;
  border:3px solid #c9b89d;
  border-radius:34px;
  padding:16px 18px;
  font-size:18px;
  line-height:1.6;
  font-weight:1000;
  position:relative;
  box-shadow:0 8px 15px rgba(0,0,0,.08);
}
.speech:after{
  content:"";
  position:absolute;right:-17px;bottom:34px;
  border-width:12px 0 12px 18px;
  border-style:solid;
  border-color:transparent transparent transparent #c9b89d;
}
.char{
  width:112px;height:138px;flex:0 0 auto;
}

/* CSSキャラクター */
.svg-char{width:100%;height:100%}

/* Loading */
.loading-bg{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 64%, rgba(61,222,255,.8), transparent 13%),
    radial-gradient(circle at 50% 45%, rgba(55,140,255,.75), transparent 30%),
    linear-gradient(180deg,#051a71,#0b43b1 58%,#06174e);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:24px;
}
.loading-title{
  font-size:34px;
  font-weight:1000;
  line-height:1.45;
  text-shadow:0 4px 12px rgba(0,0,0,.35);
}
.orb{
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 15%,#77ecff 16% 34%,#1aa2ff 35% 60%,#0c43b6 80%);
  box-shadow:0 0 60px #3bdfff;
  margin:24px auto;
  animation:pulse 1.1s ease infinite;
}
@keyframes pulse{50%{transform:scale(1.08)}}
.loadbar{
  width:78%;
  height:28px;
  border:4px solid #ffe3a2;
  background:#222;
  border-radius:999px;
  margin:22px auto 0;
  overflow:hidden;
}
.loadbar div{width:0;height:100%;background:linear-gradient(90deg,#7cf3ff,#fff);animation:load 1.6s ease forwards}
@keyframes load{to{width:100%}}

/* Result */
.result-screen{
  background:
    radial-gradient(circle at 50% 8%, #fff, transparent 28%),
    linear-gradient(180deg,#c8efff,#fff5d9 60%,#fff1c6);
  padding:22px 16px 24px;
}
.result-ribbon{
  margin:54px auto 12px;
  background:#0a64bd;
  color:#fff;
  padding:11px 22px;
  border-radius:12px;
  width:max-content;
  font-weight:1000;
  font-size:28px;
  box-shadow:0 7px 0 #063f7b;
}
.result-type{
  text-align:center;
  font-weight:1000;
  color:var(--theme);
  text-shadow:3px 3px 0 #fff, -1px -1px 0 #fff;
  font-size:42px;
  line-height:1.16;
  margin:5px 0;
}
.result-hero{
  display:flex;gap:8px;align-items:center;margin-top:4px;
}
.result-hero .bubble{
  flex:1;
  background:#fff7e8;
  border:3px solid #e5bf74;
  border-radius:26px;
  padding:16px;
  font-weight:1000;
  font-size:20px;
  line-height:1.6;
}
.result-hero .char{width:142px;height:172px}
.result-panel{
  background:#fff;
  border:3px solid #a9d5ff;
  border-radius:24px;
  padding:12px;
  margin-top:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.panel-title{
  display:inline-block;
  background:#0a64bd;
  color:#fff;
  border-radius:10px;
  padding:7px 14px;
  font-size:19px;
  font-weight:1000;
  margin-bottom:8px;
}
.job-chips{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.job-chip{
  text-align:center;
  border-right:2px dashed #b6d3ef;
  font-weight:1000;
  font-size:14px;
}
.job-chip:last-child{border-right:none}
.job-chip .emoji{font-size:36px;display:block}
.todo-list{margin:0;padding-left:1.3em;font-size:16px;font-weight:900;line-height:1.8}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bigbtn{
  border:none;
  border-radius:18px;
  min-height:58px;
  font-size:18px;
  font-weight:1000;
  color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.2);
}
.btn-orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.btn-blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.btn-green{background:linear-gradient(180deg,#43c56e,#189b3b)}

/* Card */
.card-screen{
  background:
    radial-gradient(circle at 50% 10%,#fff,transparent 25%),
    linear-gradient(180deg,#fff5cf,#fff);
  padding:22px 18px 24px;
}
.card-title{
  margin:50px auto 8px;
  background:#0a64bd;
  color:#fff;
  padding:10px 18px;
  border-radius:12px;
  width:max-content;
  font-size:23px;
  font-weight:1000;
}
.hero-card{
  border:4px solid #f2c14b;
  border-radius:26px;
  background:#fffaf0;
  padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  text-align:center;
}
.hero-card h1{
  font-size:37px;
  color:var(--theme);
  text-shadow:3px 3px 0 #fff;
  line-height:1.15;
  margin:8px 0;
}
.card-main{display:flex;align-items:center;gap:8px;text-align:left}
.card-main .char{width:156px;height:186px}
.card-message{
  flex:1;
  font-size:20px;
  line-height:1.55;
  font-weight:1000;
}
.card-box{
  background:#fff;
  border:3px solid #e5bf74;
  border-radius:22px;
  padding:12px;
  margin-top:10px;
  text-align:left;
}
.card-box h3{
  display:inline-block;
  margin:0 0 8px;
  background:#22a943;color:#fff;padding:6px 13px;border-radius:999px;
  font-size:18px;
}
.card-row{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:8px;
  align-items:center;
  font-weight:1000;
  font-size:17px;
  padding:6px 0;
  border-bottom:2px dashed #e7d7af;
}
.card-row:last-child{border-bottom:none}

/* Jobs */
.jobs-screen{
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(121,211,255,.6),rgba(255,255,255,0) 30%),
    linear-gradient(0deg,#8ddd7d 0 12%,#fff5d7 12% 100%);
  padding:22px 16px 80px;
}
.jobs-logo{
  margin:36px auto 12px;
  text-align:center;
  font-size:30px;
  font-weight:1000;
  color:#0a64bd;
  text-shadow:3px 3px 0 #fff;
}
.jobs-board{
  background:rgba(255,255,255,.92);
  border:3px dashed #f0cc74;
  border-radius:28px;
  padding:16px 14px;
  box-shadow:0 12px 24px rgba(0,0,0,.1);
}
.jobs-board h1{text-align:center;color:#0a64bd;font-size:34px;margin:0 0 6px}
.jobs-board p{text-align:center;font-weight:900;margin:0 0 16px}
.job-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.job-btn{
  border:3px solid #cfe6fb;
  background:#fff;
  border-radius:16px;
  min-height:98px;
  padding:8px 5px;
  font-weight:1000;
  line-height:1.25;
  box-shadow:0 5px 12px rgba(0,0,0,.07);
}
.job-btn .emoji{font-size:32px;display:block;margin-bottom:5px}
.bottom-nav{
  position:absolute;
  left:16px;right:16px;bottom:14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fffdf4;
  border:3px solid #e7cb88;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}
.bottom-nav button{
  border:none;
  background:#fffdf4;
  padding:8px 2px;
  font-size:11px;
  font-weight:1000;
  color:#5b461e;
}
.bottom-nav .active{background:#e8f5ff;color:#0a64bd}
.bottom-nav .ico{display:block;font-size:26px}

/* Job detail */
.detail-screen{
  min-height:100vh;
  background:linear-gradient(180deg,#bdefff,#fff6d7 62%,#fff);
  padding:86px 18px 24px;
}
.detail-card{
  background:#fffdf2;
  border:3px solid #d6ae43;
  border-radius:28px;
  padding:18px;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
.detail-head{display:flex;gap:12px;align-items:center}
.detail-emoji{font-size:72px}
.detail-title{font-size:40px;font-weight:1000;line-height:1.1;margin:0}
.detail-lead{font-size:20px;line-height:1.55;font-weight:1000;margin:8px 0 14px}
.detail-illust{
  height:210px;
  border:3px solid #9ed1ff;
  border-radius:18px;
  background:
    linear-gradient(180deg,#9ee3ff,#e8f9ff 50%,#d3b077 51%,#d3b077 100%);
  position:relative;
  overflow:hidden;
}
.crane{position:absolute;right:14px;top:18px;font-size:90px}
.workers{position:absolute;left:18px;bottom:10px;font-size:64px}
.building{position:absolute;right:70px;bottom:20px;font-size:80px}
.detail-section{
  background:#fff;
  border:3px solid #a7d6ff;
  border-radius:18px;
  margin-top:12px;
  padding:12px;
}
.detail-section h3{margin:0 0 8px;color:#0a64bd;font-size:20px}
.detail-section ul{margin:0;padding-left:1.3em;font-size:17px;font-weight:900;line-height:1.7}

/* Save placeholder */
.save-screen{
  min-height:100vh;
  background:linear-gradient(180deg,#fff8df,#fff);
  padding:80px 20px;
  text-align:center;
}
.save-panel{
  background:#fff;
  border:3px solid #e8c36a;
  border-radius:28px;
  padding:26px 18px;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
.save-panel h1{font-size:30px;color:#159344;line-height:1.45}
.save-panel p{font-size:17px;line-height:1.8;font-weight:800}


.detail-desc{
  background:#fff;
  border:3px solid #a7d6ff;
  border-radius:18px;
  padding:12px;
  font-size:17px;
  line-height:1.75;
  font-weight:800;
  margin:10px 0 12px;
}
.bgicon{
  position:absolute;
  font-size:86px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));
}
.bgicon.b1{left:30px;bottom:25px}
.bgicon.b2{left:50%;top:48%;transform:translate(-50%,-50%);font-size:110px}
.bgicon.b3{right:28px;bottom:25px}
.save-panel canvas{
  display:block;
  margin-top:16px;
}


/* v6: 本番寄せ画像を活用した画面 */
.full-image.v6{
  background-size:cover;
  background-position:center top;
}
.question-v6-wrap{
  min-height:100vh;
  background-image:url('assets/question_screen_v6.png');
  background-size:cover;
  background-position:center top;
  padding:0 24px;
}
.question-overlay{
  position:absolute;
  left:7%;
  right:7%;
  top:34.5%;
  min-height:17%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:none;
}
.question-overlay h2{
  margin:0;
  font-size:26px;
  line-height:1.55;
  font-weight:1000;
  color:#2b210f;
  text-shadow:2px 2px 0 rgba(255,255,255,.85);
}
.q-num-v6{
  position:absolute;
  top:17.5%;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:31px;
  font-weight:1000;
  text-shadow:2px 3px 0 #b95000;
  pointer-events:none;
}
.q-count-v6{
  position:absolute;
  top:18.2%;
  right:11%;
  font-size:30px;
  font-weight:1000;
  color:#2b210f;
  pointer-events:none;
}
.choice-v6{
  position:absolute;
  left:8%;
  right:8%;
  height:10.2%;
  border:none;
  border-radius:24px;
  background:rgba(255,255,255,0);
}
.choice-v6.c1{top:51%}
.choice-v6.c2{top:62.8%}
.choice-v6.c3{top:74.6%}
.choice-v6.c4{top:86.4%}
.choice-text-v6{
  position:absolute;
  left:31%;
  right:10%;
  font-size:20px;
  font-weight:1000;
  line-height:1.35;
  color:#2b210f;
  text-shadow:1px 1px 0 rgba(255,255,255,.85);
  pointer-events:none;
}
.choice-text-v6.t1{top:54.6%}
.choice-text-v6.t2{top:66.4%}
.choice-text-v6.t3{top:78.2%}
.choice-text-v6.t4{top:90%}
.result-v6-dynamic{
  min-height:100vh;
  background-image:url('assets/result_screen_v6.png');
  background-size:cover;
  background-position:center top;
}
.result-v6-type{
  position:absolute;
  top:19.5%;
  left:6%;
  right:6%;
  text-align:center;
  font-size:42px;
  line-height:1.14;
  font-weight:1000;
  color:var(--theme);
  text-shadow:3px 3px 0 #fff, -1px -1px 0 #fff, 0 4px 0 rgba(255,170,0,.45);
  pointer-events:none;
}
.result-v6-catch{
  position:absolute;
  top:39.8%;
  left:10%;
  width:42%;
  font-size:20px;
  line-height:1.6;
  font-weight:1000;
  color:#2b210f;
  pointer-events:none;
}
.result-v6-jobs{
  position:absolute;
  left:9%;
  right:9%;
  top:61%;
  height:15%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  text-align:center;
  pointer-events:none;
}
.result-v6-job{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1.25;
  font-weight:1000;
}
.result-v6-job .emoji{font-size:40px;line-height:1}
.result-v6-todos{
  position:absolute;
  top:79%;
  left:10%;
  right:10%;
  font-size:17px;
  line-height:1.65;
  font-weight:1000;
  color:#2b210f;
  pointer-events:none;
}
.result-v6-actions{
  position:absolute;
  left:5%;
  right:5%;
  bottom:2.2%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.result-v6-actions button{
  height:62px;
  border:none;
  border-radius:18px;
  background:rgba(255,255,255,0);
}
.jobs-v6-wrap{
  min-height:100vh;
  background-image:url('assets/jobs_screen_v6.png');
  background-size:cover;
  background-position:center top;
}
.jobs-v6-btn{
  position:absolute;
  border:none;
  border-radius:20px;
  background:rgba(255,255,255,0);
}
.jobs-v6-btn:focus-visible,.choice-v6:focus-visible,.result-v6-actions button:focus-visible{
  outline:4px solid rgba(255,130,0,.75);
  background:rgba(255,255,255,.18);
}
.jobv1{left:7%;top:27%;width:27%;height:11%}
.jobv2{left:36.5%;top:27%;width:27%;height:11%}
.jobv3{left:66%;top:27%;width:27%;height:11%}
.jobv4{left:7%;top:41%;width:27%;height:11%}
.jobv5{left:36.5%;top:41%;width:27%;height:11%}
.jobv6{left:66%;top:41%;width:27%;height:11%}
.jobv7{left:7%;top:55%;width:27%;height:11%}
.jobv8{left:36.5%;top:55%;width:27%;height:11%}
.jobv9{left:66%;top:55%;width:27%;height:11%}
.jobv10{left:21%;top:69%;width:27%;height:11%}
.jobv11{left:52%;top:69%;width:34%;height:11%}
.jobs-v6-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.jobs-v6-bottom button{
  border:none;
  background:rgba(255,255,255,0);
}
.detail-v6{
  min-height:100vh;
  background-image:url('assets/job_build_screen_v6.png');
  background-size:cover;
  background-position:center top;
}
.detail-v6-card{
  position:absolute;
  left:7%;
  right:7%;
  top:25%;
  bottom:10%;
  background:rgba(255,255,255,0);
}
.detail-v6-title{
  position:absolute;
  top:10.5%;
  left:20%;
  right:12%;
  text-align:center;
  color:#fff;
  font-size:36px;
  font-weight:1000;
  text-shadow:2px 3px 0 #063f7b;
  pointer-events:none;
}
.detail-v6-lead{
  position:absolute;
  top:47.5%;
  left:10%;
  right:10%;
  text-align:center;
  font-size:20px;
  line-height:1.55;
  font-weight:1000;
  color:#2b210f;
  text-shadow:1px 1px 0 #fff;
  pointer-events:none;
}
.detail-v6-examples{
  position:absolute;
  top:65%;
  left:12%;
  right:12%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  text-align:center;
  pointer-events:none;
}
.detail-v6-examples div{
  font-size:14px;
  font-weight:1000;
  line-height:1.25;
}
.detail-v6-examples .emoji{font-size:34px;display:block}
.detail-v6-todos{
  position:absolute;
  top:80.2%;
  left:18%;
  right:12%;
  font-size:17px;
  line-height:1.8;
  font-weight:1000;
  pointer-events:none;
}
.detail-v6-back{
  position:absolute;
  left:30%;
  right:30%;
  bottom:2.5%;
  height:7%;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0);
}
.card-v6{
  min-height:100vh;
  background-image:url('assets/result_screen_v6.png');
  background-size:cover;
  background-position:center top;
}
.v6-note{
  position:absolute;
  left:5%;
  right:5%;
  top:5%;
  background:rgba(255,255,255,.96);
  border:3px solid #ffd36c;
  border-radius:22px;
  padding:12px;
  font-size:13px;
  line-height:1.6;
  font-weight:800;
  z-index:30;
}


/* v7: 8タイプ結果背景・11ジャンル詳細背景を個別画像化 */
.result-v7-dynamic{
  min-height:100vh;
  background-size:cover;
  background-position:center top;
}
.result-v7-actions{
  position:absolute;
  left:5%;
  right:5%;
  bottom:1.8%;
  height:8%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.result-v7-actions button{
  border:none;
  border-radius:20px;
  background:rgba(255,255,255,0);
}
.result-v7-actions button:focus-visible{
  outline:4px solid rgba(255,130,0,.75);
  background:rgba(255,255,255,.16);
}
.job-detail-v7{
  min-height:100vh;
  background-size:cover;
  background-position:center top;
}
.job-detail-v7 .detail-v7-back{
  position:absolute;
  left:30%;
  right:30%;
  bottom:2.5%;
  height:7%;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0);
}
.job-detail-v7 .detail-v7-back:focus-visible{
  outline:4px solid rgba(255,130,0,.75);
  background:rgba(255,255,255,.16);
}
.v7-status{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:50;
  background:rgba(255,255,255,.88);
  border:2px solid #ffd36c;
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  font-weight:900;
  color:#7a4b00;
  display:none;
}


/* v8: 診断カード画面を8タイプ別の本番寄せデザインへ */
.card-v8-screen{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.9), transparent 20%),
    linear-gradient(180deg, var(--soft1), var(--soft2) 58%, #fff8db);
  padding:22px 18px 24px;
  overflow:hidden;
}
.card-v8-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.95) 2px, transparent 3px),
    radial-gradient(var(--spark) 2px, transparent 3px);
  background-size:44px 44px,70px 70px;
  background-position:8px 12px,28px 35px;
  opacity:.45;
}
.card-v8-title{
  position:relative;
  z-index:2;
  margin:50px auto 10px;
  width:max-content;
  max-width:86%;
  background:#0a64bd;
  color:#fff;
  padding:9px 18px;
  border-radius:13px;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 6px 0 #063f7b;
  text-align:center;
}
.card-v8-main{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg, #fffdf4, #fff);
  border:5px solid var(--theme);
  border-radius:30px;
  padding:15px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.card-v8-main:before{
  content:"";
  position:absolute;
  inset:10px;
  border:2px dashed rgba(255,190,60,.65);
  border-radius:22px;
  pointer-events:none;
}
.card-v8-head{
  text-align:center;
  position:relative;
  z-index:2;
}
.card-v8-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:linear-gradient(180deg,#fff8d8,#ffd36c);
  color:#805000;
  border:3px solid #d6a233;
  border-radius:999px;
  padding:6px 16px;
  font-size:15px;
  font-weight:1000;
}
.card-v8-type{
  margin:10px 0 5px;
  color:var(--theme);
  font-size:34px;
  line-height:1.12;
  font-weight:1000;
  text-shadow:3px 3px 0 #fff, 0 4px 0 rgba(255,174,0,.22);
}
.card-v8-sub{
  font-size:17px;
  line-height:1.55;
  font-weight:1000;
  color:#392511;
  margin:8px 0 10px;
}
.card-v8-hero{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:2;
}
.card-v8-message{
  background:#fff9e9;
  border:3px solid #e1bd66;
  border-radius:22px;
  padding:12px;
  font-size:18px;
  line-height:1.6;
  font-weight:1000;
  position:relative;
}
.card-v8-message:after{
  content:"";
  position:absolute;
  right:-17px;
  top:40%;
  border-width:12px 0 12px 18px;
  border-style:solid;
  border-color:transparent transparent transparent #e1bd66;
}
.card-v8-avatar{
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-v8-avatar .char{
  width:150px;
  height:186px;
}
.card-v8-panel{
  position:relative;
  z-index:2;
  margin-top:12px;
  background:#fff;
  border:3px solid #a7d6ff;
  border-radius:22px;
  padding:12px;
}
.card-v8-panel.strengths{border-color:#f1c36a}
.card-v8-panel-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--theme);
  color:#fff;
  border-radius:999px;
  padding:6px 14px;
  font-size:17px;
  font-weight:1000;
  margin-bottom:8px;
  box-shadow:0 4px 0 rgba(0,0,0,.16);
}
.card-v8-list{
  display:grid;
  gap:6px;
}
.card-v8-list-row{
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:2px dashed #ead8aa;
  font-size:16px;
  line-height:1.4;
  font-weight:1000;
}
.card-v8-list-row:last-child{border-bottom:none}
.card-v8-list-row .emoji{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff4cf;
  border:2px solid #ffd46b;
  font-size:20px;
}
.card-v8-job-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.card-v8-job{
  text-align:center;
  background:#f8fbff;
  border:2px solid #d9ecff;
  border-radius:16px;
  padding:8px 4px;
  font-size:13px;
  line-height:1.25;
  font-weight:1000;
}
.card-v8-job .emoji{
  display:block;
  font-size:33px;
  line-height:1.05;
  margin-bottom:4px;
}
.card-v8-footer{
  position:relative;
  z-index:2;
  margin-top:12px;
  text-align:center;
  font-size:18px;
  line-height:1.55;
  font-weight:1000;
  color:#2b210f;
}
.card-v8-actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.card-v8-actions .wide{
  grid-column:1 / -1;
}
.card-v8-actions button{
  min-height:56px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:18px;
  font-weight:1000;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.card-v8-orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.card-v8-blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.card-v8-green{background:linear-gradient(180deg,#43c56e,#189b3b)}
.card-v8-purple{background:linear-gradient(180deg,#9a6cf0,#6f3bd2)}
.card-v8-deco{
  position:absolute;
  z-index:1;
  font-size:42px;
  opacity:.88;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.14));
}
.card-v8-deco.d1{left:18px;top:120px}
.card-v8-deco.d2{right:24px;top:140px}
.card-v8-deco.d3{left:18px;bottom:88px}
.card-v8-deco.d4{right:24px;bottom:86px}
@media (max-width:390px){
  .card-v8-type{font-size:30px}
  .card-v8-message{font-size:16px}
  .card-v8-avatar .char{width:130px;height:164px}
  .card-v8-list-row{font-size:15px}
}


/* v8_question_fixed: 質問画面を画像重ねではなくHTML/CSSで再構築 */
.question-fixed{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 9%, rgba(255,255,255,.9), transparent 16%),
    radial-gradient(circle at 86% 15%, rgba(255,255,255,.75), transparent 14%),
    linear-gradient(180deg,#8edcff 0%,#dff6ff 26%,#fff4d5 68%,#fff 100%);
  padding:22px 18px 28px;
}
.question-fixed:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#ffcc3d 2px, transparent 3px) 6px 8px/48px 48px,
    radial-gradient(#59bfff 2px, transparent 3px) 24px 28px/64px 64px;
  opacity:.42;
}
.question-fixed .q-content{
  position:relative;
  z-index:2;
}
.q-logo{
  margin:48px auto 8px;
  width:max-content;
  max-width:78%;
  padding:7px 14px 9px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff8d9,#ffd36c);
  border:3px solid #0f78d5;
  box-shadow:0 5px 0 #07589e,0 12px 20px rgba(0,0,0,.14);
  text-align:center;
  transform:rotate(-1deg);
}
.q-logo .l1{
  font-weight:1000;
  font-size:23px;
  color:#e94723;
  text-shadow:2px 2px 0 #fff;
}
.q-logo .l2{
  font-weight:1000;
  font-size:22px;
  color:#13a243;
  text-shadow:2px 2px 0 #fff;
}
.q-logo .l3{
  display:block;
  background:#0b67c9;
  color:#fff;
  border-radius:999px;
  padding:4px 12px;
  margin-top:2px;
  font-weight:1000;
}
.q-status{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-top:12px;
  gap:10px;
}
.q-star-badge{
  justify-self:center;
  min-width:106px;
  height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:29px;
  font-weight:1000;
  background:linear-gradient(180deg,#ffac2f,#ff7f12);
  border:4px solid #fff2b3;
  border-radius:999px;
  box-shadow:0 6px 0 #cc6500, 0 10px 18px rgba(0,0,0,.14);
  text-shadow:2px 2px 0 rgba(0,0,0,.22);
  letter-spacing:.02em;
}
.q-count-pill{
  justify-self:end;
  background:#fffaf1;
  border:3px solid #b8914f;
  border-radius:999px;
  padding:8px 17px;
  font-size:24px;
  font-weight:1000;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.q-progress{
  display:flex;
  align-items:center;
  gap:4px;
  margin:12px 2px 16px;
}
.q-progress-dot{
  width:26px;
  height:26px;
  border-radius:50%;
  background:#d5d5d5;
  border:3px solid #b6b6b6;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:1000;
}
.q-progress-dot.done{
  background:#ff9415;
  border-color:#ffbd31;
}
.q-progress-line{
  height:4px;
  flex:1;
  background:#c9c9c9;
  border-radius:999px;
}
.q-card-fixed{
  background:#fffdf6;
  border:4px solid #e1bd66;
  border-radius:30px;
  padding:22px 16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  position:relative;
}
.q-card-fixed:after{
  content:"";
  position:absolute;
  left:55px;
  bottom:-18px;
  border-width:18px 16px 0 16px;
  border-style:solid;
  border-color:#e1bd66 transparent transparent transparent;
}
.q-card-fixed h2{
  margin:0;
  font-size:23px;
  line-height:1.55;
  text-align:center;
  font-weight:1000;
  color:#2b210f;
}
.q-choices-fixed{
  display:grid;
  gap:11px;
  margin-top:22px;
}
.q-choice-fixed{
  width:100%;
  min-height:70px;
  border-radius:22px;
  border:4px solid var(--choice);
  background:#fffdf8;
  display:grid;
  grid-template-columns:54px 42px 1fr;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  box-shadow:0 7px 16px rgba(0,0,0,.1);
  text-align:left;
}
.q-choice-fixed .letter{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--choice);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  font-weight:1000;
  text-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.q-choice-fixed .icon{
  font-size:31px;
  line-height:1;
}
.q-choice-fixed .txt{
  font-size:18px;
  line-height:1.35;
  font-weight:1000;
  color:#2b210f;
}
.q-guide-fixed{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 92px;
  align-items:end;
  gap:6px;
}
.q-guide-fixed .balloon{
  background:#fffdf6;
  border:3px solid #d9b36b;
  border-radius:26px;
  padding:12px 14px;
  font-size:16px;
  line-height:1.55;
  font-weight:1000;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.q-guide-fixed .char{
  width:92px;
  height:116px;
}
@media (max-width:390px){
  .q-logo{margin-top:44px}
  .q-card-fixed h2{font-size:21px}
  .q-choice-fixed{grid-template-columns:50px 36px 1fr;min-height:66px}
  .q-choice-fixed .txt{font-size:16px}
  .q-guide-fixed .balloon{font-size:14px}
}


/* v9: 診断カード本番寄せデザイン */
.card-final-screen{
  min-height:100vh;
  padding:22px 16px 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.95), transparent 18%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.55), transparent 13%),
    linear-gradient(180deg, var(--softA), var(--softB) 58%, #fff8df);
}
.card-final-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(var(--theme) 1.7px, transparent 2.7px) 8px 12px/56px 56px,
    radial-gradient(#fff 2px, transparent 3px) 30px 34px/72px 72px,
    radial-gradient(#ffc83d 2px, transparent 3px) 16px 26px/86px 86px;
  opacity:.28;
}
.card-final-title{
  position:relative;
  z-index:2;
  margin:50px auto 10px;
  width:max-content;
  max-width:88%;
  padding:10px 20px;
  background:#0a64bd;
  color:#fff;
  border-radius:14px;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 7px 0 #063f7b, 0 12px 18px rgba(0,0,0,.16);
}
.card-final{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 25% 8%, rgba(255,255,255,.98), transparent 19%),
    linear-gradient(180deg,#fffdf3,#fffaf0 52%,#fff);
  border:5px solid var(--theme);
  border-radius:32px;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  padding:15px;
  overflow:hidden;
}
.card-final:before{
  content:"";
  position:absolute;
  inset:11px;
  border:2px dashed rgba(214,162,51,.65);
  border-radius:24px;
  pointer-events:none;
}
.card-final:after{
  content:"";
  position:absolute;
  right:-54px;
  top:-54px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--theme);
  opacity:.12;
}
.card-cert{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}
.card-cert span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8d2,#ffd866);
  border:3px solid #d6a233;
  color:#805000;
  font-size:15px;
  font-weight:1000;
  box-shadow:0 4px 0 rgba(128,80,0,.25);
}
.card-final-type{
  position:relative;
  z-index:2;
  margin:12px 0 4px;
  text-align:center;
  color:var(--theme);
  font-size:33px;
  line-height:1.12;
  font-weight:1000;
  text-shadow:3px 3px 0 #fff, 0 4px 0 rgba(255,174,0,.22);
}
.card-final-catch{
  position:relative;
  z-index:2;
  margin:8px auto 10px;
  text-align:center;
  font-size:15px;
  line-height:1.55;
  font-weight:1000;
  color:#4a3317;
  max-width:92%;
}
.card-final-visual{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:8px;
  align-items:center;
  margin-top:6px;
}
.card-final-message{
  background:#fff9e9;
  border:3px solid #e1bd66;
  border-radius:23px;
  padding:12px;
  font-size:17px;
  line-height:1.6;
  font-weight:1000;
  position:relative;
  box-shadow:0 7px 14px rgba(0,0,0,.07);
}
.card-final-message:after{
  content:"";
  position:absolute;
  right:-17px;
  top:42%;
  border-width:12px 0 12px 18px;
  border-style:solid;
  border-color:transparent transparent transparent #e1bd66;
}
.card-final-char{
  min-height:168px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.1));
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-final-char .char{
  width:148px;
  height:184px;
}
.card-final-panel{
  position:relative;
  z-index:2;
  margin-top:12px;
  border-radius:22px;
  background:#fff;
  border:3px solid #a7d6ff;
  padding:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.card-final-panel.strength{border-color:#f1c36a}
.card-final-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--theme);
  color:#fff;
  font-size:17px;
  font-weight:1000;
  box-shadow:0 4px 0 rgba(0,0,0,.16);
  margin-bottom:8px;
}
.card-final-strengths{
  display:grid;
  gap:6px;
}
.card-final-strength{
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:8px;
  border-bottom:2px dashed #ead8aa;
  padding:6px 0;
  font-size:15.5px;
  line-height:1.42;
  font-weight:1000;
}
.card-final-strength:last-child{border-bottom:none}
.card-final-strength .mini-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff4cf;
  border:2px solid #ffd46b;
  font-size:20px;
}
.card-final-jobs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.card-final-job{
  background:#f8fbff;
  border:2px solid #d9ecff;
  border-radius:16px;
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:12.5px;
  line-height:1.25;
  font-weight:1000;
}
.card-final-job .emoji{
  font-size:32px;
  line-height:1;
  margin-bottom:4px;
}
.card-final-motto{
  position:relative;
  z-index:2;
  margin-top:10px;
  background:linear-gradient(180deg,#fff8d7,#ffeaa2);
  border:3px solid #f1c36a;
  border-radius:20px;
  padding:10px 12px;
  font-size:16px;
  line-height:1.5;
  font-weight:1000;
  text-align:center;
}
.card-final-actions{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.card-final-actions button{
  border:none;
  min-height:56px;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.card-final-actions .wide{grid-column:1 / -1}
.card-final-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.card-final-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.card-final-actions .green{background:linear-gradient(180deg,#43c56e,#189b3b)}
.card-final-deco{
  position:absolute;
  z-index:1;
  font-size:42px;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.12));
  opacity:.9;
}
.card-final-deco.d1{left:15px;top:120px}
.card-final-deco.d2{right:18px;top:125px}
.card-final-deco.d3{left:16px;bottom:92px}
.card-final-deco.d4{right:18px;bottom:90px}
.save-final-screen{
  min-height:100vh;
  padding:80px 18px 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.95), transparent 20%),
    linear-gradient(180deg,var(--softA),var(--softB) 60%,#fff);
}
.save-final-panel{
  position:relative;
  z-index:2;
  background:#fff;
  border:4px solid var(--theme);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  text-align:center;
}
.save-final-panel h1{
  margin:0 0 8px;
  font-size:30px;
  color:var(--theme);
  line-height:1.35;
  font-weight:1000;
}
.save-final-panel p{
  font-size:15px;
  line-height:1.8;
  font-weight:800;
  margin:0 0 12px;
}
.save-final-panel canvas{
  width:100%;
  display:block;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  background:#fff;
}
@media (max-width:390px){
  .card-final-type{font-size:29px}
  .card-final-message{font-size:15.5px}
  .card-final-char .char{width:130px;height:164px}
  .card-final-strength{font-size:14.5px}
  .card-final-job{font-size:11.5px}
}


/* v10: 診断カードを本番寄せに再設計 / 遊び方ページ追加 */
.card-premium-screen{
  min-height:100vh;
  padding:20px 16px 28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg,var(--softA),var(--softB) 56%,#fff7d9);
}
.card-premium-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#fff 2px, transparent 3px) 15px 18px/46px 46px,
    radial-gradient(var(--theme) 1.8px, transparent 3px) 28px 36px/70px 70px,
    radial-gradient(#ffd24b 2px, transparent 3px) 8px 8px/86px 86px;
  opacity:.36;
}
.card-premium-title{
  position:relative;
  z-index:3;
  margin:48px auto 9px;
  width:max-content;
  max-width:90%;
  padding:8px 18px 10px;
  background:#0a64bd;
  color:#fff;
  border-radius:14px;
  font-size:23px;
  font-weight:1000;
  box-shadow:0 7px 0 #063f7b, 0 12px 18px rgba(0,0,0,.16);
}
.hero-card{
  position:relative;
  z-index:2;
  min-height:705px;
  border-radius:34px;
  border:6px solid var(--theme);
  background:
    radial-gradient(circle at 30% 7%, rgba(255,255,255,.98), transparent 20%),
    linear-gradient(180deg,#fffefa,#fff4df 48%,#ffffff);
  box-shadow:0 18px 38px rgba(0,0,0,.2);
  overflow:hidden;
  padding:16px 16px 18px;
}
.hero-card:before{
  content:"";
  position:absolute;
  inset:12px;
  border:3px dashed rgba(214,162,51,.65);
  border-radius:25px;
  pointer-events:none;
}
.hero-card .corner{
  position:absolute;
  width:84px;
  height:84px;
  border-radius:50%;
  background:var(--theme);
  opacity:.15;
}
.hero-card .c1{left:-34px;top:-34px}
.hero-card .c2{right:-34px;top:-34px}
.hero-card .c3{left:-34px;bottom:-34px}
.hero-card .c4{right:-34px;bottom:-34px}
.hero-card-top{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
}
.hero-card-top span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff8d2,#ffd866);
  border:3px solid #d6a233;
  color:#805000;
  font-size:15px;
  font-weight:1000;
  box-shadow:0 4px 0 rgba(128,80,0,.25);
}
.hero-card-name{
  position:relative;
  z-index:3;
  margin:11px 0 5px;
  text-align:center;
  color:var(--theme);
  font-size:32px;
  line-height:1.12;
  font-weight:1000;
  text-shadow:3px 3px 0 #fff, 0 4px 0 rgba(255,174,0,.24);
}
.hero-card-typecopy{
  position:relative;
  z-index:3;
  text-align:center;
  font-weight:1000;
  color:#4a3317;
  font-size:15px;
  line-height:1.5;
  margin-bottom:7px;
}
.hero-card-main{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:center;
}
.hero-card-message{
  background:#fff9e9;
  border:4px solid #e1bd66;
  border-radius:24px;
  padding:12px;
  font-size:16.5px;
  line-height:1.55;
  font-weight:1000;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
  position:relative;
}
.hero-card-message:after{
  content:"";
  position:absolute;
  right:-18px;
  top:42%;
  border-width:12px 0 12px 18px;
  border-style:solid;
  border-color:transparent transparent transparent #e1bd66;
}
.hero-card-illustration{
  min-height:160px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.96), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.15));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-card-illustration .char{
  width:142px;
  height:178px;
  position:relative;
  z-index:2;
}
.hero-card-illustration .main-emoji{
  position:absolute;
  right:2px;
  bottom:4px;
  font-size:52px;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.13));
}
.hero-section{
  position:relative;
  z-index:3;
  background:#fff;
  border-radius:22px;
  padding:11px;
  margin-top:11px;
  box-shadow:0 7px 14px rgba(0,0,0,.07);
}
.hero-section.strength{border:4px solid #f1c36a}
.hero-section.jobs{border:4px solid #a7d6ff}
.hero-section-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:var(--theme);
  color:#fff;
  font-size:16px;
  font-weight:1000;
  box-shadow:0 4px 0 rgba(0,0,0,.16);
  margin-bottom:7px;
}
.hero-strength-list{
  display:grid;
  gap:5px;
}
.hero-strength-row{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  align-items:center;
  padding:5px 0;
  border-bottom:2px dashed #ead8aa;
  font-size:14.8px;
  line-height:1.36;
  font-weight:1000;
}
.hero-strength-row:last-child{border-bottom:none}
.hero-strength-row .mini{
  width:32px;
  height:32px;
  border-radius:12px;
  background:#fff4cf;
  border:2px solid #ffd46b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.hero-job-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.hero-job{
  background:#f8fbff;
  border:2px solid #d9ecff;
  border-radius:16px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size:12px;
  line-height:1.22;
  font-weight:1000;
  text-align:center;
}
.hero-job .emoji{
  font-size:30px;
  line-height:1;
  margin-bottom:4px;
}
.hero-mission{
  position:relative;
  z-index:3;
  margin-top:11px;
  background:linear-gradient(180deg,#fff9d7,#ffeaa1);
  border:4px solid #f1c36a;
  border-radius:22px;
  padding:10px 12px;
  text-align:center;
  font-size:15.5px;
  line-height:1.45;
  font-weight:1000;
  color:#2b210f;
}
.hero-card-actions{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.hero-card-actions button{
  border:none;
  min-height:56px;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.hero-card-actions .wide{grid-column:1 / -1}
.hero-card-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.hero-card-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.hero-card-actions .green{background:linear-gradient(180deg,#43c56e,#189b3b)}
.howto-screen{
  min-height:100vh;
  padding:22px 18px 28px;
  background:
    radial-gradient(circle at 50% 7%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg,#85d9ff,#e7f8ff 32%,#fff3cf 68%,#fff);
  overflow:hidden;
}
.howto-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#ffd24b 2px, transparent 3px) 8px 12px/52px 52px,
    radial-gradient(#59bfff 2px, transparent 3px) 28px 34px/78px 78px;
  opacity:.36;
}
.howto-wrap{
  position:relative;
  z-index:2;
}
.howto-title{
  margin:50px auto 14px;
  text-align:center;
}
.howto-title .main{
  display:inline-block;
  background:#0a64bd;
  color:#fff;
  padding:10px 22px;
  border-radius:16px;
  font-size:28px;
  font-weight:1000;
  box-shadow:0 7px 0 #063f7b;
}
.howto-title .sub{
  display:block;
  margin-top:10px;
  font-size:17px;
  line-height:1.55;
  font-weight:1000;
  color:#2b210f;
}
.howto-map{
  display:grid;
  gap:10px;
}
.howto-step{
  display:grid;
  grid-template-columns:58px 1fr 54px;
  align-items:center;
  gap:10px;
  background:#fffdf8;
  border:4px solid var(--step);
  border-radius:24px;
  padding:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
.howto-num{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--step);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:1000;
  text-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.howto-text h3{
  margin:0 0 3px;
  font-size:18px;
  line-height:1.35;
  font-weight:1000;
  color:#2b210f;
}
.howto-text p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  font-weight:800;
  color:#513715;
}
.howto-icon{
  font-size:38px;
  text-align:center;
}
.howto-note{
  margin-top:12px;
  background:#fff9e9;
  border:4px solid #e1bd66;
  border-radius:24px;
  padding:13px;
  font-size:15px;
  line-height:1.65;
  font-weight:900;
}
.howto-actions{
  display:grid;
  gap:10px;
  margin-top:13px;
}
.howto-actions button{
  min-height:58px;
  border:none;
  border-radius:19px;
  color:#fff;
  font-size:19px;
  font-weight:1000;
  box-shadow:0 7px 0 rgba(0,0,0,.22);
}
.howto-actions .start{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.howto-actions .home{background:linear-gradient(180deg,#2387e8,#0a64bd)}
@media (max-width:390px){
  .hero-card-name{font-size:28px}
  .hero-card-message{font-size:15px}
  .hero-card-illustration .char{width:126px;height:158px}
  .hero-strength-row{font-size:13.8px}
  .hero-job{font-size:11px}
  .howto-title .main{font-size:25px}
  .howto-step{grid-template-columns:52px 1fr 44px}
  .howto-icon{font-size:32px}
}


/* v11: 診断カードをラフSVGから完成画像カード方式へ変更 */
.card-art-screen{
  min-height:100vh;
  padding:22px 16px 28px;
  background:
    radial-gradient(circle at 50% 7%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg,#dff4ff,#fff3cf 64%,#fff);
  overflow:hidden;
}
.card-art-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#ffd24b 2px, transparent 3px) 8px 12px/52px 52px,
    radial-gradient(#59bfff 2px, transparent 3px) 28px 34px/78px 78px;
  opacity:.28;
}
.card-art-wrap{
  position:relative;
  z-index:2;
}
.card-art-title{
  margin:50px auto 12px;
  width:max-content;
  max-width:90%;
  padding:10px 22px;
  background:#0a64bd;
  color:#fff;
  border-radius:16px;
  font-size:25px;
  font-weight:1000;
  box-shadow:0 7px 0 #063f7b,0 12px 18px rgba(0,0,0,.16);
}
.card-art-note{
  background:#fffdf6;
  border:4px solid #e1bd66;
  border-radius:22px;
  padding:11px 13px;
  margin-bottom:12px;
  font-size:14px;
  line-height:1.6;
  font-weight:900;
  color:#2b210f;
  text-align:center;
}
.card-art-frame{
  background:#fff;
  border:6px solid var(--theme);
  border-radius:30px;
  padding:8px;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  overflow:hidden;
}
.card-art-frame img{
  display:block;
  width:100%;
  border-radius:22px;
}
.card-art-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.card-art-actions button,
.card-art-actions a{
  min-height:56px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.card-art-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.card-art-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.card-art-actions .green{background:linear-gradient(180deg,#43c56e,#189b3b)}
.card-art-actions .wide{grid-column:1 / -1}
.save-art-screen{
  min-height:100vh;
  padding:80px 18px 24px;
  background:linear-gradient(180deg,#dff4ff,#fff3cf 64%,#fff);
}
.save-art-panel{
  position:relative;
  z-index:2;
  background:#fff;
  border:4px solid var(--theme);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  text-align:center;
}
.save-art-panel h1{
  margin:0 0 10px;
  font-size:30px;
  color:var(--theme);
  line-height:1.35;
  font-weight:1000;
}
.save-art-panel p{
  font-size:15px;
  line-height:1.8;
  font-weight:800;
  margin:0 0 14px;
}
.save-art-panel img{
  width:100%;
  display:block;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.save-art-actions{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.save-art-actions a,
.save-art-actions button{
  min-height:56px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.save-art-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.save-art-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}


/* v12: 診断カードは完成画像のみを表示。古いラフカードを完全回避 */
.card-image-only-screen{
  min-height:100vh;
  padding:22px 16px 28px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg,#dff4ff,#fff3cf 64%,#fff);
  overflow:hidden;
}
.card-image-only-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(#ffd24b 2px, transparent 3px) 8px 12px/52px 52px,
    radial-gradient(#59bfff 2px, transparent 3px) 28px 34px/78px 78px;
  opacity:.28;
}
.card-image-only-wrap{
  position:relative;
  z-index:2;
}
.card-image-title{
  margin:50px auto 12px;
  width:max-content;
  max-width:90%;
  padding:10px 22px;
  background:#0a64bd;
  color:#fff;
  border-radius:16px;
  font-size:25px;
  font-weight:1000;
  box-shadow:0 7px 0 #063f7b,0 12px 18px rgba(0,0,0,.16);
}
.card-image-note{
  background:#fffdf6;
  border:4px solid #e1bd66;
  border-radius:22px;
  padding:11px 13px;
  margin-bottom:12px;
  font-size:14px;
  line-height:1.6;
  font-weight:900;
  color:#2b210f;
  text-align:center;
}
.card-image-frame{
  background:#fff;
  border:6px solid var(--theme);
  border-radius:30px;
  padding:8px;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  overflow:hidden;
}
.card-image-frame img{
  display:block;
  width:100%;
  border-radius:22px;
}
.card-image-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.card-image-actions button,
.card-image-actions a{
  min-height:56px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.card-image-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.card-image-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}
.card-image-actions .green{background:linear-gradient(180deg,#43c56e,#189b3b)}
.card-image-actions .wide{grid-column:1 / -1}

.save-image-only-screen{
  min-height:100vh;
  padding:80px 18px 24px;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg,#dff4ff,#fff3cf 64%,#fff);
}
.save-image-panel{
  position:relative;
  z-index:2;
  background:#fff;
  border:4px solid var(--theme);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  text-align:center;
}
.save-image-panel h1{
  margin:0 0 10px;
  font-size:30px;
  color:var(--theme);
  line-height:1.35;
  font-weight:1000;
}
.save-image-panel p{
  font-size:15px;
  line-height:1.8;
  font-weight:800;
  margin:0 0 14px;
}
.save-image-panel img{
  width:100%;
  display:block;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.save-image-actions{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.save-image-actions a,
.save-image-actions button{
  min-height:56px;
  border:none;
  border-radius:18px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.save-image-actions .orange{background:linear-gradient(180deg,#ff8c21,#ff6317)}
.save-image-actions .blue{background:linear-gradient(180deg,#2387e8,#0a64bd)}


/* v13: 保存画面の操作性改善 */
.save-help{
  margin:12px 0 0;
  padding:10px 12px;
  background:#fff9e9;
  border:3px solid #e1bd66;
  border-radius:18px;
  font-size:14px;
  line-height:1.6;
  font-weight:900;
  color:#2b210f;
}
.save-image-actions{
  grid-template-columns:1fr;
}
.save-image-actions .green{
  background:linear-gradient(180deg,#43c56e,#189b3b);
}


/* v14: 質問画面右下の案内キャラを、選択キャラ連動の見た目に強化 */
.q-guide-fixed{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 120px;
  align-items:end;
  gap:8px;
}
.q-guide-fixed .balloon{
  background:#fffdf6;
  border:3px solid #d9b36b;
  border-radius:26px;
  padding:12px 14px;
  font-size:16px;
  line-height:1.55;
  font-weight:1000;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.q-guide-card{
  position:relative;
  min-height:138px;
  border-radius:24px;
  background:linear-gradient(180deg,var(--cc1), var(--cc2));
  border:4px solid var(--cc3);
  box-shadow:0 10px 18px rgba(0,0,0,.14);
  padding:8px 8px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.q-guide-card .mini-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 10px;
  border-radius:999px;
  background:#fff8d7;
  color:#7b5200;
  border:2px solid #f1c36a;
  font-size:11px;
  font-weight:1000;
  line-height:1.2;
  text-align:center;
}
.q-guide-card .char{
  width:76px;
  height:88px;
  margin-top:5px;
  transform:translateY(1px);
}
.q-guide-card .char svg{
  width:100%;
  height:100%;
}
.q-guide-card .char-name{
  margin-top:3px;
  font-size:12px;
  line-height:1.25;
  font-weight:1000;
  color:#2b210f;
  text-align:center;
}
.q-guide-card .spark{
  position:absolute;
  font-size:18px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
  opacity:.92;
}
.q-guide-card .s1{left:8px;top:26px}
.q-guide-card .s2{right:8px;top:30px}
.q-guide-card .s3{right:10px;bottom:10px}
@media (max-width:390px){
  .q-guide-fixed{grid-template-columns:1fr 108px}
  .q-guide-fixed .balloon{font-size:14px}
  .q-guide-card{min-height:128px}
  .q-guide-card .char{width:68px;height:78px}
  .q-guide-card .char-name{font-size:11px}
}


/* v15: 質問画面右下キャラを完成寄せイラスト画像に変更 */
.q-guide-fixed{
  grid-template-columns:1fr 136px;
}
.q-guide-card{
  min-height:182px;
  padding:8px 8px 10px;
  background:linear-gradient(180deg,var(--cc1), var(--cc2));
}
.q-guide-card .mini-ribbon{
  min-height:22px;
  padding:2px 10px;
  font-size:11px;
}
.q-guide-card .guide-portrait{
  width:104px;
  height:116px;
  object-fit:cover;
  border-radius:16px;
  background:#fff;
  border:3px solid rgba(255,255,255,.92);
  margin-top:6px;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.q-guide-card .char-name{
  margin-top:5px;
  font-size:11.5px;
  line-height:1.25;
}
@media (max-width:390px){
  .q-guide-fixed{grid-template-columns:1fr 124px}
  .q-guide-card{min-height:170px}
  .q-guide-card .guide-portrait{width:94px;height:106px}
}


/* v16: 質問画面右下キャラの切れ・枠線を修正 */
.q-guide-card{
  min-height:176px;
  padding:8px 8px 10px;
}
.q-guide-card .guide-portrait{
  width:108px;
  height:112px;
  object-fit:contain;
  object-position:center center;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  margin-top:4px;
}
.q-guide-card .char-name{
  margin-top:3px;
}
@media (max-width:390px){
  .q-guide-card{min-height:164px}
  .q-guide-card .guide-portrait{
    width:100px;
    height:104px;
  }
}