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

/*--reset--*/
html,body,h1,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
}
body {
	font-family: MazdaTypeRegular,Noto Sans CJK JP,Hiragino Kaku Gothic ProN,HiraKakuProN-W3,Meiryo,Yu Gothic Medium,sans-serif;
}
img {
	vertical-align: middle;
	border: none;
}
ul {
	padding-left: 0;
}
li {
	list-style:none
}
a{
	text-decoration: none;
}
div {
	display: block;
}
p {
	text-decoration: none;
}
.view-pc {
	display: block;
}
.view-sp {
	display: none;
}
@media screen and (max-width: 750px) {
	.view-pc {
		display: none;
	}
	.view-sp {
		display: block;
	}
}

.black-white {
	background: #fff;
	padding: 30px 40px 10px;
}
.mbtm {
	margin-bottom: 20px;
}
.mleft {
	margin-left: 20px;
}

/*--all--*/
.container {
	width: 100%;
    max-width: 1080px;
	margin: 0 auto;
	height: auto;
	text-align: center;
}
.container img {
	max-width: 100%;
	margin: 0 auto;
	height: auto;
}

.link-flex{
	display:flex;
	justify-content: center;
	}

/*--button--*/
.green-back {
	background-image: url(../img/green-back-pc.png);
}
.youtube-btn {
	max-width: 532px;
	margin: 0 auto;
}
.official-btn {
	max-width: 920px;
    padding: 0 7%;
}
.official-btn img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 750px) {
	.green-back {
		background-image: url(../img/green-back-sp.png);
	}
	.youtube-btn {
		max-width: 660px;
	}
	.official-btn {
		max-width: 660px;
		padding: 0 8%;
	}
	.black-white {
		background: #fff;
		padding: 30px 40px 10px;
	}
	.mbtm {
		margin-bottom: 20px;
	}
	.mleft {
		margin-left: 20px;
	}
}
@media screen and (max-width: 750px) {
	.black-white {
		background: #fff;
		padding: 30px 40px;
	}
	.mleft {
		margin: 40px 0;
	}
	.mbtm {
		margin-bottom: 0;
	}
	.in-mbtm {
		margin-bottom: 10px;
	}
}

.youtube-btn a:hover,
.official-btn a:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.opty a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}




@media screen and (max-width: 750px) {
	.link-flex {
		display: block;
		margin: 0;
	}
}


/*--footer--*/
footer {	
	background-color: #fff;
	padding: 0 0 5%;
	margin-top: 5%;
}
footer p {
	margin-bottom: 0.25rem;
	font-size: 18px !important;
    line-height: 1.75 !important;
	color: #212529;
}
@media screen and (max-width: 750px) {
	footer p {
		font-size: 2.5vw !important;
	}
}