@charset "UTF-8";
/* ============================================================
   基本（body・文字・リンク・フォーム）と、本文（#contents）の文章の指定
   - 本文の指定は :where(#contents) で書く。:where() の中は優先度が 0 なので、
     プラグインや部品が自分のクラスで書いた指定に必ず負ける（旧 CSS の #contents a が強すぎた問題の対策）
   - スマホを基準に書き、768px 以上で PC の値に上書きする
   - ただし旧 CSS が「スマホのときだけ」付けていた指定（本文の画像・表・入力欄を幅100%にする など）は、
     PC で打ち消すと本文の style 属性まで消してしまうので、max-width の中にそのまま書く
   ============================================================ */
@layer base {
	body {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border: 0;
		position: relative;
		font-family: var(--font-base);
		font-size: var(--fs-base);
		letter-spacing: var(--ls-base);
		line-height: var(--lh-base);
		color: var(--c-body);
		background-color: var(--c-white);
		text-align: center;
		-webkit-text-size-adjust: 100%;   /* 旧 CSS は none（文字の拡大を禁止）。読みやすさのため 100% にしている */
		text-size-adjust: 100%;
	}

	p {
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 0;
		text-align: left;
	}

	h2 { text-align: center; }
	strong { font-weight: bold; }
	ol { padding: 0 20px 10px 30px; text-align: left; }
	ol li { padding: 0; }

	/* リンク */
	a {
		color: var(--c-text);
		text-decoration: none;
	}
	a:focus:not(:focus-visible) { outline: none; }   /* 旧 CSS は outline: none。キーボード操作のときだけ枠を出す */
	a:hover { color: var(--c-link); }

	/* 電話：スマホだけ押せる（PC では押せない）。旧 sp.css と同じ */
	a[href^="tel:"] { cursor: pointer; pointer-events: auto; }

	/* フォーム（旧 style.css と同じ固定幅。本文の中はスマホで幅100%にする） */
	input { width: 420px; }
	textarea { width: 570px; border: 1px solid #CCC; }

	/* 本文（#contents）のリンク */
	:where(#contents) a { color: var(--c-link); text-decoration: underline; }
	:where(#contents) a:hover { color: var(--c-link); text-decoration: underline; }

	@media (min-width: 768px) {
		p {
			font-size: 14px;
			margin-bottom: 15px;
			text-align: inherit;
		}
		a:hover { text-decoration: underline; }
		a[href^="tel:"] { cursor: default; pointer-events: none; }
		:where(#contents) a:hover { color: var(--c-text); text-decoration: none; }
	}

	/* スマホのときだけの指定（旧 sp.css と同じ。!important は本文の style 属性に勝つため） */
	@media (max-width: 767.98px) {
		:where(#contents) div { line-height: 1.6; }
		:where(#contents) img { max-width: 100%; height: auto !important; }
		:where(#contents) input,
		:where(#contents) textarea { width: 100% !important; box-sizing: border-box; font-size: 16px; }
		:where(#contents) select { font-size: 16px; }
	}
}