/* ===========================================================
   Foundation / Base
   要素単位のベーススタイル（モバイルファースト）。
   =========================================================== */

html {
	font-size: 100%; /* 16px */
	scroll-behavior: smooth;
	/* 横スクロール防止：万一どこかではみ出ても画面外で切り捨てる。
	   overflow-x: clip は hidden と違い新たなスクロールコンテナを作らないため、
	   position: sticky を壊さず安全。 */
	overflow-x: clip;
}

body {
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	font-feature-settings: "palt";
	overflow-x: clip;
}

/* タッチデバイスでタップ時の iOS デフォルト灰色ハイライトを無効化。
   タップ後に色が残って見える問題の対策。デスクトップでは元々表示されない。 */
a,
button,
[role="button"],
input,
textarea,
select {
	-webkit-tap-highlight-color: transparent;
}

a {
	color: var(--color-link);
	transition: var(--transition-base);
}

/* ホバーは PC マウス環境のみ（min-width: 768px AND hover: hover）。
   一部の Android タブレットや Chrome DevTools のモバイルモードでも
   hover: hover を報告するケースがあるため、breakpoint も併用してSPでは
   絶対に発動しないようにする。 */
@media (hover: hover) and (min-width: 768px) {
	a:hover {
		color: var(--color-link-hover);
	}
}

strong,
b {
	font-weight: 700;
}

img {
	vertical-align: bottom;
	/* 画像の右側はみ出し防止（コンテンツ内画像が親より大きい場合の保険） */
	max-width: 100%;
	height: auto;
}

/* セレクション色 */
::selection {
	background-color: var(--color-pink-300);
	color: var(--color-white);
}