@charset "utf-8";

#fullpage{
}

h2{
	margin-bottom: 10px;
}
p {
	font-size: 16px;
	line-height: 1.7;
}
	
.title {
	margin-bottom: 5px;
	font-size: 42px;
	font-weight: bold;
	color: #fff !important;
	letter-spacing: 7px;
}

.link {
	margin-top: 19px;
	font-size: 16px;
}

.link a {
	padding: 9px 30px 6px;
	display: inline-block;
	color: #FFF;
	font-size: 15px;
	text-decoration: none;
	background: #222 url(../../common/images/icon16.gif) no-repeat 20px 14px;
	text-align: center;
	width: 134px;
	box-sizing: border-box;
	letter-spacing: 2px;
	margin-bottom: 1em;
}

.link a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

.linkUl {
	margin-top: 18px;
	text-align: center;
}

.linkUl li {
	margin: 0 3px;
	display: inline;
	font-size: 16px;
}

.linkUl a {
	width: 240px;
	padding: 4px 30px 6px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	background: #222 url(../../common/images/icon16.gif) no-repeat 20px 14px;
	color: #FFF;
}

.linkUl a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

.linkUl a span {
	padding: 6px 30px 11px;
	display: inline-block;
	color: #FFF;
	font-size: 15px;
	text-decoration: none;
	background: url(../../common/images/icon16.gif) no-repeat 20px 12px;
}
.srcollBtn{
	margin-top: 60px;
}
.srcollBtn a {
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
    display: inline-block;
}

@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translate(0, 10px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate(0, 10px);
		opacity: 0;
	}
}
.section{
	box-sizing: border-box;
	height: 898px;
	background: #000 url(../images/track/bg01.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}
.section:not(#section01) .textBox{
	height: 100%;
}
.subBox{
	width: 900px;
	height: 100%;
	margin: auto;
	position: relative;
	box-sizing: border-box;
}
.arrowTrack{
	position: absolute !important;
	top:0;
	left: -30px;
	width: 12px;
	height: 140%;
	border-left: 1px solid #fff;
}
#section01{
	padding-top: 190px;
	text-align: center;
	color: #fff;
}
#section02{
	text-align: left;
	color: #000;
	padding-top: 210px;
	background-image: url(../images/track/bg02.jpg);
}
#section01 h2 {
	margin-bottom: 23px;
}
#section02 .subBox{
	margin-left: 45%;
	width: 48%;
}

#section03{
	text-align: left;
	color: #fff;
	background-image: url(../images/track/bg03.jpg);
}
#section03 .subBox{
	padding-top: 145px;
		
}
#section03 .arrowTrack{
	border-top: 1px solid #9b9b9b;
	border-left-color: #9b9b9b;
	top: 200px;
}
#section03 p{
	line-height: 1.5;
}

#section04{
	text-align: left;
	color: #fff;
	background-image: url(../images/track/bg04.jpg);
}
#section04 .subBox{
	padding-top: 160px;
}
#section04 .arrowTrack{
	border-left-color: #9b9b9b;
}
#section04 p{
	line-height: 1.5;
}

#section05{
	text-align: left;
	color: #000;
	background-image: url(../images/track/bg05.jpg);
}
#section05 .subBox{
	padding-top: 160px;
}
#section05 .arrowTrack{
	border-left-color: #899398;
}

#section06{
	text-align: left;
	color: #fff;
	background-image: url(../images/track/bg06.jpg);
	height: 950px;
}
#section06 .subBox{
	padding-top: 70px;
}
#section06 .arrowTrack{
	border-left-color: #fff;
	height: 766px;
}
#section06 .arrowTrack:after{
	position: absolute;
	bottom: -16px;
	left: -8px;
	content: url(../images/track/ico_arrow.png);
}
#section06 ul{
	margin-top: 50px;
}

