@charset "utf-8";
/*===========================================
	tabswitch.css
=============================================*/
:root{
	--tab-background-color: #e2e2e2;
	--tab-border-color: #959595;
	--tab-font-color: #000;
	--tab-selected-background-color: #FFF;
	--tab-selected-font-color: #000;
	--tab-outline-color: #000;
}
.tabswitch{
	margin: 2em 0;
	padding: 0;
	color: #000;
	background-color: #fff;
}
.tabswitch button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
.tabswitch [aria-hidden="true"],
[role="tabpanel"][aria-hidden="true"]{
	display: none;
}
/*===========================================
	tablist
=============================================*/
.tabswitch [role="tablist"]{
	display: flex;
	justify-content: space-between;
}

/*===========================================
	tab
=============================================*/
.tabswitch [role="tab"]{
	padding: 1em;
	margin: 0;
	border: 1px solid var(--tab-border-color);
	border-right: none;
	background-color: var(--tab-background-color);
	color: var(--tab-font-color);
	width: 100%;
	border-radius: 6px 6px 0 0; 
	overflow: hidden;
}
.tabswitch [role="tab"]:last-child{
	border-right: 1px solid var(--tab-border-color);
}
.tabswitch [role="tab"][aria-selected="true"]{
	border-bottom: 1px solid var(--tab-selected-background-color);
	background-color: var(--tab-selected-background-color);
	color: var(--tab-selected-font-color);
}
.tabswitch [role="tab"]:hover,
.tabswitch [role="tab"]:focus{
	background-color: var(--tab-selected-background-color);
	outline: 2px solid var(--tab-outline-color);
	color: var(--tab-selected-font-color);
	z-index: 10;
}
/*===========================================
	tabpanel
=============================================*/
.tabswitch [role="tabpanel"]{
	padding: 1em;
	margin: 0;
	border: 1px solid var(--tab-border-color);
	border-top: none;
}
/*===========================================
	option
=============================================*/
/*------------- square -------------- */
.tabswitch.square [role="tab"]{
	border-radius: 0;
}
/*===========================================
	カラバリ
=============================================*/
/*------------- blue -------------- */
.tabswitch.clr_blue{
	--tab-background-color: #EFF1F5;
	--tab-border-color: #0060C7;
	--tab-font-color: #000;
	--tab-selected-background-color: #0060C7;
	--tab-selected-font-color: #FFF;
	--tab-outline-color: #000;
}
/*------------- orange -------------- */
.tabswitch.clr_orange{
	--tab-background-color: #ffc2ad;
	--tab-border-color: #d24615;
	--tab-font-color: #000;
	--tab-selected-background-color: #d24615;
	--tab-selected-font-color: #FFF;
	--tab-outline-color: #000;
}