@charset "UTF-8";
/* CSS Document */

/* 中身======================================================================================================== */
#box01 h3,
#box01 p{
	display: inline-block;
	vertical-align: middle;
}
#box01 p{
	font-size: 18px;
	margin: 0 0 0 20px;
}

#box02{
	text-align: center;
}
#box02 p{
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	text-align: left;
}
#box02 li{
	font-size: 24px;
	display: inline-block;
	vertical-align: middle;
	line-height: 140px;
	width: 140px;
	height: 140px;
	margin: 0 10px;
	border: solid 1px #333;
	-webkit-border-radius: 140px;
	-moz-border-radius: 140px;
	border-radius: 140px;
}
#box02 li:nth-child(4){
	width: auto;
	height: auto;
	border: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

#box03{
	text-align: center;
}
#box03 .sub_bar{
	text-align: left;
}
#box03 .tel{
	margin: 0 0 10px;
}
#box03 .tel h5{
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 0 0;
}
#box03 .tel address{
	display: inline-block;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	color: #CC0000;
	font-size: 46px;
	line-height: 1.4;
}
#box03 .tel address img{
	vertical-align: middle;
	margin: 0 10px 0 0;
}
#box03 .tel address a{
	color: #CC0000;
}

#box03 .mail{
	width: 240px;
	margin: 0 auto;
}
#box03 .mail a{
display: block;
text-align: center;
text-decoration: none;
color: #FFF;
background-color: #f54d90;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f54d90), color-stop(0.00, #ec96ae));
background: -webkit-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -moz-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -o-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -ms-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: linear-gradient(top, #ec96ae 0%, #f54d90 100%);
border: solid 1px #f54d90;
margin: 0 0 20px;
padding: 15px 0;
box-sizing: border-box;
}

#q_and_a{
font-size: 18px;
}
#q_and_a li{
margin: 40px 0 0;
}
#q_and_a li .q{
width: 500px;
float: left;
margin: 0 0 10px;
}
#q_and_a li .q::before{
display: inline-block;
content: "Q";
line-height: 1;
background-color: #277A24;
color:#FFF;
text-align: center;
width: 30px;
padding: 5px 0;
margin: 0 20px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#q_and_a li .a::before{
display: inline-block;
content: "A";
line-height: 1;
background-color: #B81416;
color:#FFF;
text-align: center;
width: 30px;
padding: 5px 0;
margin: 0 20px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#q_and_a li em,
#q_and_a li p{
display: inline-block;
vertical-align: middle;
background-color: #EEE;
width: 450px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
}
#q_and_a li em::before,
#q_and_a li p::before{
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 10px 5px 0;
border-color: transparent #EEE transparent transparent;
position: absolute;
top: 50%;
left: -10px;
margin: -5px 0 0;
}
#q_and_a li .a{
width: 500px;
float: right;
}


/* レスポンシブ======================================================================================================== */
@media print and (max-width: 670px), screen and (max-width: 670px){
#box01 h3,
#box01 p{
	display: block;
}
#box01 h3{
	text-align: center;
	margin: 0 0 20px;
}
#box01 p{
	margin: 0px;
}

#box02{
}
#box02 p{
	font-size: 14px;
	text-align: left;
}
#box02 li{
	width: 80px;
	height: 80px;
	line-height: 80px;
	font-size: 12px;
	margin: 0 2px 10px;

	display: inline-block;
	vertical-align: middle;
	border: solid 1px #333;
	-webkit-border-radius: 140px;
	-moz-border-radius: 140px;
	border-radius: 140px;
}
#box02 li:nth-child(4){
	display: block;
	line-height: 1.8;
}

#box03 .tel{
	float: none;
	text-align: center;
	margin: 0 0 20px;
}
#box03 .tel h5{
	font-size: 14px;
	display: block;
}
#box03 .tel address{
	display: block;
	font-size: 24px;
	line-height: 1.4;
}
#box03 .tel address img{
	vertical-align: middle;
	margin: 0 10px 0 0;
}

#box03 .mail{
	float: none;
	width: 240px;
	margin: 0 auto;
}

#q_and_a{
font-size: 16px;
}
#q_and_a li .q,
#q_and_a li .a{
width: 100%;
}
#q_and_a li em,
#q_and_a li p{
width: 85%;
}
#q_and_a li .q::before,
#q_and_a li .a::before{
width: 10%;
padding: 3% 0;
margin: 0 5% 0 0;
}


}