/*
---------------------------
	   for all view
---------------------------
*/

hr { padding:0; border:0; height:1px; background-color:#0081af; }
.js-accordion.is-close .js-accordion-wrapper { height:0px; }
h2 { color:#333; }
h3, h4, dt { color:#555; }
dt { cursor:pointer; }
dl dt { border-bottom:0px; position:relative; }
dl.js-accordion { border:1px solid #0081af; }
dl.is-open dt { border-bottom:1px solid #0081af; transition:border 0s linear; }
dt { background-color:#0081af; color:#fff; }
dt span.toggle {
	display:inline-block;
	border:1px solid #fff;
	position:absolute;
	right:10px;
}
dt span.toggle span.line {
	height:2px;
	display:inline-block;
	position:absolute;
	top:calc(50% - 1px);
	background-color:#fff;
}
dt span.toggle span.line.vertical {
	transform:rotate(90deg);
	transition:transform .3s ease;
}
dl.is-open dt span.line.vertical {
	transform:rotate(0deg);
}
dt span.toggle span.line.holizontal {
	transition:all .3s ease;
}
dl.is-open dt span.line.holizontal {
	transform:rotate(-90deg);
	opacity:0;
}

@media screen and ( min-width:769px ) and (min-device-width:813px) {
	/*
	---------------------------
		   for large view
	---------------------------
	*/

	dt span.toggle {
		display:inline-block;
		width:30px;
		height:30px;
		top:calc(50% - 16px);
		border-radius:5px;
	}
	dt span.toggle span.line {
		width:18px;
		left:calc(50% - 9px);
	}

}


@media screen and ( min-width:769px ) and ( max-width:900px ){
	/*
	---------------------------
		   for medium view
	---------------------------
	*/


}


@media screen and ( max-width:768.9px ), screen and (max-device-width:812.9px) {
	/*
	---------------------------
		  for small view
	---------------------------
	*/

	dt span.toggle {
		display:inline-block;
		width:20px;
		height:20px;
		top:calc(50% - 11px);
		border-radius:2px;
	}
	dt span.toggle span.line {
		width:12px;
		left:calc(50% - 6px);
	}

}