@charset "UTF-8";

/* =======================================================
英語・繁体字ページ用の表示調整（add-styles.php から ja 以外のときだけ読み込む）
日本語の文字数に合わせた固定幅・固定高さを、訳文の長さに合わせて可変にする
======================================================= */

/* フォームの「必須／任意」バッジ（文字を言語に合わせる） */
html:lang(en) .el-required::after {
	content: "Required";
}
html:lang(en) .el-optional::after {
	content: "Optional";
}
html:lang(en) .el-required::after,
html:lang(en) .el-optional::after {
	width: auto;
	padding-inline: 0.6em;
}
html:lang(zh) .el-required::after {
	content: "必填";
}
html:lang(zh) .el-optional::after {
	content: "選填";
}

/* ラベルがバッジと重ならないよう、バッジ分の余白を確保 */
html:not(:lang(ja)) .el-form-ttl {
	padding-right: 150px;
}

/* チェックボックスの選択肢（折り返してもボックスが潰れない） */
html:not(:lang(ja)) .bl-check-wrapper .wpcf7-list-item-label {
	line-height: 1.35;
}
html:not(:lang(ja)) .bl-check-wrapper .wpcf7-list-item-label::before {
	flex-shrink: 0;
}

/* 確認画面：ラベルの下にバッジを置く（ラベル列が狭くならないように） */
html:not(:lang(ja)) .bl-form.bl-check .el-form-ttl {
	flex-direction: column;
	align-items: flex-start;
	padding-right: 24px;
}
html:not(:lang(ja)) .bl-form.bl-check .el-form-ttl::after {
	position: static;
	transform: none;
	margin-top: 8px;
}

/* 完了画面などの「トップへ戻る」ボタン（矢印と文字が重ならない） */
html:not(:lang(ja)) .el-btn.--more {
	width: auto;
	min-width: 237px;
	height: auto;
	min-height: 74px;
	padding: 0.5em 2.5em 0.5em 1.5em;
	line-height: 1.4;
}

/* フォームの送信・戻るボタンの外枠：中の input が余白と大きさを持つので、外枠には上の「トップへ戻る」用の余白を付けない */
html:not(:lang(ja)) .bl-btn-wrapper .el-btn.--more {
	min-width: 0;
	min-height: 0;
	padding: 0;
}

/* 詳細ページ右の「最新記事」枠の「一覧へ」ボタン：上の「トップへ戻る」用の指定で枠いっぱいに広がり背も高くなるので、日本語と同じ大きさに戻す */
html:not(:lang(ja)) .bl-aside .el-btn.--more {
	width: 237px;
	min-width: 0;
	height: 48px;
	min-height: 0;
	padding: 0;
}

/* 送信・戻るボタン（訳文が長くても切れない） */
html:not(:lang(ja)) .bl-form .bl-btn-wrapper .el-btn {
	width: auto;
	height: auto;
}
html:not(:lang(ja)) .bl-btn-wrapper .wpcf7-form-control {
	width: auto;
	min-width: 352px;
	height: auto;
	min-height: 74px;
	padding: 0.5em 2.5em 0.5em 1.5em;
	line-height: 1.4;
}
html:not(:lang(ja)) .bl-btn-wrapper .wpcf7-previous {
	min-width: 204px;
}

/* タイトルの1文字だけ残る折り返しを防ぐ */
html:not(:lang(ja)) .el-lower-mv-ttl,
html:not(:lang(ja)) .el-sub-ttl {
	text-wrap: balance;
}

/* トップ（PC）：英語版の背景は大愚和尚が画像の左端寄りにあるため、幅が狭くなっても顔が切れないよう左寄せにする */
@media screen and (min-width: 751px) {
	html:not(:lang(ja)) .bl-mv.--en {
		background-position: left top;
	}
}

/* ヘッダーの言語切替：「English」の g など下に伸びる文字が切れないよう、文字の枠の高さを広げる */
html:not(:lang(ja)) .bl-head-lang .trp-language-item-name {
	height: auto;
	line-height: 1.5;
	padding-bottom: 2px;
}

/* 実践会のタイムテーブル：時刻（10:30 など）を途中で折り返さない */
html:not(:lang(ja)) .bl-time-table th {
	white-space: nowrap;
}

/* 同じ行のボタンは、文字の行数が違っても高さを揃える */
html:not(:lang(ja)) .bl-event .bl-btn-list > li {
	display: flex;
}

/* トップ：イベント案内の4ボタン（文字を中央揃え・左右同じ余白にして、改行の有無で字下げが変わらないようにする） */
html:not(:lang(ja)) .bl-event .el-btn.--normal {
	box-sizing: border-box;
	height: auto;
	min-height: 80px;
	padding: 8px 14px;
	text-align: center;
	letter-spacing: 0.02em;
	font-size: 20px;
}

