﻿
@import url("https://www.nissan.co.jp/COMMON/WEBFONTS/ShinGoPro-Light/woff/ShinGoPro-Light.css");
@import url("https://www.nissan.co.jp/COMMON/WEBFONTS/ShinGoPro-Bold/woff/ShinGoPro-Bold.css");
@import url("https://www.nissan.co.jp/COMMON/WEBFONTS/ShinGoPro-Regular/woff/ShinGoPro-Regular.css");

.clearfix:after{
	content : " ";
	display : block ;
	height : 0 ; 
	visibility : hidden ;
	clear : both ;
}
body{
	background: #fff;
	font-family: ShinGoPro-Regular,sans-serif;
	font-size: 14px;
	color: #000;
}
body br{
	font-size: 0;
}
body ul,
body ol,
body figure{
	margin: 0;
	padding: 0;
}
body ul li,
body ol li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
body p,
body li,
body dt,
body dd,
body th,
body td{
	margin: 0;
	line-height : 140% ;
}
body h1,
body h2,
body h3,
body h4{
	margin: 0;
	line-height : 120% ;
}
body img{
	max-width: 100%;
	vertical-align: bottom;
}
body a{
	color: #676767;
	text-decoration: none;
	transition-duration: 0.3s ;
}

body a:focus,
body input:focus{
	outline: none;
}

body button,
body input[type=submit],
body input[type=button]{
	text-decoration : none ;
	transition-duration : 0.3s ;
}
body a:hover,
body button:hover,
body input[type=submit]:hover,
body input[type=button]:hover{
	opacity: 0.5;
	text-decoration: underline;
}

body h1,
body h2,
body h3,
body h4{
	line-height: 140%;
	font-weight: normal;
}
body p,
body li,
body dt,
body dd,
body th,
body td{
	line-height: 180%;
}
body strong,
body b{
	font-weight: normal;
}

body .effect{
	transition-duration : 1s ;
	-webkit-transition : all 1s ease 0s ;
	-moz-transition : all 1s ease 0s ;
	-o-transition : all 1s ease 0s ;
	opacity: 0;
}
body .effect.effectout{
	opacity: 1;
}
/******************************************************************************
	header
******************************************************************************/
body header#globalHeader{
	position: absolute;
	left: 50%;
	width: 100%;
	max-width: 1440px;
	z-index: 2;
	transform:translateX(-50%);
}
body header#globalHeader .inner{
	display: flex;
	align-items: center;
	padding: 20px;
}
body header#globalHeader p.nissan{
	margin: 0 35px 0 0;
}
body header#globalHeader p.nissan a{
	display: block;
	line-height: 100%;
}
body header#globalHeader p.nissan img{
	vertical-align: middle;
}
body header#globalHeader h1 img{
	width: 140px;
}
body header#globalHeader ul.lang{
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
body header#globalHeader ul.lang li{
	position: relative;
	font-size: 16px;
	margin-left: 25px;
	line-height: 140%;
}
body header#globalHeader ul.lang li:first-child{
	margin-left: 0;
}
body header#globalHeader ul.lang li:first-child:after{
	content: "/";
	position: absolute;
	right: -1em;
	color: #676767;
}
body header#globalHeader ul.lang li a{
	display: inline-block;
	padding: 0 3px;
}
body header#globalHeader ul.lang li a:hover{
	text-decoration: none;
}
body header#globalHeader ul.lang li.current a{
	border-bottom: #1446b4 2px solid;
	color: #1446b4;
}

