@charset "UTF-8";
/* ==========================================================================
   新商品発売カレンダー（/ext/calendar.html）
   - 商品カードはサイト共通の .block-item-list（商品一覧と同じ）を使い、
     ここではカレンダー固有の部分とグリッドへの収め方だけを指定する
   - 767px以下をスマホとして扱う（style.css と同じブレイクポイント）
   ========================================================================== */

.page-release-calendar {
  --rc-blue: #114099;
  --rc-orange: #e46127;
  --rc-line: #e5e5e5;
  --rc-bg: #eff1f5;
  --rc-text-sub: #555;
}

/* .container が横並びのflexのため、幅を明示しないと横スクロールの月タブ・ブランド一覧の長さまで広がる */
.rc { width: 100%; min-width: 0; }

/* JS実行前は商品の元データを隠す（ちらつき防止） */
.rc:not(.is_ready) .js_rc-raw { visibility: hidden; height: 0; overflow: hidden; }
.rc-raw { list-style: none; margin: 0; padding: 0; }

/* ---- 見出し ---------------------------------------------------------- */
.rc-head { padding: 24px 0; }
.rc-head-en { font-family: "Oswald", sans-serif; font-size: 14px; letter-spacing: .2em; color: var(--rc-orange); margin: 0 0 6px; }
.rc-head-title { font-size: 30px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.rc-head-lead { font-size: 14px; line-height: 1.8; color: var(--rc-text-sub); margin: 0; }

/* ---- 月タブ（タブ型：選択中は青文字＋下線） ---------------------------- */
.rc-tabs { border-bottom: 1px solid var(--rc-line); }
.rc-tabs-inner { display: flex; gap: 8px; }
.rc-tab {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: #888;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.rc-tab small { font-size: 11px; font-weight: 400; margin-right: 2px; }
.rc-tab-count { font-size: 12px; font-weight: 400; margin-left: 2px; }
.rc-tab:hover { color: var(--rc-blue); text-decoration: none; }
.rc-tab.is_current { color: var(--rc-blue); border-bottom-color: var(--rc-blue); }

/* ---- ブランド絞り込み（サイト共通の select ＋ .c_select の矢印） ----------- */
.rc-brands { padding: 16px 0; }
.rc-brands-title { font-size: 12px; color: #777; margin: 0 0 8px; }
.rc-brands-list { width: 320px; }
.rc-brands-list select { width: 100%; font-size: 14px; -webkit-appearance: none; appearance: none; }

/* ---- 月セクション（青い帯） -------------------------------------------- */
.rc-main { padding-bottom: 64px; }
.rc-month { padding-top: 32px; scroll-margin-top: 20px; }
.rc-month-head { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--rc-blue); color: #fff; }
.rc-month-num { font-family: "Oswald", sans-serif; font-size: 36px; font-weight: 600; line-height: 1; }
.rc-month-year { font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 700; margin-right: 4px; }
.rc-month-label { font-size: 16px; font-weight: 700; }
.rc-month-count { font-size: 13px; opacity: .85; }
.rc-month-top { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #fff; font-size: 13px; text-decoration: none; }
.rc-month-top:hover { color: #fff; text-decoration: underline; }
.rc-month-top svg { width: 12px; height: 12px; fill: #fff; transform: rotate(-90deg); }

/* ---- 日付グループ ------------------------------------------------------ */
.rc-day { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rc-line); scroll-margin-top: 20px; }
.rc-day-head { flex: 0 0 110px; display: flex; flex-direction: column; gap: 4px; }
.rc-day-date { font-family: "Oswald", sans-serif; font-size: 32px; font-weight: 600; line-height: 1; }
.rc-day-dow { font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .15em; color: var(--rc-text-sub); }
/* 土曜は青系、日曜は赤系 */
.rc-day-sat .rc-day-date, .rc-day-sat .rc-day-dow { color: #1f5fbf; }
.rc-day-sun .rc-day-date, .rc-day-sun .rc-day-dow { color: #d0342c; }
.rc-day-today { align-self: flex-start; margin-top: 4px; padding: 3px 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--rc-orange); }
/* 未定：日付と同じ大きさ・太さの見出し */
.rc-day-undated .rc-day-date { font-family: "Noto Sans JP", sans-serif; font-weight: 700; }

.rc-day-items {
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 16px;
}

/* ---- 商品カード：既存の .block-item-list をグリッドに収める ---------------- */
.rc-item.block-item-list { width: auto; margin: 0; display: flex; }
.rc-item .block-item-list-inner { display: flex; flex-direction: column; width: 100%; }
.rc-item .block-item-list-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.rc-item .block-item-list-status { min-height: 1.5em; line-height: 1.5; }
.rc-item .block-item-list-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* 商品名は3行分の高さで固定し、価格とボタンの位置を横でそろえる */
.rc-item .block-item-list-name { height: 4.5em; line-height: 1.5; }
.rc-item .item-action { margin-top: auto; }
.rc-item .item-action .btn { width: 100%; min-width: 0; }

/* ---- 0件・絞り込み0件 --------------------------------------------------- */
.rc-empty { margin-top: 20px; padding: 36px 16px; background: var(--rc-bg); text-align: center; }
.rc-empty p { font-size: 14px; color: var(--rc-text-sub); margin: 0 0 14px; }
.rc-filter-empty { padding: 24px 0; font-size: 13px; color: var(--rc-text-sub); }

/* ---- ページTOPボタン（スクロールで表示） --------------------------------- */
.rc-pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--rc-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.rc-pagetop.is_show { opacity: 1; visibility: visible; }
.rc-pagetop:hover { color: #fff; text-decoration: none; opacity: .85; }
.rc-pagetop svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; }

/* ==========================================================================
   スマホ（767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  .rc-head { padding: 20px 16px 16px; }
  .rc-head-title { font-size: 22px; }
  .rc-head-lead { font-size: 13px; }

  .rc-tabs-inner { gap: 4px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rc-tabs-inner::-webkit-scrollbar { display: none; }
  .rc-tab { flex: 0 0 auto; min-height: 46px; padding: 0 14px; font-size: 14px; }

  .rc-brands { padding: 12px 0 4px; }
  .rc-brands-title { font-size: 11px; padding: 0 16px; margin-bottom: 6px; }
  .rc-brands-list { width: auto; padding: 0 16px 8px; }
  /* iPhoneで選択時に画面が拡大しないよう16px */
  .rc-brands-list select { font-size: 16px; }

  .rc-month { padding-top: 16px; }
  .rc-month-head { gap: 8px; padding: 6px 16px; }
  .rc-month-num { font-size: 28px; }
  .rc-month-label { font-size: 14px; }
  .rc-month-count, .rc-month-top { font-size: 12px; }

  .rc-days { padding: 0 16px; }
  .rc-day { display: block; padding: 0 0 24px; border-bottom: none; }
  /* 日付の下だけに文字と同じ色の下線を引き、商品と分ける */
  .rc-day-head { flex-direction: row; align-items: center; gap: 8px; width: fit-content; margin-bottom: 12px; padding: 14px 0 6px; border-bottom: 2px solid #000; }
  .rc-day-sat .rc-day-head { border-bottom-color: #1f5fbf; }
  .rc-day-sun .rc-day-head { border-bottom-color: #d0342c; }
  .rc-day-date { font-size: 22px; }
  .rc-day-dow { font-size: 12px; }
  .rc-day-today { margin-top: 0; }

  .rc-day-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .rc-empty, .rc-filter-empty { margin-left: 16px; margin-right: 16px; }

  .rc-pagetop { right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 10px; }
}