@charset "utf-8";

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px) {
#pc------------------------------------------- {
}
main .snav ul {
	width: 74.67vw;        /* 1020px */
}
main .snav ul li a {
	width: 13.76vw;        /* 188px */
}
main .snav ul li:nth-of-type(2) a {
	background-color: #005DA5;
	color: #fff;
	transition: 0.3s;
}





#history {
	width: 74.93vw;        /* 1024px */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#history .flex {
	display: flex;
	align-items: stretch;   /* となりの div の高さに h2 も伸びる */
	gap: 1.465vw;          /* 20px */
}

#history .flex h2 {
	position: relative;
	width: 8.787vw;        /* 120px */
	min-height: 3.661vw;   /* 50px */
	margin: 0;
	color: #fff;
	font: 1.757vw "Josefin Sans", sans-serif; /* 24px */
	line-height: 4vw;  /* 50px */
	text-align: center;
	background: none;      /* ← 背景は ::before に移す */
	display: flex;
	align-items: flex-start; 
	justify-content: center;
}

/* 上の丸カプセル */
#history .flex h2::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3.661vw;       /* 50px */
	background: #0D57A7;
	border-radius: 100px;
	z-index: -1;           /* テキストの裏側に */
}

/* 下に伸びる縦線（中央） */
#history .flex h2::after {
	content: "";
	position: absolute;
	left: calc(50% - 0.037vw); /* 0.5px */
	top: 4.392vw;        /* 60px */
	bottom: 0.732vw;     /* 10px */
	width: 0.073vw;      /* 1px */
	background: #0D57A7;
}

#history .flex div {
	width: 63.27vw;       /* 864px */
	position: relative;
	top: -1.025vw;        /* -14px */
}
#history .flex div td {
	line-height: 1.8em;
	padding-top: 1.83vw;  /* 25px */
	padding-bottom: 1.83vw; /* 25px */
	border-bottom: 0.073vw solid #BFBFBF; /* 1px */
	font-size: 1.098vw;   /* 15px */
	vertical-align: top;
}
#history .flex div td.year {
	width: 7.32vw;        /* 100px */
}
#history .flex div td.month {
	width: 6.223vw;       /* 85px */
}

}




/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
main .snav ul li:nth-of-type(2) a {
	background-color: #005DA5;
	color: #fff;
	transition: 0.3s;
}



#history {
	margin-left: 1vw;
	margin-right: 1vw;
	text-align: left;
}
#history .flex{
  display:flex;
  align-items:stretch;          /* となりの div の高さに h2 も伸びる */
  gap:5px;
}

#history .flex h2{
  /* h2 を入れ物にする */
  position:relative;
  width:15vw;
  min-height:6vw;              /* 最低 50px（丸カプセルぶん） */
  margin:0;
  color:#fff;
  font: 4vw "Josefin Sans", sans-serif;
  line-height:7vw;             /* カプセル内で縦中央 */
  text-align:center;
  background:none;              /* ← 背景は ::before に移す */
  display:flex;
  align-items:flex-start;       /* テキストを上に配置 */
  justify-content:center;
}

/* 上の丸カプセル */
#history .flex h2::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6vw;
  background:#0D57A7;
  border-radius:100px;
  z-index:-1;                   /* テキストの裏側に */
}

/* 下に伸びる縦線（中央） */
#history .flex h2::after{
  content:"";
  position:absolute;
  left:calc(50% - 0.5px); /* 中央に1px線を整数座標で配置 */
  top:8vw;
  bottom:10px;
  width:1px;
  background:#0D57A7;
}
#history .flex div {
	width: 75vw;
	position: relative;
	top: -4.8vw;
}
#history .flex div td {
	line-height: 1.8em;
	padding-top: 5vw;
	padding-bottom: 5vw;
	border-bottom: 1px solid #BFBFBF;
	vertical-align: top;
	font-size: 3.5vw;
}
#history .flex div td.year {
	width: 13vw;
}
#history .flex div td.month {
	width: 9vw;
	padding-right: 2vw;
	text-align: right;
}
}



/*===============================================
●画面の横幅が400pxまで
===============================================*/
@media screen and (max-width:400px){
/*===============================================
●sp400
===============================================*/
#sp400------------------------------------------- {
}
}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
/*===============================================
●sp320
===============================================*/
#sp320------------------------------------------- {
}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
@media screen and (min-width:481px) and (max-width:768px) {
/*===============================================
●tablet
===============================================*/
#tab------------------------------------------- {
}
}