@charset "UTF-8";
/* CSS Document */

/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; }

body { color: #000; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-style: normal; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

.sp { display: none; }
.pad100 { padding-bottom: 0; }
header { background: #00b5ff; position: relative; border-bottom: 15px solid #0040a9; }

header .inner { max-width: 1050px; width: 95%; margin: 0 auto; position: relative; }
header .inner::before { content: ""; position: absolute; width: 115px; height: 100%; top: 0; bottom: 0; left: -115px; background: url(../images/img_main_bg.png) no-repeat top right; background-size: auto 100%; }
	
footer { background: #008bd3; }
footer .inner { max-width: 1000px; width: 95%; margin: 0 auto; }
footer dl { color: #FFF; font-size: 0.875rem; padding: 25px 50px 45px 50px; display: flex; justify-content: flex-start; flex-wrap: wrap; line-height: 1.5em; }
footer dl dt { width: 7em; }
footer dl dd { width: calc(100% - 7em); }
footer dl dd img { width: 12px; vertical-align: middle; }
footer .copy { background: #0063c3; text-align: center; color: #FFF; font-size: 0.750rem; padding: 10px; }

#Contents { max-width: 1000px; width: 95%; margin: 0 auto; padding: 115px 0; }

#Aim { background: #d2ebff; border-radius: 5px; padding: 20px 40px; }
#Aim ul li { text-indent: -1em; margin-left: 1em; font-size: 1.125em; line-height: 1.5em; }
#Aim ul li::before { content: "■"; color: #0063c3; }

#Contents dl { display: flex; justify-content: space-between; flex-wrap: wrap; }
#Contents dl dt { width: 140px; background: #0063c3; color: #FFF; text-align: center; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1.375em; font-weight: bold; margin-top: 25px; }
#Contents dl dt:last-of-type { border: 2px solid #0063c3; background: #FFF; color: #0063c3; }
#Contents dl dd { width: calc(100% - 165px); font-size: 1.25em; line-height: 1.3em; margin-top: 25px; min-height: 39px; display: flex; font-weight: bold; align-items: center; flex-wrap: wrap; }
#Contents dl dd.column { justify-content: center; flex-direction: column; align-items: flex-start; }
#Contents dl dd strong { font-size: 1.750rem; color: #0063c3; line-height: 1.3em; }
#Contents dl dd strong + span { font-size: 1.000rem; margin-top: 5px; text-indent: -1em; margin-left: 1em; }
.line { background: -webkit-linear-gradient(left, #ffe000 0%,#ffe000 100%) no-repeat bottom; background: linear-gradient(to right, #ffe000 0%,#ffe000 100%) no-repeat bottom; background-size: 100% 50%; }
#Contents dl dd p { font-size: 1.500rem; line-height: 1.5em; color: #0063c3; }
#Contents dl dd ol li { text-indent: -1em; margin-left: 1em; margin-top: 5px; }
#Contents dl dd img { margin-top: 5px; }

h2 { background: #0063c3; color: #FFF; margin-top: 110px; font-size: 1.375rem; padding: 10px 15px; font-weight: bold; }

.flex { display: flex; justify-content: space-between; }
.flex .left { max-width: 304px; width: 30.4%; margin-top: 35px; }
.flex .right { max-width: 650px; width: 65%; margin-top: 35px; display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex .right .column { max-width: 304px; width: 46.8%; }
.flex p.date { border: 2px solid #0063c3; color: #0063c3; text-align: center; font-size: 1.625rem; padding: 10px 0; font-weight: bold; width: 100%; }
.flex p.cat { background: #d2ebff; border-radius: 5px; color: #0063c3; text-align: center; font-weight: bold; font-size: 1.500rem; padding: 10px; margin-top: 30px; }
.flex p.time { font-size: 1.375rem; text-align: center; font-weight: bold; margin-top: 10px; }
.flex p.time + .flex { margin-top: 45px; border-bottom: 1px solid #000; padding-bottom: 20px; }
.flex .img { width: 35%; }
.flex .txt { width: calc(100% - 40%); }
.flex .txt p { font-size: 0.938rem; line-height: 1.3em; }
.flex .txt p.name { font-size: 1.250rem; margin-top: 20px; }
.flex .txt p.name strong { font-size: 1.750rem; font-weight: bold; }
.flex ul { font-size: 1.125rem; line-height: 1.5em; margin-top: 20px; }
.flex ul li { text-indent: -14px; margin-left: 14px; }
.flex ul li::before { content: ""; display: inline-block; width: 9px; height: 11px; background: url(../images/ic_check.svg); margin: 0 5px; }
.flex .thum { margin-top: 20px; border: 1px solid #c6c6c6; padding: 1px; }
.flex .thum a { display: block; position: relative; }
.flex .thum a::before { content: ""; position: absolute; width: 17%; background: url(../images/ic_play.svg) no-repeat center; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

#Contents h2:first-child { margin-top: 0; }
video { width: 100%; background: #000; margin-top: 30px; }
#Contents .inner p { margin-top: 30px; line-height: 1.5em; }
#Contents .inner p strong { font-size: 1.500em; font-weight: bold; }


@media screen and (max-width:930px) {
	#Aim ul li { font-size: 0.875rem; line-height: 1.5em; }
	#Contents dl dt { width: 6em; center; font-size: 0.875rem; }
	#Contents dl dd { width: calc(100% - 7em); font-size: 0.875rem; }
	#Contents dl dd strong { font-size: 1.125rem; }
	#Contents dl dd p { font-size: 1.0000rem; }
	#Contents dl dd strong + span { font-size: 0.750rem; }
	
	h2 { font-size: 1.000rem; }
	.flex p.date { font-size: 1.000rem; }
	.flex p.cat { font-size: 1.125rem; }
	.flex p.time { font-size: 0.875rem; text-align: center; font-weight: bold; margin-top: 10px; }

	.flex .img { width: 30%; }
	.flex .txt { width: calc(100% - 35%); }
	.flex .txt p.name { font-size: 0.875rem; }
	.flex .txt p.name strong { font-size: 1.250rem; }
	
	.flex ul { font-size: 0.875rem; }
}

@media screen and (max-width:600px) {
	header { border-bottom: 6px solid #0040a9; }
	#Contents { max-width: 1000px; width: 100%; margin: 0 auto; padding: 30px 0; }
	
	footer dl { padding: 25px 0; }
	
	#Aim { border-radius: 0px; padding: 20px 0; }
	#Aim ul { width: 95%; margin: 0 auto; }
	
	#Contents dl { width: 95%; margin-left: auto; margin-right: auto; }
	#Contents dl dd img { margin-top: 5px; width: 70px; }
	
	h2 { margin-top: 60px; text-align: center; }
	
	.sp { display: block; }
	.flex { flex-wrap: wrap; width: 95%; margin: 0 auto; }
	.flex .left { max-width: initial; width: 100%; margin-top: 35px; }
	.flex .right,.flex .right .column { max-width: initial; width: 100%; }
	.flex .img { width: 35%; text-align: right; }
	
	.flex .thum { max-width: initial; width: 100%; }
	.flex .thum img { width: 100%; }
	
	#Contents .inner { width: 95%; margin: 0 auto; }

}