/* ======================================================================
   パターン⑳ 1画面タブ型（2026-11-10 作り直し）
   パソコンでは画面の高さに収める。左に自己紹介のカード、右に大きなタブの箱（中だけスクロール）。
   濃いメイン色の地に、白い箱が2つ浮かぶ形。タブは body.p20b-js のときだけ働く。
   ====================================================================== */
body[data-pattern="20"]{
  --ink:#141a22;--sub:#5a6470;--line:#e2e6eb;
  --acc:color-mix(in srgb,var(--blue) 78%,#000);
  --bg:color-mix(in srgb,var(--navy) 90%,#000);
  --soft:color-mix(in srgb,var(--sky) 18%,#fff);
  background:var(--bg);color:var(--ink);
}
.p20b-wrap{width:min(1320px,100% - 40px);margin:0 auto}
body[data-pattern="20"] .sample-notice{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:10px;margin-bottom:12px}

/* ヘッダー */
.p20b-header{background:var(--bg);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.p20b-logo{display:flex;flex-direction:column;color:#fff;font-weight:800;font-size:19px;line-height:1.25}
.p20b-logo small{font-size:12px;font-weight:500;opacity:.85}
.p20b-nav a{color:#fff;font-size:14px;font-weight:700}
.p20b-nav a:hover{color:#fff;text-decoration:underline}
.p20b-nav a.p20b-nav__cta{background:var(--yellow);color:#1a1a1a;border-radius:10px;padding:8px 18px}
body[data-pattern="20"] .menu-btn span{background:#fff}
body[data-pattern="20"] .header :focus-visible{outline-color:var(--yellow)}

.p20b{padding:86px 0 24px}
.p20b-screen{display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;align-items:start}

/* 自己紹介のカード */
.p20b-me{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.p20b-me__photo{margin:0;background:var(--soft);aspect-ratio:5/4;overflow:hidden}
.p20b-me__photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.p20b-me__body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.p20b-me__role{font-size:13px;font-weight:700;color:var(--sub);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.p20b-me__role span{background:var(--soft);color:var(--acc);border-radius:6px;padding:0 8px}
.p20b-me__name{font-weight:900;font-size:34px;line-height:1.15}
.p20b-me__catch{font-weight:800;font-size:17px;line-height:1.6}
.p20b-me__accent{font-size:14px;font-weight:700;color:var(--acc)}
.p20b-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0}
.p20b-stats li{background:var(--soft);border-radius:12px;padding:8px 10px}
.p20b-stats b{display:block;font-weight:900;font-size:22px;line-height:1.2;color:var(--acc)}
.p20b-stats b small{font-size:12px;color:var(--ink);margin:0 1px}
.p20b-stats span{display:block;font-size:12px;line-height:1.5}
.p20b-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:12px;background:var(--acc);color:#fff !important;font-weight:800;font-size:16px;margin-top:6px}
.p20b-btn:hover{filter:brightness(1.12)}
.p20b-btn--big{min-height:60px;padding:0 40px;font-size:18px;background:var(--yellow);color:#1a1a1a !important}

/* タブの箱 */
.p20b-box{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.p20b-tabs{display:none}
body.p20b-js .p20b-tabs{display:flex;gap:4px;padding:10px 10px 0;background:var(--soft);overflow-x:auto;scrollbar-width:thin}
.p20b-tab{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;font:inherit;font-weight:800;font-size:15px;color:var(--sub);padding:14px 18px;border-radius:14px 14px 0 0}
.p20b-tab span{font-size:12px;color:var(--acc)}
.p20b-tab:hover{color:var(--ink)}
.p20b-tab[aria-selected="true"]{background:#fff;color:var(--ink)}
.p20b-tab:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.p20b-panel{padding:34px 40px 40px}
body:not(.p20b-js) .p20b-panel + .p20b-panel{border-top:1px solid var(--line)}
.p20b-panel:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
body[data-pattern="20"] .p20b-h2{font-size:clamp(24px,2.4vw,32px);font-weight:900;text-align:left;margin:0 0 22px;color:var(--ink)}
body[data-pattern="20"] .p20b-h2::after{display:none}
.p20b-tag{display:inline-block;font-size:12px;font-weight:700;background:var(--soft);color:var(--acc);border-radius:6px;padding:1px 8px;margin:0 4px 4px 0}

/* パソコン：1画面に収める（タブのときだけ） */
@media (min-width:901px) and (min-height:620px){
  body.p20b-js .p20b-screen{height:calc(100vh - 120px);min-height:560px;align-items:stretch}
  body.p20b-js .p20b-me{overflow-y:auto}
  body.p20b-js .p20b-panels{flex:1;min-height:0;position:relative}
  body.p20b-js .p20b-panel{position:absolute;inset:0;overflow-y:auto}
  body.p20b-js .sample-notice{font-size:12px}
}

.p20b-msg__title{font-weight:900;font-size:22px;line-height:1.55;color:var(--acc);margin-bottom:14px}
.p20b-msg{columns:2 280px;column-gap:40px}
.p20b-msg p{font-size:15px;line-height:1.95;margin-bottom:1em;break-inside:avoid}
.p20b-big{font-weight:800;font-size:18px !important;line-height:1.6 !important;background:var(--soft);border-radius:12px;padding:12px 16px}
.p20b-sign{text-align:right;font-weight:700;margin-top:8px}

.p20b-pol{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.p20b-pol li{border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.p20b-pol li.is-hot{border:2px solid var(--acc);background:var(--soft)}
.p20b-pol span{font-weight:900;font-size:13px;color:var(--acc)}
.p20b-pol h3{font-weight:900;font-size:18px;margin:4px 0 6px}
.p20b-pol p{font-size:14px;line-height:1.85;color:#333}

.p20b-lead{font-size:15px;line-height:1.9;color:var(--sub);margin:-8px 0 18px}
.p20b-qa{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.p20b-qa li{border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.p20b-qa__meta{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:4px}
.p20b-qa__meta .p20b-tag{margin-left:6px}
.p20b-qa h3{font-weight:900;font-size:17px;line-height:1.5;margin-bottom:6px}
.p20b-qa p{font-size:14px;line-height:1.8}
.p20b-qa__a{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.p20b-qa__a b{font-size:12px;background:var(--acc);color:#fff;border-radius:4px;padding:0 6px;margin-right:6px}
.p20b-records{list-style:none}
.p20b-records li{display:grid;grid-template-columns:12em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
body[data-pattern="20"] .cv{--cv-radius:14px;margin-top:24px}
body[data-pattern="20"] .q-entry{justify-content:flex-start}

.p20b-news{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.p20b-news a{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;height:100%}
.p20b-news a:hover{box-shadow:0 8px 18px rgba(0,0,0,.08)}
.p20b-news img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--soft)}
.p20b-news a > span{display:block;padding:12px 14px 16px}
.p20b-news time{font-size:12px;color:var(--sub);margin-right:6px}
.p20b-news b{display:block;font-size:15px;line-height:1.5;margin-top:4px}

.p20b-prof{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.p20b-prof__photo{width:110px;height:110px;border-radius:18px;object-fit:cover;object-position:center 18%}
.p20b-prof__name{font-weight:900;font-size:26px}
.p20b-prof__name small{display:block;font-size:13px;color:var(--sub);font-weight:700;letter-spacing:.15em}
.p20b-prof__lines{font-weight:700;font-size:14px;margin-top:6px;line-height:1.7}
.p20b-table{columns:2 300px;column-gap:32px}
.p20b-table div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;break-inside:avoid}
.p20b-table dt{font-weight:800;color:var(--sub)}
.p20b-prof__motto{margin-top:12px;font-weight:700}
.p20b-prof__motto span{font-size:12px;background:var(--soft);color:var(--acc);border-radius:6px;padding:1px 8px;margin-right:8px}

#contact.p20b-panel{text-align:center}
#contact .p20b-h2{text-align:center;margin-top:20px}
.p20b-contact__lead{line-height:1.9;margin-bottom:24px}
.p20b-contact__info{margin-top:14px;font-size:15px}
.p20b-sns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.p20b-sns__link{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 14px;font-size:14px}
.p20b-sns__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

.p20b-footer{background:var(--bg);color:#fff;border-top:1px solid rgba(255,255,255,.12)}
.p20b-footer__in{width:min(1320px,100% - 40px);margin:0 auto}
.p20b-footer__name{font-weight:800;font-size:18px}
.p20b-footer__office{font-size:14px;line-height:1.9;opacity:.92}
.p20b-footer a{color:#fff;text-decoration:underline}
body[data-pattern="20"] .footer__copy{color:rgba(255,255,255,.85)}
body[data-pattern="20"] .float-cta{background:var(--yellow);color:#1a1a1a;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.3)}

@media (max-width:900px){
  .p20b-screen{grid-template-columns:1fr}
  .p20b-me{display:grid;grid-template-columns:150px 1fr}
  .p20b-me__photo{aspect-ratio:auto;height:100%}
  body.p20b-js .p20b-tabs{position:sticky;top:62px;z-index:5}
  .p20b-box{scroll-margin-top:70px}
}
@media (max-width:768px){
  .p20b-wrap,.p20b-footer__in{width:calc(100% - 24px)}
  .p20b{padding:76px 0 20px}
  .p20b-me{grid-template-columns:1fr}
  .p20b-me__photo{aspect-ratio:4/3;height:auto}
  .p20b-panel{padding:24px 18px 30px}
  .p20b-tab{padding:12px 14px;font-size:14px}
  .p20b-qa{grid-template-columns:1fr}
  .p20b-records li{grid-template-columns:1fr;gap:4px}
  .p20b-table div{grid-template-columns:6em 1fr}
  body[data-pattern="20"] .p20b-nav{background:var(--bg)}
  body[data-pattern="20"] .p20b-nav a{border-top-color:rgba(255,255,255,.12)}
}
@media (max-width:480px){.p20b-stats{grid-template-columns:1fr 1fr}}