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

	- mv
	+ content
		- sec01
		- sec02

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

/*----------------------------------------
	font-family setting
-----------------------------------------*/
.roboto {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
}

/*----------------------------------------
	mv
-----------------------------------------*/
#mv {
	background: #62b1d9 url("../img/c_mv_bg01.jpg") no-repeat right top;
	background-size: 1320px auto;
}

@media screen and (max-width: 767px) {
	#mv {
		background-size: auto 100%;
	}
}

/*----------------------------------------
	content
-----------------------------------------*/
#content {
	padding: 59px 0 100px;
}

@media screen and (max-width: 767px) {
	#content {
		padding: 34px 0 85px;
	}
}
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.8s, transform 0.8s;
}
.fade.fade-on {
	opacity: 1;
	transform: translateY(0);
}

/*----------------------------------------
	sec01
-----------------------------------------*/
#content > #sec01 {
	margin-bottom: 55px;
}
@media screen and (max-width: 767px) {
	#content > #sec01 {
		margin-bottom: 30px;
	}
}

/*----------------------------------------
	sec02
-----------------------------------------*/
#content > #sec02 {
	position: relative;
	margin-bottom: 140px;
	padding-bottom: 30px;
}
#content > #sec02 .box {
	position: relative;
}
#content > #sec02 .box > div {
	display: flex;
	position: relative;
	width: 100%;
	margin-bottom: 100px;
	padding-top: 100px;
}
#content > #sec02 .box > div.type01 .box-inner { background: #eaf6f9; }
#content > #sec02 .box > div.type02 .box-inner { background: #f3f7eb; }
#content > #sec02 .box > div.type03 .box-inner { background: #fff6e2; }
#content > #sec02 .box > div.type04 .box-inner { background: #f7eef0; }
#content > #sec02 .box > div.type05 .box-inner { background: #f1eff8; }
#content > #sec02 .box > .box01 {
	padding-top: 200px;
}
#content > #sec02 .box-inner {
	position: relative;
	width: calc(50% - 55px);
	padding: 40px 3.572% 20px;
	background: #ddd;
	box-sizing: border-box;
}
#content > #sec02 .box > div:nth-child(odd) .box-inner {
	margin: 0 0 0 auto;
}
#content > #sec02 .box-head {
	margin: 0 0 10px;
}
#content > #sec02 .box-head_year {
	margin: 0 0 8px;
	font-size: 6.0rem;
}
#content > #sec02 .box > div.type01 .box-head_year { color: #1fb8df; }
#content > #sec02 .box > div.type02 .box-head_year { color: #a9cf52; }
#content > #sec02 .box > div.type03 .box-head_year { color: #f6ab00; }
#content > #sec02 .box > div.type04 .box-head_year { color: #ec6d81; }
#content > #sec02 .box > div.type05 .box-head_year { color: #8f82bc; }
#content > #sec02 .box-head_year > span {
	font-size: 5.0rem;
}
#content > #sec02 .box-head_ttl span {
	display: block;
}
#content > #sec02 .box-pic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	top: 0;
	right: calc(-100% - 110px);
	width: 100%;
	height: 100%;
	padding: 0 1.983%;
	box-sizing: border-box;
}
#content > #sec02 .box-pic figure {
	width: 100%;
	min-height: 0%;
}
#content > #sec02 .box > div:nth-child(odd) .box-pic {
	left: calc(-100% - 110px);
}
#content > #sec02 .box-pic ul {
	margin-top: 15px;
	counter-reset: section;
	list-style-type: none;
}
#content > #sec02 .box-pic ul > li {
	text-indent: -26px;
	padding-left: 26px;
}
#content > #sec02 .box-pic ul > li::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: text-top;
	width: 16px;
	height: 16px;
	margin: 0 10px 0 0;
	background: #ddd;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-indent: 0;
	counter-increment: section;
	content: counters(section, "-") "";
}
#content > #sec02 .box > div.type01 .box-pic ul > li::before { background: #1fb8df; }
#content > #sec02 .box > div.type02 .box-pic ul > li::before { background: #a9cf52; }
#content > #sec02 .box > div.type03 .box-pic ul > li::before { background: #f6ab00; }
#content > #sec02 .box > div.type04 .box-pic ul > li::before { background: #ec6d81; }
#content > #sec02 .box > div.type05 .box-pic ul > li::before { background: #8f82bc; }
#content > #sec02 .box06 .box-pic ul > li::before {
	content: none;
}
#content > #sec02 .box-txt p {
	margin-bottom: 26px;
}
#content > #sec02 .box-txt p > a {
	position: relative;
	padding-left: 15px;
	text-decoration: underline;
}
#content > #sec02 .box-txt p > a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	border-width: 6px 0 6px 6px;
	border-style: solid;
}
#content > #sec02 .box > div.type01 .box-txt p > a::before { border-color: transparent transparent transparent #1fb8df; }
#content > #sec02 .box > div.type02 .box-txt p > a::before { border-color: transparent transparent transparent #a9cf52; }
#content > #sec02 .box > div.type03 .box-txt p > a::before { border-color: transparent transparent transparent #f6ab00; }
#content > #sec02 .box > div.type04 .box-txt p > a::before { border-color: transparent transparent transparent #ec6d81; }
#content > #sec02 .box > div.type05 .box-txt p > a::before { border-color: transparent transparent transparent #8f82bc; }
#content > #sec02 .box-line {
	position: absolute;
	top: -40px;
	left: 99px;
	height: 70px;
	border-top: 2px solid #0065b2;
	border-left: 2px solid #0065b2;
}
#content > #sec02 .box > div:nth-child(odd) .box-line {
	left: auto;
	right: calc(100% - 101px);
	border-right: 2px solid #0065b2;
	border-left: none;
}
#content > #sec02 .box .box-line > span {
	display: block;
	position: absolute;
	bottom: 100%;
	right: 0;
	width: 2px;
	height: 61px;
	background: #0065b2;
}
#content > #sec02 .box01 .box-line > span {
	height: 161px;
}
#content > #sec02 .box .box-line > span::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -3px;
	width: 8px;
	height: 8px;
	background: #0065b2;
}
#content > #sec02 .box > div:nth-child(odd) .box-line > span {
	left: 0;
	right: auto;
}

