@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Roboto:wght@400;700&display=swap");

:root {
  --maincolor: #20a2e5;
  --subcolor: #dcdcdc;
  --textcolor: #333;
  --white: #fff;
  --black: #000;
  --notojp: "Noto Sans JP", sans-serif;
  --nototw: "Noto Sans TC", sans-serif;
  --notokr: "Noto Sans KR", sans-serif;
  --roboto: "Roboto", sans-serif;
  font-size: 10px;
  @media screen and (max-width: 1300px) {
    font-size: calc(100vw * 10 / 1300);
  }
  @media screen and (max-width: 743px) {
    font-size: calc(100vw * 10 / 390);
  }
}

select {
  width: 100%;
  border: none;
  -webkit-appearance: none;
}

.win select {
  -webkit-appearance: auto;
}

.flex {
  display: flex;
}

.grecaptcha-badge {
  visibility: hidden;
}

body {
  color: var(--textcolor);
  font-family: var(--notojp);
  font-size: 1.4rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  line-height: 1.6;
  text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  &.lang_en {
    font-family: var(--roboto);
  }
  &.lang_tw {
    font-family: var(--nototw);
  }
  &.lang_kr {
    font-family: var(--notokr);
  }
  &.show {
    opacity: 1;
  }
}

#header {
  width: 100%;
  height: 7rem;
  padding: 0 4rem;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.95);
  .header_area {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    height: 100%;
    z-index: 100;
    h1 {
      a {
        display: flex;
        align-items: center;
        transition: 300ms;
        img {
          width: auto;
          height: 4rem;
        }
        span {
          line-height: 1;
          font-size: 2rem;
          margin-left: 2rem;
          .sp1 {
            margin-left: 0;
          }
        }
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .glb {
      display: flex;
      align-items: center;
      .pcTel {
        a {
          display: block;
          dl {
            display: flex;
            align-items: baseline;
            font-size: 1.2rem;
            font-family: var(--roboto);
            font-weight: 700;
            dt {
              font-size: 1.4rem;
              line-height: 1;
            }
            dd {
              font-size: 2.4rem;
              line-height: 1;
              margin-left: 0.3rem;
            }
          }
        }
      }
      .spTel {
        display: none;
      }
    }
  }
  @media screen and (max-width: 743px) {
    height: auto;
    padding: 0 0 0 1rem;
    .header_area {
      height: 100%;
      h1 {
        a {
          font-size: 0;
          img {
            width: 4rem;
            height: auto;
          }
          span {
            font-size: 1rem;
            margin-left: 1.2rem;
          }
        }
      }
      .glb {
        .pcTel {
          display: none;
        }
        .spTel {
          display: block;
          padding: 1.2rem 0;
          background-color: #31cd9e;
          a {
            display: block;
            width: 6rem;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--white);
            text-align: center;
            span {
              display: block;
              line-height: 1;
              letter-spacing: 0.1rem;
            }
            &::before {
              content: "";
              display: block;
              width: 1.9rem;
              height: 1.9rem;
              margin: 0 auto 0.6rem;
              background-position: center;
              background-size: contain;
              background-repeat: no-repeat;
              background-image: url(/images/icon_tel.png);
            }
          }
        }
      }
    }
  }
}

#menuBtn {
  position: relative;
  z-index: 1000;
  cursor: pointer;
  width: 5rem;
  height: 5rem;
  margin-left: 2rem;
  span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 1.4rem;
    height: 0.3rem;
    border-radius: 2px;
    background: var(--maincolor);
    &:nth-of-type(1) {
      top: 1.5rem;
      width: 45%;
    }
    &:nth-of-type(2) {
      top: 2.3rem;
      width: 35%;
    }
    &:nth-of-type(3) {
      top: 3.1rem;
      width: 20%;
    }
  }
  &.is-active {
    span {
      &:nth-of-type(1) {
        top: 1.8rem;
        left: 1.8rem;
        transform: translateY(0.6rem) rotate(-135deg);
        width: 50%;
      }
      &:nth-of-type(2) {
        opacity: 0;
      }
      &:nth-of-type(3) {
        top: 3rem;
        left: 1.8rem;
        transform: translateY(-0.6rem) rotate(135deg);
        width: 50%;
      }
    }
  }
  @media screen and (max-width: 743px) {
    width: 6rem;
    height: 6rem;
    top: 0;
    right: 0;
    margin-left: 0;
    span {
      &:nth-of-type(1) {
        top: 2rem;
      }
      &:nth-of-type(2) {
        top: 2.8rem;
      }
      &:nth-of-type(3) {
        top: 3.6rem;
      }
    }
  }
}

