@charset "utf-8";

/* --------------------------------------------------- */
/* Loading */
/* --------------------------------------------------- */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	background-image: url('../img/common/loading.svg');
	background-repeat: no-repeat;
	background-size: 96px 96px;
	background-position: 50% 47%;
	z-index: 9999;
}


/* --------------------------------------------------- */
/* Layout */
/* --------------------------------------------------- */
.wrap {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-width: 1000px;
	min-height: 100vh;
	overflow-x: hidden;
}
main {
	flex: 1 0 auto;
	padding-top: 80px;
	background-color: #fff;
}


/* --------------------------------------------------- */
/* Header */
/* --------------------------------------------------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	padding: 0;
	width: 100%;
	min-width: 1000px;
	z-index: 666;
	background-color: #fff;
}
header .hd_inner {
	display: flex;
	align-items: center;
	gap: 0 1.5em;
	margin-left: auto;
	width: 98%;
}
header .sitename { width: 256px; }
header nav {
	display: block;
	flex: 1 0 auto;
}
header .btn_sholder a {
	display: block;
	width: 80px;
	height: 80px;
	background-color: #00a33e;
	background-image: url('../img/common/btn_signin.png');
	background-repeat: no-repeat;
	background-size: 36px auto;
	background-position: 50% 16px;
}
header .btn_sholder a::before {
	content: 'ログイン';
	display: block;
	padding-top: 52px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	text-align: center;
}

/* Signin Setting */
header.signin .btn_sholder a { background-image: url('../img/common/btn_signout.png'); }
header.signin .btn_sholder a::before { content: 'ログアウト'; }


/* --------------------------------------------------- */
/* Navigation */
/* --------------------------------------------------- */
header nav ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0 1.75em;
	margin: 0 0 0 auto;
	width: auto;
	font-size: 1.4rem;
}
header nav ul li a {
	display: block;
	font-weight: 600;
	line-height: 2.0em;
}
header nav ul li a:hover {
	color: #00a33e;
	opacity: 1.0;
}
header nav ul li a.nv_contact {
	padding: 0 0.5em;
	border: solid;
	border-width: 1px;
	border-radius: 4px;
}
header nav ul li a.nv_contact:hover { border-color: #00a33e; }


/* --------------------------------------------------- */
/* Footer */
/* --------------------------------------------------- */
footer {
	position: relative;
	padding: 0;
	background-color: #00a33e;
}
footer .ft_upper,
footer .ft_bottom {
	display: flex;
	justify-content: space-between;
	align-items: end;
	width: 100%;
	color: #fff;
}
footer .ft_bottom {
	border-top: 1px solid rgba(255,255,255,0.66);
	font-size: 1.4rem;
}
footer p a {
	color: inherit;
	text-decoration: none;
}
footer .logo { width: 25%; }
footer address {
	display: block;
	width: auto;
	max-width: 73%;
	font-size: 1.6rem;
	font-style: normal;
	line-height: 1.8;
}
footer address h2 { font-size: 1.6rem; }

/* --------------------------------------------------- */
/* Aside */
/* --------------------------------------------------- */
aside {
	display: block;
	background-color: #4cbe78;
}
aside .block-lm {
	position: relative;
	display: flex;
	justify-content: space-between;
	color: #fff;
}
aside .block-lm::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	display: block;
	width: 1px;
	height: 100%;
	background-color: #fff;
}
aside .bnr_regist,
aside .bnr_mypage { width: 43%; }
aside h2 { text-align: center; }
aside .btn {
	color: #00a33e;
	background-color: #fff;
	border: 0;
}
aside .btn:hover {
	color: #fff;
	background-color: #fd0;
	opacity: 1.0;
}


/* --------------------------------------------------- */
/* Page Title */
/* --------------------------------------------------- */
.pg_title {
	display: flex;
	align-items: center;
	padding: 0 2%;
	height: 200px;
}
.pg_title h1 {
	width: 100%;
	font-size: 2.8rem;
	font-weight: 600;
	text-align: center;
}
.pg_title h1::after {
	content: '';
	display: block;
	margin: 0.5em auto 0;
	width: 48px;
	height: 3px;
	background-color: #00a33e;
}


