@charset "UTF-8";
/* =========================================================
   HARU+AD b-common.css — B案「Field in Motion」共通レイヤー
   common.css の上に重ねて使用（元案には読み込ませない）
   - 紙目グレイン / 出現アニメ / ヒーローの紙片・衛星
   - FIELDページの業務領域3Dオブジェクト
   ========================================================= */

:root{
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.055 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- B案バッジ ---------- */
.b-badge{
  position:fixed;left:var(--pad);bottom:20px;z-index:99;
  font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.14em;
  color:var(--smoke);pointer-events:none;mix-blend-mode:normal;
}
.b-badge b{color:var(--accent);font-style:normal}

/* ---------- 紙目グレイン（ページ全体にごく薄く） ---------- */
body.b-plan::after{
  content:"";position:fixed;inset:0;z-index:98;pointer-events:none;
  background:var(--grain);opacity:.5;
}

/* ---------- 出現アニメ ---------- */
.brv{opacity:0;transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.brv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.brv{opacity:1;transform:none;transition:none}}

/* ---------- ワイド画面対策：1400px以上でコンテンツ上限1240px＋左右均等余白 ----------
   （旧: 1840px以上/上限1680px。右側だけ余白が大きく見える指摘への対応 2026-07-17） */
@media(min-width:1400px){
  :root{--pad:calc((100vw - 1240px) / 2)}
}

/* ---------- WORKS：数字のインフォグラフィック（罫線を使わず円形ゲージで） ---------- */
body.b-plan .stats,body.b-plan .stat,
body.b-plan .annual,body.b-plan .arow{border:none!important}
.num,.anum{font-variant-numeric:tabular-nums}
.bga-track{stroke:#dcd7cd;fill:none}
.bga-arc{stroke:var(--accent);fill:none;stroke-linecap:round;
  transition:stroke-dashoffset 1.35s cubic-bezier(.2,.7,.2,1) .15s}
/* stats：大きな数字の背後にエッチング調のアーク */
.stat{position:relative}
.bstat-ring{position:absolute;left:-20px;top:-24px;width:112px;height:112px;z-index:0;pointer-events:none;opacity:.9}
.stat .num,.stat .lbl{position:relative;z-index:1}
/* annual：ドーナツゲージ＋数字 */
.arow.b-donut{display:grid;grid-template-columns:92px 1fr;gap:2px 18px;align-items:center}
.arow.b-donut svg{grid-row:1/3;width:92px;height:92px}
.arow.b-donut .anum,.arow.b-donut .albl{grid-column:2}

/* ---------- トップ：透かしのバネマークは使わない ---------- */
body.b-top .hero-mark{display:none}

/* ---------- ヒーロー：浮遊する「＋」「！」のみ ---------- */
.bstill{position:absolute;right:5vw;top:7%;bottom:9%;width:52vw;z-index:1;pointer-events:none}
@media(max-width:819px){.bstill{right:2vw;width:78vw;top:4%;bottom:34%}}
.bplusf{
  position:absolute;z-index:3;font-family:var(--serif);font-weight:600;font-size:52px;
  color:var(--accent);line-height:1;
  animation:bplf 15s ease-in-out infinite alternate;
}
@keyframes bplf{from{transform:translateY(0) rotate(3deg)}to{transform:translateY(-30px) rotate(-4deg)}}
.bexcl{
  position:absolute;z-index:3;font-family:var(--serif);font-weight:600;font-size:40px;
  color:var(--accent);line-height:1;
  animation:bex 13s ease-in-out infinite alternate;
}
@keyframes bex{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-24px) rotate(3deg)}}


/* ---------- トップ：ヒーロー写真の切替ループ（写真1⇄写真2） ---------- */
.bheroph{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:center/cover no-repeat;opacity:0;
  animation:bswap 18s ease-in-out infinite;
}
.bheroph.ph1{background-image:url("../images/b-hero-1.jpg");background-position:62% 78%;opacity:1}
.bheroph.ph2{background-image:url("../images/b-hero-2.jpg");background-position:52% 42%;animation-delay:-9s}
@keyframes bswap{0%,39%{opacity:1}50%,89%{opacity:0}100%{opacity:1}}
.bhero-scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(78deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.62) 46%,rgba(10,10,10,.3) 100%),
    radial-gradient(130% 110% at 72% 26%,transparent 34%,rgba(10,10,10,.78) 100%);
}

