@charset "UTF-8";

body {
  color: #3E3A39;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-style: normal;
  font-weight: 300;
}

a:hover {
  cursor: pointer;
  opacity: 0.7;
}

img {
  width: 100%;
}

/* PC */
@media screen and (min-width: 769px) {
  html {
    font-size: 0.83vw;
  }

  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }

  /* ヘッダー */
  .pc-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .header-wrapper {
    padding: 1.88rem 2.19rem 2.19rem;
  }

  .header-contents {
    display: flex;
    align-items: center;
    background-color: #00B9AD;
    border-radius: 5.625rem;
    color: #FFF;
    font-weight: 600;
    padding: 0.94rem 1.5rem 0.94rem 3.62rem;
  }

  .header-logo-wrapper {
    width: 28.875rem;
  }

  .header-logo-contents {
    font-size: 2.5rem;
  }

  .header-nav-wrapper {
    margin-left: 9.25rem;
    width: 53.3rem;
  }

  .header-nav-list {
    display: flex;
    align-items: center;
  }

  .header-nav-item {
    position: relative;
    margin-right: 1.12rem;
    text-align: center;
  }

  .header-nav-item:not(:last-child) {
    padding-right: 3rem;
  }

  .header-nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 3.375rem;
    background-image: url('../img/pc-header-slash.png');
    background-size: contain;
    background-repeat: no-repeat;
  }

  .header-nav-item-en {
    font-size: 1.5rem;
    letter-spacing: 0.09rem;
  }

  .header-nav-item-ja {
    font-size: 1rem;
    letter-spacing: 0.06rem;
  }

  .header-contact-button-wrapper {
    width: 18rem;
  }

  .header-contact-button-contents {
    background-color: #FD892A;
    border-radius: 5.625rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.94rem 2.38rem 1rem 2.44rem;
  }

  .header-contact-button-image {
    width: 2rem;
  }

  .header-contact-button-text {
    font-size: 1.625rem;
    letter-spacing: 0.0975rem;
  }

  /* フッター */
  #footer {
    width: 120rem;
    height: 24.0625rem;
    background-color: #24312F;
  }

  .footer-main {
    margin: 0 20.81rem 0 15.56rem;
    display: flex;
  }

  .footer-left {
    padding: 5.56rem 0 6.12rem 0;
  }

  .footer-logo {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 0 3.75rem 0.94rem 0rem;
    white-space: nowrap;
  }

  .address {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.0675rem;
    padding-bottom: 2.69rem;
    padding-right: 12.06rem;  
  }

  .footer-ctt-btn {
    width: 24.375rem;
  }

  .footer-center {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.0675rem;
    padding: 6.31rem 8rem 14.38rem 0;
    white-space: nowrap;
  
  }

  .footer-right {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 6.5rem 0 9.44rem 0;
    display: flex;
    white-space: nowrap;
  }

  .footer-list-main {
    padding-right: 3.12rem;
  }

  .footer-list-item {
    display: flex;
    align-items: center;
    padding-bottom: 1.25rem;
  }

  .footer-list-item:last-child {
    padding-bottom: 0;
  }

  .footer-list-item-img {
    display: flex;
    width: 1.5625rem;
    margin-right: 1.31rem;
  }
}

