@charset "UTF-8";

/*
 * 読みもの（投稿）のタイトルと本文
 *
 * 記事ページ（single.php）とブロックエディターの両方から読む。見出しや行間を
 * ここで変えれば、公開後の見え方と編集画面の見え方が一緒に変わる。
 *
 *   記事ページ   header.php が style.css のあとに読む
 *   エディター   functions.php の minohan_reading_editor_style() が読む
 *
 * 同じ本文でも、記事ページとエディターでは包む要素のクラスが違うので、
 * :is() で両方を並べて当てる。詳細度は並べたうちの高いほう（クラス 1 つ）に
 * なり、クラスを 1 つだけ書いたときと変わらない。
 *
 *   タイトル     記事ページ .reading_single_ttl    エディター .editor-post-title
 *   本文         記事ページ .reading_single_body   エディター .is-root-container
 *
 * **ここに置くのは両方で同じになるものだけ。**記事ページだけの配置（タイトルの
 * 上の余白など）は style.css、エディターだけの補い（reset.css の代わりなど）は
 * editor-style.css に置く。
 */

/* タイトル
------------------------------------------------------*/

:is(.reading_single_ttl, .editor-post-title) {
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.5;
	color: #6C553E;
}

/* 本文。エディターの出力をそのまま受けるので、要素名で当てる
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) {
	margin-top: 30px;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	line-height: 1.875;
	color: #333;
}

:is(.reading_single_body, .is-root-container) > * + * {
	margin-top: 1.5em;
}

:is(.reading_single_body, .is-root-container) h2 {
	margin-top: 55px;
	padding: 2px 0 2px 18px;
	border-left: solid 8px #EE631A;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
	color: #6C553E;
}

:is(.reading_single_body, .is-root-container) h3 {
	margin-top: 35px;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.6;
	color: #333;
}

:is(.reading_single_body, .is-root-container) h2 + *,
:is(.reading_single_body, .is-root-container) h3 + * {
	margin-top: 12px;
}

:is(.reading_single_body, .is-root-container) img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

:is(.reading_single_body, .is-root-container) figure {
	margin-left: 0;
	margin-right: 0;
}

:is(.reading_single_body, .is-root-container) a {
	color: #D56936;
	text-decoration: underline;
}

:is(.reading_single_body, .is-root-container) ul,
:is(.reading_single_body, .is-root-container) ol {
	padding-left: 1.5em;
}

:is(.reading_single_body, .is-root-container) ul {
	list-style: disc;
}

:is(.reading_single_body, .is-root-container) ol {
	list-style: decimal;
}

/* 太字・マーカー
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) :is(strong, b) {
	font-weight: 700;
}

/* 書式の「ハイライト」（class="has-inline-color" と色の style が付く）は
   選んだ色のまま出す。何も付かない <mark> だけ、TOP の注記
   （.item101_note_marker）と同じ黄色の下線にする。 */
:is(.reading_single_body, .is-root-container) mark:not(.has-inline-color) {
	background: none;
	color: inherit;
	border-bottom: solid 4px #FFED8B;
}


/* ここから下はブロックごとの指定
   **サイトの既存パーツに合わせる。**デザインが無いため、どのパーツに
   合わせたかを見出しに書いておく。
======================================================*/

/* 見出し h4（h3 の下の小見出し。色は h2 と同じ茶）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) h4 {
	margin-top: 28px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	color: #6C553E;
}

:is(.reading_single_body, .is-root-container) h4 + * {
	margin-top: 8px;
}

/* キャプション（画像・表・ギャラリー・埋め込み共通。一覧の日付と同じ灰色）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-element-caption {
	margin: 8px 0 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #707070;
}

/* リストの入れ子
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) li > :is(ul, ol) {
	margin-top: 0.4em;
}

:is(.reading_single_body, .is-root-container) ul ul {
	list-style: circle;
}

/* 表（送料ページの送料表 img/postage.png に合わせる。見出しは茶の地に白）
------------------------------------------------------*/

/* 列の多い表はスマホ幅で横に送る */
:is(.reading_single_body, .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:is(.reading_single_body, .is-root-container) .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #222120;
}

:is(.reading_single_body, .is-root-container) .wp-block-table :is(th, td) {
	padding: 10px 14px;
	border: solid 1px #B3B3B4;
}

:is(.reading_single_body, .is-root-container) .wp-block-table :is(thead, tfoot) {
	border: none;
}