/* ---------- HISTORY：Creative Topics の挿絵（自作線画＝版権フリー） ---------- */
.tl-art{
  float:right;width:114px;height:114px;margin:0 0 10px 18px;
  border:1px solid var(--line);border-radius:2px;
  background:var(--grain),linear-gradient(155deg,#faf8f4,#eceae4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 16px rgba(10,10,10,.04);
  display:flex;align-items:center;justify-content:center;
}
.tl-art svg{width:86px;height:86px;display:block;stroke:#33302c;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tl-art .ac{stroke:var(--accent)}
.tl-art .acf{fill:var(--accent);stroke:none}
.tl-art .df{fill:#33302c;stroke:none}
@media(max-width:640px){
  .tl-art{width:94px;height:94px;margin-left:12px}
  .tl-art svg{width:70px;height:70px}
}


/* =========================================================
   FIELDページ：業務領域ごとのミニ3Dオブジェクト
   （fblock-head の見出し下に配置。820px未満は非表示）
   ========================================================= */
.bstage{
  position:relative;height:270px;max-width:380px;margin-top:28px;
  perspective:1000px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.bwrap{transform:scale(.52);transform-style:preserve-3d;position:relative}
@media(max-width:819px){.bstage{display:none}}

.bobj{transform-style:preserve-3d;will-change:transform;position:relative;width:0;height:0}
.bobj *{transform-style:preserve-3d}
.bface{position:absolute;backface-visibility:visible}

/* 面トーン（無地・生成り） */
/* 磨いた質感：斜めの光沢帯＋深い落ち込み＋二重ハイライト */
.bt1{background:var(--grain),
     linear-gradient(118deg,transparent 34%,rgba(255,255,255,.5) 47%,transparent 60%),
     linear-gradient(160deg,#fefdfb,#e6e3db 56%,#c6c2b8 100%);
     border:1px solid #b7b3aa;
     box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 0 0 .5px rgba(255,255,255,.28),
       inset 0 -20px 34px rgba(10,10,10,.13)}
.bt2{background:var(--grain),
     linear-gradient(118deg,transparent 36%,rgba(255,255,255,.4) 48%,transparent 60%),
     linear-gradient(160deg,#f2efe9,#d8d4cb 56%,#b8b4aa 100%);
     border:1px solid #aaa69d;
     box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 0 0 .5px rgba(255,255,255,.22),
       inset 0 -20px 34px rgba(10,10,10,.15)}
.bt3{background:var(--grain),
     linear-gradient(118deg,transparent 38%,rgba(255,255,255,.32) 49%,transparent 60%),
     linear-gradient(160deg,#e7e4dc,#cbc7be 56%,#a9a59b 100%);
     border:1px solid #9c988f;
     box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(255,255,255,.18),
       inset 0 -20px 34px rgba(10,10,10,.17)}

/* 接地影：広いソフト影＋芯の締まった影の二重 */
.bgshadow{
  position:absolute;left:-190px;top:118px;width:380px;height:54px;
  background:
    radial-gradient(30% 42% at 50% 50%,rgba(10,10,10,.2),transparent 74%),
    radial-gradient(50% 50% at 50% 50%,rgba(10,10,10,.13),rgba(10,10,10,.05) 46%,transparent 72%);
}

/* 01 広告：ポスター */
.bposter{width:150px;height:212px;position:absolute;transform-style:preserve-3d}
.bposter .bface{inset:0}
.bposter .bface::before{
  content:"";position:absolute;left:14px;right:14px;top:18px;height:44px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/78% 3px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 12px/56% 3px no-repeat,
    linear-gradient(#9b978e,#9b978e) 0 30px/40% 2px no-repeat;
  opacity:.75;
}
.bposter .bface::after{
  content:"";position:absolute;left:14px;right:14px;bottom:16px;height:30px;
  background:repeating-linear-gradient(0deg,#a5a198 0 1.5px,transparent 1.5px 8px);
  opacity:.55;
}

/* 03 SP：扇のカード */
.bfan{position:absolute;left:50%;bottom:-90px;width:120px;height:176px;margin-left:-60px;
  transform-origin:50% 105%;will-change:transform}

/* 04 ロゴプレート（グレー×シルバーヘアライン） */
.bsv-a{border:none!important;
  background:var(--grain),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,rgba(105,105,102,.10) 1px 2px),
    linear-gradient(118deg,transparent 32%,rgba(255,255,255,.34) 46%,transparent 62%),
    linear-gradient(155deg,#e2e2e0 0%,#c6c6c3 48%,#a3a3a0 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -14px 30px rgba(40,40,38,.14)}
.bsv-b{border:none!important;
  background:var(--grain),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,rgba(80,80,78,.12) 1px 2px),
    linear-gradient(180deg,#9c9c99,#7d7d7a)!important;
  box-shadow:inset 0 0 20px rgba(40,40,38,.22)}
.bplaque-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.bplaque-face svg{width:58%;height:auto;display:block;flex-shrink:0}
.bplaque-face .lg-word{
  font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.05em;
  color:#5d5d5a;line-height:1;
}

/* 05 Web：ワイヤーフレームのブラウザ面 */
.bframe2{position:absolute;width:250px;height:170px;border:1.2px solid var(--ink);left:-125px;top:-85px;
  background:var(--grain),linear-gradient(rgba(245,243,239,.55),rgba(245,243,239,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 34px -22px rgba(10,10,10,.28)}
.bframe2::before{
  content:"";position:absolute;left:0;right:0;top:0;height:26px;border-bottom:1.2px solid var(--ink);
  background:
    radial-gradient(circle 3.5px at 14px 13px,var(--ink) 3.2px,transparent 3.6px),
    radial-gradient(circle 3.5px at 28px 13px,var(--ink) 3.2px,transparent 3.6px),
    radial-gradient(circle 3.5px at 42px 13px,var(--accent) 3.2px,transparent 3.6px);
}
.bframe2::after{
  content:"";position:absolute;left:16px;right:16px;top:44px;bottom:16px;
  background:
    linear-gradient(#0a0a0a,#0a0a0a) 0 0/60% 8px no-repeat,
    linear-gradient(#9b978e,#9b978e) 0 22px/90% 2px no-repeat,
    linear-gradient(#9b978e,#9b978e) 0 32px/84% 2px no-repeat,
    linear-gradient(#9b978e,#9b978e) 0 42px/88% 2px no-repeat,
    linear-gradient(#c9c5bc,#c9c5bc) 0 60px/46% 34px no-repeat,
    linear-gradient(#c9c5bc,#c9c5bc) 54% 60px/46% 34px no-repeat;
  opacity:.8;
}

/* 06 動画：フィルムフレーム */
.bfilm{position:absolute;width:132px;height:92px;transform-style:preserve-3d;left:-66px;top:-46px}
.bfilm .bface{
  inset:0;background:var(--grain),linear-gradient(150deg,#fdfcfa,#e0ddd5);border:1px solid #b5b1a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(10,10,10,.05);
}
.bfilm .bface::before,
.bfilm .bface::after{
  content:"";position:absolute;left:6px;right:6px;height:8px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 16px);
  opacity:.7;
}
.bfilm .bface::before{top:5px}
.bfilm .bface::after{bottom:5px}

/* 07 海外：リング球 */
.bring{position:absolute;border-radius:50%;border:1.3px solid var(--ink)}
.bring.dash{border-style:dashed;border-color:var(--smoke)}

/* 00 総合：軌道チップ */
.bchip{position:absolute;width:44px;height:60px}

/* ---------- 見出し文の文節改行制御（役員FB 2026-07-13） ---------- */
.nb{display:inline-block}

/* ---------- ナビ7項目化（CONTACT追加）に伴う狭幅デスクトップの調整 ---------- */
@media(min-width:820px) and (max-width:1019px){
  nav.desktop a{margin-left:16px;font-size:12px;letter-spacing:.08em}
}

/* ---------- ワイド画面の2カラム編集グリッド（C案・2026-07-17 本採用） ----------
   1200px以上：セクションラベル＝左レール（スクロール追従）／本文＝右カラム。
   1200px未満は従来の縦積みのまま（ノートPC・タブレット・スマホに影響なし）。 */
@media(min-width:1200px){
  .section{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    column-gap:clamp(40px,4vw,90px);
  }
  .section > .section-label{
    grid-column:1;
    position:sticky;top:100px;align-self:start;
    margin-bottom:0;padding-top:6px;border-top:1px solid var(--line);
  }
  .section > *:not(.section-label){grid-column:2}

  /* トップページの CONCEPT ブロックも同じ編集グリッドに */
  .intro{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    column-gap:clamp(40px,4vw,90px);
  }
  .intro > .label{
    grid-column:1;
    position:sticky;top:100px;align-self:start;
    margin-bottom:0;padding-top:6px;border-top:1px solid var(--line);
  }
  .intro > *:not(.label){grid-column:2}
}

/* ---------- トップCONCEPT：文単位の改行制御（会長FB 2026-07-31） ---------- */
.intro p.stmt{max-width:32em}
.intro p.stmt .s{display:block}
.intro p.stmt .nb{display:inline-block}

/* ---------- ドロワー：非表示時の漏れと開いた時のスクロール ---------- */
.drawer{
  overflow-y:auto;
  justify-content:safe center;   /* 溢れても上端が切れない */
  visibility:hidden;
  transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s;
}
.drawer.open{
  visibility:visible;
  transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s 0s;
}