@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Mallanna);



/*
section
----------------------------------------------------------------------------------------------------*/
.section {
	width : 90%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	max-width:1200px;
	margin-right: auto;
	margin-left: auto; /* 上下のマージンをゼロに、左右のマージンを自動に */
	clear: both;
	padding-top: 0px;
}


@media only screen and (min-width: 479px) {
.section {
	width : 100%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: auto;
	margin-left: auto; /* 上下のマージンをゼロに、左右のマージンを自動に */
	clear: both;
	padding-top: 0px;
	text-align: center;
}

}

h2{
	margin-top: 38px;
	text-align: left;
	color: #FFF;
	font-weight: bold;
	font-size: 180%;
	margin-bottom: 30px;
	padding-bottom: 25px;
	
	}
	
h3{
	margin-top: 50px;
	text-align: center;
	color: #000000;
	font-weight: bold;
	font-size: 170%;
	border-bottom: 3px dotted #000000;
	display: inline-block;
	margin-bottom: 30px;
	padding-bottom: 10px;
	}
h5{
	font-size: 120%;
	font-weight: bold;	
	}
.sp_t{
	width : auto; 
	margin-right: 5%;
	margin-left: 5%;
	
	}	

.str{
	color: #ffff00;
	text-shadow: black 0px 0px 0px 4px;
	font-size: 280%;
	}



	
@media only screen and (max-width: 768px) {
		
h2{
	margin-top: 30px;
	text-align: center;
	color: #000000;
	font-weight: bold;
	font-size: 130%;
	border-bottom: 3px dotted #000000;
	margin-bottom: 30px;
	padding-bottom: 10px;;
	}
h3{
	margin-top: 50px;
	text-align: center;
	color: #000000;
	font-weight: bold;
	font-size: 130%;
	border-bottom: 3px dotted #000000;
	display: inline-block;
	margin-bottom: 30px;
	padding-bottom: 10px;
	}
.sp_t{
	width : 90%; 
	margin-right: 5%;
	margin-left: 5%;
	}	
	.sp_t2{
	width : 100%; 
	margin-right: 0%;
	margin-left: 0%;
	}
	}
	
	

/*
box タイトル
----------------------------------------------------------------------------------------------------*/

.box_left {
	width : 40%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: left;
	margin-right: 0%;
	margin-left: 5%;
	margin-top: 20px;
}

.box_left img,.box_right img{
width : 100%; /* 画像を枠の100%の横幅にする */
height: auto; /* 高さは自動で設定する */
}
.box_right {
	width : 45%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: left;
	margin-left: 0%;
}
.box_right h4{
	font-weight: bold;
	font-size: 130%;
	margin-bottom: 10px;
	padding-top: 15px;
}
.bg_blue {
	background-image: url(../img/layout/sub_bg.gif);
	background-repeat: repeat-x;
	overflow-y: auto;
}



@media only screen and (max-width: 768px) {
.box_left {
	width : 90%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: none;
	margin-right: 5%;
	margin-left: 5%;
}
.box_right {
	width : 90%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: none;
	margin-right: 5%;
	margin-left: 5%;
}
.box_left img,.box_right img{
width : 100%; /* 画像を枠の100%の横幅にする */
max-width:400px;
height: auto; /* 高さは自動で設定する */

}

}

/*
box 1カラム
----------------------------------------------------------------------------------------------------*/

.box_1 {
	width : 90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 0px;
	padding-bottom: 30px;
}

.box_1 img{
width : 100%; 
max-width:700px;
height: auto; 
}
.box_1 .text{
	width : 100%;
	max-width: 650px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}


@media only screen and (max-width: 768px) {
.box_1 {
	width : 90%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 0px;
}

}
/*
box 2カラム
----------------------------------------------------------------------------------------------------*/
.box2_wrap{
	width : 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	clear: both;
	}
.box_left2 {
	width : 45%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: left;
	margin-right: 5%;
	margin-left: 0%;
	margin-top: 20px;
	margin-bottom: 30px;
}

.box_left2 img,.box_right2 img{
width : 100%; /* 画像を枠の100%の横幅にする */
max-width:350px;
height: auto; /* 高さは自動で設定する */
}
.box_right2 {
	width : 45%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	float: left;
	margin-right: 0%;
	margin-left: 5%;
	margin-top: 20px;
	margin-bottom: 30px;
}

.box2 img{
width : 100%; /* 画像を枠の100%の横幅にする */

height: auto; /* 高さは自動で設定する */
}

.box_left2 h4,.box_right2 h4{
	font-size: 130%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	color: #000000;
}


@media only screen and (max-width: 768px) {
.box2_wrap{
	width : 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	}
.box_left2 {
	width : 90%; 
	float: none;
	margin-right: 5%;
	margin-left: 5%;
}
.box_right2 {
	width : 90%;
	float: none;
	argin-right: 5%;
	margin-left: 5%;
}
.box_left2 img,.box_right2 img{
width : 100%; /* 画像を枠の100%の横幅にする */
max-width:400px;
height: auto; /* 高さは自動で設定する */

}

}


/*
box4　3カラム
----------------------------------------------------------------------------------------------------*/
.box4_wrap{
	width : 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	clear: both;	
	}
.box4{
	width : 31%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: 1%;
	margin-left: 1%;
	float: left;
	padding-bottom: 40px;
		
}
.box4  h4{
	font-size: 130%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	color: #000000;
}
.line_y{
	border-bottom: 7px solid #ffff00;
	}

