/*------------------------------------------------------------
for 共通
------------------------------------------------------------*/
/*----基本スタイル----*/


.center {
	text-align: center;
}




/*------------------------------------------------------------
for スマホ縦
------------------------------------------------------------*/
@media screen and (max-width:480px) {

h1.top_h1 {
	padding-top: 20px;
	font-size: 30px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	color: #5F7361;
}
.gn_text {
	margin-bottom: 30px;
	font-size: 18px;
}
.lead {
	font-size: 28px;
	font-weight: bold;
	color: #FF7361;
	display: block;
	margin-bottom: 10px;
}

/*--トップページナビゲーション--*/
ul.top_navi {
	max-width: 900px;
	margin: 0 auto 40px;
}
ul.top_navi li {
	width : calc(100% / 1) ;
	float: left;
	position: relative;
}
ul.top_navi li a {
	display: block;
}
ul.top_navi li a img {
	width: 100%;
}
ul.top_navi li a span.top {
	position: absolute;
	top: 0px;
	text-align: center;
	line-height: 2.5em;
	font-size: 24px;
	font-weight: bold;
	display: block;
	width: 100%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.7);
}

ul.top_navi li a:hover span {
	background:none repeat scroll 0 0 rgba(25, 75, 25, 0.3);
}

ul.top_navi li a span.btm {
	position: absolute;
	bottom: 0px;
	text-align: left;
	line-height: 2em;
	font-size: 16px;
	display: block;
	padding: 0 3% 0; 
	width: 94%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.3);
}

}



/*------------------------------------------------------------
for sp横　タブレット縦
------------------------------------------------------------*/
@media screen and (min-width:481px) and ( max-width:767px) {

h1.top_h1 {
	padding-top: 50px;
	font-size: 56px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	color: #5F7361;
}
.gn_text {
	margin-bottom: 30px;
	font-size: 18px;
}
.lead {
	font-size: 28px;
	font-weight: bold;
	color: #FF7361;
	display: block;
	margin-bottom: 10px;
}

/*--トップページナビゲーション--*/
ul.top_navi {
	max-width: 900px;
	margin: 0 auto 40px;
}
ul.top_navi li {
	width : calc(100% / 2) ;
	float: left;
	position: relative;
}
ul.top_navi li a {
	display: block;
}
ul.top_navi li a img {
	width: 100%;
}
ul.top_navi li a span.top {
	position: absolute;
	top: 0px;
	text-align: center;
	line-height: 2.5em;
	font-size: 24px;
	font-weight: bold;
	display: block;
	width: 100%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.7);
}

ul.top_navi li a:hover span {
	background:none repeat scroll 0 0 rgba(25, 75, 25, 0.3);
}

ul.top_navi li a span.btm {
	position: absolute;
	bottom: 0px;
	text-align: left;
	line-height: 2em;
	font-size: 16px;
	display: block;
	padding: 0 3% 0; 
	width: 94%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.3);
}

}



/*------------------------------------------------------------
for タブレット横
------------------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1023px) {


h1.top_h1 {
	padding-top: 50px;
	font-size: 56px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	color: #5F7361;
}
.gn_text {
	margin-bottom: 30px;
	font-size: 18px;
}
.lead {
	font-size: 28px;
	font-weight: bold;
	color: #FF7361;
	display: block;
	margin-bottom: 10px;
}

/*--トップページナビゲーション--*/
ul.top_navi {
	max-width: 900px;
	margin: 0 auto 40px;
}
ul.top_navi li {
	width : calc(100% / 2) ;
	float: left;
	position: relative;
}
ul.top_navi li a {
	display: block;
}
ul.top_navi li a img {
	width: 100%;
}
ul.top_navi li a span.top {
	position: absolute;
	top: 0px;
	text-align: center;
	line-height: 2.5em;
	font-size: 24px;
	font-weight: bold;
	display: block;
	width: 100%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.7);
}

ul.top_navi li a:hover span {
	background:none repeat scroll 0 0 rgba(25, 75, 25, 0.3);
}

ul.top_navi li a span.btm {
	position: absolute;
	bottom: 0px;
	text-align: left;
	line-height: 2em;
	font-size: 16px;
	display: block;
	padding: 0 3% 0; 
	width: 94%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.3);
}

}



/*------------------------------------------------------------
for PC
------------------------------------------------------------*/
@media screen and (min-width:1024px) {


h1.top_h1 {
	padding-top: 50px;
	font-size: 56px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	color: #5F7361;
}
.gn_text {
	margin-bottom: 30px;
	font-size: 18px;
}
.lead {
	font-size: 28px;
	font-weight: bold;
	color: #FF7361;
	display: block;
	margin-bottom: 10px;
}

/*--トップページナビゲーション--*/
ul.top_navi {
	max-width: 900px;
	margin: 0 auto 40px;
}
ul.top_navi li {
	width : calc(100% / 2) ;
	float: left;
	position: relative;
}
ul.top_navi li a {
	display: block;
}
ul.top_navi li a img {
	width: 100%;
}
ul.top_navi li a span.top {
	position: absolute;
	top: 0px;
	text-align: center;
	line-height: 2.5em;
	font-size: 24px;
	font-weight: bold;
	display: block;
	width: 100%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.7);
}

ul.top_navi li a:hover span {
	background:none repeat scroll 0 0 rgba(25, 75, 25, 0.3);
}

ul.top_navi li a span.btm {
	position: absolute;
	bottom: 0px;
	text-align: left;
	line-height: 2em;
	font-size: 16px;
	display: block;
	padding: 0 3% 0; 
	width: 94%;
	color: #fff;
	background:none repeat scroll 0 0 rgba(25, 25, 25, 0.3);
}



}