/* ============================================================
   page-hero-common.css — 全ページヒーロー共通

   ★ テキスト色の設計方針 ★
   - h1・リードテキスト（p）: 濃い紺 #0D2B4E（デフォルト）
   - section-label（英字小見出し）: 白（水色背景で視認性確保）
   - 例外的に白にしたい要素だけ個別指定
   ============================================================ */

/* =============================================
   共通ヒーローラッパー リセット
   ============================================= */
.content-page-hero,
.exp-hero, .travel-hero, .flow-page-hero,
.contact-hero, .line-page-hero,
.recruit-hero, .recruit-hero--cast, .recruit-hero--nakai,
.news-arc-hero, .col-arc-hero, .armt-hero,
.voice-archive-hero, .faq-arc-hero {
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: hidden !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
}

.content-page-hero::before, .content-page-hero::after,
.exp-hero::before, .exp-hero::after,
.travel-hero::before, .travel-hero::after,
.flow-page-hero::before, .flow-page-hero::after,
.contact-hero::before, .contact-hero::after,
.line-page-hero::before, .line-page-hero::after,
.recruit-hero::before, .recruit-hero::after,
.news-arc-hero::before, .news-arc-hero::after,
.col-arc-hero::before, .col-arc-hero::after,
.armt-hero::before, .armt-hero::after,
.voice-archive-hero::before, .voice-archive-hero::after,
.faq-arc-hero::before, .faq-arc-hero::after {
  display: none !important;
  content: none !important;
}

/* =============================================
   skewY 背景レイヤー（全ヒーロー共通）
   ============================================= */
.ph-slant-a {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--pink-main) !important;
  transform-origin: top left !important;
  transform: skewY(-7deg) translateY(-40px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.ph-slant-b {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--mint) !important;
  transform-origin: top right !important;
  transform: skewY(7deg) translateY(-40px) !important;
  z-index: 2 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}

/* =============================================
   ヒーロー全体 flex・余白
   ============================================= */
.content-page-hero,
.exp-hero, .travel-hero, .flow-page-hero,
.contact-hero, .line-page-hero,
.recruit-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 52px 24px 68px !important;
  min-height: 240px !important;
}

/* =============================================
   h1・タイトル：濃い紺（全ページ共通）
   ============================================= */
.content-page-hero > h1,
.exp-hero > h1,
.travel-hero > h1,
.flow-page-hero > h1,
.contact-hero > h1,
.line-page-hero > h1,
.recruit-hero > h1,
.recruit-hero--cast h1,
.recruit-hero--nakai h1,
.news-arc-title, .col-arc-hero-title, .armt-hero-title,
.voice-archive-hero h1, .faq-arc-title, .strmt-title,
.snews-hero--plain .snews-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(22px, 3.5vw, 36px) !important;
  font-weight: 400 !important;
  color: #0D2B4E !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 1px 8px rgba(255,255,255,0.30) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  order: 2 !important;
}

/* =============================================
   リードテキスト（p）：濃い紺（全ページ共通）
   ============================================= */
.content-page-hero > p,
.exp-hero > p,
.travel-hero > p,
.flow-page-hero > p,
.contact-hero > p,
.line-page-hero > p,
.recruit-hero > p,
.news-arc-lead, .col-arc-hero-lead, .armt-hero-lead,
.voice-archive-hero-lead, .faq-arc-lead {
  color: #0D2B4E !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  margin-top: 12px !important;
  position: relative !important;
  z-index: 5 !important;
  order: 3 !important;
}

/* =============================================
   section-label（英字小見出し）：白
   ============================================= */
.content-page-hero .section-label,
.exp-hero .section-label,
.travel-hero .section-label,
.flow-page-hero .section-label,
.contact-hero .section-label,
.line-page-hero .section-label,
.recruit-hero .section-label,
.news-arc-hero .section-label,
.col-arc-hero .col-arc-hero-label,
.armt-hero .section-label,
.voice-archive-hero .section-label,
.faq-arc-hero .section-label,
.strmt-hero-label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.45em !important;
  color: rgba(255,255,255,0.92) !important;
  display: block !important;
  margin-bottom: 10px !important;
  position: relative !important;
  z-index: 5 !important;
  order: 1 !important;
}

/* =============================================
   sub-nav ボタン
   ============================================= */
.content-page-hero > .sub-nav,
.exp-hero > .sub-nav,
.travel-hero > .sub-nav,
.recruit-hero > .sub-nav {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 20px !important;
  order: 4 !important;
}

.content-page-hero .sub-nav a,
.exp-hero .sub-nav a,
.travel-hero .sub-nav a,
.recruit-hero .sub-nav a {
  color: #0D2B4E !important;
  border: 1.5px solid rgba(13,43,78,0.40) !important;
  background: rgba(255,255,255,0.25) !important;
  padding: 7px 20px !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  position: relative !important;
  z-index: 5 !important;
}
.content-page-hero .sub-nav a:hover,
.exp-hero .sub-nav a:hover,
.travel-hero .sub-nav a:hover {
  background: rgba(255,255,255,0.45) !important;
}

/* =============================================
   不要デコ非表示
   ============================================= */
.news-arc-hero-deco, .voice-archive-hero-deco,
.faq-arc-hero-deco, .armt-hero-orbs,
.col-arc-hero-orbs, .recruit-hero__bg-text,
.strmt-hero-orbs, .strmt-hero-deco {
  display: none !important;
}

