/* Blanc (written by minako) */

/**
 * required:
 *   Chrome 79+ (all)
 *   Firefox 78+ (:where)
 *   Safari 14+ (:where)
 *   iOS Safari 14+ (:where)
 *
 * *NOT* support:
 *   Internet Explorer
 */

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

/**
 * All elements and pseudo elements
 * (1) 主目的はborder-box
 * (2) 制作に便利
 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 1 */
  background: center center / contain no-repeat; /* 2 */
}

/** html
 * (1)
 * (2) iOSでのタップ色をなくす
 * (3) サブピクセル単位でのフォントレンダリング
 *     文字色が強くなりすぎるのを防ぐ
 * (4) 特定フォントでのリガチャ (fiとかflとかfflとか)
 *     GoogleFontsの5割程度はリガチャ対応だったので設定したい
 *     それ以外には無意味なので設定しておく価値がある
 * (5) とても長いインライン行を強制的に改行する
 *     https://qiita.com/kabechiyo13/items/e77c9e9e5ef36b25f05f
 */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* 2 */
  -webkit-font-smoothing: antialiased; /* 3 */
  -moz-osx-font-smoothing: grayscale; /* 3 */
  text-rendering: optimizeLegibility; /* 4 */
  overflow-wrap: anywhere; /* 5 */
  tab-size: 4;
}

/**
 * body
 * (1) 制作時に都合が良い程度の高さ
 * (2) Safariのデフォルトが明朝のときがあるので
 */
body {
  min-height: 100vh; /* 1 */
  font-family: sans-serif; /* 2 */
}

/**
 * ol, ul
 * (1) デフォルトではリストマークを無効化しておく
 */
:where(ol, ul) {
  list-style: none; /* 1 */
}

/**
 * ARIA:list ロール
 * https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/List_role
 *
 * (1) Chromeの標準40pxを:root相対にしたくてpadding-inline-start: 2.5emにしたかったが、
 *     SCSSが論理プロパティを認識できなくて問題になったので無難にpadding: revertする
 * (2) リストマーク(::marker)をもつ
 */
:where(ol, ul)[role='list'] {
  padding: revert; /* 1 */
  list-style: revert;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/**
 * Media (without canvas)
 * (1) メディアは親を超えない
 * (2) Firefox 36+, Chrome 32+, Safari 10+
 *     https://caniuse.com/?search=object-fit
 */
img,
picture,
video {
  max-width: 100%; /* 1 */
  max-height: 100%; /* 1 */
  object-fit: contain; /* 2 */
}

/**
 * hr
 * (1) colorで色指定できる
 * (2) font-sizeやheightでサイズ指定できる
 * (3) font-size依存
 */
hr {
  clear: both;
  height: 0.0625em; /* 2, 3 */
  margin: 1em 0; /* 3 */
  background-color: currentColor; /* 1 */
}

/* monospace elements */
code,
kbd,
samp,
pre {
  font-family: monospace;
}

/* pre */
pre {
  white-space: pre;
  overflow: auto;
}

/* sup/sub from destyle.css */
sub,
sup {
  position: relative;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/* ちいさな文字 */
sub,
sup,
small {
  font-size: 75%;
}

/* bolder! */
optgroup,
strong {
  font-weight: bolder;
}

/* chrome's default */
rt {
  font-size: 50%;
}

/* 下線 */
u {
  text-decoration: revert;
}

/**
 * フォームパーツの除外
 *  1) [type='file']::file-upload-button については設定もできるが、
 *     使用頻度があまりに少ないので除外しておく
 *     また -webkit-file-upload-button から名前がかわった
 *     https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button
 *
 *  2) [type='reset']は非推奨なのでサポートしない
 *
 *  3) [type='button']は利用価値がゼロであるとは断言できないので、現状残しておく。
 *
 *  4) メモだが、a[href]がありa[nohref]でないものが該当する
 */

/* クリッカブルなもののカーソル形状 */
*:where(button, select, [type='button'], [type='submit']):not(:disabled),
:any-link /* 4 */ {
  cursor: pointer;
}

/* フォームパーツのUX向上 */
*:where(button, select, [type='button'], [type='submit']) {
  touch-action: manipulation;
  user-select: none;
}

/**
 * textarea
 * (1) revert the 'white-space' property for textarea elements on Safari
 * (2) for works
 * (3) idea from ress
 */
textarea {
  display: block; /* 2 */
  width: 100%; /* 2 */
  white-space: revert; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * del
 */
del {
  text-decoration: line-through;
}