#mBg {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  &.is-active {
    opacity: 1;
    visibility: visible;
  }
}

#menu {
  display: block;
  width: 48rem;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  background-color: var(--white);
  transition: transform 0.3s ease-in-out;
  transform: translateX(100%);
  overflow-y: scroll;
  &.is-active {
    transform: translateX(0);
  }
  .mWrap {
    padding: 10rem 4rem;
    .gbl {
      margin-bottom: 5rem;
      li {
        border-bottom: 1px solid var(--maincolor);
        &:not(:last-of-type) {
          margin-bottom: 1.5rem;
        }
        a {
          display: block;
          font-size: 1.6rem;
          font-weight: 700;
          position: relative;
          span {
            display: inline-block;
            position: relative;
            padding: 1rem 0;
            border-bottom: 0.3rem solid var(--maincolor);
          }
          &::after {
            content: "";
            display: block;
            width: 0;
            height: 0.3rem;
            background-color: var(--maincolor);
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all 0.3s ease;
          }
          &:hover {
            &::after {
              width: 100%;
            }
          }
          &:is(body.top #menu .mWrap .gbl li:nth-child(1) a),
          &:is(body.about #menu .mWrap .gbl li:nth-child(2) a),
          &:is(body.price #menu .mWrap .gbl li:nth-child(3) a),
          &:is(body.guide #menu .mWrap .gbl li:nth-child(4) a),
          &:is(body.faq #menu .mWrap .gbl li:nth-child(5) a),
          &:is(body.company #menu .mWrap .gbl li:nth-child(6) a) {
            pointer-events: none;
            &::after {
              width: 100%;
            }
          }
        }
      }
    }
    #lng {
      margin-bottom: 5rem;
      p {
        font-family: var(--roboto);
        font-weight: 700;
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 1rem;
        cursor: pointer;
      }
      ol {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 49%;
          text-align: center;
          margin: 0.5%;
          a {
            display: block;
            font-weight: 700;
            line-height: 1;
            color: var(--black);
            padding: 1.5rem 0;
            background-color: #eee;
            transition: all 0.3s ease;
            &:hover {
              color: var(--white);
              background-color: var(--maincolor);
            }
            &.current {
              color: var(--white);
              background-color: var(--maincolor);
              pointer-events: none;
            }
          }
          &:nth-child(1) {
            a {
              font-family: var(--notojp);
            }
          }
          &:nth-child(2) {
            a {
              font-family: var(--roboto);
            }
          }
          &:nth-child(3) {
            a {
              font-family: var(--nototw);
            }
          }
          &:nth-child(4) {
            a {
              font-family: var(--notokr);
            }
          }
        }
      }
    }
    .place {
      margin-bottom: 5rem;
      p {
        font-family: var(--roboto);
        font-weight: 700;
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 1rem;
        cursor: pointer;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 49%;
          text-align: center;
          margin: 0.5%;
          a {
            display: block;
            font-weight: 700;
            line-height: 1;
            color: var(--white);
            padding: 1.5rem 0;
            background-color: #2769b4;
            transition: all 0.3s ease;
            &:hover {
              color: var(--black);
              background-color: #eee;
            }
            &.current {
              color: var(--black);
              background-color: #eee;
              pointer-events: none;
            }
          }
        }
      }
    }
    .gn {
      margin: 0 0 6rem;
      background-color: #eee;
      border-radius: 1rem;
      padding: 1.5rem;
      li {
        list-style: none;
        text-align: center;
        &:first-child {
          padding-bottom: 1rem;
        }
        &:last-child {
          border-top: 1px solid var(--white);
          padding-top: 1rem;
        }
        p {
          font-size: 1.5rem;
          font-weight: 700;
        }
        a {
          display: block;
          dl {
            display: flex;
            align-items: baseline;
            justify-content: center;
            font-weight: 700;
            font-family: var(--roboto);
            dt {
              line-height: 1;
              font-size: 1.8rem;
            }
            dd {
              line-height: 1;
              font-size: 3rem;
              margin-left: 3px;
            }
          }
        }
      }
    }
    .copyright {
      font-size: 1.2rem;
      color: #777;
      text-align: center;
    }
  }
  @media screen and (max-width: 743px) {
    width: 90%;
    .mWrap {
      padding: 7.5rem 2rem 10rem;
      .gbl {
        li {
          a {
            font-size: 1.4rem;
            span {
              padding: 0.5rem 0;
            }
          }
        }
      }
      #lng {
        margin-bottom: 4rem;
        p {
          font-size: 1.4rem;
          margin-bottom: 1rem;
        }
        ol {
          li {
            a {
              padding: 1.2rem 0;
              font-size: 1.2rem;
            }
          }
        }
      }
      .place {
        margin-bottom: 4rem;
        p {
          font-size: 1.4rem;
        }
        ul {
          li {
            a {
              padding: 1.2rem 0;
              font-size: 1.2rem;
            }
          }
        }
      }
      .gn {
        margin: 0 0 13.31.5rem;
        border-radius: 5px;
        padding: 1.5rem;
        li {
          &:first-child {
            padding-bottom: 1rem;
          }
          &:last-child {
            padding-top: 1rem;
          }
          p {
            font-size: 1.2rem;
          }
          a {
            dl {
              dt {
                font-size: 1.5rem;
              }
              dd {
                font-size: 2.4rem;
              }
            }
          }
        }
      }
      .copyright {
        font-size: 1.2rem;
      }
    }
  }
}

