@charset "UTF-8";

#mainAr { padding-top: 0; }

.mt {
	padding: 16 0 16px;
	margin-bottom: 0;
	color: #a52a2a;
	border-bottom: solid 3px #a52a2a;
}
.mt b {
	display: block;
	padding: 0;
	margin: 0 auto;

	color: inherit;
	font-size: 32px;
	line-height: 40px;
	font-weight: 500;
}
@media only screen and (min-width: 768px) {

	.mt {
		padding: 20px 0;
	}
	.mt b {
		display: inline-block;
		padding-right: 8px;
		font-size: inherit;
		line-height: inherit;
	}

}

.mt + .erroWrap:not(:empty) { margin-top: 16px; }

@media only screen and (min-width: 768px) {

	.mt + .erroWrap:not(:empty) { margin-top: 20px; }

}

.fr.pr {
	margin-left: -20px;
	margin-right: -20px;
	padding: 0 20px;

	background: #ffd;
	border-bottom: solid 3px #a52a2a;
}
@media only screen and (min-width: 768px) {

	.fr.pr {
		margin-left: -40px;
		margin-right: -40px;
		padding: 0 40px;
	}

}
.fr.pr + .fr.pr { margin-top: 0; }

.fr.pr > .ti {
	color: #a52a2a;
	padding: 12px 0;
	box-sizing: border-box;
}
.fr.pr[data-tab] > .ti {
	text-align: center;
	width: 50%;
}
.fr.pr[data-tab=tab01] > .ti {
	padding-right: 20px;
}
.fr.pr[data-tab=tab02] > .ti {
	padding-left: 20px;
	margin-left: auto;
}
@media only screen and (min-width: 768px) {

	.fr.pr[data-tab=tab01] > .ti { padding-right: 40px; }
	.fr.pr[data-tab=tab02] > .ti { padding-left: 40px; }

}

.fr.pr[data-acc][data-status=cls] > .ti {
	width: auto;
	color: #fff;
	background: #048;
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;

	cursor: pointer;
}
@media only screen and (min-width: 768px) {

	.fr.pr[data-acc][data-status=cls] > .ti {
		margin-left: -40px;
		margin-right: -40px;
		padding-left: 40px;
		padding-right: 40px;
	}

}


.fr.pr > .chckWrap { padding-bottom: 20px; }
.fr.pr:not([data-tab]) > .chckWrap,
.fr.pr:not([data-acc]) > .chckWrap { padding-top: 0; }
@media only screen and (min-width: 768px) {
	.fr.pr > .chckWrap { padding-bottom: 40px; }
}


.btnTab {
	display: block;
	width: 50%;
	height: auto;

	padding: 12px 0;
	margin: 0;

	color: #fff;
	text-align: center;

	font-size: 18px;
	line-height: 24px;
	font-weight: 500;

	background: #048;

	position: absolute;
	top: 0;

	cursor: pointer;

	transition: all 300ms 200ms ease-in-out;
	-webkit-transition: all 300ms 200ms ease-in-out;
}
[data-tab=tab01] > .btnTab { right: 0; }
[data-tab=tab02] > .btnTab { left: 0; }
.btnTab:hover,
.btnTab:focus { opacity: .8; }

.dlFlow {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;

	position: relative;
}
.txtMid + .dlFlow { margin-top: 16px; }
.dlFlow + .dlFlow { margin-top: 32px; }
.dlFlow + .dlFlow::before {
	content: '';

	display: block;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	margin-left: -16px;
	overflow: hidden;

	border-top: solid 16px #a52a2a;
	border-left: solid 16px transparent;
	border-right: solid 16px transparent;

	position: absolute;
	left: 50%;
	top: -24px;
}
@media only screen and (min-width: 768px) {

	.txtMid + .dlFlow { margin-top: 20px; }
	.dlFlow + .dlFlow { margin-top: 40px; }
	.dlFlow + .dlFlow::before { top: -28px; }

}

.dlFlow > dt {
	display: block;
	padding: 8px 0;
	margin: 0;

	color: #fff;
	text-align: center;

	font-size: 18px;
	line-height: 24px;
	font-weight: 500;

	background: #a52a2a;

}
@media only screen and (min-width: 768px) {

	.dlFlow > dt { padding: 12px 0; }

}

.dlFlow > dd {
	display: block;
	width: auto;
	height: auto;
	padding: 0 8px 16px;
	margin: 0;

	background: #fff;

	position: relative;
}
.dlFlow > dd > img.imgBlk {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	padding: 0;
	margin: 0 auto;
}
.dlFlow > dd > img.imgBlk + .txtMid {
	margin-top: 16px;
}
.dlFlow > dd > span { display: block; }
@media only screen and (min-width: 768px) {

	.dlFlow > dd {
		height: auto;
		min-height: 180px;
		padding: 10px 320px 10px 10px;
		margin: 0;
	}
	.dlFlow > dd > img.imgBlk {
		width: 320px;
		height: auto;
		position: absolute;
		right: 0;
		top: 10px;
	}
	.dlFlow > dd > img.imgBlk + .txtMid { margin-top: 0; }

}