/* ==========================================================================
   #peach-calendar 出回りカレンダー（table版）
   追加日: 2026-08-27
   更新日: 2026-08-28 … peachesカスタム投稿と連動する動的カレンダーに対応
   参照: カレンダー.ai（出回りカレンダーのデザインカンプ）から採寸してコーディング。
   構成:
     1. 変数定義
     2. テーブル全体のレイアウト
     3. ヘッダー行（月）      … thead 相当の1つ目の tbody
     4. 品種名セル            … cal__name
     5. 月セル & 6分割スパン  … td / span.month_sel
     6. 出回り色分け（is-edge / is-peak）
     7. 横スクロール & スクロールヒント（SP）
   ========================================================================== */

#peach-calendar {
  --peach-header-bg: #ffe5e4; /* 月見出しチップの背景（ピンク） */
  --peach-row-bg: #f9f5ee; /* 品種名セルの背景（ベージュ） */
  --peach-text-pink: #e55f78; /* 品種名の文字色 */
  --peach-line: #dad0c5; /* セル罫線（縦・横とも同色） */
  --peach-month-num: #3a3a3a; /* 月の数字・「月」の文字色 */
  --peach-month-en: #b9934c; /* 英字月表記（Jun. など）の文字色 */
  /*--peach-gap: 4px;*/   /* 月見出しチップ同士の隙間（border-spacingで再現） */
  --peach-font-serif: "Shippori Mincho", "Zen Old Mincho", "Noto Serif JP", serif; /* 品種名など和文用 */
  --peach-font-display: "EB Garamond", "Cormorant Garamond", "Times New Roman", serif; /* 月の数字・英字用 */

  /* 旬（出回り時期）の色分け。色合い.ai から正確に採色した4色を使用しています
     （端の薄いピンクは両端で同じ色なので、実質3種類のカラー値を
     edge / peak-1 / peak-2 / edge の4マスぶんに使う形です）。
     3マス以上の期間は両端を --peach-cal-edge、内側を --peach-cal-peak-1 →
     --peach-cal-peak-2 の順に塗って、旬の前後がフェードする見た目にしています。
     2マス以下の期間は端なしで --peach-cal-peak-1 → --peach-cal-peak-2 のみになります。 */
  --peach-cal-edge: #fab9c6;
  --peach-cal-peak-1: #f58197;
  --peach-cal-peak-2: #f790a4;

  /* 隣り合う品種の色ブロックが上下でくっつかないようにする余白。
     span.month_sel の高さを (100% - この値) にして、上下に半分ずつ
     マージンを取ることで、行の中で上下中央に配置しています。 */
  --peach-cal-row-gap: 18px;
  
  padding-top:80px;
}

/* ---- 2. テーブル全体のレイアウト ------------------------------------- */
/*
  table-layout:fixed にして先頭列（品種名列）だけ幅を指定し、
  残りの月列は自動で均等割りにしています。
  月数が4でも5でも6でも、列幅がそのまま揃うようにするための書き方です。
*/
#peach-calendar table {
  width: 100%;
  max-width: 700px; /* デザインカンプに合わせた最大幅 */
  min-width: 700px; /* 月列が潰れて縦分割セルが視認できなくなるのを防ぐ最小幅（狭い画面ではcal-scrollで横スクロール） */
  margin: 0 auto; /* content-wrap内で中央寄せ */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--peach-gap) 0; /* 横だけ隙間を作り、縦は0で行同士を密着させる */
}

/* 品種名列（各行の先頭 th）の幅。ここだけ幅指定すれば月列は残りを均等割り */
/*
  ★変更（2026-08-31）
  品種名列を固定し、月列だけが横スクロールする仕様にするため、
  各行の先頭th（品種名セル／左上の空白セル）を position: sticky; left: 0
  にしています。z-indexで月セルより手前に来るようにし、スクロール中に
  月セルの中身が透けて見えないよう、下で背景色も明示しています。
*/
#peach-calendar th:first-child {
  width: 24%;
  position: sticky;
  left: 0;
  z-index: 2;
}

