@charset "utf-8"; 

/* ===========================================================================================================================
	トップページ top css
	
	---- INDEX ----
	ロゴ＆タイトル＆認定病院数（メインビジュアルに重ねる）
	メインビジュアルスライダー
	セクションタイトル
	セクション1：認定病院検索
	セクション2：最新認定病院一覧
============================================================================================================================== */
.top-header {
	position: relative;
}
/*ロゴ（メインビジュアルに重ねる）
------------------------------------------ */
.hlogo {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
}
@media screen and (max-width: 1499px) {/*  */
	.hlogo img {
		width: 300px;
		height: auto;
	}
}
@media screen and (max-width: 1279px) {/*  */
	.hlogo img {
		width: 250px;
		height: auto;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.hlogo {
		top: 10px;
		right: 10px;
	}
	.hlogo img {
		width: 200px;
		height: auto;
	}
}
/*タイトル＆認定病院数（メインビジュアルに重ねる）
------------------------------------------ */
.top-hinfo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 2;
	width: 100%;
}
@media screen and (max-width: 450px) {/* SP */
	.top-hinfo {
		top: 70%;
		left: 50%;
		transform: translateX(-50%) translateY(-70%);
	}
}
/*タイトル
--------------------*/
.top-hinfo .site-title {
	font-size: 43px;
	font-weight: 700;
	text-align: center
}
@media screen and (min-width: 1000px) {/* PC */
	.top-hinfo .site-title {
		font-size: clamp(30px, 3vw, 70px);/*画面幅に合わせて可変にする（最小30px〜最大70pxの範囲で画面幅の3%）*/
		/*font-size: max(43px, 3vw);/*画面幅に合わせて可変にする（最小43pxで画面幅の3%）*/
		margin-bottom: 0.5em;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.top-hinfo .site-title {
		font-size: 20px;
		line-height: 1.2;
	}
}
@media screen and (max-width: 374px) {/* 最小SP */
	.top-hinfo .site-title {
		font-size: 18px;
		line-height: 1.1;
	}
}
/*認定病院数
--------------------*/
table.hp-info {
	margin: 0 auto;
}
table.hp-info th,
table.hp-info td {
	text-align: center;
}
table.hp-info .hp-auth {
	/*font-size: 28px;/*「認定病院数」の文字サイズ*/
	font-size: clamp(14.6px, 1.46vw, 37.3px);/*画面幅に合わせて可変にする*/
	vertical-align: bottom;
}
table.hp-info .hp-auth-num {
	/*font-size: 56px;/*「認定病院数」の数字サイズ*/
	font-size: clamp(29.2px, 2.92vw, 74.7px);/*画面幅に合わせて可変にする*/
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	vertical-align: bottom;
	line-height: 1.2;
	color: #004982;
}
table.hp-info .as-of-date {
	/*font-size: 15px;/*「認定病院数」の現在日付*/
	font-size: clamp(10px, 0.78vw, 20px);/*画面幅に合わせて可変にする*/
	line-height: 1;
	padding-bottom: 10px;
}
table.hp-info .hp-all {
	/*font-size: 12px;/*「全国病院数」の文字サイズ*/
	font-size: clamp(10px, 0.625vw, 16px);/*画面幅に合わせて可変にする*/
	color: #777;
	line-height: 1.2;
}
table.hp-info .hp-all-num {
	/*font-size: 24px;/*「全国病院数」の数字サイズ*/
	font-size: clamp(12.5px, 1.25vw, 32px);/*画面幅に合わせて可変にする*/
	color: #777;
}

/*古い*/
.top-hinfo .hospitals-info {
	text-align: center
}
.top-hinfo .hospitals-info .hospitals-num {
	display: flex;
	justify-content: center;/*内包要素を左右センターに */
}
.top-hinfo .hospitals-info .date {
	font-size: 14px;
}
.top-hinfo .hospitals-info .hospitals-num p {
	font-size: 18px;/*「認定病院数」の文字サイズ*/
	line-height: 30px;
	margin: 0 1em 1em;
	position: relative;
}
.top-hinfo .hospitals-info .hospitals-num p.all {
	font-size: 10px;/*「全病院数」の文字サイズを小さく*/
}
.top-hinfo .hospitals-info .hospitals-num p span {
	display: block;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 46px;/*「認定病院数」の数字サイズ*/
	line-height: 0.8;
}
.top-hinfo .hospitals-info .hospitals-num p.auth span::after {
	content: "/";
	position: absolute;
	bottom: 0;
	right: -27px;
}
.top-hinfo .hospitals-info .hospitals-num p.all span {
	font-size: 24px;/*「全病院数」の数字サイズを小さく*/
	padding-top: 19px;/*「認定病院数」の数字と下揃えに*/
}
.top-hinfo .hospitals-info .notes {
	font-size: 14px;
}
@media screen and (min-width: 1000px) {/* PC */
	.top-hinfo .hospitals-info .hospitals-num p {
		margin: 0 1em 0.5em;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.top-hinfo .hospitals-info .hospitals-num p {
		margin: 0 1em 0.5em;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.top-hinfo .hospitals-info .date {
		font-size: 12px;
		line-height: 1.2;
	}
	.top-hinfo .hospitals-info .hospitals-num p {
		font-size: 13px;/*「認定病院数」の文字サイズ*/
		line-height: 20px;
		margin: 0 1em 1em;
	}
	.top-hinfo .hospitals-info .hospitals-num p.all {
		font-size: 10px;/*「全病院数」の文字サイズを小さく*/
	}
	.top-hinfo .hospitals-info .hospitals-num p span {
		font-size: 26px;/*「認定病院数」の数字サイズ*/
	}
	.top-hinfo .hospitals-info .hospitals-num p.auth span::after {
		right: -17px;
	}
	.top-hinfo .hospitals-info .hospitals-num p.all span {
		font-size: 15px;/*「全病院数」の数字サイズを小さく*/
		padding-top: 8px;/*「認定病院数」の数字と下揃えに*/
	}
	.top-hinfo .hospitals-info .notes {
		font-size: 12px;
		line-height: 1.2;
	}
}
@media screen and (max-width: 374px) {/* 最小SP */
	.top-hinfo .hospitals-info .date {
		font-size: 11px;
		line-height: 1.2;
	}
	.top-hinfo .hospitals-info .hospitals-num p {
		margin: 0 0.5em 0.5em;
	}
	.top-hinfo .hospitals-info .hospitals-num p span {
		font-size: 20px;/*「認定病院数」の数字サイズ*/
	}
	.top-hinfo .hospitals-info .hospitals-num p.auth span::after {
		right: -7px;
	}
	.top-hinfo .hospitals-info .hospitals-num p.all span {
		font-size: 15px;/*「全病院数」の数字サイズを小さく*/
		padding-top: 4px;/*「認定病院数」の数字と下揃えに*/
	}
	.top-hinfo .hospitals-info .notes {
		font-size: 11px;
		line-height: 1.2;
	}
}

/* メインビジュアルスライダー
------------------------------------------ */
.slider {
	width: 100%;
	position: relative;
}
.slider ul {
	clear: both;
	width: 100%;
}
.slider ul li img{
	width: 100%;
}
@media screen and (min-width: 1000px) {/* PC */
	#visualSp {
		display: none;/*SP用スライダーを非表示*/
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#visual {
		display: none;/*PC用スライダーを非表示*/
	}
}
@media screen and (max-width: 767px) {/* SP */
	#visual {
		display: none;/*PC用スライダーを非表示*/
	}
}

/* セクションタイトル
------------------------------------------ */
.top-h2 {
	background: url("../../img_top/icon-top-h2.png") no-repeat center 20px #004982;
	height: 130px;
	padding: 56px 0 0;
	margin: 0 0 100px;
	text-align: center;
	font-size: 33px;
	font-weight: 200;
	letter-spacing: 0.2em;
	color: #fff;
}
@media screen and (max-width: 767px) {/* SP */
	.top-h2 {
		margin: 0 0 50px;
		font-size: 28px;
	}
}
/* セクション1：認定病院検索
------------------------------------------ */
.top-sec1 {
	background: #E9EEF1;
	padding: 0 0 100px;
}
@media screen and (max-width: 767px) {/* SP */
	.top-sec1 {
		padding: 0 0 50px;
	}
}
/* キーワード検索
--------------------- */
.kw-search {
	margin-bottom: 100px;
}
.kw-search .notes {
	margin-bottom: 1em;
}
@media screen and (max-width: 767px) {/* SP */
	.kw-search {
		margin-bottom: 50px;
	}
}
@media screen and (max-width: 374px) {/* 最小SP */
	.kw-search .notes {
		font-size: 0.8em;
	}
}

/* 都道府県検索
--------------------- */
@media screen and (min-width: 1000px) {/* PC */
	.pref-search {
		position: relative;
		width: 100%;
		height: 710px;
		background: url("../../img_top/japan-map.png") no-repeat center center #fff;
		background-size: 100%;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-search {
		position: relative;
		width: 768px;
		height: 800px;
		background: url("../../img_top/japan-map.png") no-repeat center center #fff;
		background-size: 100% 100%;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-search {
		width: calc(100% - 20px);
		background: #fff;
		padding: 10px;
	}
}
.pref-area {
	position: absolute;
	display: flex;
	flex-wrap: wrap; /* 内包要素を折り返す（内包要素にwidth:を指定） */
	gap: 10px;
	padding: 10px;
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area {
		position: inherit;
	}
}
.pref-area p a {
	display: block;
	background: #fff;
	color: #000;
	width: 5em;
	text-align: center;
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area p {
		width: calc((100% - 30px) / 4);
	}
	.pref-area p a {
		width: 100%;
	}
}
.pref-area p a:hover {
	background: #004982;
	color: #fff;
}
/*北海道*/
.pref-area.hokkaido {
	top: 212px;
	left: 841px;
	width: calc(5em + 20px);
	background: #A3DBF7;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.hokkaido {
		top: 235px;
		left: 640px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.hokkaido {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*東北*/
.pref-area.tohoku {
	top: 284px;
	left: 755px;
	width: calc(10em + 30px);
	background: #A7DADF;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.tohoku {
		top: 300px;
		left: 540px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.tohoku {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*関東*/
.pref-area.kanto {
	top: 476px;
	left: 755px;
	width: calc(10em + 30px);
	background: #FAD389;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.kanto {
		top: 500px;
		left: 540px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.kanto {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*甲信越・北陸*/
.pref-area.koushinetsuhokuriku {
	top: 120px;
	left: 434px;
	width: calc(10em + 30px);
	background: #BECFEA;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.koushinetsuhokuriku {
	top: 110px;
	left: 380px;
	width: calc(5em + 20px);
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.koushinetsuhokuriku {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*東海*/
.pref-area.tokai {
	top: 550px;
	left: 515px;
	width: calc(10em + 30px);
	background: #ABD8B5;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.tokai {
	top: 550px;
	left: 380px;
	width: calc(5em + 20px);
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.tokai {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*近畿*/
.pref-area.kinki {
	top: 267px;
	left: 295px;
	width: calc(10em + 30px);
	background: #F7CADD;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.kinki {
	top: 200px;
	left: 260px;
	width: calc(5em + 20px);
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.kinki {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*中国*/
.pref-area.chugoku {
	top: 284px;
	left: 35px;
	width: calc(10em + 30px);
	background: #C2DD96;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.chugoku {
		top: 330px;
		left: 35px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.chugoku {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*四国*/
.pref-area.shikoku {
	top: 550px;
	left: 275px;
	width: calc(10em + 30px);
	background: #E7CEA9;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.shikoku {
	top: 580px;
	left: 260px;
	width: calc(5em + 20px);
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.shikoku {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*九州*/
.pref-area.kyusyu {
	top: 476px;
	left: 35px;
	width: calc(10em + 30px);
	background: #D6C5DF;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.kyusyu {
		top: 550px;
		left: 15px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.kyusyu {
		width: 100%;
		margin: 0 auto 10px;
	}
}
/*沖縄*/
.pref-area.okinawa {
	top: 65px;
	left: 35px;
	width: calc(5em + 20px);
	background: #F7BFA7;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.pref-area.okinawa {
		top: 90px;
		left: 35px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.pref-area.okinawa {
		width: 100%;
		margin: 0 auto 0;
	}
}

/* GoogleMap検索
--------------------- */
.ggmap-search {
	width: 100%;
}
@media screen and (min-width: 1000px) {/* PC */
	.ggmap-search {
		height: 710px;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.ggmap-search {
		height: 800px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.ggmap-search {
		width: calc(100% - 20px);
		height: 710px;
	}
}

/* セクション2：最新認定病院一覧
------------------------------------------ */
.top-sec2 {
	background: #fff;
	padding: 0 0 100px;
}
@media screen and (min-width: 768px) {/* TB & PC */
	.latest-certification {
		position: absolute;
		top: -230px;
		right: 10px;
		text-align: center;
	}
	.latest-certification a {
		color: #000;
	}
	.latest-certification .pdf-link {
		width: 130px;
		height: 130px;
		border-radius: 65px;
		padding-top: 28px;
		background: #fff;
		line-height: 1.2;
		font-size: 14px;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.latest-certification {
		position: absolute;
		top: -75px;
		right: 10px;
		text-align: center;
	}
	.latest-certification a {
		color: #fff;
	}
	.latest-certification .pdf-link {
		font-size: 14px;
	}
	.latest-certification .pdf-link img {
		width: 20px;
		height: auto;
	}
}


@media screen and (min-width: 1000px) {/* PC */
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
}
@media screen and (max-width: 767px) {/* SP */
}