/* 採用11｜T20 タップで広がる写真の扉（shimairoパターン sp-11）
   書き方の決まり：library/shimairo-patterns/README.md「3.」。すべて .sp-11 の中だけに効く。
   .sp-js（script.js が箱に付ける）がないとき：4枚とも同じ幅のまま、文も全部見える。

   Noppo camera テーマ 1.7.0 で入れたとき（型の保管庫 claude/shimairo-patterns 0700ba6 から。mock/patterns/README.md「司令塔が決めたこと」）
   - 色：--sp11-* と中の色を、テーマの :root の変数（--paper・--white・--ink・--muted・--accent・--wash・--line）に替えた。
     写真の上の白い文字（--white）と、その下の暗い影（.hx-shade）は型のまま
   - 写真の位置：扉ごとに --sp11-pos（管理画面「写真の位置」。初めは photo-plan.md の値）
   - 足したもの：名前に添える小さな英字（.hx-en）／開いた扉のリンク（.hx-more。ボタン .hx-tab より上 z-index 4）。
     説明の文（.hx-cap）は、英字の分だけ上に（bottom 40px → 66px） */
/* テーマの要素の書き方を、型の中ではブラウザの標準に戻す（README.md「3-2.」。いちばん上に置く） */
.sp-11 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption, table, caption, th, td, hr, img, a, button, input, select, textarea, label, fieldset, legend, small, strong, em, details, summary):where(:not([data-slot] *)) { all: revert; }
.sp-11 {
  --sp11-paper: var(--paper); --sp11-panel: var(--white); --sp11-ink: var(--ink); --sp11-muted: var(--muted);
  --sp11-accent: var(--accent); --sp11-accent-soft: var(--wash); --sp11-dark: var(--ink); --sp11-dark2: var(--ink);
  --sp11-line: var(--line); --sp11-radius: 18px;
  --sp11-serif: var(--serif);
  --sp11-sans: var(--sans);
  font-family: var(--sp11-sans);
  color: var(--sp11-ink);
  line-height: 1.75;
  /* 文字のもとの値（元は body で決めていない＝ブラウザの標準。テーマの値を受け継がないように） */
  font-size: 16px; font-weight: 400; font-style: normal; letter-spacing: normal; text-align: start; text-transform: none;
}
.sp-11, .sp-11 * { box-sizing: border-box; }
.sp-11 .hx-wrap { padding: 14px; background: linear-gradient(180deg, var(--sp11-panel), var(--sp11-accent-soft)); }
/* isolation：中の z-index（.hx-cap・.hx-tab・.hx-more）が、ページのほかの所（固定のヘッダーなど）に効かないように */
.sp-11 .hx { display: flex; flex-direction: column; gap: 6px; height: 540px; isolation: isolate; }
@media (min-width: 720px) {
  .sp-11 .hx { flex-direction: row; height: 380px; }
}
.sp-11 .hx-panel { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--sp11-line); transition: flex-grow .55s cubic-bezier(.3, .7, .2, 1); }
.sp-11.sp-js .hx-panel.open { flex-grow: 4.4; }
.sp-11 .hx-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sp11-pos, 50% 50%); }
.sp-11 .hx-shade { position: absolute; inset: 0; background: linear-gradient(200deg, transparent 42%, rgba(20, 14, 8, .58)); pointer-events: none; }
/* ボタンの見た目は型が決める（テーマの button の見た目を受け継がない）。行の高さ・文字の間隔はブラウザの標準のボタンと同じ */
.sp-11 .hx-tab { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; color: inherit; font: inherit; font-family: var(--sp11-sans); line-height: normal; letter-spacing: normal; text-transform: none; cursor: pointer; z-index: 3; }
.sp-11 .hx-lab { position: absolute; left: 12px; bottom: 12px; color: var(--white); font-weight: 700; font-size: 14.5px; letter-spacing: .14em; text-align: left; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
/* 名前に添える小さな英字（Noppo camera で足した） */
.sp-11 .hx-en { display: block; margin: 0 0 2px; font-family: var(--label, sans-serif); font-size: 10px; font-weight: 400; letter-spacing: .16em; line-height: 1.6; }
.sp-11 .hx-cap { position: absolute; left: 12px; right: 12px; bottom: 66px; color: var(--white); font-family: inherit; font-size: 12.5px; line-height: 1.75; letter-spacing: normal; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); z-index: 2; margin: 0; }
.sp-11.sp-js .hx-cap { opacity: 0; transition: opacity .4s ease; }
.sp-11.sp-js .hx-panel.open .hx-cap { opacity: 1; }
/* 開いた扉のリンク（作品を見る・料金を見る。Noppo camera で足した）。扉全体をおおうボタン（z-index 3）より上 */
.sp-11 .hx-more { position: absolute; right: 10px; bottom: 10px; z-index: 4; margin: 0; }
.sp-11 .hx-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; box-shadow: none; background: rgba(250, 248, 244, .92); color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: .04em; text-transform: none; text-decoration: none; white-space: nowrap; }
.sp-11 .hx-more a:hover { background: var(--white); }
.sp-11.sp-js .hx-more { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.sp-11.sp-js .hx-panel.open .hx-more { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
@media (min-width: 720px) {
  .sp-11 .hx-panel:not(.open) .hx-lab { writing-mode: vertical-rl; left: 50%; bottom: auto; top: 14px; transform: translateX(-50%); }
  .sp-11 .hx-panel:not(.open) .hx-en { display: none; }
}

/* 動きを控えめにする設定：扉の広がりと文の出入りを、その場で切り替える */
@media (prefers-reduced-motion: reduce) {
  .sp-11 .hx-panel, .sp-11.sp-js .hx-cap, .sp-11.sp-js .hx-more { transition: none; }
}