@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html {max-width: 100%;
}
body {
font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size: 16px;
font-weight: normal;
color: #000000;
line-height: 1.8;
max-width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: #f7f7f7;
}

ol, ul {list-style: none;}
a {
color: #000;
display: block;
}
a:hover, a img:hover, input:hover{opacity: 0.8;}
img {
max-width: 100%;
height: auto;
}
table{
border-collapse:collapse;
border:none;
border-spacing:0;
}
th,td{
vertical-align:top;
border:solid 1px #000;
font-weight:normal;
text-align:left;
}
.txt-center{text-align: center;}
.clearfix:after {
content:"";
display:block;
clear:both;
}
.mr0{margin-right: 0 !important;}
header{line-height: 0;}

#wrap{
min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
position: relative;/* ←相対位置 */
padding-bottom: 60px; /* ←フッターの高さを指定 */
box-sizing: border-box;
/* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

/* header */

header{
width: 100%;
padding-top: 32vw;
display: table;
background: url(../images/keyvisual2.jpg) no-repeat center bottom;
background-size: cover;
position: relative;
}
header h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.container{
width:63%;
margin: 45px auto;
background: #fff;
border-top: 3px solid #f57e76;
box-shadow: 0 0 2px 2px #e8e8e8;
padding: 30px 5%;
}

.areaBox{font-size:16px; margin-bottom: 30px;}
.areaBox:first-child{border-bottom:1px solid #ccc; margin-bottom: 50px;padding-bottom: 50px;}
.leadBox{text-align: center; margin-bottom: 20px;}
.leadBox .block_sp{margin-left: 1em;}
.leadBox .cap02{font-size: 13px;}
.btnBox .m-btn.m-btn__l{margin:0 auto; width: 60%;}
.btnBox .m-btn.m-btn__l a{
color:#fff;
display: block;
text-align: center;
padding: 10px;
position: relative;
text-decoration: none;
}
.btnBox .m-btn.m-btn__l a:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 5px;
right: 5px;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff;
}
.btnBox .m-btn.m-btn__l.btn01 a{background-color: #f57e76;}
.btnBox .m-btn.m-btn__l.btn02 a,
.btnBox .m-btn.m-btn__l.btn03 a{background-color: #343755;}
.btnBox .m-btn.m-btn__l.btn02{margin-bottom: 20px;}
.txtArea{text-align:center; font-size: 16px; margin-top: 20px;}
.txtArea .exam-list{margin-top: 20px;}
.txtArea .exam-list a{text-decoration: underline;}
.txtArea .exam-list a:after{border-bottom:none;}
.switch_sp{display: none;}
a{
overflow: hidden;
position: relative;
-webkit-transition: all .3s;
transition: all .3s;
}
a:after{
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 5px;
right: 5px;
}
/*
a[href$=".pdf"] {
background-image: url(../images/icon-pdf.png);
padding-right: 40px;
padding-left: 0;
}
*/

footer{
position: absolute;
bottom: 0;	
width: 100%;
text-align: center;
font-size: 12px;
}
footer .copyright {
background-color: #343755;
color: #fff;
padding: 20px 0;		
}
@media (max-width: 768px) {
.container {
    width: 85%;
	}
}

@media (max-width: 767px) {
#wrap{padding-bottom: 80px;}
.container{
width: 90%;
margin: 20px auto;
padding: 30px 20px;
}
.areaBox:first-child{margin-bottom: 30px;padding-bottom: 30px;}
.leadBox .block_sp{margin-left: 0; display: block;}
.btnBox .m-btn.m-btn__l{width:85%;}
.switch_sp{display: block;}

footer {font-size: 10px;}
footer .copyright {padding:10px 5%;}


}