#footer {
  background-color: var(--white);
  padding: 4.2rem 5rem;
  .outer {
    .inr {
      max-width: 1000px;
      margin: 0 auto;
      .copy {
        font-size: 1.2rem;
        letter-spacing: 0.2em;
        color: #777;
        text-align: center;
      }
    }
  }
  &:is(body.top #footer),
  &:is(body.thanks #footer) {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 1.5rem 5rem;
  }
  @media screen and (max-width: 743px) {
    position: relative;
    padding: 1.4rem 0;
    .outer {
      .inr {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        .copy {
          width: 100%;
          text-align: center;
          font-size: 1rem;
        }
      }
    }
  }
}

#goTop {
  position: fixed;
  bottom: 10rem;
  right: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
  a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--maincolor);
    padding: 2.5rem 0 1rem;
    border-radius: 5px 0 0 5px;
    &:hover {
      img {
        transform: rotate(-90deg) translateX(0.5rem);
      }
    }
    span {
      display: block;
      font-weight: 700;
      font-family: var(--roboto);
      color: var(--white);
      line-height: 1;
      width: 100%;
      text-align: center;
      margin-top: 2rem;
    }
    img {
      display: block;
      width: 4.3rem;
      height: 2rem;
      transform: rotate(-90deg);
      transition: transform 0.3s ease;
    }
  }
  &:is(body.scr #goTop) {
    opacity: 1;
  }
  @media screen and (max-width: 743px) {
    bottom: 10rem;
    a {
      padding: 1.5rem 0 1rem;
      span {
        margin-top: 1.5rem;
        font-size: 1.2rem;
      }
      img {
        display: block;
        width: 2.15rem;
        height: 1rem;
      }
    }
  }
}

