/* =========================================================
   Event Archive CSS (scoped & optimized)
   対象: .site-main--ase-event（CPTアーカイブ）
   ========================================================= */

/* 変数 */
.site-main--ase-event{
  --ev-primary: #0B5CAD;
  --ev-gray-100:#F6F8FB;
  --ev-gray-200:#E6EBF0;
  --ev-gray-300:#D1D1D1;
  --ev-text-600:#004097;
  --ev-text-700:#333;
  --ev-container: 1200px;
}

/* ===== 固定ヘッダかぶり対策（全体オフセット） ===== */
body.post-type-archive-ase-event { --ev-sticky-offset: 120px; } /* 必要に応じて調整 */
body.post-type-archive-ase-event .site-main--ase-event{
  padding-top: var(--ev-sticky-offset) !important;
}
body.admin-bar.post-type-archive-ase-event .site-main--ase-event{
  padding-top: calc(var(--ev-sticky-offset) + 32px) !important;
}
@media (max-width: 782px){
  body.admin-bar.post-type-archive-ase-event .site-main--ase-event{
    padding-top: calc(var(--ev-sticky-offset) + 46px) !important;
  }
}

/* -----------------------------
 * 上部ヒーロー（見出し＋パンくず）
 * ----------------------------- */
.site-main--ase-event .ev-archive-hero{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:56px 0 80px;
}
.site-main--ase-event .ev-container{
  max-width:var(--ev-container); margin:0 auto; padding:0 20px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.site-main--ase-event .ev-archive-hero__title{
  font-size:40px; line-height:1.2; font-weight:700; color:var(--ev-text-700); margin:0;
}
.site-main--ase-event .ev-archive-hero__crumbs{ font-size:14px; color:#667085; }
.site-main--ase-event .ev-archive-hero__crumbs a{ color:var(--ev-primary); text-decoration:underline; }
.site-main--ase-event .ev-archive-hero__crumbs a:hover{ text-decoration:underline; }
.site-main--ase-event .ev-bc-navxt span,
.site-main--ase-event .ev-bc-yoast,
.site-main--ase-event .ev-bc-rm,
.site-main--ase-event .ev-bc-fallback{ white-space:nowrap; }
.site-main--ase-event .ev-bc-navxt .current-item{ color:var(--ev-text-700); }
.site-main--ase-event .ev-bc-sep{ margin:0 .5em; color:#c0c4c9; }

@media (max-width: 767px){
  .site-main--ase-event .ev-container{ flex-direction:column; align-items:flex-start; gap:12px; }
  .site-main--ase-event .ev-archive-hero__title{ font-size:28px; }
}

/* -----------------------------
 * 月ナビ（左）＋ 年ナビ（右ピル）
 * ----------------------------- */
.site-main--ase-event .evheadbar{ margin:0; }
.site-main--ase-event .evheadbar__inner{
  max-width:var(--ev-container); margin:0 auto; padding:120px 20px 50px;
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:24px;
}

/* ===== Month nav（Splide） ===== */
.site-main--ase-event .evmonths{
  position: relative;
  min-height: 80px;
  padding: 0 60px; /* 下のカテゴリと左右を揃える */
  max-width: 700px;
}
.site-main--ase-event .evmonths .splide__track{ overflow:visible; }
.site-main--ase-event .evmonths .splide__list{
  height: 80px; display:flex; align-items:center;
}

/* ボタン本体：32px丸 + 中央配置 */
.site-main--ase-event .evmonths .splide__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--ev-gray-300);
  z-index:5;
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}
/* 左右位置（カテゴリと同じ 20px インセット） */
.site-main--ase-event .evmonths .splide__arrow--prev{ left:20px; }
.site-main--ase-event .evmonths .splide__arrow--next{ right:20px; }

/* 旧アイコンは無効化 */
.site-main--ase-event .evmonths .splide__arrow svg,
.site-main--ase-event .evmonths .splide__arrow::before{ display:none; content:none; }

/* シェブロン（＞）を2本の線で描画。prev は全体反転で「＜」に */
.site-main--ase-event .evmonths .splide__arrow::after{
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:6px; background:currentColor; border-radius:0;
  transform-origin:right center; box-shadow:
    /* 2本目の線を複製：同位置で角度だけ変える（＼ と ／） */
    0 0 0 0 currentColor;
  /* 1本目（＼） */
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-main--ase-event .evmonths .splide__arrow{
  /* 2本目（ ／ ）は疑似要素をもう一つ重ねる */
}
.site-main--ase-event .evmonths .splide__arrow::before{
  content:""; position:absolute; left:50%; top:50%;
  width:20px; height:6px; background:currentColor; border-radius:0;
  transform-origin:right center; transform: translate(-50%, -50%) rotate(-45deg);
}
.site-main--ase-event .evmonths .splide__arrow--prev{
  transform: translateY(-50%) ;  /* 水平反転で「＜」に */
}

/* 月セル（80×80） */
.site-main--ase-event .evmonths__chip{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:50px; height:80px; padding:0; text-decoration:none; color:#111;
}
.site-main--ase-event .evmonths__y{ font-size:13px; font-weight:500; color:#333333; line-height:1; margin-bottom:6px; }
.site-main--ase-event .evmonths__m{ font-size:18px; font-weight:500; line-height:1; }
.site-main--ase-event .evmonths__chip.is-active{ color:var(--ev-primary); }
.site-main--ase-event .evmonths__chip.is-active::after{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--ev-primary);
}
/* セパレーター（2つ目以降の左に薄い縦線） */
.site-main--ase-event .evmonths .splide__slide + .splide__slide .evmonths__chip::before{
  content:""; position:absolute; left:-10px; top:14px; bottom:14px; width:1px;
  background:var(--ev-gray-200);
}
/* 1枚目だけ30px右に押して矢印と干渉回避 */
.site-main--ase-event .evmonths .splide__slide:first-child{ margin-left:30px; }

/* -----------------------------
 * 年ナビ（右の青ピル）
 * ----------------------------- */
.site-main--ase-event .evyear{ position:relative; }
.site-main--ase-event .evyear__summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:12px 25px; background:var(--ev-primary); color:#fff; border-radius:50px;
  box-shadow:0 2px 8px rgba(11,92,173,.25);
}
.site-main--ase-event .evyear__summary::-webkit-details-marker{ display:none; }
.site-main--ase-event .evyear__label{ font-weight:500; }

/* アイコン：閉=＋ / 開=－（白丸アイコン） */
.site-main--ase-event .evyear__icon{
  width:22px; height:22px; border-radius:50%; background:#fff; position:relative;
}
.site-main--ase-event .evyear__icon::before{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:2px;
  transform:translate(-50%,-50%); background:#0B5CAD;
}
.site-main--ase-event .evyear:not([open]) .evyear__icon::after{
  content:""; position:absolute; left:50%; top:50%; width:2px; height:10px;
  transform:translate(-50%,-50%); background:#0B5CAD;
}

/* 開いた時は summary を内包する “大きな青ピル” に */
.site-main--ase-event .evyear[open] .evyear__panel{
  position:absolute; right:0; top:0; transform:translateY(-10px);
  background:#0B5CAD; color:#fff; border:0; border-radius:24px;
  width:250px; padding:60px 14px 16px; box-shadow:0 12px 28px rgba(11,92,173,.35); z-index:20;
}
.site-main--ase-event .evyear[open] .evyear__summary{
  position:absolute; top:8px; left:10px; right:10px;
  background:transparent; color:#fff; padding:0; box-shadow:none;
  display:flex; align-items:center; justify-content:space-between;
}

/* 年リスト */
.site-main--ase-event .evyear__list{ list-style:none; margin:0; padding:0; }
.site-main--ase-event .evyear__list a{
  display:block; padding:12px 10px; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.site-main--ase-event .evyear__list li:last-child a{ border-bottom:0; }
.site-main--ase-event .evyear__list a:hover{ background:rgba(255,255,255,.08); }
.site-main--ase-event .evyear__latest a{ font-weight:500; }

@media (max-width: 767px){
  .site-main--ase-event .evheadbar__inner{ grid-template-columns:1fr; gap:12px; }
  .site-main--ase-event .evyear{ justify-self:end; }
}

/* -----------------------------
 * カテゴリ フィルタバー（上部）
 * ----------------------------- */
.site-main--ase-event .evflt{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:18px auto 22px;
  max-width:var(--ev-container); padding:0 20px;
}
.site-main--ase-event .evflt__chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:4px; border:1px solid var(--ev-text-600);
  background:#fff; color:var(--ev-primary); font-size:14px; text-decoration:none;
}
.site-main--ase-event .evflt__chip.is-active{
  background:var(--ev-primary); color:#fff; border-color:var(--ev-primary);
}

/* =========================================================
   一覧（行レイアウト）画像｜本文｜右CTA
   ========================================================= */
.site-main--ase-event .evlist--rows{
  display:block; max-width:var(--ev-container); margin:0 auto; padding:0 20px;
}
.site-main--ase-event .evrow{
  display:grid;
  grid-template-columns: 320px 1fr 240px; gap:20px;
  align-items:start;
  border:1px solid var(--ev-gray-200);
  border-radius:0;
  padding:20px;
  margin:0;
  min-height:300px;
}

/* 左：画像（枠線あり） */
.site-main--ase-event .evrow__thumb{
  display:block; border-radius:0; overflow:hidden;
  border:1px solid #E6E6E6; background:#f6f6f6;
}
.site-main--ase-event .evrow__thumb img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block;
}

