/* ADDEVA minimal styles (v3.8): Bootstrap以外はこの1枚のみ */
:root{
  --bg:#fff;
  --bg-soft:#f7f9fc;
  --ink:#111;
  --line:#e5e7eb;
  --maxw:1120px;
  --brand:#1547B5;          /* ← 青帯の基準色（濃さはここで調整） */
  --header-desktop:64px;
  --header-mobile:56px;
}

html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.65;letter-spacing:.02em
}
.container-narrow{max-width:var(--maxw)}

/* Header */
.navbar-brand{font-weight:700;letter-spacing:.12em;color:var(--ink)}
.navbar-dark .navbar-nav .nav-link{color:var(--ink)}
.navbar-dark .navbar-toggler{border-color:rgba(0,0,0,.25)}
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}
/* ブランドロゴの色を固定（hoverで白く消えないように） */
.site-header .navbar.navbar-dark{
  --bs-navbar-brand-color: var(--ink);
  --bs-navbar-brand-hover-color: var(--ink);
}

/* ===== ブランドサイズ最適化 ===== */
.site-header .navbar-brand{
  display:inline-flex; align-items:flex-end;
  gap:0;
  line-height:1; padding-block:.25rem;
  font-size:clamp(1.25rem, 1.0rem + .7vw, 1.7rem);
  letter-spacing:0;
}
.site-header .navbar-brand .brand-text{ letter-spacing:.12em; }
.site-header .navbar-brand .brand-reg{
  font-size:.56em;
  align-self:flex-start;
  transform: translate(-0.20em, -0.22em);
  margin-left:0; letter-spacing:0; opacity:.9;
}

/* 固定ヘッダー */
.site-header{
  position: fixed; top: env(safe-area-inset-top, 0); left:0; right:0;
  z-index:1200; background:#fff; border-bottom:1px solid var(--line);
}
body{ padding-top: calc(var(--header-desktop) + env(safe-area-inset-top, 0)); }
@media (max-width: 991.98px){
  body{ padding-top: calc(var(--header-mobile) + env(safe-area-inset-top, 0)); }
}
/* アンカーでヘッダーに隠れない対策 */
[id]{ scroll-margin-top: var(--header-desktop); }
@media (max-width: 991.98px){
  [id]{ scroll-margin-top: var(--header-mobile); }
}

/* === スマホの“無意味な1行”対策 === */
:where(main, #main, .site-main) > *:first-child{ margin-top:0 !important; }
:where(main, #main, .site-main) > :first-child[class*="mt-"]{ margin-top:0 !important; }
:where(main, #main, .site-main) > :is(nav,.nav,.subnav,.page-tabs,.breadcrumb,.local-nav):first-child{
  margin-top:0 !important; padding-top:.25rem;
}
@media (max-width: 575.98px){
  section.section:first-of-type{ padding-top:36px; }
}

/* =========================
   HERO（Carousel対応）
   ========================= */
.hero{padding:16px 0}
.hero .col-left{position:relative;min-height:56svh}
.hero .col-left .bg-wrap{position:absolute;inset:0;overflow:hidden;border-radius:12px}
.hero .col-left .bg-wrap img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.02);z-index:0
}

/* Copy block（共通） */
.hero .copy{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;gap:12px;max-width:720px;
  padding:clamp(24px,5vw,56px);color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  pointer-events:none; /* 矢印クリックを妨げない */
}
.hero .copy a,
.hero .copy button,
.hero .copy .btn-ghost,
.hero .copy .pill{ pointer-events:auto; }

.eyebrow{font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.hero h1{margin:.2em 0 .4em;font-size:clamp(28px,5.2vw,44px);line-height:1.2}
.hero .lead{font-size:clamp(15px,2.1vw,18px);opacity:.95}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;font-size:.92rem;color:#fff;background:rgba(0,0,0,.62)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 14px;border-radius:999px}
.btn-ghost:hover{background:rgba(19,23,34,.35)}
.cta-cluster{margin-top:auto;display:flex;flex-direction:column;gap:16px}

/* Tint（UrbanFlexなどで使用。BSC20は未使用） */
.hero .tint{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.54) 52%,
    rgba(28,82,190,.46) 70%,
    rgba(28,82,190,.28) 86%,
    rgba(0,0,0,0) 100%);
  border-radius:12px;
}

/* 右側のビジュアル枠（共通） */
.right-wrap{background:var(--bg-soft);padding:14px;border-radius:12px;height:100%}
.top-wide,.tile{display:block;width:100%;height:auto;object-fit:cover;border-radius:14px}

/* Carousel indicators をバー型に変更（クリックでジャンプ可） */
#heroCarousel .carousel-indicators{ margin-bottom:.75rem; }
#heroCarousel .carousel-indicators [data-bs-target]{
  width:42px;                  /* ← 長さ 1.5 倍（28 → 42） */
  height:4px;                  /* ← 高さ 1/2（4 → 2） */
  border-radius:1px;
  background:#fff;
  opacity:.55;
  margin:0 4px;

  /* 見た目は細いけどタップしやすくする工夫 */
  padding:6px 0;               /* 当たり判定を上下に拡大 */
  background-clip:content-box; /* パディング分は透明にして細く見せる */
}
#heroCarousel .carousel-indicators .active{ opacity:1; }