.cookie-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  background: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  z-index: 1000;
  .cookie-wrap {
    max-width: 100rem;
    background-color: var(--white);
    padding: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .cookie-text {
      margin-bottom: 3rem;
      a {
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
      }
    }
    ul {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      li {
        list-style: none;
        font-weight: 700;
        color: var(--white);
        background: var(--maincolor);
        &:not(:first-child) {
          margin-left: 1rem;
        }
        button {
          cursor: pointer;
          padding: 0.5rem 2.5rem;
          color: var(--white);
        }
        &.rejection {
          background-color: #696969;
        }
      }
    }
  }
  &.is-show {
    visibility: visible;
  }
  &.saveCookies,
  &.rejectCookies {
    display: none;
  }
  @media screen and (max-width: 743px) {
    .cookie-wrap {
      width: 35rem;
      padding: 1.5rem;
      .cookie-text {
        font-size: 1.5rem;
        margin-bottom: 2rem;
      }
      ul {
        margin-left: 0;
        li {
          font-size: 1.5rem;
        }
      }
    }
  }
}

.typ {
  opacity: 0;
  span {
    opacity: 0;
  }
}

.textSplitLoad {
  display: none;
}

.split {
  visibility: hidden;
}

.id-1 {
  padding-left: 1em;
  text-indent: -0.6em;
}

.lang_en .id-1 {
  padding-left: 1em;
  text-indent: -1em;
}

section {
  padding: 7.5rem 5rem;
}

/* ====================
*    over layer
* ====================== */
html.scrollStop {
  overflow-y: hidden;
}