/* 中央：本文（上寄せ） */
.site-main--ase-event .evrow__date{ font-size:16px; color:#333333; margin:0 0 10px; }
.site-main--ase-event .evrow__title{
  font-size:22px; line-height:1.45; margin:0 0 12px; font-weight:500; color:#333333;
}
.site-main--ase-event .evrow__title a{ color:inherit; text-decoration:none; }
.site-main--ase-event .evrow__title a:hover{ text-decoration:underline; }

/* カテゴリチップ */
.site-main--ase-event .evrow__cats{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.site-main--ase-event .evchip{
  display:inline-flex; align-items:center; padding:6px 12px;
  font-size:13px; line-height:1; border:1px solid var(--ev-primary);
  color:var(--ev-primary); background:#fff; border-radius:4px;
}
.site-main--ase-event .evchip--muted{
  border-color:#333333; color:var(--ev-text-600); background:#FFFFFF;
  padding:4px 10px; font-size:12px;border-radius:50px;
}

/* 会場行 */
.site-main--ase-event .evrow__place{
  display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ev-text-600);
}

/* 右：CTA（右下寄せ） */
.site-main--ase-event .evrow__cta-col{
  display:flex; justify-content:flex-end; align-self:end;
}
.site-main--ase-event .evrow__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; min-width:210px; height:44px;
  border-radius:9999px; background:var(--ev-primary); color:#fff;
  font-weight:500; text-decoration:none; position:relative;
}
.site-main--ase-event .evrow__cta::after{
  content:""; width:18px; height:18px;
  background:url('/wp-content/uploads/2025/08/out-blank-icon.svg') no-repeat center/18px 18px;
  display:inline-block;
}
.site-main--ase-event .evrow__cta:hover{ filter:brightness(1.05); }
.site-main--ase-event .evrow__cta:focus-visible{ outline:2px solid var(--ev-primary); outline-offset:2px; }

