﻿
@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: #333;
}
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: #333;
	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{
	height: 95px;
	background: #fff;
}
body header#globalHeader .inner{
	position: relative;
	max-width: 1300px;
	height: 100%;
	margin: 0 auto;
}
body header#globalHeader p.logo{
	position: absolute;
	left: 25px;
	top: 50%;
	width: 72px;
	transform: translateY(-50%);
}
/******************************************************************************
	footer
******************************************************************************/
body footer{
	padding: 30px 10px;
	background: #000;
}
body footer .inner{
	position: relative;
	max-width: 1170px;
	margin: 0 auto;
}
body footer ul.sitemap{
	float: left;
}
body footer ul.sitemap li{
	display: inline;
	margin: 0 15px 0 0;
	font-size: 12px;
}
body footer ul.sitemap li a{
	color: #fff;
	text-decoration: none;
}
body footer ul.sitemap li a:hover{
	text-decoration: underline;
}
body footer p.copyright{
	float: right;
	font-size: 12px;
	color: #fff;
}

/******************************************************************************
	common
******************************************************************************/
body main section{
	max-width: 1600px;
	min-width: 980px;
	margin: 0 auto;
}
/******************************************************************************
	#kv
******************************************************************************/
body main section#kv{
	position: relative;
	height: 840px;
	background: #fff url("../img/bg_kv.jpg") center center no-repeat;
	background-size: 1600px auto;
}
body main section#kv h1{
	position: absolute;
	max-width: 684px;
	left: 160px;
	bottom: 92px;
}
body main section#kv .scroll{
	position: absolute;
	right: 275px;
	bottom: -80px;
	width: 11px;
	height: 165px;
	background: url("../img/bg_scroll.png") center center repeat-y;
	overflow: hidden;
}
body main section#kv .scroll:before{
	content: " ";
	position: absolute;
	left: 5px;
	top: 0;
	width: 1px;
	height: 80px;
	background: #fff;
	animation: scroll 2s linear infinite;
}
body main section#kv .scroll:after{
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 11px;
	height: 11px;
	background: #000;
	border-radius: 6px;
}
@keyframes scroll{
	0%{
		top: -80px;
		height: 80px;
	}
	100%{
		top: 160px;
	}
}
/******************************************************************************
	#about
******************************************************************************/
body main section#about{
	display: flex;
	align-items: center;
	padding: 120px 15px 120px 0;
	background-color: #fff;
	background-image: url("../img/bg_about01.png"),url("../img/bg_about02.png");
	background-repeat: repeat-y,no-repeat;
	background-position: left center,right 70px bottom;
}
body main section#about figure{
	margin-right: 120px;
}
body main section#about .text h2{
	font-size: 46px;
}
body main section#about .text h2 span{
	font-size: 26px;
}
body main section#about .text h3{
	margin: 30px 0 0;
	font-size: 20px;
}
body main section#about .text p{
	margin: 30px 0 0;
	line-height: 280%;
}
/******************************************************************************
	#service
******************************************************************************/
body main section#service{
	position: relative;
	padding: 120px 15px 120px;
	background: url("../img/bg_service01.png") left bottom repeat;
}
body main section#service .bg{
	position: absolute;
	width: calc(50% - 28px);
	height: calc(100% - 310px);
	left: 0;
	bottom: 0;
	background: url("../img/bg_service02.png") left bottom repeat;
	z-index: 1;
}
body main section#service .inner{
	position: relative;
	z-index: 2;
}
body main section#service h2{
	position: relative;
	padding: 80px 0 0;
	margin: 0 0 40px;
	text-align: center;
	font-size: 16px;
}
body main section#service h2 span{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	font-size: 52px;
	line-height: 100%;
}
body main section#service p{
	margin: 0 auto 40px;
	text-align: center;
	line-height: 280%;
}
body main section#service p.period{
	width: 348px;
	border: #5a3d11 1px solid;
	font-size: 18px;
	color: #5a3d11;
	position:center;
	line-height:1.35;
	padding:10px;
	background: #fff;
}
body main section#service .wrap{
	display: flex;
	justify-content: space-between;
	width: 1260px;
	max-width: 100%;
	margin: 0 auto;
}
body main section#service .wrap .item{
	position: relative;
	width: 388px;
	max-width: 32%;
}
body main section#service .wrap .item h3{
	background: #5a3d11;
	text-align: center;
	font-size: 22px;
	color: #fff;
	line-height: 300%;
}
body main section#service .wrap .item .taxi{
	position: relative;
	padding: 0 0 15px;
	margin: 0 0 50px;
	background: #fff;
	text-align: center;
}
body main section#service .wrap .item .taxi figure{
	margin: 0 0 15px;
}
body main section#service .wrap .item .taxi figure a.zoom{
	display: block;
	position: relative;
}
body main section#service .wrap .item .taxi dl dt{
	font-size: 18px;
}
body main section#service .wrap .item .taxi dl dd{
	font-size: 16px;
}
body main section#service .wrap .item > dl{
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: #c2c2c2 1px solid;
}
body main section#service .wrap .item > dl:last-of-type{
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
body main section#service .wrap .item > dl dt{
	font-size: 18px;
}
body main section#service .wrap .item > dl.message dd{
	font-size: 12px;
}
body main section#service .wrap .item div.sticker{
	position: absolute;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 321px;
	background: rgba(0,0,0,0.8);
}
body main section#service .wrap .item div.sticker.show{
	display: flex;
}
body main section#service .wrap .item div.sticker p.close{
	position: absolute;
	right: 20px; 
	top: 20px;
	line-height: 100%;
	margin: 0;
}
body main section#service .wrap .item div.sticker figure{
	text-align: center;
	color: #fff;
}
body main section#service .wrap .item div.sticker figure figcaption{
	margin: 20px 0 0;
	line-height: 160%;
}
/******************************************************************************
	#donation
******************************************************************************/
body main section#donation{
	padding: 120px 15px 120px;
}
body main section#donation h2{
	position: relative;
	width: 910px;
	height: 60px;
	max-width: calc(100% - 70px);
	margin: 0 auto 70px;
	background: #5a3d11;
	text-align: center;
	line-height: 60px;
	color: #fff;
	font-size: 28px;
}
body main section#donation h2:before{
	content: " ";
	position: absolute;
	left: -35px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 35px 30px 0;
	border-color: transparent #5a3d11 transparent transparent;
}
body main section#donation h2:after{
	content: " ";
	position: absolute;
	right: -35px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 30px 35px;
	border-color: transparent transparent transparent #5a3d11;
}
body main section#donation h2 span{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
body main section#donation h2 span:before{
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 25px;
	left: 8px;
	background: #ad9e88;
	border-radius: 5px;
}
body main section#donation h2 span:after{
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 25px;
	right: 8px;
	background: #ad9e88;
	border-radius: 5px;
}
body main section#donation figure{
	margin: 0 auto 60px;
	text-align: center;
}
body main section#donation p{
	font-size: 22px;
	text-align: center;
}
body main section#donation .wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 980px;
	max-width: 100%;
	margin: 0 auto;
}
body main section#donation .wrap figure{
	border: #333 2px dotted;
}
body main section#donation .wrap .text{
	width: calc(100% - 470px);
}
body main section#donation .wrap .text h3{
	margin-bottom: 30px;
	font-size: 22px;
}
body main section#donation .wrap .text p{
	line-height: 180%;
}
/******************************************************************************
	#organization
******************************************************************************/
body main section#organization{
	padding: 120px 15px 120px;
	background: url("../img/bg_organization.png") center center repeat;
}
body main section#organization h2{
	position: relative;
	width: 910px;
	height: 60px;
	max-width: calc(100% - 70px);
	margin: 0 auto 80px;
	background: #5a3d11;
	text-align: center;
	line-height: 60px;
	color: #fff;
	font-size: 28px;
}
body main section#organization h2:before{
	content: " ";
	position: absolute;
	left: -35px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 35px 30px 0;
	border-color: transparent #5a3d11 transparent transparent;
}
body main section#organization h2:after{
	content: " ";
	position: absolute;
	right: -35px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 30px 35px;
	border-color: transparent transparent transparent #5a3d11;
}
body main section#organization h2 span{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
body main section#organization h2 span:before{
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 25px;
	left: 8px;
	background: #ad9e88;
	border-radius: 5px;
}
body main section#organization h2 span:after{
	content: " ";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 25px;
	right: 8px;
	background: #ad9e88;
	border-radius: 5px;
}
body main section#organization ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 980px;
	max-width: 100%;
	margin: 0 auto;
}
body main section#organization ul li{
	width: 288px;
	max-width: calc(33.3333% - 3px);
	margin-bottom: 60px;
	height: 180px;
	background: #fff url("../img/fig_organization01.png") center center no-repeat;
	background-size: contain;
}
body main section#organization ul li:nth-of-type(4),
body main section#organization ul li:nth-of-type(5),
body main section#organization ul li:nth-of-type(6){
	margin-bottom: 0;
}
body main section#organization ul li:nth-of-type(2){
	background-image: url("../img/fig_organization02.png");
}
body main section#organization ul li:nth-of-type(3){
	background-image: url("../img/fig_organization03.png");
}
body main section#organization ul li:nth-of-type(4){
	background-image: url("../img/fig_organization04.png");
}
body main section#organization ul li:nth-of-type(5){
	background-image: url("../img/fig_organization05.png");
}
body main section#organization ul li:nth-of-type(6){
	background-image: url("../img/fig_organization06.png");
}
body main section#organization ul li span{
	display: none;
}
/******************************************************************************
	#sakura
******************************************************************************/
body main section#sakura{
	padding: 120px 15px 120px;
}
body main section#sakura .wrap{
	position: relative;
	width: 800px;
	margin: 0 auto;
	border: #333 1px solid;
}
body main section#sakura .wrap h2{
	position: absolute;
	top: -23px;
	left: 50%;
	padding: 0 50px;
	font-size: 32px;
	background: #fff;
	white-space: nowrap;
	transform:translateX(-50%);
}
body main section#sakura .wrap figure{
	padding: 100px 0;
	text-align: center;
}
/******************************************************************************
	.modal
******************************************************************************/
.fancybox-is-open .fancybox-bg{
	background: rgba(0,0,0,0.9);
}
.fancybox-content{
	box-sizing: border-box;
}
.fancybox-slide--html .fancybox-close-small{
	padding: 0;
	background: url("../img/btn_close.png") center center no-repeat;
	transition-duration : 0.3s ;
	opacity: 1;
}
.fancybox-slide--html .fancybox-close-small:hover{
	opacity: 0.7;
}
.fancybox-button svg{
	display: none;
}
.modal{
	box-sizing: border-box;
	padding: 60px 0 0;
	background: transparent;
}
.modal img{
	max-width: 100%;
	vertical-align: bottom;
}
.modal figure{
	padding: 50px;
	background: #fff;
}
.modal dl{
	display: flex;
	align-items: center;
	max-width: 630px;
	margin: 30px auto 0;
	padding: 0;
}
.modal dl dt{
	margin: 0 30px 0 0;
}
.modal dl dd{
	margin: 0;
	font-size: 18px;
	color: #fff;
}
