@charset "utf-8";
/* -----------------------------------------------------------------------

top.css

----------------------------------------------------------------------- */


/*-----------------------------------------------------------------

	mainimg

-----------------------------------------------------------------*/
#top #mainimg {
	display:block;
	position:relative;
	overflow:hidden;
}
#top #mainimg div {
	display:block;
	width:100%;
	margin:0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	-webkit-transition: height 0.5s ease;
	transition:height 0.5s ease;
}
#top #mainimg .mainimg-overlay {
	display:block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10%;
	text-align: center;
}
#top #mainimg .mainimg-overlay p {
	display:inline;
	color: #fff;
	background: rgba(0,0,0,0.5);
	font-size: 5.0vw;
	line-height: 1.8;
}
#top #mainimg .mainimg01 {
	background-image: url(/img/top/mainimg01.jpg);
}
#top #mainimg .mainimg02 {
	background-image: url(/img/top/mainimg02.jpg);
}
#top #mainimg .mainimg03 {
	background-image: url(/img/top/mainimg03.jpg);
}
#top #mainimg .mainimg04 {
	background-image: url(/img/top/mainimg04.jpg);
}
#top #mainimg .mainimg05 {
	background-image: url(/img/top/mainimg05.jpg);
}
#top #mainimg .mainimg06 {
	background-image: url(/img/top/mainimg06.jpg);
}
#top #mainimg .slick-dots{
	bottom:20px;
}

/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#top #mainimg div {
		height:480px;
	}
	#top #mainimg .mainimg01 {
		background-position: 50% 70%;
	}
	#top #mainimg .mainimg02 {
		background-position: 60% 0%;
	}
	#top #mainimg .mainimg03 {
		background-position: 40% 70%;
	}
}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#top #mainimg div {
		height:100vh;
	}
	#top #mainimg .mainimg01 {
		background-position: 10% 70%;
	}
	#top #mainimg .mainimg02 {
		background-position: 60% 0%;
	}
	#top #mainimg .mainimg03 {
		background-position: 70% 70%;
	}

}

/*----------------------------------------------------------
	Display：769px →（ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width: 769px) {

	#top #mainimg div {
		height:100vh;
	}
	#top #mainimg .mainimg01,
	#top #mainimg .mainimg03 {
		background-position: center;
	}

}





/*-----------------------------------------------------------------

	#topics

-----------------------------------------------------------------*/

/*----------------------------------------------------------
	Display：common
----------------------------------------------------------*/

#topics dl.topicsList {
	margin:30px 0;
	border-top: 1px dashed #b10115;
}
#topics dl.topicsList dt {
	padding:15px 15px 10px;
	font-size:2.4rem;
	font-family: 'Oswald', sans-serif;
	letter-spacing:-0.005em;
	color:#b10115;
}
#topics dl.topicsList dd {
	border-bottom: 1px dashed #b10115;
	padding:0 15px 15px;
	color:#ffffff;
}
#topics dl.topicsList dd a {
	color:#ffffff;
	text-decoration:none;
	-webkit-transition: all 0.5s ease;
	transition:all 0.5s ease;
}
#topics dl.topicsList dd a:hover {
	color:#ffffff;
	opacity:0.6;
}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc ）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#topics dl.topicsList {
		margin:40px 0;
	}
	#topics dl.topicsList dt {
		float: left;
		clear: left;
		width: 170px;
		padding:10px 25px;
		font-size:2.4rem;
	}
	#topics dl.topicsList dd {
		padding:10px 25px 10px 170px;
	}

}





/*-----------------------------------------------------------------

	scheduleBox

-----------------------------------------------------------------*/

#top .scheduleBox {
	padding:30px;
	color:#ffffff;
	background:#303030;
	position:relative;
}
#top .scheduleBox .ttl{
	margin-bottom:30px;
	font-size:4.2rem;
	color:#ffffff;
	text-align:center;
}
#top .scheduleBox .scheduleList {
	margin:0;
	padding:0;
}
#top .scheduleBox .scheduleList dt {
	margin:0 0 8px;
	padding:0 15px 0 0;
	color:#ffcc00;
}
#top .scheduleBox .scheduleList dt em {
	display:inline-block;
	width: 75px;
	margin-right:20px;
	text-align:center;
	color:#ffffff;
	background-color:#141414;
}
#top .scheduleBox .scheduleList dd {
	margin:0 0 8px;
	padding:0 0 0 1em;
}


/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {
	#top .scheduleBox {
		padding:30px 15px 15px;
	}
	#top .scheduleBox .ttl {
		margin-bottom:25px;
		font-size:3.4rem;
	}
}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#top .scheduleBox {
		padding:30px 25px 25px;
	}
	#top .scheduleBox .ttl {
		font-size:3.8rem;
	}
	
}

/*----------------------------------------------------------
	Display：640px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 640px) {

	#top .scheduleBox {
		padding:30px;
	}
	#top .scheduleBox .ttl{
		font-size:4.2rem;
		text-align:left;
	}
	#top .scheduleBox .scheduleList dt {
		float: left;
		clear: left;
		width: 260px;
	}
	#top .scheduleBox .scheduleList dd {
		padding:0 0 0 260px;
	}

}

/*----------------------------------------------------------
	Display：1000px →（ pc ）
----------------------------------------------------------*/