:is(.reading_single_body, .is-root-container) .wp-block-table thead :is(th, td) {
	background-color: #6C553E;
	color: #fff;
	font-weight: 700;
	text-align: center;
}

:is(.reading_single_body, .is-root-container) .wp-block-table :is(tbody th, tfoot td) {
	background-color: #FDF8F3;
	font-weight: 700;
}

:is(.reading_single_body, .is-root-container) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #FDF8F3;
}

/* 引用（よくある質問の囲み .qa_list に合わせた生成りの地）
------------------------------------------------------*/

/* 左右の margin はここで指定しないこと。ブラウザ既定の余白は、記事ページでは
   reset.css、エディターでは editor-style.css が消している。ここで 0 にすると、
   エディターがブロックを本文の幅で中央に置く margin: auto まで上書きし、
   引用だけが画面の左端に寄っていた。 */
:is(.reading_single_body, .is-root-container) .wp-block-quote {
	position: relative;
	padding: 24px 30px 24px 64px;
	border: none;
	background-color: #FDF8F3;
}

:is(.reading_single_body, .is-root-container) .wp-block-quote::before {
	content: "“";
	position: absolute;
	top: 18px;
	left: 22px;
	font-family: "Zen Old Mincho", serif;
	font-size: 52px;
	line-height: 1;
	color: #D56936;
}

:is(.reading_single_body, .is-root-container) .wp-block-quote > * + * {
	margin-top: 0.8em;
}

:is(.reading_single_body, .is-root-container) .wp-block-quote cite {
	display: block;
	font-style: normal;
	font-size: 14px;
	color: #707070;
}

:is(.reading_single_body, .is-root-container) .wp-block-quote cite::before {
	content: "― ";
}

/* ボタン（塗り: TOP の「購入する」.item201_buy_btn、
   枠線: 下層ページの導線 .page_link_btn）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-buttons {
	gap: 16px;
}

:is(.reading_single_body, .is-root-container) .wp-block-button__link {
	display: inline-block;
	min-width: 280px;
	padding: 14px 40px;
	border: solid 2px #F05C5C;
	border-radius: 100vh;
	background-color: #F05C5C;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

:is(.reading_single_body, .is-root-container) .wp-block-button__link:hover {
	background-color: #fff;
	color: #F05C5C;
}

/* 色を選んだボタンは、塗りと同じ色の枠が残らないようにする */
:is(.reading_single_body, .is-root-container) .wp-block-button__link.has-background {
	border-color: transparent;
}

:is(.reading_single_body, .is-root-container) .is-style-outline > .wp-block-button__link {
	border-color: #6C553E;
	background-color: #fff;
	color: #6C553E;
}

:is(.reading_single_body, .is-root-container) .is-style-outline > .wp-block-button__link::after {
	content: "＞";
	margin-left: 15px;
}

:is(.reading_single_body, .is-root-container) .is-style-outline > .wp-block-button__link:hover {
	background-color: #6C553E;
	color: #fff;
}

/* 区切り（サイドバーの見出しの下線と同じ灰色の細線）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-separator {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* 線の色は currentColor（WordPress の指定）なので、色を選んだときはその色になる */
:is(.reading_single_body, .is-root-container) .wp-block-separator:not(.has-text-color) {
	color: #D3D1D0;
}

:is(.reading_single_body, .is-root-container) .wp-block-separator:not(.is-style-dots) {
	border-top-width: 1px;
}

/* ギャラリー（特徴ページのショールーム写真 .page_link_photos と同じ間隔）
------------------------------------------------------*/

/* 画像の幅は WordPress が calc(33.33% - var(--wp--style--unstable-gallery-gap) * .66667)
   で出す。この変数はギャラリーに付くレイアウトのクラスが 0.5em で上書きするため、
   ギャラリー側で 20px にしても効かず、実際の間隔（20px）と計算に使う間隔（8px）が
   ずれて、3 列が 2 列＋1 枚に崩れていた。変数は画像それぞれが読むので、画像の側で持つ。 */
:is(.reading_single_body, .is-root-container) .wp-block-gallery {
	gap: 20px;
}

:is(.reading_single_body, .is-root-container) .wp-block-gallery > .wp-block-image {
	--wp--style--unstable-gallery-gap: 20px;
}

