/* ===========================================================
   発売日カレンダー  —  WordPress テーマ組込用スタイル
   .relcal- プレフィックスでテーマ側CSSと干渉しにくくしています
   =========================================================== */
:root{
  --rc-ink:#1d1830;
  --rc-bg:#ffffff;
  --rc-surface:#f7f4ff;
  --rc-surface-2:#efe9fb;
  --rc-line:#e7e1f4;
  --rc-accent:#6d28d9;
  --rc-accent-soft:#ede5ff;
  --rc-filter:#e11d48;
  --rc-filter-soft:#fde4ea;
  --rc-filter-bg:#fdf2f4;
  --rc-filter-line:#f6d3da;
  --rc-pink:#e23b8a;
  --rc-muted:#6f6a83;
  --rc-radius:14px;
  --rc-shadow:0 6px 22px rgba(50,30,90,.10);
  --rc-shadow-lg:0 24px 60px rgba(40,20,80,.28);
}

.relcal *{box-sizing:border-box;}
/* WordPress対策：自動挿入される空段落や<br>、テーマ余白を無効化 */
.relcal p:empty{display:none;}
.relcal br{display:none;}
.relcal .relcal-card>*{margin-top:0;margin-bottom:0;}
.relcal{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--rc-ink);
  max-width:1080px;
  margin:0 auto;
  padding:6px 12px 32px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* ---------- 絞り込みパネル ---------- */
.relcal-filters{margin:8px 0 28px;}

/* 発売月＝このカレンダーの主役。最上部に大きく目立たせる */
.relcal-monthbar{margin-bottom:14px;}
.relcal-monthbar-label{
  display:block;font-size:15px;font-weight:900;letter-spacing:.02em;
  color:var(--rc-ink);margin:0 0 10px;
  padding-left:12px;border-left:6px solid var(--rc-filter);
}
.relcal-monthbtns{display:flex;flex-wrap:wrap;gap:10px;}
.relcal-mbtn{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:800;line-height:1.2;
  color:var(--rc-ink);background:var(--rc-bg);
  border:2px solid var(--rc-filter-line);border-radius:12px;
  padding:12px 22px;
  transition:transform .08s ease, background .15s, border-color .15s, color .15s;
}
.relcal-mbtn:hover{border-color:var(--rc-filter);}
.relcal-mbtn:active{transform:scale(.97);}
.relcal-mbtn.is-active{background:var(--rc-filter);border-color:var(--rc-filter);color:#fff;}
@media(max-width:480px){ .relcal-mbtn{font-size:14px;padding:10px 16px;} }

/* 細かな絞り込み（枠内） */
.relcal-subfilters{
  background:var(--rc-filter-bg);
  border:1px solid var(--rc-filter-line);
  border-radius:var(--rc-radius);
  padding:14px 16px 16px;
}
.relcal-fgroup{padding:10px 0;border-bottom:1px dashed var(--rc-filter-line);}
.relcal-fgroup:last-of-type{border-bottom:none;}
.relcal-flabel{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--rc-filter);
  background:var(--rc-filter-soft);
  padding:3px 10px;border-radius:999px;
  margin-bottom:9px;
}
.relcal-btnrow{display:flex;flex-wrap:wrap;gap:8px;}

/* フィルタボタン（ボタン式：月・体験版・ジャンル） */
.relcal-fbtn{
  appearance:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:500;
  color:var(--rc-ink);
  background:var(--rc-bg);
  border:1.5px solid var(--rc-line);
  border-radius:999px;
  padding:7px 15px;
  transition:transform .08s ease, background .15s, border-color .15s, color .15s;
}
.relcal-fbtn:hover{border-color:var(--rc-filter);}
.relcal-fbtn:active{transform:scale(.96);}
.relcal-fbtn.is-active{
  background:var(--rc-filter);
  border-color:var(--rc-filter);
  color:#fff;
  font-weight:700;
}

