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

/*===========================================
	tabswicth css
=============================================*/
.tabArea{
	margin-top: 3em;
}

.tabArea ul.indexTab{
	list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
}

.tabArea ul.indexTab > li{    
    flex: 1;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ccc;
    background-color: #F5F5F5;
	border-bottom-color: #ccc;
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.tabArea ul.indexTab > li.active{
	background-color: #fff;
	border-bottom-color: #fff;
}

.tabArea ul.indexTab > li:focus-visible{
	outline: thin dotted;
}

strong.heading{
    margin: 0.5em 0;
    font-size: 1.5em;
}

div.insideArea{
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 2em;
	border-top:none;
	margin-bottom: 2em;
}

div.insideArea .openArea:focus-visible{
	outline: none;
}

@media (max-width: 640px){
	strong.heading{
		font-size: 1em;
	}
	.tabArea{
		margin-left: 5px;
		margin-right: 5px;
	}
	.tabArea ul.indexTab{
		margin-left: 0;
	}
	
	.tabArea ul.indexTab > li{
		padding-left: 0;
		padding-right: 0;
	}

	div.insideArea{
		padding: 2em 1em;
		margin: 0 5px 2em 5px;
	}
}

@media (max-width: 390px){
	.insideArea{
		padding: 2em 10px;
	}

}

/* 20230206 */
.tabswitch button {
    font-weight: bold;
}