/* CSS Document */
@charset "utf-8";

#edu-title {
	max-width: 630px;
	min-width: auto;
	margin: 0 auto;
	padding: 10px 18px;
	font-size: 1.4rem;
	font-weight: 700;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	color: #4b4bb4;
	line-height: 2;
}

#edu-title small {
	font-size: 1rem;
}
#edu-title .left{
	display: inline-block;
	float: left;
}

#edu-title .right{
	display: inline-block;
	float: right;
}

#staff-prof {
	text-align: center;
	margin-bottom: 22px;
}

.edu_subtitle {
  background: #645FEA; /*背景色*/
  padding: 0.5rem 0.4rem;/*文字周りの余白*/
  margin: 0.9rem 0rem ;
  color: white;/*文字を白に*/
  letter-spacing: 1px;
  font-size: 14px;
  border-radius: 0.9rem;/*角の丸み*/
}

.edu_text {
	color: blue;
	font-weight: bolder;
	margin-right: 0.8rem;
}

.onepoint {
  background: #FF5259; /*背景色*/
  padding: 0.3rem 0.4rem;/*文字周りの余白*/
  margin: 0.9rem 0rem ;
  color: white;/*文字を白に*/
	font-size: 0.6rem;
  letter-spacing: 1px;
  border-radius: 0.1rem;/*角の丸み*/
}

/*#staff-prof h4.line { 
  padding: 5px 5px 5px 5px;
  background: #b9b0ff;
  font-size: 24px;
  color: white; 
  line-height: 1.3; 
}*/

#eduflow{
	width: 100%;
}


#eduflow ol {
  margin: 0;
  list-style: none;
  padding: 0;
  --hue: 2;
  --unit: 1rem;
}

