/* =========================================================
   A2B コーポレートサイト 本体CSS
   前半: 元HTML A2B.dc.html <helmet><style>（29-97行）を忠実に移植
   後半: style-hover 属性由来の :hover、ドロワー・メンバーモーダル
   ========================================================= */

/* ---- 元 <helmet><style> ここから ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #141414; color: #fafaf9; }
@keyframes a2bmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.work { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:16px; }
.work .frame { position:relative; overflow:hidden; border:1px solid #e7e3dd; }
.work .frame img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.work:hover .frame img { transform: scale(1.06); }
.work .frame .veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,20,0.55), rgba(20,20,20,0) 55%); opacity:0; transition:opacity .5s ease; }
.work:hover .frame .veil { opacity:1; }
.work .frame .idx { position:absolute; top:16px; left:18px; font-family:'Archivo',sans-serif; font-weight:700; font-size:14px; letter-spacing:0.14em; color:#faf9f7; mix-blend-mode:difference; }
.work .frame .tag { position:absolute; top:16px; right:18px; font-family:'Archivo',sans-serif; font-size:10px; letter-spacing:0.14em; color:#141414; background:#faf9f7; padding:5px 10px; border-radius:100px; }
.work .cap { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid #141414; padding-top:16px; }
.work .cap .arrow { font-family:'Archivo',sans-serif; color:#8b857c; transition:transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease; }
.work:hover .cap .arrow { transform:translate(6px,-6px); color:#141414; }
.work .cap h3 { margin:0; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:500; font-size:16px; letter-spacing:0.01em; }
/* nav underline */
.navlink { position:relative; }
.navlink::after { content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:#141414; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.navlink:hover::after { transform:scaleX(1); transform-origin:left; }
/* service list rows */
.srow { transition: padding-left .35s cubic-bezier(.2,.7,.2,1); }
.srow:hover { padding-left:10px; }
.srow .sar { display:inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.srow:hover .sar { transform: translateX(4px); }
/* company rows */
.crow { transition: padding-left .35s cubic-bezier(.2,.7,.2,1), background .35s ease; }
.crow:hover { padding-left:14px; background:#f2efe9; }
/* scroll cue */
@keyframes a2bcue { 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(8px); opacity:1 } }
/* hero wordmark drift */
@keyframes a2bdrift { from{ transform:translateY(-50%) translateX(0) } to{ transform:translateY(-50%) translateX(-14px) } }
/* member cards */
.mcard .pf { position:relative; }
.mcard .pf img { filter:grayscale(1) contrast(1.02); transition: filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.mcard:hover .pf img { filter:grayscale(0) contrast(1); transform:scale(1.04); }
.mcard .pf .mno { position:absolute; top:14px; left:16px; font-family:'Archivo',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.16em; color:#faf9f7; mix-blend-mode:difference; }
/* modal member rows */
.mrow { transition: padding-left .3s cubic-bezier(.2,.7,.2,1); }
.mrow:hover { padding-left:12px !important; }
@media (max-width: 560px) {
  .mrow { grid-template-columns:1fr !important; gap:10px !important; }
  .mrow p:last-child { white-space:normal !important; }
}
/* ===== responsive ===== */
@media (max-width: 900px) {
  .desknav { display:none !important; }
  .menubtn { display:flex !important; }
  .sec-pad { padding-left:22px !important; padding-right:22px !important; }
  .grid-2, .grid-2v { grid-template-columns:1fr !important; }
  .grid-2 > div { border-right:none !important; }
  .stack-gap { gap:44px !important; }
  .works-grid { grid-template-columns:1fr !important; gap:20px !important; }
  .members-grid { grid-template-columns:1fr !important; }
  .members-grid > .mcard:first-child { border-right:none !important; border-bottom:1px solid #e7e3dd !important; }
  .name-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .name-inner { grid-template-columns:1fr !important; gap:32px !important; }
  .co-row { grid-template-columns:120px 1fr !important; gap:14px !important; }
  .hero-sec { min-height:auto !important; padding-top:120px !important; padding-bottom:80px !important; }
  .sec-v { padding-top:76px !important; padding-bottom:76px !important; }
}
@media (max-width: 560px) {
  .sec-pad { padding-left:18px !important; padding-right:18px !important; }
  .co-row { grid-template-columns:1fr !important; gap:2px !important; }
  .cta-scroll { display:none !important; }
}
/* ---- 元 <helmet><style> ここまで ---- */


/* =========================================================
   style-hover 属性由来の :hover（元HTMLの style-hover をそのまま移植）
   ========================================================= */
.a2b-nav-cta:hover     { transform:translateY(-2px); background:#2e2a24; }
.a2b-hero-cta:hover    { gap:18px; }
.a2b-service-img:hover { transform:scale(1.03); }
.a2b-ace-link:hover    { color:#b23b30; }
.a2b-members-btn:hover { background:#141414; color:#faf9f7; gap:18px; }
.a2b-modal-close:hover { background:#f1efeb; transform:rotate(90deg); }
.a2b-contact-btn:hover { transform:translateY(-3px); gap:20px; }


/* =========================================================
   モバイルドロワー（元 support.js navOverlayStyle / navPanelStyle）
   .is-open トグルで開閉（js/nav-modal.js）
   ========================================================= */
.a2b-drawer {
  position:fixed; inset:0; z-index:60;
  background:rgba(20,20,20,0.4); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.a2b-drawer.is-open { opacity:1; visibility:visible; }
.a2b-drawer__panel {
  position:absolute; top:0; right:0; height:100%; width:78%; max-width:340px;
  background:#faf9f7; border-left:1px solid #e7e3dd;
  display:flex; flex-direction:column; gap:22px;
  padding:104px 32px 40px;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.a2b-drawer.is-open .a2b-drawer__panel { transform:translateX(0); }


/* =========================================================
   メンバーモーダル（元 support.js overlayStyle / dialogStyle）
   ========================================================= */
.a2b-modal {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:32px; background:rgba(20,20,20,0.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.a2b-modal.is-open { opacity:1; visibility:visible; }
.a2b-modal__dialog {
  width:100%; max-width:760px; max-height:86vh; overflow-y:auto;
  background:#faf9f7; border:1px solid #e7e3dd; padding:48px;
  transform:translateY(16px) scale(0.98);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.a2b-modal.is-open .a2b-modal__dialog { transform:translateY(0) scale(1); }

/* body スクロールロック（ドロワー/モーダル表示中） */
body.a2b-no-scroll { overflow:hidden; }

/* スマホ幅のみ有効な改行（PCでは無効） */
.a2b-sp-br { display:none; }
@media (max-width: 560px) {
  .a2b-sp-br { display:inline; }
}


/* =========================================================
   固定ヘッダー: アンカー移動時に見出しがヘッダーに隠れないよう余白を確保
   （ヘッダー実高 ≒ 84px + 余白）
   ========================================================= */
html { scroll-padding-top: 96px; }


/* =========================================================
   ABOUT 統計（2 / 100% / ∞）の縦揃え
   数字ボックスの行高を固定して3列のラベル開始位置を揃える。
   ∞ はフォールバック描画で小さく中央寄りになるため数字と高さを合わせる。
   ========================================================= */
.a2b-stat__num {
  font-family:'Archivo',sans-serif; font-weight:700; font-size:40px;
  line-height:1; letter-spacing:-0.02em;
  display:flex; align-items:flex-end; height:40px;
}
.a2b-stat__label { font-size:12px; color:#8b857c; margin-top:12px; }
/* ∞ は下端揃えより中央揃えの方が数字と釣り合う */
.a2b-stat__num--sym { font-size:50px; line-height:1; align-items:center; transform:translateY(-5px); }