@charset "UTF-8";
.pc-message {
  display: block;
}
.sp-message {
  display: none;
}
.stuff-message-box {
  padding: 5%;
  background-color: #005eac;
}
.stuff {
  border-radius: 1rem;
  padding: 5%;
  background-color: #ffffff;
}
.stuff01 {
  background-color: #005eac;
}
.stuff-title-box {
  width: 85%;
  background-color: #f7ef09;
}
.stuff01-title {
  color: #005eac;
  font-size: 2vw;
  padding: 5% 5% 1% 5%;
  text-align: center;
  letter-spacing: 5px;
}
.stuff01-title01 {
  color: #005eac;
  font-size: 2vw;
  padding: 5%;
  text-align: center;
  letter-spacing: 5px;
}
.img-box {
  width: 100%;
  text-align: center;
}

.stuff01-img {
  vertical-align: top;
  width: 70%;
}

.title-box-sub {
  margin-left:  auto;
  padding: 3%;
  width: 85%;
  background-color: #008442;
}
.title-box-sub02 {
  display: flex;
  align-items: flex-end;
  margin-left:  auto;
  padding: 3%;
  width: 100%;
  background-color: #008442;
}
.sub-box {
  padding: 2% 2% 0% 2%;
}
.stuff-sub-img {
  width: 30%;
  border-radius: 1rem;
  box-shadow: 0.5rem 0.5rem #f7ef09;
}
.stuff01-title-sub {
  color: #005eac;
  font-size: 1.2vw;
  text-align: center;
  padding-bottom: 1%;
}
.stuff01-title-sub01 {
  color: #ffffff;
  font-size: 1.5vw;
  margin-bottom: 5%;
}
.stuff01-text {
  color: #ffffff;
  font-size: 1.2vw;
}

@media(max-width: 1025px) {
  .sp-message {
    display: block;
  }
  .pc-message {
    display: none;
  }
  .stuff-title-box {
    width: 90%;
    background-color: #f7ef09;
  }
  .stuff01-title {
    color: #005eac;
    font-size: 3vw;
    padding: 5% 5% 1% 5%;
    text-align: center;
    letter-spacing: 5px;
  }
  .stuff01-title-sub {
    color: #005eac;
    font-size: 2vw;
    text-align: center;
    padding-bottom: 1%;
  }
  .stuff01-img {
    vertical-align: top;
    width: 80%;
  }
  .title-box-sub {
    margin-left:  auto;
    padding: 3%;
    width: 90%;
    background-color: #008442;
  }
  .stuff01-text {
    color: #ffffff;
    font-size: 2vw;
  }
  .title-box-sub02 {
    display: block;
    padding: 3%;
    width: 100%;
    background-color: #008442;
  }
  .sub-box {
    padding: 2% 2% 0% 2%;
  }
  .stuff-sub-img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem #f7ef09;
  }
  .stuff01-title-sub01 {
    color: #ffffff;
    font-size: 3vw;
    margin-bottom: 5%;
  }
  .stuff01-text {
    color: #ffffff;
    font-size: 2vw;
  }
  .stuff01-title01 {
    color: #005eac;
    font-size: 3vw;
    padding: 5%;
    text-align: center;
    letter-spacing: 5px;
  }
}
@media(max-width: 420px) {
  .stuff-message-box {
    padding: 2%;
    background-color: #005eac;
  }
  .stuff {
    border-radius: 0.3rem;
    padding: 2%;
    background-color: #ffffff;
  }
  .stuff01 {
    margin-top: 5%;
    background-color: #008442;
  }
  .stuff-title-box {
    width: 100%;
    background-color: #f7ef09;
  }
  .stuff01-title {
    color: #005eac;
    font-size: 7vw;
    padding: 5% 3% 3% 3%;
    text-align: center;
    letter-spacing: 5px;
  }
  .stuff01-title01 {
    color: #005eac;
    font-size: 7vw;
    padding: 5% 2%;
    text-align: center;
    letter-spacing: 5px;
  }
  .img-box {
    width: 100%;
    text-align: center;
  }
  
  .stuff01-img {
    vertical-align: top;
    width: 100%;
  }
  .stuff01-title-sub {
    color: #005eac;
    font-size: 5vw;
    text-align: center;
    padding: 3% 1%;
  }
  .title-box-sub {
    margin-left:  auto;
    padding: 3%;
    width: 95%;
    background-color: #ffffff;
  }
  .title-box-sub02 {
    background-color: #ffffff;
  }
  .stuff-sub-img {
    width: 100%;
    border-radius: 0.3rem;
    box-shadow: none
  }
  .stuff01-title-sub01 {
    color: #008442;
    font-size: 5vw;
    letter-spacing: 2px;
    margin-bottom: 5%;
    border-bottom: solid 3px #f7ef09;
  }
  .stuff01-text {
    color: #005eac;
    font-size: 5vw;
  }
}