/******************************************************************************
	common
******************************************************************************/
body main{
	position: relative;
	margin: 0 auto;
	background: #fff;
	color: #000;
}
body main section{
	max-width: 1440px;
	margin: 0 auto;
}
/******************************************************************************
	#kv
******************************************************************************/
body main div#kv{
	box-sizing: border-box;
	max-width: initial;
	margin: 0 auto;
	overflow: hidden;
}
body main div#kv .slider .slick-dots li{
	width: 8px;
	height: 8px;
	margin: 0 5px;
}
body main div#kv .slider .slick-dots li button{
	width: 8px;
	height: 8px;
	padding: 0;
	transition-duration : 0.3s ;
}
body main div#kv .slider .slick-dots li button:hover{
	opacity: 0.5;
}
body main div#kv .slider .slick-dots li button:before{
	content: " ";
	background: #d2d2d2;
	width: 8px;
	height: 8px;
	border-radius: 4px;
}
body main div#kv .slider .slick-dots li.slick-active button:before{
	background: #1446b4;
	opacity: 1;
}
/******************************************************************************
	#about
******************************************************************************/
body main section#about{
	display: flex;
	justify-content: center;
	padding: 150px 15px;
}
body main section#about .inner h2{
	margin: 0 0 80px;
}
/******************************************************************************
	#gallery
******************************************************************************/
body main section#gallery{
	padding: 0;
	margin: 0 auto 120px;
}
body main section#gallery h2{
	max-width: 1440px;
	margin: 0 auto 12px;
	font-size: 22px;
	color: #1446b4;
}
body main section#gallery h2 span{
	margin: 0 0 0 10px;
	font-size: 16px;
}
body main section#gallery #lightgallery{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	background: #000;
}
body main section#gallery #lightgallery a{
	position: relative;
}
body main section#gallery #lightgallery a:before,
body main section#gallery #lightgallery a:after{
	position: absolute;
	content: "R32GT-R";
	left: 0;
	bottom: 10px;
	width: 50%;
	font-size: 9px;
	color: #fff;
	text-align: center;
	letter-spacing: 0.1em;
	font-family: ShinGoPro-Light,sans-serif;
	opacity: 0.7;
}
body main section#gallery #lightgallery a:after{
	content: "R32EV";
	left: auto;
	right: 0;
}
body main section#gallery #lightgallery a:nth-of-type(1),
body main section#gallery #lightgallery a:nth-of-type(2){
	margin: 0;
	width: 50%;
}
body main section#gallery #lightgallery a:nth-of-type(3),
body main section#gallery #lightgallery a:nth-of-type(4),
body main section#gallery #lightgallery a:nth-of-type(5){
	width: 33.3333%;
}
body main section#gallery #lightgallery a img{
	width: 100%;
}
body main section#gallery #lightgallery a span{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 24px;
	height: 24px;
	background: url("../img/ico_zoom.svg") center center no-repeat;
	background-size: contain;
}
/******************************************************************************
	#movie
******************************************************************************/
body main section#movie{
	padding: 0;
	margin: 0 auto 120px;
}
body main section#movie h2{
	max-width: 1440px;
	margin: 0 auto 12px;
	font-size: 22px;
	color: #1446b4;
}
body main section#movie figure{
	margin: 0;
}
body main section#movie figure a{
	position: relative;
	display: block;
}
body main section#movie figure a:before{
	content: " ";
	position: absolute;
	width: 110px;
	height: 110px;
	left: calc(50% - 55px);
	top: calc(50% - 55px);
	background: url("../img/ico_movie.png") center center no-repeat;
	background-size: 100% auto;
}
/******************************************************************************
	#interview
******************************************************************************/
body main section#interview{
}
body main section#interview > .figWrap{
	margin: 0 0 120px;
}
body main section#interview > .figWrap h2{
	box-sizing: border-box;
	padding: 0;
	max-width: 1440px;
	margin: 0 auto 12px;
	font-size: 22px;
	color: #1446b4;
}
body main section#interview > .figWrap figure{
	position: relative;
}
body main section#interview > .figWrap figure figcaption{
	position: absolute;
	bottom: 30px;;
	right: 30px;
	color: #fff;
	font-size: 10px;
	line-height: 160%;
	letter-spacing: 0.05em;
}
body main section#interview > .figWrap figure figcaption span{
	display: block;
	margin: 10px 0 0;
	font-size: 20px;
	line-height: 160%;
	letter-spacing: 0.2em;
}
body main section#interview > .figWrap figure figcaption span.en{
	font-size: 24px;
	font-family: ShinGoPro-Light,sans-serif;
	letter-spacing: 0.2em;
}
body main section#interview .inner{
	box-sizing: border-box;
	position: relative;
	height: 654px;
	padding: 0 15px 150px 560px;
	margin: 0 0 120px;
	overflow-y: scroll;
}
body main section#interview .inner section{
	width: 600px;
	max-width: 100%;
	margin: 0 auto 45px;
}
body main section#interview .inner section:last-of-type{
	margin-bottom: 0;
}
body main section#interview .inner section div{
	max-height: 0;
	overflow: hidden;
	transition-duration : 0.3s ;
}
body main section#interview .inner section h3{
	position: relative;
	padding: 0 50px 10px 0;
	border-bottom: #1446b4 1px solid;
	font-size: 17px;
	line-height: 160%;
	cursor: pointer;
	transition-duration : 0.3s ;
	color: #1446b4;
}
body main section#interview .inner section h3:hover{
	opacity: 0.5;
}
body main section#interview .inner section h3:after{
	content: " ";
	position: absolute;
	right: 0;
	top: calc(50% - 20px);
	width: 40px;
	height: 40px;
	background: url("../img/ico_interview.svg") center center no-repeat;
	background-size: contain;
	transition-duration : 0.3s ;
	transform: rotate(-90deg);
}
body main section#interview .inner section h3 span{
	position: relative;
	display: block;
	padding: 0 0 0 28px;
	font-size: 13px;
}
body main section#interview .inner section h3 span:after{
	content: " ";
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	border-bottom: #1446b4 1px solid;
}
body main section#interview .inner section figure{
	margin: 25px 0 0;
}
body main section#interview .inner section p{
	margin: 25px 0 0;
	font-size: 15px;
	font-family: ShinGoPro-Light,sans-serif;
	letter-spacing: 0.07em;
	line-height: 190%;
}
body main section#interview .inner .stickyFigure{
	position: sticky;
	left: 0;
	top: 0;
	margin: 0 0 0 -560px;
}
body main section#interview .inner .stickyFigure img{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition-duration : 1s ;
}
body main section#interview .inner .stickyFigure img.pcshow,
body main section#interview .inner .stickyFigure img.dummy{
	opacity: 1;
}
/******************************************************************************
	#spec
******************************************************************************/
body main section#spec{
	padding: 75px 15px 120px;
	border-top: #bdbdbd 1px solid;
}
body main section#spec header{
	max-width: 920px;
	padding: 0 0 75px;
	margin: 0 auto 45px;
	border-bottom: #ccc 1px solid;
}
body main section#spec header .text{
	margin: 30px 0 0;
}
body main section#spec header .text h2{
	color: #1446b4;
	font-size: 20px;
}
body main section#spec header .text p{
	letter-spacing: 0.1em;
}
body main section#spec .box{
	display: flex;
	justify-content: space-between;
	max-width: 920px;
	margin: 0 auto;
}
body main section#spec .box div{
	width: 440px;
	max-width: calc(50% - 20px);
}
body main section#spec .box div h3{
	margin: 0 0 20px;
	font-size: 16px;
	letter-spacing: 0.1em;
}
body main section#spec .box div ul{
	margin: 0 0 30px;
}
body main section#spec .box div ul;last-of-type{
	margin: 0;
}
body main section#spec .box div ul li{
	position: relative;
	padding-left: 1.5em;
	letter-spacing: 0.1em;
}
body main section#spec .box div ul li:before{
	position: absolute;
	content: " ";
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 3px;
}