/* トップ：9つの知恵の一覧（高さを内容に合わせる） */
html:not(:lang(ja)) .bl-elements-item {
	height: auto;
	min-height: 86px;
}
html:not(:lang(ja)) .bl-elements-item > dd > button {
	padding-block: 8px;
	padding-right: 40px;
}
@media screen and (min-width: 751px) {
	html:lang(en) .bl-elements-item > dd > button {
		font-size: 16px;
		line-height: 1.6;
		text-wrap: balance;
	}
}
html:lang(en) .bl-elements-item > dt > button {
	flex-wrap: wrap;
	align-content: center;
	padding-block: 8px;
}
/* 英語版は「SEIGAN [SEIGAN]」と同じ語が並ぶため、【ローマ字】側は出さない（一覧のボタンと詳細モーダルの見出し） */
html:lang(en) .bl-elements-item > dt > button span:last-child,
html:lang(en) .el-detail-ttl span {
	display: none;
}

/* トップ「Rethinking Keiei…」見出し（PC）：SP 用の改行を PC でも効かせ、2行に分ける */
@media screen and (min-width: 751px) {
	html:lang(en) .bl-about .el-main-ttl br.sp {
		display: inline;
	}
}

/* フッター（PC）：言語が変わっても、日本語と同じ位置・列幅にする。
   訳文が長くても列がロゴの下へ落ちず、折り返した2行目の頭も1行目の文字に揃う */
@media screen and (min-width: 751px) {
	html:not(:lang(ja)) .bl-foot-gnav.pc {
		flex: 0 0 761px;
		width: 761px;
	}
	html:not(:lang(ja)) .bl-foot-gnav.pc .bl-foot-gnav-inner {
		flex: 0 0 auto;
	}
	html:not(:lang(ja)) .bl-foot-gnav.pc .bl-foot-gnav-inner:nth-child(1) {
		width: 264px;
	}
	html:not(:lang(ja)) .bl-foot-gnav.pc .bl-foot-gnav-inner:nth-child(2) {
		width: 214px;
	}
	html:not(:lang(ja)) .bl-foot-gnav.pc .bl-foot-gnav-inner:nth-child(3) {
		width: 219px;
	}
	html:not(:lang(ja)) .bl-foot-gnav-inner > li {
		padding-block: 2.4px;
	}
	html:not(:lang(ja)) .bl-foot-gnav-inner > li > a {
		display: block;
	}
	html:not(:lang(ja)) .bl-foot-gnav-inner > li > a::before {
		top: 7px;
	}
}

/* ヘッダーのメニュー下段リンク：折り返した2行目も、丸印の右（1行目の文字）に頭を揃える */
html:not(:lang(ja)) .bl-gnav-btm .bl-gnav-inner > li > a {
	display: block;
}

/* 申込の詳細リスト：「：」の右に文字を揃える（2行目が「：」の下へ回り込まない） */
html:not(:lang(ja)) .bl-detail-list dd {
	display: flex;
}
html:not(:lang(ja)) .bl-detail-list dd::before {
	flex: none;
}

/* 会員の声の質問：2行目も「Q.」の右（1行目の文字）に頭を揃える */
html:not(:lang(ja)) .bl-vices-faq dt {
	display: flex;
}
html:not(:lang(ja)) .bl-vices-faq dt::before {
	flex: none;
	white-space: pre;
}

/* 寺町構想フォームのタブボタン（訳文が長くてもボタンからはみ出さない） */
html:not(:lang(ja)) .bl-teramachi-form label.el-btn {
	display: block;
	box-sizing: border-box;
	width: 320px;
	height: auto;
	min-height: 50px;
	padding: 10px 16px;
	line-height: 1.4;
	text-align: center;
}
html:not(:lang(ja)) .bl-teramachi-form label.el-btn > span {
	margin-right: 0.4em;
}

/* イベント案内・書籍バナー（PC）：文章が右側のロゴ・写真・本に重ならないよう、右の余白を確保する */
@media screen and (min-width: 751px) {
	html:not(:lang(ja)) .bl-bnr.--detail {
		font-size: 22px;
		line-height: 1.5;
		padding: 44px 490px 0 56px;
	}
	html:not(:lang(ja)) .bl-bnr.--contents {
		display: block;
		line-height: 1.5;
		padding: 58px 244px 0 164px;
	}
	/* PC では SP 用の改行が無く、金文字の直前も詰まるので左にも間隔を付ける */
	html:lang(en) .bl-bnr.--contents .hp-color--gold {
		margin-left: 0.3em;
	}

	/* メルマガバナー（PC）：メールアイコンの右から文章を始め、高さ（背景の矢印の位置）は日本語と同じ 200px のまま文字で収める */
	html:not(:lang(ja)) .bl-bnr.--mail {
		padding: 16px 64px 16px 190px;
	}
	html:not(:lang(ja)) .bl-bnr.--mail .el-mail-ttl {
		margin-bottom: 12px;
	}
	html:not(:lang(ja)) .bl-bnr.--mail .el-txt {
		font-size: 17px;
		letter-spacing: 0.02em;
		line-height: 1.5;
	}
}

/* 書籍・動画バナー（英語）：金文字の直後に続く訳文との間にスペースが無いので、金文字の右に間隔を付ける */
html:lang(en) .bl-bnr.--contents .hp-color--gold {
	margin-right: 0.3em;
}

