/* =========================================================
   BONVITA TOP (final)
   - prefix: bv-
   - rem only
   - breakpoints:
     PC: 1025+
     TAB: 768-1024
     SP : 0-767
========================================================= */

:root{
  /* ===== base colors (dark text system) ===== */
  --bv-ink:#e9e9e9;
  --bv-muted:rgba(233,233,233,.62);
  --bv-muted2:rgba(233,233,233,.48);

  /* section backgrounds (faithful) */
  --bv-dark:#0b0b0b;
  --bv-mid:#4b4b4b;
  --bv-mid2:#3f3f3f;
  --bv-light:#8a8a8a;

  /* surfaces */
  --bv-panel:rgba(255,255,255,.12);
  --bv-panel2:rgba(255,255,255,.08);
  --bv-stroke:rgba(255,255,255,.16);

  /* radius / shadow (lighter than before for performance) */
  --bv-radius:0.875rem;   /* 14px */
  --bv-shadow:0 0.875rem 2rem rgba(0,0,0,.26);
	
  /* font */
  --font-main: 'Noto Sans JP', sans-serif;
	
  /* layout */
  --bv-max:73.75rem;      /* 1180px */
  --bv-pad:2.75rem;       /* PC side padding */

  /* ===== spacing system (unified) =====
     section padding uses clamp in rem (still "rem-only")
  */
  --bv-sec-y:clamp(3.75rem, 6vw, 7.5rem); /* 60px〜120px */
  --bv-gap:1.125rem;      /* 18px */
  
  /* ===== type scale (4 kinds) ===== */
  --bv-fz-hero:4.25rem;   /* Hero */
  --bv-fz-sec:3rem;       /* Section heading */
  --bv-fz-sub:1.75rem;    /* Sub heading */
  --bv-fz-base:1rem;      /* Body */
  --bv-fz-sm:0.875rem;    /* Small */
  --bv-lh:1.7;
	
  --bv-chev-h: 3.1rem;     /* 高さ */
  --bv-chev-notch: 1.1rem; /* 左の切り欠き幅 */
  --bv-chev-tip: 1.3rem;   /* 右の尖り幅 */
  --bv-chev-gap: .8rem;    /* ブロック間の隙間 */
  --bv-chev-bg: #3f3f3f;
  --bv-chev-stroke: rgba(255,255,255,.18);
  --bv-chev-stroke2: rgba(0,0,0,.35);
	
}

/* ===== reset (TOP only) ===== */
body.page-top{ margin:0; }

