@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');

:root {
  --font-sans-serif: "Zen Kaku Gothic New", sans-serif;
  --font-serif: serif;
  --color-body: #000;
  --color-link: #0d6efd;
  --max-width-container: 1920px;
  --padding-container: 12px;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans-serif);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.3;
  color: var(--color-body);
}

section {
  position: relative;
}

a:where(:any-link, :hover) {
  color: var(--color-link);
}

a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, dl, dt, dd {
  font-family: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

.my-ajax-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.my-body {
  background-color: #97D3D3;
}

.my-inner {
  position: relative;
  padding: 0 var(--padding-container);
  z-index: 1;
}

.my-container {
  position: relative;
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--padding-container);
}

.my-header {
  position: relative;
  height: 65.86vw;
  overflow: hidden;
  text-align: center;
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc((100vw - 125vw) / 2);
    width: 125vw;
    height: 125vw;
    background: #4FBDBA;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: calc((125vw - 123.4375vw) / 2);
    left: calc((100vw - 123.4375vw) / 2);
    width: 123.4375vw;
    height: 123.4375vw;
    border: 1px solid #fff;
    border-radius: 50%;
  }
  h1 {
    img {
      display: block;
      width: 85.9vw;
      margin: 3.125vw auto 0;
    }
  }
}

.my-main {
  position: relative;
}

#top00 {
  margin-top: 5.5vw;
  text-align: center;
  h2 {
    font-size: 1.66em;
    margin-bottom: 1em;
  }
  p {
    line-height: 1.5;
  }
  dl {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--max-width-container);
    margin-top: 3em;
    dt {
      font-size: 1.2em;
      text-align: center;
      width: 100%;
      padding-bottom: 1em;
      margin-bottom: 1em;
      border-bottom: 1px solid #fff;
    }
    dd {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
    }
  }
}

#top01 {
  margin-top: 6em;
  .my-inner {
    display: flex;
    justify-content: center;
    dl {
      display: flex;
      align-items: center;
      gap: 1.5em;
      padding-bottom: 3px;
      font-size: 1.66em;
      font-weight: 900;
      + dl {
        margin-top: 3.33em;
      }
      dt {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.33em;
        height: 3.33em;
        background: #fff;
        border-radius: 50%;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16);
      }
      dd {
        flex: 1;
        strong {
          font-size: 1.4em;
        }
        small {
          display: block;
          font-size: .73em;
          margin-top: .5em;
        }
      }
      &.-price {
        dd {
          small {
            display: flex;
            font-size: .6em;
          }
        }
      }
    }
  }
}

#top02 {
  margin-top: 7.8vw;
  padding-top: 4.63em;
  padding-bottom: 5em;
  font-weight: bold;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% - 100em) / 2);
    width: 100em;
    height: 100em;
    background: #1A3060;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    top: calc((102em - 100em) / 2);
    left: calc((100% - 98em) / 2);
    width: 98em;
    height: 98em;
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .my-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    h2 {
      font-size: 2.22em;
      font-weight: 900;
      text-align: center;
      img {
        display: block;
        width: auto;
        height: 2.36em;
        margin-top: -.65em;
      }
    }
    ol, ul {
      margin: 3.33em 0 6.43em;
      line-height: 2.5;
    }
    ul {
      list-style: none;
      padding: 0;
    }
  }
}

#top03 {
  --circle-size: min(100em, 1500px);
  --circle-size-inner: min(99em, 1480px);
  height: var(--circle-size);
  margin-top: 7.8vw;
  padding-top: min(8.88em, 150px);
  padding-bottom: 12em;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% - var(--circle-size)) / 2);
    width: var(--circle-size);
    height: var(--circle-size);
    background: #0095AC;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    top: calc((var(--circle-size) - var(--circle-size-inner)) / 2);
    left: calc((100% - var(--circle-size-inner)) / 2);
    width: var(--circle-size-inner);
    height: var(--circle-size-inner);
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .my-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    h2 {
      font-size: 2.22em;
      font-weight: 900;
      color: #fff;
      text-align: center;
      img {
        display: block;
        width: auto;
        height: 2.36em;
        margin-top: -.65em;
      }
    }
    iframe {
      display: block;
      width: 100%;
      max-width: 770px;
      margin: 3em auto 2em;
    }
    > p {
      color: #fff;
    }
  }
}