@media (max-width: 1023px){
  .site-main--ase-event .evrow{ grid-template-columns:1fr; gap:16px; }
  .site-main--ase-event .evrow__cta-col{ align-self:auto; justify-content:flex-start; }
}

/* =========================================================
   Debug helper（反映確認用）
   ========================================================= */
body.post-type-archive-ase-event.ev-debug-outline{ outline:6px solid #f0c !important; }


/* ===== Month nav arrows — reset & chevron SVG (final) ===== */
.site-main--ase-event .evmonths .splide__arrows{ display:block !important; }



/* 競合していた古い矢印を完全に無効化 */
.site-main--ase-event .evmonths .splide__arrow svg,
.site-main--ase-event .evmonths .splide__arrow::before,
.site-main--ase-event .evmonths .splide__arrow::after{
  display:none !important; content:none !important;
  border:0 !important; background:none !important; box-shadow:none !important;
}

/* 右矢印（＞） */
.site-main--ase-event .evmonths .splide__arrow--next{
  right:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5CAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* 左矢印（＜） */
.site-main--ase-event .evmonths .splide__arrow--prev{
  left:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5CAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* 矢印と芯が重ならないよう先頭の月だけ少し右へ */
.site-main--ase-event .evmonths .splide__slide:first-child{ margin-left:40px; }


/* Splide が無効化した矢印はクリック不可＆薄く表示 */
.site-main--ase-event .evmonths .splide__arrow[disabled]{
  opacity:.35 !important;
  pointer-events:none !important;
}

/* ==== FIX: 月ナビは8件ぶんの「表示窓」に収める ==== */

/* 左カラムが広がって右の年ピルを押し出さないように */
.site-main--ase-event .evheadbar__inner{
  grid-template-columns: minmax(0,1fr) auto; /* ← 重要：左を縮められる列に */
}

/* トラックは必ず隠す（全件がはみ出して見えないように） */
.site-main--ase-event .evmonths .splide__track{
  overflow: hidden !important;
  margin: 0; padding: 0;
}

/* Splide内部の list はデフォを壊さない。高さだけ指定 */
.site-main--ase-event .evmonths .splide__list{
  height: 80px;              /* 表示窓の高さ合わせ */
}

/* スライド自体は縦センター揃え。幅計算はSplideに任せる */
.site-main--ase-event .evmonths .splide__slide{
  height: 80px;
  display: flex; align-items: center; justify-content: center;
}

/* 以前の“1枚目だけ余白”を無効化（矢印余白はJSのpaddingで付与） */
.site-main--ase-event .evmonths .splide__slide:first-child{
  margin-left: 0 !important;
}



/* 1) トラックに頭の余白 = 12px を作る（はみ出しを収める箱） */
.site-main--ase-event .evmonths .splide__track{
  overflow: hidden !important;   /* ← ここは必ず hidden のまま */
  padding-top: 12px;             /* ドットが乗る“天井裏”を作る */
}
/* 2) 見た目の位置は変えないように、リストを12pxぶん引き上げる */
.site-main--ase-event .evmonths .splide__list{
  margin-top: -12px;
}

/* 3) アクティブ月の青ドットを再表示（チップの“外上”に出す） */
.site-main--ase-event .evmonths__chip{ position: relative; }
.site-main--ase-event .evmonths__chip.is-active::after{
  content: ""; position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ev-primary, #0B5CAD);
  /* 背景が暗い画像でも見えるように白縁を足すなら次をON */
  /* box-shadow: 0 0 0 2px #fff; */
}


/* ==== Mobile: 年アーカイブを月ナビの下に配置 ==== */
@media (max-width: 767px){
  /* 1列レイアウトにして並び順を制御 */
  .site-main--ase-event .evheadbar__inner{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }

  /* 並び順：月ナビ→年アーカイブ */
  .site-main--ase-event #evmonths{ order: 1; }
  .site-main--ase-event .evyear{
    order: 2;
    margin-top: 8px;
  }

  /* 月ナビの横幅は画面幅にフィット（はみ出し防止） */
  .site-main--ase-event .evmonths{ max-width: 400px; }

  /* 年アーカイブを“下に開くドロップダウン”に変更（重なり/はみ出し回避） */
  .site-main--ase-event .evyear[open] .evyear__panel{
    position: static;      /* ← absolute をやめる */
    transform: none;
    right: auto; top: auto;
    width: 100%;
    margin-top: 8px;
    border-radius: 12px;
    /* 背景を青ピルのままにしたい場合はこのまま、
       白系にしたい場合は background:#fff; color:#0B5CAD; に変更 */
  }
}



/* =========================
   PC: 年アーカイブを「下に開くドロップダウン（オーバーレイ）」に
   ========================= */
@media (min-width: 768px){
  /* レイヤ順を明確化（下の一覧より手前に） */
  .site-main--ase-event .evheadbar{ position: relative; z-index: 5; }
  .site-main--ase-event .evyear{ position: relative; z-index: 20; }

  /* 旧スタイルの“青ピルでsummaryを内包”をリセット */
  .site-main--ase-event .evyear[open] .evyear__summary{
    position: static !important;
    background: var(--ev-primary) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 8px rgba(11,92,173,.25) !important;
  }

  /* ドロップダウン本体：summaryの下に重ねる（下の内容は押し出さない） */
  .site-main--ase-event .evyear__panel{
    position: absolute !important;
    top: calc(100% + 8px) !important;  /* summary の直下 */
    right: 0 !important;
    left: auto !important;
    width: 260px;                       /* お好みで 220–300px 程度に */
    background: #fff;
    color: #0B5CAD;
    border: 1px solid #E1E5EA;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    z-index: 30;

    /* 開閉アニメ（閉時は非表示） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease,
                visibility 0s linear .18s;
  }
  .site-main--ase-event .evyear[open] .evyear__panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
  }

  /* ドロップダウンの三角キャレット（白） */
  .site-main--ase-event .evyear[open] .evyear__panel::before{
    content: "";
    position: absolute;
    top: -8px; right: 28px;            /* 右寄りに配置。必要なら微調整 */
    border: 8px solid transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 0 #E1E5EA);
  }

  /* 内部リンクの見た目（白地ドロップダウンに合わせて） */
  .site-main--ase-event .evyear__list a{
    color: #FFFFFF;
    border-bottom: 1px solid #F0F2F5;
  }
  .site-main--ase-event .evyear__list li:last-child a{ border-bottom: 0; }
  .site-main--ase-event .evyear__list a:hover{ background:rgba(255,255,255,.12); }
}