@charset "utf-8";
/* ------------------------------------
	news
------------------------------------ */
.box-area{
  font-weight: bold;
  height:0px;
  width:80px;
  text-align:center;
  position:relative;
  z-index: 2;
}

.box-area strong{
  color:var(--news-color);
}
.mounth{
  background:linear-gradient(-45deg, var(--news-color) 0%, var(--news-color) 50%, #97C56E 50%, #97C56E 100%);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size:35px;
  color:#fff;
  width:80px;
  height:80px;
}
.mounth.long{
  width:120px;
  background:linear-gradient(-32deg, var(--news-color) 0%, var(--news-color) 50%, #97C56E 50%, #97C56E 100%);
}
.mounth span{
  font-size:20px;
  margin-top:5px;
}
.mounth.long span.dot{
  letter-spacing: -1px;
  margin:0;
  font-size:25px;
}
.content-area{
  background:#F4F8E5;
  width:auto;
  height: 187px;
  margin-top: 1.5em;
  margin-left: 1em;
  display: grid;
  grid-template-columns:1fr min-content;
  gap:45px;
  align-items: center;
  padding:20px 20px 20px 83px;
  font-weight: bold;
  position:relative;
  z-index:1;
}
.content-area.first{
  margin-top:3em;
}
.content-area.step{
  display:flex;
  flex-direction:column;
  align-items: baseline;
  height: auto;
  gap:1em;
}
.content-area.step > div{
  display: grid;
  grid-template-columns:1fr min-content;
  align-items: center;
  gap:45px;
  width:100%;
}
.content-area.step hr{
  border-top:1px solid #707070;
  width:100%;
  margin:0;
}
.text-area span{
  display: block;
  color:var(--main-color);
  margin-bottom:1em;
}
span.sub03{
  color:var(--news-color03);
}
.text-area a{
  text-decoration: none;
  color:#000;
}
.img-area{
  width:236px;
  height:147px;
}
.img-area img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.box::before{
  position:absolute;
  content: "";
  width:10%;
  height:10%;
  background: #424289;
  border-radius: 10px 0 100% 0;
}
.button{
  width:30%;
  height:50px;
  display: flex;
  justify-content: space-around;
  background: var(--main-color);
  border-radius: 50px;
}
.button a{
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  background: url(bg.png);
  background-repeat: no-repeat;
  background-position: top -20px left;
  backdrop-filter: opacity(50%);
}
@media (max-width:768px){
  .content-area,
  .content-area.step > div{
      display: flex;
      flex-direction:column;
      gap: 2em;
      height: auto;
      padding:3.5em 1.5em 0 1.5em;
  }
  .img-area{
      width: calc(100% + 3em);
      margin-left: -1.5em;
      margin-right: -1.5em;
      height:auto;
  }
  .content-area.step{
      padding:0;
  }
  .content-area.step hr{
      margin:20px 0;
  }
  .content-area.step > div:last-child{
      padding-top:0;
  }
}