/* 電池バンクが選ばれる理由（/selected/） — loaded after style / cases / company.css */
.pg-why section[id],.pg-why .wy-r{scroll-margin-top:96px}

/* hero collage */
.wy-vis{margin-top:56px;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:min(560px,48vw)}
.wy-vis > div{border-radius:24px;overflow:hidden;background:var(--ink3);position:relative}
.wy-vis .a{grid-row:1/3}
.wy-vis img{width:100%;height:100%;object-fit:cover}
.wy-vis .a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,13,12,.45))}

/* certifications row under numbers */
.pg-why .aw2{margin-top:28px}

/* reasons index */
.wy-idx{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:56px;counter-reset:none}
.wy-idx a{display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border:1px solid var(--line-d);border-radius:16px;background:#fff;transition:.3s var(--ease);height:100%}
.wy-idx span{font-family:var(--ff-d);font-weight:800;font-size:13px;color:var(--grn);letter-spacing:.06em}
.wy-idx b{font-family:var(--ff-h);font-size:15px;line-height:1.45;color:var(--ink)}
.wy-idx a:hover{border-color:var(--ink);transform:translateY(-3px)}

/* reasons */
.wy-list{margin-top:72px;display:flex;flex-direction:column;gap:clamp(56px,7vw,110px)}
.wy-r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.wy-r:nth-child(even) .ph{order:2}
.wy-r .ph{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/2;background:#e6e5df}
.wy-r .ph img{width:100%;height:100%;object-fit:cover}
.wy-r .ph:not(.fig)::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(10,13,12,.55),transparent 45%);pointer-events:none}
.wy-r .ph .n{z-index:1}
.wy-r .ph.fig{background:#fff;border:1px solid var(--line-d)}
.wy-r .ph.fig img{object-fit:contain;padding:18px}
.wy-r .ph .n{position:absolute;left:18px;bottom:12px;font-family:var(--ff-d);font-weight:800;font-stretch:115%;font-size:clamp(56px,6vw,96px);line-height:1;color:#fff;letter-spacing:-.04em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.wy-r .ph.fig .n{color:var(--amb);text-shadow:none}
.wy-r .tg{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;font-weight:700;color:var(--grn)}
.wy-r .tg span{font-family:var(--ff-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:var(--ink);color:var(--amb);padding:4px 10px;border-radius:999px}
.wy-r h3{font-size:clamp(22px,2.2vw,32px);color:var(--ink);margin-top:16px}
.wy-r p:not(.tg){color:var(--mut-d);margin-top:16px;font-size:15px;line-height:2}
.wy-r .bt{margin-top:28px}

/* voices */
.wy-vc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
.wy-vc a{position:relative;display:flex;flex-direction:column;gap:22px;padding:30px 28px 26px;background:#fff;border:1px solid var(--line-d);border-radius:22px;transition:.3s var(--ease)}
.wy-vc a:hover{border-color:var(--ink);transform:translateY(-3px)}
.wy-vc blockquote{font-family:var(--ff-h);font-weight:700;font-size:16.5px;line-height:1.85;color:var(--ink);position:relative;padding-top:30px}
.wy-vc blockquote::before{content:"“";position:absolute;top:-14px;left:-4px;font-family:var(--ff-d);font-size:64px;line-height:1;color:var(--amb)}
.wy-vc .by{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-d);padding-right:52px}
.wy-vc .by b{display:block;font-size:13px;color:var(--ink)}
.wy-vc .by span{display:block;font-size:12px;color:var(--mut-d);margin-top:2px}
.wy-vc .go{position:absolute;right:24px;bottom:24px;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--amb);display:grid;place-items:center;font-family:var(--ff-d)}

@media (max-width:1180px){
  .wy-idx{grid-template-columns:repeat(4,1fr)}
  .wy-vc{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pg-why .sol-h{flex-direction:column;align-items:flex-start;gap:20px}
  .wy-r{grid-template-columns:1fr;gap:28px}
  .wy-r:nth-child(even) .ph{order:0}
  .pg-why .aw2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wy-vis{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .wy-vis .a{grid-row:auto;grid-column:1/3;aspect-ratio:3/2}
  .wy-vis .b,.wy-vis .c{aspect-ratio:1/1}
  .wy-idx{grid-template-columns:1fr 1fr}
  .wy-idx a{padding:16px}
  .wy-vc{grid-template-columns:1fr}
  .wy-list{margin-top:56px}
  .pg-why .nb > div{padding:28px 16px 26px}
  .pg-why .nb .v{font-size:38px}
  .pg-why .nb .v small{font-size:13px;margin-left:3px}
}
@media (prefers-reduced-motion:reduce){ .wy-idx a,.wy-vc a{transition:none} .wy-idx a:hover,.wy-vc a:hover{transform:none} }

/* ===== 配下ページ（/selected/〇〇/） ===== */
.ws .ws-eye{aspect-ratio:7/2}
.ws .at-body .ws-diagram img{background:#fff;border:1px solid var(--line-d);padding:16px;border-radius:16px}
.ws-pts{display:grid;gap:12px;margin:24px 0 30px}
.ws-pts > div{background:#fff;border:1px solid var(--line-d);border-left:4px solid var(--grn);border-radius:14px;padding:20px 22px}
.ws-pts h4{font-size:16px;color:var(--ink)}
.ws .at-body .ws-pts p{margin-top:8px;font-size:14.5px;line-height:1.9;color:var(--mut-d)}
.ws-nb{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);border-radius:20px;overflow:hidden;margin:24px 0 8px}
.ws-nb > div{padding:24px 22px;border-right:1px solid var(--line)}
.ws-nb > div:last-child{border-right:0}
.ws .at-body .ws-nb .k{font-size:12px;color:var(--mut);margin:0}
.ws .at-body .ws-nb .v{font-family:var(--ff-d);font-weight:800;font-stretch:110%;font-size:clamp(30px,3.4vw,46px);line-height:1;color:#fff;margin-top:12px;letter-spacing:-.03em}
.ws-nb .v small{font-family:var(--ff-h);font-size:13px;color:var(--amb);margin-left:4px;letter-spacing:0}
.ws .at-body .ws-nb .v.y{color:var(--amb)}
.ws-vc.wy-vc{grid-template-columns:1fr 1fr;margin:24px 0 20px}
.ws .at-body .ws-vc blockquote{margin:0;border:0;background:none;font-size:15px}
.ws-tel{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:18px;padding:22px 26px;margin:24px 0}
.ws-tel .lb{font-family:var(--ff-d);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--amb);margin:0}
.ws-tel b{display:block;font-family:var(--ff-d);font-weight:800;font-size:30px;letter-spacing:-.01em;line-height:1.2}
.ws-tel span{font-size:12px;color:var(--mut)}
.ws-sib{margin-top:56px}
.ws-sib > .lb{font-family:var(--ff-d);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--grn)}
.ws-sib h2{font-size:22px;color:var(--ink);margin-top:6px}
.ws-sib > div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ws-sib > div a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line-d);border-radius:16px;padding:18px 20px;transition:.25s}
.ws-sib > div a:hover{border-color:var(--ink)}
.ws-sib span{font-family:var(--ff-d);font-weight:800;font-size:18px;color:var(--grn)}
.ws-sib b{font-size:14.5px;color:var(--ink);line-height:1.5}
.ws-sib i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--amb);display:grid;place-items:center;font-family:var(--ff-d)}
@media (max-width:720px){
  .ws .ws-eye{aspect-ratio:16/9}
  .ws-nb{grid-template-columns:1fr}.ws-nb > div{border-right:0;border-bottom:1px solid var(--line)}.ws-nb > div:last-child{border-bottom:0}
  .ws-vc.wy-vc,.ws-sib > div{grid-template-columns:1fr}
}
/* 表：見出し列を折り返し、3列を読みやすく */
.ws .at-body .gd-tbl{min-width:620px}
.ws .at-body .gd-tbl tbody th{white-space:normal;width:30%;min-width:150px;color:var(--ink);font-size:14px}
.ws .at-body .gd-tbl td{color:#2b3330}
.ws .at-hd{padding-bottom:clamp(48px,6vw,88px)}

/* 5ページのシリーズナビ（タイトルの上）：ページが切り替わることが分かる見た目 */
.ws-ch{margin-top:28px;border:1px solid var(--line);border-radius:20px;background:var(--ink2);padding:16px 16px 14px}
.ws-ch-lb{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:0 6px 12px;border-bottom:1px solid var(--line)}
.ws-ch-lb b{font-family:var(--ff-h);font-size:14px;color:#fff}
.ws-ch-lb b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amb);margin-right:10px;vertical-align:middle}
.ws-ch-lb span{font-size:12px;color:var(--mut)}
.ws-ch ol{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px;counter-reset:none}
.ws-ch li{position:relative}
.ws-ch li + li::before{content:"";position:absolute;left:-8px;top:50%;width:8px;height:1px;background:var(--line)}
.ws-ch a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:100%;padding:12px 14px;border:1px solid transparent;border-radius:14px;transition:.2s}
.ws-ch a .no{font-family:var(--ff-d);font-weight:800;font-size:15px;color:var(--mut)}
.ws-ch a b{font-size:13px;line-height:1.4;color:#cfd5d2;font-weight:700}
.ws-ch a i{font-style:normal;font-family:var(--ff-d);font-size:13px;color:var(--mut);transition:.2s}
.ws-ch a:hover{background:var(--ink3);border-color:var(--line)}
.ws-ch a:hover b{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ws-ch a:hover i{color:var(--amb);transform:translateX(3px)}
.ws-ch a[aria-current]{background:var(--amb);cursor:default}
.ws-ch a[aria-current] .no,.ws-ch a[aria-current] b{color:var(--ink)}
.ws-ch a[aria-current] em{font-style:normal;font-size:10.5px;font-weight:700;background:var(--ink);color:var(--amb);padding:2px 8px;border-radius:999px;white-space:nowrap}
.ws .at-hd-in .gd-badge{margin-top:40px}
.ws .ws-eye{margin-top:40px}
/* ナビから移動してきたとき：新しいページの見出しと写真をフェードイン */
@keyframes wsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ws-arrive .ws .at-hd-in,.ws-arrive .ws .ws-eye{animation:wsIn .55s var(--ease) both}
.ws-arrive .ws .ws-eye{animation-delay:.08s}
/* 前後のページ */
.ws-pg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
.ws-pg a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:16px;background:var(--ink);color:#fff;transition:.2s}
.ws-pg a.nx{text-align:right;background:var(--amb);color:var(--ink)}
.ws-pg small{font-size:12px;font-weight:700;opacity:.75}
.ws-pg b{font-size:15px;line-height:1.5}
.ws-pg a:hover{transform:translateY(-2px)}
@media (max-width:1180px){ .ws-ch ol{grid-template-columns:repeat(3,1fr)} .ws-ch li + li::before{display:none} }
@media (max-width:720px){
  .ws-ch{padding:12px}
  .ws-ch ol{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:-12px;padding-right:12px}
  .ws-ch ol::-webkit-scrollbar{display:none}
  .ws-ch li{flex:0 0 68%;scroll-snap-align:start}
  .ws-ch a{padding:10px 12px;border-color:var(--line)}
  .ws-pg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .ws-arrive .ws .at-hd-in,.ws-arrive .ws .ws-eye{animation:none} .ws-pg a:hover{transform:none} }