@charset "utf-8";
/* design/tokens.json から生成。直接編集しないこと。 */
:root{
  /* === design/tokens.json から生成。直接編集しないこと === */
  --navy:#1E2F52; --sand:#E6DCC6; --ivory:#F5F1E8;
  --brand-sage:#6B7F5E; --brand-terra:#C76B4D;
  --sage:#475E38; --terra:#993818;
  --sage-fill:#597646; --terra-fill:#CA4F27;
  --cta:#CA4F27; --cta-hover:#A93E1D;
  /* エリアの識別色。北摂＝テラコッタ／南河内＝セージ／泉州＝ネイビー。**3館のトークンの area から引いている**ので、館の色と食い違わない */
  --area-hokusetsu:#CA4F27; --area-minami-kawachi:#597646; --area-senshu:#1E2F52;
  --area-hokusetsu-ink:#993818; --area-minami-kawachi-ink:#475E38; --area-senshu-ink:#1E2F52;
  --ground:#F5F1E8; --panel:#FFFFFF;
  --panel-warm:#EFE9DA; --footer-bg:#E9E2D0;
  --ink:#1E2F52; --ink-soft:rgba(30,47,82,.84); --ink-mid:rgba(30,47,82,.78);
  --ink-rule:rgba(30,47,82,.16); --ink-hair:rgba(30,47,82,.15);
  --serif:"Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --en:Georgia,"Times New Roman",serif;
  --hand:"Yuji Syuku",serif;
  --e-out-quart:cubic-bezier(.165,.84,.44,1);
  --e-out-quint:cubic-bezier(.23,1,.32,1);
  --e-out-sine:cubic-bezier(.39,.575,.565,1);
  --e-inout-cubic:cubic-bezier(.645,.045,.355,1);
  --e-inout-expo:cubic-bezier(1,0,0,1);
  --transition:.5s var(--e-out-quint);
  --r-chip:19px; --r-pill:15px; --r-btn:28px;
  --r-thumb:12px;
  --r-card:18px; --r-panel:22px; --r-surface:28px;
  --r-nav:100px; --r-arch:46% 46% 20px 20px / 34% 34% 20px 20px; --r-arch-video:200px 200px 26px 26px;
  --rail-l:240px; --rail-r:200px;
  --col-gap:24px; --pad-x:40px; --sticky-top:24px;
  --site-max:1920px;
  --stream-ratio:80%; --stream-min:772px;
  --np-pad:74px 30px 62px;
}

/* ============================================================ 再生ボタン（共通） */
/* サイト内の動画サムネイルは**すべてこの1つ**を使う（依頼者指示 2026-08-26）。
   ・形は支給された Icon_play.svg。CSS で描き直さない
     （sitekit._play_svg() が src/assets/icon/play.svg からパスを取り出す）
   ・**白線＋塗り無しの円に、白の再生マーク**（依頼者指示 2026-08-29）。
     半透明の白い円は、サムネイルが小さくなると写真を隠してしまうため。
     2026-08-29 にトップだけで試し、同日サイト全体へ広げた
   ・**マークの大きさは --play-d の 38%、円はそこから --play-ring（.86）を掛けた寸法**。
     こうすると「円だけひとまわり小さく」してもマークの大きさが変わらない
     （円に対する比は約 44%）
   ・**サムネイルの中央**に置く。位置の基準は親（figure / frame）側で作る

   **ここに置いてある理由**：feed.html は style.css を読まない
   （Tig Short に合わせた feed.css だけ）。全ページが読むのは tokens.css なので、
   定義を1つにするためにここへ置く。 */
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; --play-d: 64px;
  --play-ring: .86;
  width: calc(var(--play-d) * var(--play-ring));
  height: calc(var(--play-d) * var(--play-ring));
  border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: none;
  border: 2px solid rgba(255, 255, 255, .92);
  color: #fff;
  /* 塗りを外すと、明るい写真の上で白い線と白いマークが消える。真っ白な地で実測すると、
     弱い影（0 2px 6px / .45）では 1.08倍しか差が出ずほぼ見えなかった。
     **輪郭に張り付く 2px の影**を足して 1.31倍まで上げてある（黒地では 8.6倍）。
     box-shadow ではなく filter を使うのは、**枠線とマークの両方**に掛けるため
     （box-shadow は円の外側にしか出ない）。 */
  filter: drop-shadow(0 0 2px rgba(22, 35, 61, 1))
          drop-shadow(0 3px 10px rgba(22, 35, 61, .3));
}
.play .play-i {
  width: calc(var(--play-d) * .38); height: calc(var(--play-d) * .38);
  fill: currentColor; display: block;
}
/* 小さな札。極端に小さいカードでは縮める（マークは連動して 38%） */
.play-s { --play-d: 48px; }
/* しおりの動画サムネイルは 72〜76px 幅。円が幅の半分を超えないところまで落とす */
.play-xs { --play-d: 34px; }

@media (max-width: 768px) {
  .play { --play-d: 52px; }
  .play-s { --play-d: 44px; }
  .play-xs { --play-d: 32px; }
}


/* ============================================================ 追加・削除の合図（共通） */
/* ♥ の保存や「旅ポケットに入れる」を押したときの、**控えめな**手ごたえ
   （依頼者指示 2026-08-29）。押した1つだけが小さく決まる。

   ・class は JS（pocket.js の pop()）が付けて、終わったら外す。**残さない**
   ・.is-pop     … ボタンそのものを動かす（♥ のように印だけのボタン）
   ・.is-pop-i   … ボタンの中の印だけを動かす（文字が並ぶ広いボタン）
     文字の中の span は inline なので、動かすために inline-block にする
   ・**動きを止めている人には出さない**（この囲いの外には書かない）
   ・キーフレームは style.css の oc-pop と同じ形。全ページが読むのはこちらなので、
     feed.html でも効くようここにも持つ */
@keyframes oc-pop-c {
  0%   { transform: scale(.82); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-pop { animation: oc-pop-c .34s var(--e-out-quint); }
  .is-pop-i { display: inline-block; animation: oc-pop-c .34s var(--e-out-quint); }
}