@charset "utf-8";
/* CSS Document */
/*============================
  沿革グリッドここから
==============================*/
/* 沿革アイテム配置ここから */
.history-grid p {
	margin: 0;
}

.history-grid div {
	margin: 0;
}

.history-grid img {
	width: 120px;
	height: auto;
}

.history-grid a {
	font-weight: bold;
}

/* 棒デザイン */
.history-grid-stick {
	grid-column: 3;
	grid-row: 1 / -1;
	border-left: 3px solid var(--primary-color);
	justify-self: center;
	height: 100%;
}

/* ●デザイン */
.history-grid_cercle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--primary-color);
	justify-self: center;
	top: 10%;
}

/* 吹き出しデザイン */
.history-grid_text {
	position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 1.5rem;
    border: 2px solid #eee;
    border-radius: 8px;
    background-color: #eee;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.history-grid_text::before {
	content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent #eee transparent transparent;
    translate: -100% -50%;
}

.history-grid_text::after {
	content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 7.8px 15.5px 7.8px 0;
    border-color: transparent #efefef transparent transparent;
    translate: -100% -50%;
}

.history-grid {
	display: grid;
	position: relative;
	grid-template:
		". . . . . ." 16px
		"history-2000 . cercle-2000 . . text-2000" auto
		". . . . . ." 32px
		"history-2002 . cercle-2002 . . text-2002" auto
		". . . . . ." 32px
		"history-2006 . cercle-2006 . . text-2006" auto
		". . . . . ." 32px
		"history-2007 . cercle-2007 . . text-2007" auto
		". . . . . ." 32px
		"history-2011 . cercle-2011 . . text-2011" auto
		". . . . . ." 32px
		"history-2012 . cercle-2012 . . text-2012" auto
		". . . . . ." 32px
		"history-2013 . cercle-2013 . . text-2013" auto
		". . . . . ." 32px
		"history-2014 . cercle-2014 . . text-2014" auto
		". . . . . ." 32px
		"history-2015 . cercle-2015 . . text-2015" auto
		". . . . . ." 32px
		"history-2016 . cercle-2016 . . text-2016" auto
		". . . . . ." 32px
		"history-2018 . cercle-2018 . . text-2018" auto
		". . . . . ." 32px
		"history-2019 . cercle-2019 . . text-2019" auto
		". . . . . ." 32px
		"history-2021 . cercle-2021 . . text-2021" auto
		". . . . . ." 32px
		"history-2022 . cercle-2022 . . text-2022" auto
		". . . . . ." 32px
		"history-2023 . cercle-2023 . . text-2023" auto
		/ auto 8px 32px 8px 16px auto;
	align-items: center;
}
/* 沿革アイテム配置ここまで */

/* 2000 */
.history-grid_2000 {
	grid-area: history-2000;
	justify-self: center;
	align-self: center;
}

.history-grid_cercle-2000 {
	grid-area: cercle-2000;
}

.history-grid_text-2000 {
	grid-area: text-2000;
}

/* 2002 */
.history-grid_2002 {
	grid-area: history-2002;
	justify-self: center;
	align-self: center;
}

.history-grid_cercle-2002 {
	grid-area: cercle-2002;
}

.history-grid_text-2002 {
	grid-area: text-2002;
}

/* 2006 */
.history-grid_2006 {
	grid-area: history-2006;
	justify-self: center;
}

.history-grid_cercle-2006 {
	grid-area: cercle-2006;
}

.history-grid_text-2006 {
	grid-area: text-2006;
}

/* 2007 */
.history-grid_2007 {
	grid-area: history-2007;
	justify-self: center;
}

.history-grid_cercle-2007 {
	grid-area: cercle-2007;
}

.history-grid_text-2007 {
	grid-area: text-2007;
}

/* 2011 */
.history-grid_2011 {
	grid-area: history-2011;
	justify-self: center;
}

.history-grid_cercle-2011 {
	grid-area: cercle-2011;
}

.history-grid_text-2011 {
	grid-area: text-2011;
}

/* 2012 */
.history-grid_2012 {
	grid-area: history-2012;
	justify-self: center;
}

.history-grid_cercle-2012 {
	grid-area: cercle-2012;
}

.history-grid_text-2012 {
	grid-area: text-2012;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

.history-grid_img-2012 {
	display: grid;
	justify-content: start;
	grid-auto-flow: column;
	grid-column-gap: 16px;
}

/* 2013 */
.history-grid_2013 {
	grid-area: history-2013;
	justify-self: center;
}

.history-grid_cercle-2013 {
	grid-area: cercle-2013;
}

.history-grid_text-2013 {
	grid-area: text-2013;
}

/* 2014 */
.history-grid_2014 {
	grid-area: history-2014;
	justify-self: center;
}

.history-grid_cercle-2014 {
	grid-area: cercle-2014;
}

.history-grid_text-2014 {
	grid-area: text-2014;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

/* 2015 */
.history-grid_2015 {
	grid-area: history-2015;
	justify-self: center;
}

.history-grid_cercle-2015 {
	grid-area: cercle-2015;
}

.history-grid_text-2015 {
	grid-area: text-2015;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

/* 2016 */
.history-grid_2016 {
	grid-area: history-2016;
	justify-self: center;
}
.history-grid_cercle-2016 {
	grid-area: cercle-2016;
}

.history-grid_text-2016 {
	grid-area: text-2016;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

/* 2018 */
.history-grid_2018 {
	grid-area: history-2018;
	justify-self: center;
}

.history-grid_cercle-2018 {
	grid-area: cercle-2018;
}

.history-grid_text-2018 {
	grid-area: text-2018;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

/* 2019 */
.history-grid_2019 {
	grid-area: history-2019;
	justify-self: center;
}

.history-grid_cercle-2019 {
	grid-area: cercle-2019;
}

.history-grid_text-2019 {
	grid-area: text-2019;
}

/* 2021 */
.history-grid_2021 {
	grid-area: history-2021;
	justify-self: center;
}

.history-grid_cercle-2021 {
	grid-area: cercle-2021;
}

.history-grid_text-2021 {
	grid-area: text-2021;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}

/* 2022 */
.history-grid_2022 {
	grid-area: history-2022;
	justify-self: center;
}

.history-grid_cercle-2022 {
	grid-area: cercle-2022;
}

.history-grid_text-2022 {
	grid-area: text-2022;
}

/* 2023 */
.history-grid_2023 {
	grid-area: history-2023;
	justify-self: center;
}

.history-grid_cercle-2023 {
	grid-area: cercle-2023;
}

.history-grid_text-2023 {
	grid-area: text-2023;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 16px;
}
/*============================
  沿革グリッドここまで
==============================*/