body.page-top .bv-top{
  color:var(--bv-ink);
  font-size:var(--bv-fz-base);
  line-height:var(--bv-lh);
  letter-spacing:0.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.page-top .bv-top *{ box-sizing:border-box; }
body.page-top .bv-top a{ color:inherit; text-decoration:none; }
body.page-top .bv-top img{ max-width:100%; height:auto; display:block; }

/* リンク下線を消す（TOPのみ） */
body.home a:not(.bv-btn){
  text-decoration: none !important;
  text-decoration-line: none !important;
}

body.home a{
  text-decoration:none !important;
}


/* ===== wrapper ===== */
.bv-wrap{
  width:min(var(--bv-max), 90%);
  margin:0 auto;
  padding:0 var(--bv-pad);
}

/* ===== unified section spacing ===== */
.bv-sec{
  padding: var(--bv-sec-y) 0;
  position: relative;
  overflow: hidden;
  contain: paint;
}

/* ヒーローだけ縦中央・フルスクリーンにしたい場合 */
.bv-sec--hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* =========================================================
   ① TONE SYSTEM（叩き台の “背景順＆文字色” を忠実再現）
   ② radial gradients も忠実再現（各トーンで別レイヤ）
========================================================= */

.bv-tone-dark{
  background:
    radial-gradient(56.25rem 32.5rem at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(43.75rem 30rem at 80% 30%, rgba(255,255,255,.05), transparent 60%),
    var(--bv-dark);
  color:var(--bv-ink);
}

.bv-tone-mid{
  background:
    radial-gradient(56.25rem 32.5rem at 20% 0%, rgba(255,255,255,.07), transparent 60%),
    var(--bv-mid);
  color:var(--bv-ink);
}

.bv-tone-mid2{
  background:
    radial-gradient(56.25rem 32.5rem at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--bv-mid2);
  color:var(--bv-ink);
}

.bv-tone-light{
  background:
    radial-gradient(56.25rem 32.5rem at 20% 0%, rgba(0,0,0,.06), transparent 60%),
    var(--bv-light);
  color:#111;
}

/* muted color relationship */
.bv-tone-dark .bv-muted,
.bv-tone-mid  .bv-muted,
.bv-tone-mid2 .bv-muted{ color:var(--bv-muted); }

.bv-tone-light .bv-muted{ color:rgba(0,0,0,.62); }

/* cards on light tone (faithful) */
.bv-tone-light .bv-card{
  background:rgba(0,0,0,.54);
  color:#fff;
  border-color:rgba(0,0,0,.2);
}
.bv-tone-light .bv-card .bv-txt--muted{ color:rgba(255,255,255,.70); }

/* =========================================================
   ③ TYPOGRAPHY（文字サイズ4種を全セクションで統一）
========================================================= */
.bv-ttl-hero{
  margin:0;
  font-size:var(--bv-fz-hero);
  font-weight:700;
  line-height:1.08;
}
.bv-ttl-sec{
  margin:30px 0;
  font-size:var(--bv-fz-sec);
  font-weight:700;
  line-height:1.12;
}
.bv-ttl-sec--sm{
  font-size:2.625rem; /* CTAだけ視認性確保（統一感は維持） */
  font-weight:800;
}
.bv-ttl-sub{
  margin-top:1.125rem;
  font-size:var(--bv-fz-sub);
  font-weight:700;
  line-height:1.16;
}
.bv-ttl-card{
  margin:0;
  font-size:1.5rem; /* 24px相当（カード見出し固定） */
  font-weight:700;
}
.bv-lead{
  margin-top:1rem;
  font-size:1.125rem;
  line-height:1.7;
  color:var(--bv-muted);
}
.bv-txt{ margin:.75rem 0 0; color:var(--bv-muted); line-height:1.85; }
.bv-txt--muted{ color:var(--bv-muted); }

/* spacing helpers (minimal) */
.bv-sp{ height:1rem; }
.bv-sp--2{ height:1.5rem; }
.bv-mt-sm{ margin-top:1.375rem; }
.bv-mt-md{ margin-top:1.625rem; }

/* =========================================================
   UI blocks
========================================================= */

/* pill */
.bv-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:.625rem;
  border:1px solid var(--bv-stroke);
  background:rgba(255,255,255,.10);
  font-size:var(--bv-fz-sm);
  font-weight:600;
  letter-spacing:.06em;
  width:fit-content;
}
.bv-pill svg{ width:1rem; height:1rem; opacity:.9; }

/* buttons */
.bv-btns{ display:flex; gap:.875rem; flex-wrap:wrap; margin-top:1.125rem; }
.bv-btn{
  border-radius:.625rem;
  padding:1rem 1.125rem;
  border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.90);
  color:#111;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 .625rem 1.5rem rgba(0,0,0,.18); /* 軽量化 */
}
.bv-btn--ghost{
  background:rgba(0,0,0,.55);
  color:#fff;
  border-color:rgba(255,255,255,.88);
}

/* phone */
.bv-heroTel{ margin-top:1.125rem; }
.bv-tel{
  display:inline-grid;
  gap:.25rem;
  padding:.75rem 1rem;
  border-radius:.875rem;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.22);
  width:fit-content;
}
.bv-tel__label{ font-size:.875rem; color:rgba(233,233,233,.72); font-weight:700; }
.bv-tel__num{ font-size:1.25rem; font-weight:900; letter-spacing:.04em; }

/* grid */
.bv-grid{ display:grid; gap:var(--bv-gap); }
.bv-grid--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.bv-grid--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

/* card */
.bv-card{
  background:var(--bv-panel);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--bv-radius);
  padding:1.375rem;
  box-shadow:var(--bv-shadow);
}

/* =========================================================
   HERO（叩き台の “黒＋写真＋グラデ” を再現）
   ※背景画像は page-top.php から --bv-hero-bg で渡す
========================================================= */

/* HEROのレイヤー基準を作る */
.bv-sec--hero{
  position: relative;
  overflow: hidden;
}

/* 1) 背景画像（ズーム） */
.bv-sec--hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../images/bk_top.jpg") center / cover no-repeat;
  transform: scale(1.05);
  transform-origin:center;
  animation: heroZoom 24s ease-out forwards;
  z-index: 0;
}

/* 2) 上に被せるグラデ（今のグレー/黒グラデ） */
.bv-sec--hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.80), rgba(0,0,0,.40));
  z-index: 1;
}

