@charset "UTF-8";
/**
 * 縦書きにする
 */
/**
 * 横書きにする
 */
/**
  * 横方向に並べるパネルを定義する
  *
  * @param {Boolean} $in-tategaki - true: 縦書き環境で利用する場合, false: 横書き環境で利用する場合
  */
/**
  * 縦方向に並べるパネルを定義する
  *
  * @param {Boolean} $in-tategaki - true: 縦書き環境で利用する場合, false: 横書き璃で利用する場合
  */
.container {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: calc(100vh - 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: 0;
  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 など、高さが確定した要素)いっぱいに広がるようにする。
 * 行の高さは残りの空間がテーブルレイアウトにより自動的に配分される。
 */
table {
  border-collapse: collapse;
  height: 100%;
}

/**
 * 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 デフォルトの物理方向マージン(左右インデント)はノイズになるためリセットする。
 */
blockquote {
  margin: 0;
  border-inline-start: 3px solid #999;
  padding-inline-start: 1em;
}

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

body {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 0;
}

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