#eduflow .event-date {
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 23px;
  color: #fff;
  text-align: center;
  display: block;
  background-color: hsl(calc(var(--hue)*-297/15),80%,66%);
	width: 23px;
	height: 23px;
	border-radius: 28px;
	margin-top: 0 auto;
}
#eduflow .event-description {
  margin: 0; 
  color: hsl(calc(var(--hue)*-297/15),80%,66%);
  font-size: 1.1rem;
  background-color: #fff;
  border-color:hsl(calc(var(--hue)*-297/15),80%,66%);
  border: 3px solid;
  text-align: center;
}
#eduflow li{
  --height: 7rem;
  position: relative;
  display: block;
  background-color: hsl(calc(var(--hue)*-297/15),80%,66%);
  border-color:hsl(calc(var(--hue)*-297/15),80%,66%);
  padding: 0;
  margin: 2rem 0;
  border-radius: 6px;
}
#eduflow li::before {
  content: "";
  background-color: inherit;
  position: absolute;
  display: block;
  width: var(--unit);
  height: var(--unit);
  top: 100%;
  left: calc(50% - (var(--unit)/2));
}
#eduflow li::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(100% + var(--unit));
  left: calc(50% - (var(--unit)));
  border: var(--unit) solid transparent;
  border-top-color: inherit;
}
#eduflow li:last-child::before,
#eduflow li:last-child::after {
  content: none;
}
#eduflow li:nth-child(20n+1){
  --hue: 4;
}
#eduflow li:nth-child(20n+2){
  --hue: 5;
}
#eduflow li:nth-child(20n+3){
  --hue: 6;
}
#eduflow li:nth-child(20n+4){
  --hue: 7;
}
#eduflow li:nth-child(20n+5){
  --hue: 8;
}
#eduflow li:nth-child(20n+6){
  --hue:9;
}
#eduflow li:nth-child(20n+7){
  --hue: 10;
}
#eduflow li:nth-child(20n+8){
  --hue: 11;
}
#eduflow li:nth-child(20n+9){
  --hue: 12;
}
#eduflow li:nth-child(20n+10){
  --hue: 13;
}
#eduflow li:nth-child(20n+11){
  --hue: 14;
}
#eduflow li:nth-child(20n+12){
  --hue: 15;
}
#eduflow li:nth-child(20n+13){
  --hue: 16;
}
#eduflow li:nth-child(20n+14){
  --hue: 17;
}
#eduflow li:nth-child(20n+15){
  --hue: 18;
}
#eduflow li:nth-child(20n+16){
  --hue: 19;
}
#eduflow li:nth-child(20n+17){
  --hue: 20;
}
#eduflow li:nth-child(20n+18){
  --hue: 21;
}
#eduflow li:nth-child(20n+19){
  --hue: 22;
}
#eduflow li:nth-child(20n+20){
  --hue: 22;
}
@media (min-width: 550px) and (max-width: 899px){
  #eduflow li {
    margin: 1rem;
    width: calc(50% - 4rem);
    float: left;
    min-height: var(--height);
  }
  #eduflow li:nth-child(4n+3),
  #eduflow li:nth-child(4n+4) {
    float: right;
  }
  #eduflow li:nth-child(4n+1)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  #eduflow li:nth-child(4n+1)::after {
    top: calc(var(--height)/2);
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }
  #eduflow li:nth-child(4n+3)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: -1rem;
  }
  #eduflow li:nth-child(4n+3)::after {
    top: calc(var(--height)/2);
    left: -3rem;
    border: var(--unit) solid transparent;
    border-right-color: inherit;
  }
}
@media (min-width: 900px) and (max-width: 1199px){
  #eduflow li {
    margin: 1rem;
    width: calc(33.33% - 4rem);
    float: left;
    min-height: 7rem;
  }
  #eduflow li:nth-child(6n+4),
  #eduflow li:nth-child(6n+5),
  #eduflow li:nth-child(6n+6) {
    float: right;
  }
  #eduflow li:nth-child(6n+1)::before,
  #eduflow li:nth-child(6n+2)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  #eduflow li:nth-child(6n+1)::after,
  #eduflow li:nth-child(6n+2)::after {
    top: 3.5rem;
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }
  #eduflow li:nth-child(6n+4)::before,
  #eduflow li:nth-child(6n+5)::before{
    top: calc(var(--height)/2 + var(--unit)/2);
    left: -1rem;
  }
  #eduflow li:nth-child(6n+4)::after,
  #eduflow li:nth-child(6n+5)::after{
    top: calc(var(--height)/2);
    left: -3rem;
    border: var(--unit) solid transparent;
    border-right-color: inherit;
  }
}
@media (min-width: 1200px){
  #eduflow ol {
    max-width: 1600px;
    margin: 0 auto;
  }
  #eduflow li {
    margin: 1rem;
    width: calc(25% - 4.7rem);
    float: left;
    min-height: 7rem;
  }
  #eduflow li:nth-child(8n+5),
  #eduflow li:nth-child(8n+6),
  #eduflow li:nth-child(8n+7),
  #eduflow li:nth-child(8n+8){
    float: right;
  }
  #eduflow li:nth-child(8n+1)::before,
  #eduflow li:nth-child(8n+2)::before,
  #eduflow li:nth-child(8n+3)::before,
  #eduflow li:nth-child(8n+4)::before{
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  #eduflow li:nth-child(8n+1)::after,
  #eduflow li:nth-child(8n+2)::after,
  #eduflow li:nth-child(8n+3)::after,
  #eduflow li:nth-child(8n+4)::after{
    top: calc(var(--height)/2);
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }
  #eduflow li:nth-child(8n+5)::before,
  #eduflow li:nth-child(8n+6)::before,
  #eduflow li:nth-child(8n+7)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: -1rem;
  }
  #eduflow li:nth-child(8n+5)::after,
  #eduflow li:nth-child(8n+6)::after,
  #eduflow li:nth-child(8n+7)::after {
    top: calc(var(--height)/2);
    left: -3rem;
    border: var(--unit) solid transparent;
    border-right-color: inherit;
  }
}

/* === STEP見出し全体 === */
.step-box {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 40px auto;
  max-width: 900px;
}

/* === タイトル行 === */
.step-title {
  display: flex;
  align-items: center;
  border-bottom: 5px solid #1a1fa0; /* 青い下線 */
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* STEPラベル */
.step-label {
  background-color: #1a1fa0; /* 深い青 */
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 10px 24px;
  border-radius: 8px;
  margin-right: 20px;
  letter-spacing: 1px;
  display: inline-block;
  white-space: nowrap;
}

/* 見出し文字 */
.step-heading {
  font-size: 1.8rem;
  font-weight: 900;
  color: #111;
  white-space: nowrap;
}

/* 説明文 */
.step-text {
  margin-top: 8px;
  font-size: 1.1rem;
  color: #111;
  line-height: 1.6;
}

/* === スマホ対応（排版維持橫向） === */
@media (max-width: 768px) {
  .step-label {
    font-size: 1.2rem;
    padding: 8px 20px;
    margin-right: 14px;
  }

  .step-heading {
    font-size: 1.4rem;
  }

  .step-text {
    font-size: 1rem;
  }
}