/* 3) セクション内のテキスト等は最前面に */
.bv-sec--hero > *{
  position: relative;
  z-index: 2;
}

/* ズームアニメ */
@keyframes heroZoom{
  from { transform: scale(1.05); }
  to   { transform: scale(1.18); }
}

/* Instagram icon */
/*
.bv-heroInsta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.7);
  transition:.25s;
  border-radius:999px;
  box-shadow:0 0 18px rgba(255,255,255,.15);
}

.bv-heroInsta i{
  font-size:28px;
}

.bv-heroInsta:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
}
*/
/* =========================================================
   HERO Instagram Icon (①グラデ + ②ホバーで浮く)
========================================================= */

.bv-heroInsta{
  /* ボタン横に揃える箱 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;   /* 56px */
  height:3.5rem;
  border-radius:0.75rem; /* 12px（丸にしたければ 999px） */

  /* 枠と背景 */
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.32);

  /* 動き */
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  will-change: transform;
}

/* ① インスタ風グラデ（アイコン自体をグラデに） */
.bv-heroInsta i{
  font-size:1.75rem; /* 28px */
  line-height:1;

  /* グラデ塗り */
  background: linear-gradient(45deg,
    #feda75 0%,
    #fa7e1e 20%,
    #d62976 45%,
    #962fbf 70%,
    #4f5bd5 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  /* 少し落ち着かせる（上品寄り） */
  filter: saturate(1.05) contrast(1.03);
}

/* ② hover: ふわっと浮く + うっすら発光 */
.bv-heroInsta:hover{
  transform: translateY(-0.25rem); /* -4px */
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.35), 0 0 1.25rem rgba(255,255,255,.12);
}

/* キーボード操作でも同等の体験 */
.bv-heroInsta:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 3px;
  transform: translateY(-0.25rem);
}

/* クリック時 */
.bv-heroInsta:active{
  transform: translateY(-0.125rem); /* -2px */
}


.bv-heroBrand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:clamp(1.5rem, 5vw, 3.75rem);
  opacity:.92;
}
.bv-brandBox{
  width:min(46.25rem, 100%);
  height:clamp(5.625rem, 12vw, 9.375rem);
  border-radius:1.125rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(1.625rem, 5vw, 3.5rem);
}
.bv-heroCopy{ max-width:56.25rem; }
.bv-heroKicker{ font-size:clamp(1.125rem, 3vw, 2.75rem); font-weight:800; margin-bottom:.875rem; }

/* =========================================================
   NEWS（quote card）
========================================================= */
.bv-quoteCard{
  position:relative;
  background:rgba(0,0,0,.20);
  border:2px solid rgba(255,255,255,.18);
  border-radius:.625rem;
  padding:1.875rem 1.75rem 1.625rem;
  min-height:16.25rem;
  box-shadow:var(--bv-shadow);
  overflow:hidden;
}
.bv-quoteCard::before,
.bv-quoteCard::after{
  position:absolute;
  font-size:2.5rem;
  font-weight:900;
  color:rgba(255,255,255,.88);
  line-height:1;
  font-family: ui-serif, "Times New Roman", serif;
  opacity:.95;
}
.bv-quoteCard::before{ content:"“"; left:.5rem; top:.5rem; }
.bv-quoteCard::after{ content:"”"; right:.5rem; bottom:-0.5rem; }
.bv-quoteDate{ font-size:1.75rem; font-weight:900; }
.bv-quoteHead{ margin-top:.5rem; font-size:1.875rem; font-weight:900; }
.bv-quoteLines{ margin-top:1.125rem; color:rgba(255,255,255,.72); font-weight:800; letter-spacing:.05em; }
.bv-quoteLines span{ display:block; margin-top:.625rem; }

/* =========================================================
   ABOUT
========================================================= */
.bv-aboutTop{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2.125rem;
  align-items:center;
}
.bv-aboutBody{ max-width:35rem; }
.bv-logoPanel{
  /*background:#fff;*/
  border-radius:.625rem;
  padding:1.125rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.26); /* 軽量化 */
  height:clamp(13.75rem, 28vw, 20rem);
}

/* ロゴパネル */
.bv-logoPanel{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ロゴサイズ調整 */
.bv-logo{
  width: min(320px, 80%);
  height: auto;
  display:block;
}

/*
.bv-logoPlaceholder{
  width:100%;
  height:100%;
  border-radius:.5rem;
  border:1px dashed rgba(0,0,0,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(0,0,0,.60);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
*/
.bv-photoRow{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.375rem;
  color:rgba(233,233,233,.45);
  font-weight:700;
  letter-spacing:.02em;
}
.bv-photoSlot{
  height:23.00rem;
  width:100%;
  border-radius:.75rem;
  border:1px dashed rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.05);
}

