@charset "UTF-8";

/* ============================= Reset ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------

  Header ヘッダー

---------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  background: var(--white);
  color: var(--primary);
  z-index: calc(infinity);
  -webkit-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;

  & a {
    color: inherit;
    text-decoration: none;
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Header  ヘッダー
---------------------------------------------------------- */
@media (min-width: 1024px) {

  /* ヘッダー初期状態：FV下部 */
  .header {
    position: absolute;
    bottom: 0;
    top: auto;
    background: transparent;
    color: var(--white);
  }

  /* ヘッダーがトップに固定後 */
  .header.is-fixed {
    position: fixed;
    top: 0;
    /* ★ これがないと全画面になる */
    bottom: auto;
    background: var(--white);
    color: var(--primary);
  }
}


/* ---------------------------------------------------------
  SP Header inner ヘッダーインナー
---------------------------------------------------------- */
.header {
  .header__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px 16px 24px;
    height: 60px;

    .logo-header {
      display: block;
      -webkit-transition: 0.2s;
      transition: 0.2s;

      & img {
        width: 212px;
        height: auto;
      }
    }

    /* ロゴを非表示 */
    .logo-header.is-open {
      opacity: 0;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Header inner ヘッダーインナー
---------------------------------------------------------- */
@media (min-width: 1024px) {

  /* ヘッダー初期状態 */
  .header {
    .header__inner {
      display: block;
      padding: 24px;
      padding-bottom: 32px;
      max-width: 1280px;
      height: auto;

      .logo-header {
        display: none;
      }
    }
  }

  /* ヘッダーがトップに固定後 */
  .header.is-fixed {
    .header__inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 38px 24px 16px 24px;
      height: 120px;
      max-width: 1280px;
      margin: 0 auto;

      .logo-header {
        display: block;

        & img {
          margin-top: -21px;
          width: 368px;
          height: auto;
        }
      }
    }
  }
}

/* ---------------------------------------------------------
  SP Hamburger ハンバーガーボタン
---------------------------------------------------------- */
.hamburger {
  position: relative;
  width: 20px;
  height: 14px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  z-index: 1200;
}

.hamburger.is-open {
  background: transparent;
}

.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--primary);
  -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger span:nth-child(1) {
  top: 0;
  -webkit-transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger span:nth-child(2) {
  top: 6px;
}

.hamburger span:nth-child(3) {
  top: 12px;
  -webkit-transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* クリック（animate）時の変化 */
.hamburger.is-open span {
  background-color: var(--white);
}

.hamburger.is-open span:nth-child(1) {
  top: 6px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open span:nth-child(3) {
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger.is-open::before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 36px;
  height: 36px;
  background-color: var(--primary);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* ---------------------------------------------------------

  SP Navigation スマホ ナビゲーション

---------------------------------------------------------- */
.nav--sp {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--white);
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease;
  transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease;
  -o-transition: visibility .3s ease, opacity .3s ease, transform .3s ease;
  transition: visibility .3s ease, opacity .3s ease, transform .3s ease;
  transition: visibility .3s ease, opacity .3s ease, transform .3s ease, -webkit-transform .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
  SP Navigation inner スマホ ナビゲーション インナー
　---------------------------------------------------------- */
.nav--sp .nav--sp__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 8px 76px 24px 24px;
  margin: 0;

  & ul {
    & li {
      & a {
        color: var(--primary);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

      }
    }
  }

  & a,
  & button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
  }

  .header-menu {
    .header-menu-item {
      &:first-child {
        padding-top: 0;
      }
    }

    .menu-column {
      .header-menu-item {
        &:first-child {
          padding-top: 24px;
        }
      }
    }
  }

  .header-menu-item {
    padding: 24px 0 4px;
    font-size: var(--px20);
    font-family: "NotoSansJpB";
    border-bottom: 1px solid var(--primary);
  }

  /* サブメニューが無いメニュー */
  .header-menu-item.no-submenu {
    padding: 24px 0;
    font-family: "NotoSansJpB";

    &:last-child {
      border-bottom: none;
    }
  }

  /* 言語 */
  .header-menu-item.no-submenu {
    .lang {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      gap: 11px;
      font-family: "NotoSansJpR";
      font-size: var(--px15);

      & li {
        & a {
          color: #CFDCE4;
        }

        /* セパレータ */
        &:after {
          content: "|";
          padding-left: 10px;
          color: var(--primary);
        }

        /* セパレータ非表示 */
        &:first-child,
        &:last-child {
          &:after {
            content: none;
          }
        }
      }

      .active {
        & a {
          color: var(--primary);
        }
      }

      &:not(.active) {
        cursor: default;
      }

      /* 言語アイコン */
      .icon-lang {
        padding-right: 9px;

        & img {
          width: 36px;
          height: 36px;
        }
      }
    }
  }

  .header-menu-trigger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding-bottom: 20px;

    /* Icon　プラス */
    .icon {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin: 1px 1px 0 8px;
      position: relative;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      -o-transition: transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
      background: var(--primary);
      border-radius: 50%;

      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        background-color: var(--white);
        -webkit-transition: background 0.2s;
        -o-transition: background 0.2s;
        transition: background 0.2s;
      }

      &:before {
        width: 70%;
        height: 1px;
        left: 15%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      &:after {
        width: 1px;
        height: 70%;
        left: 50%;
        top: 15%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
      }
    }
  }

  /* Icon　マイナス　閉じる */
  .header-menu-item.is-open .icon {
    transform: rotate(90deg);

    &:before {
      opacity: 0;
    }
  }

  /* サブメニューの高さ（大きめに設定する） */
  .header-menu-item.is-open .header-menu-item-submenu {
    max-height: 800px;
  }
}

/* ---------------------------------------------------------
  SP Navigation Submenu スマホ ナビゲーションサブメニュー
---------------------------------------------------------- */
.nav--sp {
  .header-menu-item-submenu {
    list-style: disc;
    padding-left: 28px;
    margin: 0;
    max-height: 0;
    font-size: var(--px14);
    font-family: "NotoSansJpR";
    line-height: 24px;
    color: var(--primary);
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease;
    -o-transition: max-height 0.35s ease;
    transition: max-height 0.35s ease;

    & li {
      margin-bottom: 4px;

      /* リストマーカー */
      &:hover,
      &:active {
        color: var(--accent);
      }

      /* リンク */
      & a {

        &:hover,
        &:active {
          color: var(--accent);
        }
      }

      &:last-child {
        margin-bottom: 14px;
      }
    }
  }
}

/* スマホメニューを開く */
.nav--sp.is-open {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation: fadeIn .7s ease forwards;
  animation: fadeIn .7s ease forwards;
}


/*  SP メニュー展開時にスクロールさせない
--------------------------------------------- */
body.is-locked {
  overflow: hidden;
}

/* PC上段リンク非表示 */
.nav--pc__top {
  display: none;
}

/* PC下段メニューとメガメニュー非表示 */
.nav--pc__wrapper,
.nav--pc,
.mega {
  display: none;
}


/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  ヘッダーメニュー
---------------------------------------------------------- */
@media (min-width: 1024px) {

  /* ヘッダー初期状態 */
  .header {
    .header__inner {
      .nav--pc__wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
    }
  }

  /* ヘッダー固定後 */
  .header.is-fixed {
    .header__inner {
      .nav--pc__wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
      }
    }
  }

  /* 上段リンク */
  .nav--pc__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 64px;

    /* メニュー */
    & ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      align-items: center;
      gap: 24px;
      list-style: none;
      font-family: "NotoSansJpR";
      /* 画面幅1366pxのとき、フォントサイズ14pxを基準 */
      font-size: clamp(var(--px13), 1.02489vw, var(--px14));

      /* セパレータ */
      & li {
        &:after {
          content: "|";
          margin-left: 23px;
        }

        &:last-child {
          &:after {
            content: none;
          }
        }
      }
    }
  }

  /* 言語選択メニュー */
  .nav--pc__top {
    .lang {
      gap: 12px;
      /* 画面幅1024pxのとき、フォントサイズ15pxを基準 */
      font-size: clamp(var(--px13), 1.464843vw, var(--px15));

      & li {
        &:after {
          content: "|";
          margin-left: 10px;
          color: var(--white);
        }

        &:not(.active) {
          cursor: default;
        }
      }
    }
  }

  /* ヘッダー固定後 */
  .header.is-fixed {
    .header__inner {
      .nav--pc__wrapper {
        .nav--pc__top {
          padding-bottom: 12px;

          .lang {
            font-family: "NotoSansJpR";
            font-size: var(--px15);
            color: #CFDCE4;

            & li {
              &:after {
                color: var(--primary);
              }
            }

            .active {
              color: var(--primary);
            }
          }
        }
      }
    }
  }

  /* 言語アイコン */
  .header {
    .header__inner {
      .nav--pc__wrapper {
        .nav--pc__top {
          .lang {
            font-family: "NotoSansJpR";
            font-size: var(--px15);
            color: #CFDCE4;

            .active {
              color: var(--white);
            }

            .jp {
              position: relative;

              &:before {
                content: "";
                width: 18px;
                height: 18px;
                -webkit-mask-image: url('../img/common/icon_language.svg');
                mask-image: url('../img/common/icon_language.svg');
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-position: center;
                mask-position: center;
                position: absolute;
                left: -27px;
                background-color: var(--white);
              }
            }
          }
        }
      }
    }
  }

  /* ヘッダー固定後 */
  .header.is-fixed {
    .header__inner {
      .nav--pc__wrapper {
        .nav--pc__top {
          .lang {
            .jp {
              &:before {
                background-color: var(--primary);
              }
            }
          }
        }
      }
    }
  }




  /* 下段メニュー */
  .nav--pc {
    display: block;
  }

  .nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    list-style: none;
  }

  .header.is-fixed {
    .nav__list {
      & li {
        position: relative;

        & a {
          position: relative;

          &:after {
            content: '';
            position: absolute;
            inset: auto 0 0 0;
            width: 0;
            height: 2px;
            background-color: var(--accent);
            -webkit-transition: width 0.3s ease;
            -o-transition: width 0.3s ease;
            transition: width 0.3s ease;
          }
        }
      }

      .nav__link {

        &:hover,
        &:focus {
          color: var(--accent);

          &:after {
            width: 100%;
          }

        }
      }
    }
  }


  /* ヘッダー初期状態 */
  .nav__link {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "NotoSansJpSB";
    /* 画面幅1366pxのとき、フォントサイズ15pxを基準 */
    font-size: clamp(var(--px13), 1.098096vw, var(--px15));
  }

  /* ヘッダーがトップに固定後 */
  .header.is-fixed .nav__link {
    padding: 12px 0 13px;
  }

  .header.is-fixed .nav__list {
    border-top: 1px solid #707070;
  }

  /* SP非表示 */
  .hamburger,
  .nav--sp {
    display: none;
  }
}

