@charset "utf-8";

:root {
  --blue: #17b6e4;
  --blue2: #ccf1ff;
  --navy: #0b577b;
  --line: #65d3f0;
  --shadow: 0 5px 5px rgba(0, 126, 180, 0.1);
  --font01: "Shippori Mincho", serif;
  --font02: "Bellefair", serif;
  --font03: al-fresco, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--navy);
  font-family: var(--font01);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

body.is-fixed {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 1s ease 0s;
}
a:hover {
  opacity: 0.8;
}
button {
  transition: all 1s ease 0s;
}
button:hover {
  opacity: 0.8;
}

.scroll::-webkit-scrollbar {
  width: 16px;
}

.scroll::-webkit-scrollbar-thumb {
  background: var(--navy);
  border-radius: 10px;
  border-right: 4px solid transparent; /* 透明なボーダーをつける */
  border-left: 4px solid transparent; /* 透明なボーダーをつける */
  background-clip: padding-box; /* 背景を切り取る */
}

.scroll::-webkit-scrollbar-track {
  /* 上下に余白を付ける */
  margin-top: 4px;
  margin-bottom: 4px;
}

#index {
  #index_mein {
    background: url(../images/enter_pc.jpg) no-repeat center center / cover;
    height: 1000px;
    align-content: center;
    h1.logo {
      width: fit-content;
      max-width: 750px;
      margin: auto;
    }
    div {
      margin: 50px auto auto;
      display: flex;
      justify-content: center;
      a {
        width: 320px;
        height: 80px;
        color: #fff;
        display: block;
        margin: auto 30px;
        text-align: center;
        align-content: center;
      }
      a.topbtn {
        font-size: 1.8em;
        border: 2px solid #fff;
        background: linear-gradient(90deg, #09b1ef, #0b5b81, #09b1ef);
      }
      a.topbtn:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
      a.dhrbtn {
        font-size: 1.2em;
        border: 2px solid #537483;
        background: #537483;
      }
        a.dhrbtn:hover {
  background: #fff;
  color:  #537483;
  border: 1px solid  #537483;
}
    }
    p {
      padding: 50px 0 0;
      text-align: center;
      font-weight: 600;
      text-shadow:
        -1px -1px 3px rgb(255, 255, 255),
        -1px 1px 3px rgb(255, 255, 255),
        1px -1px 3px rgb(255, 255, 255),
        1px 1px 3px rgb(255, 255, 255);
      a {
        text-decoration: underline;
      }
    }
  }
  .baitai_banner {
    padding: 50px 0 150px;
    background: #fff;
    ul {
      li {
        width: fit-content;
        margin: auto auto 30px;
      }
    }
  }
  footer {
    padding: 0;
    copy {
      margin: 0;
    }
  }
}

.container {
  width: min(2000px, 95%);
  margin: auto;
}

.header {
  position: relative;
  background: linear-gradient(
    180deg,#d8f1fd,#90dcff
  );
  box-shadow: 0 3px 14px rgba(0, 100, 160, 0.12);
  border: 1px solid #93e2f9;

  .header__inner {
    width: min(2000px, calc(100% - 10px));
    min-height: 160px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-evenly;
  }

  h1 {
    max-width: 250px;
    margin: 0;
  }

  .inner_up {
    display: flex;
    justify-content: end;
    margin: 0 0 20px;

    .tel,
    .open {
      height: fit-content;
      position: relative;
      margin: auto 5px;
      align-content: center;
      padding: 5px;
      line-height: 1;

      span {
        font-size: 0.9em;
      }
    }

    .tel:after,
    .open:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 60%;
      width: 1px;
      background: var(--navy);
    }

    .tel:before,
    .open:before {
      content: "";
      position: absolute;
      bottom: 0;
      height: 1px;
      width: 100%;
      background: var(--navy);
      left: 0;
    }

    .sns {
      display: flex;
      margin: auto 20px;

      a {
        display: block;
        background: var(--navy);
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin: 5px;
        align-content: center;

        img {
          width: 30px;
          height: auto;
          margin: auto;
        }
      }
    }

    a.reservationbtn {
      display: block;
      background: linear-gradient(90deg, #0b577b, #09b1ef 50%, #0b577b);
      background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position 0.3s;
      padding: 5px;
      color: #fff;
      border-radius: 20px;
      align-content: center;
      height: fit-content;
      margin: auto 0 auto 5px;
      font-size: 0.9em;
      width: 150px;
      text-align: center;
    }
   a.reservationbtn:hover {
    background-position: 100% 0;
  }
  }

  .inner_nav {
    display: flex;

    > nav {
      margin-left: auto;
      margin-right: 30px;
      display: flex;
      gap: 16px;
      font-size: 0.8em;
      letter-spacing: 0.08em;
      line-height: 1.2;
      text-align: center;

      a {
        text-decoration: none;
        color: transparent;
        background: linear-gradient(90deg, var(--blue) 50%, var(--navy) 50%);
        background-size: 200% 100%;
        background-position: right bottom;
        -webkit-background-clip: text;
        background-clip: text;
        transition: background-position 0.4s ease;

        &:hover {
          background-position: left bottom;
        }

        em {
          display: block;
          font-size: 1.6em;
          font-style: normal;
          font-family: var(--font02);
          color: transparent;
        }
      }
    }
  }

  /* ハンバーガーボタン */
  .hamburger {
    position: relative;
    z-index: 200;
    width: 55px;
    height: 55px;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--navy);
    transition: 0.3s;
  }

  .hamburger span:nth-child(1) {
    top: 40%;
  }

  .hamburger span:nth-child(2) {
    top: 60%;
  }

  /* 開いた時のバツ */
  .hamburger.is-active {
    border: 2px solid var(--navy);
    border-radius: 50%;
    background: #fff;
    position: absolute;
          top: 10%;
        right: 7%;
  }

  .hamburger.is-active span {
    width: 80%;
  }

  .hamburger.is-active span:nth-child(1) {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(45deg);
  }

  .hamburger.is-active span:nth-child(2) {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(-45deg);
  }

  /* メニュー */
  .gnav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    /*ax-width: 360px;*/
    height: 100vh;
    padding: 0px 5% 0px;
    background: #ace3ff;
    transition: right 0.3s;
    z-index: 150;

    .gnav__bx {
      background: #fff;
      border-radius: 50px;
      height: 100vh;
      padding: 60px 0;

      .gnav_bx {
        height: calc(100vh - 120px);
        overflow-y: auto;

        .logo {
          display: block;
          width: 250px;
          height: auto;
          margin: auto;
        }

        nav {
          max-width: 800px;
          width: 90%;
          margin: 90px auto 0;

          ul.gnav__list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 35px 100px;
            list-style: none;
            margin: 0 auto;
            padding: 0;

            li {
              a {
                display: flex;
                font-size: 1.3em;
                font-style: italic;
                color: var(--navy);

                i {
                  width: 20px;
                  margin: auto 5px auto 0;

                  img {
                    margin: auto;
                  }

                  .on {
                    display: none;
                  }
                }
              }

              a:hover {
                color: var(--blue);

                i {
                  .on {
                    display: block;
                  }

                  .off {
                    display: none;
                  }
                }
              }
            }
          }
        }

        .inner {
          .sns {
            display: flex;
            margin: auto 20px;
            justify-content: center;

            a {
              display: block;
              background: var(--navy);
              width: 40px;
              height: 40px;
              border-radius: 100%;
              margin: 5px;
              align-content: center;

              img {
                width: 30px;
                height: auto;
                margin: auto;
              }
            }
          }

          .tit {
            font-size: 1.2em;
            text-align: center;
            font-style: italic;
            display: flex;
            justify-content: center;
            margin: 40px auto 30px;
          }

          .tit::after {
            content: "";
                                    width: 350px;
                        height: 2px;
                        background: var(--navy);
                        margin: auto auto auto 50px;
          }

          .tit::before {
            content: "";
            height: 2px;
                        background: var(--navy);
                        margin: auto 50px auto auto;
                        width: 350px;
          }

          .ban_rec {
            margin: 40px auto;
            width: fit-content;
          }
        }
      }
    }
  }

  .gnav.is-active {
    right: 0;
    display: block;
  }

  .gnav__list a {
    display: block;
    padding: 0;
    color: #333;
    text-decoration: none;
  }
}

