/* ============================================================
   page-hero-common.css — 全ページヒーロー共通
   PC: 10.5deg V字 / SP(~768px): 25deg X字
   ============================================================ */

/* =============================================
   共通リセット
   ============================================= */
.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,
.support-hero, .strmt-hero,
.scol-hero, .snews-hero, .svoice-hero {
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  height: auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  padding: 10px 24px !important;
  min-height: 250px !important;
}

/* ::before ::after 全無効 */
.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,
.support-hero::before, .support-hero::after,
.strmt-hero::before, .strmt-hero::after,
.scol-hero::before, .scol-hero::after,
.snews-hero::before, .snews-hero::after,
.svoice-hero::before, .svoice-hero::after {
  display: none !important;
  content: none !important;
}

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

/* =============================================
   slant レイヤー（PC）
   ============================================= */
.ph-slant-a {
  position: absolute !important;
  inset: 0 !important;
  background-color: #C9FFE2 !important;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%) !important;
  opacity: 0.80 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.ph-slant-b {
  position: absolute !important;
  inset: 0 !important;
  background-color: #96E8BC !important;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%) !important;
  opacity: 0.90 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* =============================================
   section-label（order: 1）
   ============================================= */
.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 .section-label,
.armt-hero .section-label,
.voice-archive-hero .section-label,
.faq-arc-hero .section-label,
.support-hero .section-label,
.strmt-hero .section-label,
.strmt-hero-label,
.svoice-hero .section-label,
.scol-hero .section-label,
.snews-hero .section-label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.45em !important;
  color: rgba(255,255,255,0.92) !important;
  display: block !important;
  margin: 0 0 10px !important;
  position: relative !important;
  z-index: 5 !important;
  order: 1 !important;
}

/* =============================================
   h1（order: 2）
   ============================================= */
.content-page-hero h1,
.exp-hero h1,
.travel-hero h1,
.flow-page-hero h1,
.contact-hero h1,
.line-page-hero h1,
.recruit-hero h1,
.news-arc-hero h1, .news-arc-title,
.col-arc-hero h1,
.armt-hero h1, .armt-hero-title,
.voice-archive-hero h1,
.faq-arc-hero h1,
.support-hero h1,
.strmt-hero h1, .strmt-title,
.svoice-hero h1,
.scol-hero h1,
.snews-hero h1 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(22px, 3.5vw, 36px) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0.18em !important;
  text-shadow: 0 2px 16px rgba(0,60,90,0.7), 0 0 40px rgba(75,127,82,0.6) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  order: 2 !important;
}

/* =============================================
   リードテキスト p（order: 3）
   ============================================= */
.content-page-hero p,
.exp-hero p,
.travel-hero p,
.flow-page-hero p,
.contact-hero p,
.line-page-hero p,
.recruit-hero p,
.voice-archive-hero p,
.faq-arc-hero p,
.strmt-hero p,
.svoice-hero p,
.content-hero-lead,
.faq-arc-lead,
.news-arc-lead,
.col-arc-hero-lead,
.armt-hero-lead,
.voice-archive-lead {
  color: #067584 !important;
  font-size: 12px !important;
  line-height: 1.85 !important;
  margin: 10px 0 0 !important;
  position: relative !important;
  z-index: 5 !important;
  order: 3 !important;
}

/* =============================================
   sub-nav（order: 4）
   ============================================= */
.content-page-hero .sub-nav,
.exp-hero .sub-nav,
.travel-hero .sub-nav,
.recruit-hero .sub-nav,
.svoice-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: 20px 0 0 !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,
.recruit-hero .btn-outline-w {
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  background: #7DD181 !important;
  padding: 9px 25px !important;
  border-radius: 30px !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,
.recruit-hero .sub-nav a:hover { background: rgba(255,255,255,0.45) !important; }

/* recruit badges（order: 5）*/
.recruit-hero__badges {
  position: relative !important;
  z-index: 5 !important;
  order: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin: 12px 0 0 !important;
}

/* =============================================
   recruit-hero__inner: 透過（直接子要素として扱う）
   ============================================= */
.recruit-hero__inner {
  display: contents !important;
}

/* =============================================
   time（date）要素 order: 1.5 → 1でsection-labelと同じ扱い
   ============================================= */
.content-page-hero time,
.svoice-hero time,
.snews-hero time,
.scol-hero time,
.snews-hero-date,
.scol-date {
  position: relative !important;
  z-index: 5 !important;
  order: 1 !important;
  color: rgba(255,255,255,0.80) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}

/* svoice avatar（order: 1.5 相当）*/
.svoice-avatar {
  position: relative !important;
  z-index: 5 !important;
  order: 2 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 8px 0 !important;
  border: 3px solid rgba(255,255,255,0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #fff !important;
  font-weight: bold !important;
}
.svoice-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.svoice-hero h1 { order: 3 !important; }
.svoice-hero p  { order: 4 !important; }
.svoice-name { font-size: clamp(18px, 2.5vw, 28px) !important; }
.svoice-age  { font-size: 12px !important; }

/* strmt icon/thumb */
.strmt-hero-thumb {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important; overflow: hidden !important;
  margin: 0 0 14px !important;
  border: 3px solid rgba(255,255,255,0.6) !important;
  position: relative !important; z-index: 5 !important;
  order: 1 !important;
}
.strmt-hero-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  background: rgba(75,127,82,0.3) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 26px !important; color: #fff !important;
  margin: 0 0 14px !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  position: relative !important; z-index: 5 !important;
  order: 1 !important;
}

/* =============================================
   パンくず
   ============================================= */
.hero-breadcrumb {
  padding: 8px 40px 0 !important;
  margin: 0 !important;
  background: transparent !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; }
.armt-body .ladyreq-breadcrumb,
.col-arc-main .ladyreq-breadcrumb { margin-bottom: 24px !important; }

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

/* scol/snews page-title block 非表示（h1 を hero 内に移動済み）*/
.scol-page-title,
.snews-page-title { display: none !important; }

/* =============================================
   SP（〜768px）: 25deg X字
   ============================================= */
@media (max-width: 768px) {
  .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,
  .support-hero, .strmt-hero,
  .scol-hero, .snews-hero, .svoice-hero {
    background: #ffffff !important;
    padding: 25px 20px !important;
    min-height: 203px !important;
  }
  .hero-breadcrumb { padding: 6px 20px 0 !important; }
  /* SP: clip-pathはPC共通（比率自動）、色のみ変更 */
  .ph-slant-a {
    background-color: #C9FFE2 !important;
    opacity: 0.70 !important;
  }
  .ph-slant-b {
    background-color: #96E8BC !important;
    opacity: 0.60 !important;
  }
  .content-page-hero .sub-nav a,
  .exp-hero .sub-nav a,
  .travel-hero .sub-nav a,
  .recruit-hero .sub-nav a,
  .recruit-hero .btn-outline-w {
    background: #7DD181 !important;
    color: #ffffff !important;
    border: 1px solid #4B7F52 !important;
    border-radius: 5px !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}