/* ============================================================
   整備士タイプ診断 ― タイプ別解説ページ（dist/types/type.css の元）
   診断ページ（index.html）と同じ色・角丸・影でそろえています。
   --a  … タイプカラー（線・枠）／ --lc … 白文字を載せる濃い版
   ============================================================ */
:root{
  --paper:#ffffff; --cardline:#eef1f6;
  --ink:#2b2f38; --muted:#6c7585; --line:#eceff5;
  --brand:#ae282c; --brand2:#d0393e;
  --radius:16px; --shadow:0 6px 18px rgba(60,70,90,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:#fff;color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Segoe UI",Meiryo,system-ui,sans-serif;
  font-feature-settings:"palt" 1;line-height:1.8;
  word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;
}
img{max-width:100%;}
a{color:inherit;}
:focus-visible{outline:3px solid rgba(174,40,44,.5);outline-offset:2px;border-radius:6px;}

.wrap{--pad:16px;max-width:460px;margin:0 auto;padding:14px var(--pad) 56px;}
@media (max-width:359px){ .wrap{--pad:12px;} }
@media (min-width:560px){
  body{background:#f4f5f7;}
  .wrap{background:#fff;min-height:100dvh;box-shadow:0 0 40px rgba(60,70,90,.10);}
}

/* パンくず */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:14px;line-height:1.6;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--brand);text-decoration:underline;}
.crumb span{opacity:.5;}
.crumb b{color:var(--ink);}

/* ヒーロー（結果画面の帯と同じ見た目） */
.hero{background:var(--tint);border:1.5px solid #e8eaef;border-radius:18px;padding:20px 18px 22px;text-align:center;margin-bottom:14px;}
.hero .no{display:inline-block;background:var(--lc);color:#fff;font-size:12px;font-weight:900;letter-spacing:.12em;padding:4px 13px;border-radius:99px;line-height:1.5;}
.hero .illust{position:relative;display:flex;align-items:flex-end;justify-content:center;height:198px;margin:10px 0 6px;}
.hero .illust::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:118px;height:15px;border-radius:50%;background:#2b2f38;opacity:.12;filter:blur(4px);}
.hero .illust img{position:relative;height:190px;width:auto;object-fit:contain;display:block;}
.hero h1{font-size:clamp(20px,5.6vw,23px);font-weight:900;margin:2px 0 10px;line-height:1.4;letter-spacing:-.01em;}
.hero h1 span{display:block;font-size:15px;color:var(--muted);font-weight:800;margin-top:2px;letter-spacing:0;}
.hero .catch{display:inline-block;font-size:16px;font-weight:900;color:var(--brand);background:#fff;border:1.5px solid #ecdcdc;padding:8px 16px;border-radius:10px;box-shadow:0 2px 6px rgba(60,70,90,.07);line-height:1.6;margin:0;}
.kw{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;margin:14px 0 0;padding:0;}
.kw li{font-size:12.5px;font-weight:800;color:var(--lc);background:#fff;border:1.5px solid var(--a);border-radius:99px;padding:2px 11px;line-height:1.7;}

/* 目次（横スクロールのチップ） */
/* 目次は折り返して全部見せる（横スクロールだと右端の項目が見切れて見えるため） */
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;}
.toc a{flex:0 0 auto;font-size:13px;font-weight:800;color:#4b5260;text-decoration:none;background:#f1f2f5;border-radius:99px;padding:6px 13px;white-space:nowrap;}
.toc a:hover{background:#e6e8ee;}

section{margin-bottom:30px;scroll-margin-top:12px;}
h2{font-size:17px;font-weight:900;margin:0 2px 12px;display:flex;align-items:center;gap:8px;line-height:1.5;}
h2 .ic{width:26px;height:26px;border-radius:8px;background:#f1f2f5;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 26px;}
.h3{font-size:14.5px;font-weight:900;margin:18px 4px 8px;color:var(--lc);}
.lead{font-size:14px;color:var(--muted);font-weight:700;margin:-4px 4px 12px;line-height:1.75;}
.small{font-size:12.5px;color:var(--muted);font-weight:600;margin:10px 4px 0;line-height:1.75;}

.box{background:var(--paper);border:1.5px solid var(--cardline);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);}
.box + .box{margin-top:10px;}
.box p{margin:0;}
.prose p{font-size:15px;font-weight:600;line-height:1.95;}

.check{list-style:none;margin:0;padding:8px 18px;}
.check li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;font-weight:700;line-height:1.7;}
.check li + li{border-top:1px dashed var(--line);}
.check li::before{content:"✓";color:var(--lc);font-weight:900;flex:0 0 auto;}

/* 強み・つまずきポイントのカード */
.cards{list-style:none;margin:0;padding:0;}
.cards li + li{margin-top:10px;}
.card-h{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:900;margin-bottom:6px;line-height:1.5;}
.card-h .n{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--lc);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.cards p{font-size:14.5px;font-weight:600;line-height:1.85;}
.cards .fix{margin-top:10px;padding:10px 12px;background:#f6f8f4;border-radius:9px;font-size:14px;}
.cards .fix b{display:inline-block;font-size:12px;color:#fff;background:#5f8f10;border-radius:5px;padding:0 8px;margin-right:7px;vertical-align:1px;}
#weak .card-h::before{content:"!";width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#f1f2f5;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;}

.note{font-size:14px;font-weight:600;line-height:1.85;background:#fafbfc;}
.note b{display:block;font-size:13px;color:var(--lc);margin-bottom:3px;}

.stage{}
.stage-k{font-size:13px;font-weight:900;color:var(--lc);margin-bottom:4px;letter-spacing:.04em;}
.stage p{font-size:14.5px;font-weight:600;line-height:1.9;}

/* 相性 */
.cp{background:var(--cbg);border:1.5px solid var(--cardline);border-radius:14px;padding:14px;}
.cp + .cp{margin-top:12px;}
.cp-tag{display:inline-block;font-size:12px;font-weight:900;color:#fff;background:var(--cfg);border-radius:6px;padding:1px 9px;margin-bottom:8px;line-height:1.7;}
.cp-bad .cp-tag{background:#6f7787;}
.cp-head{display:flex;align-items:center;gap:12px;text-decoration:none;}
.cp-head img{width:56px;height:70px;flex:0 0 56px;object-fit:contain;object-position:center bottom;}
.cp-head > span{min-width:0;}
.cp-name{display:block;font-size:15px;font-weight:900;color:var(--cfg);line-height:1.45;}
.cp-name::after{content:" ›";}
.cp-why{display:block;font-size:13.5px;font-weight:600;color:#5b6270;line-height:1.7;margin-top:3px;}
.cp-pair{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.1);font-size:14px;font-weight:600;line-height:1.85;}
.cp-pair > b{display:block;font-size:13.5px;font-weight:900;margin-bottom:4px;}
.cp-fix{display:block;margin-top:10px;padding:10px 12px;background:#fff;border-radius:9px;}
.cp-fix b{display:inline-block;font-size:12px;color:#fff;background:#5f8f10;border-radius:5px;padding:0 8px;margin-right:7px;vertical-align:1px;}

/* キャリア */
.career{margin:0;padding:6px 18px;}
.career dt{display:inline-block;font-size:12.5px;font-weight:900;color:#fff;background:var(--lc);border-radius:6px;padding:2px 10px;margin-top:14px;letter-spacing:.05em;line-height:1.7;}
.career dd{margin:8px 0 0;padding-bottom:14px;font-size:15px;font-weight:600;line-height:1.85;border-bottom:1px dashed var(--line);}
.career dd:last-child{border-bottom:none;}
.career ul{margin:0;padding-left:1.2em;}
.growth{margin-top:12px;background:#fafbfc;}
.growth b{display:block;font-size:13px;color:var(--lc);margin-bottom:4px;}
.growth p{font-size:14.5px;font-weight:600;line-height:1.9;}
.growth p + p{margin-top:6px;}

/* CTA */
.cta{background:#fff;border:1.5px solid var(--cardline);border-radius:14px;padding:20px 18px;text-align:center;margin:0 0 14px;box-shadow:var(--shadow);}
.cta h3{margin:0 0 8px;font-size:18px;font-weight:900;line-height:1.55;}
.cta p{margin:0 0 14px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.8;}
.btn{display:block;width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:17px;font-weight:900;padding:16px;border-radius:99px;box-shadow:0 10px 22px rgba(174,40,44,.32);letter-spacing:.04em;line-height:1.5;text-align:center;text-decoration:none;}
.btn:active{transform:translateY(2px) scale(.99);}
.btn.line{background:linear-gradient(135deg,#06C755,#04a548);box-shadow:0 8px 20px rgba(6,199,85,.3);}
.sublink{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:800;color:var(--muted);}

/* 8タイプ一覧（トップ画面と同じ部品） */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tg-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--cardline);border-radius:14px;padding:10px 8px 12px;box-shadow:0 3px 10px rgba(60,70,90,.06);transition:transform .15s ease,box-shadow .15s ease;}
@media (hover:hover){ .tg-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,70,90,.12);} }
.tg-card.is-current{background:var(--tint,#f7f8fa);pointer-events:none;}
.tg-card.is-current::after{content:"表示中";position:absolute;top:8px;right:8px;font-size:11px;font-weight:900;color:#fff;background:#9aa2b0;border-radius:5px;padding:0 6px;}
.tg-no{position:absolute;top:8px;left:10px;font-size:12px;font-weight:900;color:var(--lc);letter-spacing:.06em;}
.tg-card img{width:auto;height:96px;object-fit:contain;margin:6px 0 4px;}
.tg-name{font-size:14px;font-weight:900;line-height:1.4;}
.tg-name small{font-size:11.5px;margin-left:1px;}
.tg-title{font-size:12px;font-weight:800;color:var(--lc);margin-top:2px;line-height:1.5;}

.more{display:block;margin-top:12px;text-align:center;font-size:14px;font-weight:800;color:var(--brand);background:#fff;border:1.5px solid #f0d5d5;border-radius:99px;padding:10px;text-decoration:none;}

/* シェア */
.share{text-align:center;margin:0 0 30px;}
.share-k{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px;}
.share-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sh{display:block;font:inherit;font-size:13px;font-weight:800;line-height:1.4;padding:11px 4px;border-radius:10px;text-decoration:none;cursor:pointer;border:none;color:#fff;}
.sh-x{background:#111;}
.sh-line{background:#06C755;}
.sh-copy{background:#f1f2f5;color:#4b5260;}

/* 相性早見表 */
.hero-plain .hero-lead{font-size:14px;font-weight:700;color:#545c69;line-height:1.85;margin:12px 0 0;}
.hero-plain h1{margin-top:12px;}
.ah{padding:6px 10px;}
.ah-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px;align-items:center;padding:7px 0;}
.ah-row + .ah-row{border-top:1px dashed var(--line);}
.ah-head{font-size:12px;font-weight:900;color:var(--muted);text-align:center;padding:4px 0 6px;}
.ah-head span:first-child{text-align:left;padding-left:4px;}
.ah-me,.ah-c{display:flex;align-items:center;gap:5px;text-decoration:none;min-width:0;}
.ah-me img{width:34px;height:42px;object-fit:contain;flex:0 0 34px;}
.ah-me span{font-size:13px;font-weight:900;color:var(--lc);line-height:1.35;}
.ah-c{justify-content:center;border-radius:9px;padding:3px 4px;}
.ah-c img{width:26px;height:33px;object-fit:contain;flex:0 0 26px;}
.ah-c span{font-size:12px;font-weight:800;color:var(--ink);line-height:1.3;}
.ah-c.good{background:#f3f8ec;}
.ah-c.bad{background:#f3f4f7;}

.pc{background:#fff;border:1.5px solid var(--cardline);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);}
.pc + .pc{margin-top:12px;}
.pc-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;}
.pc-who{display:flex;flex-direction:column;align-items:center;text-decoration:none;}
.pc-who img{width:64px;height:80px;object-fit:contain;}
.pc-who span{font-size:13.5px;font-weight:900;color:var(--lc);text-align:center;line-height:1.4;margin-top:2px;}
.pc-x{font-size:24px;font-weight:900;color:#5f8f10;}
.pc-bad .pc-x{color:#9aa2b0;}
.pc-label{font-size:14.5px;font-weight:900;text-align:center;margin:10px 0 6px;}
.pc p{margin:0;font-size:14px;font-weight:600;line-height:1.85;}
.pc .pc-fix{margin-top:10px;padding:10px 12px;background:#f6f8f4;border-radius:9px;}
.pc-fix b{display:inline-block;font-size:12px;color:#fff;background:#5f8f10;border-radius:5px;padding:0 8px;margin-right:7px;vertical-align:1px;}

.foot{color:var(--muted);font-size:12.5px;text-align:center;margin-top:28px;line-height:1.8;font-weight:600;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
.ah-me span{min-width:0;}
.ah-me small{display:block;font-size:11px;font-weight:700;color:var(--muted);line-height:1.4;}

/* 結果画面と同じバナー（本文の途中に2か所） */
.banner{display:block;margin:0 0 30px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);line-height:0;}
.banner img{width:100%;height:auto;display:block;}
@media (hover:hover){ .banner:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14);} }
.banner{transition:transform .18s ease,box-shadow .18s ease;}

/* 印刷・PDF保存：カードや画像をページの境目で切らない／背景色を残す */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#fff;}
  .wrap{box-shadow:none;max-width:460px;}
  .hero,.box,.cards li,.cp,.pc,.cta,.share,.banner,.tg-card,.ah-row,.career dt,.career dd,.more{break-inside:avoid;page-break-inside:avoid;}
  h2,.h3,.lead{break-after:avoid;page-break-after:avoid;}
  img{break-inside:avoid;}
}