@charset "utf-8";

/******************************************************
 *
 * タブ
 *
 ******************************************************/
.tab-box {
}
.tab-box .tabs {
	position: relative;
}
.tab-box .tabs > ul {
	position: relative;
	display: table;
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
    border-spacing: 8px 0; 
	z-index: 1;
}
.tab-box .tabs > .tabs-underline {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	margin-top: -2px;
	border-bottom: 2px solid #4d318e;
	z-index: 0;
}
.tab-box .tabs > ul > li.tab {
	position: relative;
	display: table-cell;
	box-sizing: border-box;
	font-size: 115%;
	vertical-align: middle;
	border: solid 2px #4d318e;
	border-bottom: none;
	background-color: #4d318e;
	border-top-left-radius: 0.4em;
    border-top-right-radius: 0.4em;
	color: white;
	overflow: hidden;
	height: 37px;	/* rem 連動：ceil(1rem * 120% * 2.6 - 2 + 4) */
}
@media (max-width: 320px) {
	.tab-box .tabs > ul > li.tab { 
		height: 34px;
	}
}
@media (min-width: 540px) and (max-width: 767px) {
	.tab-box .tabs > ul > li.tab { 
		height: 40px;
	}
}
@media (min-width: 768px) {
	.tab-box .tabs > ul > li.tab { 
		height: 46px;
	}
}
.tab-box .tabs > ul > li.tab.tab-disabled {
	background-color: #bfbfbf;
	color: white;
}
.tab-box .tabs > ul > li.tab.tab-active {
	background-color: white;
	color: #4d318e;
}
.tab-box .tabs > ul > li.tab.tab-disabled a,
.tab-box .tabs > ul > li.tab.tab-active a {
	cursor: default;
}
.tab-box .tabs > ul > li.tab.tab-default-background.tab-active {
	background-color: #f7f7f7;
	border-bottom-color: #f7f7f7;
}
.tab-box .tabs > ul > li.tab.tab-active:after {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	top: 100%;
	width: 100%;
	height: 0;
	border-bottom: 2px solid white;
	z-index: 2;
}
.tab-box .tabs > ul > li.tab.tab-default-background.tab-active:after {
	border-bottom-color: #f7f7f7;
}
.tab-box .tabs > ul > li.tab a,
.tab-box .tabs > ul > li.tab p {
	display: block;
	box-sizing: border-box;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	text-align: center;
}
.android .tab-box .tabs > ul > li.tab a,
.android .tab-box .tabs > ul > li.tab p {
	padding-top: 0.9em;
	padding-bottom: 0.7em;
}
.tab-box .tab-wrapper {
	position: relative;
}
.tab-box .tab-wrapper .tab-content {
	display:none;
}
.tab-box .tab-wrapper .tab-content.tab-active {
	display:block;
}