@charset "utf-8";

/* -----------------------------------------
	Base
----------------------------------------- */

.dispIb {display: inline-block;}
.m0Auto {margin: 0 auto;}
.ml3p {margin-left: 3%;}
.w100 {	width: 100px;}
.flexWrap {flex-wrap: wrap;}
.jcC {justify-content: center!important;}
.flexBasic100p {
	flex-basis: 100%;
	max-width: 100%;
}
.flexBasic50p {
	flex-basis: 50%;
	max-width: 50%;
}

.indent03{
	text-indent: -3em !important;
	padding-left: 3em !important;
}

.fontRed02 {color: #ea5532;}
.fontRed03 {color: #c84e50;}
.font55 {font-size: 5.5rem !important;}
.fontGreen02 {color: #006502;}

.bgBlue {
	padding: 7px 15px 3px;
	background: #dcecf6;
}
.bgGreen {
	padding: 7px 15px 3px;
	background: #eaf3d9;
}
.greenBox {
	padding: 20px;
	background: #e1efd8;
}
.blueBox {
	padding: 20px;
	background: #dcecf6;
}
.jcE {justify-content: flex-end;}

.basicTable {padding: 5px !important;}
.basicTable th,.basicTable td {padding: 10px !important;}
td.bg03 {background: #f9eae9;}

@media screen and (max-width: 750px){
	.sp_mb5p {margin-bottom: 5% !important;}
	
	.sp_font15 {font-size: 1.5rem !important;}
	.sp_font28 {font-size: 2.8rem !important;}
	
	.sp_jcC {justify-content: center !important;}
	.sp_ta-c {text-align: center !important;}
}


/* -----------------------------------------
	Btn
----------------------------------------- */

.btnWrap {
	max-width: 710px;
	width: 100%;
	margin: 0 auto;
}

.btn a,.btn02 a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 18px 10px;
	font-size: 1.6rem;
	font-weight: bold;
}
.btn.green a {background: #8fc31f;}
.btn.blue a {background: #187fc4;}
.btn.red a {background: #ea5532;}
.btn.pink a {background: #ee86a8;}
	

/* -----------------------------------------
	qa
----------------------------------------- */

.question > .icon {background: #ce3186;}
.answer > .icon {background: #ca4229;color: #fff;}


/* -----------------------------------------
	color
----------------------------------------- */

[class*="color"] {
	position: relative;
	padding-left: 38px;
}
[class*="color"]:before,.colorIcon:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	width: 30px;
	height: 12px;
	margin-left: 3px;
	border: 1px solid #333;
}
.colorOrange:before {background: #feecd2;}
.colorGreen:before {background: #e1efd8;}
.colorWhite:before {background: #fff;}
.colorIcon:before {background: #e1efd8;top: 5px;margin: 0;}
.colorIcon:after {background: #dcecf6;top: 23px;margin: 0;}


/* -----------------------------------------
	attentionIcon
----------------------------------------- */

[class*="attentionIcon"] {
	position: relative;
	padding-left: 55px;
}
[class*="attentionIcon"]:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 45px;
}
.attentionIcon01:before {
	height: 3px;
	background: #231815;
}
.attentionIcon02:before {
	height: 0;
	border: 1px dashed #e50012;
}
.attentionIcon03:before {
	height: 10px;
	background: #d2e7a5;
}