/* 矢印（常時表示・視認性UP） */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  z-index:10;
  opacity:1;
  width:auto;
  padding:0 .25rem;
}

/* デフォルトは左右端から12px（SP～中画面） */
#heroCarousel .carousel-control-prev{ left:12px; }
#heroCarousel .carousel-control-next{ right:12px; }

/* XL（PCの広い画面）では“container内端”に揃える */
@media (min-width: 1200px){
  #heroCarousel .carousel-control-prev{
    left: calc((100vw - var(--maxw)) / 2 + 12px);
  }
  #heroCarousel .carousel-control-next{
    right: calc((100vw - var(--maxw)) / 2 + 12px);
  }
}

/* アイコンを白い矢印＋半透明丸で視認性UP */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon{
  width:44px; height:44px;
  border-radius:999px;
  background-color:rgba(0,0,0,.42);
  background-size:60% 60%;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}
#heroCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#heroCarousel .carousel-control-next:hover .carousel-control-next-icon{
  background-color:rgba(0,0,0,.55);
}

/* 高さジャンプ防止（両スライド共通） */
#heroCarousel .carousel-item{
  padding-block: clamp(8px, 1.5vw, 16px);
  min-height: clamp(360px, 56svh, 640px);
}

/* === BSC-20：可変比率（等高）ユーティリティ ================= */
.sq-wrap{
  width:100%;
  height:100%;                                 /* ← 1:1を廃止して高さ基準に */
  min-height: clamp(300px, 38vw, 520px);       /* ← PCでの見映えを担保（必要なら調整可） */
  border-radius:12px;
  overflow:hidden;
  background:transparent;
}

/* === 等高化（左右の見かけ高さを完全一致） ================== */
.sq-col{
  display:flex;
  align-items:stretch;
}
.sq-col > .sq-wrap{
  flex:1 1 auto;
}
/* 念のため：カラム側の角丸/余白は使わず、見た目枠はsq-wrapに統一 */
.sq-col{ border-radius:0 !important; }

.sq-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* 行の等高化を強制 */
@media (min-width: 992px){
  .hero .row.align-items-stretch{ align-items: stretch !important; }
}

/* Sections */
section.section{padding:48px 0;border-top:1px solid var(--line)}
/* === Brand 親ページ共通：brand セクションは上ボーダーを消す === */
#brand.section{
  border-top: 0 !important;
}

.section .kicker{font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:#5b738a}
.section h2{font-size:clamp(22px,4.2vw,32px);margin:0 0 .6em}
.notice{background:#f9fafb;border:1px solid var(--line);padding:18px;border-radius:14px;font-size:.95rem}
footer{border-top:1px solid var(--line);padding:26px 0 60px;color:#6b7280}

/* ===== ヒーローの青帯（フォントは変えない） ===== */
.hero .col-left .copy .eyebrow{
  display:inline-block; color:#fff; background:var(--brand);
  padding:.06em .48em; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* === Brand mark final ================== */
.site-header .navbar .navbar-brand .brand-reg{
  font-size:.56em; align-self:flex-start;
  transform: translate(-6px, -0.20em);
  margin-left:0; letter-spacing:0; opacity:.9;
}

/* ===== 共通特徴をSPだけカード化（md以上はフラット） ===== */
#common .feature{
  border:1px solid var(--line); border-radius:.75rem; padding:12px; background:#fff;
}
#common .feature + .feature{ margin-top:.5rem; }
@media (min-width:768px){
  #common .feature{ border:0; border-radius:0; padding:0; background:transparent; }
  #common .feature + .feature{ margin-top:0; }
}

/* ===== BSC-20 ヒーロー：黒ボックス＋ロゴ（画像上オーバーレイ） ===== */
.bsc-badge{
  display:inline-block;
  color:#fff;
  background: rgba(0,0,0,.42);
  border-radius:12px;
  padding:12px 18px;
  max-width: min(92%, 560px);            /* 少しだけ上限拡大 */
  margin-top: clamp(8px, 2.0vw, 18px);
  margin-inline: auto;                   /* ← 横方向を中央寄せ */
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(1.5px);
}

.bsc-lead{
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.6;
  margin: 0 0 6px 0;
}

.bsc-logo{
  display:block;
  width: clamp(200px, 40vw, 320px);  /* ← 最小値UP、画面に応じて拡大 */
  height:auto;
  margin: 6px auto;                  /* ← 横センター配置 */
}

.bsc-series{
  font-size: clamp(12px, 1.6vw, 14px);
  margin: 0;
  text-align: right;
  font-variant-numeric: lining-nums;
}

/* === PC時のみ、黒ボックス/ロゴ/テキストを少しだけ縮小（上端位置は維持） === */
@media (min-width: 992px){
  .bsc-badge{
    padding: 10px 16px;              /* ほんの少しタイトに */
    max-width: min(86%, 520px);      /* 横幅も控えめに */
    transform: scale(.90);           /* 全体を 90% に縮小 */
    transform-origin: top center;    /* ← 上端位置と中央揃えを維持 */
  }
  .bsc-lead{
    font-size: clamp(13px, 1.4vw, 15px);
    margin-bottom: 4px;
  }
  .bsc-logo{
    width: clamp(180px, 28vw, 300px); /* ロゴも控えめに（最小幅を少し下げる） */
    margin: 4px auto;
  }
  .bsc-series{
    font-size: clamp(11px, 1.2vw, 13px);
  }
}