/* --------------------------------------------------- */
/* HOME */
/* --------------------------------------------------- */
/* Main Visual */
/* --------------------------------------------------- */
.pannel { padding: 56px 0; }
.pannel h1 {
	margin: 0 auto;
	width: 88%;
	max-width: 1120px;
}

/* Passed */
/* --------------------------------------------------- */
#passed h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.0em;
	width: 100%;
	height: 4.5em;
	color: #00a33e;
	text-align: center;
}


/* --------------------------------------------------- */
/* DATA */
/* --------------------------------------------------- */
#data .stats h4 { color: #00a33e; }
#data .stats figure {
	margin: 1.0em auto 2.0em;
	width: 100%;
	max-width: 360px;
}

/* Table */
#data .stats table {
	margin-top: 1.5em;
	width: 100%;
	border-bottom: 1px solid #aaa;
}
#data .stats table th,
#data .stats table td {
	padding: 0.5em 1.0em;
	width: 20%;
	border-top: solid;
	border-right: solid;
	border-width: 1px;
	border-top-color: #aaa;
	border-right-color: #ddd;
	vertical-align: middle;
}
#data .stats table td { text-align: right; }
#data .stats table th:last-child,
#data .stats table td:last-child { border-right: none; }
#data .stats table thead th,
#data .stats table thead td { background-color: #e5f6eb; }
#data .stats table tfoot th,
#data .stats table tfoot td { background-color: #f6f6f6; }
#data .stats table tfoot th,
#data .stats table tbody th[rowspan]  { text-align: left; }
#data .stats table tbody tr.sharp th,
#data .stats table tbody tr.sharp td { border-top-color: #ddd; }

/* List */
#data .stats dl {
	display: table;
	width: 100%;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
#data .stats dl dt {
	padding: 0.75em 0 0.75em 1.5em;
	width: 66.66%;
	border-right: 1px solid #ddd;
	float: left;
}
#data .stats dl dd {
	padding: 0.75em 1.5em 0.75em 0 ;
	width: 100%;
	border-bottom: 1px solid #ddd;
	text-align: right;
}
#data .stats dl dd:last-child { border-bottom: none; }


/* --------------------------------------------------- */
/* FAQ */
/* --------------------------------------------------- */
#faq dl {
	margin: 1.5em 0 5.0em;
	border-bottom: 1px solid #ddd;
}
#faq dl:last-child { margin: 1.5em 0 0; }
#faq dl dt {
	position: relative;
	padding: 2.0em 2.0em 2.0em 4.0em;
	border-top: 1px solid #ddd;
	color: #00a33e;
	cursor: pointer;
}
#faq dl dd {
	position: relative;
	display: none;
	padding: 0 0 2.0em 4.0em;
	line-height: 1.75;
}
#faq dl dt::before,
#faq dl dd::before {
	position: absolute;
	top: 1.6em;
	left: 1.25em;
	font-size: 1.8rem;
	font-weight: 600;
}
#faq dl dt::before { content: 'Q'; }
#faq dl dd::before { content: 'A'; top: -0.1em; }
#faq dl dt .btn_toggle {
	position: absolute;
	top: 2.4em;
	right: 0.5em;
	display: block;
	width: 16px;
	height: 16px;
	transition: all .5s;
}
#faq dl dt .btn_toggle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 7px;
	display: block;
	width: 2px;
	height: 100%;
	background-color: #00a33e;
}
#faq dl dt .btn_toggle::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #00a33e;
	transition: all .3s;
}
#faq dl dt h5 { transition: all .3s; }
#faq dl dt:hover h5 { opacity: 0.5; }

/* Open Setting */
#faq dl dt.opened .btn_toggle {
	transform: rotate(-270deg);
}
#faq dl dt.opened .btn_toggle::after { background-color: transparent; }


/* --------------------------------------------------- */
/* Voice */
/* --------------------------------------------------- */
#voice .side_label dd { padding-bottom: 4.0em; }
#voice .side_label dt p {
	margin-top: 1.5em;
	font-size: 1.4rem;
}
#voice .side_label dd p + p { margin-top: 1.5em; }


