@charset "utf-8";

@media screen, print {

  body.home {
    /* --bg-img: url('../img/top/top_bg01.jpg'); */

    /* background-image: url(../img/top/top_bg.jpg); */

    background-image: var(--bg-img);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh; /* fallback */
    height: 100dvh;
    padding-top: 0;
    position: relative;
  }

  header {
    background-color: transparent; /* override */
    box-shadow: none; /* reset */
  }

  .menu-logo {
    color: #fff;
  }

  .gnav-lang::before {
    color: var(--clr-black);
    color: #0a0a0a;
  }

  .toggle-bar {
    background-color: var(--clr-black);
    background-color: #0a0a0a;
  }

  .bogo-language-switcher {
    background-color: transparent; /* override */
    color: #fff; /* override */
  }

  main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;
    padding-top: 0; /* reset */
  }

  .msg-para {
    color: #fff;
    font-style: italic;
    margin: auto;
    position: relative;
    width: fit-content;

    --dquat-space: -15px;
    --dquat-space: -20px;
    --dquat-space: calc(-1.56vw - 1rem);
  }

  .ja {
    .msg-para {
      font-size: 30px;
      font-size: 40px;
      font-size: calc(2.23vw + 2.29rem);
      line-height: 1.2; 
    }

    .msg-para::before {
      content: "\201C";
      left: var(--dquat-space);
      position: absolute;
    }

    .msg-para::after {
      content: "\201D";
      right: var(--dquat-space);
      position: absolute;
    }
  }

  .en-GB {
    .msg-para {
      font-size: 30px;
      font-size: 40px;
      font-size: calc(2.23vw + 2.29rem);
      line-height: 1.2; 
    }
  }

  .menu-nav-list {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
  }

  .menu-nav-item + .menu-nav-item {
    margin-top: 2rem;
  }

  .menu-nav-item a,
  .menu-nav-link {
    color: #fff;
    display: block;
    font-family: var(--ffmly-serif);
    /* font-size: 15px;
    font-size: 18px;
    font-size: calc(.67vw + 1.29rem); */
    font-size: 14px;
    font-size: 16px;
    font-size: calc(.625vw + 1.2rem);
    font-weight: var(--fwght-4reg);
    /* font-weight: var(--fwght-5med); */
    /* font-weight: var(--fwght-6sbld); */
    line-height: 1;
    width: fit-content;
  }

  .footer {
    margin-top: 4rem;
  }
  
  .ft-cright {
    color: #fff;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  main {
    width: 94vw; /* override */
  }

  .msg-para {
    --dquat-space: -20px;
    --dquat-space: -30px; /* vw 960 */
    --dquat-space: -3.13vw;
  }

  .menu-nav-item a,
  .menu-nav-link {
    font-size: 17px;
    font-size: 18px;
    font-size: calc(.781vw + 1.2rem);
  }

  .footer {
    margin-top: 3rem;
  }
}

/*** SP BP ***/
@media screen and (min-width: 768px) {
  main {
    padding-top: 0; /* reset */
  }

  .ja {
    .msg-para {
      font-size: 40px;
      font-size: 55px;
      font-size: 5.21vw;
    }
  }

  .en-GB {
    .msg-para {
      font-size: 40px;
      font-size: 55px;
      font-size: 5.21vw;
    }
  }

  .menu-nav-item + .menu-nav-item {
    margin-top: 1.5rem;
  }

  .menu-nav-item a,
  .menu-nav-link {
    font-size: 18px;
    font-size: 20px;
    font-size: calc(1.04vw + 1rem);
  }

}


/** TB tblg **/
@media screen and (min-width: 800px) {
}

/*** PC ***/
@media screen and (min-width: 960px) {
  main {
    width: 96vw;
  }

  .msg-para {
    --dquat-space: -3rem;
  }

  .ja {
    .msg-para {
      font-size: 5.5rem;
    }
  }

  .en-GB {
    .msg-para {
      font-size: 5.5rem;
    }
  }

  .menu-nav-item a,
  .menu-nav-link {
    font-size: 2rem;
  }
}


/** PC pclg **/
@media screen and (min-width: 1280px) {


}

/*****************/
/***   Print   ***/
/*****************/
@media print {


}