@charset "UTF-8";
/* ==========================================================
   催しカード「下寄せ」テスト案（2026-09-05 市岡さん指示）
   「左寄せ×青の縦帯だと開いたカードの主役（かまくら等）が隠れる。
    下寄せで統一してテストで見たい」
   - 開いたカードの青グラデを「下から上へ」に変更し、テキストを下部へ集約
   - 5枚とも同一レイアウト＝SP（写真上＋青パネル下）とも思想が揃う
   - カード1の左右反転（9/2・左帯対策）は不要になるため解除

   2026-09-09 市岡さん指示で改訂:
     「ボタンを左寄せに。間隔もつまりすぎ」
     旧: ボタン left138px（テキスト左53pxに対して中央寄り）／開催期間の下端611pxに対し
         ボタン上端622px＝**間隔わずか11px**／カード下端までも26.2pxしかなかった。
     新: ボタンを **left 53px（本文と同じ左揃え）**。
         開催期間 → ボタン = **38px**、ボタン下端 → カード下端 = **42px**。

   2026-09-10 河野さん指示で改訂（定例）:
     「開催期間も若干小さく」「今は写真の60%くらいが青いグラデで覆われている。
      半分くらい…3分の1くらいの範囲にまとまると写真が見やすい」
     (a) 開催期間ラベル 17→15px（88.2%）／日付 23→20px（87.0%）／
         ボタン 250×51.8→218×45px（87.2%/86.9%）・ラベル17→15px（88.2%）・矢印も同率。
         タイトル(30px)・温泉地名(24px)・説明文(18px)は主役なので無変更。
     (b) 級数を落とした分と行間の詰めで、テキスト塊（温泉地名の上端〜ボタン下端）を
         **326.8px(46.7%) → 272.8px(39.0%)** に圧縮し、下端はそのまま
         （ボタン下端→カード下端 42px は維持）。
     (c) 青グラデの不透明域を塊の新しい上端に追随: 390px不透明→475px透明 を
         **325px不透明→410px透明** へ。写真が素で見える帯は 225px(32.1%) → 290px(41.4%)。
     ※「塊をカード高の1/3(233px)以内」は未達。内訳=要素の実高だけで
       温泉地名24＋タイトル30＋罫2＋説明文60(カード1は2行)＋ラベル15＋日付20＋ボタン45＝**196px**あり、
       233pxに収めると6箇所の行間合計が37px（1箇所平均6px）になり、
       9/9に「詰まりすぎ」と指摘された間隔を下回る。行間を詰め切った現実解が272.8px。
       これ以上詰めるにはタイトル級数を下げる必要がある（今回の指示外）。

   2026-09-14 市岡さん指示で改訂（「進めていいよ」「文字が全体的におおきいとのこと」）:
     9/10で未達だった「塊をカード高の1/3(233px)以内」を、タイトル・説明文を含む
     カード内の文字全体を約80%に縮めて達成する。
     (a) 温泉地名 24→19px ／ タイトル 30→24px ／ 説明文 18→15px（行ピッチ30→25px）／
         日付 20→16px。開催期間ラベルとボタンの文字は 15→14px（Web本文の下限14pxで止める）。
         字間はすべて em 指定なので級数に比例して詰まる。
     (b) ボタン高45pxはタッチターゲット44px以上を守るため据え置き、幅だけ文字に合わせて 218→204px。
     (c) 行間も約80%: 地名→タイトル 8→6 ／ タイトル→罫 11→8 ／ 罫→説明 11→8 ／
         説明→ラベル 10→8 ／ ラベル→日付 7→6 ／ 日付→ボタン 29.8→26（9/9に詰まりすぎと言われた11pxより広い）。
         塊 **272.8px(39.0%) → 232px(33.1%)**。ボタン下端→カード下端 42px は維持。
     (d) 罫の幅はタイトル級数と同率で 420→336px。
     (e) 青グラデの不透明域を塊の新しい上端に追随: 325px→**284px不透明**、329pxで.52、369pxで透明。

   このファイルは events-flick.css の後に読み込み、同セレクタを後勝ちで上書きする。
   本番組み込み時は本体へ統合すること。
   ========================================================== */
