/* ─── 【重要】背景色を2.5秒かけて滑らかに変化させる設定 ─── */
.l-cmn-rec-base-section {
  transition: background-color 2.5s ease-in-out;
}

/* ─── 元のタブ用スタイル ─── */
/* .p-rec-disability-new-panel,
    .p-rec-disability-career-panel {
        display: none;
    } */

.p-rec-disability-new-panel.is-active,
.p-rec-disability-career-panel.is-active {
  display: block;
  animation: fadeUpTab 0.4s ease forwards;
}

.p-cmn-service-hero__btn.is-active {
  background: #00b2a9;
  outline: none;
}

.p-cmn-service-hero__btn.is-active .p-cmn-service-hero__btn-text {
  color: #ffffff;
}

@keyframes fadeUpTab {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── ヌルッと縮めるためのベース仕込み ─── */
.p-header {
  transition:
    top 0.4s ease,
    padding 0.3s ease,
    height 0.3s ease;
}

.p-header .p-header__inner {
  transition: padding 0.3s ease;
}

.p-header .p-header__logo img,
.p-header .p-header__trigger {
  transition: height 0.3s ease;
}

#id-cmn-service-hero,
#id-cmn-service-hero .p-cmn-service-hero__nav,
#id-cmn-service-hero .p-cmn-service-hero__btn {
  transition: all 0.3s ease;
}

/* ==============================================================================
     * 💡PC限定・固定追従用ナビ（スマート化調整版）
     * ============================================================================== */
@media (min-width: 768px) {
  .p-cmn-service-hero__nav-sticky {
    position: fixed;
    top: 36px;
    /* 縮小ヘッダーの底面にピタッと合わせる */
    left: 0;
    width: 100%;
    z-index: 20;
    background-color: #1a252c;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    transition:
      height 0.3s ease,
      opacity 0.3s ease,
      padding 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  /* 調整：上下余白を 4px → 2px に削減してコンパクトに */
  .p-cmn-service-hero__nav-sticky.is-active {
    height: auto;
    opacity: 1;
    padding: 2px 24px !important;
  }

  /* 調整：ボタン自体の上下パディングを 6px → 4px に、文字をほんの少し小さくしてシャープに */
  .p-cmn-service-hero__nav-sticky.is-active .p-cmn-service-hero__btn {
    font-size: 0.8rem !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .p-cmn-service-hero__nav-sticky [style*="display: none"] {
    display: none !important;
  }
}

/* 💡スマホ時は絶対に非表示かつ存在させない */
@media (max-width: 767px) {
  .p-cmn-service-hero__nav-sticky {
    display: none !important;
  }
}

/* ==============================================================================
     * 固定時（is-sticky-active）の縮小スタイル（PC版限定）
     * ============================================================================== */
@media (min-width: 768px) {
  .p-header.is-sticky-active {
    height: auto;
  }

  .p-header.is-sticky-active .p-header__inner {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .p-header.is-sticky-active .p-header__logo img {
    height: 24px;
  }

  .p-header.is-sticky-active .p-header__trigger {
    height: 16px;
  }

  .p-header.is-sticky-active ~ #main-content .p-cmn-service-hero__nav,
  .p-header.is-sticky-active
    ~ .p-hero-hdr__nav-container
    .p-cmn-service-hero__nav,
  .p-header.is-sticky-active .p-cmn-service-hero__nav,
  .p-header.is-sticky-active + #id-cmn-service-hero .p-cmn-service-hero__nav {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .p-header.is-sticky-active ~ #main-content .p-cmn-service-hero__btn,
  .p-header.is-sticky-active
    ~ .p-hero-hdr__nav-container
    .p-cmn-service-hero__btn,
  .p-header.is-sticky-active .p-cmn-service-hero__btn,
  .p-header.is-sticky-active + #id-cmn-service-hero .p-cmn-service-hero__btn {
    font-size: 0.85rem;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: auto;
  }

  .p-header.is-sticky-active ~ #main-content .p-hero-hdr__nav-container,
  .p-header.is-sticky-active ~ .p-hero-hdr__nav-container,
  .p-header.is-sticky-active ~ #id-cmn-service-hero,
  .p-header.is-sticky-active + #id-cmn-service-hero {
    top: 36px;
  }

  .p-header.is-sticky-active .p-header__nav,
  .p-header.is-sticky-active .p-header__mega-menu {
    top: 36px;
  }
}