/* /assets/css/pages/home.css */
/* 出典: 旧WP front-page.php インラインスタイル */
/* レスポンシブ: この PC 用ブロックは 1024px 以上でのみ当てる(モバイル用マークアップと同居するため) */
@media (min-width:1024px){
/* ヒーロー非表示中は固定ヘッダー(113px)の下に EVENT 帯を下げる */
@media (min-width:1024px){.hero-section.is-hidden{display:none}}
@media (min-width:1024px){.hero-section.is-video .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}}
@media (min-width:1024px){.hero-section.is-video .hero-overlay{display:none}}
@media (min-width:1024px){.hero-section.is-hidden ~ .event-bar{margin-top:113px}}
.event-bar{width:100%;background:#A4131C url('/wp-content/themes/taian-bridge-rwd/images/event-bar-bg.webp') center/cover no-repeat;transition:filter .15s}.event-bar:hover{filter:brightness(.93)}.event-bar-inner{text-decoration:none;cursor:pointer}
.event-bar-inner{
    display:flex;align-items:center;justify-content:center;gap:12px;
    height:50px;padding:0 16px;box-sizing:border-box;
    font-family:"Pretendard JP",Pretendard,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
.event-bar-badge{
    flex:none;background:#ffd63b;color:#9a0000;
    font-weight:800;font-size:13px;letter-spacing:.06em;
    padding:4px 10px;border-radius:3px;line-height:1;
}
.event-bar-text{
    color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.event-bar-text strong{color:#F5D200;font-weight:900;-webkit-text-stroke:0.5px #F5D200;text-shadow:0 0 1px #F5D200;}
}
@media (min-width:1024px) and (max-width:768px){
    .event-bar-inner{height:auto;min-height:50px;padding:8px 12px;gap:8px;}
    .event-bar-badge{font-size:11px;padding:3px 8px;}
    .event-bar-text{font-size:12px;white-space:normal;line-height:1.4;text-align:center;}
}

/* レスポンシブ: この PC 用ブロックは 1024px 以上でのみ当てる(モバイル用マークアップと同居するため) */
@media (min-width:1024px){
@media (min-width:1024px){.lp-h1{margin:0 0 18px;font-size:50px;font-weight:800;line-height:1.35;color:#0d1b4b;letter-spacing:-1px;text-align:center}}@media (min-width:1024px){.lp-h2-sub{margin:0 0 100px;font-size:22px;font-weight:500;line-height:1.5;color:#3b4a6b;letter-spacing:-.3px;text-align:center}}
}
@media (min-width:1024px) and (max-width:1100px){@media (min-width:1024px){.lp-h1{font-size:30px;margin-bottom:10px}}@media (min-width:1024px){.lp-h2-sub{font-size:15px;margin-bottom:38px}}}

/* レスポンシブ: この PC 用ブロックは 1024px 以上でのみ当てる(モバイル用マークアップと同居するため) */
@media (min-width:1024px){
.rph{background:var(--bg,#F8F9FB);padding:0 0 120px}
.rph-in{width:972px;max-width:calc(100% - 32px);margin:0 auto}
/* ヘッドライン */
.rph-h{margin:0;text-align:center;font-weight:800;font-size:55px;line-height:1.0;letter-spacing:-.5px;
  background:linear-gradient(90.28deg,#0067ED 17.88%,#002167 49.45%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rph-lead{margin:20px 0 0;text-align:center;font-weight:700;font-size:22px;line-height:1.4;color:#000}
.rph-cta{display:flex;align-items:center;justify-content:center;gap:18px;width:377px;height:60px;margin:30px auto 0;
  background:#C00000;border-radius:18px;text-decoration:none;transition:filter .18s ease,transform .18s ease}
.rph-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.rph-cta span{font-weight:700;font-size:26px;line-height:1;color:#fff}
.rph-dia{width:10px;height:10px;background:none;border:0;border-right:2.8px solid #fff;border-bottom:2.8px solid #fff;transform:rotate(-45deg);box-sizing:border-box}
/* バナー行 */
.rph-block{margin-top:73px}
.rph-block + .rph-block{margin-top:30px}
.rph-2col{display:grid;grid-template-columns:476px 476px;gap:20px;justify-content:center}
.rph-card{display:block;text-decoration:none;color:inherit}
.rph-card img{display:block;width:100%;height:auto;border-radius:0}
.rph-ttl{display:block;margin:25px 0 0;font-weight:700;font-size:28px;line-height:20px;color:#1A1A1A}
.rph-sub{display:block;margin:13px 0 0;font-weight:500;font-size:17px;line-height:20px;color:#1A1A1A}
.rph-card:hover .rph-ttl{color:#0050C2}
.rph-sep{width:100%;height:0;margin:25px 0 0;border:0;border-top:1px solid rgba(0,0,0,.5)}
/* 画像のないカード(教育・業者選び)用の代替ビジュアル */
.rph-ph{position:relative;width:100%;aspect-ratio:526/174;border-radius:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.rph-ph-1{background:linear-gradient(105deg,#E8F1FF 0%,#CFE1FA 55%,#B7D3F6 100%)}
.rph-ph-2{background:linear-gradient(105deg,#0B1E4B 0%,#123A7A 60%,#0050C2 100%)}
.rph-ph span{font-weight:800;font-size:34px;letter-spacing:.02em}
.rph-ph-1 span{color:#0B2A6B}
.rph-ph-2 span{color:#fff}
}
@media (min-width:1024px) and (max-width:1180px){
  .rph-in{max-width:1100px;padding:0 24px}
  .rph-2col{grid-template-columns:1fr 1fr;gap:32px}
}
@media (min-width:1024px) and (max-width:900px){
  .rph{padding:64px 0 72px}
  .rph-h{font-size:35px}
  .rph-lead{font-size:16px;margin-top:14px}
  .rph-cta{width:100%;max-width:377px;height:48px;margin-top:26px;gap:13px}
  .rph-cta span{font-size:19px}
  .rph-block{margin-top:48px}
  .rph-block + .rph-block{margin-top:22px}
  .rph-2col{grid-template-columns:1fr;gap:40px}
  .rph-ttl{font-size:22px;line-height:1.3;margin-top:22px}
  .rph-sub{font-size:15px;line-height:1.6;margin-top:8px}
  .rph-sep{margin-top:22px}
  .rph-ph span{font-size:24px}
}

/* front-page-mobile.php の <style> にあった分。
   .event-bar / .rph は他ページでも使う名前なので、
   全ページ用の rwd.css ではなくホームの出力にだけ置く。 */
/* レスポンシブ: このブロックは 1023.98px 以下でのみ当てる(PC 用マークアップと同居するため) */
@media (max-width:1023.98px){
.event-bar{width:100%;background:#A4131C url('/wp-content/themes/taian-bridge-rwd/images/event-bar-bg.webp') center/cover no-repeat;transition:filter .15s}.event-bar:hover{filter:brightness(.93)}.event-bar-inner{text-decoration:none;cursor:pointer}
.event-bar-inner{
    display:flex;align-items:center;justify-content:center;gap:12px;
    height:50px;padding:0 16px;box-sizing:border-box;
    font-family:"Pretendard JP",Pretendard,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}
.event-bar-badge{
    flex:none;background:#ffd63b;color:#9a0000;
    font-weight:800;font-size:13px;letter-spacing:.06em;
    padding:4px 10px;border-radius:3px;line-height:1;
}
.event-bar-text{
    color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.event-bar-text strong{color:#F5D200;font-weight:900;-webkit-text-stroke:0.5px #F5D200;text-shadow:0 0 1px #F5D200;}
}
@media (max-width:1023.98px){
    .event-bar-inner{height:auto;min-height:50px;padding:8px 12px;gap:8px;}
    .event-bar-badge{font-size:11px;padding:3px 8px;}
    .event-bar-text{font-size:12px;white-space:normal;line-height:1.4;text-align:center;}
}


/* レスポンシブ: このブロックは 1023.98px 以下でのみ当てる(PC 用マークアップと同居するため) */
@media (max-width:1023.98px){
.m-h1{margin:0 0 8px;font-size:27px;font-weight:800;line-height:1.4;color:#0d1b4b;letter-spacing:-.5px;text-align:center}.m-h2-sub{margin:0 0 22px;font-size:13px;font-weight:500;line-height:1.5;color:#3b4a6b;text-align:center}
}


/* レスポンシブ: このブロックは 1023.98px 以下でのみ当てる(PC 用マークアップと同居するため) */
@media (max-width:1023.98px){
.rph{background:var(--bg,#F8F9FB);padding:0 0 120px}
.rph-in{width:972px;max-width:calc(100% - 32px);margin:0 auto}
/* ヘッドライン */
.rph-h{margin:0;text-align:center;font-weight:800;font-size:55px;line-height:1.0;letter-spacing:-.5px;
  background:linear-gradient(90.28deg,#0067ED 17.88%,#002167 49.45%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rph-lead{margin:20px 0 0;text-align:center;font-weight:700;font-size:22px;line-height:1.4;color:#000}
.rph-cta{display:flex;align-items:center;justify-content:center;gap:18px;width:377px;height:60px;margin:30px auto 0;
  background:#C00000;border-radius:18px;text-decoration:none;transition:filter .18s ease,transform .18s ease}
.rph-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.rph-cta span{font-weight:700;font-size:26px;line-height:1;color:#fff}
.rph-dia{width:10px;height:10px;background:none;border:0;border-right:2.8px solid #fff;border-bottom:2.8px solid #fff;transform:rotate(-45deg);box-sizing:border-box}
/* バナー行 */
.rph-block{margin-top:73px}
.rph-block + .rph-block{margin-top:30px}
.rph-2col{display:grid;grid-template-columns:476px 476px;gap:20px;justify-content:center}
.rph-card{display:block;text-decoration:none;color:inherit}
.rph-card img{display:block;width:100%;height:auto;border-radius:0}
.rph-ttl{display:block;margin:25px 0 0;font-weight:700;font-size:28px;line-height:20px;color:#1A1A1A}
.rph-sub{display:block;margin:13px 0 0;font-weight:500;font-size:17px;line-height:20px;color:#1A1A1A}
.rph-card:hover .rph-ttl{color:#0050C2}
.rph-sep{width:100%;height:0;margin:25px 0 0;border:0;border-top:1px solid rgba(0,0,0,.5)}
/* 画像のないカード(教育・業者選び)用の代替ビジュアル */
.rph-ph{position:relative;width:100%;aspect-ratio:526/174;border-radius:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.rph-ph-1{background:linear-gradient(105deg,#E8F1FF 0%,#CFE1FA 55%,#B7D3F6 100%)}
.rph-ph-2{background:linear-gradient(105deg,#0B1E4B 0%,#123A7A 60%,#0050C2 100%)}
.rph-ph span{font-weight:800;font-size:34px;letter-spacing:.02em}
.rph-ph-1 span{color:#0B2A6B}
.rph-ph-2 span{color:#fff}
}
@media (max-width:1023.98px){
  .rph-in{width:auto;max-width:1100px;padding:0 24px}
  .rph-2col{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:1023.98px){
  .rph{padding:64px 0 72px}
  .rph-h{font-size:35px}
  .rph-lead{font-size:16px;margin-top:14px}
  .rph-cta{width:100%;max-width:377px;height:48px;margin-top:26px;gap:13px}
  .rph-cta span{font-size:19px}
  .rph-block{margin-top:48px}
  .rph-block + .rph-block{margin-top:22px}
  .rph-2col{grid-template-columns:1fr;gap:40px}
  .rph-ttl{font-size:22px;line-height:1.3;margin-top:22px}
  .rph-sub{font-size:15px;line-height:1.6;margin-top:8px}
  .rph-sep{margin-top:22px}
  .rph-ph span{font-size:24px}
}
@media (max-width:1023.98px){
/* モバイル専用: PC と同様にタイトルを1行に保つ */
}
@media (max-width:1023.98px){.rph-h{font-size:min(35px,7.1vw)}}

/* 簡易お問い合わせ: どの幅でも PC 版カードのまま(HomeCssUnify が contact-* をモバイル版に切り替えない)。
   カード幅 560px が入らない狭い幅だけ、セクションの左右余白(rwd.css)の内側に収まるよう縮める。それ以外の幅には影響しない。 */
.contact-form-card{max-width:100%}
/* 1024px 未満は rwd.css(.m-main .contact-inner{padding:0!important})が上下の余白まで消し、カードがフッターに付いてしまう。
   PC と同じ上 26px / 下 18px を戻す(左右はセクション側の余白があるので触らない)。
   (HomeCssUnify は max-width:1023.98px の @media の中の規則には幅の条件を重ねない — 10/6 修正) */
@media (max-width:1023.98px){
  .contact-section .contact-inner{padding-top:26px!important;padding-bottom:18px!important}
}

/* 為替ティッカー: どの幅でも PC 版のまま(HomeCssUnify が ticker-* をモバイル版に切り替えない)。
   1024px 未満は rwd.css(.m-main .ticker-wrapper{height:auto!important})が帯の高さを消すので PC と同じ 78px に戻す。 */
@media (max-width:1023.98px){
  .ticker-section .ticker-wrapper{height:78px!important}
  /* rwd.css は 561〜1023px で main > section に左右パディング(中身を 560px 中央に)を付け、.m-ticker だけ 0 に戻していた。
     クラスが PC 版のままなので同じ例外をここで */
  section.ticker-section.ticker-section{padding-left:0!important;padding-right:0!important}   /* 560px 以下の .m-main > section{padding:44px!important} より強く */
}

/* 実績の数字(why-stat)の青いカード — 1024px 未満。
   ・3 枚目(10,000円分)だけ rwd.css が幅 100% の単独行にしていて、カードも行いっぱい(560px)に広がっていた → 他と同じ 110px 幅に
   ・モバイル版はタップ(.is-active、旧 mobile.js)前提でホバー規則がなかった。PC と同じくホバーでも出す(タップは theme-fix.js) */
@media (max-width:1023.98px){
  .why-stats > .why-stat:nth-child(3)::before{width:110px!important;left:50%!important;transform:translateX(-50%)!important}
  .why-stat:hover::before,.why-stat.is-active::before{opacity:1}
  .why-stat:hover .why-stat-number,.why-stat:hover .why-stat-label,
  .why-stat.is-active .why-stat-number,.why-stat.is-active .why-stat-label{color:#fafafa}
}

/* タブレット帯(561〜1023px): モバイル版の小さい文字(8〜13px)を 1.2 倍に。10/6 決定。
   560px 以下(スマートフォン)は旧デザインの値のまま。rwd.css が !important で指定しているものがあるので同じく !important */
@media (min-width:561px) and (max-width:1023.98px){
  .review-type{font-size:9.6px!important}
  .review-snippet{font-size:10.8px!important}
  .review-date{font-size:12px!important}
  .service-card-sub{font-size:9.6px!important}
  .service-card-desc{font-size:10.8px!important}
  .service-card-features li{font-size:9.6px!important}
  .service-card-title{font-size:16.8px!important}
  .lp-bubble-text,.lp-bubble-text .lp-emph{font-size:12px!important}
  .lp-more-label,.more-link{font-size:12px!important}
  .status-label,.type-badge{font-size:12.5px!important}
  .status-name{font-size:15.6px!important}
  .why-stat-label{font-size:14px!important}
  .lp-h2-sub{font-size:15.6px!important}
}