@media print, screen and (min-width: 1000px) {

	#top .scheduleBox {
		padding:30px 30px 30px 350px;
	}
	#top .scheduleBox .ttl {
		position:absolute;
		top:32px;
		left:32px;
	}

}



/*-----------------------------------------------------------------

	nissanmechanic

-----------------------------------------------------------------*/

#nissanmechanic {
	background-image:url(/img/top/nissanmechanic_bg.jpg);
	background-color:#171717;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
}
#nissanmechanic .inner{
	max-width:1040px;
	margin:0 auto;
	padding:0 0 0 6%;
	position:relative;
	-webkit-transition: all 0.5s ease;
	transition:all 0.5s ease;
}
#nissanmechanic .inner img{
	margin:auto 0;
	position:absolute;
	top:0;
	bottom:0;
	-webkit-transition: all 0.5s ease;
	transition:all 0.5s ease;
}

/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#nissanmechanic .inner img{
		width:286px;
		height:77px;
	}
	#nissanmechanic .inner{
		height:250px;
	}
	
}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#nissanmechanic .inner img{
		width:400px;
		height:107px;
	}
	#nissanmechanic .inner{
		height:300px;
	}
	
}

/*----------------------------------------------------------
	Display：769px →（ pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 769px) {

	#nissanmechanic .inner img{
		width:571px;
		height:153px;
	}
	#nissanmechanic .inner{
		height:350px;
	}
	
}




/*-----------------------------------------------------------------

	fanclub

-----------------------------------------------------------------*/

#fanclub {
	background-image:url(/img/top/fanclub_bg.jpg);
	background-color:#141414;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
}
#fanclub .inner {
	height:600px;
}
#fanclub .logo{
	width:250px;
	-webkit-transition: height 0.5s ease;
	transition:height 0.5s ease;
}
#fanclub .logo img{
	width:100%;
}
#fanclub .ttl{
	padding:35px;
	line-height:1.2em;
	color:#ffffff;
	text-shadow: 0px 0px 15px #000000;
}
#fanclub .linkList li{
	
}
#fanclub .linkList li a {
	display:inline-block;
	color:#1542fb;
	text-decoration:none;
	font-family: 'Oswald', sans-serif;
	letter-spacing:-0.005em;
	font-weight:400;
	background-image:url(/img/common/arrow.svg);
	background-repeat:no-repeat;
	background-position:0 53%;
	-webkit-transition: all 0.5s ease;
	transition:all 0.5s ease;
}
#fanclub .linkList li a:hover {
	background-position:5px 53%;
	opacity:0.6;
}


/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#fanclub {
		background-position:55% 50%;
	}
	#fanclub .inner {
		height:400px;
	}
	#fanclub .logo{
		width:160px;
	}
	#fanclub .linkList {
		padding:0;
	}
	#fanclub .ttl{
		padding:20px 0px;
		font-size:3.2rem;
	}
	#fanclub .linkList {
		padding:0 5px;
	}
	#fanclub .linkList li a {
		padding:6px 20px 6px 15px;
		font-size:1.8rem;
		background-size:5px auto;
	}
}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#fanclub .inner {
		height:600px;
	}
	#fanclub .logo{
		width:180px;
		margin-left:15px;
	}
	#fanclub .ttl{
		padding:30px 15px;
		font-size:5.2rem;
	}
	#fanclub .linkList {
		padding:0 20px;
	}
	#fanclub .linkList li a {
		padding:10px 35px 10px 25px;
		font-size:2.3rem;
		background-size:10px auto;
	}
}

/*----------------------------------------------------------
	Display：769px →（ pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 769px) {

	#fanclub .inner {
		height:600px;
	}
	#fanclub .logo{
		width:240px;
		margin-left:20px;
	}
	#fanclub .ttl{
		padding:35px 20px;
		font-size:5.6rem;
	}
	#fanclub .linkList {
		padding:0 25px;
	}
	
}



/*-----------------------------------------------------------------

	social

-----------------------------------------------------------------*/

#social .socialBox {
	max-width: 500px;
	width:100%;
	margin: 0;
	padding:0;
}
#social .socialBox .cover.tw {
	border:1px solid #ebedf0;
	border-bottom:none;
}
#social .socialBox .twitter {
	border:1px solid #ebedf0;
}
#social .socialBox .facebook > .fb-page {
	width: 100%;
}
#social .socialBox .facebook > .fb-page > span,
#social .socialBox .facebook iframe {
	width: 100% !important;
	margin:0;
	padding:0;
}

.facebook{
	width: 100%;
}
.fb-page,
.fb-page span,
.facebook_wrap iframe{
	width: 100% !important;
	height: 500px !important;
}
.twitter iframe{
	width: 100% !important;
	height: 490px !important;
}

/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

@media screen and (max-width:559px) {

	#social .socialBox {
		width:100%;
		margin:0 auto;
	}

}

/*----------------------------------------------------------
	Display：560px →（ tablet + pc）
----------------------------------------------------------*/

@media print, screen and (min-width: 560px) {

	#social .socialBox {
		width:48%;
	}
	
}