/* 補助金.com ヒーロー高品位化  hj_hero.css  RL426
   ------------------------------------------------------------------
   方針：index.html のヒーロースライダーを刷新。
   既存の「stats を slider 内 overlay」方式は写真と数字が衝突して不自然だったので、
   **slider 外の独立した横一列 trust bar** に変更。
   slider 内はテキスト+画像のみで素直な構成。

   研究参考：
    - Apple keynote / Stripe: 数値は別ブロックの trust bar として下に配置
    - freee / MF: ヒーロー直下に細い横長 4-up 信頼指標
    - Booking.com: 大きな写真の下に「実績数」帯
   ---------------------------------------------------------------- */

/* === スライド内 USP リスト（訴求ポイント） === */
.hslide-usp{
 list-style:none!important;
 padding:0!important;
 margin:18px 0 0!important;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px 16px;
 max-width:560px;
}
.hslide-usp li{
 display:flex;align-items:center;gap:10px;
 background:rgba(255,255,255,.78);
 border:1px solid rgba(31,77,140,.12);
 border-radius:10px;
 padding:10px 14px;
 font-size:.86rem;line-height:1.5;
 color:#3a3530;
 backdrop-filter:saturate(180%) blur(8px);
 -webkit-backdrop-filter:saturate(180%) blur(8px);
 box-shadow:0 1px 2px rgba(20,40,86,.04);
 transition:transform .12s,box-shadow .15s,border-color .15s;
}
/* テキスト部分：日本語の塊を尊重して改行 */
.hslide-usp .usp-tx{
 word-break:keep-all;
 overflow-wrap:anywhere;
 line-break:strict;
 text-wrap:pretty;
 min-width:0;
 flex:1 1 auto;
}
.hslide-usp .usp-tx strong{white-space:nowrap}
.hslide-usp li:hover{
 border-color:rgba(31,77,140,.28);
 transform:translateY(-1px);
 box-shadow:0 3px 10px rgba(20,40,86,.08);
}
.hslide-usp li strong{color:#163f73;font-weight:800}
.hslide-usp .usp-ic{
 font-size:1.05rem;line-height:1;flex-shrink:0;
 width:22px;height:22px;
 display:inline-flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,#eaf1fb 0%,#dfeafb 100%);
 border-radius:6px;
}
@media (max-width:680px){
 .hslide-usp{grid-template-columns:1fr;gap:6px;margin-top:14px!important}
 .hslide-usp li{font-size:.82rem;padding:7px 10px}
}
@media print{.hslide-usp{display:none!important}}

/* === Hero タグ pill === */
.hero-tag{
 background:linear-gradient(135deg,#1f4d8c 0%,#2659a3 100%)!important;
 color:#fff!important;
 padding:6px 18px!important;
 border-radius:999px!important;
 font-size:.78rem!important;font-weight:700!important;letter-spacing:.04em;
 box-shadow:0 4px 14px rgba(31,77,140,.28),0 1px 0 rgba(255,255,255,.16) inset!important;
 display:inline-flex!important;align-items:center;gap:6px;
}
.hero-tag::before{content:"✦";font-size:.9em;opacity:.85}

/* === 既存の stats overlay は完全に解除し、自然な位置へ戻す === */
@media (min-width:960px){
 .hero > .hero-slider .hero-stats-overlay{
  /* 旧 overlay 配置を解除：DOM では slider 内にあっても外に出して表示 */
  position:static!important;
  transform:none!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  display:none!important;            /* overlay 自体は完全非表示 */
 }
 /* hslide-txt から下方余白も解除 */
 .hero > .hero-slider .hslide-txt{
  padding-bottom:0!important;
 }
}

/* === Stats trust bar（slider 直下に常設・横一列） === */
.hero-stats,
.hero > .hero-stats{
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:stretch;
 gap:1px!important;
 max-width:1100px;
 margin:18px auto 22px!important;
 padding:6px!important;
 background:linear-gradient(180deg,#fff 0%,#fbf7ec 100%);
 border:1px solid #ece3cc;
 border-radius:16px;
 box-shadow:0 4px 16px rgba(20,40,86,.06),0 1px 2px rgba(20,32,58,.04);
 overflow:hidden;
 position:relative;
}
.hero > .hero-stats[data-overlayed="true"]{display:flex!important}
.hero-stats .st{
 flex:1 1 0!important;
 background:transparent!important;
 border:none!important;
 border-radius:10px!important;
 padding:14px 8px!important;
 text-align:center;
 min-width:0!important;
 box-shadow:none!important;
 position:relative;
 transition:background .15s;
}
.hero-stats .st:hover{background:rgba(31,77,140,.04)!important}
/* カード間の縦罫線 */
.hero-stats .st + .st::before{
 content:"";position:absolute;left:0;top:22%;bottom:22%;
 width:1px;background:linear-gradient(180deg,transparent 0%,rgba(31,77,140,.18) 50%,transparent 100%);
}
.hero-stats .st .num{
 display:block!important;
 font-size:clamp(1.5rem,1rem+1.6vw,2rem)!important;
 font-weight:900!important;
 color:#163f73!important;
 font-variant-numeric:tabular-nums;
 line-height:1.05;
 letter-spacing:-.02em;
 text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.hero-stats .st .lbl{
 display:block!important;
 font-size:.72rem!important;
 color:#5a5249!important;
 font-weight:700!important;
 margin-top:6px;
 letter-spacing:.04em;
}

/* === スライダーコントロール（ドット・矢印）モダン化 === */
.hero-slider .hero-sl-ctl{
 position:relative;
 z-index:5;
 background:transparent;
 padding:14px 16px 12px!important;
 margin:0 auto!important;
}

.hero-slider .hero-dots{
 display:flex;align-items:center;gap:6px;
}
.hero-slider .hero-dots button,
.hero-slider .hero-dots .dot{
 width:8px;height:8px;
 background:rgba(31,77,140,.22)!important;
 border:none!important;border-radius:999px!important;
 padding:0!important;margin:0!important;
 transition:width .25s ease,background .15s,box-shadow .15s;
 cursor:pointer;box-shadow:none!important;flex:0 0 auto;
}
.hero-slider .hero-dots button[aria-current="true"],
.hero-slider .hero-dots .dot.is-active,
.hero-slider .hero-dots .dot[aria-current="true"]{
 width:28px!important;
 background:linear-gradient(90deg,#1f4d8c,#2c6dc4)!important;
 box-shadow:0 1px 3px rgba(31,77,140,.3)!important;
}
.hero-slider .hero-dots button:hover{background:rgba(31,77,140,.4)!important}

.hero-slider .hsl-arrow{
 width:38px;height:38px;
 background:rgba(255,255,255,.85)!important;
 border:1px solid rgba(31,77,140,.14)!important;
 border-radius:50%!important;
 color:#1f4d8c!important;
 font-size:1.4rem!important;line-height:1!important;
 display:inline-flex!important;align-items:center;justify-content:center;
 padding:0!important;cursor:pointer;
 transition:background .15s,border-color .15s,box-shadow .15s,transform .08s;
 box-shadow:0 2px 8px rgba(20,40,86,.10)!important;
 backdrop-filter:blur(8px);
 -webkit-backdrop-filter:blur(8px);
}
.hero-slider .hsl-arrow:hover{
 background:#fff!important;border-color:rgba(31,77,140,.3)!important;
 box-shadow:0 4px 14px rgba(20,40,86,.16)!important;
}
.hero-slider .hsl-arrow:active{transform:scale(.94)}

.hero-slider .hsl-play{
 width:32px;height:32px;
 background:transparent!important;
 border:1px solid rgba(31,77,140,.20)!important;
 border-radius:50%!important;
 color:#1f4d8c!important;
 font-size:.85rem!important;line-height:1!important;
 display:inline-flex!important;align-items:center;justify-content:center;
 padding:0!important;cursor:pointer;
 transition:background .15s,border-color .15s,opacity .15s;
 opacity:.7;
}
.hero-slider .hsl-play:hover{
 background:rgba(255,255,255,.85)!important;
 border-color:#1f4d8c!important;
 opacity:1;
}

/* === CTA ボタン群 === */
.hero-cta .hcta.primary{
 background:linear-gradient(180deg,#2659a3 0%,#1f4d8c 100%)!important;
 color:#fff!important;
 padding:14px 30px!important;
 font-weight:800!important;
 border-radius:11px!important;
 box-shadow:0 4px 14px rgba(31,77,140,.30),0 1px 0 rgba(255,255,255,.16) inset!important;
 border:1px solid #1f4d8c!important;
 transition:transform .08s,box-shadow .15s,background .15s;
}
.hero-cta .hcta.primary:hover{
 background:linear-gradient(180deg,#1f4d8c 0%,#163f73 100%)!important;
 box-shadow:0 6px 20px rgba(31,77,140,.40)!important;
}
.hero-cta .hcta.primary:active{transform:translateY(1px)}
.hero-cta .hcta:not(.primary){
 background:#fff!important;
 color:#1f4d8c!important;
 border:1px solid #d9cfba!important;
 padding:14px 26px!important;
 border-radius:11px!important;
 box-shadow:0 1px 3px rgba(36,28,20,.06)!important;
 transition:background .15s,border-color .15s,box-shadow .15s;
}
.hero-cta .hcta:not(.primary):hover{
 background:#f6f1e6!important;border-color:#b9a888!important;
 box-shadow:0 4px 12px rgba(36,28,20,.10)!important;
}

/* === スマホ：trust bar コンパクト化 === */
@media (max-width:560px){
 .hero-stats{
  margin:14px 0 18px!important;
  border-radius:14px;
 }
 .hero-stats .st{padding:10px 4px!important}
 .hero-stats .st .num{font-size:clamp(1.1rem,.8rem+2.6vw,1.4rem)!important}
 .hero-stats .st .lbl{font-size:.62rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* === 印刷時 === */
@media print{
 .hero-slider,.hero-stats,.hero-stats-overlay,.hero-tag,.hero-cta{display:none!important}
}