body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --navy:#36318f; --navy-dark:#282363; --pink:#e7336e; --sky:#009de1;
  --text:#334149; --text-mute:#7a8a93; --line:#dcdcdc;
  --bg:#f2f2f2; --surface:#ffffff; --surface-2:#e9e9e9; --on-bg:#334149;
  --shadow:0 10px 40px rgba(20,10,60,.24);
  --shadow-sm:0 4px 16px rgba(20,10,60,.14);
  --r:14px; --r-sm:10px;
  --font:"Noto Sans JP",system-ui,sans-serif;
  --font-en:"Montserrat",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* 文字の太さは2段階：見出し・ラベル・ボタン・強調＝700／本文・補足・結果ヘッダーのタイプ名＝500 */
body{
  margin:0; color:var(--text);
  font-family:var(--font); font-weight:500; line-height:1.85; font-size:16px;
  background:var(--bg); overflow-x:hidden;
}
/* 結果画面の全面背景（タイプ別） */
.wrap{max-width:1080px; margin:0 auto; padding:1.5rem 1.25rem 4rem;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
#start,#quiz{flex:1; display:flex; flex-direction:column; justify-content:center}
/* 全問No用の画面 */
#none{flex:1; display:flex; flex-direction:column; justify-content:center}
.none-card{max-width:600px; margin:0 auto; text-align:center; background:var(--surface);
  border-radius:var(--r); box-shadow:var(--shadow-sm); padding:2.5rem 1.5rem}
@media(min-width:768px){.none-card{padding:3rem 3rem}}
.none-ill{height:150px; width:auto; max-width:100%; display:block; margin:0 auto 1.5rem}
.none-card h2{font-size:20px; font-weight:700; line-height:1.5; margin:0 0 1rem}
@media(min-width:768px){.none-card h2{font-size:24px}}
.none-card p{font-size:15px; line-height:1.9; margin:0 0 2rem; text-align:left}
@media(min-width:768px){.none-card p{text-align:center}}
#start{padding-top:2.5rem}
.en{font-family:var(--font-en); font-weight:700; letter-spacing:.1em}

/* ---- トップバー ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.75rem 0; min-height:52px; margin-bottom:1.5rem} /* 上（.wrapの上余白24px＋12px）と下（12px＋24px）を同じ36pxに */
/* 支給ロゴが白版のため、暗い前景に反転して使用（要・濃色版アセット差し替え） */
.logo-link{display:block; flex:none}
/* ホバーはロゴ画像だけを薄くする（リンク全体を薄くすると、枠線を隠す背景まで透けるため） */
.logo-link:hover .logo{opacity:.45}
.topbar .logo{width:104px; height:auto; flex:none; display:block; filter:invert(1); opacity:.75}
.topbar p{margin:0; font-size:13px; font-weight:700; color:var(--on-bg)}
.topbar .topbar-note{opacity:.85; font-weight:500}
.progress{display:flex; align-items:center; gap:.75rem; flex:none; width:min(45%,220px)}
.track{flex:1; height:8px; background:#dcdcdc; border-radius:99px; overflow:hidden}
.bar{height:100%; width:0; background:var(--navy); border-radius:99px; transition:width .4s cubic-bezier(.2,.8,.2,1)}
.count{font-family:var(--font-en); font-weight:700; font-size:12px; color:var(--text-mute);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.count b{color:var(--on-bg); font-size:17px; font-weight:700}

/* 設問画面：枠で囲み、ロゴと進捗バーを枠の上線に乗せる。
   PCのみ（1100px以上。スマホ・タブレットは枠なし）。枠の左右の余白（--gut）は40px */
.wrap:has(> #quiz:not([hidden])){--gut:40px; padding-bottom:1.5rem; height:100dvh; min-height:720px}
#quiz{align-self:center; width:calc(min(100vw, 1440px) - var(--gut) * 2);
  padding:calc(1rem + 27px) var(--gut) 1rem; /* 上は上線に乗るヘッダーの下半分（約27px）を足す */
  border:2.5px solid var(--text); border-radius:16px}
#quiz .card{padding:0}
/* ヘッダーを枠と同じ幅にし、縦の中心を上線（2.5px）の中心に合わせる。
   ロゴと進捗バーには背景色を敷き、重なる部分の線を見せない */
.wrap:has(> #quiz:not([hidden])) > .topbar{position:relative; z-index:2; align-self:center;
  width:calc(min(100vw, 1440px) - var(--gut) * 2); padding:0 var(--gut); margin-bottom:calc(-26px - 1.25px)}
.wrap:has(> #quiz:not([hidden])) > .topbar > :not([hidden]){background:var(--bg); padding:0 14px}
/* 背景のオフィス（壁がクリーム色）に合わせ、線より下の半分は壁の色にする（左＝左壁、右＝右壁） */
.wrap:has(> #quiz:not([hidden])) > .topbar > .logo-link{background:linear-gradient(var(--bg) 50%, #f7f6f3 50%)}
.wrap:has(> #quiz:not([hidden])) > .topbar > .progress{background:linear-gradient(var(--bg) 50%, #f1f0ec 50%)}
.wrap:has(> #quiz:not([hidden])) > .topbar .progress{width:calc(220px + 28px)}
/* 設問画面ではロゴにホバーしても薄くしない */
.wrap:has(> #quiz:not([hidden])) > .topbar .logo-link:hover .logo{opacity:.75}
@media(max-width:1099px){
  /* スマホ・タブレット：枠は出さず、ヘッダーも通常の位置に戻す。高さは中身に合わせ、収まらないときはスクロール */
  .wrap:has(> #quiz:not([hidden])){height:auto; min-height:100dvh}
  #quiz{align-self:stretch; width:auto; padding:1rem 0; border:0; border-radius:0}
  .wrap:has(> #quiz:not([hidden])) > .topbar{align-self:stretch; width:auto; padding:.75rem 0; margin-bottom:1.5rem}
  /* ロゴと進捗バーの背後に、壁と同じ色の面を敷く（ペンダントライトのコードが重なって見えないように）。
     左＝左の壁、右＝右の壁の色 */
  .wrap:has(> #quiz:not([hidden])) > .topbar > :not([hidden]){padding:4px 8px; margin:0 -8px}
  .wrap:has(> #quiz:not([hidden])) > .topbar > .logo-link{background:#f7f6f3}
  .wrap:has(> #quiz:not([hidden])) > .topbar > .progress{background:#f1f0ec}
  .wrap:has(> #quiz:not([hidden])) > .topbar .progress{width:min(45%,220px)}
}
/* 設問の背景：方眼ノート（自分を書き出して整理するワークシートの見立て） */
#quiz{position:relative}
#quiz > .card{position:relative; z-index:1}
.quiz-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:0;
  /* 方眼は一旦お休み（無地のグレー）。戻すときは下の2行を有効にする
  background-image:linear-gradient(#e2e3e8 1px, transparent 1px), linear-gradient(90deg, #e2e3e8 1px, transparent 1px);
  background-size:24px 24px; background-position:center center; */}
@media(max-width:1099px){
  /* 枠のないスマホ・タブレットは画面全体に敷く（ヘッダーより後ろ） */
  .quiz-bg{position:fixed; border-radius:0; z-index:-1}
}
/* 【試作】全設問共通のオフィスの風景を背景に敷く（イラストと同じアイソメトリックのトーン） */
/* 背景の縮尺は設問イラストの大きさに合わせる（PC・タブレット225pxで等倍、スマホ190pxで0.844倍）。
   画面幅で伸び縮みさせず、床のマス目や家具の大きさがイラストと同じ比率で変わる */
.quiz-bg{--bgs:1; background:url("/media/freelance-type-check/assets/img/qbg-office.svg?v=267") center / max(calc(1800px * var(--bgs)), 100vw, 164vh) auto no-repeat} /* 画面が縦長・大きいときも上下左右に余白が出ないよう、画面より小さくはしない */
@media(max-width:767px){.quiz-bg{--bgs:.844}}
/* ---- スタート ---- */
/* スタート画面：SEO用説明文（リンクからモーダル表示） */
/* 円に「?」のアイコンボタン。白塗り＋ボーダーで、スタート画面（PCは枠）の右下に置く */
#start{position:relative}
.about-link{position:absolute; right:16px; bottom:16px; z-index:2; width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#fff; border:2px solid var(--text); color:var(--text); cursor:pointer;
  font-family:var(--font-en); font-size:18px; font-weight:700; line-height:1}
.about-link:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.about-dlg{width:min(640px, calc(100% - 32px)); max-height:calc(100dvh - 64px); padding:0; border:0;
  border-radius:8px; color:var(--text); background:#fff}
.about-dlg::backdrop{background:rgba(20,18,50,.55)}
.about-inner{padding:2.5rem clamp(20px,5vw,40px) 1.75rem; text-align:left}
.about-inner h2{font-size:18px; font-weight:700; color:var(--navy); margin:0 0 1.25rem}
.about-inner p{font-size:14px; line-height:1.9; margin:0 0 1.1rem}
.about-dlg{position:fixed}
.about-close{position:absolute; top:10px; right:10px; width:40px; height:40px; padding:0; border:0;
  border-radius:50%; background:none; color:var(--text-mute); cursor:pointer}
.about-close::before,.about-close::after{content:""; position:absolute; top:50%; left:50%; width:18px; height:2px;
  background:currentColor; border-radius:1px}
.about-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.about-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.about-close:hover{color:var(--navy); background:#f1f1f6}
/* スタート画面下部のSNSシェア */
.start-share{text-align:center; padding:2.5rem 0 0}
.start-share .share-label{font-size:13px; font-weight:700; margin:0 0 .6rem; color:var(--text)}
/* PC（イラスト4方配置）：シェアは画面下部に重ねて置き、イラスト群の縦中央配置に影響させない */
@media(min-width:1100px){
  /* PC：スタート画面全体を枠で囲む。枠は画面幅いっぱい（左右40px・最大1360px）、高さは幅の1/2以上。
     中身（ロゴ〜シェア）は枠の中で縦横中央にそろえる */
  #start{position:relative; align-self:center; width:calc(min(100vw, 1440px) - 80px);
    padding:0; border:2.5px solid var(--text); border-radius:16px; overflow:hidden;
    background:#f1f0ec; /* 枠内は設問画面の壁と同じグレーベージュ */
    justify-content:center}
  /* サブコピー〜STARTボタンは枠の上下中央に置く。
     シェアとロゴは枠の底に寄せ、ロゴの下端を「?」アイコンの下端（枠内16px）にそろえる */
  .start-share{position:absolute; left:0; right:0; bottom:16px; z-index:1; padding:0}
  #start .start-logo{margin-top:1.25rem}
  /* 中央ブロックの下に最低230px（シェア＋ロゴ約170px＋STARTボタンとの間隔60px）を確保する。
     余裕があるときは上下の余白を等分して中央に、足りないときだけ上へずらす */
  #start .start-stage{flex:1; min-height:0; display:grid; grid-template-rows:minmax(40px,1fr) auto minmax(230px,1fr)}
  #start .start-card{grid-row:2}
  /* 枠を画面の高さに収める（下の余白も上と同じ24px）。低い画面では 720px で止めてスクロールさせる */
  .wrap:has(> #start:not([hidden])){padding-bottom:1.5rem; height:100dvh; min-height:720px}
  /* 枠の上下（画面の端との間）の余白を24px→48pxに広げる（スタート・設問とも） */
  .wrap:has(> #start:not([hidden])), .wrap:has(> #quiz:not([hidden])){padding-top:3rem; padding-bottom:3rem}
  /* 設問は枠の上線を基準に48pxにする（線に乗せたヘッダーの上半分、約27px分を差し引く） */
  .wrap:has(> #quiz:not([hidden])){padding-top:calc(3rem - 25px)}
}
}
.start-stage{position:relative; width:100%; display:flex; flex-direction:column}
.start-card{padding:3rem 0 3.5rem; text-align:center; max-width:520px; margin:0 auto;
  position:relative; z-index:1}
/* タブレット・モバイルは上に4枚、下に4枚 */
.ill-top{order:0; margin:0 0 2.25rem}
.start-card{order:1}
.ill-bottom{order:2; margin:2.25rem 0 0}
.start-ills{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:1rem .7rem}
.sill{height:auto; display:block}
.start-ills .s1{width:min(19vw,104px)}
.start-ills .s2{width:min(17vw,94px)}
.start-ills .s3{width:min(11vw,60px)}
.start-ills .s4{width:min(15vw,84px)}
.start-ills .s5{width:min(12vw,66px)}
.start-ills .s6{width:min(16vw,88px)}
.start-ills .s7{width:min(15vw,84px)}
.start-ills .s8{width:min(11vw,60px)}
/* スマホ・タブレット（1100px未満）：参考デザインに合わせる。
   上：左に会話（s2・端から少し内側）、右に相談（s5・上端と右端で切る）
   下：左にボード（s3・左端で切る、シェアの横から）、右に階段（s7・右端と下端で切る）、中央にロゴ
   大きさは画面幅の%で決め、タブレットで大きくなりすぎないよう上限を設ける */
@media(max-width:1099px){
  /* 上寄せにして、右上のイラストの上に余白を作らない（中央寄せだと画面が高いときに上に隙間ができる） */
  #start{position:relative; padding-top:0; padding-bottom:120px; justify-content:flex-start;
    --w2:min(43vw,330px); --w5:min(40vw,300px); --w3:min(29vw,220px); --w7:min(34vw,260px)}
  .wrap:has(> #start:not([hidden])){padding-top:0; padding-bottom:0}
  /* 画面端からはみ出す部分は切り、横スクロールを出さない */
  .ill-top, .ill-bottom{overflow:hidden}
  .start-ills{display:block; position:relative; gap:0}
  .start-ills .sill{position:absolute}
  /* 上の面は右のイラスト（高さ＝幅×1.37）の足元まで入る高さにする（上端ははみ出してよい） */
  .ill-top{width:100vw; margin:0 0 .5rem calc(50% - 50vw); height:calc(var(--w5) * 1.37 - 3vw)}
  .start-ills .s2{left:3vw;  top:4vw;  width:var(--w2)}
  .start-ills .s5{right:-3vw; top:-3vw; width:var(--w5)} /* 上端と右端で切る */
  .start-ills .s1, .start-ills .s6{display:none}
  .start-card{padding:1rem 0 0}
  /* 下の面はボードの高さ（幅×1.46）＋下余白44px＋上の余白を確保し、ボードの上が切れないようにする */
  .ill-bottom{position:absolute; left:calc(50% - 50vw); width:100vw; bottom:0;
    height:calc(var(--w3) * 1.46 + 64px); margin:0; order:initial; z-index:-1}
  .start-ills .s3{left:-4vw;  bottom:44px; width:var(--w3)}
  .start-ills .s7{right:-5vw; bottom:0; width:var(--w7); transform:translateY(22%)}
  .start-ills .s4, .start-ills .s8{display:none}
  /* ロゴは下の2点のあいだ */
  #start .start-logo{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); margin:0; width:112px; z-index:1}
  .start-share{padding-top:2.5rem}
}
/* 4方に配置（幅に余裕があるときのみ）
   ※スタート画面のイラスト配置専用の例外ブレークポイント。ガイドラインの768／1024とは別に意図して残している */
@media(min-width:1100px){
  /* イラスト面は枠（#start）全体に敷く */
  .start-stage{position:static} /* イラストの基準は枠（#start） */
  .start-ills{display:block; position:absolute; inset:0; margin:0; pointer-events:none}
  .ill-top,.ill-bottom{margin:0}
  .sill{position:absolute; z-index:0}
  .start-card{padding:0}
  /* 中央のテキスト列を細くする（サブコピーは1行） */
  /* 配置は参考デザインに合わせる。横位置・幅は枠の幅に対する%、縦位置は枠の高さに対する%。
     左右の列はテキスト列（枠の中央約30%）と重ならない範囲に収める。
     枠の端で切るものは、自分の高さに対する%（translateY）でずらし、枠の大きさが変わっても切れ方をそろえる
     左列：上=会話（s2）、中=ビーズクッション（s1）、下=階段（s7・下端で切る）
     右列：上=ボード（s3・上端と右端に寄せる）、中=カフェ（s8・ボードの左に離して置き、重ねない）、下=相談（s5・下端で切る） */
  /* 幅は「人物の頭の大きさ」が全イラストでそろうように、元画像ごとの縮尺から逆算した値 */
  /* 横長の画面（例：MacBook Pro 14インチ）でイラストが縦に重ならないよう、幅は画面の高さでも上限をかける。
     上限は 1280×760 で今と同じ大きさになる値（例：s1 は 23% ≒ 36vh） */
  .start-ills .s2{left:.5%;   top:1%;    width:min(27%, 42.5vh)}
  .start-ills .s1{left:5.5%;  top:44%;   width:min(23%, 36vh)}
  .start-ills .s7{left:1.5%;  bottom:0;  width:min(17.5%, 27.5vh); transform:translateY(14%)}
  .start-ills .s3{right:.5%;  top:0;     width:min(17%, 27vh);   transform:translateY(-6%)}
  .start-ills .s8{right:15.5%; top:30%;  width:min(13%, 20.5vh)} /* 左のビーズクッションと同じだけタイトルから離す（左右対称） */
  .start-ills .s5{right:2%;   bottom:0;  width:min(22.5%, 35.5vh); transform:translateY(22%)}
  /* 参考デザインに合わせて6点にしぼる（デスク・ソファは使わない） */
  .start-ills .s4, .start-ills .s6{display:none}
}

.start-logo{width:150px; height:auto; display:block; margin:2rem auto 0}
h1{font-size:38px; font-weight:300; line-height:1.35; margin:0 0 1.5rem;
  letter-spacing:.08em; padding-left:.08em} /* 字間は行末にも付くため、左にも同じ量を足して中央をそろえる */
@media(min-width:768px){h1{font-size:60px}
  .br-sp{display:none}}
.hero-sub-title{font-size:16px; font-weight:500; /* 補足文（本文の500）と同じ */ line-height:1.7; color:var(--text);
  margin:0 0 .5rem; letter-spacing:.02em} /* タイトルの上に置く */
@media(min-width:768px){.hero-sub-title{font-size:17px}}
.hero-lead{color:var(--text); font-size:14px; line-height:1.95; margin:0 auto 1.75rem; /* STARTボタンの上に置く */
  max-width:31rem; text-wrap:pretty}
.hero-lead b{color:var(--text); font-weight:700}

/* ---- ボタン ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:240px; max-width:100%; height:52px; padding:0 1rem; border-radius:99px;
  font-family:var(--font); font-weight:700; font-size:15px; text-decoration:none;
  cursor:pointer; border:1px solid var(--navy); background:var(--navy); color:#fff;
  transition:background .18s, color .18s, transform .18s}
/* スタート画面のSTARTボタンは文字を細めに */
#startBtn{font-weight:400; letter-spacing:.08em}
/* ボタン：通常はネイビー、ホバーで少し薄く */
.btn:hover{background:#5e5aa5; border-color:#5e5aa5; color:#fff; transform:translateY(-2px)}
.btn-pink{background:var(--pink); border-color:var(--pink)}
.btn-pink:hover{background:#ec5c8b; border-color:#ec5c8b}
.btn:focus-visible{outline:3px solid var(--sky); outline-offset:3px}

/* ---- 設問 ---- */
.card{width:min(100%,560px); margin:0 auto; padding:1rem 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
/* 設問は白の角丸ボックスに、イラスト・番号・設問文をまとめて入れる */
.bubble{position:relative; background:transparent; /* 白い面をなくし、イラストが背景のオフィスにいるように見せる */
  border-radius:14px;
  padding:0; margin:0 0 2rem; width:100%; max-width:32rem;
  text-align:center}

/* ボックス内の設問イラスト：縦横比が違っても高さでそろえる */
/* 人物の大きさがそろうよう、設問ごとに倍率（--s）をかける（小さいものを大きくする方向）。
   枠（slot）の高さは最大倍率1.2に合わせて固定し、イラストは下端にそろえるので、設問を進めても位置はずれない */
.q-ill-slot{--h:190px; height:calc(var(--h) * 1.2); display:flex; align-items:flex-end; justify-content:center; margin:.25rem 0 .25rem}
.q-ill{height:calc(var(--h) * var(--s, 1)); width:auto; max-width:100%; object-fit:contain; display:block; margin:0}
/* タブレットはPCと同じ225px、スマホは190px */
@media(min-width:768px){.q-ill-slot{--h:225px; margin-bottom:.5rem}}

.qnum{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:700; font-size:13px; color:#fff;
  background:var(--navy) url("/media/freelance-type-check/assets/img/bg.jpg?v=267") center / cover no-repeat; /* 番号ラベルにグラデーション */
  border-radius:99px; padding:.2rem .8rem; letter-spacing:.08em}
.qtext{margin:1rem 0 0; font-size:clamp(15px, 6.4vw - 5px, 20px); /* 幅の狭いスマホでも3行に収まるよう、画面幅に合わせて縮める（390px以上で20px） */ font-weight:700; line-height:1.75;
  text-wrap:balance; color:var(--text)}
/* 設問文は全画面幅で最大3行分の高さを確保し、行数が違っても吹き出しとボタンの位置がずれないようにする */
.qt-seg{display:inline-block}
.qt-stack{display:block}
.qt-stack .qt-seg{display:block}
.qtext{min-height:calc(1em * 1.75 * 3); display:flex; align-items:center; justify-content:center;
  word-break:auto-phrase} /* 「形にした／り」のような不自然な改行を避け、文節で折り返す（対応ブラウザのみ） */
@media(min-width:768px){.qtext{font-size:22px}}
/* ボタンは全画面共通で 240×52・15px */
.choices{display:grid; gap:.9rem; grid-template-columns:240px; justify-content:center; width:100%}
@media(min-width:768px){.choices{grid-template-columns:240px 240px; gap:1rem}}
.choice{font-family:var(--font-en); font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--navy);
  background:var(--surface); border:1px solid var(--navy); border-radius:99px;
  height:52px; padding:0 1rem; cursor:pointer;
  transition:background .18s, color .18s, transform .18s}
/* 設問ボタン：白塗り＋ネイビー枠。タップ中とマウスホバーで塗り、2px上げる。
   タッチ後に残る :hover は使わない。指を離すと :active も消えるので、次の設問には残らない */
.choice:active{background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-2px)}
@media (hover:hover) and (pointer:fine){
  .choice:hover{background:var(--navy); border-color:var(--navy); color:#fff;
    transform:translateY(-2px)}
}
.choice:focus-visible{background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-2px); outline:3px solid var(--sky); outline-offset:3px}
.back{margin-top:1.5rem; background:none; border:none; color:var(--navy); font-family:var(--font);
  font-size:13px; cursor:pointer; padding:.25rem}
.back:hover{color:var(--navy-dark)}
/* 1問目でも場所は確保して見えなくするだけにし、2問目以降で表示されても上の要素の位置がずれないようにする */
.back[hidden]{display:inline-block!important; visibility:hidden}

/* ---- 結果：ダッシュボード ---- */
.dash{display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); align-items:start}

.dash-main{display:grid; gap:1.25rem; align-content:start; min-width:0}
.dash-side{display:grid; gap:1.25rem; align-content:start; min-width:0}
/* PC：左に「あなたのタイプ」を縦に、右にチャートと第二適性を縦に並べ、右列はスクロールに追従 */
@media(min-width:1024px){
  .dash{grid-template-columns:minmax(0,1fr) 440px}
  .dash-side{position:sticky; top:1.25rem}
}
.dash-main > .panel, .dash-side > .panel{margin-top:0}
.result-wide{margin-top:1.25rem}
/* ---- SNSシェア ---- */
/* 白いボックスは出さず、見出しとアイコンだけを中央に並べる */
.panel.share{background:none; box-shadow:none; padding:2rem 0; text-align:center}
.panel .share-label{font-size:13px; font-weight:700; margin:0 0 .6rem; color:var(--text)}
.share-icons{display:flex; justify-content:center; align-items:center; gap:1rem}
/* 各社配布の公式アイコンをそのまま使用（形・色は加工しない）。表示は30px、押せる範囲は44pxを確保 */
.share-btn{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  transition:opacity .18s, transform .18s}
.share-btn:hover{opacity:.8; transform:translateY(-2px)}
.share-btn img{display:block; height:auto}


/* ---- 結果：ヒーロー ---- */
.hero{border-radius:var(--r); box-shadow:var(--shadow); color:#fff; overflow:hidden}
.hero-main{padding:2rem 1.5rem 1.75rem; text-align:center}
.hero-type .type-prefix{display:block; font-size:.62em; letter-spacing:.04em; margin-bottom:.1em}
/* 【検証版】タイプ独自の単色を背景にし、CTAエリアの手前（--grad-h）で止める。
   タイプはサービス（ブランド色）とは切り離して考える */
[data-result="it"],  [data-type="it"] {--type-bg:#8b5cf6}
[data-result="hr"],  [data-type="hr"] {--type-bg:#e8852a}
[data-result="fin"], [data-type="fin"]{--type-bg:#16a085}
[data-result="mkt"], [data-type="mkt"]{--type-bg:#2563eb}
body[data-result]{position:relative}
body[data-result]::before{content:""; position:absolute; top:0; left:0; right:0; z-index:-1;
  height:var(--grad-h, 100vh); background:var(--type-bg)}
/* CTAエリアは背景グラデーションの外に置く */
#result .panel.next{margin-top:5rem}
/* タイプ名も含めて「あなたのタイプ」全体を1枚の白いカードにする */
body[data-result] .hero{background:var(--surface); box-shadow:var(--shadow); color:var(--text)}
body[data-result] .hero-body{margin:0; padding-top:0}
body[data-result] .hero-main{padding-bottom:1.5rem}
body[data-result] .hero-type{color:var(--text)}
/* タイプ名：タイプ色の帯に白抜きで載せて目立たせる（黄色のアナリストだけ文字を濃色に） */
body[data-result] .hero-type .type-name{display:inline; background:var(--accent-color); color:#fff;
  padding:0 .25em .04em; border-radius:6px; line-height:1.6;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
body[data-result] .hero-type .type-prefix{margin-bottom:.25em}
/* ヘッダーもグラデーションの上に乗るので白で表示 */
body[data-result] .topbar .logo{filter:none; opacity:1}
body[data-result] .topbar .logo-link:hover .logo{opacity:.75}
body[data-result] .topbar .topbar-note{color:#fff; opacity:1}
/* 第二適性・チャートの下に、グラデーションの終わりまで余白をとる */

@media(min-width:768px){.hero-main{padding:2.5rem 2.5rem 2.25rem}}
.hero-label{font-size:13px; font-weight:500; opacity:.9; margin:0 0 .75rem}
.hero-type{font-size:clamp(22px, 7vw, 29px); font-weight:700; line-height:1.3; margin:0 0 .5rem; letter-spacing:.01em;
  word-break:keep-all}
@media(min-width:768px){.hero-type{font-size:38px}}
.hero-sub{font-size:15px; font-weight:500; margin:0; opacity:.95}
@media(min-width:768px){.hero-sub{font-size:17px}}
.hero-body{background:var(--surface); color:var(--text); padding:1.75rem 1.5rem}
@media(min-width:768px){.hero-body{padding:2.25rem 2.5rem}}
/* 縦長・横長の画像でも見た目の大きさがそろうよう、高さで統一 */
.type-ill{height:200px; width:auto; max-width:100%; object-fit:contain; display:block; margin:0 auto 1.75rem}
.hero-text{min-width:0}
.hero-body p{margin:0 0 1rem; font-size:15px}
/* 「あなたのタイプ」内のボックス：ラベルはボックス内の左上 */
.tbox{margin-top:1rem; padding:1.1rem 1.2rem; background:#f7f7f7;
  border-radius:var(--r-sm)}
.tbox-center{text-align:center}
.hero-body .tbox .tbox-work{text-align:center; font-weight:700; margin-bottom:.6rem; padding-bottom:.6rem;
  border-bottom:1px dashed #dfe3e6}
.hero-body .tbox .tbox-kv{display:flex; gap:.25rem; font-size:13px} /* 福利厚生の案内文と同じ */
.tbox-kv b{flex:none; font-weight:700}
.hero-body .tbox p{font-size:15px; line-height:1.8; margin:0}
.hero-body .tbox .tbox-label{margin:0 auto .6rem;
  display:flex; width:fit-content; font-size:12px; font-weight:700; line-height:1.6; padding:.2rem .85rem;
  border-radius:99px; background:#fff; border:1.5px solid var(--accent-color); color:var(--accent-text)}
.hero-body .tbox .weak-support{margin-top:.75rem; padding-top:.75rem; border-top:1px dashed #dfe3e6;
  font-size:13px}
.weak-support b{font-weight:700}
.weak-note{display:block; margin-top:.35rem; font-size:11px; color:var(--text-mute)}
.oasis-name{font-family:var(--font-en); font-weight:700; color:#e6377b; letter-spacing:.04em; margin:0 .2rem}
a.oasis-name{text-decoration:underline; text-underline-offset:3px}
a.oasis-name:hover{opacity:.75}
/* ---- 結果：パネル ---- */
.panel{margin-top:1.25rem; background:var(--surface); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:1.75rem 1.5rem}
@media(min-width:768px){.panel{padding:2.25rem 2.5rem}}
.plabel{display:inline-flex; align-items:center; gap:.45rem; font-size:12px; font-weight:700;
  color:var(--accent-text,var(--navy)); background:var(--accent-soft,#eeedf8);
  padding:.28rem .8rem; border-radius:99px; margin:0 0 1rem}
.chart .plabel{background:#fff; border:1.5px solid #bdbdbd; color:var(--text); padding:.28rem .85rem}
#secondPanel .plabel{background:#fff; border:1.5px solid var(--accent-color); color:var(--accent-text); padding:.28rem .85rem}
.panel h2{font-size:19px; font-weight:700; line-height:1.5; margin:0 0 .85rem}
.panel p{margin:0 0 1rem; font-size:15px}
.panel p:last-child{margin-bottom:0}
.panel .big{font-size:26px; font-weight:700; line-height:1.3; margin:0 0 .35rem;
  color:var(--accent-text)}
@media(min-width:768px){.panel .big{font-size:30px}}
.panel .mid{font-size:17px; font-weight:700; margin:0 0 1rem}

/* 第二適性ボックス上端に、そのタイプの色を15pxのバーで表示 */
#secondPanel{position:relative; overflow:hidden; padding-top:calc(1.75rem + 15px)}
@media(min-width:768px){#secondPanel{padding-top:calc(2.25rem + 15px)}}
#secondPanel::before{content:""; position:absolute; top:0; left:0; right:0; height:15px;
  background:var(--type-bg, var(--navy))}

#sCombo b{font-weight:700; color:var(--text)}
/* ---- チャート ---- */
.chart .note{font-size:12px; color:var(--text-mute); margin:1rem 0 0; line-height:1.7}
.radar{display:block; width:100%; height:auto; max-width:460px; margin:.75rem auto 0; overflow:visible}
.radar .grid{fill:none; stroke:var(--line); stroke-width:1}
.radar .spoke{stroke:var(--line); stroke-width:1}
.radar .shape{stroke:none}
.radar .axname{font-family:var(--font); font-size:13px; font-weight:700; fill:var(--text)}

/* ---- 出口 ---- */
/* PC・タブレットだけで改行（スマホは自然に折り返す） */
@media(max-width:767px){.br-pc{display:none}}
/* 全タイプ共通でネイビー→ピンクのグラデーション */
.next{background:var(--navy) url("/media/freelance-type-check/assets/img/bg.jpg?v=267") center / cover no-repeat; color:#fff}
.panel.next h2, .panel.next .lead{color:#fff}
.next h2{font-size:clamp(18px, 2.5vw + 10px, 20px); font-weight:700; line-height:1.5; margin:0 0 .6rem; text-align:center; color:var(--text);
  font-feature-settings:"palt" 1; letter-spacing:.04em}
.next .lead{font-size:14px; color:var(--text); margin:0 auto 1.75rem;
  max-width:34rem; text-align:center;
  font-feature-settings:"palt" 1; letter-spacing:.04em} /* 句読点まわりの余白を詰める */
.exits{display:grid; gap:1rem; grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.exits{grid-template-columns:repeat(2,minmax(0,1fr))}}
.exit{min-width:0}
/* スマホ幅では画面幅に合わせて左右余白を縮める（320pxで16px〜400px以上で24px）。
   ブレークポイントを増やさずに、ボタン幅(240px)でボックスがはみ出さないようにする */
.panel.next{padding-left:clamp(1rem, 10vw - 1rem, 1.5rem); padding-right:clamp(1rem, 10vw - 1rem, 1.5rem)}
@media(min-width:768px){
  .panel.next{padding-left:2.5rem; padding-right:2.5rem}
}
.exit{background:#f7f7f7; border-radius:var(--r-sm); padding:1.4rem clamp(1rem, 10vw - 1rem, 1.5rem);
  display:flex; flex-direction:column; gap:.6rem}
@media(min-width:768px){.exit{padding:1.6rem 2rem}}
.exit h3{font-size:15px; font-weight:700; margin:0; color:var(--text); text-align:center}
.panel .exit p{font-size:13px; color:var(--text); margin:0; flex:1}
.exit .btn{align-self:center; margin-top:.5rem}

/* ---- ブランドメッセージ ---- */
.brand{text-align:center; padding:3rem 1rem 0; color:var(--text)}
.brand-logo-link{display:block; width:max-content; margin:0 auto; line-height:0}
.brand-logo-link:hover .brand-logo{opacity:.75}
.brand .brand-logo{width:200px; height:auto; display:block; margin:0}
.brand-row{display:flex; flex-direction:column-reverse; align-items:center; gap:2rem}
.result-share .share-label{font-size:13px; font-weight:700; margin:0 0 .6rem; color:var(--text)}
@media(min-width:1024px){
  /* PC：ロゴは左端、シェアは右端（CTAエリアと同じコンテンツ幅にそろえる） */
  .brand{padding-left:0; padding-right:0}
  .brand-row{flex-direction:row; justify-content:space-between; gap:3rem}
  .brand-row .brand-logo-link{margin:0}
}
.actions{display:flex; justify-content:center; margin-top:1.5rem}
.btn-ghost{background:none; border:none; color:var(--text-mute); font-family:var(--font);
  font-size:13px; font-weight:500; cursor:pointer; text-decoration:underline; padding:.5rem}
.btn-ghost:hover{color:var(--navy)}
/* 結果画面は背景が濃いので白文字 */


[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}