@charset "UTF-8";
/* CSS Document */

#naka_inbox{text-align: left;word-break:normal;}

.tab_area{
	margin-bottom: 50px; 
	overflow: hidden;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 10px;
}

.tab_area label{
	flex: 0 0 calc((100% - 20px) / 3); /* 基本は3等分で上段に3つ並ぶ */
	display:block; 
	color:#FFFFFF; 
	background:#0098dd; 
	text-align:center; 
	cursor:pointer; 
	transition:ease 0.2s opacity;
	border-radius: 3px;
	font-weight: bold;
	font-size: 14px;
}
/* 4つ目以降のボタンにだけ幅を調整（4等分） */
.tab_area label:nth-child(n+4) {
  flex: 0 0 calc((100% - 30px) / 4);
}

.tab_area label a{
	color: #FFFFFF;
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
	padding:15px 0; 
}

.tab_area label:hover,.tab_area label.active{color:#0098dd; background:#ffe100; }
.tab_area label:hover a,.tab_area label.active a{color:#0098dd; opacity: 1;}

@media screen and (max-width: 1150px){
	.tab_area{gap: 1%;}
	.tab_area label,.tab_area label:nth-child(n+4){flex: 48%;}
}

@media screen and (max-width: 700px){
	.tab_area{margin-bottom: 20px;}
	.tab_area label{font-size: 13px; margin-bottom: 5px;}
}

.in_blue_box{margin-top: 40px;}
.contents_btn{font-size: 140%;}

.pdf_box{
	text-align: center;
}

.pdf{
	max-width: 500px;
	width: 90%;
	padding:20px 30px;
	font-size: 135%;
	margin-top: 10px;
}
.pdf a{width: 100%; height: 100%; display: inline-block;}

.pdf_box .contents_btn{
	max-width: 500px;
	width: 90%;
	margin-top: 10px;
	/*background-color: #005680;*/
}