.header.is-scroll {
  background: transparent;
  border: 1px solid rgba(255, 255, 255);
position: sticky;
  top: 0;
  z-index: 50;
  &:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: -1;
  }
      .header__inner {
                min-height: 70px;
                        width: min(2000px, calc(90% - 10px));
                                justify-content: space-between;
                                    h1 {
        max-width: 150px;
        margin: auto 0;
    }
 .inner_up{
    display: none;
  }
  .inner_nav {
        > nav {
display: none;
        }
}
}
}
#pankuzu {
  .breadcrumb {
    padding: 10px 5%;
    font-size: 1em;
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
  }

  .breadcrumb__item:not(:last-child)::after {
    content: "";
    margin: auto 20px;
    width: 60px;
    height: 1px;
    background-color: var(--navy);
  }

  .breadcrumb__item a {
    color: var(--navy);
    text-decoration: none;
  }

  .breadcrumb__item a:hover {
    text-decoration: underline;
  }

  .breadcrumb__item[aria-current="page"] {
    color: var(--blue);
  }
}

.panels {
  padding: 28px 0 70px;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

main {
  overflow-x: hidden;
}
.typing-effect {
  visibility: hidden;
}

.typing-effect span {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.fv {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0px;
  background: url(../images/fv.jpg) no-repeat center top;
  width: 100%;
  background-attachment: fixed;
}

#shamediary {
  background: url(../images/shamediary_bg.jpg) no-repeat center center / cover;
  padding: 20px 0 100px;

  h2 {
    margin: 0 auto;
    padding: 10px 0;
    color: #fff;
    text-align: center;
    font-size: 1.6em;
    background: linear-gradient(90deg, #81d9f9, #0ba0e6, #81d9f9);
  }

  .boxs {
    background: #fff;
    padding: 10px;
  }
}

#top_newface_news {
  padding: 100px 0 250px;
  margin: -40px 0 0;
  background: url(../images/info_bg.png) no-repeat top center / cover;

  .newface {
    .toptit::before {
      content: "NEW FACE";
    }

    .newfacebs {
      overflow-y: auto;
      max-height: 810px;
      padding: 0 10px 0 0;
      margin: auto auto 1.5em;
    }
  }

  .news {
    .toptit::before {
      content: "NEWS";
    }

    article a {
      grid-template-columns: 100px 1fr;
      padding: 30px 15px;
      gap: 10px;
      transition:
        background-color 1s ease,
        color 0.8s ease;

      .text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:hover {
        background: var(--blue2);
      }
      img {
        object-fit: cover;
        aspect-ratio: 3 / 4;
      }
    }
  }
}

.news {
  .newsbs {
    margin: auto auto 1.5em;
    article a {
      display: grid;
      margin-bottom: 10px;
      background: #fff;
      border: 1px solid;
      border-image: linear-gradient(to bottom, #71cff4, #0ca0e6);
      border-image-slice: 1;

      img {
        width: auto;
        height: auto;
        /*object-fit: cover;
        aspect-ratio: 3 / 4;*/
      }

      .days {
        display: flex;

        > div {
          padding: 5px 10px;
          color: #fff;
        }

        .icon_ev {
          background: #0da998;
        }

        .icon_news {
          background: #e01f71;
        }

        .icon_new {
          background: #e47b15;
        }

        time {
          margin: auto 10px;
        }
      }

      h3 {
        margin: 10px 0;
        font-size: 1.4em;
        color: #006d9c;
      }

      .text {
        margin: 0;
        font-size: 1em;
        line-height: 1.3;
      }
    }
  }
}
.newface {
  .newfacebs {
    article a {
      display: grid;
      grid-template-columns: 350px 1fr;
      gap: 0px;
      padding: 0;
      margin-bottom: 13px;
      background: #fff;
      border: 10px solid;
      border-image: linear-gradient(to top left, #71cff4, #0ca0e6, #71cff4);
      border-image-slice: 1;
      box-shadow: var(--shadow);

      .img {
        overflow: hidden;
        position: relative;

        img {
          width: 100%;
          max-width: 100%;
          height: auto;
          object-fit: cover;
          aspect-ratio: 3 / 4;
        }
      }

      .plof {
        width: fit-content;
        padding: 20px 20px 20px 5px;

        .newface-date {
          display: block;
          background: linear-gradient(90deg, #81d9f9, #0ba0e6);
          color: #fff;
          font-size: 1.3em;
          text-align: center;
          padding: 10px 0;
        }

        .name {
          border-bottom: 1px solid var(--navy);
          padding: 20px 0px 10px 30px;
          font-size: 1.3em;
        }

        .size {
          padding: 10px 0px 25px 30px;
          font-size: 1.1em;
        }
      }

      .text {
        margin: 0 5px;
        font-size: 1.1em;
        line-height: 1.7;
        padding: 5px;
        border: 1px solid #bcccd4;
        max-height: 265px;
        overflow-y: auto;
      }
    }
  }
}

.toptit {
  position: relative;
  margin: 0 0 26px;
  text-align: center;
  color: #118fc4;
  font-weight: 400;
  letter-spacing: 0em;
  font-size: 3em;
  color: var(--navy);
  height: 150px;
  width: 100%;
  overflow: hidden;
  align-content: center;

  span {
    z-index: 1;
    position: relative;
  }

  &:before {
    content: "";
    display: block;
    color: #d5ecf7;
    font-size: 2.6em;
    margin: auto auto -105px;
    font-family: var(--font02);
    letter-spacing: -15px;
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.more {
  display: grid;
  place-items: center;
  width: 270px;
  height: 60px;
  margin: auto;
  font-size: 1.7em;
  font-family: var(--font02);
  color: #fff;
  background: linear-gradient(90deg, #09b1ef, #0b5b81, #09b1ef);
  letter-spacing: 0.18em;
  letter-spacing: 0;
  display: flex;
  justify-content: center;
}
.more::before {
  background: #fff;
  width: auto;
}
.more::after {
  content: "⇀";
  margin: auto 0 auto 10px;
}

.more:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}

#topschedule {
  position: relative;
  overflow: hidden;
  scroll;
  margin: -200px 0 0;
  background: url(../images/topschedule_bg.png) no-repeat top center / 100% 100%;
  z-index: 1;
  isolation: isolate;

  .topschedule {
    position: relative;
    z-index: 2;
    padding: 250px 0 300px;

    .toptit {
      margin: auto auto 80px;

      &:before {
        content: "SCHEDULE";
      }
    }
  }
}

/* 念のため疑似要素は無効化 */
#topschedule::before,
#topschedule::after {
  content: none !important;
}

/* 花画像共通 */
#topschedule .schedule-hana {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 800px;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* 上の花 */
#topschedule .schedule-hana01 {
  top: -500px;
  background: url(../images/topschedule_hana01.png) no-repeat top center / 100% auto;
}

/* 下の花 */
#topschedule .schedule-hana02 {
  bottom: 450px;
  background: url(../images/topschedule_hana02.png) no-repeat bottom center / 100% auto;
}



.girls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;

.girl-card {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid;
  border-image: linear-gradient(to bottom, #fff, #0ca0e6);
  border-image-slice: 1;
  text-align: center;
  overflow: hidden;

  a {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;

    .img {
      position: relative;
      overflow: hidden;

      > img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
      }

      .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
      }
    }

    .prof {
      flex: 1;
      background: url(../images/girlsprof_bg.png) no-repeat center center /
        cover;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      padding: 20px 0 15px;

      .name {
        padding: 0 5px 10px;
        font-size: 1.5em;
      }

      .size {
        padding: 0 5px 10px;
      }

      .status {
        display: block;
        padding: 10px;
        color: #fff;
        background: linear-gradient(90deg, #67c8f4, #0ca0e6, #67c8f4);
        font-size: 1.2em;
      }

      time {
        font-size: 1.3em;
        padding: 10px 5px 0;
        display: block;
      }
    }
  }
}
}
.cast-animation {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  opacity: 0;

  .b {
    width: 90%;
    font-size: 2em;
    font-family: var(--font03);
    margin: auto;
    display: block;
    transition: 2s ease;
    color: var(--blue);
    opacity: 0;
    text-align: center;
    z-index: 15;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 20px;
  }

  span {
    position: absolute;
    display: block;
    transition: 1s ease;
    z-index: 10;
    width: 94%;
    text-shadow: 1px 1px 2px black;
  }

  span:nth-child(1) {
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
  }

  span:nth-child(2) {
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: #fff;
  }

  span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: #fff;
  }

  span:nth-child(4) {
    bottom: 0;
    right: 0;
    width: 2px;
    height: 0;
    background: #fff;
  }

  &:before {
    content: "";
    width: 500%;
    height: 400%;
    position: absolute;
    top: -390%;
    right: -500%;
    z-index: 5;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -moz-transition: all 800ms ease-in-out;
    -webkit-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    -ms-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    background: #ffffff9f;
    z-index: 5;
  }

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transition: 1s;
    transition-delay: 0.5s;
    z-index: 100;
  }
}

