/*
  Modern CSS Reset(Josh W. Comeau氏のモダンリセットをベースに一部カスタマイズ)
  参照: https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. box-sizingをborder-boxに統一し、widthやheightの計算をわかりやすくする */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. すべての要素のデフォルトmarginを削除 */
* {
	margin: 0;
}

/* 3. 基準フォントサイズを16pxに固定(remでサイズ指定する際の基準値になる) */
html {
	font-size: 16px;
	/* .reveal-left/.reveal-right等、画面外で横方向にtransformされた要素がページ全体の横スクロールを
	   発生させてしまうのを防ぐ(該当要素が見えるようになるまでtranslateXがかかっているため) */
	overflow-x: hidden;
}

body {
	/* 4. line-heightをデフォルト2に設定(読みやすさを重視) */
	line-height: 2;
	/* 5. テキストの表示をなめらかにする */
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* 6. 画像・動画などのメディア要素をレスポンシブ対応にする */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 7. aタグのデフォルトの文字色・下線を解除し、親要素のスタイルを継承させる */
a {
	color: inherit;
	text-decoration: none;
}

/* 8. フォームコントロールにも親要素と同じフォント設定を継承させる */
input,
button,
textarea,
select {
	font: inherit;
}

/* 9. 長い単語などによるテキストのはみ出しを防ぐ */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 10. 段落・見出しの改行位置を読みやすく調整 */
p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/* 11. アニメーションを減らす設定をしているユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}