@charset "utf-8";

main {
	text-align: center;
}

.subject-block-wrap {
	padding-top: 130px;
	margin-top: -130px;
}

.subject-block {
	padding-bottom: 140px;
	position: relative;
	z-index: 4;
}

#science .subject-block { background: #b2f0e5; z-index: 8; }
#math .subject-block { background: #c5e5fc; z-index: 6; }
#pe .subject-block { background: #e4e3fd; z-index: 4; }

.subject-block .headline {
	padding: 0.8em 0;
	margin-bottom: 65px;
	font-size: 37px;
	font-weight: bold;
	letter-spacing: 0.5em;
}
#science .subject-block .headline { background: #88f5a2; }
#math .subject-block .headline { background: #34d0fb; }
#pe .subject-block .headline { background: #baadee; }

.subject-block .dl-sec {
	position: relative;
	z-index: 20;
}
.subject-block .dl-sec + .dl-sec {
	margin-top: 85px;
}
.subject-block .dl-sec .title {
	max-width: 1068px;
	width: 96%;
	margin: 0 auto 0.4em;
	text-align: left;
	font-size: 22px;
	font-weight: 500;
}
.subject-block .dl-sec ul {
	border-left: solid 4px #c9caca;
	border-top: solid 4px #c9caca;
}
.subject-block .dl-sec ul li {
	box-sizing: border-box;
	border-right: solid 4px #c9caca;
	border-bottom: solid 4px #c9caca;
	background: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
}
.subject-block .dl-sec ul li a {
	padding: 0.8em 5px;
	display: block;
	transition: background 0.3s ease-out;
}
.subject-block .dl-sec ul li a::before {
	content: "";
	display: inline-block;
	width: 46px;
	height: 46px;
	vertical-align: middle;
	background: url(../images/download/ico_pdf.svg) no-repeat 0 0 / contain;
}
.subject-block .dl-sec ul li a.w::before { background: url(../images/download/ico_word.svg) no-repeat 0 0 / contain; }
.subject-block .dl-sec ul li a.e::before { background: url(../images/download/ico_excel.svg) no-repeat 0 0 / contain; }

@media print, screen and (min-width:769px) {
	.subject-block .dl-sec ul {
		max-width: 1068px;
		width: 96%;
		margin: 0 auto;
		display: flex;
	}
	.subject-block .dl-sec ul.one-col li {
		width: 100%;
	}
	.subject-block .dl-sec ul.two-col li {
		width: 50%;
	}
	.subject-block .dl-sec ul.three-col li {
		width: 33.33%;
	}
	.subject-block .dl-sec ul li a:hover {
		background: #fff7d9;
	}
}

@media screen and (max-width:768px) {
	.subject-block-wrap {
		padding-top: calc(95 / 640 * 100vw);
		margin-top: calc(-95 / 640 * 100vw);
	}
	.subject-block {
		padding-bottom: calc(70 / 640 * 100vw);
	}
	.subject-block .headline {
		margin-bottom: calc(35 / 640 * 100vw);
		font-size: calc(32 / 640 * 100vw);
	}
	.subject-block .dl-sec + .dl-sec {
		margin-top: calc(45 / 640 * 100vw);
	}
	.subject-block .dl-sec .title {
		max-width: none;
		width: calc(520 / 640 * 100vw);
		padding-bottom: 0.3em;
		font-size: calc(23 / 640 * 100vw);
		letter-spacing: 0.1em;
	}
	.subject-block .dl-sec ul {
		max-width: none;
		width: calc(520 / 640 * 100vw);
		margin: 0 auto;
		border-width: calc(3 / 640 * 100vw);
	}
	.subject-block .dl-sec ul li {
		border-width: calc(3 / 640 * 100vw);
		font-size: calc(21 / 640 * 100vw);
	}
	.subject-block .dl-sec ul li a {
		padding: 0.6em 0.5em;
	}
	.subject-block .dl-sec ul li a::before {
		width: calc(34 / 640 * 100vw);
		height: calc(34 / 640 * 100vw);
	}
}

/* -------------------------------------------------
	bg
------------------------------------------------- */