#content > #sec02 .yaerline {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#content > #sec02 .yaerline > div {
	position: relative;
	width: 10px;
	height: 100%;
	margin: 0 2.5px;
	background: #cccccc;
}
#content > #sec02 .yaerline > div > span {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 130px;
}
#content > #sec02 .yaerline > div:nth-child(1) > span { background: #1fb8df;}
#content > #sec02 .yaerline > div:nth-child(2) > span { background: #a9cf52;}
#content > #sec02 .yaerline > div:nth-child(3) > span { background: #f6ab00;}
#content > #sec02 .yaerline > div:nth-child(4) > span { background: #ec6d81;}
#content > #sec02 .yaerline > div:nth-child(5) > span { background: #8f82bc;}
#content > #sec02 .yaerline > div::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	border-width: 35px 5px 0 5px;
	border-style: solid;
}
#content > #sec02 .yaerline > div:nth-child(1)::after {
	top: calc(100% + 0px);
	border-width: 35px 0 0 10px;
	border-color: #1fb8df transparent transparent transparent;
}
#content > #sec02 .yaerline > div:nth-child(2)::after {
	top: calc(100% + 25px);
	border-width: 35px 0 0 10px;
	border-color: #a9cf52 transparent transparent transparent;
}
#content > #sec02 .yaerline > div:nth-child(3)::after {
	top: calc(100% + 35px);
	border-color: #f6ab00 transparent transparent transparent;
}
#content > #sec02 .yaerline > div:nth-child(4)::after {
	top: calc(100% + 25px);
	border-width: 35px 10px 0 0;
	border-color: #ec6d81 transparent transparent transparent;
}
#content > #sec02 .yaerline > div:nth-child(5)::after {
	top: calc(100% + 0px);
	border-width: 35px 10px 0 0;
	border-color: #8f82bc transparent transparent transparent;
}
#content > #sec02 .yaerline > div::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}
#content > #sec02 .yaerline > div:nth-child(2)::before {
	height: 25px;
	background: #a9cf52;
}
#content > #sec02 .yaerline > div:nth-child(3)::before {
	height: 35px;
	background: #f6ab00;
}
#content > #sec02 .yaerline > div:nth-child(4)::before {
	height: 25px;
	background: #ec6d81;
}

