/* ============================================================
   subpage-hero.css
   2階層目ヒーロー共通ルール
   - トップページは対象外
   - コピー本文は変更せず、余白・高さ・画像比率だけを統一
   ============================================================ */

:root{
  --subhero-pad-y: 46px;
  --subhero-pad-y-mobile: 34px;
  --subhero-gap: 34px;
  --subhero-visual-h: clamp(300px, 25vw, 340px);
  --subhero-bg: #fff7ed;
}

/* 2階層目のヒーローは、section側の大きな共通余白と内側余白の二重掛けを止める */
body:not(.page-home) :where(
  section.hero,
  .svc-hero,
  .issues-hero,
  .flow-hero,
  .faq-hero,
  .pricing-hero,
  .contact-hero
){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--subhero-bg) !important;
}

/* 標準2カラムヒーロー */
body:not(.page-home) :where(
  .hero-grid,
  .svc-hero__grid,
  .issues-hero__grid,
  .flow-hero__grid,
  .faq-hero__grid,
  .contact-hero-grid
){
  width: var(--maxw) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important;
  align-items: center !important;
  gap: var(--subhero-gap) !important;
  padding-top: var(--subhero-pad-y) !important;
  padding-bottom: var(--subhero-pad-y) !important;
}

/* 料金ページは右側カードを少し細くして、ファーストビュー内に収める */
.pricing-hero__grid{
  width: var(--maxw) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(280px,.52fr) !important;
  align-items: center !important;
  gap: var(--subhero-gap) !important;
  padding-top: var(--subhero-pad-y) !important;
  padding-bottom: var(--subhero-pad-y) !important;
}

/* teamページも標準2カラムヒーロー（hero-grid）を使用する（2026.06.12 ウォームヒーロー統一） */

/* 見出し・本文は下層ページ用に少し抑える */
body:not(.page-home) :where(
  .hero h1,
  .svc-hero h1,
  .issues-hero h1,
  .flow-hero h1,
  .faq-hero h1,
  .pricing-hero h1,
  .contact-hero h1
){
  margin: 0 !important;
  color: var(--navy) !important;
  font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif !important;
  font-size: clamp(1.9rem, 2.9vw, 2.42rem) !important;
  line-height: 1.38 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-wrap: balance;
}

body:not(.page-home) :where(
  .hero-sub,
  .svc-hero__lead,
  .issues-hero__lead,
  .flow-hero__lead,
  .faq-hero__lead,
  .pricing-hero__lead,
  .contact-hero p
){
  margin-top: 12px !important;
  color: #20396e !important;
  font-size: .98rem !important;
  line-height: 1.76 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body:not(.page-home) .hero-sub{
  font-weight: 700 !important;
  font-size: clamp(1.04rem, 1.35vw, 1.14rem) !important;
  line-height: 1.7 !important;
  color: var(--navy) !important;
}

body:not(.page-home) :where(
  .eyebrow,
  .svc-eyebrow,
  .issues-eyebrow,
  .flow-eyebrow,
  .faq-eyebrow,
  .pricing-kicker,
  .contact-kicker
){
  min-height: 28px !important;
  margin-bottom: 12px !important;
  padding: 0 14px !important;
  font-size: .82rem !important;
  line-height: 1.2 !important;
}

body:not(.page-home) :where(
  .hero-actions,
  .svc-hero__actions,
  .issues-hero__actions,
  .flow-hero__actions,
  .faq-hero__actions,
  .pricing-hero__actions
){
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 20px !important;
}


body:not(.page-home) :where(
  .hero-actions .button,
  .svc-hero__actions .button,
  .issues-hero__actions .button,
  .flow-hero__actions .button,
  .faq-hero__actions .button,
  .pricing-hero__actions .button
){
  min-height: 46px !important;
  padding: 12px 20px !important;
  font-size: .92rem !important;
}

/* 画像エリアの高さを統一し、縦長になりすぎないようにする */
body:not(.page-home) :where(
  .hero-visual,
  .svc-hero__visual,
  .issues-hero__visual,
  .flow-hero__visual,
  .faq-hero__visual,
  .contact-visual
){
  width: 100% !important;
  height: var(--subhero-visual-h) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow: var(--shadow) !important;
}

body:not(.page-home) :where(
  .hero-visual img,
  .svc-hero__visual img,
  .flow-hero__visual img,
  .faq-hero__visual img
){
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ヒーロー写真は枠いっぱいに表示する（旧イラスト時代の contain 指定を写真用に変更 2026.06.10） */
body.page-issues .issues-hero__visual img,
body.page-contact .contact-visual img{
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.page-contact .contact-visual{
  padding: 0 !important;
}
body.page-contact .contact-visual img{
  border-radius: 0 !important;
}

/* FAQヒーローは人物中央配置を維持し、背景は下層ページ共通に揃える */
body.page-faq .faq-hero__visual img{
  object-position: center !important;
}

/* 料金ページ右側カードを少しコンパクトに */
.price-start-card{
  padding: 22px !important;
}
.price-start-card .price{
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  font-size: clamp(2rem, 3vw, 2.65rem) !important;
  line-height: 1.05 !important;
}
.price-start-card p{
  font-size: .92rem !important;
  line-height: 1.75 !important;
}
.pricing-note{
  margin-top: 12px !important;
  font-size: .8rem !important;
  line-height: 1.65 !important;
}

@media (max-width: 960px){
  body:not(.page-home) :where(
    .hero-grid,
    .svc-hero__grid,
    .issues-hero__grid,
    .flow-hero__grid,
    .faq-hero__grid,
    .pricing-hero__grid,
    .contact-hero-grid
  ){
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  body:not(.page-home) :where(
    .hero-visual,
    .svc-hero__visual,
    .issues-hero__visual,
    .flow-hero__visual,
    .faq-hero__visual,
    .contact-visual
  ){
    height: 285px !important;
  }
}

@media (max-width: 680px){
  body:not(.page-home) :where(
    .hero-grid,
    .svc-hero__grid,
    .issues-hero__grid,
    .flow-hero__grid,
    .faq-hero__grid,
    .pricing-hero__grid,
    .contact-hero-grid
  ){
    width: min(1120px, calc(100% - 28px)) !important;
    padding-top: var(--subhero-pad-y-mobile) !important;
    padding-bottom: var(--subhero-pad-y-mobile) !important;
  }
  body:not(.page-home) :where(
    .hero h1,
    .svc-hero h1,
    .issues-hero h1,
    .flow-hero h1,
    .faq-hero h1,
    .pricing-hero h1,
    .contact-hero h1
  ){
    font-size: clamp(1.82rem, 8vw, 2.08rem) !important;
    line-height: 1.36 !important;
  }
  body:not(.page-home) :where(
    .hero-visual,
    .svc-hero__visual,
    .issues-hero__visual,
    .flow-hero__visual,
    .faq-hero__visual,
    .contact-visual
  ){
    height: 240px !important;
  }
  body:not(.page-home) :where(
    .hero-actions .button,
    .svc-hero__actions .button,
    .issues-hero__actions .button,
    .flow-hero__actions .button,
    .faq-hero__actions .button,
    .pricing-hero__actions .button
  ){
    width: 100% !important;
  }
}