@charset "UTF-8";
/**
 * 縦書きにする
 */
/**
 * 横書きにする
 */
/**
  * 横方向に並べるパネルを定義する
  *
  * @param {Boolean} $in-tategaki - true: 縦書き環境で利用する場合, false: 横書き環境で利用する場合
  */
/**
  * 縦方向に並べるパネルを定義する
  *
  * @param {Boolean} $in-tategaki - true: 縦書き環境で利用する場合, false: 横書き璃で利用する場合
  */
.container {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: calc(100% - 1rem - 1rem);
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin-left: 2rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  height: 100%;
}

.col-1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(8.3333333333% - 1rem);
}

.col-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(16.6666666667% - 1rem);
}

.col-3 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(25% - 1rem);
}

.col-4 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(33.3333333333% - 1rem);
}

.col-5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(41.6666666667% - 1rem);
}

.col-6 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(50% - 1rem);
}

.col-7 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(58.3333333333% - 1rem);
}

.col-8 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(66.6666666667% - 1rem);
}

.col-9 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(75% - 1rem);
}

.col-10 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(83.3333333333% - 1rem);
}

.col-11 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(91.6666666667% - 1rem);
}

.col-12 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  height: calc(100% - 1rem);
}

/**
 * list-style によるマーカー描画は縦書き(vertical-rl)環境でのブラウザ実装差が大きいため、
 * ::before + counter() による自前描画に切り替える。
 * margin-block-end / padding-inline-start / text-indent は論理プロパティのため、
 * writing-mode に応じて自動的に正しい物理方向へ変換される。
 *
 * li は通常のブロックフローのまま(flex 化しない)にすることで、writing-mode の block 方向
 * (縦書きでは水平方向)に項目ごとに独立したカラムとして並ぶ。.col のように高さを分割するの
 * ではなく、各カラムが内容量に応じた自然な長さで右から左に並ぶ見た目になる。
 *
 * ul, ol 自体の margin-block-end は、リスト内部の li 間隔($list-item-gutter)とは独立した、
 * リスト全体と次のブロック要素との間隔。li 側は :last-child で末尾の margin-block-end を
 * 0 にリセット済みのため、リスト終端から次要素までの間隔は $block-gutter 1つ分のみになり、
 * 二重の余白にはならない。
 */
ul,
ol {
  margin: 0;
  margin-block-end: 1rem;
  padding: 0;
  list-style: none;
}

/**
 * ハンギングインデント: padding-inline-start で本文(折り返し行を含む全行)を字下げし、
 * マーカーはその余白部分に position: absolute で重ねて描画する。
 *
 * マーカーを text-indent を使ったインライン内容として描画すると、li のテキストノードが
 * 「項目1」のように空白なしで始まる場合と、HTML を整形して「\n  項目1」のように先頭に
 * 改行・インデントの空白を含む場合とで見え方が変わってしまう(後者は空白がマーカーの後に
 * 続く内容として扱われ、折りたたまれずに表示される)。マーカーを絶対配置で分離することで
 * li の実際のインライン内容は本文のテキストのみになり、整形の有無によらず同じ見た目になる。
 * margin-block-end は block 方向(縦書きでは横方向)の余白のため、項目ごとに独立した
 * カラムとして並ぶ際のカラム間の隙間になる。
 */
li {
  position: relative;
  margin-block-end: 0.5em;
}
li:last-child {
  margin-block-end: 0;
}
li::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

/**
 * 箇条書きリストのマーカー(中黒)
 */
ul > li {
  padding-inline-start: 1em;
}
ul > li::before {
  content: "・";
}

/**
 * 番号付きリストのマーカー(漢数字 + 読点)
 *
 * カウンター名には list-item 以外の名前を使う。li は(display を上書きしていないため)
 * UA スタイルシートの既定値 display: list-item のままであり、"list-item" という名前は
 * ブラウザが ::marker の既定の番号付けに内部的に使う暗黙のカウンター名と衝突する。
 * この衝突時の挙動はブラウザ依存で、Safari では番号が 0 から始まってしまう不具合が確認された。
 */
ol {
  counter-reset: ol-item;
}
ol > li {
  counter-increment: ol-item;
  padding-inline-start: 2em;
}
ol > li::before {
  content: counter(ol-item, japanese-informal) "、";
}

/**
 * 入れ子リストは独立したカラムとして並ぶが、開始位置(縦書きでは上端)を少し下げることで
 * ネストであることを示す。
 */