@media (min-width: 768px) {

  /* 開パネルの青: 左からの縦帯 → 下からの横帯。
     不透明域はテキスト塊の上端（カード下端から274px）より10px上の284pxまで保ち、
     そこから369pxで透明へ抜く＝写真は上部331pxが素で見える（9/10は290px） */
  .events--flick .events__meta {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
      rgba(1, 89, 179, .92) 0,
      rgba(1, 89, 179, .90) 284px,
      rgba(1, 89, 179, .52) 329px,
      rgba(1, 89, 179, 0) 369px);
  }

  /* テキスト一式を下部へ（左インセット53pxは踏襲）。
     カード高700pxからの積み上げ（2026-09-14）:
       下端42 → ボタン45 → 26 → 日付16 → 6 → ラベル14 → 8 → 説明文50(2行) →
       8 → 罫2 → 8 → タイトル24 → 6 → 温泉地名19  ＝塊232px */
  .events--flick .events__name        { top: 426px; font-size: 19px; }
  .events--flick .events__cardtitle   { top: 451px; font-size: 24px; }
  .events--flick .events__card:nth-child(3) .events__cardtitle { top: 451px; left: 51.4px; }
  .events--flick .events__rule        { top: 483px; width: 336px; }
  .events--flick .events__desc        { top: 493px; font-size: 15px; line-height: 25px; }

  /* 開催期間ラベル・日付（9/10に17→15px・23→20px、9/14に15→14px・20→16px）。
     字間は em 指定なので級数に比例して詰まる。
     下寄せ案は横グラデを使っていないので events-flick.css の --meta-s には影響しない */
  .events--flick .events__periodlabel { top: 551px; font-size: 14px; }
  .events--flick .events__period      { top: 571px; font-size: 16px; }

  /* ボタン: 本文と同じ左53px（9/9指示）を維持。高さ45pxはタッチターゲット44px以上のため据え置き、
     幅は文字 15→14px と同率で 218 → 204px。
     上端613px・下端658px＝カード下端まで42px（9/9の値を維持） */
  .events--flick .events__btn {
    left: 53px;
    top: 613px;
    width: 204px;
    height: 45px;
    padding-bottom: 4.4px;
    font-size: 14px;
  }
  /* 矢印もボタン文字と同率(14/15)で。base.css の作法「width:W / height:W*11/14 /
     right:(軸右端 - W*0.036)」に従う。軸右端 21.8px → 20.3px、W 12.2px → 11.4px */
  .events--flick .events__btn::after {
    width: 11.4px;
    height: 9px;
    right: 19.9px;
  }

  /* カード1: 左帯対策の左右反転を解除し、反転前の窓位置へ戻す
     （下寄せなら滝（写真の横15〜45%）は上部にそのまま見える） */
  .events--flick .events__card:nth-child(1) { --flip: 1; --op-closed: 100%; --op-open: 0%; }
}

/* ==========================================================
   2026-09-22 HEROU定例で改訂（横山さん「5つのイベントの写真がもうちょっと見えるように」）:
     (a) 「詳細を見る」を左下からタイトルの右横へ。イベント名の下線を右端まで伸ばし、
         その上（右端）にボタンを載せる＝ボタンの段(45px)と間(26px)の 71px が不要になる
     (b) 空いた分だけテキスト一式を下げる。カード1（平湯）の説明文は1行にした（全カード1行）
       積み上げ（カード高700px・下端42pxは維持）:
         下端42 → 日付16 → 6 → ラベル14 → 8 → 説明文25(1行) → 8 → 罫2 → 8 → タイトル24 → 6 → 温泉地名19
         ＝ 塊 温泉地名の上端 522px 〜 日付の下端 658px（136px・カード高の19.4%）
       ボタン: 右53px（本文の左インセットと同じ）・下端をタイトルの下端(571px)に揃える＝上端526px
     (c) 青グラデの不透明域を塊の新しい上端（下から178px）より10px上の188pxまでに縮め、
       233pxで.52、273pxで透明＝写真は上部427pxが素で見える（9/14は331px）
   ========================================================== */
@media (min-width: 768px) {
  .events--flick .events__meta {
    background: linear-gradient(to top,
      rgba(1, 89, 179, .92) 0,
      rgba(1, 89, 179, .90) 188px,
      rgba(1, 89, 179, .52) 233px,
      rgba(1, 89, 179, 0) 273px);
  }
  .events--flick .events__name        { top: 522px; }
  .events--flick .events__cardtitle   { top: 547px; }
  .events--flick .events__card:nth-child(3) .events__cardtitle { top: 547px; }
  .events--flick .events__rule        { top: 579px; width: auto; right: 53px; }
  .events--flick .events__desc        { top: 589px; }
  .events--flick .events__periodlabel { top: 622px; }
  .events--flick .events__period      { top: 642px; }
  .events--flick .events__btn         { left: auto; right: 53px; top: 526px; }
}

/* ==========================================================
   【2026-10-08 HEROU定例 10/7（横山さん）】「ここのグラデの…透明度をもうちょっと、この文字がちゃんと読めるぐらいで
   薄くできないか」「下は青でいいかもしれないけど、徐々にグラデかけて写真が見える面積を出した方がかっこいい」
   （NEXUS の参考サイトのような薄いグラデ）［文字起こし 09:03:31〜09:04:56］
   旧: 下端.92 → 188pxまで.90（ほぼ不透明）→ 233px .52 → 273px 透明
   新: 下端.82 → 130px .76 → 182px（文字のまとまりの上端の少し上）.72 → 225px .42 → 280px .16 → 340px 透明
       ＝文字の背後にも写真が透け、上へは なだらかに抜く
   決め方（5枚のカードを1枚ずつ開いて実測・文字を隠して背景だけ撮り、文字の枠内の明るい側95%点で白とのコントラスト）:
     19px以下（温泉地名・説明・開催期間）4.5以上／24pxのタイトル 3.0以上。旧の最悪 5.95 → 新の最悪 4.67（カード3の温泉地名）・タイトル最悪 4.78
     これより薄い案（下端.80で182pxが.55 など）はカード2・3の温泉地名が 3.8〜4.1 で不合格
     （計測 work/review_20261008/events_contrast.py）。戻す時はこのブロックを消すだけ
   ========================================================== */
@media (min-width: 768px) {
  .events--flick .events__meta {
    background: linear-gradient(to top,
      rgba(1, 89, 179, .82) 0,
      rgba(1, 89, 179, .76) 130px,
      rgba(1, 89, 179, .72) 182px,
      rgba(1, 89, 179, .42) 225px,
      rgba(1, 89, 179, .16) 280px,
      rgba(1, 89, 179, 0) 340px);
  }
}