@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


/* ======================================================================
/* root
====================================================================== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-white-blue: #edf3f5;
  --color-theme: #00a9c9;
}



/* ======================================================================
/* br
====================================================================== */
.sp {
  display: none;
}

@media screen and (width <=768px) {
  .sp {
    display: block;
  }
}


/* ======================================================================
/* z-index
====================================================================== */
.z-index_10 {
  z-index: 10;
}

.z-index_20 {
  z-index: 20;
}



/* ======================================================================
/* Lato ※英文見出しフォント指定
====================================================================== */
.lato-semiBold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1.75;
  font-size: 45px;
}


@media screen and (width <=768px) {
  .lato-semiBold {
    font-size: 32px;
    line-height: 1.5;
  }
}



/* ======================================================================
/* h3
====================================================================== */
h3 {
  font-size: 24px;
  line-height: 2;
}

@media screen and (width <=768px) {
  h3 {
    font-size: 20px;
    line-height: 1.5;
    text-align: left;
    margin-block-start: 10px;
  }
}


/* ======================================================================
/* microModal
====================================================================== */
.modal {
  inline-size: 100%;

  & .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;

    & .modalBody {
      background-color: var(--color-white-blue);
      max-width: 1080px;
      max-height: 100vh;
      padding: 10px;
      overflow-y: auto;
      z-index: 9999;

      & .container {
        background-color: var(--color-white);
        padding: 50px;
        color: var(--color-black);

        & .header {
          display: flex;
          justify-content: flex-end;

          & .close {
            background: transparent;
            border: 0;

            &:before {
              content: "\2715";
              font-size: 30px;
            }
          }
        }

        & .content {
          display: flex;
          align-items: center;
          gap: 0 100px;

          & .contentInfo {
            inline-size: calc(100% - 595px);

            & img {
              margin: 0;
            }

            & .modalTitle {
              font-size: 34px;
              color: var(--color-theme);
              line-height: 1.75;
            }

            & .modalSubTitle {
              font-size: 22px;
              line-height: 1.364;
              font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
            }
          }

          & .contentImg {
            inline-size: 595px;
          }
        }

        & hr {
          border-block-start: 2px solid var(--color-black);
          margin-block: 20px;
        }

        & .detail {
          font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
          line-height: 1.375;
        }
      }
    }
  }
}


@media screen and (width <=768px) {
  .modal {
    inline-size: 100%;

    & .overlay {

      & .modalBody {
        background-color: var(--color-white-blue);
        max-width: 90%;
        max-height: 90%;

        & .container {
          background-color: var(--color-white);
          padding: 12.5px;
          color: var(--color-black);

          & .content {
            flex-direction: column;
            gap: 0 50px;

            & .contentInfo {
              inline-size: 100%;

              & img {
                margin-block: 0 10px;
              }

              & .modalTitle {
                font-size: 28px;
                color: var(--color-theme);
                line-height: 1.2;
              }

              & .modalSubTitle {
                font-size: 16px;
                margin-block: 10px;
              }
            }

            & .contentImg {
              inline-size: 100%;
            }
          }
        }
      }
    }
  }
}

/* ======================================================================
/* microModal Animation Style
====================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*
@keyframes slideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}
*/

.modal-slide {
  display: none;

  &.is-open {
    display: block;
  }
}

.modal-slide[aria-hidden="false"] .overlay {
  animation: fadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-slide[aria-hidden="false"] .container {
  animation: slideIn .3s cubic-bezier(0, 0, .2, 1);
}

.modal-slide[aria-hidden="true"] .overlay {
  animation: fadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal-slide[aria-hidden="true"] .container {
  animation: slideOut .3s cubic-bezier(0, 0, .2, 1);
}

.modal-slide .container,
.modal-slide .overlay {
  will-change: transform;
}