/**
 * サブスク LP: 日本語の改行位置を整える（No.95）。
 *
 * 元は Shopify テーマの CSS をそのまま持ってきており、日本語向けの
 * 折り返し指定が入っていない。ブラウザ既定のままだと英文と同じ規則で
 * 折り返すため、助詞・助動詞の途中で切れて読みにくい箇所が出る。
 *
 *   「…ご利用いただ / けます。」
 *   「…どうすればいいです / か？」
 *   「…発送されるのはいつです / か？」
 *
 * 直し方は2つある。
 *   A) 文中に <br> を入れて手で改行位置を決める
 *   B) CSS で日本語の折り返し規則を指定する
 * A は画面幅ごとに最適な位置が変わるため、SP で直しても PC で崩れる
 * （逆も同様）。文言を編集するたびに調整し直す必要もある。
 * ここでは B を採る。
 *
 * word-break: auto-phrase … 文節（意味のまとまり）を優先して折り返す。
 *   対応していないブラウザでは無視され、従来どおりの折り返しになるだけで
 *   壊れない。Safari 17 未満・Firefox は未対応（＝現状維持）。
 * line-break: strict … 禁則を厳しくし、小書き文字や長音符が行頭に来るのを防ぐ。
 * overflow-wrap: anywhere は使わない。長い URL 以外では単語の途中で
 *   切れてしまい、かえって読みにくくなるため。
 *
 * 対象はサブスク LP の本文だけに絞る。見出しやボタンはデザイン上の
 * 改行位置が決まっているので触らない。
 */

.lp-subscription-container p,
.lp-subscription-container .description,
.subscription-flow__flow--description,
.faq-question,
.faq-answer,
.plan-description {
	word-break: auto-phrase;
	line-break: strict;
}


/*
 * ★スマホでの個別の改行崩れ（No.95・小田さん指摘）
 */

/* ①「あなた専用の MyMoods POD BOX」の特典2つ。
 *   .box-features は flex-wrap: nowrap の横並びで、文字数の多い右
 *   （「縛りなし。いつでも解約できるから安心！」205px）に押されて
 *   左が「いつでも送 / 料無料」と割れる。SP は2行に落として各行を
 *   横いっぱい使わせる。PC は横並びのままで変えない。 */
@media screen and (max-width: 750px) {
	.box-features {
		flex-wrap: wrap;
	}

	.box-features .feature-check {
		flex: 1 1 100%;
	}
}

/* ③ FLOW「お届けサイクル」の説明。
 *   「毎月27日配送。初回は即日配送（土日・祝を除く）。」が
 *   SP では「…（土日・ / 祝を除く）。」と括弧の中で割れる。
 *
 *   ★word-break: auto-phrase では直らない。文節では切れているものの、
 *     2行に収める限り括弧内での折り返しは避けられないため（実測で確認）。
 *     ここは句点で行を分けるのが読みやすいので、テンプレート側に
 *     <br class="mm-br-sp"> を置き、SP でだけ有効にする。
 *   PC は1行に収まるので改行を無効化する（不要な改行を残さない）。 */
.mm-br-sp {
	display: none;
}

@media screen and (max-width: 750px) {
	.mm-br-sp {
		display: inline;
	}
}