@charset "utf-8";
/* 資料と同じ Noto Sans JP で描画する。フォントCSSは campaign/eiken2026.php と
 * kids/campaign/eiken2026.php の <STYLE_SHEET> 置換で <link> として読み込んでいる
 * （サイト内の index_ssl.tpml 等と同一URL。このCSSから @import すると取得が直列になる）。
 * 非SSL版テンプレートはフォントを読まないため、ラッパーに依存せず同じ見た目になるよう
 * 特設ページ側で常に読み込む。 */
/* issue #304 新・英検(R)二次試験対策 特設ページ
 *
 * ※ css/eiken2026.css と kids/css/eiken2026.css は完全に同一内容で運用する。
 *   片方だけ修正すると hanaso と kids で表示がずれるので、必ず両方に同じ変更を入れること。
 *
 * モック「新英検リリースお知らせ.pptx」の実測値をそのまま使っている。
 * 各要素の幅・位置はスライド幅（6858000EMU = 7.5in = 720px）に対する比率で指定しているため、
 * 表示幅は #maincontents のカラム幅に追従し、上限は「1単位x60」（資料の比率）。
 * px/pt の固定値（文字サイズ・余白・ボタン高さ）は 1px = 9525EMU で換算した実測値。
 * 本文の改行位置は tpml 側の <br /> で資料に合わせている（スマホ幅では無効化）。
 *
 * 文字サイズ: 見出し1行目18pt / 2行目14pt / リード10pt / セクション見出し12pt
 *             カード見出し9pt太字 / カード本文9pt / Stepバッジ12pt / Step本文10pt / 注記10pt
 * 色: CTA・Stepバッジ・矢印 #D00312 / 教材を見る #4EA72E（accent6）
 *     カード・Step背景 #E8E8E8（bg2）/ セクション枠線 #D9D9D9（bg1 lumMod85%）/ ボタン文字 #FFFFFF（lt1）
 */

