@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
body{margin: 0;}
.box a .sp{display: none;}
.sp{display: none;}
img{
	display: block;
	width: 100%;
	object-fit: contain;
	max-width: max-content;
}
a,footer li,.bnr{transition: .3s;}
.body a:hover,footer li:hover,.bnr:hover{opacity: .9;transform: scale(1.1);}


@media (max-width: 1024px) {
	.pc{display: none;}
	.sp{display: block;}
}
.wrap{
	position: relative;
	width: 100%;
	height: 100vh;
}
/**********************************************************************
mv
**********************************************************************/
.bnr{
	width: 20%;
	max-width: 160px;
	z-index: 5;
	position: fixed; 
	bottom: -20px; 
	right: 20px; 
	opacity: 0; 
	visibility: hidden; 
}
.bnr.is-active { 
	opacity: 1;
	visibility: visible;
	bottom: 20px;
}
@media (max-width: 1160px) {
	.bnr{display: none;}
	
}
/**********************************************************************
mv
**********************************************************************/
.mv{
	background-color: #fff;
	display: flex;
	height: 100vh;
	position: relative;
}
.logo{
	position: absolute;
	top:20px;
	left: 20px;
	width: 20%;
	z-index: 50;
}
.mv_img{
	margin: 0 auto;
}
@media (max-width: 1024px) {
	.mv{padding: 0 5%;}
}
@media (max-width: 750px) {
	.mv{height: 70vh;}}
/**********************************************************************
body
**********************************************************************/
.body{
	background-color:  #b5c5d3;
	
	}
.body_wrap{
	max-width: 750px;
	margin: 0 auto;
}
.youtube{background: #fff;}
.youtube iframe{
	margin: 0 auto;
	width: 90%;
    aspect-ratio: 16 / 9;
	display: block;
}
/**********************************************************************
box
**********************************************************************/
.box{
	max-width: 750px;
	margin: 0 auto;
	background: #e5e5e5;
	text-align: center;
	padding: 80px 5%;
}
.box p{
	font-size: 28px;
	margin: 0 auto 2em;
}
.box a{
	width: 645px;
	background: #e71230;
	color: #fff;
	font-weight: 600;
	font-size: 28px;
	display: block;
	padding: 1.2em 90px 1.2em 50px;
	border-radius:2em;
	margin: 0 auto;
	position: relative;
	text-align: left;
	box-sizing: border-box;
	
}
.box a::after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
    right: 40px;
    transform: translateY(-50%);
	
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid #fff;
	border-right: 0;
}
.box a:hover{
	background: #fff;
	
	color:  #e71230;
}
.box a:hover::after{
	border-left: 17px solid #e71230;
}
@media (max-width: 750px) {
	.box p,.box a{font-size: 21px;}
	.box a{width: 90%;}
}
@media (max-width: 600px) {
	.box a .sp{display: block;}
	.box a{
		text-align: center;
		border-radius: 3em;
	}
}
@media (max-width: 400px) {
	.box p,.box a{font-size: 16px;}
	.box a{width: 90%;padding: 1.2em 60px 1.2em 30px;}
}
/**********************************************************************
footer
**********************************************************************/
footer{
	padding: 40px 5%;
	background: #000;
	color: #fff;
	font-size: 18px;
}
footer div{
	display: flex;
	gap:30px;
	align-items: center;
    justify-content: flex-start;
}
footer div img{width: 130px;}
footer small{
	text-align: center;
	display: block;
	border-bottom: #fff solid 1px;
	padding: 40px 0 30px;
}
footer>img{margin: 40px auto 30px;}
footer ul{
	display: flex;
	gap:5%;
	justify-content: center;
}
footer li{width: 60px;}
@media (max-width: 750px) {
	footer div{flex-direction: column;gap:20px;}
	footer>img{margin: 40px auto 20px;}
}