body.showItem {
  .overlay {
    opacity: 1;
    -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    transition: opacity 300ms ease-out, transform 300ms ease-out,
      -webkit-transform 300ms ease-out;
    .wrapper {
      .close {
        opacity: 1 !important;
      }
    }
  }
  &.readyItem,
  &.closeItem {
    .overlay {
      opacity: 0;
      .wrapper {
        .container {
          -webkit-transform: translate(-50%, -50%) scale(0.7);
          transform: translate(-50%, -50%) scale(0.7);
        }
      }
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30000;
  transform: translateZ(2px);
  overflow: hidden;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: var(--black);
    transition: all 0.3s ease;
  }
  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      box-shadow: none;
      width: 102.4rem;
      max-width: 1000px;
      height: calc(100vh - 25.5vh);
      -webkit-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
      transition: all 0.3s ease;
      .slidecontainer {
        height: 100%;
        overflow: hidden;
        position: relative;
        .holder {
          width: 100%;
          height: 100%;
          .item {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            .li_container {
              height: 100%;
              position: relative;
              .top {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                img {
                  width: 100%;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
      .prevbtn {
        position: absolute;
        margin-top: -3rem;
        top: 50%;
        right: 105%;
        a {
          display: block;
          width: 2.5rem;
          height: 2.5rem;
          border-top: 1px solid var(--white);
          border-left: 1px solid var(--white);
          transform: rotate(-45deg);
        }
      }
      .nextbtn {
        position: absolute;
        margin-top: -3rem;
        top: 50%;
        left: 105%;
        a {
          display: block;
          width: 2.5rem;
          height: 2.5rem;
          border-top: 1px solid var(--white);
          border-left: 1px solid var(--white);
          transform: rotate(135deg);
        }
      }
    }
    .close {
      position: absolute;
      top: 5rem;
      right: 5rem;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 5rem;
      height: 5rem;
      transition: opacity 0.3s ease;
      z-index: 1;
      span {
        position: relative;
        &::before {
          content: "";
          display: inline-block;
          height: 5rem;
          border-left: 1px solid var(--white);
          transform: rotate(135deg);
          position: absolute;
          top: 0.7rem;
          left: 2.2rem;
        }
        &::after {
          content: "";
          display: inline-block;
          height: 5rem;
          border-left: 1px solid var(--white);
          transform: rotate(45deg);
          position: absolute;
          top: 0.7rem;
          left: 2.3rem;
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    .wrapper {
      .container {
        width: 28rem;
        height: 37.5rem;
        .prevbtn {
          margin-top: -1.9rem;
          right: 103%;
          a {
            width: 2rem;
            height: 2rem;
          }
        }
        .nextbtn {
          margin-top: -1.9rem;
          left: 103%;
          a {
            width: 2rem;
            height: 2rem;
          }
        }
      }
      .close {
        top: 2rem;
        right: 1rem;
        span {
          &::before {
            height: 3.5rem;
          }
          &::after {
            height: 3.5rem;
          }
        }
      }
    }
  }
}

/********************************************************************
// .modal
********************************************************************/
body.hasLb {
  .modal {
    opacity: 1;
    -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    transition: opacity 300ms ease-out, transform 300ms ease-out,
      -webkit-transform 300ms ease-out;
  }
  &.readyLb,
  &.closeLb {
    .modal {
      opacity: 0;
      .contentsField,
      .contentsField {
        -webkit-transform: translate(-50%, -50%) scale(0.7);
        transform: translate(-50%, -50%) scale(0.7);
      }
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  .closeField {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 11;
  }
  .contentsField {
    max-width: 500px;
    width: 100%;
    position: relative;
    position: absolute;
    -webkit-transition: 300ms;
    -o-transition: 300ms;
    -moz-transition: 300ms;
    transition: 300ms;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    z-index: 12;
    .outer {
      width: 100%;
      .inner {
        background: var(--white);
        p {
          background: var(--maincolor);
          line-height: 1;
          text-align: center;
          color: var(--white);
          font-weight: 700;
          font-size: 2rem;
          padding: 1.5rem 0;
        }
      }
    }
    .closeButton {
      width: 4rem;
      height: 4rem;
      margin-left: auto;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: transform 300ms ease-in-out;
      &:hover {
        transform: scale(1.2);
      }
      span {
        position: relative;
        display: block;
        &::before {
          content: "";
          display: inline-block;
          height: 3rem;
          border-left: 3px solid var(--white);
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
          position: absolute;
          top: 0.7rem;
          left: 2.2rem;
        }
        &::after {
          content: "";
          display: inline-block;
          height: 3rem;
          border-left: 3px solid var(--white);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          top: 0.7rem;
          left: 2.3rem;
        }
      }
    }
  }
  &.cookieModal,
  &.nocModal {
    .contentsField {
      max-width: 1000px;
      .outer {
        height: 55vh;
        overflow-y: scroll;
        .inner {
          padding: 8rem 4rem;
          p {
            background: none;
            color: var(--black);
            font-size: 1.6rem;
            text-align: left;
            line-height: 1.8;
            font-weight: 400;
            margin-bottom: 3rem;
            padding: 0;
            &.mt {
              margin-top: 3rem;
            }
          }
          h1 {
            font-size: 2rem;
            margin-bottom: 2rem;
          }
          dl {
            display: flex;
            dt,
            dd {
              color: var(--black);
              font-size: 1.6rem;
              text-align: left;
              line-height: 1.8;
              font-weight: 400;
            }
          }
          .tool {
            margin-bottom: 5rem;
            p {
              margin-bottom: 0;
              &.p1 {
                font-weight: 700;
                margin-bottom: 1.5rem;
              }
              a {
                text-decoration: underline;
                &:hover {
                  text-decoration: none;
                }
              }
            }
          }
          .links {
            p {
              margin-bottom: 1.5rem;
            }
            a {
              margin-right: 2rem;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    .contentsField {
      width: 92%;
      .outer {
        .inner {
          p {
            font-size: 1.5rem;
            padding: 1.5rem 0;
          }
        }
      }
    }
    &.cookieModal,
    &.nocModal {
      .contentsField {
        .outer {
          height: 65vh;
          .inner {
            padding: 4.5rem 2.5rem;
            p {
              font-size: 1.2rem;
              margin-bottom: 1.5rem;
              padding: 0;
              &.mt {
                margin-top: 1.5rem;
              }
            }
            h1 {
              font-size: 1.6rem;
              margin-bottom: 1.5rem;
            }
            dl {
              dt,
              dd {
                font-size: 1.2rem;
              }
            }
            .tool {
              margin-bottom: 4rem;
              p {
                &.p1 {
                  margin-bottom: 1rem;
                }
              }
            }
            .links {
              p {
                margin-bottom: 1rem;
              }
              a {
                display: block;
                font-size: 1.2rem;
                margin: 0 0 1rem;
              }
            }
          }
        }
      }
    }
  }
}

.ui-widget.ui-widget-content {
  border: none;
  border-radius: 0;
  .ui-widget-header {
    border: none;
    border-radius: 0;
    background: var(--maincolor);
    color: var(--white);
    font-weight: bold;
    .ui-datepicker-prev {
      top: 1rem;
      left: 0.6rem;
      width: 1em;
      height: 1em;
      &::before {
        content: "";
        display: block;
        border-top: 0.7rem solid transparent;
        border-right: 1rem solid var(--white);
        border-bottom: 0.7rem solid transparent;
        border-left: 0.7rem solid transparent;
        color: var(--white);
        line-height: 1;
      }
      span {
        display: none;
      }
      &.ui-state-hover {
        border: none;
        background: var(--maincolor);
        color: var(--white);
      }
    }
    .ui-datepicker-next {
      top: 1rem;
      right: 0.6rem;
      width: 1em;
      height: 1em;
      &::before {
        content: "";
        display: block;
        border-top: 0.7rem solid transparent;
        border-right: 0.7rem solid transparent;
        border-bottom: 0.7rem solid transparent;
        border-left: 1rem solid var(--white);
        color: var(--white);
        line-height: 1;
      }
      span {
        display: none;
      }
      &.ui-state-hover {
        border: none;
        background: var(--maincolor);
        color: var(--white);
      }
    }
  }
  table {
    thead {
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      th {
        &.ui-datepicker-week-end {
          &:first-of-type {
            color: red;
          }
          &:last-of-type {
            color: blue;
          }
        }
      }
      .ui-datepicker-week-end:first-of-type {
        color: red;
      }
      .ui-datepicker-week-end:last-of-type {
        color: blue;
      }
    }
    tbody {
      td {
        padding: 0;
        border: 1px solid #ddd;
        a {
          background: none;
          color: var(--black);
          padding: 0.4rem;
          border: none;
          &:hover {
            border: none;
            background: var(--maincolor);
            color: var(--white);
          }
          &.ui-state-highlight {
            background: #ddd;
            color: var(--black);
            &.ui-state-active {
              background: var(--maincolor);
              color: var(--white);
            }
          }
        }
        &.ui-datepicker-week-end {
          &:first-of-type {
            .ui-state-default {
              color: red;
              &:hover,
              &.ui-state-active {
                background: var(--maincolor);
                color: var(--white);
              }
            }
          }
          &:last-of-type {
            .ui-state-default {
              color: blue;
              &:hover,
              &.ui-state-active {
                background: var(--maincolor);
                color: var(--white);
              }
            }
          }
        }
        &.ui-state-disabled {
          .ui-state-default {
            background: none;
            color: var(--black);
            padding: 0.4rem;
            border: none;
          }
          &:hover,
          &:active {
            background: none;
            color: var(--black);
            padding: 0.4rem;
            border: none;
          }
        }
      }
    }
  }
}

.topPage {
  width: 27.5rem;
  text-align: center;
  margin: 5rem auto;
  a {
    display: block;
    width: 100%;
    background: linear-gradient(
      to right,
      rgba(32, 162, 229, 1) 0%,
      rgba(50, 199, 180, 1) 100%
    );
    padding: 1rem 0;
    cursor: pointer;
    position: relative;
    p {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      span {
        width: 2.9rem;
        bottom: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        &::after {
          content: "";
          background: #fff;
          bottom: 0;
          display: block;
          height: 1px;
          margin: auto;
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
        }
      }
    }
    &:hover {
      p {
        span {
          &::after {
            animation: hoverBorder 0.6s forwards;
          }
        }
      }
    }
  }
}

@keyframes hoverBorder {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  45% {
    -webkit-transform: translateX(100%);
    opacity: 1;
    transform: translateX(100%);
  }
  50% {
    -webkit-transform: translateX(100%);
    opacity: 0;
    transform: translateX(100%);
  }
  75% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
    opacity: 1;
    transform: translateX(0);
  }
}