/* ===== 施設写真 row ===== */
.bv-photoRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ===== 写真枠 ===== */
.bv-photoSlot{
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;

  /* ← 超重要：枠サイズを固定 */
  aspect-ratio: 2 / 1; /* 2048x1028にぴったり */

  background: rgba(255,255,255,.05);
}

/* ===== 画像 ===== */
.bv-photoSlot img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* =========================================================
   MACHINE
========================================================= */
.bv-machineGrid{
  margin-top:2.125rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.625rem;
  align-items:start;
}
.bv-machineItem{ text-align:center; }
.bv-circle{
  width:min(26.25rem, 42vw);
  aspect-ratio:1/1;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.bv-ph{
  width:2.75rem; height:2.75rem;
  border-radius:.625rem;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.50);
  font-weight:900;
}
.bv-dashLines{
  margin-top:1rem;
  color:rgba(255,255,255,.60);
  letter-spacing:.12em;
  font-weight:800;
  line-height:1.9;
}

.bv-circle{
  position: relative;
  overflow: hidden; /* 丸で切り抜く */
  border-radius: 50%;
}

.bv-circleImg{
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 超重要 */
  display: block;
}

/* クリック領域 */
.bv-circleLink{
  display:inline-block;
  text-decoration:none;
}

/* 円の基本 */
.bv-circle{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* 画像 */
.bv-circleImg{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .6s ease;
}

/* ===== hover ===== */
.bv-circleLink:hover .bv-circle{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  filter: brightness(1.06);
}

.bv-circleLink:hover .bv-circleImg{
  transform: scale(1.06);
}

/* ===== カーソル ===== */
.bv-circleLink{ cursor:pointer; }

.bv-circle::after{
  content:"↗";
  position:absolute;
  top:10px;
  right:10px;
  font-size:14px;
  color:#fff;
  background:rgba(0,0,0,.55);
  padding:4px 6px;
  border-radius:4px;
  opacity:.85;
  transition:.3s;
}

.bv-circleLink:hover .bv-circle::after{
  opacity:1;
  transform: translateY(-2px);
}

/* =========================================================
   SERVICE
========================================================= */
.bv-ol{
  margin-top:1.375rem;
  color:rgba(233,233,233,.62);
  line-height:2.0;
  font-size:1.125rem;
  padding-left:1.375rem;
}
.bv-serviceLead{
  margin-top:2.125rem;
  font-size:1.25rem;
  font-weight:800;
  line-height:1.9;
  color:rgba(233,233,233,.80);
}

/* =========================================================
   SCHEDULE
========================================================= */
/*
.bv-chevrons{
  margin-top:2.875rem;
  display:flex;
  gap:1.375rem;
  align-items:center;
  justify-content:space-between;
}
.bv-chev{
  position:relative;
  flex:1 1 0;
  height:4.125rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.625rem;
  font-weight:900;
  color:rgba(255,255,255,.92);
}
.bv-chev:not(:last-child)::after{
  content:"";
  position:absolute;
  top:-1px; right:-2.125rem;
  width:0; height:0;
  border-top:2.125rem solid transparent;
  border-bottom:2.125rem solid transparent;
  border-left:2.125rem solid rgba(255,255,255,.14);
}
.bv-chev:not(:first-child)::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:0; height:0;
  border-top:2.125rem solid transparent;
  border-bottom:2.125rem solid transparent;
  border-left:2.125rem solid var(--bv-dark);
  transform:translateX(-2.125rem);
}
*/

.bv-chevrons{
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bv-chev-gap);
  align-items: center;
}

/* 共通プレート */
.bv-chev{
  position: relative;
  height: var(--bv-chev-h);
  display: grid;
  place-items: center;

  background: var(--bv-chev-bg);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .06em;

  border: 1px solid var(--bv-chev-stroke);
  border-bottom-color: var(--bv-chev-stroke2);
  border-radius: .2rem;

  /* スクショの“平たいプレート感” */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 18px rgba(0,0,0,.22);
}

/* 形状：中間（左切り欠き＋右尖り） */
.bv-chev{
  clip-path: polygon(
    var(--bv-chev-notch) 0,
    calc(100% - var(--bv-chev-tip)) 0,
    100% 50%,
    calc(100% - var(--bv-chev-tip)) 100%,
    var(--bv-chev-notch) 100%,
    0 50%
  );
}