a:hover {
  .cast-animation {
    opacity: 1;

    img {
      opacity: 0.6;
    }

    .b {
      opacity: 1;
    }

    .animation_pica:after {
      left: 100%;
    }

    span:nth-child(1) {
      width: 100%;
      transform: translateX(100%);
    }

    span:nth-child(2) {
      height: 100%;
      transform: translateY(100%);
    }

    span:nth-child(3) {
      width: 100%;
      transform: translateX(-100%);
    }

    span:nth-child(4) {
      height: 100%;
      transform: translateY(-100%);
    }
  }

  .cast-animation::after {
    left: 100%;
  }

  .cast-animation::before {
    top: -200%;
    right: -250%;
    opacity: 1;
  }
}

#topbanners {
  background: url(../images/topbanners_bg.png) no-repeat center center / cover;
  padding: 400px 0 200px;
  margin: -350px 0 0;

  .bannergrid {
    .topbannergrs {
      img {
      }

      .bannergrid {
        padding-top: 30px;
        padding-bottom: 30px;
      }

      a {
        width: 100%;
        margin: 15px auto;
        margin-right: 5px;
        margin-left: 5px;
                        object-fit: cover;
                aspect-ratio: 1 / 1;
                box-shadow: var(--shadow);
                display: block;
                height: auto;

        @include breakpoint(500px) {
          margin: 5% auto;
        }

        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          aspect-ratio: 1 / 1;
          box-shadow: var(--shadow);
        }
      }

      .dots-class {
        display: flex;
        justify-content: center;
        margin: 15px auto 0;
        max-width: 1300px;

        button {
          display: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          outline: none;
          padding: 0;
          border: none;
          background-color: transparent;
        }

        li {
          height: 5px;
          background-color: #ccc;
          cursor: pointer;
          position: relative;
          width: -webkit-fill-available;
        }

        li.slick-active {
          background-color: var(--navy);
        }
      }
    }
  }
}

