@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url("https://nolla-naguri.jp/assets/ota/css/reset.css");

.wideslider {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.wideslider input[type="radio"] {
  display: none;
}

.wideslider ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 400%;
}

.wideslider ul.sp {
  display: none;
}

.wideslider ul li {
  flex: 0 0 25%;
  width: 25%;
  margin: 0;
  padding: 0;
}

.wideslider ul li img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.pager-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 35px auto 15px;
}

.pager-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  display: block;
  transition: background-color 0.3s;
}

#slide1:checked ~ ul {
  animation: slide-flow-loop-1 16.5s infinite;
}
#slide2:checked ~ ul {
  animation: slide-flow-loop-2 16.5s infinite;
}
#slide3:checked ~ ul {
  animation: slide-flow-loop-3 16.5s infinite;
}

#slide1:checked ~ .pager-container .dot1 {
  animation: active-dot1-start 16.5s infinite;
}
#slide1:checked ~ .pager-container .dot2 {
  animation: active-dot2-start 16.5s infinite;
}
#slide1:checked ~ .pager-container .dot3 {
  animation: active-dot3-start 16.5s infinite;
}

#slide2:checked ~ .pager-container .dot1 {
  animation: active-dot3-start 16.5s infinite;
}
#slide2:checked ~ .pager-container .dot2 {
  animation: active-dot1-start 16.5s infinite;
}
#slide2:checked ~ .pager-container .dot3 {
  animation: active-dot2-start 16.5s infinite;
}

#slide3:checked ~ .pager-container .dot1 {
  animation: active-dot2-start 16.5s infinite;
}
#slide3:checked ~ .pager-container .dot2 {
  animation: active-dot3-start 16.5s infinite;
}
#slide3:checked ~ .pager-container .dot3 {
  animation: active-dot1-start 16.5s infinite;
}

@keyframes slide-flow-loop-1 {
  0%, 30% { transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out; }
  33%, 63% { transform: translate3d(-25%, 0, 0); animation-timing-function: ease-in-out; }
  66%, 96% { transform: translate3d(-50%, 0, 0); animation-timing-function: ease-in-out; }
  99% { transform: translate3d(-75%, 0, 0); animation-timing-function: step-end; }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes slide-flow-loop-2 {
  0%, 30% { transform: translate3d(-25%, 0, 0); animation-timing-function: ease-in-out; }
  33%, 63% { transform: translate3d(-50%, 0, 0); animation-timing-function: ease-in-out; }
  66%, 96% { transform: translate3d(-75%, 0, 0); animation-timing-function: step-end; }
  97% { transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out; }
  100% { transform: translate3d(-25%, 0, 0); }
}

@keyframes slide-flow-loop-3 {
  0%, 30% { transform: translate3d(-50%, 0, 0); animation-timing-function: ease-in-out; }
  33%, 63% { transform: translate3d(-75%, 0, 0); animation-timing-function: step-end; }
  64% { transform: translate3d(0, 0, 0); animation-timing-function: ease-in-out; }
  67%, 97% { transform: translate3d(-25%, 0, 0); animation-timing-function: ease-in-out; }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes active-dot1-start {
  0%, 30% { background-color: #00bcd4; }
  33%, 100% { background-color: #ccc; }
}

@keyframes active-dot2-start {
  0%, 30% { background-color: #ccc; }
  33%, 63% { background-color: #00bcd4; }
  66%, 100% { background-color: #ccc; }
}

@keyframes active-dot3-start {
  0%, 63% { background-color: #ccc; }
  66%, 96% { background-color: #00bcd4; }
  99%, 100% { background-color: #ccc; }
}

.cst_2607 {
  text-align: center;
  margin: 0 auto;
}

.cst_2607 h2 {
    font-family: "Noto Serif JP", serif;
  font-size: 40px;
  letter-spacing: .3rem;
  font-weight: 500;
}

.cst_2607 p {
  letter-spacing: .1rem;
  line-height: 2;
  margin: 25px auto;
}

.cst_2607 .button a {
  background: #00a5c0;
  display: block;
  color: #fff;
  text-align: center;
  max-width: 350px;
  margin: 50px auto;
  padding: 20px 0;
  font-weight: bold;
  letter-spacing: .1rem;
  border-radius: 70px;
  position: relative;
  border: 2px solid #00a5c0;
}

.cst_2607 .button a:hover {
  color: #00a5c0;
  background: #fff;
}

.cst_2607 .button a i {
  position: absolute;
  right: 10%;
  font-size: 18px;
  line-height: 1;
  top: calc(50% - 9px);
}

.cst_2607 .right_img {
  max-width: 1000px;
  margin: 0 auto 50px;
}

.cst_2607 .right_img img {
  float: right;
  max-width: 550px;
}

.cst_2607 .right_img .text_box {
  float: left;
  text-align: left;
}

.cst_2607 .left_img {
  max-width: 1000px;
  margin: 0 auto 50px;
}

.cst_2607 .left_img img {
  float: left;
  max-width: 550px;
}

.cst_2607 .left_img .text_box {
  float: left;
  text-align: left;
  margin: 0 0 0 50px;
}

.cst_2607 .text_box h3 {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  letter-spacing: .1rem;
  font-weight: 700;
  margin: 25px auto 0;
}

.cst_2607 .foot {
  background-image: url(https://nolla-naguri.jp/assets/ota/images/middle.jpg);
  background-size: cover;
  padding: 100px 0;
  background-position: center;
}

.cst_2607 .foot p {
  font-family: "Noto Serif JP", serif;
  font-size: 35px;
  letter-spacing: .1rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1300px) {

    .wideslider {
      padding: 0 0 40px;
    }

    .pagination {
      bottom: 0;
    }

}

@media (max-width: 1000px) {

    .cst_2607 h2 {
      width: 95%;
      margin: 25px auto;
      font-size: 35px;
      letter-spacing: .2rem;
    }

    .cst_2607 .button a {
      padding: 10px 0;
      max-width: 300px;
      margin: 25px auto;
    }

    .cst_2607 .right_img,
    .cst_2607 .left_img {
      width: 95%;
      margin: 0 auto 50px;
    }

    .cst_2607 .right_img img,
    .cst_2607 .left_img img {
      float: none;
      display: block;
      margin: 0 auto;
      max-width: 720px;
      width: 100%;
    }

    .cst_2607 .right_img .text_box,
    .cst_2607 .left_img .text_box {
      float: none;
    max-width: 720px;
    margin: 0 auto;
    float: none;
  }

    .cst_2607 .foot p {
      font-size: 25px;
      margin: 0 auto;
      max-width: none;
      text-align: center;
    }

    .cst_2607 p .sp_none {
      display: none;
    }

}

@media (max-width: 870px) {

    .cst_2607 h2 {
      font-size: 25px;
    }

    .cst_2607 p {
      font-size: 14px;
      margin: 15px auto;
      text-align: left;
      width: 95%;
      max-width: 630px;
    }

    .cst_2607 .text_box h3 {
      font-size: 18px;
    }

    .cst_2607 .text_box h3 .sp_none {
      display: none;
    }

    .cst_2607 .text_box p {
      max-width: none;
      width: 100%;
    }

    .wideslider ul.pc {
    display: none;
    }

    .wideslider ul.sp {
    display: flex;
    }

}

@media (max-width: 500px) {

    .cst_2607 .foot p {
      font-size: 20px;
    }

    .cst_2607 h2 {
      font-size: 20px;
    }

}