/* 先頭：左をフラットに */
/*
.bv-chev:first-child{
  clip-path: polygon(
    0 0,
    calc(100% - var(--bv-chev-tip)) 0,
    100% 50%,
    calc(100% - var(--bv-chev-tip)) 100%,
    0 100%
  );
}
*/


/* 末尾：右をフラットに */
/*
.bv-chev:last-child{
  clip-path: polygon(
    var(--bv-chev-notch) 0,
    100% 0,
    100% 100%,
    var(--bv-chev-notch) 100%,
    0 50%
  );
}
*/

/* 先頭：左をフラット（.bv-chevrons直下の最初の .bv-chev のみ） */
.bv-chevrons > .bv-chev:first-child{
  clip-path: polygon(
    0 0,
    calc(100% - var(--bv-chev-tip)) 0,
    100% 50%,
    calc(100% - var(--bv-chev-tip)) 100%,
    0 100%
  );
}

/* 末尾：右をフラット（.bv-chevrons直下の最後の .bv-chev のみ） */
.bv-chevrons > .bv-chev:last-child{
  clip-path: polygon(
    var(--bv-chev-notch) 0,
    100% 0,
    100% 100%,
    var(--bv-chev-notch) 100%,
    0 50%
  );
}

/* ほんのり斜めハイライト（スクショの質感） */
.bv-chev::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: .2rem;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  clip-path: inherit; /* 同じ形に */
  opacity: .75;
}

.bv-schedCols{
  margin-top:1.375rem;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.375rem;
}
.bv-schedCol{ text-align:center; color:rgba(255,255,255,.62); font-weight:800; }
.bv-schedLines{ margin-top:.75rem; line-height:1.9; letter-spacing:.12em; }
.bv-schedPhoto{ margin-top:1.125rem; color:rgba(255,255,255,.42); font-weight:700; }

/* =========================
   Schedule: pair layout
========================= */

/* PC：4列グリッド（上：番号 / 下：内容） */
.bv-schedPairs{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 1.5rem;
}

/* 1ペア（PC時は「縦」） */
.bv-schedPair{
  display: grid;
  grid-template-rows: auto auto;
  gap: .875rem;
  align-content: start;
}

/* 番号（既存のbv-chevの見た目を継承してOK） */
.bv-chev{
  height: 4.125rem; /* 66px相当 */
  display: grid;
  place-items: center;
  font-size: 1.625rem; /* 26px相当 */
  font-weight: 800;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
}

/* PCでは矢印は不要 */
.bv-schedArrow{ display: none; }

/* 中身（既存のbv-schedColをそのまま使う想定） */
.bv-schedCol{
  text-align: center;
  color: rgba(255,255,255,.62);
  font-weight: 700;
}

/* =====================================
   <=767：縦並び（1 → ↓ → 内容）
===================================== */
@media (max-width: 768px){
  .bv-schedPairs{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .bv-schedPair{
    grid-template-rows: auto auto auto;
    gap: .75rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
  }

  .bv-schedArrow{
    /*display: block;*/
    width: 100%;
    height: 1.25rem;
    position: relative;
    opacity: .9;
  }

  /* 下矢印（中央） */
  .bv-schedArrow::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: .75rem solid transparent;
    border-right: .75rem solid transparent;
    border-top: 1rem solid rgba(255,255,255,.45);
  }

  .bv-schedCol{
    text-align: left; /* 縦並びでは読みやすく */
  }
	
  .bv-chev{
    display: none !important;
  }
}
/* =========================================================
   Wide Photo (inside section bottom / outside wrap)
========================================================= */

/* wrap外に置いたワイド写真 */
 .bv-sec > .bv-widePhoto{
  position: relative;
  height: 40rem;
  overflow: hidden;

  /* コンテンツと写真の間隔 */
  margin-top: clamp(1.5rem, 3vw, 2.5rem);

  /* ▼ セクション下paddingを相殺 → 背景切替ラインと写真下端ツライチ */
  margin-bottom: calc(-1 * var(--bv-sec-y));

  /* ▼ フルブリード */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: rgba(255,255,255,.04);
}

 .bv-sec > .bv-widePhoto img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 任意：馴染ませ */
 .bv-sec > .bv-widePhoto::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.06));
  pointer-events:none;
}

@media (max-width: 767px){
.bv-sec > .bv-widePhoto{ height: 18rem; }
}