/******************************************************************************
	.list
******************************************************************************/
body main section.list{
	max-width: initial;
	padding: 50px 15px 120px;
}
body main section.list .inner{
	max-width: 1150px;
	margin: 0 auto;
}
body main section.list .inner h2{
	margin: 0 0 40px;
}
body main section.list .inner h2 img{
	width: 54px;
}
body main section.list .inner ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
body main section.list .inner ul li{
	width: 550px;
	max-width: calc(50% - 25px);
	margin: 0 0 50px;
}
body main section.list .inner ul li:last-of-type(0),
body main section.list .inner ul li:last-of-type(1){
	margin: 0;
}
body main section.list .inner ul li .figureWrap{
	position: relative;
	height: 310px;
	max-height: 25.7vw;
	margin: 0 0 10px;
	border-radius: 15px;
	overflow: hidden;
}
body main section.list .inner ul li .figureWrap figure.main,
body main section.list .inner ul li .figureWrap figure.sub01,
body main section.list .inner ul li .figureWrap figure.sub02,
body main section.list .inner ul li .figureWrap figure.sub01-2,
body main section.list .inner ul li .figureWrap figure.comingsoon{
	position: absolute;
	overflow: hidden;
	z-index: 1;
}
body main section.list .inner ul li .figureWrap figure.main{
	left: 0;
	top: 0;
	width: 62%;
	height: 100%;
	z-index: 2;
}
body main section.list .inner ul li .figureWrap figure.sub01{
	right: 0;
	top: 0;
	width: 39%;
	height: 50%;
}
body main section.list .inner ul li .figureWrap figure.sub02{
	right: 0;
	bottom: 0;
	width: 39%;
	height: 50%;
}
body main section.list .inner ul li .figureWrap figure.sub01-2{
	right: 0;
	bottom: 0;
	width: 39%;
	height: 100%;
}
body main section.list .inner ul li .figureWrap figure img{
	max-width: initial;
	height: min(310px,25.7vw);
}
body main section.list .inner ul li .figureWrap figure.sub01 img,
body main section.list .inner ul li .figureWrap figure.sub02 img{
	height: min(160px,12.9vw);
}
body main section.list .inner ul li .figureWrap figure.main img,
body main section.list .inner ul li .figureWrap figure.sub01 img,
body main section.list .inner ul li .figureWrap figure.sub02 img,
body main section.list .inner ul li .figureWrap figure.sub01-2 img{
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: initial;
	transform: translate(-50%,-50%);
}
body main section.list .inner ul li .figureWrap iframe{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
body main section.list .inner ul li .figureWrap figure.gif{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
body main section.list .inner ul li .figureWrap figure.gif.vol3{
	background: url("../img/thumb_twitter03.gif") center center no-repeat;
	background-size: 100% auto;
}
body main section.list .inner ul li .figureWrap figure.gif.vol5{
	background: url("../img/thumb_twitter05.gif") center center no-repeat;
	background-size: 100% auto;
}
body main section.list .inner ul li .figureWrap figure.gif img{
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
body main section.list .inner ul li .figureWrap figure a.movie{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 4;
}
body main section.list .inner ul li .figureWrap figure a.movie:after{
	content: " ";
	position: absolute;
	width: 110px;
	height: 110px;
	left: calc(50% - 55px);
	top: calc(50% - 55px);
	background: url("../img/ico_movie.png") center center no-repeat;
	background-size: 100% auto;
}
body main section.list .inner ul li .figureWrap p{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	z-index: 3;
}
body main section.list .inner ul li > p{
	font-size: 18px;
	letter-spacing: 0.2em;
}
body main section.list.en .inner ul li > p{
	letter-spacing: 0.05em;
}
body main section.list .inner ul li > p a{
	display: block;
	padding: 0 30px 0 0;
	background: url("../img/ico_x.png") right center no-repeat;
	background-size: 28px auto;
	font-size: 18px;
	font-style: italic;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #ccc;
}
body main section.list .inner ul li > p a:hover{
	text-decoration: none;
}
/* twitter */
body main section.list#twitter{
	background: #000B42;
}
body main section.list#twitter .inner ul li .figureWrap{
	background: #010522;
}
body main section.list#twitter .inner ul li .figureWrap p{
	background: rgba(0,0,0,0.8);
}
/* instagram */
body main section.list#instagram .inner ul li > p a{
	background-image: url("../img/ico_instagram.png");
	color: #000;
}
/*** accordion ***/
body main section.list .inner p.open,
body main section.list .inner p.close{
	text-align: center;
}
body main section.list .inner ul li.hide,
body main section.list .inner p.close{
	display: none;
}
body main section.list.open .inner ul li.hide,
body main section.list.open .inner p.close{
	display: block;
}
body main section.list.open .inner p.open{
	display: none;
}