/* =============================================
   パンくず
   ============================================= */
.hero-breadcrumb {
  padding: 28px 40px 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: none !important;
  font-size: 12px !important;
  color: #888 !important;
  letter-spacing: 0.05em !important;
}
.hero-breadcrumb a { color: #888 !important; text-decoration: none !important; }
.hero-breadcrumb a:hover { color: var(--pink-main) !important; }
.hero-breadcrumb .sep { margin: 0 6px !important; color: #ccc !important; }

@media (max-width: 768px) {
  .hero-breadcrumb {
    padding: 20px 20px 0 !important;
  }
}
@media (max-width: 480px) {
  .hero-breadcrumb {
    padding: 16px 16px 0 !important;
    font-size: 11px !important;
  }
}

.armt-body .ladyreq-breadcrumb,
.col-arc-main .ladyreq-breadcrumb {
  margin-bottom: 24px !important;
}

/* =============================================
   strmt-hero（single-treatment）
   ============================================= */
.strmt-hero {
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  min-height: 240px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 50px 24px 70px !important;
  text-align: center !important;
}
.strmt-hero::before, .strmt-hero::after {
  display: none !important;
  content: none !important;
}
.strmt-hero-inner {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.strmt-subtitle {
  font-size: 13px !important;
  color: #0D2B4E !important;
  margin-top: 10px !important;
}
.strmt-hero-cut { display: none !important; }
.strmt-hero-thumb {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  border: 3px solid rgba(255,255,255,0.6) !important;
}
.strmt-hero-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
}

.treatment-card-title {
  color: #1a1a1a !important;
}

/* =============================================
   SP対応
   ============================================= */
@media (max-width: 768px) {
  .content-page-hero,
  .exp-hero, .travel-hero, .flow-page-hero,
  .contact-hero, .line-page-hero, .recruit-hero,
  .news-arc-hero, .col-arc-hero, .armt-hero,
  .voice-archive-hero, .faq-arc-hero {
    padding: 44px 20px 64px !important;
    min-height: 200px !important;
  }
  .page-hero-inner,
  .news-arc-hero-inner, .col-arc-hero-inner, .armt-hero-inner,
  .voice-archive-hero-inner, .faq-arc-hero-inner {
    padding: 44px 20px 64px !important;
  }
}

@media (max-width: 480px) {
  .content-page-hero,
  .exp-hero, .travel-hero, .flow-page-hero,
  .contact-hero, .line-page-hero, .recruit-hero,
  .news-arc-hero, .col-arc-hero, .armt-hero,
  .voice-archive-hero, .faq-arc-hero {
    padding: 36px 16px 56px !important;
    min-height: 180px !important;
  }
}

/* =============================================
   各ヒーロータイプ別 slant レイヤー（全archive・全single共通）
   ============================================= */
.strmt-hero .ph-slant-a,
.scol-hero .ph-slant-a,
.recruit-hero .ph-slant-a,
.snews-hero .ph-slant-a,
.svoice-hero .ph-slant-a,
.support-hero .ph-slant-a,
.content-page-hero .ph-slant-a,
.exp-hero .ph-slant-a,
.travel-hero .ph-slant-a,
.flow-page-hero .ph-slant-a,
.contact-hero .ph-slant-a,
.line-page-hero .ph-slant-a,
.news-arc-hero .ph-slant-a,
.col-arc-hero .ph-slant-a,
.armt-hero .ph-slant-a,
.voice-archive-hero .ph-slant-a,
.faq-arc-hero .ph-slant-a {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--pink-main) !important;
  transform-origin: top left !important;
  transform: skewY(-7deg) translateY(-40px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.strmt-hero .ph-slant-b,
.scol-hero .ph-slant-b,
.recruit-hero .ph-slant-b,
.snews-hero .ph-slant-b,
.svoice-hero .ph-slant-b,
.support-hero .ph-slant-b,
.content-page-hero .ph-slant-b,
.exp-hero .ph-slant-b,
.travel-hero .ph-slant-b,
.flow-page-hero .ph-slant-b,
.contact-hero .ph-slant-b,
.line-page-hero .ph-slant-b,
.news-arc-hero .ph-slant-b,
.col-arc-hero .ph-slant-b,
.armt-hero .ph-slant-b,
.voice-archive-hero .ph-slant-b,
.faq-arc-hero .ph-slant-b {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--mint) !important;
  transform-origin: top right !important;
  transform: skewY(7deg) translateY(-40px) !important;
  z-index: 2 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}

.scol-hero-bg      { z-index: 3 !important; }
.scol-hero-overlay { z-index: 4 !important; }
.scol-hero-inner   { z-index: 6 !important; }
.scol-hero-deco    { z-index: 3 !important; }

.snews-hero-bg      { z-index: 3 !important; }
.snews-hero-overlay { z-index: 4 !important; }
.snews-hero .snews-hero-inner { z-index: 6 !important; }
.snews-hero-deco    { z-index: 3 !important; }

.recruit-hero__bg-text { z-index: 3 !important; }
.recruit-hero__inner   { z-index: 5 !important; }

/* サムネあり記事のみ白タイトル */
.snews-hero--thumb .snews-title {
  color: #fff !important;
}

.snews-hero--plain {
  padding: 52px 24px 68px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}