/* ---- 3. ヘッダー行（月） ---------------------------------------------- */
/* 左上の空白セル（  が入っている th）。
   固定列にする都合上、スクロール中に月見出しチップが透けて見えないよう
   背景を明示的に白にしています（以前は background: none で透明でした）。
   ※ :not(.col__month) を付けないと、詳細度の関係でこの下の
     th.col__month の背景色（ピンク）を上書きしてしまうので注意。
   ※以前は月見出し行が1つ目のtbodyだったため
     `tbody:first-of-type th:not(.col__month)` も対象にしていましたが、
     月見出し行をthead化した際にこのセレクタが1品種目（tbody:first-of-type）の
     th.cal__nameまで巻き込んで背景・罫線を消してしまっていたため削除しました。 */
#peach-calendar thead th:not(.col__month) {
  background: #fff;
  border: none;
}

/* 月見出しチップ本体 */
#peach-calendar th.col__month {
  background: var(--peach-header-bg);
  border-radius: 10px 10px 0 0; /* 上だけ丸め、下は本体テーブルにフラットに接続 */
  padding: 0.9rem 0.4rem; /* 10月など2桁の月でも折り返さないよう左右を詰める */
  text-align: center; /* セル内でセンター寄せ */
  white-space: nowrap;
  vertical-align: middle;
  font-family: var(--peach-font-display);
  font-weight: 400;
  color: var(--peach-month-num);
}

/*
  AIデータでは「6」だけ大きいイタリック体、「月」は小さめ、
  右側に金色の小型英字（Jun.）が並ぶ3パーツ構成になっています。
  これに合わせて calendar.php 側も下記のように
  month_num / month_en の span を追加した構成にしてあります。

  <th class="col__month">
    <span class="month_num">6</span>月
    <span class="month_en">Jun.</span>
  </th>
*/

/* th.col__month 自体（"月"の文字や、spanが無い場合のフォールバック）のスタイル */
#peach-calendar th.col__month {
  font-size: 1.5rem;
  font-style: italic;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

/* 数字部分（大きいイタリック体） */
#peach-calendar th.col__month .month_num {
  font-size: 1.75rem;
  font-style: italic;
}

/* 「月」の文字。数字より小さく、斜体はかけずに立てて表示する
   （th.col__month側でfont-style:italicが指定されているため、
   ここで明示的にnormalに戻しています） */
#peach-calendar th.col__month .month_ja {
  font-size: 1rem;
  font-style: normal;
  font-family: var(--peach-font-serif);
  margin: 0 0.05em;
}

#peach-calendar th.col__month .month_en {
  margin-left: 0.5em;
  font-size: 0.7rem;
  font-style: normal;
  font-variant: small-caps; /* "Jun." の先頭以外を小さい大文字に見せる */
  letter-spacing: 0.08em;
  color: var(--peach-month-en);
}

/* ---- 4. 品種名セル ------------------------------------------------------ */
#peach-calendar th.cal__name {
  background: var(--peach-row-bg);
  padding: 0.75rem 0.7rem;
  vertical-align: middle;
  font-family: var(--peach-font-serif);
  font-size: 0.9rem;
  font-weight: 500;
}

#peach-calendar th.cal__name a {
  display: block;
  color: var(--peach-text-pink);
  /* 品種名を折り返さず1行に収める（省略記号は使わず、
     左右の余白とフォントサイズを詰めることで収めています） */
  white-space: nowrap;
}

#peach-calendar th.cal__name a:hover {
  text-decoration: underline;
}

/* 行と行の間の罫線。月見出し行は thead 側なので tbody のカウントには入らず、
   1品種=1tbodyという構成になっています。1品種目（tbody:first-of-type）だけ
   罫線なし、2品種目以降の上に罫線を引いています。
   ※ もし品種行をすべて同じ tbody にまとめる構成に変える場合は、
     下のセレクタを `tbody:last-of-type tr:not(:first-child) th,
     tbody:last-of-type tr:not(:first-child) td` に差し替えてください。 */
#peach-calendar tbody:nth-of-type(n + 2) th,
#peach-calendar tbody:nth-of-type(n + 2) td {
  border-top: 1px solid var(--peach-line);
}

