@charset "utf-8";

#history-contents,
#history-contents .tab-list a,
.main-content,
.more-content .btn {
	background: #470c19;
}
.main-content svg.btm {
	fill: #470c19;
}
svg.top,
svg.btm {
	position: absolute;
	left: 0;
	width: 100vw;
	height: 6.856vw;
}

#history-contents {
	position: relative;
	color: #fff;
}
#history-contents .section-title {
	pointer-events: none;
	z-index: 98;
	width: 100%;
	text-align: center;
}
#history-contents > .lead {
	margin: 0;
	text-align: center;
}
#history-contents > .lead strong {
	position: relative;
	display: inline-block;
	font-size: 2.8rem;
	font-weight: normal;
}
#history-contents > .lead strong::before,
#history-contents > .lead strong::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	width: 3em;
	border-top: 2px solid #fff;
}
#history-contents > .lead strong::before {
	left: calc(100% + .5em);
}
#history-contents > .lead strong::after {
	right: calc(100% + .5em);
}
@media screen and (min-width: 768px) {
	#history-contents .section-title {
		margin: 40px 0;
	}
	#history-contents > .lead {
		margin-bottom: -40px;
	}
}
@media screen and (max-width: 767px) {
	#history-contents > .lead {
		margin-top: 14vw;
	}
}
@media screen and (max-width: 480px) {
	#history-contents > .lead {
		font-size: 1.2rem;
	}
	#history-contents > .lead strong {
		font-size: 1.8rem;
	}
	#history-contents > .lead strong::before,
	#history-contents > .lead strong::after {
		border-top: 1px solid #fff;
	}
}



/* :::::: tab-list :::::: */
.tab-position,
#history-contents .tab-list {
	position: absolute;
	display: flex;
	margin: 0 0 32px;
}
#history-contents .tab-list li {
	overflow: hidden;
	flex-basis: 25%;
	max-width: 25%;
}
#history-contents .tab-list a {
	display: block;
	position: relative;
}
#history-contents .tab-list a img {
	width: 350px;
	opacity: .5;
	transition: opacity .3s;
}
#history-contents .tab-list li.active img,
#history-contents .tab-list a:hover img {
	opacity: 1;
}
#history-contents .tab-list .year {
	position: absolute;
	width: 190px;
	height: 64px;
	left: -2px;
	bottom: -2px;
	fill: #fff;
	opacity: .3;
	transition: width .3s, height .3s, opacity .3s;
}
#history-contents .tab-list a:hover .year {
	opacity: .5;
}
#history-contents .tab-list li.active .year {
	opacity: 1;
}
/*body.navFixed #history-contents .tab-list {
	z-index: 97;
	position: fixed;
	top: 0;
	width: 100%;
}*/
@media screen and (min-width: 1400px) {
	#history-contents .tab-list a img {
		width: 100%;
	}
}
@media screen and (min-width: 768px) {
	.tab-position,
	#history-contents .tab-list {
		top: 32px;
		left: 0;
		width: 100%;
	}
	#history-contents .tab-list a {
		display: block;
		position: relative;
		width: 100%;
		height: 150px;
		transition: height .3s;
	}
	/*body.navFixed #history-contents .tab-list a {
		height: 50px;
	}*/
	#history-contents .tab-list img {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	/*body.navFixed #history-contents .tab-list .year {
		width: 120px;
		height: 40px;
	}*/
}
@media screen and (max-width: 767px) {
	#history-contents .tab-list img {
		max-width: 100%;
	}
	#history-contents .tab-list .year {
		width: 100%;
		height: 50%;
	}
}



/* :::::: section :::::: */
.history-section {
	padding: 32px 0;
}
#alphard-2017.history-section {
	padding-bottom: 144px;
}
.history-section .inner {
	position: relative;
	max-width: 1032px;
	height: 100%;
	margin: 40px auto;
	padding: 24px 16px;
}
.history-section h2,
.history-section h3,
.history-section p {
	z-index: 3;
	position: relative;
	font-weight: normal;
}
.history-section h3 {
	margin: 1.4em 0 0;
	font-size: 2.6rem;
	line-height: 1.4;
}
.history-section p {
	margin-top: .7em;
}
@media screen and (max-width: 767px) {
	/*#alphard-2008.history-section {
		margin-top: 80px;
	}*/
	.history-section .inner {
		display: flex;
		flex-direction: column;
		margin: 40px 0 0;
	}
	.history-section h2 {
		margin: -7vw 0 .5em;
	}
}



