/* コマを押して開く面（K 260922 02:05「そろそろボックス開きでテキストや画像一覧なども取り掛かって」）。
   K が後から調整する所をこの1枚に閉じてある＝koma.css と site.css には足していない。
   K の指定＝画像はシンプルに縦に一枚一枚・横幅はウィンドウ横幅の70パー。 */
/* 幅＝窓の60%・300〜800px（K 260923 01:16・前は 70%・400〜1000px）。300px は窓より広くならない（max-width:100% が先に効く）。
   縦の余白は幅に比例＝幅1000px の時 240px（K 00:48「いまの10倍」をその幅で合わせた・01:14「縦余白は可変しない？」）。 */
:root {
  --bx-media-width: clamp(300px, 60vw, 800px);
  --bx-gap: calc(var(--bx-media-width) * 0.24);
}

.boxwrap {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff;
}
.boxwrap[hidden] { display: none; }
body.boxopen { overflow: hidden; }

.bx {
  position: relative;
  margin: 0 auto;   /* 幅の上限は置かない＝広い窓でも窓の70%（旧 max-width:1120px） */
  padding: 48px 6px 96px;
}
.bx .s { margin: 0 0 1em; }

/* 画像一覧＝縦に1枚ずつ・中央寄せ・縦横比はそのまま。凝った物は作らない。
   画像も映像も無いコマは、同じ幅で本文だけ（K 260922 09:04）。 */
.ml { margin-top: 40px; }   /* 一番上の余白＝元の値に戻した（K 01:14「一番上の余白がやけにでかい」） */
.tx { width: var(--bx-media-width); max-width: 100%; margin: 0 auto; }
.mt, .mp { margin-bottom: var(--bx-gap); }
/* 寄稿の文は字を大きく（K 260923 00:06「フォントサイズなどはこれの1.6倍」）。出典の行は元の大きさに戻す。 */
.mt { font-size: calc(var(--fs) * 1.6); line-height: calc(var(--lh) * 1.6); }
.mt .s { line-height: inherit; margin-bottom: calc(var(--lh) * 1.6); }
.mt .src { font-size: var(--fs); line-height: var(--lh); }
.mi {
  display: block; margin: 0 auto var(--bx-gap);
  width: var(--bx-media-width); height: auto;
  max-width: 100%;
}

/* 絵か映像が1点だけの面＝画面の中央に置く（K 261010 16:50）。幅の決まりは一覧と同じ。窓より背が高い時は上から流れる。 */
.bx.one { box-sizing: border-box; min-height: 100%; padding: 6px; display: flex; align-items: center; justify-content: center; }
.bx.one .ml { margin: 0; max-width: 100%; }
.bx.one .mi { margin-bottom: 0; }

/* パンフレット・フライヤーの面（See the pamphlet／See the flyer）＝PDF を見るのと同じで、字が読める大きさで出す
   （K 261012 12:35「なるべく大きく表示」）。絵の元の大きさまで・窓の幅まで。写真の一覧の幅（--bx-media-width）は使わない。 */
.bx.pam .mi { width: auto; max-width: 100%; }