/*
 * 英語表示のときだけ読み込む調整。
 *
 * 英語は日本語の2〜3倍の文字数になるため、XD 実測値で寸法を固定している要素が
 * 器からはみ出す。このファイルは functions.php 側で英語のときだけ enqueue して
 * いるので、セレクタに言語の条件は付けていない（日本語版には読み込まれない）。
 *
 * style.css の後に読み込む。変更は最小限にとどめ、バリアント側（--main/--red/
 * --green/--navy）が持つ背景・ふち・padding・line-height には触れないこと。
 * それらを上書きすると紺ピルの余白などが崩れる。
 */

/* --------------------------------------------------------------
 * ファーストビューのコピー列
 * -------------------------------------------------------------- */

/* 日本語は <br> で改行位置を決め打ちできるため nowrap で組んであるが、
   英語は同じ文言が2〜3倍の長さになり、折り返さないまま列をはみ出して
   右のバブルに重なる。英語では折り返しを許可する。
   .p-fv__inner の指定は子に継承されるが、title と text は各自 nowrap を
   持っているので個別に戻す必要がある。 */
.p-fv__inner,
.p-fv__title,
.p-fv__text {
	white-space: normal;
}

/* 折り返しを許した分、行数が増えすぎないよう字を詰める。
   元は 56px / 36px 固定＋ブレークポイント3段。clamp で一本化する。 */
.p-fv__title {
	font-size: clamp(28px, 3.2vw, 40px);
}
.p-fv__lead {
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.4;
}
/* リード「Cheaper than machining, at volume.」は短い1文なので1行で見せる。
   折り返すと行間ごと2行分の高さが増え、縦中央寄せのコピー列が上へ伸びて
   ヘッダーのメニューに近づく。PC では折り返さず、マップ列側へ少しはみ出してよい
   （ボタン行と同じ扱い）。SP は1カラムで幅が足りないので折り返しのまま。 */
@media (min-width: 901px) {
	.p-fv__lead {
		white-space: nowrap;
	}
}

/* ボタンの文言も長くなる。列に収まらないときはマップ列へはみ出さず折り返す。 */
.p-fv__buttons {
	flex-wrap: wrap;
	width: auto;
}

/* --------------------------------------------------------------
 * ファーストビューのバブル
 * -------------------------------------------------------------- */

.c-bubble {
	/* --fs は XD 実寸から PHP がインラインで1つずつ付けているため、一律の値で
	   上書きすると円ごとの大小関係が失われる。各自の値に係数を掛けて比率を保つ。 */
	font-size: calc(var(--fs, 2cqw) * 0.75);

	/* style.css の place-items: center は justify-items も center にするため、
	   中身が max-content 幅になり円より外へ広がれてしまう。折り返す先の制約が
	   無いので overflow-wrap も効かない。stretch にして円の幅で折り返させる。
	   align-items は center のまま（上書きしない）。 */
	justify-items: stretch;

	/* manufactured / Optimization など長い単語を円内で分割する */
	overflow-wrap: anywhere;
}

/* 円は上下ほど幅が狭くなるので、左右に余白を入れて縁に文字が触れないようにする。
   紺ピル（--navy）は独自の padding を持つため除外する。 */
.c-bubble:not(.c-bubble--navy) {
	padding-inline: 0.6em;
}

/* --------------------------------------------------------------
 * 会社概要：アクセスの表
 * -------------------------------------------------------------- */

/* 左の見出しは日本語（所在地・電話番号など）に合わせて幅100px・折り返しなしで
   組んであるため、telephone number や If you are traveling by car のような
   英語の見出しが右の値にはみ出して重なる。折り返しを許して、幅も少し広げる。 */
.c-table--access th[scope="row"] {
	width: 150px;
	padding-right: 16px;
	white-space: normal;
	overflow-wrap: normal;
}