/* SP */
@media screen and (max-width: 768px) {
  html {
    font-size: 2.13vw;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  /* ヘッダー */
  .sp-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .sp-header-wrapper {
    padding: 1.88rem 1.88rem 3.12rem 0;
  }
  
  .sp-header-contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sp-header-logo-wrapper {
    background-color: #00B9AD;
    color: #FFF;
    font-weight: 600;
    padding: 0.62rem 2.69rem 0.75rem 2.31rem;
    border-radius: 0rem 5.625rem 5.625rem 0rem;
    font-size: 2.8125rem;
  }

  .sp-header-menu {
    z-index: 10;
  }

  .sp-header-menu-wrapper {
    width: 5.625rem;
    height: 5.625rem;
    padding: 1.5rem 1.38rem;
    background-color: #00B9AD;
    border-radius: 50%;
    cursor: pointer;
  }

  .sp-header-menu-wrapper.active {
    background-color: #FFF;
  }

  .sp-header-menu-icon-line {
    width: 100%;
    height: 0.19rem;
    background-color: #FFF;
  }

  .sp-header-menu-icon-line:not(:first-child) {
    margin-top: 1rem;
  }

  #sp-header-menu-icon.active .sp-header-menu-icon-line:nth-of-type(1) {
    background-color: #00B9AD;
    transform: translateY(1.2rem) rotate(-45deg);
  }

  #sp-header-menu-icon.active .sp-header-menu-icon-line:nth-of-type(2) {
    opacity: 0;
  }

  #sp-header-menu-icon.active .sp-header-menu-icon-line:nth-of-type(3) {
    background-color: #00B9AD;
    transform: translateY(-1.2rem) rotate(45deg);
  }

  #sp-header-menu-icon,
  .sp-header-menu-icon-line {
    transition: all 0.5s;
    box-sizing: border-box;
  }

  .sp-modal {
    position: fixed;
    z-index: 9;
    top: 0;
    right: -100%;
    width: 93%;
    height: 100%;
    background-color: #898989;
    border-radius: 0rem 0rem 0rem 4.375rem;
  }

  .sp-modal.active {
    right: 0;
    transition: right 0.3s ease;
  }

  .sp-modal-wrapper {
    padding: 9.81rem 5.5rem 12.81rem 7rem;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }

  .sp-modal-contents {
    color: #FFF;
    font-weight: 600;
    letter-spacing: 0.15rem;
  }

  .sp-modal-item {
    display: flex;
    align-items: center;
    gap: 3.62rem;
  }

  .sp-modal-item:not(:first-child) {
    margin-top: 3.44rem;
  }

  .sp-modal-item-en {
    font-size: 2.5rem;
    letter-spacing: 0.15rem;
  }

  .sp-modal-item-jp {
    font-size: 1.5625rem;
    letter-spacing: 0.09375rem;
  }

  .sp-modal-contact-button-wrapper {
    width: 31.25rem;
    height: 6.25rem;
    margin-top: 6.12rem;
    padding: 1.31rem 5.38rem 1.19rem 4.81rem;
    background-color: #FD892A;
    border-radius: 5.625rem;
  }

  .sp-modal-contact-button-contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sp-modal-contact-button-image {
    width: 2.68563rem;
  }

  .sp-modal-contact-button-text {
    color: #FFF;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.15rem;
  }

  #main.inactive {
    display: none;
  }

  /* フッター */
  #footer {
    width: 46.875rem;
    height: 48.875rem;
    flex-shrink: 0;
    background: #24312F;
  }

  .footer-logo {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 3.4375rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 4.25rem 4.12rem 0.56rem 3rem;
  }

  .company-name {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.12rem;
    padding: 0 5.81rem 3.38rem 3.13rem;
    white-space: nowrap;
  }

  .address {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.0975rem;
    padding: 0 17.06rem 4.5rem 3.13rem;
    white-space: nowrap;
  }

  .footer-list {
    padding: 0 4.81rem 0 3.06rem;
    display: flex;
  }

  .footer-list-main {
    padding-right: 4.62rem;
  }

  .footer-list-item {
    color: #FFF;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.0975rem;
    display: flex;
    align-items: center;
    padding-bottom: 1.31rem;
  }

  .footer-list-item:last-child {
    padding: 0;
  }

  .footer-list-item-img {
    display: flex;
    width: 1.5625rem;
    margin-right: 1.31rem;
  }

  .footer-ctt-btn {
    width: 46.88rem;
    padding: 5.94rem 10.94rem 5.31rem 10.94rem;
  }

  #common {
    padding-bottom: 1.31rem;
  }
}