#topranking {
  z-index: 1;
  margin: -100px 0 0%;
  position: relative;
  background: url(../images/topranking_bg.png) no-repeat top center / 100% 100%;
  padding: 100px 0 150px;
  z-index: 1;
    position: relative;
  overflow: hidden;

  .toptit::before {
    content: "RANKING";
  }

  .crown {
    position: absolute;
    top: 1%;
    right: 0;
    z-index: 2;
      opacity: var(--crown-opacity, 0);
  transform: translateY(var(--crown-y, 40px)) scale(var(--crown-scale, 0.8));
  transform-origin: center center;
  will-change: opacity, transform;
  pointer-events: none;
   img {
  display: block;
  width: 100%;
  height: auto;
}
  }

  .rankbox {
    z-index: 3;
    position: relative;
    width: 98%;
    margin: auto;
  }

  .ranks {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: auto auto 50px;
  }

  .rank-card {
    background: transparent;
    border: 0;
    text-align: center;
    overflow: hidden;

    .img {
      position: relative;
      overflow: hidden;

      > img {
        width: 100%;
        aspect-ratio: 1/1.3;
        object-fit: cover;
        max-width: 100%;
      }
    }

    .plof {
      background: url(../images/topranking_inbg.png) no-repeat bottom center /
        100%;
      padding-bottom: 30px;

      img.rank {
        width: 100%;
      }

      .name {
        padding: 20px 0;
        font-size: 1.6em;
      }

      .size {
        padding: 5px 0;
        text-align: center;
        font-size: 1em;
        background: #bbe5f9;
      }
    }
  }
}

#top footer {
  padding: 200px 0 0;
  margin: -60px 0 0;
}

footer {
  padding: 100px 0 0;
  color: #fff;
  background: #0078b0;
  margin: 0;

  #pagetop {
    width: 75px;
    height: 75px;
    border: 2px solid var(--navy);
    color: var(--navy);
    border-radius: 50%;
    text-align: center;
    background: #fff;
    font-size: 0.7em;
    align-content: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    cursor: pointer;

    span {
      display: block;
    }
  }
  #pagetop:hover {
    background: var(--navy);
    color: #fff;
  }

  .footer--inner {
    max-width: 1650px;
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-around;

    .footer-inner {
      a.logo {
        width: 365px;
        margin-bottom: 45px;
        display: block;
      }

      .tel {
        font-size: 1.5em;
        margin: auto auto 20px;
        text-align: center;
      }

      .open {
        font-size: 1.3em;
        margin: auto auto 35px;
        text-align: center;
      }

      .sns {
        display: flex;
        justify-content: center;

        a {
          margin: 0 5px;
        }
      }
    }

    nav {
      ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 100px;
        li{
          a{
            text-decoration: none;
                color: transparent;
                background: linear-gradient(90deg, var(--blue) 50%, #fff 50%);
                background-size: 200% 100%;
                background-position: right bottom;
                -webkit-background-clip: text;
                background-clip: text;
                transition: background-position 0.4s ease;
                 &:hover {
          background-position: left bottom;
        }
          }
        }
      }
    }
  }

  copy {
    display: block;
    margin-top: 38px;
    padding: 10px 0;
    text-align: center;
    background: #d9f3ff;
    color: var(--navy);
  }
}

.contents_title {
  background: url(../images/contents_title_bg.jpg) no-repeat center / cover;
  min-height: 430px;
  position: relative;
  text-align: center;
  align-content: center;

  h2 {
    font-size: 2em;
    z-index: 3;
    position: relative;
    margin: auto;
    filter: drop-shadow(0 0 10px #fff);

    em {
      font-size: 4em;
      font-family: var(--font02);
      font-style: normal;
      display: block;
      font-weight: 100;
      background: linear-gradient(0deg, var(--navy) 0%, var(--blue) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  &:after {
    content: "";
    display: block;
    background: url(../images/contents_title_hana.png) no-repeat center top;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
  }

  &:before {
    content: "";
    display: block;
    background: url(../images/contents_title_obi.png) no-repeat center center / 100% 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    opacity: 0;
    transform: translateX(-50px);
    animation: titleObiFadeIn 1s ease forwards;
  }
}

@keyframes titleObiFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-300px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.contents {
  background: url(../images/contents_bg01.png) repeat center center;
}

#event .contents {
  padding: 50px 0 0;

  .event-detail {
    width: 95%;
    margin: auto;
    max-width: 1750px;
    padding: 0 0 100px;

    .event-image {
      width: fit-content;
      margin: auto auto 20px;

      img {
      }
    }

    .event-content {
      background: #fff;
      padding: 45px 30px;

      section {
        height: auto;
        max-height: 700px;
        overflow-y: auto;

        h3 {
          background: var(--navy);
          color: #fff;
          font-size: 1.8em;
          padding: 10px;
          margin: 0 auto 60px;
          text-align: center;
          width: fit-content;
        }

        .text {
          font-size: 1.6em;
          line-height: 1.3;
        }
      }
    }
  }
}

#girls,
#gonow,
#schedule,
#newface,
#news {
  .contents {
    padding: 50px 0 100px;
  }
}

#girls,
#gonow,
#schedule {
  .girl-card {
    margin: 0 0 20px;
  }
}

#schedule {
  .day-nav {
    margin: 0 auto;
  }

  .day-tabs {
    display: flex;
    gap: 18px;
    margin: 0 auto 60px;
    padding: 0;
    list-style: none;
    justify-content: center;
  }

  .day-tabs__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    height: 68px;
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 1.6em;

    transition:
      background-color 1s ease,
      color 0.8s ease;

    span {
      margin-left: 2px;
      font-size: 0.7em;
    }

    &:hover {
      background: var(--blue2);
    }
  }

  .day-tabs__item.is-active a {
    background: var(--blue);
    color: #fff;
  }
}