/* メディアとテキスト・カラム（TOP 下部のカード .page_link_cards と同じく、
   写真と文章の間を広めに取る）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-media-text > .wp-block-media-text__content {
	padding: 0 0 0 40px;
}

:is(.reading_single_body, .is-root-container) .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding: 0 40px 0 0;
}

:is(.reading_single_body, .is-root-container) :is(.wp-block-media-text__content, .wp-block-column, .wp-block-group) > * + * {
	margin-top: 1em;
}

/* 間隔を指定したカラムは、その値（WordPress がクラス 1 つで出す）を優先させる
   ため、:where() で詳細度をクラス 1 つに抑える */
:where(.reading_single_body, .is-root-container) .wp-block-columns {
	gap: 40px;
	margin-bottom: 0;
}

/* 背景色付きのグループ（よくある質問の囲みと同じ余白）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-group.has-background {
	padding: 24px 30px;
}

/* 詳細（送料ページのよくある質問 .qa_list に合わせる。開閉の印だけ足す）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-details {
	padding: 20px 30px 20px 60px;
	background-color: #FDF8F3;
}

:is(.reading_single_body, .is-root-container) .wp-block-details + .wp-block-details {
	margin-top: 16px;
}

:is(.reading_single_body, .is-root-container) .wp-block-details summary {
	position: relative;
	padding-right: 2em;
	list-style: none;
	font-family: "Zen Old Mincho", serif;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.5;
	color: #6C553E;
}

:is(.reading_single_body, .is-root-container) .wp-block-details summary::-webkit-details-marker {
	display: none;
}

:is(.reading_single_body, .is-root-container) .wp-block-details summary::before {
	content: "Q";
	position: absolute;
	top: -2px;
	left: -1.4em;
	font-size: 22px;
	color: #EE3F1C;
}

:is(.reading_single_body, .is-root-container) .wp-block-details summary::after {
	content: "＋";
	position: absolute;
	top: 0;
	right: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	color: #6C553E;
}

:is(.reading_single_body, .is-root-container) .wp-block-details[open] summary::after {
	content: "－";
}

:is(.reading_single_body, .is-root-container) .wp-block-details > :not(summary) {
	margin-top: 0.6em;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #222120;
}

/* 埋め込み（YouTube などの動画。header.php に body_class() が無く
   WordPress の縦横比の指定 .wp-embed-responsive が効かないので、ここで持つ）
------------------------------------------------------*/

:is(.reading_single_body, .is-root-container) .wp-block-embed.is-type-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}


@media screen and (max-width: 599px) {

	:is(.reading_single_ttl, .editor-post-title) {
		font-size: 22px;
	}

	:is(.reading_single_body, .is-root-container) {
		margin-top: 20px;
		font-size: 15px;
	}

	:is(.reading_single_body, .is-root-container) h2 {
		margin-top: 40px;
		padding-left: 14px;
		border-left-width: 6px;
		font-size: 19px;
	}

	:is(.reading_single_body, .is-root-container) h3 {
		margin-top: 28px;
		font-size: 17px;
	}

	:is(.reading_single_body, .is-root-container) h4 {
		margin-top: 24px;
		font-size: 16px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-table table {
		font-size: 13px;
	}

	/* 日本語は 1 文字ずつ折り返せるので、列が多いと縦に細長くつぶれる。
	   最小幅を持たせて、収まらないぶんは横に送る */
	:is(.reading_single_body, .is-root-container) .wp-block-table :is(th, td) {
		min-width: 5em;
		padding: 8px 10px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-quote {
		padding: 18px 20px 18px 48px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-quote::before {
		top: 14px;
		left: 14px;
		font-size: 40px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-button__link {
		min-width: 240px;
		max-width: 100%;
		font-size: 16px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-gallery {
		gap: 10px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-gallery > .wp-block-image {
		--wp--style--unstable-gallery-gap: 10px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-group.has-background {
		padding: 18px 20px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-details {
		padding: 16px 20px 16px 44px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-details summary {
		font-size: 17px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-details summary::before {
		font-size: 20px;
	}

	:is(.reading_single_body, .is-root-container) .wp-block-details > :not(summary) {
		font-size: 15px;
	}
}

/* メディアとテキストは WordPress が 600px 以下で縦に積む（is-stacked-on-mobile）。
   境目を合わせないと、600px ちょうどで積んだまま左の余白が残る。 */
@media (max-width: 600px) {

	:is(.reading_single_body, .is-root-container) .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding: 20px 0 0 0;
	}
}