#section07{
	text-align: left;
	color: #fff;
	position: relative;
	top: 0px;
	left: 0;
}
#section07 .linkList{
	margin-top: 160px;
}
.lead{
	margin-bottom: 1em;
}
.subBox p{
	margin-bottom: 1.5em;
	line-height: 2;
}
.subBox > * {
	position: relative;
}
.chronology dt{
	padding-top: 30px;
	margin-bottom: 4px;
}
.chronology dd{
	font-size: 13px;
}
#control {
	display: none;
	position: fixed;
	top: 40%;
	right: 30px;
	width: 66px;
	z-index: 1;
}
#control li{
	margin-bottom: 16px;
}
#control li a{
	color: #bec7c5;
	display: block;
	position: relative;
	font-size: 13px;
	text-decoration: none;
}
#control li a.on{
	color: #fff;
}
#control li a:after{
	background: #bec7c5;
	position: absolute;
	content: "";
	top: 2px;
	right: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	display: block;
}
#control li a.on:after{
	background: #e6211a;
}

.spOnly{
	display: none;
}

@media screen and (min-width: 0) and (max-width: 767px)  {
	img{
	max-width: 100%;
	height: auto;
	}
	.spOnly{
		display: block;
	}
	br.spOnly{
		display: inline-block;
	}
	.pcOnly{
		display: none;
	}
	body{
		background: none;
	}
	p{
		font-size: 14px;
		text-align: justify;
	}

	#gnaviArea .navi01 > a {
		height: auto;
		border-bottom: none;
	}
	.title {
		font-size: 24px;
	}
	#breadCrumbSec {
		margin: 10px 20px 20px;
		text-align: left;
	}
	.link a {
		width: 100%;
		border: none;
		box-sizing: border-box;
	}
	.section{
		background: none !important;
		height: auto;
		padding-bottom: 40px
	}
	#section06{
		height: auto;
	}
	.section h2, .section p, .section dl, .section ul{
		padding: 0 20px;
	}	#section01,#section02,#section03,#section04,#section05,#section06,#section07{
		color: #333;
		padding-top: 0;
	}
	.subBox{
		width: auto;
		height: auto;
		
	}
	.section .titleBox{
		background: url(../images/track/bg01.jpg) no-repeat center center / cover;
	}
	#section01 .titleBox{
		padding: 110px 0 140px;
	}
	#section01 .titleBox *{
		margin: auto;
		text-align: center;
	}
	.srcollBtn {
		margin-top: 20px;
	}
	.srcollBtn img{
		width: 80px;
	}
	#section02 .subBox{
		width: 100%;
		margin: 0;
	}
	#section02 .titleBox{
		background-image: url(../images/track/bg02.jpg);
		height: 220px;
	}
	#section03 .titleBox{
		background-image: url(../images/track/bg03.jpg);
	}
	#section04 .titleBox{
		background-image: url(../images/track/bg04.jpg);
	}
	#section05 .titleBox{
		background-image: url(../images/track/bg05.jpg);
	}
	#section06 .titleBox{
		background-image: url(../images/track/bg06.jpg);
	}
	#section02 h2{
		width: 60%;
		margin: 0 auto 30px;
	}
	.titleBox h2{
		max-width: 40%;
	}
	.titleBox{
		margin-bottom: 30px;
	}
	#section03 .titleBox,
	#section04 .titleBox,
	#section05 .titleBox,
	#section06 .titleBox
	{
		padding: 80px 0 60px;
	}
	#section03 .subBox,
	#section04 .subBox,
	#section05 .subBox,
	#section06 .subBox
	{
		padding: 0;
	}
	.chronology dt{
		max-width: 45%;
	}
	#section07 .titleBox{
		background: none;
		margin: 0;
		padding: 30px 0;
	}
	#section07 .titleBox h2{
		max-width:70%;
		margin: auto;
	}
	#section07 .titleBox h2::before {
		background: url("../images/track/ico_arrow02.png") no-repeat center center / 100% auto;
		content: "";
		display: block;
		height: 100px;
		margin: auto;
		width: 15px;
	}
	#section07 .linkList {
		margin-top: 0;
	}
}