@charset "utf-8";
/* 英検Jr. オンライン版「ラーニング」のねらい
   旧 /jido/examination/resourceO/help/aim/ の画像焼き込みページをテキスト化したもの。
   レイアウトは旧ページの実測値（950x671）に合わせて絶対配置している。 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td{
	font-weight: normal;
	margin: 0;
	padding: 0;
}

ul, ol, dl {
	list-style: none;
	text-indent: 0;
}

img {
	border: 0;
	vertical-align: bottom;
}

input, select {
	vertical-align: middle;
}

body {
	text-align: center;
	background-color: #FFFFFF;
	font-family: 'ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 13px;
}

#container {
	width: 950px;
	margin: auto;
	border: solid #333333 1px;
}

#container .closebtn {
	padding: 5px 0 20px 0;
}

#container .closebtn button {
	font-family: inherit;
	font-size: 13px;
	line-height: 1.2;
	padding: 6px;
	border: 1px solid #999999;
	border-radius: 10px;
	background-color: #F2F2F2;
	color: #333333;
	cursor: pointer;
}

#container .closebtn button:hover {
	background-color: #E6E6E6;
}

/* ===== ページ本体（旧画像と同じ 950x671） ===== */

.main {
	position: relative;
	width: 950px;
	height: 671px;
	text-align: left;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 218px 0;
}

.main a {
	text-decoration: none;
}

/* ===== グレード別テーマ ===== */

.grade-bronze .main { background-image: url(img/bg_bronze.png); }
.grade-silver .main { background-image: url(img/bg_silver.png); }
.grade-gold   .main { background-image: url(img/bg_gold.png); }

