/* ======================================================================
   パターン⑯ 分割スクリーン型（2026-11-10 作り直し）
   左の46%に写真を固定（下に濃い色の帯：名前・章の一覧・相談ボタン）。右側だけがスクロール。
   右側は白地にゆったりした組み方。書体は Zen Kaku Gothic New。
   ====================================================================== */
body[data-pattern="16"]{
  --side:46vw;
  --ink:#15191f;--sub:#5d6670;--line:#e3e6ea;
  --acc:color-mix(in srgb,var(--blue) 78%,#000);
  --barbg:color-mix(in srgb,var(--navy) 92%,#000);
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;color:var(--ink);background:#fff;
}
body[data-pattern="16"] h1,body[data-pattern="16"] h2,body[data-pattern="16"] h3{font-family:inherit}

/* ヘッダーは右側だけ */
.p16x-header{left:var(--side);background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--line)}
.p16x-header .header__inner{max-width:none;padding:0 48px}
.p16x-logo{visibility:hidden;display:flex;flex-direction:column;font-weight:900;font-size:19px;line-height:1.2;color:var(--ink)}
.p16x-logo small{font-size:12px;font-weight:700;color:var(--sub)}
.p16x-nav{gap:22px}
.p16x-nav a{font-size:14px;font-weight:700;color:var(--ink)}
.p16x-nav a:hover{color:var(--acc)}
.p16x-nav a.p16x-nav__cta{background:var(--acc);color:#fff;padding:8px 18px;border-radius:4px}
body[data-pattern="16"] .menu-btn span{background:var(--ink)}

/* 左の固定パネル */
.p16x-side{position:fixed;left:0;top:0;bottom:0;width:var(--side);display:flex;flex-direction:column;z-index:40;background:var(--barbg)}
.p16x-side__photo{position:relative;flex:1;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--sky) 30%,#fff)}
.p16x-side__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0;transition:opacity .8s}
.p16x-side__img.is-on{opacity:1}
.p16x-side__bar{color:#fff;padding:22px 32px 26px;display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:end}
.p16x-side__role{font-size:13px;font-weight:700;opacity:.9;grid-column:1}
.p16x-side__name{font-weight:900;font-size:clamp(30px,3vw,44px);line-height:1.15;grid-column:1}
.p16x-side__nav{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25)}
.p16x-side__nav a{font-size:13px;font-weight:700;color:rgba(255,255,255,.88);padding-bottom:2px;border-bottom:2px solid transparent}
.p16x-side__nav a.is-on{color:#fff;border-bottom-color:var(--yellow)}
.p16x-side__bar .p16x-btn{grid-column:2;grid-row:1/3}
.p16x-side :focus-visible{outline-color:var(--yellow)}
.p16x-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:4px;background:var(--yellow);color:#1a1a1a !important;font-weight:900;font-size:16px}
.p16x-btn:hover{filter:brightness(1.05)}
.p16x-btn--big{min-height:60px;padding:0 40px;font-size:18px;background:var(--acc);color:#fff !important}

/* 右側 */
.p16x{margin-left:var(--side);padding:0 clamp(28px,5vw,80px)}
.p16x-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 60px;position:relative}
.p16x-hero .sample-notice{margin-bottom:28px}
.p16x-hero__party{font-size:14px;font-weight:700;color:var(--sub);margin-bottom:20px}
.p16x-hero__catch{font-weight:900;font-size:clamp(34px,3.8vw,58px);line-height:1.4}
.p16x-hero__catch span{display:block}
.p16x-hero__catch span:last-child{color:var(--acc)}
.p16x-hero__accent{font-size:18px;font-weight:700;margin-top:20px}
.p16x-stats{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;margin-top:48px;border-top:2px solid var(--ink);padding-top:20px}
.p16x-stats b{display:block;font-weight:900;font-size:36px;line-height:1.1}
.p16x-stats b small{font-size:14px;margin:0 3px}
.p16x-stats span{display:block;font-size:13px;color:var(--sub);margin-top:6px;line-height:1.6}
.p16x-scroll{position:absolute;bottom:28px;left:0;font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--sub);padding-left:40px}
.p16x-scroll::before{content:"";position:absolute;left:0;top:50%;width:30px;height:2px;background:var(--sub)}

.p16x-sec{padding:100px 0;border-top:1px solid var(--line);max-width:780px}
.p16x-sec__no{font-size:13px;font-weight:700;color:var(--acc);letter-spacing:.15em}
body[data-pattern="16"] .p16x-h2{font-weight:900;font-size:clamp(30px,3vw,44px);text-align:left;margin:8px 0 36px;color:var(--ink)}
body[data-pattern="16"] .p16x-h2::after{display:none}
.p16x-msg__title{font-weight:900;font-size:clamp(22px,2.2vw,28px);line-height:1.6;margin-bottom:22px}
.p16x-msg p{font-size:16px;line-height:2.05;margin-bottom:1.2em}
.p16x-big{font-weight:900;font-size:21px !important;line-height:1.7 !important;padding:6px 0 6px 20px;border-left:6px solid var(--acc)}
.p16x-sign{text-align:right;font-weight:700}

.p16x-pol{list-style:none;counter-reset:x}
.p16x-pol li{display:grid;grid-template-columns:72px 1fr;gap:4px 20px;padding:26px 0;border-bottom:1px solid var(--line)}
.p16x-pol__no{grid-row:span 2;font-weight:900;font-size:40px;line-height:1;color:var(--acc)}
.p16x-pol li.is-hot{background:linear-gradient(90deg,color-mix(in srgb,var(--yellow) 30%,#fff),transparent);padding-left:14px;margin-left:-14px}
.p16x-pol h3{font-weight:900;font-size:21px}
.p16x-pol p{font-size:15px;line-height:1.9;color:#333}

.p16x-lead{font-size:15px;line-height:1.95;color:var(--sub);margin:-16px 0 28px}
.p16x-tl{list-style:none;position:relative}
.p16x-tl::before{content:"";position:absolute;left:8.5em;top:8px;bottom:8px;width:2px;background:var(--line)}
.p16x-tl li{display:grid;grid-template-columns:8.5em 1fr;gap:28px;padding:0 0 30px;position:relative}
.p16x-tl li::before{content:"";position:absolute;left:calc(8.5em - 5px);top:6px;width:12px;height:12px;border-radius:50%;background:var(--acc)}
.p16x-tl__when{font-size:14px;font-weight:700;color:var(--sub);padding-right:20px}
.p16x-tl__body h3{font-weight:900;font-size:19px;line-height:1.5;margin:4px 0 6px}
.p16x-tl__body p{font-size:15px;line-height:1.85}
.p16x-tl__a{margin-top:8px;color:var(--sub)}
.p16x-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,#fff);padding:1px 10px;margin:0 4px 4px 0;border-radius:3px}
.p16x-records{list-style:none}
.p16x-records li{display:grid;grid-template-columns:12em 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
body[data-pattern="16"] .cv{--cv-radius:6px;margin-top:32px}
body[data-pattern="16"] .q-entry{justify-content:flex-start}

.p16x-news{list-style:none}
.p16x-news a{display:block;padding:20px 0;border-bottom:1px solid var(--line)}
.p16x-news a:hover b{color:var(--acc)}
.p16x-news time{font-size:13px;font-weight:700;color:var(--sub);margin-right:10px}
.p16x-news b{display:block;font-size:18px;line-height:1.5;margin-top:4px}
.p16x-news small{display:block;font-size:14px;color:var(--sub);line-height:1.8;margin-top:4px}

.p16x-prof__name{font-weight:900;font-size:32px}
.p16x-prof__name small{display:block;font-size:14px;color:var(--sub);letter-spacing:.2em;font-weight:700}
.p16x-prof__photo{display:none;margin:18px 0 0;max-width:240px}
.p16x-prof__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:6px}
.p16x-prof__lines{font-weight:700;margin:12px 0 20px;line-height:1.8}
.p16x-table div{display:grid;grid-template-columns:7.5em 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.p16x-table dt{font-weight:900}
.p16x-prof__motto{margin-top:16px;font-weight:700}
.p16x-prof__motto span{display:inline-block;font-size:12px;background:var(--ink);color:#fff;padding:1px 8px;margin-right:10px;border-radius:3px}

.p16x-contact{padding:110px 0 120px}
body[data-pattern="16"] .p16x-contact__title{font-size:clamp(28px,3.4vw,46px);line-height:1.45}
.p16x-contact__lead{line-height:1.95;margin-bottom:26px}
.p16x-contact__info{margin-top:16px;font-size:15px}
.p16x-sns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.p16x-sns__link{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--ink);border-radius:4px;padding:6px 14px;font-size:14px}
.p16x-sns__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

.p16x-footer{background:#f4f5f7;color:var(--ink);border-top:0;margin:0 calc(-1 * clamp(28px,5vw,80px))}
.p16x-footer__in{padding:0 clamp(28px,5vw,80px)}
.p16x-footer__name{font-weight:900;font-size:20px}
.p16x-footer__office{font-size:14px;line-height:1.9;color:var(--sub)}
body[data-pattern="16"] .float-cta{display:none}

@media (max-width:900px){
  body[data-pattern="16"]{--side:0px}
  .p16x-header{left:0}
  .p16x-header .header__inner{padding:0 20px}
  .p16x-logo{visibility:visible}
  .p16x-side{position:relative;width:auto;height:auto;z-index:1;margin-top:62px}
  .p16x-side__photo{flex:none;height:min(110vw,560px)}
  .p16x-side__img[data-for="profile"]{display:none}
  .p16x-side__img[data-for="hero"]{opacity:1}
  .p16x-side__nav{display:none}
  .p16x{padding:0 20px}
  .p16x-hero{min-height:0;padding:40px 0 56px}
  .p16x-scroll{display:none}
  .p16x-sec{padding:64px 0}
  .p16x-prof__photo{display:block}
  .p16x-footer{margin:0 -20px}
  .p16x-footer__in{padding:0 20px}
  body[data-pattern="16"] .float-cta{display:block}
}
@media (max-width:768px){
  .p16x-side__bar{grid-template-columns:1fr;padding:20px}
  .p16x-side__bar .p16x-btn{grid-column:1;grid-row:auto;margin-top:12px}
  .p16x-tl::before{left:5px}
  .p16x-tl li{grid-template-columns:1fr;gap:2px;padding-left:28px}
  .p16x-tl li::before{left:0}
  .p16x-records li{grid-template-columns:1fr;gap:4px}
  .p16x-table div{grid-template-columns:6em 1fr}
  .p16x-pol li{grid-template-columns:52px 1fr}
  .p16x-pol__no{font-size:30px}
  body[data-pattern="16"] .p16x-nav{background:#fff}
}