@charset "UTF-8";

header #nav_menu > ul > li:nth-child(3) > a::before{
	background: var(--mClr2);
}


.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.jost {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


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

	headline

-----------------------------------*/
#headline {
	background-image: url(../img/history/mv.jpg);
}
#headline h1::before {
	content: "HISTORY";
}

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

	history pin_block

-----------------------------------*/
.sp600{
	display: none;
}
.contents_inner.history{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	overflow: visible;
	padding-bottom: 80px;
}
.timeline{
	position: fixed;
	top: 55%;
	left: clamp( calc(5vw + 10px),
		         /* 画面幅が狭いとき（inner=90%） */
		         calc((100vw - 1200px) / 2 + 10px),
		         /* 画面幅が広いとき（inner=1200px） */
		         calc((100vw - 1200px) / 2 + 10px) /* 最大値（同じでOK） */ );
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
	padding-right: 30px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	gap: 30px;
}
ul.timeline li{
	position: relative;
}
/* 丸（○） */
.timeline .dot {
	display: block;
	width: 9px;
	height: 9px;
	background-color: #FFFFFF;
	border: 1px solid #00A07D;
	border-radius: 50%;
	position: absolute;
	right: -24px;
	top: -5px;
	transition:	background-color 0.3s ease;
}
/* クリックで色が変わる例 */ 
.timeline .dot.active {
	background-color: #00A07D;
}
.timeline .dot.view {
	background-color: #00A07D;
}
/* ○と○をつなぐ縦線（li の擬似要素で描く） */
.timeline li::after {
	content: "";
	position: absolute;
	right: -22px;
	/* 丸の中心に合わせる */
	top: 2px;
	/* 丸の下から開始 */
	width: 4px;
	height: 40px;
	background: #00A07D;
	z-index: -1;
}
.timeline li:last-child::after{
	content: none;
}
ul.timeline li span {
    cursor: pointer;
	transition: 0.2s;
}
ul.timeline li span:hover {
	color: #00A07D;
		transition: 0.2s;
}
ul.timeline li .dot.view + span {
    color: #00A07D;
}
ul.timeline li span{
	color: #979797;
	font-family: "Jost", sans-serif;
  	font-size: 15px;
  	font-weight: 500;
}
.timeline.active {
	opacity: 1;
	pointer-events: auto;
}
.timeline.hide {
	opacity: 0;
	pointer-events: none;
}
.timeline-line {
	flex: 1;
	height: 42px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	margin-bottom: 30px;
	position: relative;
}
.timeline-line .box01{
	width: 35%;
	height: 100%;
	border-bottom: 2px solid #00A07D;
}
.timeline-line .box02{
	width: 100px;
	height: 40px;
	position: relative;
}
.timeline-line .box02 span{
	width: 107.7px;
	height: 2px;
	background-color: #00A07D;
	position: absolute;
	bottom: 20px;
	left: -4px;
	transform: rotate(-21.8deg);

}
.timeline-line .box03{
	width: calc(100% - 100px - 35%);
	height: 100%;
	border-top: 2px solid #00A07D;
	position: relative;
}
.timeline-line .box03::after{
	content: "";
	position: absolute;
	top: -2px;
	left: 100%;
	height: 2px;
	background-color: #00A07D; /* inner の右端 → 画面右端までの距離 */
	width: clamp(10vw, calc((100vw - 1200px) / 2), 9999px);
	z-index: 10;
}
/* 画面幅が1200px以上 @media (min-width: 1200px) { .item::after { width: calc((100vw - 1200px) / 2); } } 画面幅が1200px未満 @media (max-width: 1199px) { .item::after { width: 10vw; } } */

.corporate-history-item{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	gap: 28px;
	margin-bottom: 52.3px;
	scroll-margin-top: 200px; /* 固定ヘッダーの高さ＋余白 */
}
.year-box{
	width: 260px;
	height: auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	gap: 10px;
	margin-left: 190px;
	margin-top: 20px;
}
.year_01{
	width: fit-content;
	font-family: "IBM Plex Sans JP", sans-serif;
  	font-weight: 700;
  	font-size: 24px;
	line-height: 2;
	color: #00A07D;
}
.year_02{
	width: fit-content;
	font-family: "IBM Plex Sans JP", sans-serif;
  	font-weight: 700;
  	font-size: 60px;
	color: #C5E1DA;
}
.item_wrap{
	flex: 1;
}
.item_wrap.no_img{
	padding-bottom: 20px;
}
.item_wrap .arrow,.item_wrap .item_img, .item_wrap .item_img02, .item_wrap .item_img03{
	margin-left: 40px;
}
p.arrow{
	font-family: "IBM Plex Sans JP", sans-serif;
  	font-weight: 600;
  	font-size: 18px;
	line-height: 2;
	padding-left: 15px;
	position: relative;
	margin-bottom: 28px;
}
p.arrow02{
	margin-top: -20px;
}

p.arrow::before{
	content: "";
	width: 12px;
	height: 10px;
	position: absolute;
	top: 9px;
	left: 0;
	background: url(../img/history/arrow.svg) no-repeat center center / contain;
}
.item_img img{
	width: 293px;
	height: 174.09px;
	border-radius: 10px;
	object-fit: cover;
	margin-bottom: 10px;
}
.item_img02 img{
	width: 199px;
	height: 281px;
	border-radius: 10px;
	object-fit: cover;
	margin-bottom: 10px;
}
.item_img03 img{
	width: 231px;
	height: 212px;
	border-radius: 10px;
	object-fit: cover;
	margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
	.year-box{
		margin-left: 100px;
	}
}
@media screen and (max-width: 840px) {
	.year-box{
		width: 180px;
	}
	.year_02{
	  	font-size: 40px;
		color: #C5E1DA;
	}
}
@media screen and (max-width: 600px) {
	.timeline.active {
		display: none;
	}
	.timeline-line{
		display: none;
	}
	.sp600{
		display: block;
		font-size: 30px;
		padding-left: 30px;
		position: relative;
	}
	.sp600::before{
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #00A07D;
		overflow: hidden;
		position: absolute;
		top: 5px;
		left: 0;
	}
	.corporate-history-item{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		position: relative;
		padding-left: 30px;
		gap: 15px;
		margin-bottom: 30px;
	}
	.corporate-history{
		position: relative;
	}
	.corporate-history::before {
		content: "";
		position: absolute;
		left: 9px; /* ○の中心に合わせる */
		top: 5px;
		width: 2px;
		height: 100%;
		background: #00A07D;
		z-index: 1;
	}
	.corporate-history-item:last-child::before {
		display: none;
	}
	.year-box{
		width: 100%;
		margin-left: 0;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}
	.item_wrap .arrow,.item_wrap .item_img, .item_wrap .item_img02, .item_wrap .item_img03{
		margin-left: 10px;
	}
	p.arrow{
		font-size: 16px;
		margin-bottom: 10px;
	}
	.item_wrap.no_img{
		padding-bottom: 0;
	}
}
@media screen and (max-width: 400px) {
	.contents_inner.history{
		padding-bottom: 50px;
	}
	.sp600{
		font-size: 24px;
		padding-left: 30px;
	}
	.sp600::before{
		content: "";
		width: 15px;
		height: 15px;
		top: 5px;
		left: 2px;
	}
	.year-box{
		margin-top: 10px;
	}
	.year_01{
	  	font-size: 18px;
		line-height: 2;
		color: #00A07D;
	}
	.year_02{
	  	font-size: 28px;
		color: #C5E1DA;
	}
	.corporate-history-item{
		gap: 5px;
		margin-bottom: 20px;
	}
}