li > ul,
li > ol {
  padding-inline-start: 0;
}

/**
 * table は writing-mode に応じて行・セルの軸が自動的に入れ替わるため、grid/list のような
 * 独自レイアウトは不要。border-collapse で隣接セルの罫線を1本にまとめ、
 * height: 100% で祖先(.col など、高さが確定した要素)いっぱいに広がるようにする。
 * 行の高さは残りの空間がテーブルレイアウトにより自動的に配分される。
 *
 * margin-block-end は論理プロパティのため、縦書き(vertical-rl)では自動的に
 * block-end 方向(物理的に左側)の余白となり、次のブロック要素との間隔を作る。
 */
table {
  border-collapse: collapse;
  height: 100%;
  margin-block-end: 1rem;
}

/**
 * th は UA デフォルトで text-align: center のため、縦書き(inline 軸が上から下)では
 * 縦方向中央揃えになってしまう。td と同じ text-align: start(縦書きでは上揃え)に統一する。
 */
th,
td {
  border: 1px solid #000;
  padding: 0.5em;
  text-align: start;
}

/**
 * border-inline-start / padding-inline-start は論理プロパティのため、
 * 縦書き(vertical-rl)では inline-start = 上側に自動的に変換される。
 * UA デフォルトの物理方向マージン(左右インデント)はノイズになるためリセットする。
 * リセット後、次のブロック要素との間隔として margin-block-end(論理プロパティ)を
 * 改めて追加する。block-end は vertical-rl では物理的に左側になる。
 */
blockquote {
  margin: 0;
  margin-block-end: 1rem;
  border-inline-start: 3px solid #999;
  padding-inline-start: 1em;
}

/**
 * pre は writing-mode を明示的に横書き(horizontal-tb)に切り替える。縦書き(vertical-rl)の
 * ページに埋め込むと、pre の block軸(横書きでは垂直方向)と親の block軸(縦書きでは水平方向)が
 * 直交(orthogonal flow)する関係になり、width: auto はブラウザ実装依存の挙動になりやすい
 * (このフレームワークの .row/.col は水平方向の確定サイズを持たず、祖先をたどっても
 * フォールバック先が存在しないため、特に挙動が安定しない)。
 * white-space: pre(折り返しなし)と組み合わせ、width: max-content で内容の最長行に
 * フィットさせることで挙動を安定させ、ページ全体の既存の横スクロール機構
 * (bindTategakiScroll)にそのまま乗せる。fit-content だと祖先の利用可能幅次第で
 * クランプされてしまい、はみ出したコードが横スクロールで回収できなくなるため使わない。
 *
 * margin-block-end(論理プロパティ)は pre 自身の writing-mode(horizontal-tb)を基準に
 * 解決されるため、親の vertical-rl の block-end(物理的に左)にはならず下方向の余白になって
 * しまう。そのため次のブロック要素との間隔は、物理プロパティ margin-left で明示する。
 * なお本フレームワークは body を vertical-rl 固定で出荷しており(yokogaki() は body には
 * 未使用)、margin-left の決め打ちはこの前提の上で成立している。将来ページ全体を横書きに
 * 対応させる場合は、この値を見直す必要がある。
 */
pre {
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
  margin: 0;
  margin-left: 1rem;
  width: max-content;
  white-space: pre;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 1em;
}

pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*,
::after,
::before {
  box-sizing: border-box;
}

/**
 * 縦書きページは横スクロールするため、macOS の「スクロールバーを常に表示」などでは
 * 画面下に横スクロールバーが表示され、表示領域の高さがその分減る。
 * 100vh / 100dvh はスクロールバー分を差し引かず縦にはみ出してしまうため、
 * html の高さを初期包含ブロック(スクロールバーを除いた表示領域)基準の 100% に固定し、
 * body → .container へ % で高さを伝播させる。
 *
 * また、macOS Safari では window(ビューポート)をスクロールする縦書きページ
 * (スクロール原点が右端で scrollX が負になる)で、ホイールイベントを JS に渡す判定領域が
 * 最初の画面の位置に固定されてしまい、少しスクロールするとイベントが届かなくなる。
 * これを避けるため、html はスクロールさせず(overflow: hidden で body の overflow が
 * ビューポートへ伝播しないようにする)、body 自体を横スクロールする要素にする。
 * 縦書きの書字方向はビューポートへ伝播し、html の幅は本文の幅まで広がるため、
 * html / body の幅も 100% に固定する。
 */
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/*# sourceMappingURL=index.css.map */