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

/* CSS Document */
.nav-products {
  border-bottom: 3px solid #80CED7;
}

.main {
  padding-top: 70px;
  text-align: left;
}

.page-header {
  text-align: center;
}

.lets,
.yayoi,
.bugyo {
  margin-bottom: 180px;
}

.lets h2,
.yayoi h2,
.bugyo h2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  padding: 0 3%;
  margin-bottom: 30px;
  border-left: solid #80CED7 16px;
  font-size: 2.8rem;
  font-weight: 600;
  text-align: center;
}

.lets p,
.yayoi p,
.bugyo p {
  padding: clamp(16px, 5%, 40px); /* 最小16px, 通常は5%, 最大40px */;
  font-size: 2.4rem;
  margin-bottom: 50px;
}

.section__box {
  position: relative;
  margin-bottom: 150px;
}

.section__image__lets img {
  display: flex;
  width: 26.45%;
  max-width: 291px;
  margin: 30px auto;
}

.section__image__yayoi {
  display: flex;
  justify-content: space-around;
  margin-bottom: 57px;
}

.box__small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.section__image__yayoi img {
  width: 69%;
  max-width: 190px;
}

.section__image__yayoi p {
  font-size: 2.0rem;
}

.section-image__bugyo {
  display: flex;
  justify-content: center;
  margin-bottom: 57px;
}

.section-image__bugyo img {
  width: 30%;
  max-width: 276px;
}

/* ボタン */
.btn {
  position: absolute;
  right: 0;
  width: fit-content;
}

.btn a {
  display: block;
  width: 200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0.5rem 1rem;
  text-align: center;
  color: #FFF;
  background-color: #80CED7;
  border: 3px solid #80CED7;
  border-radius: 33px;
  font-size: 2.4rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.5s;
}

.btn a:hover {
  opacity: 1;
}

.btn .cta-text {
  position: relative;
  z-index: 1;
}

.btn a::before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  aspect-ratio: 1/1;
  background-color: #FFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 1;
}

@media (hover: hover) {
  .btn:hover a::before {
    width: auto;
    height: 500%;
    opacity: 0;
    transition: 0.5s ease-in;
  }

  .btn:hover a {
    color: #80CED7;
    background-color: #FFF;
    transition: color 0s, background-color 0.5s;
    transition-delay: 0.3s;
  }
}

@media (hover: none) {
  .btn:active a::before {
    width: auto;
    height: 500%;
    top: -200%;
    left: 50%;
    opacity: 0;
    transition: 0.5s ease-in;
  }

  .btn:active a {
    color: #80CED7;
    background-color: #FFF;
    transition: color 0s, background-color 0.5s;
    transition-delay: 0.3s;
  }
}

/* ボタンここまで */

@media(max-width:768px) {
  .lets h2,
  .yayoi h2,
  .bugyo h2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    padding: 0 4%;
    margin-bottom: 30px;
    border-left: solid #80CED7 11px;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
  }

  .lets p,
  .yayoi p,
  .bugyo p {
    padding: 0 6%;
    font-size: 2.0rem;
    margin-bottom: 50px;
  }

  .section__image__yayoi p {
    font-size: 1.6rem;
  }

  .btn a {
    display: block;
    width: 126px;
    margin-right: auto;
    margin-left: auto;
    padding: 0.5rem 1rem;
    text-align: center;
    color: #FFF;
    background-color: #80CED7;
    border: 3px solid #80CED7;
    border-radius: 35px;
    font-size: 1.8rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
  }
}

@media(max-width:428px) {

  .section__image__lets img {
    display: flex;
    width: 40%;
    max-width: 291px;
    margin: 30px auto;
  }

  .section__image__yayoi {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5rem;
    justify-content: space-around;
    margin-bottom: 57px;
  }

  .box__small {
    width: 50%;
  }

  .section-image__bugyo img {
    width: 45%;
    max-width: 276px;
  }

}