@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      style.css
 Update:         2017.2.10
 Style Info:     スタイルCSSファイル
----------------------------------------------------------- */
/********************************************
モバイルファースト
*********************************************/
/*float解除*/
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix {	display: inline-block; } 
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }
* html .clearfix { zoom: 1;}
*:first-child+html .clearfix { zoom: 1;}

a {
	text-decoration:none;
}

/*コンテンツの左右余白*/
.contents_wrap {
	padding:0 10px;
}

/*セクション*/
.section_wrap {
	margin-top:60px;
}

/*H2の設定*/
h2 {
	font-size:24px;
	position:relative;
	font-weight:normal;
	text-align:center;
}
h2:after {
	position: absolute;
	bottom: -2px;
	left: 0;
	right:0;
	margin:auto;
	content: '';
	width: 15%;
	height: 0;
	border-bottom: 2px solid #3f3f3f;	
}

/*フォントの設定*/
.fontB {
	font-weight:bold;
}

/*テキストリンク*/
.txt_link {
	padding:2px;
	color:#2e853b;
	transition:all 0.5s;
	line-height:2.0
}
.txt_link:hover {
	background:#2e853b;
	color:#FFF;
}

/*プライバシーポリシー*/
.privacy_policy {
	text-align:right;
}

/*[VIEW MORE]のボタン*/
.btn_more {
	position: relative;
	width:30%;
	margin:0 auto;
	margin-top:20px;
	text-align: center;
}
.btn_more a{
	display:block;
	width:100%;
	padding:10px 0;
	margin:auto;
	color: #fff;
	border: 1px solid #fff;
	background:#3f3f3f;
	position:relative;
	text-decoration: none;
	transition: all .3s;
}
.btn_more a::after,
.btn_more a::before,
.change-border_more::after,
.change-border_more::before {
    background-color: #000;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}

.btn_more a::after {
    height: 1px;
    right: -1px;
    top: -1px;
    width: 0px;
}

.btn_more a::before {
    bottom: -1px;
    height: 1px;
    left: -1px;
    width: 0px;
}

.change-border_more::after {
    height: 0px;
    left: -1px;
    top: -1px;
    width: 1px;
}

.change-border_more::before {
    bottom: -1px;
    height: 0px;
    right: -1px;
    width: 1px;
}

/* hover */
.btn_more a:hover {
	background:#FFF;
	color:#3f3f3f;
}
.btn_more a:hover::after,
.btn_more a:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}

.btn_more a:hover .change-border_more::after,
.btn_more a:hover .change-border_more::before {
    height: 100%;
    height: calc(100% + 1px);
}
/*[VIEW MORE]のボタン end*/

/*リストスタイル -アスタリスク-*/
.list_style_asterisk li {
	margin-bottom:10px;
}
.list_style_asterisk li:before {
	content:"※";
	float:left;
}
.list_style_asterisk li p {
	margin-left:15px;
}
.list_style_asterisk li p:after {
	clear:left;
}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){

}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:640px){
	/*H2の設定*/
	h2 {
		font-size:32px;
	}
	h2:after {
		width: 10%;
		bottom:-5px;
	}
	
	
	/*セクション*/
	.section_wrap {
		margin-top:80px;
	}
}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){
	/*セクション*/
	.section_wrap {
		margin-top:100px;
	}
	
	/*[VIEW MORE]のボタン*/
	.btn_more {;
		width:20%;
		margin-top:40px;
	}

}

/********************************************
タブレット　ランドスケープ
*********************************************/
@media only screen and (min-width: 1024px) {

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1051px) {
	/*H2の設定*/
	h2 {
		font-size:38px;
	}
	h2:after {
		width: 8%;
	}

	/*セクション*/
	.section_wrap {
		margin-top:130px;
	}

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1100px) {
	
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1280px) {
	/*[VIEW MORE]のボタン*/
	.btn_more {;
		width:15%;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1300px) {
	/*H2の設定*/
	h2:after {
		width: 5%;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1400px) {
	
}