@charset "UTF-8";

body {
	font-family:"Zen Kaku Gothic New","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	color: #000000;
}
*{vertical-align: top; box-sizing: border-box; word-break: break-all;}
a{color: #000000; display: inline-block; text-indent: 0; text-decoration: none;}
a:hover{opacity: 0.6;}

img{pointer-events: none;}

.txt{
	opacity: 0;
	font-size: 0;
	letter-spacing: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.sp{display: none;}
@media screen and (max-width: 800px){
	.pc{display: none;}
	.sp{display: inline; width: 100%;}
}



/*=====================================================================================
***************************************************************************************

　　メインビジュアル

***************************************************************************************
=====================================================================================*/
#mv img{width: 100%;}



/*=====================================================================================
***************************************************************************************

　　キャッチコピー

***************************************************************************************
=====================================================================================*/
#about{
	width: 100%;
	padding: 100px 0;
	background: url("../img/about_bg.webp") center no-repeat;
	background-size: cover;
}

#about div{
	max-width: 970px;
	width: 90%;
	margin: 0 auto;
	text-align: justify;
}

@media screen and (max-width: 800px){
	#about{
		width: 100%;
		padding: 50px 0;
		background: url("../img/about_bg_sp.webp") center no-repeat;
		background-size: cover;
	}
	#about div{width: 80%;}
	#about div img{width: 100%;}
}





/*=====================================================================================
***************************************************************************************

　　message

***************************************************************************************
=====================================================================================*/
#message{
	width: 100%;
	background: url("../img/contents_bg.webp") center bottom no-repeat;
	background-size: cover;
	padding: 7% 0 0;
}


#message .message_box{
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-bottom: 30%;
}

#message .message_box img{
	/*position: absolute;
	top: 0;
	left: 50%;
	transform:translateX(-50%);
	 -webkit-transform:translateX(-50%);*/
	width: 100%;
}

#message .btn_box{
	/*max-width: 970px;*/
	width: 70%;
	margin: 0 auto;
	text-align: justify;
	margin-bottom: 30%;
}

footer{padding-bottom: 30px;}
footer img{max-width: 90%;}

@media screen and (max-width: 1200px){
	#message .message_box img{
		position: relative;
		top: 0;
		left: 50%;
		transform:translateX(-50%);
		 -webkit-transform:translateX(-50%);
		width: 120%;
	}
	#message .btn_box{width: 80%;}
	#message .btn_box img{width: 400px; max-width: 90%;}
}

@media screen and (max-width: 800px){
	#message{
		width: 100%;
		background: url("../img/contents_bg_sp.webp") center bottom no-repeat;
		background-size: cover;
		padding: 7% 0 0;
	}
	#message .message_box{margin-bottom: 30px;}
	#message .btn_box{
		width: 100%;
		text-align: center;
		margin-bottom: 105%;
	}
	footer{text-align: center;}
	
}