@charset "UTF-8";

/* =========================================
   EVENT ARCHIVE
   breakpoints:
   - PC：1201px〜
   - SP：〜750px
========================================= */

.event-archive{
  width:100%;
}

.event-archive__inner{
  width:min(1160px, 92%);
  margin:0 auto;
  padding:40px 0 90px;
}

/* =========================
   見出し（aboutページの本＋左右線）
========================= */
@font-face{
  font-family:"VivalaboTegaki";
  src:url("../fonts/851tegaki_zatsu_normal_0883.ttf") format("truetype");
  font-display:swap;
  font-weight:400;
  font-style:normal;
}

/* 「本の中央ラベル」 */
.event-archive .top-bookhead .top-bookhead__label.viva-hand{
  font-family:"VivalaboTegaki","Noto Sans JP",sans-serif !important;
  font-weight:400 !important;
}

/* about-page の .top-bookhead を event 側に移植 */
.event-archive .top-bookhead{
  --book-w: min(240px, 56vw);
  --line-y: 66px;

  position: relative;
  width: 100%;
  height: 132px;
  margin: 0 auto 26px;
}

.event-archive .top-bookhead__bookwrap{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--book-w);
}

.event-archive .top-bookhead__book{
  width: 100%;
  height: auto;
  display: block;
}

.event-archive .top-bookhead__label{
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
}

.event-archive .top-bookhead__line{
  position: absolute;
  top: var(--line-y);
  width: calc(50% - (var(--book-w) / 2) - 22px);
  height: auto;
  max-height: 18px;
  display: block;
}

.event-archive .top-bookhead__line:first-of-type{ left: 0; }
.event-archive .top-bookhead__line:last-of-type{ right: 0; }

/* =========================
   セクション余白
========================= */
.event-section{
  margin:0 0 54px;
}

/* =========================
   カレンダー（高さ600固定）
========================= */
.event-calendar{
  width:min(980px, 100%);
  margin:0 auto;
}

.event-calendar iframe{
  width:100% !important;
  height:600px !important; /* ✅ 固定 */
  border:0 !important;
  display:block;
}

.event-calendar__empty{
  background:#f7f7f7;
  border:1px solid #e3e3e3;
  border-radius:12px;
  padding:18px;
  color:#666;
  text-align:center;
}

/* =========================
   イベントカード
========================= */
.event-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:28px;
  align-items:start;
}

.event-card{
  width:100%;
}

.event-card__link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.event-card__thumb{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:10px;
  background:#f2f2f2;
}

