@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;
	background: #efefef;
}
*{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;}


.sp{display: none;}

img{max-width: 90%;}

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




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

　　メインビジュアル

***************************************************************************************
=====================================================================================*/
#mv{position: relative;}
#mv img{width: 100%; max-width: 100%;}
#mv h1{position: absolute; opacity: 0; font-size: 0; letter-spacing: 0;}




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

　　message

***************************************************************************************
=====================================================================================*/
#message{margin: 60px auto 55px;}

@media screen and (max-width: 600px){
	#message img{max-width: 75%;}
}


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

　　動画

***************************************************************************************
=====================================================================================*/
#movie{
	padding: 60px 0 55px;
	background: #c3002f;
}
#movie h2{margin-bottom: 45px;}

#movie .box{
	margin:0 auto 40px;
	width: 680px;
	max-width: 90%;
}
#movie p{margin-bottom: 20px;}

#movie .box iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

@media screen and (max-width: 600px){
	#movie p.txt01 img{width: 240px;}
	#movie p.txt02 img{width: 303px;}
}









#about{
	padding: 60px 0 55px;
	background: #000000;
}
#about h2{margin-bottom: 45px;}

@media screen and (max-width: 600px){
	#about h2 img{max-width: 280px;}
	#about .profile{max-width: 300px;}
}




#product{
	padding: 60px 0 55px;
}

#product h2{margin-bottom: 30px;}

#product ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	margin: 40px auto;
}

#product ul li{
	width: 210px;
	margin: 0 10px 10px;
}
#product ul li img{width: 100%; max-width: 100%;}

#product ul li a{display: block; margin-top: 10px;}

@media screen and (max-width: 600px){
	#product ul li{width: 330px; margin-bottom: 30px;}
	#product .txt{width: 330px;}
}


#service{
	padding: 60px 0 55px;
	background: #d2d2d2;
}

#service ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 35px;
}

#service ul li{
	width: 300px;
	padding: 35px 0 30px;
	background: #FFFFFF;
	border-radius: 3px;
	margin: 0 5px 20px;
}
#service ul li a{
	display: block;
	margin-top: 20px;
}
#service ul li a img{max-width: 100%;}



#campaign{
	padding: 60px 0 100px;
}
#campaign h2{margin-bottom: 40px;}

#campaign ul{
	display: flex;
	justify-content: space-between;
	width: 880px;
	max-width: 90%;
	margin: 0 auto;
	flex-wrap: wrap;
}

#campaign ul li{width: 49%; margin-bottom: 20px;}
#campaign ul li img{max-width: 100%; width: 430px;}

@media screen and (max-width: 600px){
	#campaign h2{margin-bottom: 20px;}
	#campaign ul{justify-content: center;}
	#campaign ul li{width: 80%; margin-bottom: 20px;}
}


footer {
	font-size: 13px;
	max-width: 90%;
	width: 600px;
	margin: 0 auto;
}
footer .bold{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
}
footer div{
	line-height: 2.5;
	margin-bottom: 30px;
}
footer div a{padding: 0 8px;}

@media screen and (max-width: 600px){
	footer div > a{display: block;}
}