@charset"utf-8";
/*@media screen and (min-width:414px){*/
body {
 font-size: 12px;
 font-family: 'Kiwi Maru', serif;
 line-height: 1.5em;
 color: #707070;
	/*	word-break: keep-all;*/
}
.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 background-color: #A5B997;

}
img {
 width: 100px;
}
.logo {
 margin: 20px 0;
}
#main .top {
 width: 100%;
 height: auto;
}
#about {
 display: flex;
}
.mado img {
 width: 250px;
 margin: 100px 10px 0 20px;
}
.about_text {
 margin: 20px 0 0 20px;
}
#main a {
 /*color: #707070;
 border: 1px solid #707070;*/
 border-radius: 20px;
 padding: 0 30px 5px 30px;
}
#about h1 {
 padding: 0 0 0 30px;
 margin: 20px 0 20px 0;
}
#about a {
 margin: 30px 0 0 30px;
}
#green {
 margin: 50px 0 0 0px
}
.green {
 position: relative;
 margin: 50px 0 50px 0px;
}
.green3 {
 position: absolute;
 width: 170px;
 height: 240px;
 right: 10px;
 top: 200px;
}
.green2 {
 position: absolute;
 width: 130px;
 height: 160px;
 right: 30px;
	
}
.green1 {
 position: absolute;
 width: 160px;
 height: 160px;
 top: 45px;
 right: 190px;
}
.green_text {
 position: absolute;
 top: 220px;
 right: 210px;
}
#howtogreen {
 margin-top: 530px;
}
.top_midori img {
 width: 100%;
 height: 150px;
}
.green_text a {
 margin: 20px 0 0 20px;
}
#howtogreen h2 {
 margin: 20px 0 0 100px;
}
#howtogreen p {
 margin: 10px 0 0 20px;
}
.howtogreen_text a {
 margin: 20px 0 0 140px;
}
.maru {
 position: relative;
 margin: 0 0 350px 0;
}
.maru1 {
 position: absolute;
 width: 150px;
 top: 30px;
 left: 40px;
}
.maru2 {
 position: absolute;
 width: 100px;
 top: 50px;
 right: 50px;
}
.maru3 {
 position: absolute;
 width: 100px;
 top: 200px;
 left: 10px;
}
.maru4 {
 position: absolute;
 width: 130px;
 top: 190px;
 left: 120px;
}
.maru5 {
 position: absolute;
 width: 100px;
 top: 210px;
 right: 10px;
}
.about_text a {
 text-decoration: none;
	font-size:18px;
	color:#FFF;
	border:1px solid ;
	border-radius: 20px;
	padding:5px 10px 10px 10px;
	background-color: #BCBCBC;
}
.about_text a:hover {
 background-color: #FFFFFF;
	color:#707070;
}
.green_text a {
 text-decoration: none;
	font-size:18px;
	color:#FFF;
	border:1px solid ;
	border-radius: 20px;
	padding:5px 10px 10px 10px;
	background-color: #BCBCBC;
}
.green_text a:hover {
 background-color: #FFFFFF;
	color:#707070;
}
.howtogreen_text a {
text-decoration: none;
	font-size:18px;
	color:#FFF;
	border:1px solid ;
	border-radius: 20px;
	padding:5px 10px 10px 10px;
	background-color: #BCBCBC;}	
	
 
.howtogreen_text a:hover {
 background-color: #FFFFFF;
	color:#707070;
}
.footer {
 background-color: #A5B997;
 height: 150px;
 padding-top: 20px;
}
.footer_text {
 display: flex;
}
.footer_nav a {
 text-decoration: none;
 color: #fff;
 text-align: center;
 margin: 30px 0 0 20px;
}
.footer_nav a:hover{
	color: #707070;
}


.footer_text p {
 color: #fff;
 margin: 30px 0 0 30px;
}
.footer img {
 width: 80px;
 margin: 30px 0 0 40px;
}
/* ここから下がハンバーガーメニューに関するCSS */
/* チェックボックスを非表示にする */
.drawer_hidden {
 display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
 display: flex;
 height: 60px;
 width: 60px;
 justify-content: center;
 align-items: center;
 position: relative;
 z-index: 100; /* 重なり順を一番上にする */
 cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span, .drawer_open span:before, .drawer_open span:after {
 content: '';
 display: block;
 height: 3px;
 width: 25px;
 border-radius: 3px;
 background: #333;
 transition: 0.5s;
 position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
 bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
 top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
 background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
 bottom: 0;
 transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
 top: 0;
 transform: rotate(-45deg);
}
/* メニューのデザイン*/
.nav_content {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 100%; /* メニューを画面の外に飛ばす */
 z-index: 99;
 background: #fff;
 transition: .5s;
}
/* メニュー黒ポチを消す */
.nav_list {
 list-style: none;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
 left: 0; /* メニューを画面に入れる */
}
/*}*/
.nav_content ul {
 /*ナビゲーション天地中央揃え*/
 position: absolute;
 z-index: 999;
 top: 30%;
 left: 40%;
 transform: translate(-10%, -50%);
}
.nav_content li {
 list-style: none;
 text-align: right;
}
.nav_content li a {
 font-family: 'Kiwi Maru', serif;
 color: #612B21;
 text-decoration: none;
 padding: 10px;
 display: block;
 text-transform: uppercase;
 /*letter-spacing: 0.1em;*/
 /* font-weight: bold;*/
 font-size: 1.6rem;
 line-height: 2rem;
}
/*aboutページ始まり*/
.about_text2 h1 {
 /*color: aqua;*/
 /*margin: 0 0 0 40px;*/
 font-size: 1.6rem;
 text-align: center;
}
#about img {
 width: 180px;
 margin: 80px 10px 0 10px;
}
.about_h1 {
 margin: 30px 0 50px 120px;
}
#about2 {
 margin-bottom: 30px;
}
#mise_1 {
 margin-bottom: 50px;
}
/*#mise_1 img{
	width: 200px;
}*/
#about2 {
 display: flex;
}
.mado2 img {
 width: 160px;
 margin: 100px 20px 0 0;
 padding-right: 80px;
 position: absolute;
 top: 260px;
 right: -210px;
 transform: translate(-50%, -50%);
}
.about_text2 p {
	position: relative;
 width: 180px;
 margin: 0 0 0 10px;
}