#newface {
  .newfacebs {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 50px;
    align-items: stretch;
  }
}

#news {
  article a {
    padding: 70px 45px;
    grid-template-columns: 600px 1fr;
    gap: 60px;
                img {
                width: 100%;
                max-width: 100%;
                height: auto;
            }
    .text {
      line-height: 1.5;
    }
  }
}

#ranking {
  .contents {
    padding: 0;
    width: 100%;
    padding: 40px 0 0;

    .currentmonth {
      margin: 0 auto 70px;
      font-size: 1.8em;
      color: #fff;
      background: linear-gradient(90deg, #0cb4f3, #0b577b, #0cb4f3);
      width: 470px;
      height: 75px;
      text-align: center;
      align-content: center;
    }

    .ranking {
      .rank-card {
        padding: 90px 0;

        a {
          display: grid;
          grid-template-columns: 660px 1fr;
          gap: 50px;
          max-width: 1600px;
          width: 98%;
          margin: auto;

          .img {
            overflow: hidden;
            position: relative;
            background: #fff;
            border: 10px solid;
            border-image-slice: 1;
            padding: 20px;

            > img {
              box-shadow: 0 0 10px #adadad;
              max-width: 100%;
              width: 100%;
              
            }

            .icon {
              position: absolute;
              top: 5px;
              right: 5px;
            }
          }

          .prof {
            .rank {
              width: 560px;
              margin: auto;
            }

            .namebox {
              display: flex;
              margin: 0 auto 20px;

              .name {
                width: 55%;
                background: var(--navy);
                color: #fff;
                margin: 0 2.5px 0 0;
                padding: 15px 20px;
                clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
                font-size: 1.5em;
              }

              .size {
                width: 45%;
                background: var(--navy);
                color: #fff;
                margin: 0 0 0 -10px;
                align-content: end;
                padding: 15px 20px;
                text-align: right;
                clip-path: polygon(
                  calc(0% + 20px) 0,
                  100% 0,
                  100% 100%,
                  0 100%
                );
              }
            }

            .text {
              background: #fff;
              border: 1px solid var(--navy);
              padding: 20px;

              > div {
                height: auto;
                max-height: 335px;
                overflow-y: auto;
                line-height: 1.3;
              }
            }
          }
        }
      }

      .rank-card.no1 {
        background: url(../images/rank1_bg.jpg) repeat center center;
        a {
          .img {
            border-image: linear-gradient(
              to top left,
              #84632d,
              #f5ebb4,
              #84632d
            );
            border-image-slice: 1;
          }
        }
      }

      .rank-card.no2 {
        background: url(../images/rank2_bg.jpg) repeat center center;
        a {
          .img {
            border-image: linear-gradient(
              to top left,
              #a5a5a5,
              #ececec,
              #a5a5a5
            );
            border-image-slice: 1;
          }
        }
      }

      .rank-card.no3 {
        background: url(../images/rank1_bg.jpg) repeat center center;
        a {
          .img {
            border-image: linear-gradient(
              to top left,
              #775c4b,
              #f2d2b5,
              #775c4b
            );
            border-image-slice: 1;
          }
        }
      }

      .rank-card.no4 {
        background: url(../images/rank2_bg.jpg) repeat center center;
        a {
          .img {
            border-image: linear-gradient(
              to top left,
              #5d9bb9,
              #5d9bb9,
              #5d9bb9
            );
            border-image-slice: 1;
          }
        }
      }

      .rank-card.no5 {
        background: url(../images/rank1_bg.jpg) repeat center center;
        a {
          .img {
            border-image: linear-gradient(
              to top left,
              #5d9bb9,
              #5d9bb9,
              #5d9bb9
            );
            border-image-slice: 1;
          }
        }
      }
    }
  }
}

