/* 共通設定 */
.tools {
  background-color: #fff7d5; /* 薄い黄色背景 */
  background-image: repeating-linear-gradient(
    45deg,               /* 斜め45度のストライプ */
    #ffffff 0px,         /* 白のライン開始 */
    #ffffff 10px,        /* 白のライン太さ */
    transparent 10px,    /* ストライプの間隔 */
    transparent 20px     /* 1本あたりの太さ+間隔 */
  );
  width: 90%;
  margin: 20px auto;
  padding-top: 30px;
  padding-bottom: 20px;
  border-radius: 30px;
  border: 2px solid #fefcf0;
}
.tools h2 {
  text-align: center;
  margin-bottom: 20px;
}
.tools h2 img {
  width: 90%;
}
.tools ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
}
.tools ul li {
  width: 23%;
  height: auto;
  border-radius: 30px;
  padding: 10px;
  background-repeat: no-repeat;
  background-position: top;
  background-size: over;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tools a {
  text-decoration: none;
}

.tools ul li.okuru {
  background-image: linear-gradient(0deg, #CA4D4C 0%, #FF757F 100%);
}
.tools ul li.okuru p {
  color: #84001D;
}
.tools ul li.uketoru {
  background-image: linear-gradient(0deg, #2F6CC9 0%, #72ACF8 100%);
}
.tools ul li.uketoru p {
  color: #1D206F;
}
.tools ul li.miseru {
  background-image: linear-gradient(0deg, #60D175 0%, #32BD53 2%, #9BE258 100%);
}
.tools ul li.miseru p {
  color: #005725;
}
.tools ul li.shiraseru {
  background-image: linear-gradient(0deg, #6055BD 0%, #A9C7F0 100%);
}
.tools ul li.shiraseru p {
  color: #494389;
}
.tools ul li.atsumeru {
  background-image: linear-gradient(0deg, #3E8BC8 0%, #5AD5FF 100%);
}
.tools ul li.atsumeru p {
  color: #004680;
}
.tools ul li .flex {
  display: flex;
  margin-top: 15px;
  margin-left: 10px;
}
.tools ul li .flex > div {
  margin-top: 50px;
  margin-bottom: 10px;
}
.tools ul li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}
.tools ul li p {
  background-color: rgba(255,255,255,0.75);
  border-radius: 15px;
  /* letter-spacing: 1.8px; */
  line-height: 140%;
  padding: 10px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  margin-top: auto;
}


@media screen and (max-width:1280px) {
  .tools ul li {
    width: 48%;
    margin-bottom: 20px;
  }
}

@media screen and (max-width:768px) {
  .tools ul {
    gap: 0;
  }
  .tools ul li {
    width: 100%;
    margin-bottom: 20px;
  }
}