.event-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.event-card__thumb-ph{
  width:100%;
  height:100%;
  background:linear-gradient(135deg, #f2f2f2, #e8e8e8);
}

.event-card__badge{
  position:absolute;
  left:8px;
  top:8px;
  z-index:2;
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  background:#f09ab0;
}

.event-card__date{
  display:block;
  font-size:12px;
  color:#666;
  margin:10px 0 6px;
}

.event-card__title{
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  color:#2a2a2a;
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.event-card__terms{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.event-card__term{
  font-size:11px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background:#f6e9b4;
  color:#6a4b00;
}

/* 3色循環（カンプ寄せ） */
.event-card__term:nth-child(1){ background:#f5c9d4; color:#7b2b3d; }
.event-card__term:nth-child(2){ background:#f7d2a6; color:#6a3b12; }
.event-card__term:nth-child(3){ background:#f6e9b4; color:#6a4b00; }

.event-empty{
  color:#666;
  text-align:center;
  margin:0 0 14px;
}

/* =========================
   SP（〜750px）：2*2（4件表示）
========================= */
@media (max-width:750px){
  .event-archive__inner{
    padding:28px 0 70px;
  }

  .event-archive .top-bookhead{
    --book-w: min(200px, 64vw);
    --line-y: 58px;

    height: 116px;
    margin: 0 auto 22px;
  }
  .event-archive .top-bookhead__line{
    max-height: 16px;
  }

  .event-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  .event-card__badge{
    width:34px;
    height:34px;
    font-size:10px;
  }

  .event-card__title{
    font-size:12.5px;
  }

  .event-calendar iframe{
    height:600px !important; /* ✅ SPでも固定 */
  }
}

/* =========================================
  EVENT アーカイブ：本見出し（SPでサイズ統一）
========================================= */
@media (max-width:750px){
  /* 3つの見出しのラベルを同じルールで固定 */
  body.post-type-archive-event .top-bookhead__label.viva-hand{
    font-size:16px !important;   /* ←ここで統一 */
    line-height:1 !important;
    letter-spacing:0.02em !important;
    white-space:nowrap !important;
    transform:translate(-50%, -55%) !important; /* 位置ズレも統一 */
  }

  /* 念のため：親のズレ要因も固定（他CSSに負けない） */
  body.post-type-archive-event .top-bookhead{
    gap:3px !important;
    margin-bottom:18px !important;
  }

  body.post-type-archive-event .top-bookhead__book{
    width:120px !important;
    height:auto !important;
  }
}

/* =========================================
   本見出し：SPで本が左寄りになるのを修正（中央固定）
   対象：/event アーカイブ
========================================= */
@media (max-width:750px){
  body.post-type-archive-event .top-bookhead{
    --book-w: min(200px, 64vw);
    --line-y: 58px;

    position:relative;
    width:100%;
    height:116px;
    margin:0 auto 18px;
    padding-top:0;

    /* ✅ flexを殺して、about方式の中央固定にする */
    display:block !important;
    gap:0 !important;
    justify-content:initial !important;
    align-items:initial !important;
  }

  body.post-type-archive-event .top-bookhead__bookwrap{
    position:absolute !important;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:var(--book-w);
  }

  body.post-type-archive-event .top-bookhead__book{
    width:100% !important;
    height:auto;
    display:block;
  }

  body.post-type-archive-event .top-bookhead__label{
    left:50% !important;
    top:46% !important;
    transform:translate(-50%, -50%) !important;
    white-space:nowrap;
  }

  body.post-type-archive-event .top-bookhead__line{
    position:absolute !important;
    top:var(--line-y);
    width:calc(50% - (var(--book-w) / 2) - 22px);
    height:auto;
    max-height:16px;
    display:block;
  }
  body.post-type-archive-event .top-bookhead__line:first-of-type{ left:0; }
  body.post-type-archive-event .top-bookhead__line:last-of-type{ right:0; }
}

/* =========================================
  EVENT アーカイブ：SP 微調整
  - 本の幅を120px固定で中央
  - 左右の線（svg）を見えるように調整
========================================= */
@media (max-width:750px){
  /* 本のサイズを120px固定（--book-w を上書き） */
  body.post-type-archive-event .top-bookhead{
    --book-w: 140px !important;     /* ✅ ここで120px固定 */
    --line-y: 54px !important;      /* 線の高さ位置（必要なら微調整） */
    height: 110px !important;       /* 本が小さくなるので全体高さも少し詰める */
  }

  /* 左右の線：幅を確保して見えるように */
  body.post-type-archive-event .top-bookhead__line{
    width: calc(50% - (var(--book-w) / 2) - 10px) !important; /* 余白を減らして線を長く */
    max-height: 20px !important;   /* ✅ 16px→20pxにして見えやすく */
    opacity: 1 !important;         /* 念のため */
  }

  /* SVG自体が細すぎる場合に備えて「最低幅」も確保 */
  body.post-type-archive-event .top-bookhead__line:first-of-type{
    min-width: 72px;
  }
  body.post-type-archive-event .top-bookhead__line:last-of-type{
    min-width: 72px;
  }

  /* ラベル位置：本が小さくなるので中央をほんの少し上げる（好みでOK） */
  body.post-type-archive-event .top-bookhead__label{
    top: 45% !important;
  }
}

/* =========================================
  EVENT アーカイブ：SP 本見出し
  テキスト中心と左右線の中心を揃える（線を中央基準に）
========================================= */
@media (max-width:750px){
  body.post-type-archive-event .top-bookhead{
    --line-y: calc(var(--book-w) * 0.27) !important; /* ←線の中心位置（本サイズ連動） */
  }

  /* テキストは中央基準（すでに近いが念のため統一） */
  body.post-type-archive-event .top-bookhead__label{
    top: 46% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* ✅ 線を「中央基準」に変更して、テキスト中心と揃える */
  body.post-type-archive-event .top-bookhead__line{
    top: var(--line-y) !important;             /* ここが“中心位置”になる */
    transform: translateY(-50%) !important;    /* これで線の中心が top に合う */
    max-height: 20px !important;               /* 見えやすさ（必要なら調整） */
  }
}

/* =========================
   archive-event: 開催情報ボックス（カンプ寄せ）
   ※ event.css に追記
========================= */

/* ボックス全体 */
.event-card__schedule{
  border-radius:12px;
  padding:14px 16px;
  text-align:center;
}

/* 行：ラベル＋値を横並びで中央寄せ */
.event-card__schedule-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  line-height:1.2;
}

/* 2行の間に区切り線 */
.event-card__schedule-row + .event-card__schedule-row{
  border-top:1px solid rgba(255,255,255,.75);
  margin-top:10px;
  padding-top:10px;
}

/* ラベル */
.event-card__schedule-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:inherit;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* 値（日付 / 時間） */
.event-card__schedule-value{
  font-size:16px;
  font-weight:800;
  letter-spacing:.02em;
  color:inherit;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* 今後：黄色 */
.event-card__schedule--upcoming{
  background:#E7B62F;
  color:#fff;
}

/* 過去：ピンク */
.event-card__schedule--past{
  background:#F4A9AE;
  color:#fff;
}