/* ---- 5. 月セル & 6分割スパン ------------------------------------------- */
/*
  td に display:flex を使うと td が table-cell ではなくなり、
  テーブルの列組みごと崩れてしまうため（実機で確認して修正済み）、
  ここでは td は table-cell のまま、中の span.month_sel を
  inline-block で横に6等分に並べる方法にしています。
  ・font-size:0 は span 同士の間の改行・インデントによる
    余白（インライン要素特有の隙間）を消すためのものです。
  ・span の高さは 100% にして、tdの高さ（=行の高さ）いっぱいに伸ばします。
    tdの高さ自体は品種名セル（th.cal__name）側の padding で決まり、
    同じ行のセルはテーブルの仕様上そのぶんだけ自動で高さが揃います。
*/
#peach-calendar td {
  padding: 0;
  font-size: 0;
  /* height:100%の子要素（span.month_sel）が高さを取れるようにするための指定。
     値そのものに意味はなく（実際の高さは行の内容で決まる）、
     tdの高さを「autoではない」状態にしてパーセント指定を効かせるためのものです。 */
  height: 0;
}

#peach-calendar td .month_sel {
  display: inline-block;
  box-sizing: border-box;
  width: 16.6667%;
  /* 行の高さから --peach-cal-row-gap 分を差し引いた高さにして、
     上下に半分ずつ（margin）余白を取ることで縦方向中央に配置しています。
     (height + margin-top + margin-bottom = 100%になる) */
  height: calc(100% - var(--peach-cal-row-gap));
  margin: calc(var(--peach-cal-row-gap) / 2) 0;
  vertical-align: top;
}

/* ---- 5b. 月の区切り線（縦） -------------------------------------------- */
/*
  デザインカンプ（カレンダーの時期表示デザインイメージ.ai）では、
  月見出しチップの下から品種データ部分（各行）にかけて、月と月の間に
  薄いグレーの縦線が入っています。横罫線（--peach-line）と同じ色を使い、
  月列同士の間（4本）にだけ線を引いています。
  ※品種名列と6月の間、10月の右端には線を入れません。
  ※ヘッダー（月見出しチップ）はチップ同士の隙間（border-spacing）で
    すでに区切りがついているデザインのため、縦線は品種データ側
    （tbody内のセル）だけに入れています。
*/
#peach-calendar tbody td + td {
  border-left: 1px solid var(--peach-line);
}

/* ---- 6. 出回り色分け（peaches投稿の season_start_slot / season_end_slot から算出） ---------- */
/*
  calendar.php 側の peach_calendar_cell_class() で、期間が3マス以上の場合は
  両端に is-edge、内側を is-peak-1 → is-peak-2 の順で半分ずつ、
  2マス以下の場合は端なしで is-peak-1 → is-peak-2 のみを付与しています。
  （色合い.ai の4色 = edge / peak-1 / peak-2 / edge に対応）
*/
#peach-calendar .month_sel.is-edge {
  background: var(--peach-cal-edge);
  border-radius: 2px;
}
#peach-calendar .month_sel.is-peak-1 {
  background: var(--peach-cal-peak-1);
  border-radius: 2px;
}
#peach-calendar .month_sel.is-peak-2 {
  background: var(--peach-cal-peak-2);
  border-radius: 2px;
}

/* 旧フック（--fruit-color を使った単色指定）。互換性のために残していますが、
   今後は上の is-edge / is-peak-1 / is-peak-2 を使ってください。 */
#peach-calendar .month_sel.is-on {
  background: var(--fruit-color, var(--peach-header-bg));
  border-radius: 2px;
}