/*pc*/
@media screen and (min-width: 768px) {
	#content > #sec02 .box > div.type01 .box-line { width: calc(100% - 75px); }
	#content > #sec02 .box > div.type02 .box-line { width: calc(100% - 60px); }
	#content > #sec02 .box > div.type03 .box-line { width: calc(100% - 45px); }
	#content > #sec02 .box > div.type04 .box-line { width: calc(100% - 30px); }
	#content > #sec02 .box > div.type05 .box-line { width: calc(100% - 15px); }
	#content > #sec02 .box > div:nth-child(odd).type01 .box-line { width: 185px; }
	#content > #sec02 .box > div:nth-child(odd).type02 .box-line { width: 170px; }
	#content > #sec02 .box > div:nth-child(odd).type03 .box-line { width: 155px; }
	#content > #sec02 .box > div:nth-child(odd).type04 .box-line { width: 140px; }
	#content > #sec02 .box > div:nth-child(odd).type05 .box-line { width: 125px; }
	
	#content > #sec02 .box01 .box-pic figure {
		width: calc(100% - 4.95%);
		margin-left: 4.95%;
	}
	#content > #sec02 .box02 .box-pic figure {
		width: calc(100% - 8.455%);
		margin-right: 8.455%;
	}
	#content > #sec02 .box03 .box-pic figure {
		width: calc(100% - 18.765%);
		margin-left: 18.765%;
	}
	#content > #sec02 .box04 .box-pic figure {
		width: calc(100% - 8.455%);
		margin-right: 8.455%;
	}
	#content > #sec02 .box05 .box-pic figure {
		width: calc(100% - 14.23%);
		margin-left: 14.23%;
	}
	#content > #sec02 .box > .box06 {
		margin-bottom: 0;
	}
	#content > #sec02 .box06 .box-pic figure {
		width: calc(100% - 12.58%);
		margin-right: 12.58%;
	}
	#content > #sec02 .box > .box07 {
		margin-bottom: 0;
	}
	#content > #sec02 .box08 .box-pic figure {
		width: calc(100% - 34.022%);
		margin-right: 34.022%;
	}
}
/*sp*/
@media screen and (max-width: 767px) {
	#content > #sec02 {
		margin-bottom: 130px;
	}
	#content > #sec02 .box > div {
		margin-bottom: 70px;
		padding-top: 70px;
	}
	#content > #sec02 .box > .box01 {
		padding-top: 120px;
	}
	#content > #sec02 .box > .box02 {
		z-index: 100;
	}
	#content > #sec02 .box-inner {
		width: 100%;
		height: auto;
		padding: 35px 20px 10px;
	}
	#content > #sec02 .box-head {
		margin: 0 0 15px;
	}
	#content > #sec02 .box-head_year {
		margin: 0 0 5px;
	}
	#content > #sec02 .box-pic {
		align-items: flex-start;
		position: static;
		height: auto;
		margin: 0 0 25px;
		padding: 0;
	}
	#content > #sec02 .box-pic ul > li {
		margin-top: 2px;
	}
	#content > #sec02 .box > div .box-line {
		top: auto;
		bottom: calc(100% - 28px);
		width: 2px;
		height: 0;
		background: #0065b2;
	}
	#content > #sec02 .box > div:nth-child(n) .box-line {
		border: none;
	}
	#content > #sec02 .box > div .box-line > span {
		bottom: 100%;
		height: 98px;
	}
	#content > #sec02 .box > .box01 .box-line > span {
		height: 148px;
	}
	#content > #sec02 .box > .box03 .box-line {
		height: 37px;
	}
	#content > #sec02 .box > div.type01 .box-line { left: calc(50% - 31px); }
	#content > #sec02 .box > div.type02 .box-line { left: calc(50% - 16px); }
	#content > #sec02 .box > div.type03 .box-line { left: calc(50% - 1px); }
	#content > #sec02 .box > div.type04 .box-line { left: calc(50% + 14px); }
	#content > #sec02 .box > div.type05 .box-line { left: calc(50% + 29px); }
	#content > #sec02 .yaerline > div > span {
		padding-bottom: 100px;
	}
}

/* bnr */
.bnr {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 60px auto 0;
}
.bnr a {
	width: calc((100% - 35px)/2);
}
.bnr a:first-child {
	margin-right: 40px;
}
.bnr figure img {
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.bnr figure img {
	max-width: none;
	margin-top: 13px;
}
.bnr a:hover figure img {
	opacity: 0.8;
}
@media screen and (max-width: 767px) {
	.bnr {
		margin: 40px 0 0;
	}
	.bnr,
	.bnr a {
		display: block;
	}
	.bnr a {
		width: 100%;
	}
	.bnr a:first-child {
		margin: 0 0 24px 0;
	}
	.bnr figure img {
		margin-top: 8px;
	}
}