@charset "utf-8";

/**********************************************/
/*　/history/
/**********************************************/

/*
# =================================================================
# CCCA年表
# =================================================================
*/

/* Settings -------------------------- */
:root {
	--ccca-dark: #92E679;
	--ccca-light: #E4F8DD;
	--world-dark: #90E3E3;
	--world-light: #DDF8F8;
	--domestic-dark: #EBD679;
	--domestic-light: #F8F3DD;
}

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

/* 凡例 */
ul.legend {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 0.5em;
	margin: 3.0em 0 2.0em;
}
.legend li {
	align-items: center;
	margin: 0;
	padding: 0.8em 1.0em;
	list-style: none;
	place-content: center;
	place-items: center;
}
.legend .ccca {
	background: var(--ccca-light) url(../img/bgicon_ccca.png) no-repeat 100% 100% / 120px auto;
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
.legend .world {
	background: var(--world-light) url(../img/bgicon_world.png) no-repeat 105% 100% / 75px auto;
	text-align: center;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.legend .domestic {
	background: var(--domestic-light) url(../img/bgicon_dom.png) no-repeat 100% 100% / 75px auto;
	text-align: center;
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}



/* 年表 -------------------------- */
.timeline {
	background: url(../img/history_bg.png), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 249, 249, 1) 25%, rgba(255, 255, 255, 1) 50%, rgba(245, 252, 248, 1) 75%, rgba(255, 255, 255, 1) 100%);
	background-repeat: repeat-y;
	background-size: contain;
	position: relative;
	font-size: 14px;
	padding-bottom: 100px;
	
}
  .timeline:before {
		content: '';
		position: absolute;
		height: calc(100% - 80px);
		width: 5px;
		background: #ccc;
		left: 6.5px;
  }
	.timeline:after {
		content: '';
		position: absolute;
		height: 80px;
		width: 5px;
		border-left: dotted #ccc 5px;
		bottom: 0;
		left: 6.5px;
	}

.timeline .year-box {
	padding-block: 40px 20px;
	position: relative;
}

.timeline h2 {
	display: inline-block;
	font-size: 20px;
	line-height: 1.0em;
	color: #777;
	margin: 0;
	padding-inline: 1.3em;
	position: relative;
	top: -20px;
}
	.timeline h2:before {
		content: '';
		position: absolute;
		height: 18px;
		width: 18px;
		margin: 0;
		background: #777;
		border-radius: 100vmax;
		top: 2px;
		left: 0;
	}
.timeline ul,
.timeline li {
	margin: 0;
	list-style: none;
}

.year-box:first-child {
	position: relative;
	top: 50px;
}

/* 記事ブロック ------------------------ */
/* -- Type -- */
li.ccca > h3 { background-color: var(--ccca-dark); }
li.world > h3 { background-color: var(--world-dark); }
li.domestic > h3 { background-color: var(--domestic-dark); }

li.ccca > h3:after { border-color: var(--ccca-dark); }
li.world > h3:after { border-color: var(--world-dark); }
li.domestic > h3:after { border-color: var(--domestic-dark); }

li.ccca > div { background: var(--ccca-light) url(../img/bgicon_ccca.png) no-repeat 100% 100% / 120px auto; }
li.world > div { background: var(--world-light) url(../img/bgicon_world.png) no-repeat 100% 100% / 92px auto; }
li.domestic > div { background: var(--domestic-light) url(../img/bgicon_dom.png) no-repeat 100% 100% / 92px auto; }
/* ---------- */

.year-box > ul > li {
	width: 88%;
	padding: 0 30px 20px;
	position: relative;
	left: 9px;
}
.year-box > ul > li h3 {
	margin: 0;
	padding: 8px 1.8em;
	width: 100%;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.0;
	position: relative;	
}
	.year-box > ul > li > h3:after {
		content: '';
		width: 0px;
		height: 0px;
		border-bottom-width: 30.0px;
		border-bottom-style: solid;
		border-left: 30.0px solid transparent;
		position: absolute;
		left: -29.7px;
		top: 0;
}
.year-box > ul > li a,
.year-box > ul > li a:visited {
	color: inherit;
	text-decoration: underline 1px var(--black);
	text-underline-offset: 2px;
}
.year-box > ul > li a:hover {
	text-decoration: none;
}
.year-box > ul > li div {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 3.8lh;
	padding: 1.2em 1.8em;
}
.year-box > ul > li div > * {
	margin: 0;
	padding: 0;
	line-height: inherit;
}

/****************************/
/*レスポンシブ
/****************************/
@media (min-width: 640px) {
	.timeline-wrap {
		/* padding-top: 100px; */
		position: relative;
	}
	.timeline {
		font-size: 16px;
	}
	.timeline:before {
		left: calc(50% - 2.5px);
	}
	.timeline:after {
		left: calc(50% - 2.5px);
	}
	.timeline .year-box {
		padding-block: 48px;
	}
	.timeline h2 {
		font-size: 30px;
		padding-inline: 1.0em;
		position: absolute;
		top: 0;
		right: calc(50% - 9px);
	}
		.timeline h2:before {
			top: 8px;
			left: auto;
			right: 0;
		}
/* 記事ブロック */
	.year-box > ul > li {
		width: 40%;
		min-width: 300px;
		position: relative;
		left: calc(50% + 2.5px);
	}
	.year-box > ul > li h3 {
		padding: 7px 1.0em;
		font-size: 16px;
	}
	.year-box > ul > li div {
		padding: 1.0em;
	}
	.year-box > ul > li.ccca {
		position: relative;
		left: min(10%, calc(50% - 300px));
	}
		.year-box > ul > li.ccca h3:after {
			border-bottom-width: 30px;
			border-bottom-style: solid;
			border-right: 30px solid transparent;
			border-left: none;
			left: auto;
			right: -29.7px;
		}
/* 記事の位置移動 */
	.t120min { margin-top: -120px !important; }
	.use1 { margin-top: calc(-1 * var(--li-height)) !important; }

  li[id^="next"] {
    margin-top: var(--prev-half-height, 0px);
  }

	
/* 凡例 */
	ul.legend {
		grid-template-rows: 1fr;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 10px;
		font-size: 14px;
		left: var(--container-size);
		width: calc(100vw - (var(--container-size) * 2));
		max-width: 1226px;
		z-index: 100;
	}

	.legend .ccca {
		grid-column: 1 / 5;
		grid-row: 1 / 2;
	}
	.legend .world {
		grid-column: 7 / 10;
		grid-row: 1 / 2;
	}
	.legend .domestic {
		grid-column: 10 / 13;
		grid-row: 1 / 2;
	}

}

@media (max-width: 360px) {
	/* 記事ブロック */
	.year-box > ul > li {
		width: 100%;
	}
	.year-box > ul > li h3,
	.year-box > ul > li div {
		font-size: 12px;
	}
	.year-box > ul > li h3:after {
		border-bottom-width: 28px;
		border-left: 28px solid transparent;
		left: -28px;
	}
}

@media (min-width: 960px) {
	ul.legend {
		grid-template-rows: 1fr;
		grid-template-columns: repeat(12, 1fr);
		column-gap: 10px;
		font-size: 14px;
		left: calc(var(--side-width) + var(--container-size));
		width: 100%;
		margin: 50px 0;
		max-width: 1226px;
		z-index: 100;
	}
}