#system {
  .silver_bg {
    background: linear-gradient(45deg, #a5a5a5, #eeeeee, #a5a5a5);
    color: #5a5a5a;
  }

  .gold_bg {
    background: linear-gradient(45deg, #968261, #faf2e3, #968261);
    color: #6e5327;
  }

  .platinum_bg {
    background: linear-gradient(45deg, #a8989b, #f8eff1, #a8989b);
    color: #640c1d;
  }

  .bana {
    width: fit-content;
    margin: auto;
    display: block;
  }

  .contents {
    padding: 90px 0 150px;

    .system_tit {
      display: flex;
      align-content: center;
      justify-content: center;
      line-height: 1;
      padding: 30px 0 10px;

      em {
        font-size: 4.5em;
        font-family: var(--font03);
        padding: 0 20px 0 0;
      }

      span {
        font-size: 1.6em;

        line-height: 1.3;
      }
    }

    #system_course {
      width: 95%;
      margin: auto auto 50px;
      border: 2px solid;
                        border-image: linear-gradient(to top left, #057ea9, #0bb5f1, #057ea9);
                        border-image-slice: 1;
      background: #fff;
      padding: 50px 0;

      .system_tit {
        width: 95%;
        margin: auto;
        text-align: center;
        border-bottom: 1px solid var(--navy);
        font-weight: 100;
        background: linear-gradient(0deg, var(--navy) 0%, var(--blue) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        span {
          align-content: center;
        }
      }

      .content {
        width: 95%;
        margin: auto;

        .card {
          display: flex;
          justify-content: center;
          margin: 40px 0 30px;

          div {
            font-size: 1.4em;
            padding: 10px;
            margin: 0 5px 0 0;
          }

          span {
            font-size: 1.1em;
            align-content: center;
            margin: 0 50px 0 0;
          }

          span:last-of-type {
            margin: 0;
          }
        }

        p {
          font-size: 1.1em;
          text-align: center;

          span:first-of-type {
            margin: 0 40px 0 0;
          }
        }
      }
    }

    #system_price {
      margin: auto auto 50px;

      .system_tit {
        width: 95%;
        margin: auto auto 20px;
        text-align: center;
        background: linear-gradient(0, #0cb5f4, #0b5b80);
        color: #fff;

        span {
          line-height: 1.3;
          align-content: top;
        }
      }

      .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 20px;
        /* max-width: 1600px;*/
        width: 95%;
        margin: auto auto 25px;

        .priceboxs {
          background: #fff;

          .pricetit {
            font-size: 1.9em;
            padding: 10px 0;
            text-align: center;
            align-content: center;
            display: flex;
            justify-content: center;

            svg {
              margin: auto 5px;
            }
          }

          .pricecontent {
            padding: 40px;
            font-weight: 500;

            p {
              font-size: 1.1em;
              text-align: center;
              margin: auto auto 40px;
              text-decoration: underline;
            }

            dl {
              display: flex;
              justify-content: center;
              margin: 0 0 30px;

              dt {
                text-align: right;
                margin: 0 50px 0 0;
                font-size: 1.8em;
                align-content: end;
                width: 120px;
              }

              dd {
                text-align: left;
                font-size: 2.8em;

                span {
                  font-size: 0.7em;
                }
              }
            }
          }

          &.general {
            border: 2px solid var(--navy);
            border-image-slice: 1;
            .pricetit {
              background: var(--navy);
              color: #fff;

              svg {
                path {
                  fill: #fff;
                }
              }
            }
          }

          &.silver {
            border: 2px solid;
            border-image: linear-gradient(to top left, #a5a5a5, #eeeeee, #a5a5a5);
            border-image-slice: 1;
            .pricecontent {
              color: #5a5a5a;

              svg {
                path {
                  fill: #5a5a5a;
                }
              }
            }
          }

          &.gold {
            border: 2px solid;
            border-image: linear-gradient(to top left, #a8989b, #f8eff1, #a8989b);
            border-image-slice: 1;
            .pricecontent {
              color: #6e5327;

              svg {
                path {
                  fill: #6e5327;
                }
              }
            }
          }

          &.platinum {
            border: 2px solid;
            border-image: linear-gradient(to top left, #a8989b, #f8eff1, #a8989b);
            border-image-slice: 1;
            .pricecontent {
              color: #640c1d;

              svg {
                path {
                  fill: #640c1d;
                }
              }
            }
          }
        }
      }

      p.note {
        background: #fff;
        padding: 5px;
        text-align: center;
      }
    }

    #system_dgcourse {
      background: url(../images/system_dgcourse_bg.jpg);
      width: 100%;
      max-width: 2000px;
      margin: auto auto 50px;
      height: 720px;
      align-content: center;

      .system_tit {
        width: fit-content;
        border-bottom: 1px solid var(--navy);
        padding: 0 50px;
        margin: auto auto 70px;

        span {
          align-content: center;
        }
      }

      .content {
        padding: 0;

        p {
          font-size: 1.6em;
          text-align: center;
          margin: auto;
        }

        .pricebox {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px 20px;
          margin: 40px auto;
          max-width: 1800px;

          dl {
            display: grid;
            grid-template-columns: 130px 1fr;
            gap: 10px;
            justify-content: center;

            margin: 0 auto 30px;
            background: linear-gradient(0deg, #0cb4f3 0%, #0b709b 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;

            dt {
              text-align: right;
              margin: 0 50px 0 0;
              font-size: 1.8em;
              align-content: end;
              width: 120px;
            }

            dd {
              text-align: left;
              font-size: 2.8em;

              span {
                font-size: 0.7em;
              }
            }
          }
        }
      }
    }
  }
}

#system_othercourses {
  width: 95%;
  margin: auto;

  .system_box {
    width: 100%;
    margin: auto auto 50px;

    .system_tit {
      width: 100%;
      margin: auto;
      text-align: center;
      background: linear-gradient(0, #0b5b80, #0cb5f4);
      color: #fff;

      span {
        align-content: center;
      }
    }

    .content {
      background: #fff;
      padding: 20px;
      border: 2px solid;
      border-image: linear-gradient(to top center, #0b5b80, #0cb7f7, #0b5b80);
      border-image-slice: 1;

      .pricebox {
        display: grid;
        max-width: 1600px;
        gap: 20px 20px;
        margin: 40px auto;

        dl {
          display: grid;
          gap: 10px;
          margin: 0 0 30px;

          dt {
            margin: 0;
            font-size: 1.6em;
            align-content: end;
            align-content: center;
          }

          dd {
            font-size: 2.4em;
            align-content: center;

            span {
              font-size: 0.7em;
            }
          }
        }
      }

      p {
        font-size: 1.1em;
        text-align: center;
        padding: 20px 0 40px;
        line-height: 1.3;
      }
    }
  }

  .system_box#system_3p {
    .content {
      .pricebox {
        grid-template-columns: repeat(3, 1fr);
                        width: 1300px;

        dl {
          grid-template-columns: 100px 1fr;
        }
      }
    }
  }

  .system_box#system_option {
    .content {
      .pricebox {
        grid-template-columns: repeat(3, 1fr);
                        max-width: 1330px;

        dl {
          grid-template-columns: 230px 1fr;
        }
      }
    }
  }

  .system_box#system_another {
    .content {
      .pricebox {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1100px;

        dl {
          grid-template-columns: 200px 1fr;
        }
      }
    }
  }

  .system_box#system_area {
    .content {
      .pricebox {
        grid-template-columns: repeat(1, 1fr);
        margin: auto;
        gap: 0;
        max-width: 1600px;

        dl {
          grid-template-columns: 210px 1fr;
          border-bottom: 2px solid var(--navy);
          padding: 30px 20px;
          margin: auto 0;

          dt {
            line-height: 1.5;
          }
        }

        dl:last-of-type {
          border: none;
        }
      }
    }
  }

  .system_box#system_termsofuse {
    margin: 80px auto 0;

    .content {
      padding: 50px 60px;

      p {
        line-height: 2;
        font-size: 1.3em;
        text-align: left;
      }

      h4 {
        font-size: 1.6em;
        justify-content: space-between;
        display: flex;
        margin: 50px auto 35px;

        &::after,
        &::before {
          content: "";
          margin: auto 20px;
          height: 2px;
          width: 35%;
          background-color: var(--navy);
        }
      }
    }
  }
}

#recruit {
  .contents {
    padding: 50px 0 150px;

    .recruit_contents {
      background: #fff;
      width: 95%;
      max-width: 1700px;
      margin: auto;
      padding: 100px 0 0;

      .content {
        width: 95%;
        max-width: 1370px;
        margin: auto;
        padding: 0 0 100px;

        h3.tit {
          background: #0b577b;
          color: #fff;
          padding: 10px 35px;
          font-size: 1.4em;
          margin: auto auto 30px;
        }

        p {
          padding: 0 0 50px;
          font-size: 1.1em;
          color: #588aa2;
          line-height: 1.5;
          font-weight: 500;
        }

        table {
          border-top: 2px solid var(--navy);
          border-left: 2px solid var(--navy);
          border-right: 2px solid var(--navy);
          border-collapse: collapse;
          width: 100%;

          tbody {
            tr {
              border-bottom: 2px solid var(--navy);

              th {
                background: #588aa2;
                color: #fff;
                width: 175px;
                font-size: 1.4em;
                border-right: 2px solid var(--navy);
                font-weight: 500;
              }

              td {
                line-height: 1.5;
                padding: 15px 30px;
                font-size: 1.2em;
                font-weight: 100;
              }
            }
          }
        }
      }

      .femalecast.content {
      }

      .frontstaff.content {
      }

      .driver.content {
      }
    }
  }
}

