/* ==================================================================
 * 本文の組み
 *
 * 和文フォントが未指定で端末任せだったため Noto Sans JP を指定する。
 * 欧文は Montserrat を先に置く。Montserrat は和文の字形を持たないので、
 * 日本語は自動的に Noto Sans JP に落ちる。
 * ============================================================== */

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.entry-title a,
.site-title,
.site-title a {
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
}

/* ---------- 行間 ---------- */

/*
 * Astra は body に line-height を em 単位で入れるため、算出された固定px
 * （1.9em × 17px = 32.3px）が小さい文字にもそのまま継承され、
 * 13pxのキャプションが32pxの行送りになっていた。
 * 単位なしにして、各要素が自分のフォントサイズで計算するようにする。
 */
body,
button,
input,
select,
textarea {
	line-height: 1.75;
}

/*
 * 箇条書きの項目間。行間1.9で3〜5行に折り返す項目が続くと、
 * 間隔が無いままでは項目の切れ目が分からなくなる。
 */
.entry-content li {
	margin-bottom: 12px;
}

.entry-content li:last-child {
	margin-bottom: 0;
}

/* 読ませる本文だけ、日本語の長文向けに広げる */
.entry-content p,
.entry-content li,
.aiy-faq-a p {
	line-height: 1.9;
}

/* ---------- 記事タイトル ---------- */

/*
 * 記事タイトルが 30px / 太さ400 で、本文中の h2（28px / 太さ600）より
 * 弱く見えていた。Astra のテーマCSSがクラス指定で太さ400を当てているため、
 * 設定値では変えられず、ここで指定する。
 */
.single .entry-title,
.single header.entry-header .entry-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.45;
}

@media (max-width: 921px) {
	.single .entry-title,
	.single header.entry-header .entry-title {
		font-size: 28px;
	}
}

@media (max-width: 544px) {
	.single .entry-title,
	.single header.entry-header .entry-title {
		font-size: 26px;
	}
}

/* ---------- 記事本文の1行の長さ ---------- */

/*
 * コンテナが1240pxあるため本文が987px＝1行62文字になっていた。
 * 日本語は40〜46文字が読みやすいので、読む列だけ760pxに絞る。
 * アイキャッチは絞らず、見出しと本文だけを中央に寄せる。
 */
@media (min-width: 922px) {
	.single .aiy-crumb,
	.single .entry-header,
	.single .entry-content > *:not(.alignfull):not(.alignwide) {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}

	/* 表も本文と同じ幅に収める（上の一括指定がそのまま効く） */
}

/* ---------- 記事中の表 ---------- */

.aiy-table-scroll {
	margin: 28px 0;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

/*
 * セルは本文の17pxを継いでいて、3列の表には大きすぎた。
 * 本文と同じ760px幅のまま各行を3行以内に収められる上限が14.5px
 * （15pxにすると4行に折り返して表が445pxまで伸びる）。
 */
.entry-content table th,
.entry-content table td {
	font-size: 14.5px;
	line-height: 1.65;
	/* ツールがインラインで 6px 10px を出すため強く指定する */
	padding: 10px 12px !important;
	vertical-align: top;
}

.entry-content table th {
	background: #f2f7fa;
	font-weight: 700;
	white-space: nowrap;
}

.entry-content table tbody tr:nth-child(even) td {
	background: #fafbfd;
}

/*
 * 狭い画面では潰さず横スクロールにする。
 * min-width を効かせるために外側の箱が要る（プラグイン側で付けている）。
 */
@media (max-width: 921px) {
	.aiy-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.aiy-table-scroll table {
		min-width: 620px;
	}

	.entry-content table th,
	.entry-content table td {
		font-size: 14px;
		padding: 9px 11px !important;
	}
}

/* ---------- モバイルの本文サイズ ---------- */

/*
 * Astra は 921px 以下でルートを 91.2% に縮める。
 * rem 指定の本文が 14.6px まで落ちるため、記事の本文だけ px で戻す。
 */
@media (max-width: 921px) {
	.entry-content p,
	.entry-content li {
		font-size: 16px;
	}
}

/* ---------- 色指定済みブロック内の見出し ---------- */

/*
 * テーマは見出しに一律 #000f2b を当てるため、文字色を指定したブロック
 * （暗い背景のCTAボックスなど）の中でも見出しだけ暗いままになり、
 * 実測 1.12:1 でほぼ読めなかった。ブロックの指定色を継がせる。
 */
.wp-block-group.has-text-color h1,
.wp-block-group.has-text-color h2,
.wp-block-group.has-text-color h3,
.wp-block-group.has-text-color h4,
.wp-block-group.has-text-color h5,
.wp-block-group.has-text-color h6,
.wp-block-cover.has-text-color h1,
.wp-block-cover.has-text-color h2,
.wp-block-cover.has-text-color h3 {
	color: inherit;
}

/* ---------- FAQブロック ---------- */

/*
 * 自作のFAQは h2 20px / h3 15px で、記事の見出しスケールから外れていた。
 * 「よくある質問」は記事の h2 と、Q は h3 相当として揃える。
 */
.aiy-faq-title {
	font-size: 28px;
}

.aiy-faq-q {
	font-size: 19px;
}

.aiy-faq-a p {
	font-size: 16px;
}

@media (max-width: 921px) {
	.aiy-faq-title {
		font-size: 24px;
	}

	.aiy-faq-q {
		font-size: 18px;
	}
}

@media (max-width: 544px) {
	.aiy-faq-title {
		font-size: 22px;
	}

	.aiy-faq-q {
		font-size: 17px;
	}
}