#mise_1 img{
	width: 80%;
	margin: 50px 0 0 35px;
}

#mise_1 p{
	 margin:20px 30px 0 30px;
}

#mise_2{
	margin-bottom: 50px;
}


#mise_2 img{
	width: 80%;
	margin: 0 0 0 35px;
}

#mise_2 p{
	 margin:20px 30px 0 30px;
}

#mise_3{
	margin-bottom: 50px;
}


#mise_3 img{
	width: 80%;
	margin: 0 0 0 35px;
}

#mise_3 p{
	 margin:20px 30px 0 30px;
}

.saigo img{
	width: 100%;
}


#green_img a{
	text-decoration: none;
	font-size:18px;
	color:#FFF;
	border:1px solid ;
	border-radius: 20px;
	padding:5px 10px 10px 10px;
	background-color: #BCBCBC;
}
#green_img a:hover{
	background-color: #FFFFFF;
	color:#707070;
}




#green_img p{
	margin-bottom: 30px;
}

.top_green img{
	width: 100%;
	margin-bottom: 10px;
}

.top_green h1{
	text-align: center;
	margin-bottom: 60px;
}

.green_1{
	text-align: center;
	margin-bottom: 50px;
}

.green_1 img{
	width: 200px;
	text-align: center;
}

.green_2{
	text-align: center;
	margin-bottom: 50px;
}

.green_2 img{
	width: 200px;
	text-align: center;
}
.green_3{
	text-align: center;
	margin-bottom: 50px;
}

.green_3 img{
	width: 200px;
	text-align: center;
}
.green_4{
	text-align: center;
	margin-bottom: 50px;
}

.green_4 img{
	width: 200px;
	text-align: center;
}
.green_5{
	text-align: center;
	margin-bottom: 50px;
}

.green_5 img{
	width: 200px;
	text-align: center;
}
.green_6{
	text-align: center;
	margin-bottom: 50px;
}

.green_6 img{
	width: 200px;
	text-align: center;
}
.green_7{
	text-align: center;
	margin-bottom: 50px;
}

.green_7 img{
	width: 200px;
	text-align: center;
}
.green_8{
	text-align: center;
	margin-bottom: 50px;
}

.green_8 img{
	width: 200px;
	text-align: center;
}
.green_9{
	text-align: center;
	margin-bottom: 50px;
}

.green_9 img{
	width: 200px;
	text-align: center;
}

.green_10{
	text-align: center;
	margin-bottom: 50px;
}

.green_10 img{
	width: 200px;
	text-align: center;
}
.green_11{
	text-align: center;
	margin-bottom: 50px;
}

.green_11 img{
	width: 200px;
	text-align: center;
}
.green_12{
	text-align: center;
	margin-bottom: 50px;
}

.green_12 img{
	width: 200px;
	text-align: center;
}
.green_13{
	text-align: center;
	margin-bottom: 50px;
}

.green_13 img{
	width: 200px;
	text-align: center;
}