#hotel {
  .contents.hotel {
    padding: 100px 0 200px;

    > div {
      width: 90%;
      display: flex;
      margin: auto;
      justify-content: space-around;
      max-width: 810px;

      a {
        width: 45%;
        margin: auto 0;
        max-width: 380px;
        display: block;
        height: 68px;
        align-content: center;
        text-align: center;
        background: linear-gradient(90deg, #0cb5f4, #0b5b80, #0cb5f4);
        color: #fff;
      }
    }
  }

  .contents.hotel_area {
    padding: 100px 0 150px;

    h3 {
      width: 95%;
      margin: auto auto 50px;
      max-width: 1230px;
      background: var(--navy);
      font-size: 1.8em;
      padding: 15px;
      color: #fff;
      text-align: center;
    }

    ul {
      display: grid;
      max-width: 1230px;
      gap: 30px 30px;
      margin: auto auto 60px;
      width: 95%;
      grid-template-columns: repeat(2, 1fr);

      li {
        border: 3px solid transparent;
        border-image: linear-gradient(
            20deg,
            #0b5b80 0%,
            #0cb7f7 50%,
            #0b5b80 100%
          );
        background: #fff;

        box-sizing: border-box;
        border-image-slice: 1;

        a {
          width: 100%;
          height: 70px;
          text-align: center;
          align-content: center;
          display: block;
          font-size: 1.4em;
        }
      }

      li:hover {
        background: linear-gradient(90deg, #0cb5f4, #0b5b80, #0cb5f4);
        border-image: linear-gradient(90deg, #0cb5f4, #0b5b80, #0cb5f4) 1;
        color: #fff;
      }
    }
  }

  .contents.hotel_list {
    padding: 100px 0 200px;

    h3 {
      width: 95%;
      margin: auto auto 50px;
      max-width: 1230px;
      background: var(--navy);
      font-size: 1.8em;
      padding: 15px;
      color: #fff;
      text-align: center;
    }

    .hotel-list {
      max-width: 1230px;
      margin: auto;
      width: 100%;

      .hotel-head {
        display: grid;
        max-width: 1230px;
        gap: 0;
        margin: auto;
        width: 100%;
        grid-template-columns: 15% 20% 15% 1fr;
        border-bottom: 2px solid var(--navy);
        border-top: 2px solid var(--navy);
        border-left: 2px solid var(--navy);
        font-size: 1.4em;
        background: #588aa2;
        color: #fff;

        span {
          border-right: 2px solid var(--navy);
          padding: 20px;
        }
      }

      ul.hotel-items {
        li a {
          display: grid;
          max-width: 1230px;
          gap: 0;
          margin: auto;
          width: 100%;
          grid-template-columns: 15% 20% 15% 1fr;
          border-left: 2px solid var(--navy);
          border-bottom: 2px solid;
          font-size: 1.2em;
          background: #fff;

          span {
            border-right: 2px solid;
            padding: 20px;
          }
        }

        li a:hover {
          background: #87cbeb;
        }
      }
    }
  }

  .contents.hotel_info {
    padding: 100px 0 200px;

    h3 {
      width: 95%;
      margin: auto;
      max-width: 1230px;
      background: var(--navy);
      font-size: 1.8em;
      padding: 15px;
      color: #fff;
      text-align: center;
    }

    .hotel-info {
      background: #fff;
      width: 95%;
      margin: auto;
      max-width: 1230px;
      padding: 50px 50px 100px;

      .hotel-head {
        font-size: 1.4em;
        display: grid;
        gap: 50px;
        grid-template-columns: 350px 1fr;
        width: fit-content;
        margin: auto auto 50px;
      }

      .btn {
        display: block;
        font-size: 20px;
        position: relative;
        padding: 0;
        width: 360px;
        margin: 70px auto;
        border: 2px solid var(--navy);
        color: var(--navy);
        text-align: center;
        justify-content: space-between;
        align-items: center;
        transition: 0.5s;
        height: 70px;
        align-content: center;
      }
    }
  }
}
#reserve {
  .contents {
    padding: 50px 0 150px;
    .reserve_text {
      width: 95%;
      max-width: 1700px;
      margin: auto auto 50px;
      background: var(--navy);
      padding: 35px;
      p {
        font-size: 0.9em;
        color: #fff;
        line-height: 1.5;
        width: fit-content;
        margin: auto;
        em {
          font-size: 1.3em;
          display: block;
          text-align: center;
          margin: auto auto 20px;
        }
      }
    }
    .reserve_form {
      width: 95%;
      max-width: 1700px;
      margin: auto;
      background: #fff;
      padding: 50px 80px;
      .reserve-form {
        .form-error {
          color: #f00;
          font-size: 0.8em;
        }
      }

      .form-block {
        margin-bottom: 36px;
        border: none;
        padding: 0;
      }

      .form-label {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.08em;
      }

      .required,
      .optional {
        display: inline-block;
        margin-left: 6px;
        padding: 2px 6px;
        color: #fff;
        font-size: 12px;
        line-height: 1;
      }

      .required {
        background: #06486b;
      }

      .optional {
        background: #999;
      }

      .form-input {
        width: 480px;
        height: 42px;
        padding: 8px 12px;
        border: 1px solid #0b5b80;
        color: #06486b;
        box-sizing: border-box;
        display: block;
        margin: 10px 0 0;
      }

      .form-note {
        margin: 10px 0;
        font-size: 14px;
        letter-spacing: 0.08em;
      }

      .choice-list {
        display: grid;
        grid-template-columns: repeat(6, 1fr);

        flex-wrap: wrap;
        gap: 20px;

        .choice {
          position: relative;
          cursor: pointer;

          span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            min-height: 46px;
            padding: 8px 18px;
            border: 1px solid #0b5b80;
            background: #fff;
            color: #06486b;
            line-height: 1.3;
            text-align: center;
            box-sizing: border-box;
          }
          input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            display: block;
          }
          input:checked + span {
            background: #12aee8;
            color: #fff;
            border: 1px solid #12aee8;
          }
        }

        .course-list .choice span {
          min-width: 220px;
        }
      }
      .date-list .choice span {
        min-width: 140px;
      }
      .choice-list.option-list {
        grid-template-columns: repeat(7, 1fr);
      }
      .option-list .choice span {
        min-width: 140px;
        min-height: 58px;
        font-size: 16px;
      }
      .dangan-option {
        .form-label {
          margin: 10px 0;
        }
      }
      .form-select {
        width: 210px;
        height: 48px;
        padding: 8px 36px 8px 16px;
        border: 1px solid #0b5b80;
        background: #fff;
        color: #06486b;
        box-sizing: border-box;
        display: block;
        margin: 10px 0 0;
      }

      .form-textarea {
        width: 100%;
        margin: 10px auto auto;
        height: 120px;
        padding: 12px;
        border: 1px solid #0b5b80;
        color: #06486b;
        box-sizing: border-box;
        resize: vertical;
      }

      .form-submit {
        margin-top: 50px;
        text-align: center;
      }

      .submit-btn {
        place-items: center;
    width: 270px;
    height: 60px;
    margin: auto;
    font-size: 1.2em;
    font-family: var(--font02);
    color: #fff;
    background: linear-gradient(90deg, #09b1ef, #0b5b81, #09b1ef);
    letter-spacing: 0.18em;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
      }
   .submit-btn::before {
  background: #fff;
  width: auto;
}
 .submit-btn::after {
  content: "⇀";
  margin: auto 0 auto 10px;
}

 .submit-btn:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
    }
    /*reserve_confirmation*/
    .reserve_confirmation {
      width: 95%;
      max-width: 1700px;
      margin: auto;
      background: #fff;
      padding: 50px 80px 85px;
      p {
        font-size: 1.8em;
        text-align: center;
        font-weight: 600;
      }
      form {
        margin: auto;
        width: 100%;
        max-width: 700px;
        .confirm-list {
          padding: 20px 0 100px;
          .confirm-item {
            padding: 50px 0 15px;
            border-bottom: 2px solid var(--navy);

            dt {
              padding: 0 0 15px;
              font-weight: 600;
              font-size: 1.4em;
            }
            dd {
              font-size: 1.3em;
            }
          }
        }
        .confirm-buttons {
          .confirm-button {
            width: 270px;
            height: 60px;
            margin: auto auto 15px;
            display: block;
            font-size: 1.2em;
            font-family: var(--font02);
            color: #fff;
            position: relative;
          }
          .confirm-button.back {
            background: #588aa2;
            &::before {
              content: "↼";
              position: absolute;
              top: 0;
              bottom: 0;
              left: 30px;
              align-content: center;
            }
          }
           .confirm-button:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
          .confirm-button.submit {
            background: linear-gradient(90deg, #09b1ef, #0b5b81, #09b1ef);
            &::after {
              content: "⇀";
              position: absolute;
              top: 0;
              bottom: 0;
              right: 30px;
              align-content: center;
            }
          }
           .confirm-button:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
        }
      }
    }
    /*reserve_fin*/
    .reserve_fin {
      width: 95%;
      max-width: 1700px;
      margin: auto;
      background: #fff;
      padding: 50px 80px 85px;
      img {
        display: block;
        width: fit-content;
        margin: auto auto 30px;
      }
      h3 {
        font-size: 1.8em;
        font-weight: 600;
        text-align: center;
        margin: auto auto 50px;
      }
      p {
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5;
        margin: auto auto 100px;
      }
      a {
        background: linear-gradient(90deg, #09b1ef, #0b5b81, #09b1ef);
        width: 270px;
        height: 60px;
        margin: auto;
        display: block;
        font-size: 1em;
        font-family: var(--font02);
        color: #fff;
        position: relative;
        text-align: center;
        align-content: center;
        line-height: 1;
        &::after {
          content: "⇀";
          position: absolute;
          top: 0;
          bottom: 0;
          right: 30px;
          align-content: center;
        }
      }
         a:hover {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
}
    }
  }
}
.pager {
  padding: 70px 0 60px;

  ul.pagination {
    display: flex;
    justify-content: center;

    li {
      margin: auto 10px;

      a {
        position: relative;
        width: 55px;
        height: 65px;
        font-size: 1.9em;
        text-align: center;
        align-content: center;
        color: var(--navy);
        display: block;
        overflow: hidden;
        background-color: #fff;
        box-sizing: border-box;

        background-image:
          linear-gradient(var(--navy), var(--navy)),
          linear-gradient(var(--navy), var(--navy)),
          linear-gradient(var(--navy), var(--navy)),
          linear-gradient(var(--navy), var(--navy));

        background-position:
          right bottom,
          right bottom,
          right top,
          left bottom;

        background-size:
          0 1px,
          1px 0,
          0 1px,
          1px 0;

        background-repeat: no-repeat;

        transition:
          color 0.3s ease,
          background-size 0.35s ease,
          background-color 0.3s ease;
      }

      a:hover {
        background-size:
          100% 1px,
          1px 100%,
          100% 1px,
          1px 100%;
      }

      a.dot:hover {
        background-size:
          0 1px,
          1px 0,
          0 1px,
          1px 0;
      }

      a.active {
        background-color: var(--navy);
        color: #fff;
      }
    }
  }
}