/* 導入部分
------------------------------------------------------------*/
.guide-btn > li:not(:nth-last-child(-n+3)){margin-bottom: 20px;}


/* 対応しているワクチン一覧
------------------------------------------------------------*/
.vaccine_title{
	display: flex;
	align-items: center;
}
.vaccine_title p{
	width: fit-content;
	padding: 5px 20px;
	margin-right:  15px;
	border-radius: 3px;
	text-align: center;
}
#vaccine-li .table *{font-size: 18px;}
#vaccine-li .table th,#vaccine-li .table td{padding: 20px 25px;}
#vaccine-li .table tbody th,#vaccine-li .table tbody tr td:nth-child(2){width: 45%;}
#vaccine-li .table tbody tr td:last-child{
	text-align: center;
	width: 10%;
}

/* 標準的な接種スケジュール
------------------------------------------------------------*/
#schedule .table thead th,#schedule .table td{
	padding: 20px 5px;
	line-height: 1.3;
}
#schedule .table th{padding: 15px 20px;}
#schedule .table tbody th{width: 15%;}
#schedule .table tbody td{
	width: 6.5%;
	text-align: center;
}
#schedule .table *{font-size: 15px;}
#schedule .table tbody tr:not(:nth-last-child(-n+2)){background-color: #eef6f9;}
#schedule .table tbody tr:nth-last-child(-n+2){background-color: #fff9ea;}
.po_box,.po_box li{
	display: flex;
	align-items: center;
}
.po_box{justify-content: center;}
.po_box li:not(:last-child){margin-right: 25px;}
.po_box li::before{
	content: '';
	width: 15px;
	height: 15px;
	aspect-ratio: 1 / 1;
	margin-right: 10px;
}
.po_box li:first-child::before{background-color: #dcedf3;}
.po_box li:last-child::before{background-color: #ffefc4;}

/* インフルエンザワクチンについて
------------------------------------------------------------*/
.influ_con > div{
	background-color: #E8E2DF;
	padding: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.influ_con > div:not(:last-child){margin-bottom: 20px;}
.influ_con > div dt{width: 250px;}
.influ_con > div dd{width: calc(100% - 250px);}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* 導入部分
	-----------------------------------*/
	.guide-btn > li:not(:nth-last-child(-n+2)){margin-bottom: 15px;}
		
	/* 対応しているワクチン一覧
	-----------------------------------*/
	.vaccine_title p{
		padding: 3px 15px;
		margin-right: 8px;
	}
	#vaccine-li .table *{font-size: 14px;}
	#vaccine-li .table th,#vaccine-li .table td,#schedule .table th{padding: 15px;}
	
	/* 標準的な接種スケジュール
	-----------------------------------*/
	#schedule .table{overflow: scroll;position: relative;}
	#schedule table{min-width: 1200px;}
	#schedule .table *{font-size: 14px;}
	#schedule .table thead th, #schedule .table td{padding: 15px 5px;}
	
	#schedule .table thead th:first-child,#schedule .table tbody th{
		position: sticky;
		left: 0;
		z-index: 1;
	}
	#schedule .table tbody th{
		width: 13%;
		background-color: #dff1f8;
	}
	#schedule .table thead th:first-child{background-color: #e3d8d2;}
	
	/* インフルエンザワクチンについて
	-----------------------------------*/
	.influ_con > div{
		padding: 20px;
		border-radius: 8px;
	}
	.influ_con > div:not(:last-child){margin-bottom: 15px;}
	.influ_con > div dt{width: 180px;}
	.influ_con > div dd{width: calc(100% - 180px);}

}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* 対応しているワクチン一覧
	-----------------------------------*/
	#vaccine-li .table{overflow-x: scroll;}
	#vaccine-li table{min-width: 600px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* 対応しているワクチン一覧
	-----------------------------------*/
	.vaccine_title{flex-wrap: wrap;}
	.vaccine_title p{margin: 0 0 5px;}
	.vaccine_title h3{width: 100%;}
	
	/* インフルエンザワクチンについて
	-----------------------------------*/
	.influ_con > div dt,.influ_con > div dd{width: 100%;}
	.influ_con > div dt{margin-bottom: 5px;}

}