/* 4Kなどでの1pxはみ出し保険 */
html, body{ overflow-x: clip; }
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

/* =========================================================
   GALLERY（light tone）
========================================================= */
/* Instagram embed wrapper */
.bv-igEmbed{
  margin-top: 1.5rem;
}

/* Smash Balloon想定：カード余白調整 */
#sb_instagram{
  padding: 0 !important;
}

/* Load more ボタン */
#sb_instagram .sbi_load_btn{
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Follow ボタン */
#sb_instagram .sbi_follow_btn a{
  border-radius: 999px !important;
}

/* =========================================================
   ACCESS（light tone）
========================================================= */
.bv-tone-light .bv-ttl-sec{ color:#0f0f0f; }

.bv-iconDot{
  width:3.125rem; height:3.125rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.875rem;
}
.bv-iconDot svg{ width:1.375rem; height:1.375rem; color:#111; }

.bv-infoBlock{
  margin-top:3.375rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.625rem;
  max-width:40rem;
}
.bv-infoTitle{ font-size:1.875rem; font-weight:900; color:#0f0f0f; }
.bv-bullets{
  margin:.75rem 0 0;
  padding-left:1.375rem;
  line-height:2.0;
  font-size:1.125rem;
  color:rgba(0,0,0,.72);
  font-weight:700;
}
.bv-accessFooter{ margin-top:2rem; font-size:1.875rem; font-weight:900; color:#0f0f0f; }

/* =========================================================
   Wide Map（Access section bottom / full-bleed / aligned）
========================================================= */
.bv-sec > .bv-wideMap{
  position: relative;
  height: 40rem;             /* widePhotoと同じ思想。必要なら変更OK */
  overflow: hidden;

  margin-top: clamp(1.5rem, 3vw, 2.5rem);

  /* ▼ セクション下paddingを相殺 → 背景切替ラインとツライチ */
  margin-bottom: calc(-1 * var(--bv-sec-y));

  /* ▼ フルブリード */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: rgba(0,0,0,.18);
}

/* iframeを全面に */
.bv-wideMap__iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}

/* “Googleマップで開く”ボタン（右下） */
.bv-wideMap__open{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .75rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .875rem;
  text-decoration: none;

  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid rgba(0,0,0,.10);
}

/* hover */
.bv-wideMap__open:hover{
  filter: brightness(1.02);
}

/* SP */
@media (max-width: 767px){
  .bv-sec > .bv-wideMap{
    height: 18rem;
  }
}

/* =========================
   Header (統合版 / 後勝ちをベース)
========================= */
#bvHeader{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;

  background: rgba(255,255,255,1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 現行CSSでは後勝ちで 15px が効いていたのでベースはこれ */
  padding: 15px 0;

  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
  will-change: background-color, box-shadow, padding;
  transform: translateZ(0);
}

#bvHeader.is-scrolled{
  background: rgba(255,255,255,1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 12px 0;
}

.bv-header__inner{
  margin: 0 auto;
  padding: 0 24px;
  max-width: 1200px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.bv-header__logo{ flex: 0 0 auto; }

.bv-header__logo img{
  display: block;
  width: min(120px, 34vw);
  height: auto;
  transition: transform .25s ease;
  transform-origin: left center;
}

#bvHeader.is-scrolled .bv-header__logo img{
  transform: scale(0.82);
}

/* ENTRY button (base) */
.bv-header__entry{
  position: static;
  transform: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 110px;
  height: 44px;
  padding: 0 10px;
  margin-left: 20px;
  border-radius: 6px;

  background: #333333;
  color: #d4a024;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: 0.08em;
  text-decoration: none;

  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bv-header__entry:hover{
  background: #222;
  color: #fff;
}

/* Nav */
.bv-header__nav{
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  /* PC/Tabletは後段の(min-width:768)で横並びにする */
  flex-direction: column;
  gap: 10px;
}

.bv-header__link{
  position: relative;
  display: inline-flex;
  align-items: center;

  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 2px 0 10px;
}

/* 1) Header: PC/TAB(>=768) は nav を横並び */
@media (min-width: 768px){
.bv-header__right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

.bv-header__nav{
    display: flex;
    flex-direction: row;        /* ←縦→横 */
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
  }

.bv-header__link{
    position: relative;
    font-weight: 500;
    font-size: 0.6rem;          /* 既存PCの見た目を尊重 */
    padding-bottom: 0.6rem;
  }

  /* 下三角 */
.bv-header__link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #111;
    opacity: .8;
  }

  /* スクロール後は right を1列化（JS: is-scrolled と整合） */
#bvHeader.is-scrolled .bv-header__right{
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  body.bv-lp #bvHeader.is-scrolled .bv-header__nav{ order: 1; }
  body.bv-lp #bvHeader.is-scrolled .bv-header__entry{
    order: 2;
    height: 40px;
    min-width: 150px;
    font-size: 14px;
  }
}

@media (max-width: 767px){
  /* header: SPは nav非表示＋スクロール後だけENTRY表示（JSと一致） */
.bv-header__nav{ display: none; }
.bv-header__right{ display: block; }

.bv-header__entry{
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 70px;
	height: 36px;
    padding: 4px 14px;
    border-radius: 4px;
    background: #333333;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
  }

#bvHeader.is-scrolled .bv-header__inner{ justify-content: space-between; }
#bvHeader.is-scrolled .bv-header__entry{
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
#bvHeader:not(.is-scrolled) .bv-header__entry{
    opacity: 0;
    pointer-events: none;
  }
}

/* =========================
   Header show on scroll
========================= */

/* 初期は隠す */
#bvHeader{
  transform: translateY(-100%);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    box-shadow .25s ease,
    padding .25s ease;
}