/* ---------------------------------------------------------
  Mega Menu  メガメニュー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .has-mega {
    position: relative;
  }

  .mega {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 120px;
    left: 0;
    width: 100vw;
    height: auto;
    background: var(--accent);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease;
    transition: visibility .3s ease, opacity .3s ease, -webkit-transform .3s ease;
    -o-transition: visibility .3s ease, opacity .3s ease, transform .3s ease;
    transition: visibility .3s ease, opacity .3s ease, transform .3s ease;
    transition: visibility .3s ease, opacity .3s ease, transform .3s ease, -webkit-transform .3s ease;
  }

  .mega {
    .mega__inner {
      padding: 40px 160px;
      color: var(--white);
      -webkit-transition: 0.3s ease;
      -o-transition: 0.3s ease;
      transition: 0.3s ease;

      .mega-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 40px;
        font-size: var(--px15);
        min-width: 1046px;

        .main-menu {
          height: 100%;
          padding-right: 75px;
          white-space: nowrap;
          font-family: "NotoSerifJpSB";
          font-size: var(--px24);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;

          & li {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;

            & a {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
            }

            .icon {
              display: inline-block;
              width: 48px;
              height: 48px;
              margin-left: 12px;
              background: url("../img/common/icon_nav_arrow.svg") center / contain no-repeat;
            }

            &:hover {
              .icon {
                background-image: url("../img/common/icon_nav_arrow_hover.svg");
              }
            }
          }
        }

        .sub-menu {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          font-family: "NotoSansJpR";
          font-size: var(--px15);

          & li {
            width: 100%;
            padding-bottom: 15px;

            &:last-child {
              padding-bottom: 0;
            }

            & a {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              white-space: nowrap;
            }

            &:hover {
              opacity: .5;
            }

            .icon {
              display: inline-block;
              width: 15px;
              height: 15px;
              margin-left: 12px;
              background: url("../img/common/icon_sub-nav_arrow.svg") center / contain no-repeat;
            }
          }
        }
      }
    }
  }

  /* メガメニュー展開 */
  .has-mega.is-open {
    .mega {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation: fadeIn .7s ease forwards;
      animation: fadeIn .7s ease forwards;
    }
  }
}

/* ---------------------------------------------------------
  ヘッダー位置監視用
---------------------------------------------------------- */
.sentinel {
  background-color: transparent;
}