@charset "UTF-8";

html{
	font-size: 100%;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a{
text-decoration: none;
}

/*----------------------------------
header
-----------------------------------*/
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0px;
	border-top:8px solid #3F8C27;
	height: 72px;
	width: 100%;
	padding:0  50px;
	z-index: 1;
	background-color: #ffffff;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0,0.16);
}

header h1{
	height:34px;
	font-size: 0;
}

.logo{
	width: 101px;
}

.main_nav{
	display: flex;
	font-size: 1rem;
	list-style: none;
	margin-right: 84px;
}

.main_nav a{
	display: block;
	margin-left: 80px;
	color: #111111;
}
@media (max-width: 956px) {
	/*spのヘッダーのサイズは横幅に応じて可変*/
	/*clac内の数値は実際の横幅に対しての割合を算出：(デザインデータ上での要素の縦幅/デザインデータの横幅*100vw)*/

	header{
		flex-direction: column;
		position: sticky;
		border-top:calc(2/376*100vw) solid #3F8C27;
		height: calc(130/376*100vw);
		padding:0;
		box-shadow:none;
	}
	
	.logo{
		width: auto;
		height:calc(24/376*100vw);
		margin-top:calc(6/376*100vw);
	}

	header nav{
		width: 100%;
	}
	
	.main_nav{
		display: flex;
		flex-wrap: wrap;
		font-size: calc(13/376*100vw);
		list-style: none;
		margin-right: 0;
		border:calc(1/376*100vw) solid #6F6F6F;
	}
	.main_nav li{
		height: calc(45/376*100vw);
		text-align: center;
		display: table;
		width: 50%;
		background-color: #ffffff;
	}

	.main_nav li:nth-child(-n+2){
		border-bottom:calc(1/376*100vw) solid #6F6F6F;

	}

	.main_nav li:nth-child(2n){
		border-left:calc(1/376*100vw) solid #6F6F6F;
	}

	.main_nav a{
		display: table-cell; 
		vertical-align: middle;
		margin-left: 0;
	}
}

/*----------------------------------
main
-----------------------------------*/

.img_pc {
	display: block;
	max-width: 880px;
	margin: 0 auto;
}

.btn_pc{
	display: block;
	max-width: 323px;
}

.btn_wrap .btn_pc_2{
	display: block;
	max-width: 462px;
}

.img_sp {
	display: none;
}

.btn_sp{
	display: none;
}

/*----------------------------------
notice
-----------------------------------*/
.notice,.financial{
	position: relative;
	max-width: 880px;
	margin: 0 auto;
}

.notice .btn_wrap{
	position: absolute;
	bottom:0;
	left:0;
    right: 0;
	margin:0 auto;
}

.notice .btn_pc{
	margin: 16px auto 0;
}

.financial .btn_wrap{
	position: absolute;
	bottom: 24px;
	left:0;
    right: 0;
	margin: auto;
}

.financial .btn_pc{
	margin: 17px auto 0;
}

/*----------------------------------
about
-----------------------------------*/
#about{
	background: linear-gradient(to top,rgba(255,255,255,0), #fff 100%), url(../images/kenkokoza_1022/pc/background_picture.png);
	background-size: cover;
	background-position: bottom;
	
}

.about{
	position: relative;
	max-width: 880px;
	margin: 0 auto;
}

.about .btn_wrap{
	position: absolute;
	bottom:120px;
	left:0;
    right: 0;
	margin: auto;
}

.about .btn_pc{
	margin:0 auto;
}

/*----------------------------------
summary
-----------------------------------*/
#summary{
	background-color: #F7F7F7;
}

/*----------------------------------
contact
-----------------------------------*/
#contact{
	background-color: #3F8C27;
}

.contact,.form{
	position: relative;
	max-width: 880px;
	margin: 0 auto;
}

.form .btn_wrap{
	position: absolute;
	bottom:192px;
	left:0;
    right: 0;
	margin: auto;
}

#contact .form .btn_wrap_2{
	bottom:218px;
}

.form .btn_pc{
	margin:0 auto;
	padding-left: 19px;
}

/*----------------------------------
footer
-----------------------------------*/
.bottom{
	border-top:1px solid rgba(122, 122, 122,0.5);
}

/*----------------------------------
sp
-----------------------------------*/



@media (max-width: 880px) {
	.img_pc {
		display: none;
	}

	.btn_pc{
		display: none;
	}
	.btn_wrap .btn_pc_2{
		display: none;
	}

	.img_sp {
		display: block;
		width: 100%;
		margin: 0 auto;
	}

	/*spの要素のサイズは横幅に応じて可変*/

	/*以下calc内の数値算出方法*/
	/*paddingはボタンの左右の余白を設定：(デザインデータでのボタン左右の余白のサイズ/デザインデータのアートボードの横幅*100%)*/
	/*margin-topはボタンが2つ縦並びの場合の、ボタン間の余白を設定：(デザインデータでのボタン間の余白のサイズ/デザインデータのアートボードの横幅*100%)*/
	/*bottomはボタンの位置を設定：(デザインデータでのボタン下の余白サイズ/親要素の縦幅*100%)*/

	.btn_sp{
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0 calc(30/376*100%);
	}

	.financial .btn_wrap{
		bottom: calc(24/327*100%);
	}
	
	.financial .btn_sp{
		margin: calc(17/376*100%) auto 0;
		padding: 0 calc(46/376*100%);
	}

	.about .btn_wrap{
		bottom:calc(40/1955*100%);
	}

	.contact .btn_wrap{
		position: absolute;
		bottom:calc(93.5/582*100%);
		left:0;
		right: 0;
		margin:0 auto;
	}
	
	.contact .btn_sp:first-child{
		padding: 0 calc(66/376*100%);
	}

	.contact .btn_sp:last-child{
		padding: 0 calc(56/376*100%);
		margin-top: calc(177.4/376*100%);
	}


	.form .btn_wrap{
		bottom:calc(115/234*100%);
	}
	#contact .form .btn_wrap_2{
		bottom:calc(168/234*100%);
	}
	
	.form .btn_sp{
		padding: 0 calc(48/376*100%);
	}


  }