@charset "UTF-8";

/* -----------------------------------------------
common
----------------------------------------------- */
#nav_toggle,
.header_nav {
  display: none;
}

@media screen and (max-width: 767px) {
  main {
    padding-bottom: 80px;
  }
}

@media screen and (min-width: 768px) {
  main {
    padding-bottom: 115px;
  }
}

/* -----------------------------------------------
jp_logo
----------------------------------------------- */
.jp_logo {
  margin-inline: auto;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
  .jp_logo {
    margin-top: 48px;
    width: 200px;
  }
}

@media screen and (min-width: 768px) {
  .jp_logo {
    margin-top: 114px;
    width: 276px;
  }
}

/* -----------------------------------------------
lang
----------------------------------------------- */
@media screen and (max-width: 767px) {
  .lang {
    margin-top: 80px;
  }
  .lang ul {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .lang li {
    width: 47.44%;
  }
  .lang li:nth-child(n + 3) {
    margin-top: 20px;
  }
  .lang li a {
    width: 100%;
    min-height: 70px;
    border: 3px solid #0e050a;
    border-radius: 8px;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .lang li a span {
    padding-right: 1.5em;
    position: relative;
  }
  .lang li a span::before {
    content: '';
    width: 18px;
    padding-top: 18px;
    height: 0;
    background-color: #000000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .lang li a span::after {
    content: '';
    width: 5px;
    padding-top: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%) rotate(45deg);
  }
}

@media screen and (max-width: 374px) {
  .lang li a {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 768px) {
  .lang {
    margin-top: 59px;
  }
  .lang ul {
    width: 89.09%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .lang li {
    width: 47.44%;
  }
  .lang li:nth-child(n + 3) {
    margin-top: 39px;
  }
  .lang li a {
    width: 100%;
    min-height: 100px;
    border: 4px solid #0e050a;
    border-radius: 15px;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
  }
  .lang li a::before {
    content: '';
    width: 8.6%;
    padding-top: 8.6%;
    height: 0;
    background-color: #000000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 5.9%;
    transform: translateY(-50%);
    transition: all .3s;
  }
  .lang li a::after {
    content: '';
    width: 2.15%;
    padding-top: 2.15%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    top: 50%;
    right: 9.4%;
    transform: translateY(-50%) rotate(45deg);
    transition: all .3s;
  }
  .lang li a:hover {
    background-color: #0e050a;
    color: #fff;
  }
  .lang li a:hover::before {
    background-color: #fff;
  }
  .lang li a:hover::after {
    border-top: 3px solid #000;
    border-right: 3px solid #000;
  }
}