/* 表示 */
#bvHeader.is-visible{
  transform: translateY(0);
}

/* =========================================================
   FOOTER
========================================================= */

/* 3) Footer: LPだけ背景を不透明に（透明化の逆）
   ※ footer.php は .bv-footer なので、そこにだけ当てるのが安全 */
.bv-footer{
  background: #ffffff;
  color: #333333;
  text-align: center;
  padding: 40px 0 24px;
}

.bv-footer *{
  color: #333333;
}

.bv-footer__copyright{
  opacity: .9;
  font-size: 13px;
}

/* =========================
   ToTop button
========================= */
.bv-toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #f3f3f3;
  color: #111;
  cursor: pointer;

  display: grid;
  place-items: center;

  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
  z-index: 99999;
  -webkit-tap-highlight-color: transparent;
}

.bv-toTop span{
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}
.bv-toTop:hover{ background: #fff; }
.bv-toTop.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   FINAL
========================================================= */
.bv-finalTop{ max-width:61.25rem; }
.bv-finalKicker{ font-size:2.125rem; font-weight:900; margin-bottom:.875rem; color:rgba(233,233,233,.80); }
.bv-finalH1{ font-size:clamp(3.5rem, 6.4vw, 5.75rem); font-weight:700; line-height:1.03; }
.bv-finalH2{ margin-top:.75rem; font-size:clamp(3.5rem, 6.0vw, 5.75rem); font-weight:900; letter-spacing:.06em; }

.bv-values{ margin-top:2.75rem; color:rgba(233,233,233,.60); max-width:65rem; }
.bv-valuesTop{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--bv-gap);
  align-items:start;
}
.bv-v{ text-align:center; }
.bv-v .bv-ttl-card{ color:rgba(233,233,233,.70); font-size:1.125rem; }
.bv-v .bv-txt{ font-size:0.9375rem; line-height:1.9; margin-top:.625rem; }
.bv-v--blank{ visibility:hidden; }

.bv-rail{
  position:relative;
  margin:1.625rem auto 0;
  height:4rem;
  max-width:61.25rem;
}
.bv-rail::before{
  content:"";
  position:absolute;
  left:0; right:0; top:2rem;
  height:2px;
  background:rgba(233,233,233,.28);
}
.bv-node{
  position:absolute;
  top:1rem;
  width:2.75rem; height:2.75rem;
  border-radius:.5rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.86);
  font-weight:900;
  font-size:1.125rem;
}
.bv-node::after{
  content:"";
  position:absolute;
  top:-1.125rem;
  left:50%;
  transform:translateX(-50%);
  width:2px; height:1.125rem;
  background:rgba(233,233,233,.28);
}
.bv-node--1{ left:20%; transform:translateX(-50%); }
.bv-node--2{ left:50%; transform:translateX(-50%); }
.bv-node--3{ left:80%; transform:translateX(-50%); }

.bv-valuesBottom{
  margin-top:1.125rem;
  text-align:center;
  max-width:42.5rem;
  margin-left:auto;
  margin-right:auto;
}
.bv-valuesBottom .bv-ttl-card{ color:rgba(233,233,233,.70); font-size:1.25rem; }
.bv-valuesBottom .bv-txt{ font-size:0.9375rem; line-height:1.9; }