/* --------------------------------------------------- */
/* Registration */
/* --------------------------------------------------- */
#registration .series > div {
	position: relative;
}
#registration .series .inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.0em 0;
	margin: 0 auto;
	width: 90%;
	height: 100%;
}
#registration .series .cell_head {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.0em;
}
#registration .series .cell_body { flex: 1 0 auto; }
#registration .series .cell_foot {
	height: 5.0em;
	text-align: center;
}
#registration .series h3 { font-size: 2.4rem; }
#registration .series h5 { margin-bottom: 0.25em; }
#registration .series label { display: block; }
#registration .series .cell_foot input[type=submit] { margin: 0 auto; }


/* --------------------------------------------------- */
/* Regist */
/* --------------------------------------------------- */
.agree label { display: block; }
.agree input[type=submit] { margin: 0 auto; }
.regst {
	display: flex;
	flex-wrap: wrap;
}
.regst dt {
	padding-left: 2.0em;
	width: 25%;
	background-color: #e5f6eb;
}
.regst dd {
	padding-right: 2.0em;
	width: 75%;
	background-color: #f2faf5;
}
form .regst dd .sheet { padding-right: 0; }

.regst h4 { padding-top: 1.5em; }

.regst dt:not(:first-child) h4,
.regst dd:not(:nth-child(2)) .sheet { border-top: 1px solid #aaa; }


/* --------------------------------------------------- */
/* My Page */
/* --------------------------------------------------- */
/* Ready */
/* --------------------------------------------------- */
#ready .series > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 2.0em 0;
}
#ready .series > div > div { width: 100%; }
#ready h5 {
	margin: 1.5em 0 2.0em;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	line-height: 2.0;
	text-align: center;
}
#ready h5.notyet {
	background-color: #d00;
	border: 1px solid #d00;
	color: #fff;
}


/* Resume */
/* --------------------------------------------------- */
.reslut_head {
	background-color: #e5f6eb;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
.reslut_head > div{ display: flex; }
.reslut_head p {
	padding: 0.5em 1.5em;
	width: 21%;
	border-left: 1px solid #ddd;
	text-align: center; 
}
.reslut_head p:first-child {
	width: 37%;
	border-left: 0;
}
.reslut_body > table,
.reslut_body > div {
	width: 100%;
	border-bottom: 1px solid #aaa;
	background-color: #fff;
}
.reslut_body > table:nth-child(even) { background-color: #f6f6f6; }
.reslut_body > table {
	position: relative;
	display: flex;
	
}
.reslut_body > table thead {
	position: relative;
	width: 37%;
}
.reslut_body > table tbody {
	position: relative;
	display: table;
	width: 63%;
}
.reslut_body > table thead tr {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
}
.reslut_body > table th { padding: 0.75em 1.0em; }
.reslut_body > table td { padding: 1.0em 1.0em; }
.reslut_body > table th { text-align: left; }
.reslut_body > table tbody tr:not(:first-child) { border-top: 1px solid #ddd; }
.reslut_body > table tbody th,
.reslut_body > table tbody td {
	border-left: 1px solid #ddd;
	width: 33.33%; 
	text-align: center;
	vertical-align: middle;
}

/* No Result */
#resume .reslut_body .noitem p {
	padding: 4.0em;
	text-align: center;
}

/* Examination */
/* --------------------------------------------------- */
#examination .block-lm {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2.5em 2.0em;
}
#examination .block-lm > div { width: 48%; }
#examination h3 { font-size: 2.4rem; }
#examination .time {
	font-size: 4.8rem;
	font-weight: 600;
	text-align: center;
}


/* --------------------------------------------------- */
/* Entry */
/* --------------------------------------------------- */
.textbook label { margin-top: 0.5em; }
.textbook label input[type=number] {
	margin: 0 0.5em 0 1.0em;
	width: 6.0em;
	text-align: center;
}
div[data-total] {
	display: flex;
	justify-content: space-between;
	padding: 1.5em;
	background-color: #fff;
	border-top: solid;
	border-bottom: solid;
	border-width: 1px;
	color: #00a33e;
}
div[data-total]::before {
	content: attr(data-total)'';
	font-weight: 600;
}