@charset "utf-8";
@import url('/~hns/css/reset.css');
@import url('/~hns/css/add.css');
body {
	display: flex;
	flex-flow: column nowrap;
	min-width: 320px;
	background-color: #fff;
	color: #152137;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

#header {
	position: relative;
	flex: 0 0 auto;
	background-color: #fff;
	border-bottom: 1px #015ba7 solid;
}
#header > a {
	display: block;
	background-color: #fff;
}
#header > a:before {
	content:"";
	display: block;
	padding-top: 14.54%;
	background: url(/~hns/image/general/title.svg) no-repeat left top;
	background-size: contain;
}
@media screen and (min-width: 550px) {
	#header > a:before {
		padding-top: 80px;
		background-size: auto;
	}
}
#header > nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	background-color: #015ba7;
}
#header > nav > a {
	flex: 0 0 16.6%;
	max-width: 16.6%;
	height: 50px;
	display: block;
	border-left: 1px rgba(255,255,255,.3) solid;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#header > nav > *:hover { background-color: rgba(255,255,255,.2); }
#pg_class #header > nav > *.mn_class,
#pg_disease #header > nav > *.mn_disease,
#pg_results #header > nav > *.mn_results,
#pg_treatment #header > nav > *.mn_treatment,
#pg_recruit #header > nav > *.mn_recruit { background-color: rgba(0,0,0,.2); }

@media screen and (max-width: 979px) {
	#header > nav > a:first-child { border-left: none; }
	#header > nav > a.mn_news { background-image: url(/~hns/image/menu/w_news.png); }
	#header > nav > a.mn_class { background-image: url(/~hns/image/menu/w_class.png); }
	#header > nav > a.mn_disease { background-image: url(/~hns/image/menu/w_disease.png); }
	#header > nav > a.mn_results { background-image: url(/~hns/image/menu/w_results.png); }
	#header > nav > a.mn_treatment { background-image: url(/~hns/image/menu/w_treatment.png); }
	#header > nav > a.mn_recruit { background-image: url(/~hns/image/menu/w_recruit.png); }
}
@media screen and (min-width: 980px) {
	#header > nav {
		position: absolute;
		top: 0;
		right: 0;
		width: 400px;
		background-color: #fff;
	}
	#header > nav > a {
		height: 80px;
		border-left: 1px #015ba7 solid;
	}
	#header > nav > a.mn_news { background-image: url(/~hns/image/menu/b_news.png); }
	#header > nav > a.mn_class { background-image: url(/~hns/image/menu/b_class.png); }
	#header > nav > a.mn_disease { background-image: url(/~hns/image/menu/b_disease.png); }
	#header > nav > a.mn_results { background-image: url(/~hns/image/menu/b_results.png); }
	#header > nav > a.mn_treatment { background-image: url(/~hns/image/menu/b_treatment.png); }
	#header > nav > a.mn_recruit { background-image: url(/~hns/image/menu/b_recruit.png); }
	#header > nav > *:hover { background-color: rgba(1,91,167,.05); }
	#pg_news #header > nav > *.mn_news,
	#pg_class #header > nav > *.mn_class,
	#pg_disease #header > nav > *.mn_disease,
	#pg_results #header > nav > *.mn_results,
	#pg_treatment #header > nav > *.mn_treatment,
	#pg_recruit #header > nav > *.mn_recruit { background-color: rgba(1,91,167,.1); }
}

#footer {
	flex: 0 0 auto;
	background-color: #eff2f5;
	color: #4b749d;
	padding: 20px 5px;
	text-align: center;
}
#footer li {
	display: inline-block;
	padding: 0 5px;
	text-align: left;
}
#footer .ft_sitename { font-size: 1.2em; }

/*m:320 tab:768 pc:980*/
@media screen and (min-width: 320px) and (max-width: 980px) {
}

#contents {
	flex: 1 0 auto;
	background-color: inherit;
}

/*goup*/
#goup {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 1000;
}
#goup a {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	background-color: rgba(255,255,255,.7);
	border: #015ba7 1px solid;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#goup a::after{
	content: "";
	position: absolute;
	top: 6px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 12px;
	height: 12px;
	border-left: 2px solid #015ba7;
	border-top: 2px solid #015ba7;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*effect*/