.bv-contact{
  margin-top:2.75rem;
  border-top:2px solid rgba(233,233,233,.26);
  padding-top:1.875rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.125rem;
  flex-wrap:wrap;
}
.bv-contactBody{ max-width:45rem; }
.bv-ul{
  margin:1.125rem 0 0;
  padding-left:1.125rem;
  color:rgba(233,233,233,.60);
  line-height:2.0;
}
.bv-contactActions{ display:flex; gap:.75rem; align-items:center; }

.bv-btn2{
  border-radius:.625rem;
  padding:.75rem 1rem;
  border:2px solid rgba(255,255,255,.80);
  background:rgba(255,255,255,.92);
  color:#111;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.bv-btn2--dark{
  background:rgba(0,0,0,.35);
  color:#fff;
}
.bv-finalCta{
  margin-top:2.125rem;
  font-size:clamp(2.125rem, 4.2vw, 3.625rem);
  font-weight:900;
  letter-spacing:.02em;
}

/* =========================================================
   ⑤ PERFORMANCE / A11Y
========================================================= */

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   Responsive
   TAB: 768-1024 / SP: 0-767
========================================================= */

@media (max-width: 1024px){
  :root{
    --bv-pad:1.75rem;
    --bv-fz-hero:3.25rem;
    --bv-fz-sec:2.5rem;
    --bv-fz-sub:1.625rem;
  }

  .bv-grid--3{ grid-template-columns:1fr; }
  .bv-grid--2{ grid-template-columns:1fr; }
  .bv-aboutTop{ grid-template-columns:1fr; }
  .bv-machineGrid{ grid-template-columns:1fr; }
  .bv-valuesTop{ grid-template-columns:1fr; }
  .bv-v--blank{ display:none; }

  .bv-chevrons{ flex-direction:column; gap:.875rem; align-items:stretch; }
  .bv-chev{ height:3.75rem; }
  .bv-chev:not(:last-child)::after{ display:none; }
  .bv-chev:not(:first-child)::before{ display:none; }

  .bv-schedCols{ grid-template-columns:1fr 1fr; }
  .bv-node--1{ left:15%; }
  .bv-node--3{ left:85%; }
}

@media (max-width: 767px){
  :root{
    --bv-pad:1.125rem;
    --bv-fz-hero:2.75rem;
    --bv-fz-sec:2.25rem;
    --bv-fz-sub:1.5rem;
  }
}

@media (max-width: 520px){
  .bv-schedCols{ grid-template-columns:1fr; }
  .bv-quoteCard{ min-height:auto; }
  .bv-ttl-sec--sm{ font-size:2.125rem; }
}


/* =========================================================
   Link hover policy (TOP only / BONVITA tone)
   - underline is off
   - subtle hover (opacity + soft glow)
   - accessible focus-visible ring
========================================================= */

/* 0) baseline: remove underline */
body.home a,
body.home a:link,
body.home a:visited{
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* 1) transition (but avoid buttons) */
body.home a:not(.bv-btn){
  transition: opacity .18s ease, color .18s ease, filter .18s ease;
}

/* 2) hover: subtle emphasis */
body.home a:not(.bv-btn):hover{
  opacity: .82;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* 3) active: slight press */
body.home a:not(.bv-btn):active{
  opacity: .72;
}

/* 4) keyboard focus: clear but classy */
body.home a:not(.bv-btn):focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
  border-radius: .35rem; /* テキストの角を少し丸めて上品に */
}

/* 5) dark section / light section tone tuning */
body.home .bv-tone-light a:not(.bv-btn){
  transition: opacity .18s ease, color .18s ease, filter .18s ease;
}

body.home .bv-tone-light a:not(.bv-btn):hover{
  opacity: .85;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

body.home .bv-tone-light a:not(.bv-btn):focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 3px;
}

/* ===== Buttons hover (BONVITA tone) ===== */
body.home a.bv-btn{
  transition: transform .18s ease, opacity .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

body.home a.bv-btn:hover{
  transform: translateY(-0.125rem); /* -2px */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.22));
}

body.home a.bv-btn:active{
  transform: translateY(0);
  opacity: .92;
}

body.home a.bv-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 3px;
}

/* ===== Instagram icon hover ===== */
body.home a.bv-heroInsta{
  transition: transform .18s ease, opacity .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
}

body.home a.bv-heroInsta:hover{
  transform: translateY(-0.25rem); /* -4px */
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.28));
}

body.home a.bv-heroInsta:active{
  transform: translateY(-0.125rem);
  opacity: .9;
}