.green_14{
	text-align: center;
	margin-bottom: 50px;
}

.green_14 img{
	width: 200px;
	text-align: center;
}
.green_15{
	text-align: center;
	margin-bottom: 50px;
}

.green_15 img{
	width: 200px;
	text-align: center;
}
.green_16{
	text-align: center;
	margin-bottom: 50px;
}

.green_16 img{
	width: 200px;
	text-align: center;
}
.green_17{
	text-align: center;
	margin-bottom: 50px;
}

.green_17 img{
	width: 200px;
	text-align: center;
}

.green_18{
	text-align: center;
	margin-bottom: 50px;
}

.green_18 img{
	width: 200px;
	text-align: center;
}

.naminami img{
	width: 100%;
}

.howtogreen_2 h1{
	text-align: center;
	margin-bottom: 50px;
}

.howtogreen_2 p{
	margin:0 30px 50px 30px;
}

.sodateyou_img {
	width: 100%;
	margin:0 0 30px 0;
}

.sodateyou_text p{
	margin: 0 30px;
}

#sodateyou ul{
	list-style-type: none;
}

#sodateyou h3{
	text-align: center;
	font-size: 1.2rem;
}

.hiatari{
	margin-right: 50px;
}

.hiatari_img{
	width: 180px;
	margin: 50px 100px 0 35px;
}

.hiatari li{
	margin-bottom: 50px;
}

.kazetooshi_img img{
	width: 200px;
	margin-left: 40px;
}

.kazetooshi li{
	margin: 0 40px 50px 0px;
	
}

.shitsunaiondo_img img{
	width: 180px;
	margin-left: 40px;
}

.shitsunaiondo li{
	margin: 0 40px 50px 0px;
}

.mizuyari_img img{
	width: 180px;
	margin-left: 40px;
}

.mizuyari li{
	margin: 0 40px 50px 0px;
}

.kazattemiyou_img img{
	width: 100%;
	margin:0 0 50px 0;
}

#kazattemiyou ul{
	list-style-type: none;
}

.kazattemiyou_img1 img{
	width: 200px;
	margin-left: 40px;
}

.kazattemiyou1 h3{
	margin-left: 75px;
}

.kazattemiyou1 li{
	margin: 0 30px 30px 0;
}

.kazattemiyou_img2 img{
	width: 200px;
	margin-left: 40px;
}

.kazattemiyou2 h3{
	margin-left: 70px;
	
}

.kazattemiyou2 li{
	margin: 0 30px 30px 0;
}

.kazattemiyou_img3 img{
	width: 200px;
	margin-left: 40px;
}

.kazattemiyou3 h3{
	margin-left: 45px;
}

.kazattemiyou3 li{
	margin: 0 30px 80px 0;
}

.kazattemiyou_main img{
	width: 100%;
	margin-bottom: 50px;
}