.box4 .b4_text{
	margin-left: 30px;
	margin-right: 30px;
	color: #000000;
	line-height: 25px;
	margin-bottom: 60px;
	}
.box4 img{
width : 100%; /* 画像を枠の100%の横幅にする */
max-width:350px;
height: auto; /* 高さは自動で設定する */
}


@media only screen and (max-width: 560px) {
.box4{
	width : 94%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: 3%;
	margin-left: 3%;
	float: none;
	padding-bottom: 15px;
		
}
.box4 img{
width : 100%;
max-width:300px;
height: auto; /* 高さは自動で設定する */
}
.box4 .b4_text{
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
	line-height: 25px;
	}
}

/*
box_case　3カラム
----------------------------------------------------------------------------------------------------*/
.box_case_wrap{
	width : 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 60px;
	clear: both;	
	}
.box_case{
	width : 21%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: 2%;
	margin-left: 2%;
	float: left;
	padding-bottom: 40px;
	font-size: 90%;
	height: 300px;
}
.box_case  h4{
	font-size: 130%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	color: #000000;
}
.line_y{
	border-bottom: 7px solid #ffff00;
	}

.box_case .b4_text{
	color: #000000;
	line-height: 22px;
	text-align: left;
	}
.box_case img{
width : 100%; /* 画像を枠の100%の横幅にする */
height: auto; /* 高さは自動で設定する */
}


@media only screen and (max-width: 560px) {
.box_case{
	width : 44%; /* 画像の枠をさらに上位の枠の80%の横幅にする */
	margin-right: 3%;
	height: 260px;
	margin-left: 3%;
	float: float;
	padding-bottom: 15px;
	text-align: left;
}
.box_case img{
width : 100%;
max-width:300px;
height: auto; /* 高さは自動で設定する */
}
.box_case .b4_text{
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
	line-height: 20px;
	text-align: left;
	}
}


/*その他
----------------------------------------------------------------------------------------------------*/


.hoken{
	width:100%;
	max-width: 450px;
	border: 1px solid #d8ccaa;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	}
	@media only screen and (max-width: 768px) {
.hoken{
	font-size: 90%;
	width: 90%;
	border: 1px solid #d8ccaa;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	}
	}
.about_detail{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
	max-width: 800px;
	min-height: 0px;
}
.about_detail table {
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: left;
}
table td{
	padding-top: 12px;
	padding-bottom: 12px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #d8ccaa;
	padding-left: 12px;
	padding-right: 12px;
}
@media only screen and (max-width: 768px) {
	.about_detail table {
	font-size: 90%;
	line-height: 20px;
}
}
.wrap a{
	  color: #1776C9;
	
	}
.wrap a:hover {
	color: #1d9bff;
}

.faq_q{
	margin-left: 30px;
	margin-right: 30px;
	color: #000000;
	line-height: 25px;
	height: 100px;
	background-image: url(../img/faq/faq_illust_2.png);
	background-repeat: no-repeat;
	background-size: 130px auto;
	padding-top: 30px;
	padding-left: 160px;
	text-align: left;
	}
.faq_a{
	margin-left: 30px;
	margin-right: 30px;
	color: #000000;
	line-height: 25px;
	height: 160px;
	background-image: url(../img/faq/faq_illust_3.png);
	background-repeat: no-repeat;
	background-size: 130px auto;
	padding-top: 10px;
	padding-left: 160px;
	text-align: left;
	}
@media only screen and (max-width: 480px) {
	.faq_q{
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
	line-height: 25px;
	height: 100px;
	background-image: url(../img/faq/faq_illust_2.png);
	background-repeat: no-repeat;
	background-size: 100px auto;
	padding-top: 10px;
	padding-left: 45%;
	text-align: left;
	}
	.faq_a{
	margin-left: 0px;
	margin-right: 0px;
	color: #000000;
	height: 180px;
	background-image: url(../img/faq/faq_illust_3.png);
	background-repeat: no-repeat;
	background-size: 100px auto;
	padding-top: 10px;
	padding-left: 45%;
	text-align: left;
	font-size:80%;
	line-height:22px;
	}
	
	}
.case_btn{
	width: 100%;
	max-width:300px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	margin-bottom: 60px;
	
	}
	

.case_arrow a{
	width: 100%;
	max-width:300px;
	border-radius: 5px;
	min-width: 0px;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	display: block;
	color: #FFF;
	background-color: #339FD1;
	font-weight: normal;
	box-shadow: 0 3px 0 #007EAD;	
	}
.case_arrow a:hover{
	color: #fff;
	background-color: #007EAD;
	box-shadow: 0 3px 0 #005D9E;
	}
	@media only screen and (max-width: 768px) {
	.case_arrow a{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
		}	
		
		}
.btn_case{
	height:120px;
	
	
}
.btn_case a{
	width: 50%;
	font-size: 24px;
	text-decoration: none;
	display: block;
	text-align: center;
	padding-top: 25px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 25px;
	color: #fff;
	background-color: #15AD8B;
	border-radius: 5px;
	box-shadow: 0 3px 0 #017161;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
}
.btn_case a:hover{
	color: #FFF;
	background-color: #49BFA5;
	box-shadow: 0 3px 0 #15AD8B;
		
	}