.eiken-lp {
	/* 1単位 = 資料で12px（9pt）相当。カラム幅に追従させることで、
	 * 文字サイズ・余白・高さが資料と同じ比率のまま幅に合わせて拡大される。
	 * 既定は資料と同じ12px。カラム幅ごとの値は下の2ルールで上書きする。 */
	--u: 12px;
	/* 資料の基準幅と同じ「1単位x60」で幅を止める。これで箱と文字の比率が常に資料と同じになる */
	max-width: calc(60 * var(--u));
	margin: 0 auto;
	color: #000;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* .contentsbody に max-width:1400px（bs/css/bootstrap.css）が効いているため、カラムの本文幅は
 * col-sm-9  = 0.75 x min(100vw, 1400px) - 30px（1400px以上では1020pxで固定）
 * col-sm-12 = min(100vw, 1400px) - 30px
 * 1単位はこれを資料の基準幅720px（= 12px x 60）で割った値。上限17pxは col-sm-9 の固定幅
 * 1020px ÷ 60 に一致させた値で、広い画面では既存のキャンペーンページと同じ幅になる。
 * col-sm-12（ログイン前SSL）では本文幅が1370pxまで伸びるが、1単位をそれに合わせると文字が
 * 大きくなりすぎるため同じ17pxで止め、margin:0 auto で中央に置いている。
 * この2つは id+class で詳細度が高く、メディアクエリは詳細度を上げないため、素のまま書くと
 * 991px以下の .eiken-lp { --u: 12px } が負けて効かない。992px以上に限定して当てる。 */
/* min() は Chrome79 / Safari13.4 / Firefox75 以降。カスタムプロパティは値を解釈せずに
 * 通してしまうため、未対応ブラウザに min() を直接渡すと var() 置換時に無効となり、
 * この単位を使う余白・ボタン高さ・矢印がすべて消える（文字サイズは親の14pxを継承）。
 * @supports で切り分け、未対応側は資料と同じ12px固定（幅720px）で成立させる。 */
@media screen and (min-width: 992px) {
	#maincontents.col-sm-12 .eiken-lp,
	#maincontents.col-sm-9 .eiken-lp { --u: 12px; }
}
@supports (width: min(1px, 2px)) {
	@media screen and (min-width: 992px) {
		#maincontents.col-sm-12 .eiken-lp { --u: min(calc(1.6667vw - 0.5px), 17px); }
		#maincontents.col-sm-9 .eiken-lp { --u: min(calc(1.25vw - 0.5px), 17px); }
	}
}
.eiken-lp img {
	max-width: 100%;
	height: auto;
}
/* 段落の余白は要素ごとに個別指定する。ここで .eiken-lp p にまとめて margin を当てると
 * 詳細度（0,1,1）が .eiken-lp__card-title 等（0,1,0）より高くなり、見出しと本文の間の
 * 空行1行などが打ち消されるため置かない。 */

/* ヘッダーバナー: x=0 / 幅6858000(100%) / 高さ1665322(174.8px) */
.eiken-lp__banner {
	display: block;
	width: 100%;
}

/* 見出し: x=215900(3.15%) / 幅6426200(93.70%) / バナー下 14.2px */
.eiken-lp__headline {
	margin: calc(1.1833 * var(--u)) 0 0;
	padding: 0 3.15%;
}
.eiken-lp__headline b,
.eiken-lp__headline span {
	display: block;
	line-height: 1.3;
}
.eiken-lp__headline b {
	font-size: calc(2.0000 * var(--u));
	font-weight: bold;
}
.eiken-lp__headline span {
	font-size: calc(1.5556 * var(--u));
	font-weight: normal;
}

/* リード文＋写真
 * 文章: x=232834(3.40%) / 幅4658305(67.93%) / y=2747313
 * 写真: x=4956419(72.27%) / 幅1617806(23.59%) / y=2423798（文章より 33.9px 上）
 * モックは段落の間に空行が1行入る（10pt × 行間1.5 = 20px） */
.eiken-lp__intro {
	position: relative;
	margin-top: calc(1.1667 * var(--u));
	padding: 0 3.15%;
	overflow: hidden;
}
.eiken-lp__intro-photo {
	float: right;
	width: 25.2%;
	margin-left: 3.2%;
}
.eiken-lp__intro-body {
	padding-top: calc(2.8250 * var(--u));
}
.eiken-lp__intro-body p {
	margin: 0 0 calc(1.6667 * var(--u));
	font-size: calc(1.1111 * var(--u));
	line-height: 1.5;
}
.eiken-lp__intro-body p:last-child {
	margin-bottom: 0;
}

/* CTA
 * ＼今すぐ対策！／: 14pt太字 #FF0000 中央 / y=4236032（リード下 24.8px）
 * ボタン: 幅4902200(71.48%) / 高さ416662(43.7px) / 18pt / 文字白 / 角丸 */
.eiken-lp__cta {
	margin: calc(2.0667 * var(--u)) 0 0;
	text-align: center;
}
.eiken-lp__cta--bottom {
	margin-top: calc(1.6667 * var(--u));
}
.eiken-lp__cta-lead {
	margin: 0 0 calc(0.7500 * var(--u));
	color: #FF0000;
	font-size: calc(1.5556 * var(--u));
	font-weight: bold;
	line-height: 1.3;
}
/* 高さは資料の実測値どおり43.7pxだが、height固定＋overflow:hiddenにすると
 * ブラウザの最小フォントサイズ設定や文字のみ拡大でラベルが切れる。
 * min-height にしておけば通常表示は同じ高さで、文字が大きい環境では縦に伸びる。 */
.eiken-lp__btn {
	display: block;
	width: 71.48%;
	min-height: calc(3.6417 * var(--u));
	margin: 0 auto;
	border-radius: calc(0.6083 * var(--u));
	background: #D00312;
	color: #fff;
	font-size: calc(2.0000 * var(--u));
	font-weight: normal;
	line-height: calc(3.6417 * var(--u));
	text-align: center;
	text-decoration: none;
}
.eiken-lp__btn:hover,
.eiken-lp__btn:focus,
.eiken-lp__btn:active {
	color: #fff;
	text-decoration: none;
	opacity: .85;
}
/* 2つ目のCTAはモックでは太字 */
.eiken-lp__btn--bold {
	font-weight: bold;
}
/* 教材を見る: 幅3711275(54.12%) / 高さ441368(46.3px) / accent6 #4EA72E / 太字
 * prstGeom の adj=50000 なので角丸は完全な丸（高さの半分） */
.eiken-lp__btn--textbook {
	position: relative;
	width: 54.12%;
	min-height: calc(3.8583 * var(--u));
	margin-top: calc(1.4833 * var(--u));
	border-radius: calc(1.9292 * var(--u));
	background: #4EA72E;
	font-weight: bold;
	line-height: calc(3.8583 * var(--u));
}
/* 教材を見るボタンの白アイコン（資料の図21 = 透明背景の白アイコン）
 * 資料: x=2589251 y=13577824 536625角 → ボタン左端から83.2px(21.36%)・56.34px角。
 * ボタン(46.3px)より縦に大きく上下へはみ出す作り */
.eiken-lp__btn-icon {
	position: absolute;
	top: 50%;
	left: 21.36%;
	width: calc(4.6950 * var(--u));
	height: calc(4.6950 * var(--u));
	margin-top: calc(-2.3475 * var(--u));
	background-image: url(../images/eiken2026_icon.png);
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: contain;
	        background-size: contain;
}

/* セクション（モックは2列の表。左列=見出し、右列=本文）
 * 表: x=266700(3.89%) / 幅6426199(93.70%) / 枠線 1pt #D9D9D9
 * 左列 922866 = 表幅の14.36% */
.eiken-lp__section {
	display: table;
	width: 93.70%;
	margin: calc(3.2667 * var(--u)) auto 0;
	border-collapse: collapse;
	table-layout: fixed;
}
.eiken-lp__section-row {
	display: table-row;
}
.eiken-lp__section-head,
.eiken-lp__section-body {
	display: table-cell;
	background: #fff;
	border: 1px solid #D9D9D9;
}
/* 左の見出し列は bg1 lumMod95% = #F2F2F2、本文列は白（bg1） */
.eiken-lp__section-head {
	width: 14.36%;
	padding: 0 calc(0.3333 * var(--u));
	background: #F2F2F2;
	color: #000;
	font-size: calc(1.3333 * var(--u));
	line-height: 1.3;
	text-align: center;
	vertical-align: middle;
}
.eiken-lp__section-body {
	padding: 0;
	vertical-align: top;
}

/* おすすめポイント3カード（資料の描画結果を実測した値）
 * カードは塗りなし（白）＋1.5pt(2px) #E8E8E8 の枠線。左右余白19px/18px、カード間13px
 * 画像は枠線の内側いっぱい（正方形）。見出しは画像下6px、見出しと本文の間は空行1行(14px)
 * 本文の左右インセット9.6px（PowerPointのテキストボックス既定値 91440EMU） */
/* 3カードは本文の行数が違うため、flexで一番背の高いカードに高さを揃える
 * （float指定はflex非対応ブラウザ向けのフォールバック。flexコンテナ内では無視される） */
.eiken-lp__cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	    align-items: stretch;
	padding: calc(2.3333 * var(--u)) 3.2% calc(1.5833 * var(--u));
	overflow: hidden;
}
.eiken-lp__card {
	float: left;
	width: 31.7%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 31.7%;
	    flex: 0 0 31.7%;
	margin-left: 2.4%;
	padding-bottom: calc(1.8333 * var(--u));
	border: 2px solid #E8E8E8;
	background: transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.eiken-lp__card:first-child {
	margin-left: 0;
}
.eiken-lp__card img {
	display: block;
	width: 100%;
}
.eiken-lp__card-title {
	margin: calc(0.5000 * var(--u)) 0 calc(1.1667 * var(--u));
	padding: 0 calc(0.8000 * var(--u));
	font-size: calc(1.0000 * var(--u));
	font-weight: bold;
	line-height: calc(1.1667 * var(--u));
	text-align: center;
}
/* 左のインセットは資料のテキストボックス既定値（91440EMU = 9.6px）に合わせている。
 * 右のインセットは0。資料の13文字の行がカード幅に収まるようにしている。 */
.eiken-lp__card-text {
	margin: 0;
	padding: 0 0 0 calc(0.8000 * var(--u));
	font-size: calc(1.0000 * var(--u));
	font-weight: normal;
	line-height: calc(1.1667 * var(--u));
	text-align: left;
}

/* 受験方法 Step1-3
 * Step枠: x=1407251 → 右列の左から3.96% / 幅5070904 = 右列の92.14% / 高さ839013(88.1px)
 * バッジ: 幅606825 = Step枠の11.97% / Step枠の上6.5px・左7.1pxにはみ出す / 12pt 白 角丸
 * 矢印: 幅325120(34.1px) / 高さ182880(19.2px) / #D00312 */
.eiken-lp__steps {
	padding: calc(2.3333 * var(--u)) 3.86% calc(1.5833 * var(--u)) 3.96%;
}
/* Step枠は塗りなし＋1.5pt(2px) #D1D1D1（bg2 lumMod90%）の枠線。角丸は adj=7728 → 高さの7.728% */
.eiken-lp__step {
	position: relative;
	padding: 0;
	border: 2px solid #D1D1D1;
	border-radius: calc(0.5667 * var(--u));
	background: transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.eiken-lp__step:after {
	content: "";
	display: block;
	clear: both;
}
.eiken-lp__step1 {
	min-height: calc(7.3417 * var(--u));
}
.eiken-lp__step2 {
	min-height: calc(7.3417 * var(--u));
}
.eiken-lp__step3 {
	min-height: calc(7.5417 * var(--u));
}
.eiken-lp__step-badge {
	position: absolute;
	top: calc(-0.5417 * var(--u));
	left: calc(-0.5917 * var(--u));
	display: block;
	width: 11.97%;
	border-radius: calc(0.3750 * var(--u));
	background: #D00312;
	color: #fff;
	font-size: calc(1.3333 * var(--u));
	font-weight: normal;
	line-height: calc(2.2500 * var(--u));
	text-align: center;
}
.eiken-lp__step-text {
	font-size: calc(1.1111 * var(--u));
	font-weight: normal;
	line-height: 1.4;
}
.eiken-lp__step-text p {
	margin: 0;
}
.eiken-lp__step-fig {
	float: right;
}
/* Step1: 図はStep枠の左から57.26% / 幅35.16% / 上から9.7px、本文は上から22.6px */
.eiken-lp__step1 .eiken-lp__step-fig {
	width: 35.16%;
	margin: calc(0.8083 * var(--u)) 7.58% 0 0;
}
.eiken-lp__step1 .eiken-lp__step-text {
	padding: calc(1.8833 * var(--u)) 0 calc(1.0000 * var(--u)) 1.28%;
}
/* Step2: 図はStep枠の左から33.76% / 幅64.71% / 上から17.9px、本文は上から30.4px */
.eiken-lp__step2 .eiken-lp__step-fig {
	width: 64.71%;
	margin: calc(1.4917 * var(--u)) 1.53% 0 0;
}
.eiken-lp__step2 .eiken-lp__step-text {
	padding: calc(2.5333 * var(--u)) 0 calc(1.0000 * var(--u)) 1.28%;
}
/* Step3: 図はStep枠の左から69.99% / 幅25.19% / 上から7.0px、本文は上から41.0px */
.eiken-lp__step3 .eiken-lp__step-fig {
	width: 25.19%;
	margin: calc(0.5833 * var(--u)) 4.81% 0 0;
}
.eiken-lp__step3 .eiken-lp__step-text {
	padding: calc(3.4167 * var(--u)) 0 calc(1.0000 * var(--u)) 1.28%;
}
.eiken-lp__step-arrow {
	width: 0;
	height: 0;
	margin: calc(1.4083 * var(--u)) auto calc(1.1833 * var(--u));
	border-left: calc(1.4208 * var(--u)) solid transparent;
	border-right: calc(1.4208 * var(--u)) solid transparent;
	border-top: calc(1.6000 * var(--u)) solid #D00312;
}
.eiken-lp__step-arrow--2 {
	margin: calc(1.1750 * var(--u)) auto calc(2.5750 * var(--u));
}

/* 商標注記: x=232833 → 左インセット34.04px(4.728%)。10pt / 教材を見るボタン下 32.1px
 * 文字色は bg1 の lumMod 50% = #7F7F7F（白ではなくグレー） */
.eiken-lp__note {
	margin: calc(2.6750 * var(--u)) 0 0;
	padding: 0 0 0 4.728%;
	color: #7F7F7F;
	font-size: calc(1.1111 * var(--u));
	font-weight: normal;
	line-height: 1.4;
}

/* スマートフォン: 3カラムや横並びが成立しない幅なので縦積みに切り替える */
@media screen and (max-width: 991px) {
	/* タブレット（991px以下）はサイドバーがある分カラムが546〜714pxしかなく、資料の基準幅720pxに
	 * 届かないため1単位を12pxに固定して縦積みにする。ここで拡大率に任せると本文が9〜11pxになる。 */
	.eiken-lp { --u: 12px; }
	.eiken-lp__card-text br,
	.eiken-lp__intro-body br,
	.eiken-lp__step-text br,
	.eiken-lp__note br { display: none; }
	.eiken-lp__headline b { font-size: 15pt; }
	.eiken-lp__headline span { font-size: 12pt; }
	.eiken-lp__intro-photo { float: none; width: 60%; margin: 0 auto 12px; }
	.eiken-lp__intro-body { padding-top: 0; }
	.eiken-lp__btn { width: 92%; min-height: 0; padding: 10px 6px; font-size: 14pt; line-height: 1.3; }
	.eiken-lp__btn--textbook { width: 78%; min-height: 0; line-height: 1.3; }
	.eiken-lp__section { display: block; width: 94%; }
	.eiken-lp__section-row { display: block; }
	.eiken-lp__section-head,
	.eiken-lp__section-body { display: block; width: auto; }
	.eiken-lp__section-head { padding: 8px 4px; border-bottom: 0; }
	.eiken-lp__section-body { padding: 0; }
	.eiken-lp__cards { display: block; padding: 16px 4%; }
	.eiken-lp__card { float: none; width: 100%; -ms-flex: none; flex: none; margin: 0 0 12px; }
	.eiken-lp__card:first-child { margin-left: 0; }
	.eiken-lp__card img { width: 70%; margin: 0 auto; }
	.eiken-lp__note { padding: 0 4%; }
	.eiken-lp__btn-icon { left: 18%; width: 34px; height: 34px; margin-top: -17px; }
	.eiken-lp__steps { padding: 16px 4%; }
	/* バッジは枠の左上に絶対配置。縦積みでは図が先頭に来て重なるので、バッジの高さ分だけ枠に余白を作る */
	.eiken-lp__step { padding-top: calc(2.2000 * var(--u)); }
	.eiken-lp__step-badge { width: 74px; }
	.eiken-lp__step-fig { float: none !important; margin: 0 auto 10px !important; }
	.eiken-lp__step1 .eiken-lp__step-fig { width: 60%; }
	.eiken-lp__step2 .eiken-lp__step-fig { width: 96%; }
	.eiken-lp__step3 .eiken-lp__step-fig { width: 60%; }
	.eiken-lp__step1 .eiken-lp__step-text,
	.eiken-lp__step2 .eiken-lp__step-text,
	.eiken-lp__step3 .eiken-lp__step-text { padding: 0 4% 12px; }
}



/* アイコンはボタン左端からの割合で配置しているため、ボタンが縮むほど中央寄せのラベルへ近づく。
 * 320px幅ではボタン226px・ラベル93pxが中央寄せで左端66pxになり、18%(41px)+アイコン34px=75px で
 * 接触する。この幅帯だけ10%(23px)に寄せて約10px空ける。
 * 374px という基準は #292（kidsトップ）の 320px 対応と揃えている。375px以上には影響しない。 */
@media screen and (max-width: 374px) {
	.eiken-lp__btn-icon { left: 10%; }
}