/* 実績セクション 4案。追加分は bn- で始まるクラスに限定する。
   色は元サイトの #222 / #fcfcfc / #eff0f2 / 罫 #c7cad1 に、小さな文字用のグレー #6b6c73（白地で 5:1 を確保）と、ヒーローの見出しと同じ金色 #f2cea2 を足している。 */
.bn-section{--bn-value:clamp(72px,8.5vw,120px);--bn-unit:20px;color:#222;font-family:"Noto Sans JP",sans-serif;word-break:normal;overflow-wrap:break-word;scroll-margin-top:128px}
.bn-section *,.bn-section *::before,.bn-section *::after{box-sizing:border-box}
.bn-inner{width:min(1100px,calc(100% - 64px));margin:0 auto}
.bn-section h2{margin:0;font-size:36px;font-weight:700;line-height:1.4}
.bn-stats{margin:0;display:grid;grid-template-columns:repeat(3,max-content)}
.bn-stat{margin:0;min-width:0;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:0}
.bn-stat dt{display:flex;flex-direction:column;font-size:14px;line-height:1.5;font-weight:400;color:#6b6c73}
.bn-label{letter-spacing:.05em}
.bn-label-en{font-family:"Inter",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.bn-stat dd{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
/* 末尾の文字にも付く負の letter-spacing 分を padding-right で戻し、単位は「+」の下へ寄せる（+ と単位は高さが重ならない） */
.bn-value{font-family:"Inter",sans-serif;font-size:var(--bn-value);line-height:1;letter-spacing:-.05em;padding-right:.05em;margin-right:-.2em;font-weight:500}
/* カウントアップ中に幅が変わらないよう、2桁目以降を等幅数字にする（先頭の 1 だけは詰める） */
.bn-number{display:inline-block;font-variant-numeric:tabular-nums}
.bn-number::first-letter{font-variant-numeric:proportional-nums}
.bn-plus{font-size:.4em;line-height:1;vertical-align:top;margin-left:.05em}
.bn-unit{font-size:var(--bn-unit);line-height:1;font-weight:500}
.bn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 案1 余白と横並び */
.bn-strip{background:#fcfcfc;padding:72px 0}
.bn-strip h2{margin-bottom:36px}
.bn-strip .bn-stats{column-gap:120px}

/* 案2 100を主役に */
.bn-editorial{background:#eff0f2;padding:72px 0}
.bn-editorial h2{margin-bottom:28px}
.bn-editorial .bn-stats{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;column-gap:96px;max-width:960px}
.bn-editorial .bn-stat:first-child{grid-row:span 2;justify-content:center}
.bn-editorial .bn-stat:first-child .bn-value{font-size:clamp(144px,15vw,208px)}
.bn-editorial .bn-stat:first-child .bn-unit{font-size:28px}
.bn-editorial .bn-stat:not(:first-child){flex-direction:row;justify-content:space-between;align-items:flex-end;align-items:last baseline;padding-bottom:16px}
.bn-editorial .bn-stat:last-child{padding:16px 0 0;border-top:1px solid #c7cad1}
.bn-editorial .bn-stat:not(:first-child) .bn-value{font-size:clamp(64px,6.5vw,96px)}

/* 案3 院内写真と黒 */
.bn-photo{--bn-value:clamp(56px,6vw,80px);--bn-unit:18px;background:#222;color:#fcfcfc;padding:80px 0}
.bn-photo .bn-inner{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:center;column-gap:64px}
.bn-photo-image{margin:0}
.bn-photo-image img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:left center}
.bn-photo-data h2{margin-bottom:40px}
/* aspect-ratio 非対応（Safari 14 以前）では padding で正方形を確保する */
@supports not (aspect-ratio:1){
 .bn-photo-image{position:relative;padding-top:100%}
 .bn-photo-image img{position:absolute;top:0;left:0;height:100%}
}
.bn-photo .bn-stats{column-gap:40px}
.bn-photo .bn-stat{gap:8px}
.bn-photo .bn-stat dt{color:#ccc}
.bn-photo .bn-label-en{color:#f2cea2}
.bn-photo .bn-value{font-weight:400}

/* 案4 動画に重ねる。ヒーローの内容と帯は Apple のヒーローと同じ左右 6.25% 余白（幅 87.5%） */
/* 帯の高さ（数字サイズに連動）＋ボタンから線までの余白 56px */
html.bn-numbers-home .home-top__inner{max-width:none;width:87.5%;padding-bottom:calc(205px + clamp(56px,6vw,80px))}
/* 動画の上に、下から上へ薄くなる黒のグラデーション。元サイトのグラデーションはそのまま */
.bn-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.1) 75%,rgba(0,0,0,0) 100%)}
.bn-overlay{--bn-value:clamp(56px,6vw,80px);--bn-unit:18px;position:absolute;bottom:0;left:0;width:100%;z-index:3;color:#fcfcfc;padding-bottom:48px}
/* 上下の線は右に向かって薄くなる。帯の中の余白 24/28 は文字のインク位置で上下を揃えた値 */
.bn-overlay .bn-inner{width:87.5%;padding:24px 0 28px;border-style:solid;border-width:1px 0;border-color:rgba(255,255,255,.35);border-image:linear-gradient(to right,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 100%) 1}
.bn-overlay .bn-stats{column-gap:0}
.bn-overlay .bn-stat{gap:8px;padding:0 48px;border-left:1px solid rgba(255,255,255,.25)}
.bn-overlay .bn-stat:first-child{padding-left:8px;border-left:0}
.bn-overlay .bn-stat:last-child{padding-right:0}
.bn-overlay .bn-stat dt{color:#fcfcfc}
.bn-overlay .bn-label-en{color:#f2cea2}
.bn-overlay .bn-value{font-weight:400}

@media (max-width:1199px){
 .bn-inner{width:min(1100px,calc(100% - 32px))}
 .bn-section{--bn-unit:16px}
 .bn-strip .bn-stats{column-gap:64px}
 .bn-editorial .bn-stats{column-gap:56px;max-width:none}
 .bn-photo .bn-inner{grid-template-columns:30% minmax(0,1fr);column-gap:40px}
 .bn-photo .bn-stats{column-gap:24px}
 html.bn-numbers-home .home-top__inner{max-width:1100px;width:100%}
 .bn-overlay .bn-inner{width:min(1100px,calc(100% - 32px))}
 .bn-overlay .bn-stat{padding:0 32px}
}
@media (max-width:767px){
 .bn-section{--bn-value:clamp(36px,10vw,72px);--bn-unit:12px;scroll-margin-top:96px}
 .bn-section h2{font-size:20px}
 .bn-stat{gap:8px}
 .bn-stat dd{gap:4px}
 .bn-strip{padding:44px 0}
 .bn-strip h2{margin-bottom:24px}
 .bn-strip .bn-stats{column-gap:12px}
 .bn-editorial{padding:44px 0}
 .bn-editorial h2{margin-bottom:12px}
 .bn-editorial .bn-stats{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:24px}
 .bn-editorial .bn-stat:first-child{grid-row:auto;grid-column:span 2;padding-bottom:28px;border-bottom:1px solid #c7cad1}
 .bn-editorial .bn-stat:first-child .bn-value{font-size:clamp(96px,36vw,160px)}
 .bn-editorial .bn-stat:first-child .bn-unit{font-size:24px}
 .bn-editorial .bn-stat:not(:first-child){flex-direction:column-reverse;align-items:flex-start;padding:0;border:0}
 .bn-editorial .bn-stat:not(:first-child) .bn-value{font-size:56px}
 .bn-editorial .bn-stat:not(:first-child) .bn-unit{font-size:14px}
 .bn-photo{padding:32px 0 44px}
 .bn-photo .bn-inner{display:flex;flex-direction:column;align-items:stretch;gap:32px}
 .bn-photo-image img{aspect-ratio:16/9;object-position:center}
 .bn-photo-data h2{margin-bottom:24px}
 .bn-photo .bn-stats{column-gap:12px}
 /* 元サイトの min-height:700px だと背の低い端末やツールバー表示中の iPhone で帯が画面外に落ちるため、見えている高さに合わせる */
 html.bn-numbers-home .home-top{height:calc(100svh - 65px);min-height:0}
 html.bn-numbers-home .home-top__inner{padding-bottom:calc(161px + clamp(36px,11vw,72px))}
 .bn-overlay{padding-bottom:32px}
 .bn-overlay .bn-inner{width:100%;padding:20px 16px}
 .bn-overlay .bn-stat{padding:0 12px}
 .bn-overlay .bn-stat:first-child{padding-left:4px}
 .bn-overlay .bn-value{font-size:clamp(36px,11vw,72px)}
}
@media (max-width:359px){
 .bn-section{--bn-value:32px}
 .bn-strip .bn-stats,.bn-photo .bn-stats{column-gap:8px}
 .bn-overlay .bn-stat{padding:0 8px}
 .bn-overlay .bn-value{font-size:32px}
 html.bn-numbers-home .home-top__inner{padding-bottom:192px}
 .bn-editorial .bn-stats{column-gap:20px}
 .bn-editorial .bn-stat:not(:first-child) .bn-value{font-size:48px}
}
@media (min-width:1200px) and (max-height:800px){
 html.bn-numbers-home .home-top__inner{padding-bottom:248px}
 .bn-overlay .bn-inner{padding:20px 0 24px}
 .bn-overlay .bn-value{font-size:64px}
}

/* 表示時のカウントアップ用。html.bn-anim は head 先頭のスクリプトが付け、JS が届かない場合は 4 秒で外れる */
.bn-anim .bn-stat{opacity:0;transition:opacity .8s ease-out}
.bn-anim .bn-stat.bn-shown{opacity:1}
@media print{
 .bn-anim .bn-stat{opacity:1;transition:none}
}
@media (prefers-reduced-motion:reduce){
 .bn-anim .bn-stat{opacity:1;transition:none}
}