.grade-bronze .sidebar { background-color: #FDC8F2; }
.grade-silver .sidebar { background-color: #A0FEFE; }
.grade-gold   .sidebar { background-color: #FEFF92; }

/* 見出し帯は画像スライスをやめてCSSで描いている。
   色は旧ページの画像から1pxずつ読み取った実測値。 */

.grade-bronze .pagetitle {
	background-image: linear-gradient(to bottom,
		#AB7F5C 0%, #C69F78 12%, #DEBE95 23%, #ECDAC2 35%, #FFFBF8 50%,
		#F1E6D4 60%, #E0C6A1 72%, #CDAA82 84%, #AE7C59 100%);
}
.grade-silver .pagetitle {
	background-image: linear-gradient(to bottom,
		#AEAEAE 0%, #C5C5C5 12%, #DBDBDB 23%, #EBEBEB 35%, #FDFDFD 50%,
		#F0F0F0 60%, #E1E1E1 72%, #CACACA 84%, #A4A4A4 100%);
}
.grade-gold .pagetitle {
	background-image: linear-gradient(to bottom,
		#FBD10B 0%, #F7D84A 12%, #F4E185 23%, #F9E7A5 35%, #FEEFC4 50%,
		#FAE9B1 60%, #F4E395 72%, #F5DB60 84%, #FAD107 100%);
}

.grade-bronze .toptitle {
	background-image: linear-gradient(to bottom,
		#9E693F 0%, #B6956C 12%, #D2C09A 25%, #E8E1CF 38%, #FCFCFA 49%,
		#F5F2EB 55%, #DDD3BC 66%, #CCB68D 78%, #B18E64 90%, #9D6C44 100%);
}
.grade-silver .toptitle {
	background-image: linear-gradient(to bottom,
		#9B9B9B 0%, #B2B2B2 12%, #C9C9C9 25%, #D8D8D8 38%, #E4E4E4 49%,
		#E0E0E0 55%, #D2D2D2 66%, #C5C5C5 78%, #AEAEAE 90%, #9B9B9B 100%);
}
.grade-gold .toptitle {
	background-image: linear-gradient(to bottom,
		#FAD00C 0%, #F6D94D 12%, #F2E28D 25%, #F9E9AE 38%, #FCEEC6 49%,
		#FBEDBE 55%, #F3E5A2 66%, #F3E082 78%, #F6D842 90%, #F8D20D 100%);
}

/* ===== サイドバー ===== */

.sidebar {
	position: absolute;
	left: 0;
	top: 0;
	width: 218px;
	height: 623px;
}

.sidebar .logo {
	position: absolute;
	left: 24px;
	top: 8px;
}

.sidebar .mascot {
	position: absolute;
	left: 38px;
	top: 464px;
}

.nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 218px;
	font-size: 12px;
	line-height: 21px;
}

.nav li {
	position: absolute;
	left: 14px;
	width: 200px;
}

.nav li:nth-child(1) { top: 90px; }
.nav li:nth-child(2) { top: 125px; }
.nav li:nth-child(3) { top: 160px; }
.nav li:nth-child(4) { top: 196px; }
.nav li:nth-child(5) { top: 231px; }
.nav li:nth-child(6) { top: 266px; }
.nav li:nth-child(7) { top: 321px; }
.nav li:nth-child(8) { top: 375px; }
.nav li:nth-child(9) { top: 434px; }

.nav label {
	display: block;
	padding-left: 18px;
	color: #0000CC;
	cursor: pointer;
}

.nav label:before {
	content: "";
	position: absolute;
	left: 1px;
	top: 6px;
	width: 0;
	height: 0;
	border-left: 8px solid #0000CC;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.nav .current label { color: #FF0000; }
.nav .current label:before { border-left-color: #FF0000; }

/* サイドバーの2行項目は2行目を字下げして先頭を揃える */
.nav a .cont {
	display: block;
	padding-left: 0;
}

/* ===== 見出し帯 ===== */

.pagetitle {
	position: absolute;
	left: 230px;
	top: 22px;
	width: 593px;
	height: 44px;
	padding: 0;
	font-size: 21px;
	font-weight: bold;
	line-height: 42px;
	color: #525252;
	text-indent: 30px;
	white-space: nowrap;
	border-radius: 22px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.32);
}

/* トップページ（01）の大きな見出し帯 */
.toptitle {
	position: absolute;
	left: 43px;
	top: 69px;
	width: 874px;
	height: 92px;
	font-size: 29px;
	font-weight: bold;
	line-height: 90px;
	color: #525252;
	text-indent: 80px;
	white-space: nowrap;
	border-radius: 46px;
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.30);
}

.crown {
	position: absolute;
	left: 866px;
	top: 19px;
}

/* ===== 本文 ===== */

.content {
	position: absolute;
	left: 242px;
	top: 100px;
	width: 675px;
	font-size: 14px;
	line-height: 24.4px;
	color: #000000;
	text-align: justify;
	text-justify: inter-character;
}

.content p {
	margin: 0 0 17px 0;
}

.content p.last { margin-bottom: 0; }

/* トップページ（01）の本文はサイドバーが無いぶん左右が違う */
.content.top {
	left: 183px;
	top: 213px;
	width: 645px;
	line-height: 34px;
	font-size: 16px;
	text-align: left;
}

.content.top p { margin-bottom: 24px; }

/* 強調（ピンク文字＋下線） */
.em { color: #F5308C; }
.u  { text-decoration: underline; }

/* ルビ
   rt を絶対配置にして親文字の幅も行の高さも変えない。
   旧ページ（画像）ではルビが隣の文字の上にはみ出す組み方なので、それに合わせている。 */
ruby {
	position: relative;
	/* display: inline-block にすると「アトミックなインライン要素」扱いになり、
	   親の下線（.u）がルビの下だけ途切れる。inline のままにしておくこと。 */
	display: inline;
	line-height: inherit;
	text-indent: 0;
}

rt {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 2px;
	font-size: 7px;
	line-height: 1;
	font-weight: normal;
	white-space: nowrap;
	letter-spacing: 0;
	text-align: center;
	pointer-events: none;
}

/* ===== マスコット（トップページ） ===== */

.mascot-full {
	position: absolute;
	left: 38px;
	top: 375px;
}

/* ===== ボタン =====
   旧ページではボタンも文字ごと画像だったが、ここではアンカー＋CSSで組んでいる。
   色・寸法は原画像の実測値（枠線の位置と縦方向のグラデーションを1pxずつ採取したもの）。 */

.btn {
	display: block;
	position: absolute;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	color: #0052E0;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	-webkit-text-stroke: 3px #FFFFFF;
	paint-order: stroke fill;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* 黄色いボタン（「次へ」）の面 */
.btn-next,
.btn-next-lg {
	background-image: linear-gradient(to bottom,
		#E9ED00 0%,
		#FFFF01 14%,
		#FFFF01 27%,
		#BCBD00 87%,
		#DCDC00 90%,
		#EAE601 100%);
}

/* 本文ページの「次へ」 179x50 @ (482,576) */
.btn-next {
	left: 482px;
	top: 576px;
	width: 179px;
	height: 50px;
	line-height: 46px;
	font-size: 21px;
	border: 2px solid #0068CB;
	border-radius: 12px;
}

/* トップページの「次へ」 259x66 @ (344,500) */
.btn-next-lg {
	left: 344px;
	top: 500px;
	width: 259px;
	height: 66px;
	line-height: 62px;
	font-size: 24px;
	border: 2px solid #016701;
	border-radius: 14px;
}

/* トップページの「印刷する」 260x66 @ (642,500) */
.btn-print {
	left: 642px;
	top: 500px;
	width: 260px;
	height: 66px;
	line-height: 62px;
	font-size: 24px;
	border: 2px solid #5B5B59;
	border-radius: 14px;
	background-image: linear-gradient(to bottom,
		#DADBD6 0%,
		#E6E6E6 14%,
		#E6E6E6 30%,
		#AAAAAA 87%,
		#D6D6D6 90%,
		#DED2D4 100%);
}

/* ===== フッター ===== */

.copyright {
	position: absolute;
	left: 156px;
	top: 643px;
	width: 675px;
	text-align: center;
	white-space: nowrap;
	font-size: 11px;
	line-height: 15px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}

/* ===== 2カラム（章05・06のラベル＋本文） ===== */

.rows {
	position: absolute;
	left: 240px;
	top: 92px;
	width: 687px;
	font-size: 14px;
	line-height: 24.4px;
	color: #000000;
}

.rows .row {
	display: flex;
	align-items: flex-start;
}

.rows .row + .row {
	margin-top: 9px;
}

/* 章05は行間に破線の区切りが入る */
.rows .row.sep {
	border-top: 1px dashed #AAAAAA;
	padding-top: 9px;
}

.rows .label {
	flex: 0 0 152px;
	width: 152px;
	padding-right: 8px;
}

.rows .cont {
	flex: 1 1 auto;
	text-align: justify;
	text-justify: inter-character;
}

.rows .cont p {
	margin: 0 0 17px 0;
}

.rows .cont p:last-child {
	margin-bottom: 0;
}

/* 番号バッジ（黒地に白抜き数字） */
.badge {
	display: inline-block;
	width: 17px;
	height: 18px;
	margin-right: 3px;
	background-color: #000000;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
	vertical-align: -3px;
}

/* 本文中のリンク（「こちら」など） */
.rows a,
.content a {
	color: #0000CC;
	text-decoration: underline;
}

/* ===== 本文が収まりきらないページ用の詰め設定 =====
   原画像側も、文章量の多いページ（GOLD章05など）では本文を一段詰めて組んでいる。
   書体が違うぶんHTML側は行数が増えやすいので、はみ出すページにだけ付ける。 */

.rows.tight,
.content.tight {
	font-size: 13px;
	line-height: 22px;
	letter-spacing: -0.01em;
}

.rows.tight .cont p,
.content.tight p {
	margin-bottom: 12px;
}

.rows.tighter,
.content.tighter {
	font-size: 12px;
	line-height: 20.5px;
	letter-spacing: -0.02em;
}

.rows.tighter .cont p,
.content.tighter p {
	margin-bottom: 10px;
}

/* 詰めるときは行と行のあいだも縮める（原画像も文章量の多いページでは詰めている） */
.rows.tight .row + .row    { margin-top: 6px; }
.rows.tight .row.sep       { padding-top: 6px; }
.rows.tighter .row + .row  { margin-top: 3px; }
.rows.tighter .row.sep     { padding-top: 3px; }

/* ===== ページ切替 =====
   1ファイルにそのグレードの全ページを入れ、ラジオボタンで見せる1枚を選ぶ。
   JavaScriptを使わないので、印刷時は @media print で全ページを出すだけでよく、
   画面と紙面の内容がズレようがない（旧サイトは静的PDFが取り残されて
   何年も旧名称のまま配られていた）。 */

.pageswitch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pageswitch + .main {
	display: none;
}

.pageswitch:checked + .main {
	display: block;
}

/* キーボード操作でページを選んでいるあいだは、選択中の項目を分かるようにする */
.pageswitch:focus-visible + .main .nav .current label {
	outline: 2px solid #FF0000;
	outline-offset: 1px;
}

/* ===== 印刷 =====
   画面と同じHTMLをそのまま刷る。全ページを表示し、1画面＝1枚で改ページする。 */

@media print {
	@page {
		size: A4 landscape;
		margin: 0;
	}

	html, body {
		margin: 0;
		padding: 0;
		background: #FFFFFF;
	}

	#container {
		width: auto;
		margin: 0;
		border: 0;
	}

	/* 画面の操作部品は紙に出さない */
	#container .closebtn,
	.btn,
	.pageswitch {
		display: none !important;
	}

	/* 選ばれていないページも含めて全部出す */
	.pageswitch + .main,
	.pageswitch:checked + .main {
		display: block !important;
	}

	/* 1画面＝1枚。950x671 を A4横（約1122x793px）に収まるよう拡大する */
	.main {
		zoom: 1.15;
		page-break-after: always;
		break-after: page;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.main:last-of-type {
		page-break-after: auto;
		break-after: auto;
	}
}