@media screen and (max-width: 750px) {
	html:not(:lang(ja)) .el-lower-mv-ttl {
		width: 100%;
		padding-inline: 30px;
		box-sizing: border-box;
	}

	html:not(:lang(ja)) .el-btn.--more {
		min-width: 464px;
		min-height: 88px;
	}

	html:not(:lang(ja)) .bl-aside .el-btn.--more {
		width: 464px;
		height: 88px;
	}

	/* フォーム */
	html:not(:lang(ja)) .el-form-ttl {
		padding-right: 190px;
	}
	html:not(:lang(ja)) .bl-btn-wrapper .wpcf7-form-control {
		min-width: 312px;
		min-height: 78px;
	}
	html:not(:lang(ja)) .bl-btn-wrapper .wpcf7-previous {
		min-width: 240px;
	}

	/* トップ：イベント案内の4ボタン */
	html:not(:lang(ja)) .bl-event .el-btn.--normal {
		min-height: 104px;
		padding: 12px 20px;
		letter-spacing: 0.02em;
		font-size: 30px;
	}

	/* 寺町構想フォームのタブボタン */
	html:not(:lang(ja)) .bl-teramachi-form label.el-btn {
		width: 312px;
		min-height: 100px;
		padding: 16px 20px;
	}

	/* メルマガバナー：高さを内容に合わせ、見出しがメールアイコンに重ならないようにする */
	html:not(:lang(ja)) .bl-bnr.--mail {
		height: auto;
		min-height: 334px;
		padding-bottom: 32px;
		background-size: cover;
	}
	html:not(:lang(ja)) .bl-bnr.--mail .el-mail-ttl {
		padding-right: 108px;
	}

	/* イベント案内・書籍バナー：文章が右側のロゴ・写真・本に重ならないよう、右の余白を確保する */
	html:not(:lang(ja)) .bl-bnr.--detail {
		font-size: 26px;
		letter-spacing: 0.04em;
		padding: 56px 330px 0 34px;
	}
	html:not(:lang(ja)) .bl-bnr.--contents {
		font-size: 26px;
		letter-spacing: 0.04em;
		padding: 88px 250px 0 34px;
		line-height: 1.5;
	}

	/* ヘッダーの言語切替（SP）：選択肢が指で押しにくいので、1つあたりの高さを実機で約44ptにする */
	html:not(:lang(ja)) .bl-head-lang .trp-switcher-dropdown-list .trp-language-item {
		height: 88px;
	}

	/* ヘッダーの申込ボタン（SP）：common.css の非日本語用 15px は 750px 基準では極小なので読める大きさにする */
	html:not(:lang(ja)) .el-head-btn {
		font-size: 22px;
		letter-spacing: 0.02em;
		padding: 0 10px;
	}

	/* 寺町構想：画像下のキャプションを本文（.el-txt 32px）と同じ大きさにする */
	html:not(:lang(ja)) .bl-teramachi-cap {
		font-size: 32px;
	}

	/* トップ：9つの知恵 */
	html:not(:lang(ja)) .bl-elements-item {
		min-height: 174px;
	}
	html:not(:lang(ja)) .bl-elements-item > dd > button {
		padding-right: 64px;
	}
	/* 実機（iPhone）では、背景の円の濃淡（opacity のアニメーション）と一覧が重なると一覧の右端の約2px が切れ、右の線が消える。
	   円の動きと見た目はそのままに、濃淡を opacity ではなく線の色の透明度で動かして、別レイヤーにされないようにする */
	@keyframes nineElementsAfterCircleTr {
		0% {
			width: 0;
			border-color: rgba(201, 184, 232, 0);
		}
		21% {
			border-color: rgba(201, 184, 232, 1);
		}
		42% {
			width: 150vw;
			border-color: rgba(201, 184, 232, 0);
		}
		100% {
			width: 150vw;
			border-color: rgba(201, 184, 232, 0);
		}
	}
	html:not(:lang(ja)) .bl-elements > .ly-cont-inner::after {
		animation-name: nineElementsAfterCircleTr;
	}

	/* フッターのリンク格子：flex の子で幅が中身に縮み、訳文が短いと右に余白が出るので、日本語と同じ全幅にする */
	html:not(:lang(ja)) .bl-foot-gnav.sp {
		width: 100%;
	}

	/* 企業研修の見出し：英訳が日本語より長く、40px だと左右にほぼ余白がなくなるので少し小さくする */
	html[lang^="en"] .el-seminar-ttl {
		font-size: 36px;
		letter-spacing: 2.16px;
	}

	/* フッターのリンク格子（固定高さをやめて内容に合わせる） */
	html:not(:lang(ja)) .bl-foot-gnav-inner > li {
		height: auto;
		min-height: 124px;
	}
	html:not(:lang(ja)) .bl-foot-gnav-inner > li > a {
		font-size: 26px;
		letter-spacing: 0.04em;
		line-height: 1.4;
		padding-block: 24px;
		padding-right: 16px;
	}
}