/* ============================================
   SP新ハンバーガーメニュー (p-sp-nav-new)
   ブレイクポイント: max-width 1199px
   ============================================ */

/* 既存SPメニューをSP時に非表示 */
@media only screen and (max-width: 1199px) {
  #js-header__nav {
    display: none !important;
  }
}

/* 新メニューはデスクトップでは非表示 */
.p-sp-nav-new {
  display: none;
}

@media only screen and (max-width: 1199px) {

  /* ---- オーバーレイ本体 ---- */
  .p-sp-nav-new {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f0f0f0;
    z-index: 99999;
    -webkit-overflow-scrolling: touch;
    line-height: 1.3;
  }

  .p-sp-nav-new.is-open {
    display: block;
  }

  /* ---- 閉じるバー（SNS + 閉じるボタン） ---- */
  .p-sp-nav-new__close-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
  }

  /* ---- 閉じるボタン ---- */
  .p-sp-nav-new__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    box-sizing: border-box;
    letter-spacing: 0.05em;
  }

  .p-sp-nav-new__close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 14px;
    margin-right: 4px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    color: #333;
  }

  /* ---- 下部の閉じるボタン ---- */
  .p-sp-nav-new__close--bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    box-sizing: border-box;
    letter-spacing: 0.05em;
  }

  /* ---- インナー ---- */
  .p-sp-nav-new__inner {
    padding: 12px 14px 48px;
  }

  /* ============================================
     フルwidth カラーボタン
     ============================================ */
  .p-sp-nav-new__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-bottom: 6px;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.3;
    letter-spacing: 0.05em;
  }

  .p-sp-nav-new__btn span {
    display: inline-block;
    text-align: center;
  }

  .p-sp-nav-new__btn--gold  { background-color: #dbd08d; color: #000 !important; border: 1px solid #000; }
  .p-sp-nav-new__btn--gold + .p-sp-nav-new__btn--gold { margin-bottom: 10px; }
  .p-sp-nav-new__torikumi-wrap + .p-sp-nav-new__accordion { margin-bottom: 10px; }
  .p-sp-nav-new__btn--brown { background-color: #5c3317; }
  .p-sp-nav-new__btn--red   { background-color: #881d22; margin-bottom: 10px; }
  .p-sp-nav-new__btn--navy  { background-color: #0d3a5f; }

  /* ---- ボタン内SVGアイコン ---- */
  .p-sp-nav-new__btn-icon {
    display: block;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1); /* 白色化 */
  }

  /* ---- 外部リンクアイコン ---- */
  .p-sp-nav-new__ext-icon {
    font-size: 11px;
    margin-left: 5px;
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* ---- 半幅ボタンラップ ---- */
  .p-sp-nav-new__half-wrap {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
  }

  .p-sp-nav-new__half-wrap .p-sp-nav-new__btn {
    flex: 1;
    width: auto;
    margin-bottom: 0;
    min-height: 48px;
    padding: 5px 6px;
    gap: 6px;
  }

  /* ============================================
     アコーディオン
     ============================================ */
  .p-sp-nav-new__accordion {
    margin-bottom: 6px;
  }

  .p-sp-nav-new__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 44px;
    padding: 0 40px 0 14px;
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    font-family: YakuHanMP, "noto-serif-jp", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #000;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 0.05em;
  }

  /* ∨ シェブロンアイコン */
  .p-sp-nav-new__accordion-icon {
    position: absolute;
    right: 14px;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 8px;
  }

  .p-sp-nav-new__accordion-icon::before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%) rotate(45deg); /* ∨ 向き */
    transition: transform 0.25s ease;
  }

  .p-sp-nav-new__accordion-icon::after {
    content: none; /* + の縦線を削除 */
  }

  /* 開いた状態: ∧ 向きに反転 */
  .p-sp-nav-new__accordion.is-open .p-sp-nav-new__accordion-icon::before {
    transform: translate(-50%, -30%) rotate(-135deg);
  }

  /* ---- 蛍光マーカー風アンダーライン（開時） ---- */
  .p-sp-nav-new__accordion-label {
    position: relative;
  }

  .p-sp-nav-new__accordion.is-open .p-sp-nav-new__accordion-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 30%;
    background: #ffec00;
    mix-blend-mode: multiply;
    pointer-events: none;
    animation: sp-marker-slide 0.35s ease forwards;
  }

  @keyframes sp-marker-slide {
    from { width: 0; }
    to   { width: 100%; }
  }

  /* アコーディオン コンテンツ */
  .p-sp-nav-new__accordion-content {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fafafa;
  }

  .p-sp-nav-new__accordion.is-open .p-sp-nav-new__accordion-content {
    display: block;
  }

  .p-sp-nav-new__accordion-content li {
    border: 1px solid #000;
    margin-top: -1px;
  }

  .p-sp-nav-new__accordion-content li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px 0 28px;
    font-size: 14px;
    color: #000 !important;
    text-decoration: none !important;
  }

  .p-sp-nav-new__accordion-content li a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    margin-right: 10px;
    flex-shrink: 0;
  }

  /* ============================================
     取り組み + ブログ 横並び
     ============================================ */
  .p-sp-nav-new__torikumi-wrap {
    margin-bottom: 4px;
  }

  .p-sp-nav-new__torikumi-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  .p-sp-nav-new__torikumi-row .p-sp-nav-new__accordion-trigger {
    flex: 1;
    width: auto;
  }

  .p-sp-nav-new__blog-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 44px;
    background: #fff;
    border: 1px solid #000;
    font-size: 16px;
    font-weight: 700;
    font-family: YakuHanMP, "noto-serif-jp", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #000 !important;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    padding: 0 4px;
    letter-spacing: 0.05em;
  }

  .p-sp-nav-new__torikumi-wrap .p-sp-nav-new__accordion-content {
    border-top: none;
  }

  /* ============================================
     SNSアイコン（閉じるバー内）
     ============================================ */
  .p-sp-nav-new__sns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 0;
  }

  .p-sp-nav-new__sns-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none !important;
    transition: opacity 0.2s;
    color: #0d3a5f !important; /* SVG(fill:currentColor)にも継承される */
    font-size: 28px; /* FAのSVGサイズもこれで制御 */
  }

  /* FA CSS版のpadding-leftをリセット */
  .p-sp-nav-new__sns-item .fab {
    padding-left: 0 !important;
  }

  .p-sp-nav-new__sns-item:hover {
    opacity: 0.75;
  }

}

/* body スクロールロック */
body.sp-nav-open {
  overflow: hidden;
}

/* SPヘッダー背景色 */
@media only screen and (max-width: 1199px) {
  /* トップページのみ紺色（IDセレクタで詳細度最大） */
  body.home #js-header,
  body.home #js-header.l-header--fixed,
  body.home #js-header.l-header--fixed.is-active {
    background: #1c4572 !important;
  }
  /* 中ページはスクロール時も白 */
  body:not(.home) #js-header.l-header--fixed.is-active {
    background: #ffffff !important;
  }
}

/* 中ページのスクロール前（紺背景時）のロゴと3本線を白に */
@media only screen and (max-width: 1199px) {
  body:not(.home) #js-header:not(.is-active) .p-menu-btn {
    color: #ffffff !important;
  }
  body:not(.home) #js-header:not(.is-active) .l-header__logo img {
    filter: brightness(0) invert(1) !important;
  }
}