/* :::::: main :::::: */
.main-content {
	position: relative;
}
.main-content svg.btm {
	top: -1px;
}
.main-content h2 .year {
	width: 270px;
	height: 90px;
	fill: #fff;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
	font-size: 12rem;
	line-height: 1;
	font-family: 'Roboto', sans-serif;
}
.main-content h2 .concept {
	display: block;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: normal;
}
.main-content h2 .concept span {
	display: inline-block;
	font-size: 80%;
}
/* figure */
.main-content figure {
	z-index: 2;
	position: relative;
}
.main-content figure img {
	max-width: 100%;
}
/* bg*/
.main-content .bg-wrap,
.main-content .bg {
	position: absolute;
	left: 0;
	width: 100%;
}
.main-content .bg-wrap {
	overflow: hidden;
	top: 0;
	height: calc(100% + 40px);
}
.main-content .bg-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/history_bg_dot.svg) center / 8px 8px;
}
#alphard-2017 .main-content .bg-wrap::after {
	display: none;
}
.main-content .bg {
	top: 0;
	left: 0;
	height: 140%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
	.main-content {
		height: 400px;
	}
	.main-content p {
		max-width: 40%;
	}
	.main-content figure {
		position: absolute;
		max-width: 54%;
		right: 0;
		bottom: -70px;
	}
	#alphard-2017 .main-content figure {
		bottom: -96px;
	}
}
@media screen and (max-width: 767px) {
	.main-content h2 .year {
		width: 180px;
		height: 60px;
	}
	.main-content figure {
		margin-bottom: .5em;
		padding: 0 16px;
		text-align: center;
	}
	.main-content h3,
	.main-content p {
		order: 1;
	}
	.main-content h3 {
		margin-top: 0;
	}
	.main-content p {
		margin-bottom: 0;
	}
	.main-content .bg-wrap {
		height: 104%;
	}
}
@media screen and (max-width: 480px) {
	.main-content h2 .concept {
		font-size: 1.6rem;
	}
	.history-section h3 {
		font-size: 2rem;
	}
	.history-section p {
		font-size: 1.4rem;
	}
}



/* :::::: more :::::: */
.more-content {
	z-index: 1;
	position: relative;
	background: #202020;
}
#alphard-2017 .more-content {
	background: #fff;
}
.more-content svg.top,
.more-content svg.btm {
	fill: #202020;
}
.more-content svg.top {
	top: 1px;
	transform: translateY(-100%);
}
.more-content svg.btm {
	bottom: 1px;
	transform: translateY(100%);
}
#alphard-2017 .more-content svg.top,
#alphard-2017 .more-content svg.btm {
	fill: #fff;
}
.more-content h3 {
	margin-top: 0;
}
.more-content p {
	margin-bottom: 24px;
}
/* btn */
.more-content .btn {
	z-index: 1;
	position: relative;
	width: 100%;
	max-width: 250px;
	padding: 1em;
	color: #fff;
	text-align: center;
	border: 1px solid #eee;
}
.more-content .btn::before {
	content: "";
	position: absolute;
	top: calc(50% - .3em);
	left: 16px;
	width: .6em;
	height: .6em;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	transform: rotate(-45deg);
}
/* carousel */
.more-content .carousel {
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	line-height: 0;
}
.more-content .carousel .item {
	margin: 0 6px;
	width: 34%;
	min-width: 247px;
}
.more-content .carousel .item img {
	max-width: 100%;
}
@media screen and (min-width: 1200px) {
	.more-content .carousel .item {
		margin: 0 6px;
	}
	.more-content .carousel .item img {
		width: 100%;
	}
}
@media print, (min-width: 768px) {
	.more-content .btn {
		position: absolute;
		bottom: -86px;
		left: 16px;
	}
}
@media screen and (max-width: 767px) {
	.more-content .btn {
		margin: 24px auto -86px;
	}
	.more-content .inner {
		margin-top: 24px;
	}
}
@media screen and (max-width: 480px) {
	.more-content .carousel .item {
		margin: 0 2px;
	}	
}



/* :::::: animation :::::: */
.main-content .year,
.main-content .concept,
.main-content h3,
.main-content p,
.more-content h3,
.more-content p {
	opacity: 0;
	transform: translateX(-100px);
}
.main-content .bg {
	opacity: 0;
}
.main-content figure img {
	opacity: 0;
	transform: translateX(100px);
}
.history-section.active .main-content .year,
.history-section.active .main-content .concept,
.history-section.active .main-content h3,
.history-section.active .main-content p,
.history-section.active .more-content h3,
.history-section.active .more-content p,
.history-section.active .main-content figure img {
	opacity: 1;
	transform: none;
	transition: opacity .6s, transform 1s cubic-bezier(.2,1,.2,1);
}
.history-section.active .main-content .bg {
	opacity: 1;
	transition: opacity .6s;
}
.history-section.active .main-content .year    { transition-delay: .3s; }
.history-section.active .main-content .concept { transition-delay: .35s; }
.history-section.active .main-content figure img { transition-delay: .4s; }
.history-section.active .main-content h3       { transition-delay: .4s; }
.history-section.active .main-content p        { transition-delay: .5s; }
.history-section.active .more-content h3       { transition-delay: .6s; }
.history-section.active .more-content p        { transition-delay: .7s; }