.effect.eff_on {
	animation: eff_move 1s ease forwards;
}
@keyframes eff_move {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes eff_fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/*element*/
.e_bg_base {
	background-color: #015ba7;
	color: #fff;
}

.e_ttl_main {
	margin: 2em auto 10px;
	padding: 5px 0 5px 40px;
	background-color: #015ba7;
	background-repeat: no-repeat;
	background-position: 10px center;
	color: #fff;
	font-size: 1.2em;
}
#pg_top .e_ttl_main,
#pg_news .e_ttl_main { background-image: url('/~hns/image/general/ttl_news.png'); }
#pg_class .e_ttl_main { background-image: url('/~hns/image/general/ttl_class.png'); }
#pg_disease .e_ttl_main { background-image: url(/~hns/image/general/ttl_disease.png); }
#pg_results .e_ttl_main { background-image: url(/~hns/image/general/ttl_results.png); }
#pg_treatment .e_ttl_main { background-image: url(/~hns/image/general/ttl_treatment.png); }
#pg_recruit .e_ttl_main { background-image: url(/~hns/image/general/ttl_recruit.png); }

.e_ttl_sub {
	margin: 10px auto;
	padding-left: 5px;
	border-left: 10px #015ba7 solid;
	border-bottom: 2px #015ba7 solid;
	font-size: 1.1em;
	font-weight: bold;
	color: #015ba7;
}

.e_ttl_ex {
	position: relative;
	margin: 10px auto;
	padding: 5px 5px 5px 15px;
	font-weight: bold;
	color: #015ba7;
}
.e_ttl_ex::before {
	content: "";
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	margin: auto;
	display: block;
	width: 8px;
	background-color: #015ba7;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.e_ttl_ob {
	margin-bottom: 5px;
	padding: 2px 5px;
	background-color: #eaedf7;
	font-weight: bold;
	color: #015ba7;
}

.e_nav_btn {
	display: flex;
	flex-flow: row wrap;
}
.e_nav_btn > * {
	flex: 0 0 auto;
	margin: 0 5px 5px 0;
	padding: 5px 20px;
	border: 1px #015ba7 solid;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #f0f8ff;
	color: #015ba7;
}
.e_nav_btn > *:hover { background-color: #eaedf7; }
.e_nav_btn > *:last-child { margin: 0 0 5px 0;}

/* e_tab_btn */
.e_tab_btn {
	display: flex;
	flex-flow: row wrap;
	padding: 0 5px;
}
.e_tab_btn > * {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px 5px;
	padding: .5rem 5px;
	color: #015ba7;
}
@media screen and (max-width: 767px) {
	.e_tab_btn > * {
		background-color: #f0f8ff;
		border: 1px #015ba7 solid;
		border-radius: 5px;
	}
}
@media screen and (min-width: 768px) {
	.e_tab_btn > * {
		max-width: 25%;
		padding: 1rem 5px;
		-webkit-border-radius: 100vh;
		border-radius: 100vh;
		cursor: pointer;
	}
	/**/
	.e_tab_btn > *::before,
	.e_tab_btn > *::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		-webkit-border-radius: 100vh;
		border-radius: 100vh;
	}
	.e_tab_btn > *::before {
		margin: 5px;
		background-color: #f0f8ff;
		z-index: -1;
	}
	.e_tab_btn > *::after {
		background: linear-gradient(to bottom, #f0f8ff 0%, #e3eaed 37%, #015ba7 100%);
		border: 1px #015ba7 solid;
		z-index: -2;
	}
	.e_tab_btn > *:hover {
		padding: 1.1rem 0 .9rem;
		color: #152137;
	}
	.e_tab_btn > *:hover::after {
		background: linear-gradient(to top, #f0f8ff 0%, #e3eaed 37%, #015ba7 100%);
	}
}

.e_tbl_fixed,
.e_tbl_vary {
	width: 100%;
	border-collapse: collapse;
}
.e_tbl_fixed > * > tr > th,
.e_tbl_fixed > * > tr > td,
.e_tbl_fixed > tr > th,
.e_tbl_fixed > tr > td,
.e_tbl_vary > * > tr > th,
.e_tbl_vary > * > tr > td,
.e_tbl_vary > tr > th,
.e_tbl_vary > tr > td {
	border-width : 1px;
	border: 1px #015ba7 solid;
	padding: 10px;
	vertical-align: top;
	font-size: 1.0rem;
}
.e_tbl_fixed > * > tr > th,
.e_tbl_fixed > tr > th,
.e_tbl_vary > * > tr > th,
.e_tbl_vary > tr > th {
	background-color: #eff2f5;
	color: #015ba7;
}

@media screen and (max-width: 767px) {
	.e_tbl_vary > * > tr > th,
	.e_tbl_vary > * > tr > td,
	.e_tbl_vary > tr > th,
	.e_tbl_vary > tr > td {
		padding: 5px 10px;
		display: flex;
	}
	.e_tbl_vary > * > tr > th,
	.e_tbl_vary > tr > th,
	.e_tbl_vary > * > tr > td,
	.e_tbl_vary > tr > td { border: none; }
	.e_tbl_vary > * > tr > th,
	.e_tbl_vary > tr > th {
		border-left: 5px #015ba7 solid;
		border-bottom: 0px #015ba7 solid;
	}
}
.e_imgarea {
	display: flex;
	flex-flow: row wrap;
}
.e_imgarea figure {
	flex: 0 0 auto;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	padding: 0 5px 0;
}