@charset "utf-8";

@media (max-width: 919px) {
  article h2,
  div h1,
  div h2 {
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #1d1d1f;
  }

  article div,
  div h3,
  div a {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #1d1d1f;
  }

  div p,
  li a,
  label {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #1d1d1f;
  }

  @keyframes section_animation {
    0% {
      transform: scale(1, 0);
    }
    35% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    65% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    100% {
      transform: scale(0, 1);
      transition: 0.6s;
    }
  }

  @keyframes section_article_animation {
    0% {
      transform: scale(1, 0);
    }
    35% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    65% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    100% {
      transform: scale(1, 0);
      transition: 0.6s;
    }
  }

  /* space */
  .space {
    height: 2vh;
  }

  /* Loading display */

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #fbfbfd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    z-index: 999;
  }

  .loading.active {
    opacity: 1;
    visibility: visible;
    height: 100%;
  }

  @keyframes flashing {
    50% {
      opacity: 0.3;
    }
  }

  .loading_text {
    animation: 0.5s flashing infinite;
    text-align: center;
    align-items: center;
  }

  .loadeing_text h2 {
    font-size: 1.5rem;
  }

  .name {
    font-size: 1rem;
    margin-top: 10px;
    text-align: center;
  }

  /* //////////////////////////// */

  /* header menu */

  #header {
    position: fixed;
  }

  .header {
    height: 8vh;
    display: flex;
    justify-content: space-between;
    padding-top: 1vh;
    z-index: 980;
    width: 100%;
  }

  /* logo */

  .logo {
    display: inline-block;
    height: 8vh;
    margin-right: 5vw;
    margin-left: 5vw;
    padding-top: 1vh;
    width: 50vw;
    text-align: left;
    text-decoration: none;
  }

  .logo.active h1,
  .logo.active p {
    color: #fff;
  }

  .logo h1 {
    margin-bottom: 0.5vh;
    color: #1d1d1f;
    font-weight: 900;
  }

  .logo p {
    font-size: 0.1rem;
    color: #1d1d1f;
    font-weight: 500;
  }

  /* menu btn */

  .btn {
    height: 8vh;
    display: block;
    transition: 0.3s;
    display: flex;
    padding-right: 5vw;
    padding-top: 1.5vh;
  }

  .btn div:nth-of-type(1),
  .btn div:nth-of-type(2),
  .btn div:nth-of-type(3) {
    background-color: #000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    transition: 0.5s;
  }

  .btn.active div:nth-of-type(1),
  .btn.active div:nth-of-type(2),
  .btn.active div:nth-of-type(3) {
    background-color: #fff;
    transition: 0.5s;
  }

  /* menu list */

  .pc_menu {
    display: none;
  }

  #menulist {
    position: fixed;
  }

  .menulist {
    width: 100%;
    height: 100vh;
    background-color: #333333;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    visibility: hidden;
    z-index: 970;
    opacity: 0;
    transition: 0.3s;
  }

  .menulist.active {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
  }

  .menulist ul {
    margin-top: 10vh;
  }

  .menulist ul li {
    padding: 3vh 0vw;
  }

  .menulist ul li a {
    color: #fff;
    padding: 3vh 10vw;
  }
}

/* //////////////////// */
/* pc design */

@media (min-width: 920px) {
  article h2,
  div h1,
  div h2 {
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #1d1d1f;
  }

  article div,
  div h3,
  div a {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #1d1d1f;
  }

  div p,
  li a,
  label {
    font-family: kozuka-gothic-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #1d1d1f;
  }

  @keyframes section_animation {
    0% {
      transform: scale(1, 0);
    }
    35% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    65% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    100% {
      transform: scale(0, 1);
      transition: 0.6s;
    }
  }

  @keyframes section_article_animation {
    0% {
      transform: scale(1, 0);
    }
    35% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    65% {
      transform: scale(1, 1);
      transition: 0.6s;
    }
    100% {
      transform: scale(1, 0);
      transition: 0.6s;
    }
  }

  /* space */
  .space {
    height: 2vh;
  }

  /* Loading display */

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #fbfbfd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    z-index: 999;
  }

  .loading.active {
    opacity: 1;
    visibility: visible;
    height: 100%;
  }

  @keyframes flashing {
    50% {
      opacity: 0.3;
    }
  }

  .loading_text {
    animation: 0.5s flashing infinite;
    text-align: center;
    align-items: center;
  }

  .loadeing_text h2 {
    font-size: 1.5rem;
    margin-block-end: 0.5rem;
  }

  .name {
    font-size: 1rem;
    margin-top: 10px;
    text-align: center;
  }

  /* //////////////////////////// */

  /* header menu */

  #header {
    position: fixed;
  }

  .header {
    height: 12vh;
    padding-top: 5vh;
    z-index: 980;
    width: 100%;
    display: flex;
  }

  /* logo */

  .logo {
    display: inline-block;
    height: 8vh;
    margin-right: 5vw;
    margin-left: 5vw;
    padding-top: 1vh;
    text-align: left;
    text-decoration: none;
  }

  .logo.active h1,
  .logo.active p {
    color: #fff;
  }

  .logo h1 {
    margin-bottom: 0.5vh;
    color: #1d1d1f;
    font-weight: 900;
  }

  .logo p {
    font-size: 0.1rem;
    color: #1d1d1f;
    font-weight: 500;
  }

  /* menu btn */

  .btn {
    display: none;
  }

  /* menu list */

  .menulist {
    display: none;
  }

  .pc_menu ul {
    display: flex;
    margin-top: 2vh;
  }

  .pc_menu ul li {
    font-size: 1vw;
    margin-right: 1vw;
    padding: 1vh 1vw;
    white-space: nowrap;
  }

  .pc_menu ul li a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    font-weight: bold;
  }

  .pc_menu ul li a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #1d1d1f;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.3s;
  }

  .pc_menu ul li a:hover::after {
    transform-origin: top left;
    transform: scale(1, 1);
  }
}