/* ---- 7. 横スクロール & スクロールヒント（SP） --------------------------- */
/*
  .cal-scroll がテーブルの横スクロールコンテナ。
  PCでは基本的に折り返さずそのまま収まりますが、
  念のため常に overflow-x:auto にしてあります（狭い環境での保険）。
  スクロールヒント（指アイコン＋「スクロールできます」）自体は
  ScrollHint.js（https://github.com/wakuwaku3125/scroll-hint）が
  .js-scrollable 要素を検出して自動で描画・消去してくれるので、
  ここでは土台のレイアウトだけ用意しています。
  アイコンの見た目は scroll-hint.css の .scroll-hint-icon /
  .scroll-hint-icon-white を、下の上書きスタイルで
  「濃いグレーの角丸バッジ＋白アイコン」に寄せています。
  細部の色・サイズは実機確認しながら調整してください。

  ★不具合修正（2026-08-31）
  以前はここで .scroll-hint-icon-wrap（アイコンを配置するための
  「土台」で、position:absolute; width:100%; height:100%; の
  透明レイヤー）に直接背景色を指定してしまっており、これが原因で
  テーブル全体が濃いグレーで覆われるという表示崩れが起きていました。
  実際に見た目のバッジとして表示されるのは中の .scroll-hint-icon
  （120px程度の小さい角丸ボックス）側なので、背景色はそちらに
  付け直しています。
*/
.cal-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ScrollHint.js が生成するアイコン本体を、デザインカンプの
   「濃いグレーの角丸バッジ」に近づけるための上書き。
   （.scroll-hint-icon-wrap ではなく .scroll-hint-icon が実際のバッジ要素） */
.cal-scroll .scroll-hint-icon {
  background: rgba(58, 58, 58, 0.85);
  border-radius: 12px;
}

/*
  ★色調整（2026-08-31）
  footer.php側の初期化で scrollHintIconAppendClass: 'scroll-hint-icon-white'
  を指定しているため、要素には scroll-hint-icon と scroll-hint-icon-white の
  両方のクラスが付いています。scroll-hint.cssの .scroll-hint-icon-white は
  本来「白い背景のバッジ用」の配色（黒い手アイコン・黒文字）なのですが、
  こちらでは背景だけ上のルールで濃いグレーに上書きしているため、
  黒いアイコン・黒文字が濃いグレーの背景に埋もれてほぼ見えなくなって
  いました（クライアント指摘の色崩れの原因）。
  アイコン画像を白色版に差し替える代わりに、filter:invert(1)で
  色反転（黒→白）させることで、手・矢印のアイコンとテキストを
  白色にしています。
*/
.cal-scroll .scroll-hint-icon-white:before,
.cal-scroll .scroll-hint-icon-white:after {
  filter: invert(1);
}
.cal-scroll .scroll-hint-icon-white .scroll-hint-text {
  color: #fff;
}

/*
  ★調整（2026-08-31）
  デフォルトではバッジは .scroll-hint-icon-wrap（cal-scrollの中身と
  同じ高さ＝テーブル全体の高さ）の縦中央に出る仕組みになっています。
  品種数が増えてテーブルが縦に長くなると、その「縦中央」がページの
  かなり下の方になってしまい、テーブル上部だけが画面に入っている
  スマホでの閲覧時にバッジが見えなくなってしまいます。
  （position: sticky での追従も試しましたが、wrap要素がDOM上
  テーブルの直後に挿入される都合上、スクロール量に応じて逆に
  下の方でしか出せなくなるため見送りました。）
  そのため、バッジの土台（wrap）の高さをテーブル全体ではなく
  「テーブル上部の一定範囲」に制限し、そこでの縦中央にバッジが
  出るようにしています。テーブルがこの範囲より短い場合はこれまで
  通りテーブル全体の中央に出ます。
*/
.cal-scroll .scroll-hint-icon-wrap {
  height: min(100%, 420px);
  z-index:3;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
/*
  以前はブレイクポイントごとにテーブル幅・パディング・フォントサイズを
  段階的に縮小していましたが、狭い画面でも見た目（列幅・文字サイズ）を
  変えずに保ち、収まりきらない場合は cal-scroll の横スクロール＋
  ScrollHint.js のヒント表示に任せる方針に変更しました。
  そのため、#peach-calendar のサイズ関連の上書きはここでは行っていません。

  ★不具合修正（2026-08-31）
  SP幅で表示していた cal-scroll の赤枠は、クライアント確認用スクショの
  「範囲を示す赤枠」を誤ってそのままデザインの一部として実装してしまって
  いたものだったため削除しました。
*/