/* プルダウン（声優・サークル名） */
.relcal-selects{display:flex;flex-wrap:wrap;gap:14px;}
.relcal-selectwrap{flex:1 1 220px;min-width:0;}
.relcal-select{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:auto !important;        /* テーマのselect固定高さを無効化 */
  min-height:46px;
  line-height:1.5 !important;    /* テーマのline-height上書き（文字の縦見切れ防止） */
  margin:0;
  font-family:inherit;font-size:14px;color:var(--rc-ink);
  background:var(--rc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e11d48' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1.5px solid var(--rc-line);
  border-radius:10px;
  padding:11px 36px 11px 13px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  text-overflow:ellipsis;
}
.relcal-select:focus{outline:2px solid var(--rc-filter);outline-offset:1px;border-color:var(--rc-filter);}
.relcal-tagselect{margin-top:10px;max-width:280px;}

/* テーマの select 指定（固定高さ・行間）に負けないよう高詳細度＋!importantで強制上書き。
   文字が縦に見切れる現象を防ぐ。背景の▼アローもここで再指定して消えないようにする。 */
.relcal .relcal-subfilters select.relcal-select{
  height:auto !important;
  min-height:48px !important;
  line-height:1.6 !important;
  padding:12px 36px 12px 13px !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  vertical-align:middle !important;
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  background-color:var(--rc-bg) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e11d48' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:12px 8px !important;
}

/* リセット行 */
.relcal-actions{
  display:flex;align-items:center;gap:10px;
  padding-top:16px;margin-top:4px;
}
.relcal-count{font-size:14px;font-weight:800;color:var(--rc-filter);margin-right:auto;}
.relcal-action{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;
  padding:9px 18px;border-radius:10px;
  transition:transform .08s ease,filter .15s;
}
.relcal-action:active{transform:scale(.97);}
.relcal-action--all{background:var(--rc-filter);color:#fff;border:1.5px solid var(--rc-filter);}
.relcal-action--all:hover{filter:brightness(1.08);}
.relcal-action--clear{background:var(--rc-bg);color:var(--rc-muted);border:1.5px solid var(--rc-line);}
.relcal-action--clear:hover{border-color:var(--rc-filter);color:var(--rc-filter);}

/* ---------- 日付見出し + グリッド ---------- */
.relcal-day{margin:0 0 34px;}
.relcal-day h3{
  display:flex;align-items:baseline;gap:10px;
  font-size:20px;font-weight:900;letter-spacing:.01em;
  margin:0 0 14px;padding:0 0 0 14px;
  border-left:6px solid var(--rc-accent);
  line-height:1.3;
}
.relcal-day h3 .relcal-dow{font-size:14px;font-weight:700;color:var(--rc-muted);}
.relcal-day h3 .relcal-dow.is-sat{color:#2563eb;}
.relcal-day h3 .relcal-dow.is-sun{color:#dc2626;}
.relcal-count{
  font-size:12px;font-weight:700;color:var(--rc-accent);
  background:var(--rc-accent-soft);padding:2px 9px;border-radius:999px;
}

/* PC 3列 / スマホ 2列 */
.relcal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
@media(min-width:760px){
  .relcal-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
}
/* ===== スマホ最適化（WordPress本文での見え方を優先） ===== */
@media(max-width:520px){
  .relcal{padding:4px 8px 28px;}
  .relcal-filters{margin:4px 0 16px;}
  .relcal-monthbar{margin-bottom:10px;}
  .relcal-monthbar-label,.relcal-flabel{margin-bottom:7px;}
  .relcal-subfilters{padding:11px 11px 12px;}
  .relcal-fgroup{padding:8px 0;}
  .relcal-grid{gap:8px;}
  .relcal-cardinfo{padding:6px 7px 7px;}
  .relcal-cardtitle{font-size:14px;}
  .relcal-selectwrap{flex:1 1 100%;}     /* 声優・サークルは各行フル幅（見切れ防止） */
  .relcal-tagselect{max-width:none;}
}

/* ---------- カード（サムネ＋下に体験版リンク） ---------- */
.relcal-card{
  display:flex;flex-direction:column;
  border-radius:var(--rc-radius);
  overflow:hidden;
  background:var(--rc-bg);
  box-shadow:var(--rc-shadow);
  transition:transform .14s ease, box-shadow .14s ease;
}
.relcal-card:hover{transform:translateY(-4px);box-shadow:var(--rc-shadow-lg);}

/* サムネ部分（タップで詳細ポップアップ） */
.relcal-thumbbtn{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;
  border:none;padding:0;margin:0;background:none;cursor:pointer;
  font-family:inherit;text-align:left;
}
.relcal-thumbbtn:focus-visible{outline:3px solid var(--rc-pink);outline-offset:-3px;}
.relcal-thumb{position:absolute;inset:0;background-size:cover;background-position:center;overflow:hidden;}
.relcal-thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;}
.relcal-media-tag{
  position:absolute;top:8px;left:8px;z-index:2;
  font-size:10px;font-weight:800;letter-spacing:.03em;color:#fff;
  background:rgba(20,12,40,.66);backdrop-filter:blur(2px);
  padding:3px 8px;border-radius:6px;
}
/* サムネ下の情報エリア（タイトル → 体験版リンク） */
.relcal-cardinfo{
  display:flex;flex-direction:column;gap:4px;
  padding:6px 8px 8px;
}
.relcal-cardtitle{
  margin:0;overflow:hidden;white-space:nowrap;
  font-size:15.5px;font-weight:700;line-height:1.4;color:var(--rc-ink);
}
.relcal-titletext{display:inline-block;will-change:transform;}
.relcal-cardtitle.is-marquee .relcal-titletext{
  animation:relcal-marquee var(--rc-mq-dur,7s) ease-in-out infinite alternate;
}
.relcal-cardtitle.is-marquee:hover .relcal-titletext{animation-play-state:paused;}
@keyframes relcal-marquee{
  0%,16%{transform:translateX(0);}
  84%,100%{transform:translateX(var(--rc-mq-shift,0));}
}
.relcal-cardcircle{
  margin:0;font-size:10.5px;font-weight:500;color:#8a7da6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.relcal-genretag{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:10px;font-weight:700;
  color:#fff;background:rgba(20,12,40,.62);backdrop-filter:blur(2px);
  padding:3px 8px;border-radius:6px;
}

/* 体験版／公式リンク（タイトルの下） */
.relcal-trial-link,.relcal-official-link{
  display:block;text-align:center;text-decoration:none;
  font-size:10.5px;font-weight:700;color:#fff;
  padding:5px 8px;border-radius:7px;
  transition:filter .15s;
}
.relcal-trial-link{background:var(--rc-pink);}
.relcal-official-link{background:var(--rc-accent);}
.relcal-trial-link::before{content:"▶";font-size:9px;margin-right:5px;vertical-align:1px;}
.relcal-official-link::before{content:"↗";font-size:11px;margin-right:5px;vertical-align:1px;}
.relcal-trial-link:hover,.relcal-official-link:hover{filter:brightness(1.08);}
.relcal-trial-link:focus-visible{outline:2px solid var(--rc-accent);outline-offset:2px;}
.relcal-official-link:focus-visible{outline:2px solid var(--rc-pink);outline-offset:2px;}

/* 該当なし表示 */
.relcal-empty{
  display:none;text-align:center;color:var(--rc-muted);
  padding:48px 16px;background:var(--rc-surface);
  border-radius:var(--rc-radius);border:1px dashed var(--rc-line);
}
.relcal-empty.is-show{display:block;}

/* ---------- モーダル（ポップアップ） ---------- */
.relcal-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:flex-start;justify-content:center;
  padding:24px 14px;
  background:rgba(18,10,38,.62);backdrop-filter:blur(3px);
  overflow-y:auto;
}
.relcal-modal.is-open{display:flex;animation:relcal-fade .18s ease;}
@keyframes relcal-fade{from{opacity:0}to{opacity:1}}
.relcal-dialog{
  background:var(--rc-bg);
  width:100%;max-width:680px;
  border-radius:18px;overflow:hidden;
  box-shadow:var(--rc-shadow-lg);
  animation:relcal-pop .2s ease;
}
@keyframes relcal-pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.relcal-close{
  position:sticky;top:0;float:right;
  margin:10px 10px 0;z-index:5;
  width:38px;height:38px;border:none;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.18);
  font-size:20px;color:var(--rc-ink);cursor:pointer;line-height:1;
}
.relcal-close:hover{background:#fff;color:var(--rc-pink);}

/* ギャラリー */
.relcal-gallery{background:#100a22;}
.relcal-gmain{width:100%;aspect-ratio:16/10;background-color:#100a22;background-size:cover;background-position:center;background-repeat:no-repeat;}
.relcal-gvideo{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.relcal-gthumbs{display:flex;gap:8px;padding:10px;overflow-x:auto;}
.relcal-gthumb{
  position:relative;
  flex:0 0 76px;height:54px;border-radius:7px;cursor:pointer;
  background-size:cover;background-position:center;background-color:#241a3d;
  border:2px solid transparent;opacity:.7;transition:.15s;
}
.relcal-gthumb:hover{opacity:1;}
.relcal-gthumb.is-active{opacity:1;border-color:var(--rc-pink);}
.relcal-gthumb.is-video::after{
  content:"▶";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;text-shadow:0 1px 4px rgba(0,0,0,.6);
}

.relcal-body{padding:20px 22px 26px;}
.relcal-mtitle{font-size:21px;font-weight:900;margin:0 0 12px;line-height:1.4;}
.relcal-meta{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  font-size:13.5px;margin:0 0 16px;
  padding:14px 0;border-top:1px solid var(--rc-line);border-bottom:1px solid var(--rc-line);
}
.relcal-meta dt{color:var(--rc-muted);font-weight:700;}
.relcal-meta dd{margin:0;font-weight:500;}
.relcal-chips{display:flex;flex-wrap:wrap;gap:6px;}
.relcal-chip{
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--rc-accent);background:var(--rc-accent-soft);
  border:1px solid transparent;border-radius:7px;
  padding:3px 11px;transition:.12s;
}
.relcal-chip--tag::before{content:"#";opacity:.55;margin-right:1px;}
.relcal-chip:hover{background:var(--rc-accent);color:#fff;}
.relcal-desc{font-size:14px;line-height:1.85;margin:0 0 22px;color:#2c2740;}

.relcal-cta{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch;}
.relcal-related{margin-top:22px;padding-top:18px;border-top:1px solid var(--rc-line);}
.relcal-related-label{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:var(--rc-accent);background:var(--rc-accent-soft);
  padding:4px 12px;border-radius:999px;margin:0 0 12px;
}
.relcal-related-body{font-size:14px;line-height:1.7;}
.relcal-related-body img{max-width:100%;height:auto;}
/* 体験版ボタン：控えめ・小さめ＝全体の3割（文字数で幅が変わらない） */
.relcal-btn-trial{
  flex:3 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  color:var(--rc-accent);background:#fff;
  border:1.5px solid var(--rc-accent);border-radius:9px;
  padding:10px 8px;text-decoration:none;
  transition:.15s;
}
.relcal-btn-trial:hover{background:var(--rc-accent-soft);}
/* 遊んでみる（独自・赤ボタン）＝全体の7割（文字数で幅が変わらない） */
.relcal-btn-play{
  flex:7 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;
  color:#fff !important;background:#e8312f;
  border:none;border-radius:10px;
  padding:14px 10px;text-decoration:none;line-height:1.25;
  box-shadow:0 5px 16px rgba(225,49,47,.42);
  transition:transform .1s ease,filter .15s;
}
.relcal-btn-play:hover{filter:brightness(1.06);}
.relcal-btn-play:active{transform:scale(.98);}
/* （旧）購入ボタン用クラス。現在は未使用だが互換のため残置 */
.relcal-btn-buy{
  flex:1 1 200px;text-align:center;
  font-family:inherit;font-size:15.5px;font-weight:900;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,var(--rc-accent),var(--rc-pink));
  border:none;border-radius:11px;
  padding:14px 20px;text-decoration:none;display:inline-block;
  box-shadow:0 8px 20px rgba(150,30,120,.28);
  transition:transform .1s ease,filter .15s;
}
.relcal-btn-buy:hover{filter:brightness(1.07);}
.relcal-btn-buy:active{transform:scale(.98);}

.relcal-hidden{display:none;}