#top04 {
  --circle-size: 150vw;
  --circle-size-inner: 148.5vw;
  margin-top: 7.8vw;
  padding-top: 8.88em;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% - var(--circle-size)) / 2);
    width: var(--circle-size);
    height: var(--circle-size);
    background: #4FBDBA;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    top: calc((var(--circle-size) - var(--circle-size-inner)) / 2);
    left: calc((100% - var(--circle-size-inner)) / 2);
    width: var(--circle-size-inner);
    height: var(--circle-size-inner);
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .my-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    &::after {
      content: '';
      position: absolute;
      top: calc(var(--circle-size) / 2);
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #4FBDBA;
      z-index: -1;
    }
    h2 {
      font-size: 2.22em;
      font-weight: 900;
      color: #fff;
      text-align: center;
      img {
        display: block;
        width: auto;
        height: 2.36em;
        margin-top: -.65em;
      }
    }
    form {
      margin-top: 4em;
    }
  }
}

.my-footer {
  position: relative;
  background: #4FBDBA;
  text-align: center;
  color: #fff;
  padding-top: 10em;
  img {
    display: block;
    max-width: 100%;
    margin: 9vw auto 8vw;
  }
  small {
    display: block;
    font-size: 10px;
    padding: 3px;
  }
}

@media (min-width: 2000px) {
  #top03 {
    &::before {
      left: calc((100% - var(--circle-size)) / 2);
    }
  }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  #top03 {
    padding-top: 5em;
    padding-bottom: 12em;
    .my-inner {
      iframe {
        margin: 2em auto 1.5em;
      }
    }
  }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #top03 {
    .my-inner {
      padding: 0;
    }
  }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .my-header {
    height: 201.86vw;
    .my-inner {
      overflow: hidden;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 30vw;
        background: #4FBDBA;
        z-index: -1;
      }
    }
    &::before {
      left: calc((100vw - 197.67vw) / 2);
      width: 197.67vw;
      height: 197.67vw;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: calc((197.67vw - 193.02vw) / 2);
      left: calc((100vw - 193.02vw) / 2);
      width: 193.02vw;
      height: 193.02vw;
    }
    h1 {
      img {
        width: 97.67vw;
        margin: 16.28vw auto 0;
      }
    }
  }

  #top00 {
    text-align: left;
    p {
      font-size: 18px;
    }
    dl {
      font-size: 18px;
    }
  }
  #top02 {
    .my-inner {
      ol, ul {
        font-size: 18px;
        margin: 2em 0 3em;
        line-height: 2;
      }
    }
  }
  #top03 {
    --circle-size: 122em;
    --circle-size-inner: 121em;
  }
}

/* guest */
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 20px;
}

.guest-all-contents {
  display: flex;
  margin: 0 auto;
  width: 960px;
}

.guest-textcontents {
  padding-left: 30px;
}

.guest-contents {
  font-size: 1.66em;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

span.guest-name-border {
  border-bottom: solid 3px #97D3D3;
}

.guest-sub-contents {
  padding-bottom: 35px;
  line-height: 2rem;
  font-size: 0.9em;
}

.guest-img {
  width: 80%;
}

.guest-subtext-contents {
  width: 960px;
  margin: 40px 0 6.43em 0;
  line-height: 3rem;
}

.sp-only-display {
  display: none;
  }

  .pc-only-display {
    display: block;
  }

@media (max-width: 767.98px) {

  .sp-only-display {
  display: block;
  }

  .pc-only-display {
    display: none;
  }

  .guest-all-contents {
    display: block;
    margin: 0 auto;
    width: 100%;
}
  .guest-img {
    width: 100%;
}

.guest-textcontents {
  padding-left: 0px;
}

.guest-contents-duble {
  padding-top: 30px;
}

.guest-subtext-contents {
  width: 100%;
  margin: 50px 0 6.43em 0;
  line-height: 3rem;
}
#top02 {
  &::before {
      content: '';
      position: absolute;
      top: 0;
      left: calc((100% - 163em) / 2);
      width: 163em;
      height: 163em;
      background: #1A3060;
      border-radius: 50%;
  }
}

#top02 {
  &::after {
      content: '';
      position: absolute;
      top: calc((103em - 102em) / 2);
      left: calc((100% - 162em) / 2);
      width: 162em;
      height: 162em;
      border: 1px solid #fff;
      border-radius: 50%;
  }
}

.guest-sub-contents {
  padding-bottom: 0px;
}
}