@charset "UTF-8";
/* CSS Document */

/*----------PC----------*/
@media only screen and (min-width:1025px) {
	.contents{
		max-width: 100%;
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
	}

	.main-wrapper{
		width: 1000px;
		margin: 0 auto;
		text-align: center;
	}
	
	
/*	レスポンシブによるトップの出しわけ*/
	.page--top-pc{
		display: block;
		padding-top: 70px;
	}
	.page--top-sp{
		display: none;
	}
	
/*	レスポンシブによる出しわけ*/
	.page--pc{
		display: block;
	}
	.page--sp{
		display: none;
	}
	
	.page--contents{
		width: 1000px;
		margin: 0 auto;
	}
	

	
/*	タイトルエリア*/
    .page--title{
        margin-bottom: 0px;
    }
	.page--title img{
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}
	
	
	
/*　 ボタンエリア*/
	.page--btn{
		width: 800px;
		display: -ms-grid;
		display: grid;
		gap: 40px;
		-ms-grid-columns: 1fr 40px 1fr 40px 1fr;
		grid-template-columns: repeat(3,1fr);
		margin: 40px auto 0px auto;
		}
	.page--btn img{
		width: 100%;
        box-shadow: 8px 7px 1px #eee;
		}
	.page--btn a{
		text-decoration-line: none;
	}
	.page--btn a:hover{
		opacity: 0.5;
		transition: 0.3s;
	}
	
	
	
	/*	ライン*/
	.page--line{
		border-bottom: solid 1px #2E170C ;
	}

	
/*	フューチャーエリア*/
	.page--feature-btn{
		width: 500px;
		margin: 50px auto 30px auto;
		border: solid 1px #2E170C;
		padding: 10px 10px;
	}
	.page--feature-btn:hover{
		border: solid 1px #7E7E7E;
		transition: 0.3s;
	}
	.page--feature-btn a{
		display: block;
		text-decoration-line: none;
	}
	.page--feature-btn a:hover{
		opacity: 0.5;
		transition: 0.3s;
	}
	
	
	
/*	SNSボタンエリア*/
	.page--sns-btn{
		width: 600px;
		margin: 0 auto 50px auto;
	}
	.page--sns-btn img{
		width: 30px;
		margin: 10px 10px;
	}
	.page--sns-btn a{
		text-decoration-line: none;
	}

	
	
}


/*----------タブレット----------*/
@media only screen and (min-width:520px) and (max-width:1024px) {
	.contents{
		max-width: 100%;
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
	}
	
	.main-wrapper{
/*		max-width: 800px;*/
		width:100%;
		margin: 0 auto;
		text-align: center;
	}
	
	.page--contents{
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}
	
	
/*	レスポンシブによる出しわけ*/
	.page--top-pc{
		display: block;
	}
	.page--top-sp{
		display: none;
	}
	
/*	レスポンシブによる出しわけ*/
	.page--pc{
		display: block;
	}
	.page--sp{
		display: none;
	}

	
	
/*	タイトルエリア*/
	.page--title{
		text-align: center;
		margin-bottom: 40px;
	}
	.page--title img{
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}
	
	
/*　 ボタンエリア*/ 
	.page--btn{
		display: -ms-grid;
		display: grid;
		gap: 20px;
		-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
		grid-template-columns: repeat(3,1fr);
		margin: 10px auto;
		padding: 0 50px;
		}
	.page--btn img{
		width: 100%;
        box-shadow: 7px 6px 1px #eee;
		}
	.page--btn a{
		text-decoration-line: none;
	}
	
	
/*	ライン*/
	.page--line{
		border-bottom: solid 1px #2E170C ;
	}

	
/*	フューチャーエリア*/
	.page--feature-btn{
		width: 500px;
		margin: 50px auto 30px auto;
		border: solid 1px #2E170C;
		padding: 10px 10px;
	}
	.page--feature-btn:hover{
		border: solid 1px #7E7E7E;
		transition: 0.3s;
	}
	.page--feature-btn a{
		display: block;
		text-decoration-line: none;
	}
	.page--feature-btn a:hover{
		opacity: 0.5;
		transition: 0.3s;
	}
	
	
	
/*	SNSボタンエリア*/
	.page--sns-btn{
		width: 600px;
		margin: 0 auto 50px auto;
	}
	.page--sns-btn img{
		width: 30px;
		margin: 10px 10px;
	}
	.page--sns-btn a{
		text-decoration-line: none;
	}
	
	
}




/*----------SP----------*/
@media only screen and (max-width:519px){
	
	.contents{
		max-width: 100%;
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"
	}

	.main-wrapper{
		margin: 0 auto;
		text-align: center;
	}
	
	
/*	レスポンシブによるトップの出しわけ*/
	.page--top-pc{
		display: none;
	}
	.page--top-sp{
		display: block;
        margin-bottom: 15px;
	}
	
/*	レスポンシブによる出しわけ*/
	.page--pc{
		display: none;
	}
	.page--sp{
		display: block;
	}
	
	
	.page--contents{
		width: 90%;
		margin: 0 auto;
	}
	
	

/*	タイトルエリア*/
	.page--title{
		text-align: center;
		margin: 0 auto;
	}
	.page--title img{
		width: 100%;
		padding-top: 10px;
	}
	
	
	
/*　 ボタンエリア*/
	.page--btn{
		width: 90%;
		display: -ms-grid;
		display: grid;
		gap: 20px;
        grid-template-columns: repeat(2,1fr);
		margin: 0px auto;
		}
	.page--btn img{
		width: 170px;
        box-shadow: 6px 5px 1px #eee;
		}
	.page--btn a{
		text-decoration-line: none;
	}

	
	
	/*	ライン*/
	.page--line{
/*		width: 90%;*/
		margin: 0 auto;
		border-bottom: solid 1px #2E170C ;
	}

	
/*	フューチャーエリア*/
	.page--feature-btn{
		width: 90%;
		margin: 35px auto 30px auto;
		border: solid 1px #2E170C;
		padding: 10px 10px;
	}
	.page--feature-btn a{
		display: block;
		text-decoration-line: none;
		font-size: 13px;
	}

	
	
/*	SNSボタンエリア*/
	.page--sns-btn{
		width: 80%;
		margin: 0 auto 30px auto;
	}
	.page--sns-btn img{
		width: 25px;
		margin: 7px 7px;
	}
	.page--sns-btn a{
		text-decoration-line: none;
	}
	

}