/* AI副業タイプ診断 ウェブフリ型(黒地・人物の縦帯) */
:root{--ink:#141414;--ink2:#1F1F1F;--paper:#fff;--muted:#B8B8B8;--yellow:#F5DC3C;--yellow-d:#CDB417;
--c-B:#3CC9A0;--c-V:#2A7BFF;--c-S:#FF7AA8;--c-W:#8B5CF6;--c-L:#FFD43B}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:"Noto Sans JP",sans-serif;font-feature-settings:"palt"}
.wf,.wq{width:min(100%,390px);margin:0 auto;background:var(--ink);word-break:keep-all;overflow-wrap:normal}

/* 人物の縦帯 */
.strips{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:470px;overflow:hidden}
.strip{position:relative;overflow:hidden}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3em);mask-image:linear-gradient(to bottom,transparent 0,#000 3em)}
.strip .vlabel{position:absolute;z-index:2;top:10px;right:5px;writing-mode:vertical-rl;color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.strip.B{background:var(--c-B)}.strip.V{background:var(--c-V)}.strip.S{background:var(--c-S)}.strip.W{background:var(--c-W)}.strip.L{background:var(--c-L)}
.strips:after{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to bottom,rgba(20,20,20,0) 0%,rgba(20,20,20,.55) 45%,var(--ink) 100%)}
.hero{position:absolute;z-index:3;left:0;right:0;bottom:22px;text-align:center}
.hero p{margin:0 0 4px;font-size:20px;font-weight:900;letter-spacing:.12em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hero h1{margin:0;font-size:58px;font-weight:900;line-height:1.08;letter-spacing:.02em;text-shadow:0 3px 12px rgba(0,0,0,.45)}
.hero h1 small{display:block;font-size:40px;letter-spacing:.06em}

/* タイプのカード(横に流れる) */
.cards{display:flex;gap:8px;margin-top:-6px;padding:0 0 4px 14px;overflow-x:auto;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.card{flex:none;width:112px;border-radius:8px;overflow:hidden;background:var(--ink2)}
.card-head{padding:7px 8px 6px;color:#fff;line-height:1.2}
.card-head small{display:block;font-size:10px;font-weight:700;opacity:.9}
.card-head b{display:block;font-size:15px;font-weight:900;white-space:nowrap}
.card.B .card-head{background:var(--c-B)}.card.V .card-head{background:var(--c-V)}.card.S .card-head{background:var(--c-S)}.card.W .card-head{background:var(--c-W)}.card.L .card-head{background:var(--c-L);color:#141414}
.card img{display:block;width:100%;height:84px;object-fit:cover;object-position:50% 15%}
.card p{margin:0;padding:7px 8px 9px;color:var(--muted);font-size:11px;line-height:1.55}

/* ボタンまわり */
.lead{margin:22px 0 12px;text-align:center;color:#fff;font-size:13px;font-weight:700;letter-spacing:.12em}
.start{display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(100% - 52px);min-height:80px;margin:0 auto;border-radius:12px;background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d);color:#141414;text-decoration:none;line-height:1.2}
.start small{font-size:15px;font-weight:500;letter-spacing:.2em}
.start strong{font-size:31px;font-weight:700;letter-spacing:.02em}
.foot{padding:26px 16px 34px;text-align:center}
.foot p{margin:0;color:var(--muted);font-size:10px;line-height:1.8}
.foot a{color:#fff;font-size:10px;font-weight:700}

/* 質問ページ */
.wq-head{position:relative;height:150px;overflow:hidden}
.wq-head .strips{height:150px}
.wq-head .strips:after{height:100%;background:linear-gradient(to bottom,rgba(20,20,20,.35),rgba(20,20,20,.75))}
.wq-title{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wq-title p{margin:0;font-size:13px;font-weight:900;letter-spacing:.12em}
.wq-title h1{margin:2px 0 10px;font-size:30px;font-weight:900;letter-spacing:.04em}
.steps{display:flex;align-items:center;gap:8px}
.step{display:flex;flex-direction:column;align-items:center;gap:3px;font:700 10px "Montserrat",sans-serif}
.step i{display:block;width:20px;height:20px;border:4px solid #fff;border-radius:50%}
.step.on i{border-color:var(--yellow)}
.dots{width:64px;border-top:3px dotted #fff;margin-bottom:14px}
.wq-list{padding:8px 20px 0}
.wq-row{padding:24px 0 4px}
.wq-row h2{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;font-size:17px;font-weight:700;line-height:1.6}
.wq-row h2:before{content:"Q";flex:none;color:#fff;font:800 26px/1.05 "Montserrat",sans-serif}
.wq-row.miss h2{color:#FF8080}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opts button{min-height:52px;padding:7px 8px;border:3px solid var(--yellow);border-radius:999px;background:transparent;color:#fff;font:700 14px/1.4 "Noto Sans JP",sans-serif;cursor:pointer}
.opts button.on{background:var(--yellow);color:#141414}
.opts button:focus-visible,.start:focus-visible{outline:3px solid #fff;outline-offset:3px}
.next{display:block;width:calc(100% - 40px);min-height:60px;margin:34px auto 12px;border:0;border-radius:12px;background:var(--yellow);box-shadow:0 5px 0 var(--yellow-d);color:#141414;font:700 22px "Montserrat","Noto Sans JP",sans-serif;letter-spacing:.06em;cursor:pointer}
.left{margin:0 0 10px;text-align:center;color:var(--muted);font-size:12px}
.wq .qz-result{width:auto;background:transparent;padding:22px 16px 30px}
.wq .rs-next{color:var(--muted)}
.wq .rs-next strong{color:#fff}
.wq .rs-note{color:var(--muted)}
.wq .rs-retry{color:var(--yellow)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* 結果カード(em基準。置く場所で font-size を変えて大きさを決める) */
.rcard{--c:var(--c-B);position:relative;display:flex;flex-direction:column;width:20em;flex:none;overflow:hidden;border-radius:.9em;background:var(--c);color:#fff;font-family:"Noto Sans JP",sans-serif;text-align:left;word-break:keep-all}
.rcard.V{--c:var(--c-V)}.rcard.S{--c:var(--c-S)}.rcard.W{--c:var(--c-W)}.rcard.L{--c:var(--c-L)}
.rc-bg{position:absolute;right:-.15em;top:-.2em;font:800 9em/1 "Montserrat",sans-serif;color:transparent;-webkit-text-stroke:.02em rgba(255,255,255,.35);letter-spacing:-.04em}
.rc-title{position:relative;z-index:3;margin:0;padding:.75em .9em 0;font-size:2.1em;font-weight:900;line-height:1.05;letter-spacing:.01em;white-space:nowrap;transform:rotate(-5deg);transform-origin:left top;text-shadow:0 .08em .2em rgba(0,0,0,.35)}
.rc-title small{display:block;font-size:.55em;letter-spacing:.06em}
.rcard.W .rc-title{font-size:1.85em}
.rc-tag{position:absolute;z-index:3;left:0;top:6.4em;padding:.6em .3em .9em .35em;background:#141414;color:#fff;font-size:.95em;font-weight:700;letter-spacing:.12em;writing-mode:vertical-rl;clip-path:polygon(0 0,100% 0,100% 100%,50% 92%,0 100%)}
.rc-photo{position:relative;height:13.5em;margin-top:-.6em}
.rc-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3em);mask-image:linear-gradient(to bottom,transparent 0,#000 3em)}
.rc-photo:after{content:"";position:absolute;inset:auto 0 0;height:3em;background:linear-gradient(to bottom,transparent,var(--c))}
.rcard.L .rc-title,.rcard.L .rc-bg{color:#141414;text-shadow:none}
.rcard.L .rc-bg{color:transparent;-webkit-text-stroke-color:rgba(0,0,0,.18)}
.rc-tiles{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:.55em;padding:0 .9em;margin-top:-1.4em}
.rc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;height:4.6em;border:.18em solid #fff;border-radius:.6em;background:#fff;color:#141414;font-size:1em;font-weight:700;line-height:1.2;text-align:center;box-shadow:0 .15em .4em rgba(0,0,0,.15)}
.rc-tile svg{width:1.9em;height:1.9em;fill:none;stroke:#141414;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rc-tile span{font-size:.85em;white-space:nowrap}
.rc-info{flex:1;align-content:start;display:grid;gap:.7em;margin-top:.9em;padding:1em .9em 1.1em;background:#141414}
.rc-row{display:flex;gap:.7em;align-items:center}
.rc-hex{flex:none;display:flex;align-items:center;justify-content:center;width:3.4em;height:3.4em;background:#fff;color:#141414;font-size:.85em;font-weight:900;line-height:1.15;text-align:center;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.rc-row p{margin:0;color:#fff;font-size:.9em;line-height:1.6}

/* FVの下の横並び */
.rcards{display:flex;gap:10px;margin-top:-4px;padding:0 14px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rcards::-webkit-scrollbar{display:none}
.rcards .rcard{font-size:8.5px;scroll-snap-align:start}

/* 結果画面の一番上 */
.wq .rs-head{margin:0 0 12px;text-align:center;color:#fff;font-size:16px;font-weight:700;letter-spacing:.08em}
.wq .rs-cardwrap{display:flex;justify-content:center;margin-bottom:20px}
.wq .rs-cardwrap .rcard{font-size:15.5px;box-shadow:0 0 0 2px var(--c)}
.wq .rs-card .rs-you,.wq .rs-card .rs-name,.wq .rs-card .rs-icon{display:none}

/* 終わりの画面(結果はLINEで受け取る) */
.wq .rs-card.rs-end .rs-you{display:block}
.wq .rs-card.rs-end .rs-icon{display:flex}