@media print, screen and (min-width:769px) {
	main::before,
	main::after {
		display: none;
	}
	.subject-block {
		position: relative;
	}
	.subject-block > * {
		position: relative;
		z-index: 4;
	}
	.subject-block::before,
	.subject-block::after {
		width: 1000px;
		height: 100%;
		content: "";
		display: block;
		position: absolute;
		top: 0;
		z-index: 2;
	}
	.subject-block::before {
		right: calc(50% + 380px);
	}
	.subject-block::after {
		left: calc(50% + 380px);
	}
	
	.subject-block-wrap#science .subject-block::before { background: url(../images/download/bg_01.png) repeat right top / 805px auto; }
	.subject-block-wrap#science .subject-block::after { background: url(../images/download/bg_01.png) repeat left top / 805px auto; }
	
	.subject-block-wrap#math .subject-block::before { background: url(../images/download/bg_02.png) repeat right top / 840px auto; }
	.subject-block-wrap#math .subject-block::after { background: url(../images/download/bg_02.png) repeat left top / 840px auto; }
	
	.subject-block-wrap#pe .subject-block::before { background: url(../images/download/bg_03.png) repeat right top / 835px auto; }
	.subject-block-wrap#pe .subject-block::after { background: url(../images/download/bg_03.png) repeat left top / 835px auto; }
}

@media screen and (max-width:768px) {
	.subject-block-wrap#science .subject-block { background: #b2f0e5 url(../images/download/bg_01.png) repeat center center / 107.3vw auto; } /* 805 / 7.5 */
	.subject-block-wrap#math .subject-block { background: #c5e5fc url(../images/download/bg_02.png) repeat center center / 112vw auto; } /* 840 / 7.5 */
	.subject-block-wrap#pe .subject-block { background: #e4e3fd url(../images/download/bg_03.png) repeat center center / 111.3vw auto; } /* 835 / 7.5 */
}

/* -------------------------------------------------
	inner-links
------------------------------------------------- */

.inner-links ul {
	max-width: 990px;
	width: 96%;
	margin: 100px auto;
	display: flex;
	justify-content: space-between;
}
.inner-links ul li {
	width: calc(274 / 990 * 100%);
}
.inner-links ul li a {
	width: 100%;
	height: 66px;
	font-size: 35px;
	color: #77a9ff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	letter-spacing: 0.5em;
	border-radius: 33px;
	box-shadow: 5px 8px 9px 0 rgba(0,0,0,0.12);
	transition: all 0.3s ease-out;
}
.inner-links ul li a span {
	transform: translateX(0.25em);
}

.inner-links ul li a.s { background: #deffe6; }
.inner-links ul li a.m { background: #c1f5fd; }
.inner-links ul li a.pe { background: #e3def8; }

.inner-links a.usege {
	border: solid 1px #77a9ff;
}

@media print, screen and (min-width:769px) {
	.inner-links ul li a:hover { color: #040000; }
	.inner-links ul li a:hover.s { background: #88f5a2; }
	.inner-links ul li a:hover.m { background: #34d0fb; }
	.inner-links ul li a:hover.pe { background: #baadee; }
}

@media print, screen and (min-width:769px) and (max-width:900px) {
	.inner-links ul li a {
		letter-spacing: 0.3em;
	}
}

@media screen and (max-width:768px) {
	.inner-links ul {
		max-width: none;
		width: auto;
		justify-content: center;
		margin: calc(30 / 640 * 100vw) auto;
	}
	.inner-links ul li {
		width: calc(173 / 640 * 100vw);
	}
	.inner-links ul li + li {
		margin-left: 3vw;
	}
	.inner-links ul li a {
		height: calc(46 / 640 * 100vw);
		font-size: calc(33 / 640 * 100vw);
		border-radius: calc(23 / 640 * 100vw);
		box-shadow: 1.2vw 1.2vw 1.4vw 0 rgba(0,0,0,0.12);
		border: none;
		color: #040000;
	}
	.inner-links ul li a.s { background: #deffe6; }
	.inner-links ul li a.m { background: #c1f5fd; }
	.inner-links ul li a.pe { background: #e3def8; letter-spacing: 0.1em; }
	
	.inner-links ul li a.pe span {
		transform: translateX(0.05em);
	}
}