@media screen and (min-width:960px){

	body p{
		font-size: 30px;
		line-height: 150%;
		
	}
	
	#about{
		margin: 50px 0 200px 50px;
	}
	
	
	#about img{
		width: 600px;
		height: auto;
		margin:50px 0 0 100px;
	}

	
	
	
	
	.mado{
		width: 50%;
	}
	

	
	#about h1{
		font-size:3em;
		margin: 100px 0 100px 30px;
		text-align: center;
	}
	
	.about_text{
		display: block;
		margin-top:250px auto;}
	
	.about_text p{
		display: block;
		font-size: 2em;
		/*width: 49%;*/
		height: 500px;
		margin: 0 10px;
		text-align:center;
				}
	
	.about_text a{
		display: block;
		font-size: 30px;
	text-align: center;
	width:130px;
		height: 50px;
		
	
	}
	
	#mise_3 img{
		display: block;
		margin-bottom: 50px;
		text-align:center;
		margin-left: 115px;
	}
	
	
	
	#mise_3 p{
		margin-top: 30px;
	}
	
	#main a{
		padding-top: 20px;
		margin: 0 auto;
	}
	
	#green{
		margin: 30px 30px 1500px 30px;
	}
	
	
	.green{
		position: relative;
		margin: 30px 30px 1000px 30px;
	}
	
	.green2{
		position: absolute;
		width: 500px;
		height: 650px;
		right: 130px;
		top: -900px;
		/*right: 150px;*/
	}
	
	.green1{
		position: absolute;
		width: 600px;
		height: 600px;
		top: -900px;
		left: 200px;
	}
	
	.green3{
		position: absolute;
		width: 500px;
		height: 600px;
		top: -150px;
		right: 200px;
		margin-bottom: 100px;
		
	}
	
	
	
	
	.green_text{
		position: absolute;
		text-align: center;
		width: 500px;
		height: 600px;
		top: -100px;
		left: 200px;
		
	}
	
	.green p{
		width: 400px;
		font-size: 24px;
		text-align: center;
		margin-left: 50px;
	}
	
	.green h2{
		font-size: 3em;
		text-align: center;
	}
	
	.green_text a{
		display: block;
		font-size: 30px;
	text-align: center;
	width:130px;
		height: 50px;
		margin-bottom: 100px;
		
	}
	
	.top_midori img{
		width: 100%;
		height: 700px;
	}
	
	#howtogreen{
		margin: 100px 30px 600px 30px;
	}
	
	#howtogreen h2{
		font-size: 3em;
		text-align: center;
		margin:50px 0 30px 0 ;
	}
	
	#howtogreen p{
		font-size: 24px;
		margin-bottom: 30px;
		text-align: center;
	}	
	
	.howtogreen_text a{
		display: block;
		font-size: 30px;
	text-align: center;
	width:130px;
		height: 50px;
	}
	
	.howtogreen_text{
		margin-bottom: 50px;
		
	}
	
		.maru {
 position: relative;
 margin: 0 0 300px 0;
}
.maru1 {
 position: absolute;
 width: 400px;
 top: 0px;
 left: 40px;
}
.maru2 {
 position: absolute;
 width:200px;
 top: 200px;
 right: 400px;
}
.maru3 {
 position: absolute;
 width: 300px;
 top: 0px;
 left: 670px;
}
.maru4 {
 position: absolute;
 width: 300px;
 top: 190px;
 left: 420px;
}
.maru5 {
 position: absolute;
 width: 350px;
 top: 50px;
 right: 10px;
}
	
	.footer_text2 img{
		width: 250px;
		height: 250px;
		margin: 0 0 120px 1200px;
	}
	
	.footer{
		width: 100%;
		height: 300px;
	}
	.footer_text p{
		margin-left: 100px;
	}
	.footer_nav{
		text-align: center;
		font-size: 30px;
		margin-top: 20px;
	}
	
	
	.about_text2 p{
		font-size: 24px;
		width: 500px;
		margin: 200px 0 0 300px;
	}
	
	.mado2 img{
		width: 400px;
		margin: 300px 0 0 0;
	}
	
	#about2{
		margin-bottom: 100px;
	}
	
	.about_h1 h1{
		font-size: 3em;
		text-align: center;
		margin: 50px 0 0 600px;
	}
	
	#mise_1{
		width: 1000px;
		text-align: center;
		margin: 0 0 100px 300px;
	}
	
	#mise_1 p{
		font-size: 24px;
		margin: 30px 0 0 50px;
	}
	
	#mise_2{
		width: 1000px;
		text-align: center;
		margin: 0 0 100px 300px;
	}
	
	#mise_2 p{
		font-size: 24px;
		margin: 30px 0 0 50px;
	}
	
	#mise_3{
		width: 1000px;
		text-align: center;
		margin: 0 0 100px 300px;
	}
	
	#mise_3 p{
		display: inline;
		font-size: 24px;
		width: 300px;
		height: 150px;
		margin: 30px 0 0 50px;
		text-align: center;
	}
	

	
	.footer_text img{
		width: 200px;
		height: 200px;
		position: absolute;
		right: 100px;
		
	}
	
	.top_green h1{
		font-size: 3em;
	}
	
	#green_img img{
	width: 500px;	
	}
	
	#green_img h2{
		font-size: 30px;
	}
	
	#green_img p{
		font-size: 24px;
		width: 500px;
		margin: 0 auto;
	}
	
	.howtogreen_2 h1{
		font-size: 3em;
	}
	
	.howtogreen_2 p{
		font-size: 24px;
		text-align: center;
	}
	
	.sodateyou_text p{
		font-size: 24px;
		text-align: center;
	}
	
	#sodateyou img{
text-align: center;
	}
	
	.sodateyou_img img{
		display: block;
		text-align: center;
		margin: 50px auto;
		width: 350px;
	}
	
	#sodateyou h3{
		font-size: 3em;
	}
	#sodateyou p{
		font-size: 24px;
		line-height: 50px;
		text-align: center;
	}
	
	.kazattemiyou_img img{
		display: block;
		text-align: center;
		margin: 50px auto;
		width: 500px;
	}
	.kazattemiyou_main img{
		width: 100%;
	}
	#kazattemiyou h3{
		font-size: 3em;
		text-align: center;
	}
	#kazattemiyou p{
		font-size: 24px;
		line-height: 50px;
		text-align: center;
	}
	
		#green_img p{
		margin-bottom: 30px;
	}
	
	
}