@charset "utf-8";
.history {
  position: relative;
  margin: 3em auto;
  padding-bottom: 2em;
}
.history:before {
  position: absolute;
  top: 0px;
  top: -30px;
  left: 45px;
  width: 3px;
  height: 100%;
  content: '';
  background: #CED4E9;
}
.history .timeline_item {
  margin: 0px 0px 0px 80px;
}
.history .timeline_item .time_date .time {
  font-family: serif;
  font-size: 6em;
  font-weight: bold;
  position: relative;
  margin: 0;
  letter-spacing: 3px;
  color: rgba(22,160,232,0.2);
}
.history .timeline_item .time_date .time:before {
  position: absolute;
  top: 50%;
  left: -42px;
  width: 10px;
  height: 10px;
  content: '';
  transform: rotate(45deg);
  border: 3px solid #396DB5;
  background: #fff;
}
.history .timeline_item .time_date .flag {
  font-size: 1.5em;
  font-weight: bold;
  margin: -146px 0 0 0;
  color: #396DB5;
}
.history .timeline_item .desc {
  font-size: 1em;
  line-height: 20px;
  margin-top: -20px;
  padding-left: 20px;
 /* margin-bottom: 60px;*/
}

.gallery .img_w {
    display: inline;
    width: calc((100% - 90px) / 2);
    height: auto;
    margin: 0 0 45px 30px;
}

/*3の倍数番目marginつける*/
.gallery figure:nth-child(3n).custom-margin {
    margin: 0 0 45px 30px;
}

/*NEWS*/

.contents_news::after {
	border-right: 50vw solid #b5e8ff;
	border-bottom: 30px solid #b5e8ff;
}

#news span.cate-red, #news h3 span.cate-red {
	background: #ed1a1a;
}

/*ダイヤモンドカラー*/
.diamond-color-d {
    font-size: 3rem;
    color: #1A4F6D;
    background: linear-gradient(180deg, #ffffff, #1A4F6D, #1A4F6D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contents h2.new-before-color-d:before{
    content: '';
    position: absolute;
    bottom: -15px; /* 必要に応じて調整 */
    display: inline-block;
    width: 100px;
    height: 5px;
    background: linear-gradient(135deg, #1A4F6D, #ffffff, #1A4F6D);
    border-radius: 2px;
}

/*プラチナカラー*/
.platina-color-p {
    font-size: 3rem;
    color: #E5E4E2;
    background: linear-gradient(135deg, #B0B0B0, #DAD5CF, #B0B0B0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contents h2.new-before-color-p:before {
    background: linear-gradient(135deg, #B0B0B0, #DAD5CF, #B0B0B0);
}


/*ゴールドカラー*/
.gold-color-p {
    font-size: 3rem;
    color: #CB9B0C;
    background: linear-gradient(183deg, #FFFCD1, #FBCF00, #CB9B0C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

#contents h2.new-before-color-g:before {
    background: linear-gradient(135deg, #FFFCD1, #FBCF00, #CB9B0C);
}

/*シルバーカラー*/
.silver-color-p {
    font-size: 3rem;
    color: #C0C0C0;
    background:#A8A8A8;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contents h2.new-before-color-s:before {
    background:#A8A8A8;
}

/*ブロンズカラー*/
.bronze-color-p {
    font-size: 3rem;
    background:#CD7F32;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contents h2.new-before-color-b:before {
    background:#CD7F32;
}

/*サプライヤーカラー*/
.suppliers-color-p {
    font-size: 3rem;
    background:#6C757D;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contents h2.new-before-color-sp:before {
    background:#6C757D;
}


.history .timeline_item {
  display: flex;
  align-items: center; /* 中央揃え */
  justify-content: space-between; /* 左右に配置 */
  gap: 20px; /* 要素間の間隔 */

  border-radius: 8px; /* 角丸（必要に応じて） */
}

.history .timeline_item .time_date {
  flex: 1; /* 左側のテキスト部分 */
}

.history .timeline_item .desc {
  flex: 2; /* 説明部分 */
}

.history .timeline_item img {
  flex: 1; /* 画像を適切に調整 */
  max-width: 300px; /* 画像の最大幅を制限 */
  height: auto; /* アスペクト比を維持 */
}

.desc{
	    margin-bottom: 0px;
}

/*
.border{
	border: 2px solid #b5e8ff;
}
*/

.midashi-line {
  position: relative;
  padding: 0 20px 0px;
}

.fs16{
	font-size: 16px;
}

.midashi-line::after {
    content: "";
    position: absolute;
    right: 0; /* 右端から開始 */
    bottom: -5px;
    width: 100%;
    height: 0.5px;
    background-color: #e5c900;
}

.midashi-line-team {
  position: relative;
  padding: 0 20px 0px;
}

.midashi-line-team::after {
    left: 0; /* 左端から開始 */
}


.image-row {
  display: flex;
  flex-wrap: wrap;  /* 折り返し可 */
  /*justify-content: center*/;
  gap: 20px;
}

.image-row img {
  flex: 1 1 calc(20% - 20px); /* 5枚で等幅に、gap考慮 */
  max-width: 150px;
  height: auto;
}





/*900px以下
--------------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) {

	.gallery .img_w {
	    display: inline;
	    width: calc((100% - 90px) / 2);
	    height: auto;
	    margin: 0 30px 45px 0;
	}

	/*3の倍数番目marginつける*/
	.gallery figure:nth-child(3n).custom-margin {
	        margin: 0 30px 45px 0;
	}

	/*3の倍数番目marginつける*/
	.gallery figure:nth-child(3n).custom-margin_2 {
	        margin: 0 0 45px 0;
	}

.pa{
    padding: 0 100px;
}

.midashi-line {

	padding: 0px;
}

.pt20{
    padding: 20px 20px 40px !important;
}

  .image-row {
    flex-direction: column;
    align-items: center;
  }

  .image-row img {
    flex: none;
    width: 80%;
    max-width: 300px;
  }

}

/* 画面幅が900px～600pxのとき width を70% にする */
@media screen and (max-width: 900px) and (min-width: 600px) {
    .midashi-line::after {
        width: 70%; /* 幅を70%に変更 */
    }
}


@media only screen and (max-width: 767px) {
	  .history:before {
	    left: 15px;
	  }
	  .history .timeline_item .time_date .time:before {
	    left: -32px;
	  }
	  .history .timeline_item {
	    margin: 0px 0px 0px 40px;
	  }
	  .history .timeline_item .desc {
	    padding-left: 0px;
	    border-left: none;
	  }

	.history .timeline_item .time_date .time {
	    font-size: 4em;
	}

	.history .timeline_item .time_date .flag {
	    font-size: 1em;
	    font-weight: bold;
	    margin: -95px 0 0 0;
	    color: #880e4f;
	}

	    .history .timeline_item .time_date .flag {
	        font-size: 1em;
	        color: rgb(57,109,181);
	    }

	.history .timeline_item .time_date .time {
	    font-size: 4em;
	}

	.gallery .img_w {
		width: 100%;
		margin: 0 0 30px 0;
	}

	/*3の倍数番目marginつける*/
	.gallery figure:nth-child(3n).custom-margin {
        margin: 0 0 30px 0;
	}

	.pa{
	    padding: 0 45px;
	}

  .history .timeline_item {
    flex-direction: column; /* 縦並びにする */
    align-items: flex-start; /* 左寄せ */
  }

  .history .timeline_item img {
    max-width: 100%; /* 画面幅いっぱいに表示 */
  }

}