@charset "UTF-8";
/* event_body.zip のカード一覧デザイン。
   元CSSの * / body などグローバル指定は .event-list-body 配下にスコープ化。 */

:root{
  --pink: #ff6fa2;
  --pink-light: #ffdbe8;
  --pink-pale: #ffd6e4;
  --text-dark:#333333;
  --text-gray:#8a8a8a;
  --border-gray:#dcdcdc;
}
.event-list-body, .event-list-body *{ box-sizing: border-box; }
.event-list-body{
  margin:0;
  padding:40px 0;
  background:#ffffff;
  font-family: "BIZ UDGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  color:var(--text-dark);
}
.event-list-body{
  max-width:1000px;
  width:100%;
  margin:0 auto;
}

/* ---------- 検索エリア ---------- */
.event-list-body .search-section{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.event-list-body .search-left{ width:600px; max-width:100%; flex:1 1 600px; }
.event-list-body .search-right{ width:328px; max-width:100%; flex:1 1 280px; }

.event-list-body .field-label{
  font-size:calc(16px * var(--fz, 1));
  font-weight:700;
  margin:0 0 12px 0;
}
.event-list-body .field-group{ margin-bottom:24px; }

.event-list-body .date-range{ display:flex; align-items:center; gap:10px; }
.event-list-body .date-input{
  position:relative;
  flex:1;
  height:52px;
  border:1px solid var(--border-gray);
  border-radius:6px;
  display:flex;
  align-items:center;
  padding:0 14px;
}
.event-list-body .date-input input{
  border:none;
  outline:none;
  width:100%;
  font-size:calc(16px * var(--fz, 1));
  color:#333333;
  font-family:inherit;
  background:transparent;
}
/* ネイティブのカレンダーアイコンを生かし、独自アイコンは非表示 */
.event-list-body .date-input img{ display:none; }
.event-list-body .tilde{ color:#b3b3b3; font-size:calc(16px * var(--fz, 1)); }

/* Chrome: 「年」前後などフィールド間の余分な余白を詰める */
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit{ padding:0; }
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit-fields-wrapper{ padding:0; }
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit-text{ padding:0 1px; }
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit-year-field,
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit-month-field,
.event-list-body .date-input input[type="date"]::-webkit-datetime-edit-day-field{ padding:0; }

.event-list-body .keyword-input{
  width:100%;
  height:52px;
  border:1px solid var(--border-gray);
  border-radius:6px;
  padding:0 18px;
  font-size:calc(16px * var(--fz, 1));
  color:#333333;
  font-family:inherit;
  outline:none;
}
.event-list-body .keyword-input::placeholder{ color:#b3b3b3; }

.event-list-body .search-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:330px;
  height:54px;
  margin:30px auto 0;
  background:var(--pink);
  border:none;
  border-radius:30px;
  color:#fff;
  font-weight:700;
  font-size:calc(20px * var(--fz, 1));
  font-family:inherit;
  cursor:pointer;
}
.event-list-body .search-btn img{ width:27px; height:27px; }

.event-list-body .genre-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.event-list-body .genre-grid img{
  width:100%;
  height:auto;
  max-width:111px;
  aspect-ratio:1/1;
  display:block;
  margin:0 auto;
}
.event-list-body .genre-btn{
  display:block;
  width:100%;
  text-decoration:none;
}

/* ---------- MAPボタン ---------- */
.event-list-body .map-btn-wrap{
  text-align:center;
  margin:55px 0 195px;
}
.event-list-body .map-content{ display:none; }
.event-list-body .map-content.show{ display:block; }
.event-list-body .map-image-wrap{
  width:100%;
  max-width:1000px;
  height:400px;
  margin:24px auto 0;
  background:#eeeeee;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999999;
  font-size:calc(18px * var(--fz, 1));
}
.event-list-body .map-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.event-list-body .map-genre-wrap{
  width:100%;
  max-width:1000px;
  margin:30px auto 0;
  text-align:center;
}
.event-list-body .map-note{
  text-align:center;
  font-size:calc(14px * var(--fz, 1));
  color:#666666;
  margin:16px 0 0;
}
.event-list-body .map-usage{
  max-width:1000px;
  margin:4px auto 0;
  font-size:calc(12px * var(--fz, 1));
  line-height:1.6;
  color:#444444;
  text-align:left;
  white-space:nowrap;
}
.event-list-body .map-usage strong{ font-weight:700; color:#040000; }
.event-list-body .genre-grid.genre-grid-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.event-list-body .genre-grid-row .genre-btn{ width:auto; }
.event-list-body .map-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:#fff;
  border:2px solid var(--pink);
  color:var(--pink);
  font-weight:700;
  font-size:calc(20px * var(--fz, 1));
  font-family:inherit;
  padding:14px 30px;
  border-radius:30px;
  cursor:pointer;
}
.event-list-body .map-btn .plus-circle{
  width:26px;
  height:26px;
  flex-shrink:0;
  margin-left:auto;
}

/* ---------- 件数バナー ---------- */
.event-list-body .result-banner{
  background:var(--pink);
  color:#fff;
  text-align:center;
  padding:22px 0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  font-size:calc(20px * var(--fz, 1));
  font-weight:400;
}
.event-list-body .result-banner strong{
  font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size:calc(34px * var(--fz, 1));
  font-weight:700;
  margin:0 6px;
  vertical-align:baseline;
}

/* ---------- カードセクション ---------- */
.event-list-body .card-section{
  background:var(--pink-light);
  padding:32px 0 40px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.event-list-body .card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  max-width:1000px;
  margin:0 auto;
}
.event-list-body .event-card{
  position:relative;
  display:block;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  min-height:330px;   /* 文字サイズ拡大時は内容に応じて高さが伸びる */
  transition:transform .2s ease, box-shadow .2s ease;
}
.event-list-body .event-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.event-list-body .event-card .card-thumb img{
  transition:transform .3s ease;
}
.event-list-body .event-card:hover .card-thumb img{
  transform:scale(1.05);
}
.event-list-body .card-thumb{
  position:relative;
  line-height:0;
  padding-top:15px;
}
.event-list-body .card-thumb img{
  width:200px;
  height:133px;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.event-list-body .event-card.is-ended{
  background:#d9d9d9;
}
.event-list-body .event-ended-badge{
  position:absolute;
  top:0;
  right:17px;
  width:30px;
  height:auto;
  z-index:1;
}
.event-list-body .card-thumb.no-image img{
  object-fit:contain;
  border:1px solid #d8d8d8;
  box-sizing:border-box;
  background:#fff;
}
.event-list-body .badge{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%, 50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:22px;
  border-radius:20px;
  color:#fff;
  font-size:calc(14px * var(--fz, 1));
  font-weight:700;
  letter-spacing:.05em;
  white-space:nowrap;
}
.event-list-body .badge.music{ background:#fc0000; }
.event-list-body .badge.play{ background:#f3901e; }
.event-list-body .badge.geinou{ background:#754c24; }
.event-list-body .badge.dance{ background:#39b24a; }
.event-list-body .badge.art{ background:#fc7ba9; }
.event-list-body .badge.other{ background:#0571b9; }
.event-list-body .badge.shusai{ background:#ec2b46; }

.event-list-body .card-body{ padding:28px 0 18px; }
.event-list-body .card-date{
  text-align:center;
  font-size:calc(12px * var(--fz, 1));
  font-weight:400;
  color:#000000;
}
.event-list-body .card-time{
  text-align:center;
  font-size:calc(14px * var(--fz, 1));
  color:#000000;
  margin-top:4px;
}
.event-list-body .card-divider{
  border:none;
  border-top:1px solid #000000;
  margin:12px 0;
}
.event-list-body .card-title{
  font-size:calc(16px * var(--fz, 1));
  line-height:23px;
  color:var(--text-dark);
  margin:0;
  text-align:justify;
}
/* PC:30字表示 / SP:18字表示 の切替 */
.event-list-body .card-title .ct-sp{ display:none; }
.event-list-body .card-title .ct-pc{ display:inline; }
.event-list-body .card-free{
  font-size:calc(12px * var(--fz, 1));
  color:var(--text-gray);
  margin:8px 0 0;
}
/* 日付だけカード全幅、それ以外(時間・罫線・タイトル・無料)は写真幅(200px)中央 */
.event-list-body .card-time{ width:200px; max-width:100%; margin:4px auto 0; }
.event-list-body .card-divider{ width:200px; max-width:100%; margin:12px auto; }
.event-list-body .card-title{ width:200px; max-width:100%; margin:0 auto; }
.event-list-body .card-free{ width:200px; max-width:100%; margin:8px auto 0; }

/* ---------- ページネーション ---------- */
.event-list-body .pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:36px 0;
}
.event-list-body .pagination a{ text-decoration:none; }
.event-list-body .pagination .page{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pink-pale);
  color:#fff;
  font-size:calc(15px * var(--fz, 1));
  font-weight:400;
}
.event-list-body .pagination .page.active{ background:var(--pink); }
.event-list-body .pagination .next{
  margin-left:14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:calc(16px * var(--fz, 1));
  color:var(--text-dark);
}
.event-list-body .pagination .next img{ width:9px; height:auto; }
.event-list-body .pagination .prev{
  margin-right:14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:calc(16px * var(--fz, 1));
  color:var(--text-dark);
}
.event-list-body .pagination .prev img{ width:9px; height:auto; }

/* ---------- フッターボタン ---------- */
.event-list-body .footer-btn-wrap{
  text-align:center;
  margin:50px 0 20px;
}
.event-list-body .footer-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:2px solid var(--pink);
  color:var(--pink);
  font-weight:700;
  font-size:calc(20px * var(--fz, 1));
  font-family:inherit;
  padding:16px 34px;
  border-radius:30px;
  cursor:pointer;
}
.event-list-body .footer-btn img{ width:11px; height:auto; }

/* ---------- ボタン hover ---------- */
.event-list-body .search-btn,
.event-list-body .genre-btn,
.event-list-body .map-btn,
.event-list-body .footer-btn,
.event-list-body .pagination .page,
.event-list-body .pagination .prev,
.event-list-body .pagination .next{
  transition:background-color .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.event-list-body .search-btn:hover{ background:#ff5c95; box-shadow:0 4px 12px rgba(255,92,149,.35); }
.event-list-body .genre-btn:hover{ opacity:.75; }
.event-list-body .map-btn:hover{ background:#fff1f6; color:var(--pink); }
.event-list-body .footer-btn:hover{ background:var(--pink); color:#fff; }
.event-list-body .footer-btn:hover img{ filter:brightness(0) invert(1); }
.event-list-body .pagination .page:not(.active):hover{ background:var(--pink); }
.event-list-body .pagination .prev:hover,
.event-list-body .pagination .next:hover{ opacity:.6; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1040px){
  .event-list-body{ padding:0 24px; }
  .event-list-body .card-section{ padding:32px 24px 40px; }
  .event-list-body .card-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; }
}

@media (max-width: 860px){
  .event-list-body .search-section{ gap:32px; }
  .event-list-body .search-left,.event-list-body .search-right{ flex-basis:100%; }
}

@media (max-width: 700px){
  .event-list-body .map-usage{ white-space:normal; }   /* SPは折り返して表示 */
  .event-list-body .card-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .event-list-body .event-card{ display:flex; align-items:stretch; width:100%; height:auto; min-height:150px; }
  .event-list-body .card-thumb{ position:static; flex-shrink:0; width:130px; height:130px; margin:10px; padding-top:0; }
  .event-list-body .card-thumb img{ width:130px; height:130px; object-fit:cover; margin:0; border-radius:0; }
  .event-list-body .badge{ position:absolute; left:auto; bottom:auto; top:10px; right:10px; transform:none; }
  .event-list-body .card-body{ flex:1; min-width:0; padding:10px 12px 14px; }
  .event-list-body .card-date,.event-list-body .card-time{ text-align:left; line-height:16px; margin:0; padding-right:90px; }
  .event-list-body .card-time{ margin-top:4px; }
  .event-list-body .card-divider{ display:none; }
  .event-list-body .card-title{ font-size:calc(15px * var(--fz, 1)); font-weight:700; margin-top:10px; }
  .event-list-body .card-title .ct-pc{ display:none; }
  .event-list-body .card-title .ct-sp{ display:inline; }
  .event-list-body .search-right .genre-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; }
  .event-list-body .search-right .genre-grid img{ width:100%; height:auto; aspect-ratio:1/1; }
  .event-list-body .genre-grid.genre-grid-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  .event-list-body .genre-grid-row .genre-btn{ width:100%; }
  .event-list-body .genre-grid-row img{ width:100%; height:auto; aspect-ratio:1/1; }
  .event-list-body .map-btn{ font-size:calc(18px * var(--fz, 1)); padding:12px 24px; }
  .event-list-body .footer-btn{ font-size:calc(18px * var(--fz, 1)); padding:14px 26px; }
}

@media (max-width: 480px){
  .event-list-body{ padding:24px 0; }
  .event-list-body{ padding:0 16px; }
  .event-list-body .card-section{ padding:24px 16px 32px; }
  .event-list-body .card-grid{ grid-template-columns:repeat(1, 1fr); gap:14px; }
  .event-list-body .search-right .genre-grid img{ width:100%; height:auto; aspect-ratio:1/1; }
  .event-list-body .genre-grid-row{ grid-template-columns:repeat(3, 1fr); gap:10px; }
  .event-list-body .map-btn-wrap{ margin:40px 0 60px; }
  .event-list-body .map-btn{ width:100%; }
  .event-list-body .footer-btn{ width:100%; justify-content:center; }
  .event-list-body .result-banner{ font-size:calc(16px * var(--fz, 1)); padding:18px 16px; }
  .event-list-body .result-banner strong{ font-size:calc(26px * var(--fz, 1)); }
  .event-list-body .pagination{ flex-wrap:wrap; gap:8px 4px; }
}