@charset "UTF-8";
.eventInfo .h3 {
  background-color: hsla(38, 100%, 56%, 0.679);
  border-radius: 10px;
}
.eventInfo .infoItem01,
.eventInfo .infoItem02,
.eventInfo .infoItem03,
.eventInfo .infoItem04,
.eventInfo .infoItem05,
.eventInfo .infoItem06 {
  position: relative;
}
.eventInfo {
  /* grid1 */
}
.eventInfo .infoItem01 .dateText .dateWord3-1 .dateWord3-3::after {
  background-color: hsla(206, 75.2808988764%, 55.5%, 0.679);
}
.eventInfo {
  /* grid2 */
}
.eventInfo .recWord th {
  color: rgb(255, 255, 255);
  background-color: #5271ff;
}
.eventInfo .recWord .tdOn {
  background-color: #94c7df;
  color: rgb(255, 255, 255);
}
.eventInfo .recWord .tdOff {
  background-color: #bae3f5;
  opacity: 0.5;
}
.eventInfo .infoItem03 .subjectText P {
  padding: 10px 0 0 60px;
  background: url(../../images/common-event/checkicon.png) no-repeat left center/15%;
  font-size: 28px;
}
.eventInfo .infoItem04 {
  background-color: #71b7d7;
}

/* #01.scss → #02.scss に関係するSP(572px以下)の差分だけ */
@media screen and (max-width: 572px) {
  .main .eventInfo .infoItem03 .subjectText {
    margin: 6% auto;
  }
  .main .eventInfo .infoItem03 .subjectText h4 {
    margin: 20px 0;
    padding: 10px 0 0 20px;
    font-size: 20px;
  }
  .main .eventInfo .infoItem03 .subjectText P {
    padding: 10px 0 0 40px;
    font-size: 16px;
  }
  .main .eventInfo {
    /* #02.scss: .infoItem04 &::before に関係 */
  }
  .main .eventInfo .infoItem04::before {
    top: -70px;
    border-bottom: 40px;
  }
}
/* =========================================================
   会場切り替え（西条 / 河内 / 安芸津）── 今回の追加分
   ・JSは使わず、ラジオボタンの :checked と兄弟セレクタ（~）だけで切り替えています
   ・.eventInfo のグリッドには一切手を入れていません
   ・切り替わるのは .venueText（日時・申込締切・場所）のテキストだけです
   ・幅は .eventInfo（common / responsive）と同じ 70% → 80% → 90% → 100% に合わせています
   ========================================================= */
/* 切り替え用ラジオボタン。画面には出しませんが、キーボード操作できるよう
   display:none ではなくスクリーンリーダー用の隠し方にしています */
.venueRadio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

.venueTabs {
  max-width: 70%;
  margin: 0 auto 40px auto;
}

.venueTabList {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 4px solid hsl(38, 100%, 56%);
}
.venueTabList > li {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.venueTabBtn {
  display: block;
  width: 100%;
  padding: 14px 8px;
  border: 2px solid hsl(38, 100%, 56%);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background-color: #ffffff;
  color: hsl(38, 90%, 40%);
  font-family: "Kosugi Maru", sans-serif;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.venueTabBtn:hover {
  background-color: hsl(38, 100%, 93%);
}

/* 会場ごとに切り替わるテキスト。既定は非表示 */
.venueText {
  display: none;
}

/* 選択中の会場のテキストだけ表示 */
#venueSaijo:checked ~ .eventInfo .venueText[data-venue=saijo],
#venuekouchi:checked ~ .eventInfo .venueText[data-venue=kouchi],
#venueAkitsu:checked ~ .eventInfo .venueText[data-venue=akitsu] {
  display: block;
}

/* 選択中のタブの見た目 */
#venueSaijo:checked ~ .venueTabs .venueTabBtn[for=venueSaijo],
#venuekouchi:checked ~ .venueTabs .venueTabBtn[for=venuekouchi],
#venueAkitsu:checked ~ .venueTabs .venueTabBtn[for=venueAkitsu] {
  background-color: hsl(38, 100%, 56%);
  color: #ffffff;
}

/* キーボード操作（Tabで移動 → ←→キーで会場切り替え）時のフォーカス表示 */
#venueSaijo:focus-visible ~ .venueTabs .venueTabBtn[for=venueSaijo],
#venuekouchi:focus-visible ~ .venueTabs .venueTabBtn[for=venuekouchi],
#venueAkitsu:focus-visible ~ .venueTabs .venueTabBtn[for=venueAkitsu] {
  outline: 3px solid #5271ff;
  outline-offset: 2px;
}

/* チラシPDF／noteリンクの切り替え
   .btnText は event-common.css で display:flex なので、
   表示側も block ではなく flex に戻しています */
.venueBtn {
  display: none;
}

#venueSaijo:checked ~ .venueBtn[data-venue=saijo],
#venuekouchi:checked ~ .venueBtn[data-venue=kouchi],
#venueAkitsu:checked ~ .venueBtn[data-venue=akitsu] {
  display: flex;
}

/* アイコンの大きさ調整用。
   PDFアイコンは共通の .btnTextImg（5%）のまま。
   note など縦横比の違う画像を使うときは、img に iconNote を付けてここで調整してください */
.btnText .btnTextImg.iconNote {
  width: 4%;
}

/* 会場切り替えタブ：レスポンシブ（responsive.scss のブレイクポイントに合わせています） */
@media screen and (max-width: 1300px) {
  .venueTabs {
    max-width: 80%;
  }
  .venueTabBtn {
    font-size: 22px;
  }
}
@media screen and (max-width: 980px) {
  .venueTabs {
    max-width: 90%;
    margin-bottom: 30px;
  }
  .venueTabBtn {
    padding: 12px 6px;
    font-size: 18px;
  }
}
@media screen and (max-width: 572px) {
  .venueTabs {
    max-width: 100%;
    margin-bottom: 25px;
  }
  .venueTabList {
    gap: 5px;
    border-bottom-width: 3px;
  }
  .venueTabBtn {
    padding: 10px 2px;
    border-width: 1px;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    letter-spacing: 0;
  }
  .btnText .btnTextImg.iconNote {
    width: 12%;
  }
}/*# sourceMappingURL=event.css.map */