@charset "utf-8";
/* CSS Document */
.content {
  color: #111;
  letter-spacing: 0.08em;
}

/* welfare ------------------------*/
.content{
  background: #fff;
}

.welfare{
  overflow: hidden;
}

.welfare .welfare__box {
  list-style: none;
  width: min(94%, 1200px);
  padding: 10% 0% 0%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: -1% auto 0;
}
.welfare .welfare__text {
  list-style: none;
  position: relative;
  border-radius: 4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  height: clamp(100px, 18vw, 150px);
  width: 48%;
  margin: 0 0 14%;
  text-align: center;
  font-size: clamp(12px, 4vw, 28px);
  font-weight: 900;
  border: solid 2px #111;
}

.welfare .welfare__text:nth-of-type(1) ,
.welfare .welfare__text:nth-of-type(10) ,
.welfare .welfare__text:nth-of-type(19){
  box-shadow: 0 0 0 .3em #f03841;
}
.welfare .welfare__text:nth-of-type(2) ,
.welfare .welfare__text:nth-of-type(11) ,
.welfare .welfare__text:nth-of-type(20){
  box-shadow: 0 0 0 .3em #f36119;
}
.welfare .welfare__text:nth-of-type(3) ,
.welfare .welfare__text:nth-of-type(12) ,
.welfare .welfare__text:nth-of-type(21){
  box-shadow: 0 0 0 .3em #ffd52f;
}
.welfare .welfare__text:nth-of-type(4) ,
.welfare .welfare__text:nth-of-type(13) ,
.welfare .welfare__text:nth-of-type(22){
  box-shadow: 0 0 0 .3em #45c89e;
}
.welfare .welfare__text:nth-of-type(5) ,
.welfare .welfare__text:nth-of-type(14) {
  box-shadow: 0 0 0 .3em #4ab7cc;
}
.welfare .welfare__text:nth-of-type(6) ,
.welfare .welfare__text:nth-of-type(15) {
  box-shadow: 0 0 0 .3em #4a78cc;
}
.welfare .welfare__text:nth-of-type(7) ,
.welfare .welfare__text:nth-of-type(16) {
  box-shadow: 0 0 0 .3em #8a63c6;
}
.welfare .welfare__text:nth-of-type(8) ,
.welfare .welfare__text:nth-of-type(17) {
  box-shadow: 0 0 0 .3em #ff9ec7;
}
.welfare .welfare__text:nth-of-type(9) ,
.welfare .welfare__text:nth-of-type(18) {
  box-shadow: 0 0 0 .3em #595959;
}
.welfare .welfare__note {
  font-size: clamp(10px, 2vw, 16px);
  font-weight: 500;
}
.welfare .welfare__icon {
  position: absolute;
  top: -40%;
  width: clamp(65px, 11.5vw, 110px);
}
.welfare .welfare__item{
  z-index: 99;
}
.welfare li:nth-of-type(1) .welfare__item{
  position: absolute;
  width: clamp(90px, 26vw, 182px);
  top: -38%;
  left: -24%;
}
.welfare li:nth-of-type(2) .welfare__item{
  position: absolute;
  width: clamp(60px, 18vw, 124px);
  top: -30%;
  left: 72%;
}
.welfare li:nth-of-type(5) .welfare__item{
  position: absolute;
  width: clamp(45px, 14vw, 79px);
  top: 30%;
  left: -5%;
}
.welfare li:nth-of-type(6) .welfare__item{
  position: absolute;
  width: clamp(65px, 19vw, 134px);
  top: -42%;
  left: 63%;
}
.welfare li:nth-of-type(11) .welfare__item{
  position: absolute;
  width: clamp(80px, 25vw, 178px);
  top: -150%;
  left: 84%;
}
.welfare li:nth-of-type(13) .welfare__item{
  position: absolute;
  width: clamp(40px, 17vw, 118px);
  top: -50%;
  left: -16%;
}
.welfare li:nth-of-type(15) .welfare__item{
  position: absolute;
  width: clamp(70px, 16vw, 121px);
  top: 70%;
  left: 61%;
}
.welfare li:nth-of-type(18) .welfare__item{
  position: absolute;
  width: clamp(54px, calc(150/750*100vw), 115px);
  top: -50%;
  left: 68%;
}
.welfare li:nth-of-type(19) .welfare__item{
  position: absolute;
  width: clamp(70px, 14vw, 143px);
  top: -30%;
  left: 75%;
}
.welfare li:nth-of-type(20) .welfare__item{
  position: absolute;
  width: clamp(82px, 26vw, 211px);
  top: 38%;
  left: -33%;
}
.welfare li:nth-of-type(21) .welfare__item{
  position: absolute;
  width: clamp(60px, 16vw, 125px);
  top: 80%;
  left: -10%;
}
.welfare li:nth-of-type(22) .welfare__item{
  position: absolute;
  width: clamp(70px, 15vw, 162px);
  top: 80%;
  left: -10%;
}






@media screen and (min-width:960px){
  .welfare .welfare__text  {
    width: 31.5%;
    margin: 0 0 10%;
  }
  .welfare .welfare__icon {
    top: -40%;
    width: clamp(60px, 9vw, 110px);
  }
  .welfare li:nth-of-type(1) .welfare__item{
    top: 62%;
    left: -30%;
  }
  .welfare li:nth-of-type(2) .welfare__item{
    top: -80%;
    left: 71%;
  }
  .welfare li:nth-of-type(5) .welfare__item{
    top: 37%;
    left: 3%;
  }
  .welfare li:nth-of-type(6) .welfare__item{
    top: -70%;
    left: 65%;
  }
  .welfare li:nth-of-type(11) .welfare__item{
    top: -64%;
    left: 78%;
  }
  .welfare li:nth-of-type(13) .welfare__item{
    top: -22%;
    left: -22%;
  }
  .welfare li:nth-of-type(15) .welfare__item{
    top: 74%;
    left: -1%;
  }
  .welfare li:nth-of-type(18) .welfare__item{
    top: -65%;
    left: 63%;
  }
  .welfare li:nth-of-type(19) .welfare__item{
    top: -42%;
    left: 71%;
  }
  .welfare li:nth-of-type(20) .welfare__item{
    top: 70%;
    left: -4%;
  }
  .welfare li:nth-of-type(21) .welfare__item{
    top: 73%;
    left: 1%;
  }
  .welfare li:nth-of-type(22) .welfare__item{
    top: 69%;
    left: -10%;
  }

}