/* ==================================================
   Header
================================================== */

.header {
  position: relative;
  z-index: 1000;

  width: 100%;
  height: 80px;

  background-color: #FFFFFF;
}


/* ==================================================
   Fixed Header
================================================== */

#header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 9999;

  width: 100%;
  height: 80px;

  transform: translateY(0);

  transition:
    transform 0.45s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ==================================================
   Header Space
================================================== */

body {
  padding-top: 80px;
}


/* ==================================================
   Inner
================================================== */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 100%;

  padding: 0 42px 0 56px;
}


/* ==================================================
   Scroll Animation
================================================== */

#header.UpMove {
  transform: translateY(-100%);
}

#header.DownMove {
  transform: translateY(0);
}

#header.is-scroll {
  background-color: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.06);
}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1100px) {

  .header,
  #header {
    height: 70px;
  }

  body {
    padding-top: 70px;
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .header,
  #header {
    height: 64px;
  }

  body {
    padding-top: 64px;
  }

}


/* ==================================================
   Inner
================================================== */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 100%;

  padding: 0 42px 0 56px;
}


/* ==================================================
   Logo
================================================== */

.header__logo {
  flex-shrink: 0;

  width: 180px;
  max-width: 180px;
}

.header__logo a {
  display: block;

  width: 100%;
}

.header__logo img {
  display: block;

  width: 100%;
  max-width: 180px;
  height: auto;

  object-fit: contain;
}


/* ==================================================
   Right
================================================== */

.header__right {
  display: flex;
  align-items: center;

  margin-left: auto;
}


/* ==================================================
   Navigation
================================================== */

.header__nav {
  display: flex;
  align-items: center;
}


/* ==================================================
   Navigation Link
================================================== */

.header__nav-link {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 145px;

  padding: 12px 30px;

  color: #000000;

  text-align: center;

  transition: opacity 0.3s ease;
}


/* ==================================================
   Navigation Separator
================================================== */

.header__nav-link:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -1px;

  width: 1px;
  height: 30px;

  background-color: #A5925D;

  transform:
    translateY(-50%)
    rotate(45deg);

  opacity: 0.75;

  pointer-events: none;
}


/* ==================================================
   Navigation English
================================================== */

.header__nav-en {
  margin: 0 0 3px;

  color: #000000;

  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;

  line-height: 1.3;

  letter-spacing: 0;
}


/* ==================================================
   Navigation Japanese
================================================== */

.header__nav-ja {
  margin: 0;

  color: #000000;

  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 400;

  line-height: 1.4;

  letter-spacing: 0.03em;
}


/* ==================================================
   Navigation Hover
================================================== */

.header__nav-link:hover {
  opacity: 0.55;
}


/* ==================================================
   Language
================================================== */

.header__language {
  display: flex;
  align-items: center;

  margin-left: 22px;
  margin-right: 24px;
}


/* ==================================================
   Language Link
================================================== */

.header__language-link {
  display: block;

  padding: 8px 5px;

  transition: opacity 0.3s ease;
}

.header__language-link p,
.header__language-separator {
  margin: 0;

  color: #000000;

  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;

  line-height: 1;
}


/* ==================================================
   Language Separator
================================================== */

.header__language-separator {
  margin: 0 1px;

  opacity: 0.35;
}


/* ==================================================
   Language State
================================================== */

.header__language-link:not(.is-current) {
  opacity: 0.4;
}

.header__language-link:hover {
  opacity: 0.55;
}


/* ==================================================
   Contact
================================================== */

.header__contact {
  position: relative;

  display: flex;
  align-items: center;

  width: 155px;
  height: 48px;

  padding: 0 48px 0 22px;

  color: #000000;
  background-color: #FFFFFF;

  border: 1px solid #D9D9D9;
  border-radius: 2px;

  overflow: hidden;
}


/* ==================================================
   Contact Background
================================================== */

.header__contact::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #F5F2E9;

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 0.4s ease;
}


/* ==================================================
   Contact Dot
================================================== */

.header__contact::after {
  content: "";

  position: absolute;
  z-index: 2;

  top: 50%;
  right: 23px;

  width: 8px;
  height: 8px;

  background-color: #20460C;

  border-radius: 50%;

  transform: translateY(-50%);
}


/* ==================================================
   Contact Text
================================================== */

.header__contact p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #000000;

  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;

  line-height: 1;
}


/* ==================================================
   Contact Hover
================================================== */

.header__contact:hover::before {
  transform: scaleX(1);
}


/* ==================================================
   1500px
================================================== */

@media screen and (max-width: 1500px) {

  .header__inner {
    padding-left: 36px;
    padding-right: 30px;
  }

  .header__logo {
    width: 150px;
  }

  .header__logo img {
    max-width: 150px;
  }

  .header__nav-link {
    min-width: 125px;

    padding-left: 22px;
    padding-right: 22px;
  }

  .header__nav-en {
    font-size: 12px;
  }

  .header__nav-ja {
    font-size: 14px;
  }

}


/* ==================================================
   1280px
================================================== */

@media screen and (max-width: 1280px) {

  .header__inner {
    padding-left: 28px;
    padding-right: 24px;
  }

  .header__logo {
    width: 130px;
  }

  .header__logo img {
    max-width: 130px;
  }

  .header__nav-link {
    min-width: auto;

    padding-left: 17px;
    padding-right: 17px;
  }

  .header__nav-link:not(:last-child)::after {
    height: 24px;
  }

  .header__nav-en {
    font-size: 11px;
  }

  .header__nav-ja {
    font-size: 13px;
  }

  .header__language {
    margin-left: 14px;
    margin-right: 16px;
  }

  .header__contact {
    width: 135px;
  }

}


/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1100px) {

  .header {
    height: 70px;
  }

  .header__inner {
    padding: 0 24px;
  }

  .header__logo {
    width: 120px;
  }

  .header__logo img {
    max-width: 120px;
  }

  .header__nav {
    display: none;
  }

  .header__language {
    margin-left: 0;
    margin-right: 18px;
  }

}


/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .header {
    height: 64px;
  }

  .header__inner {
    padding: 0 20px;
  }

  .header__logo {
    width: 90px;
  }

  .header__logo img {
    max-width: 90px;
  }

  .header__language {
    margin-right: 12px;
  }

  .header__contact {
    width: 116px;
    height: 42px;

    padding-left: 17px;
    padding-right: 38px;
  }

  .header__contact p {
    font-size: 12px;
  }

  .header__contact::after {
    right: 17px;

    width: 7px;
    height: 7px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  .header__inner {
    padding: 0 16px;
  }

  .header__logo {
    width: 82px;
  }

  .header__logo img {
    max-width: 82px;
  }

}


/* ==================================================
   Header Scroll Animation
================================================== */

#header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 9999;

  width: 100%;

  transform: translateY(0);

  transition:
    transform 0.45s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* 下スクロールで非表示 */
#header.UpMove {
  transform: translateY(-100%);
}


/* 上スクロールで表示 */
#header.DownMove {
  transform: translateY(0);
}


/* スクロール後背景 */
#header.is-scroll {
  background-color: rgba(255, 255, 255, 0.96);

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.06);
}


/* ==================================================
   Hamburger Button
================================================== */

.hamBtn {
  position: fixed;

  top: 11px;
  right: 16px;

  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  margin: 0;
  padding: 0;

  background-color: #FFFFFF;

  border: 1px solid #404040;
  border-radius: 0;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}


/* ==================================================
   Hamburger Bar
================================================== */

.hamBar {
  position: relative;

  display: block;

  width: 20px;
  height: 12px;
}

.hamBar > div {
  position: absolute;

  left: 0;

  display: block;

  width: 100%;
  height: 1px;

  background-color: #404040;

  transform-origin: center;

  transition:
    top 0.35s ease,
    transform 0.35s ease,
    background-color 0.3s ease;
}


/* 上 */

.hamBar > div:nth-child(1) {
  top: 2px;
}


/* 下 */

.hamBar > div:nth-child(2) {
  top: 10px;
}


/* ==================================================
   Hamburger Active
================================================== */

.hamBar.active > span:nth-child(1) {
  top: 6px;

  transform: rotate(45deg);
}

.hamBar.active > span:nth-child(2) {
  top: 6px;

  transform: rotate(-45deg);
}


/* ==================================================
   SP Menu
================================================== */

.sp__menu {
  position: fixed;

  inset: 0;

  z-index: 9900;

  display: block;

  width: 100%;
  height: 100dvh;
  min-height: 100vh;

  color: var(--color-text);
  background-color: #FFFFFF;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform: translateY(-20px);

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   SP Menu Active
================================================== */

.sp__menu.active {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);
}


/* ==================================================
   SP Menu Inner
================================================== */

.sp__menu-inner {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100dvh;

  padding:
    90px
    24px
    30px;
}


/* ==================================================
   SP Menu Logo
================================================== */

.sp__menu-logo {
  position: absolute;

  top: 20px;
  left: 24px;

  display: block;

  width: 120px;

  margin: 0;

  text-decoration: none;
}

.sp__menu-logo img {
  display: block;

  width: 100%;
  height: auto;
}


/* ==================================================
   SP Navigation
================================================== */

.sp_menu-nav {
  width: 100%;
}


/* ==================================================
   SP Menu List
================================================== */

.sp_menu-list {
  display: flex;
  flex-direction: column;

  width: 100%;

  margin: 25px auto 0;
  padding: 0;

  border-top: 1px solid #D7D7D7;
}


/* ==================================================
   SP Menu Item
================================================== */

.sp_menu-item {
  width: 100%;

  margin: 0;
  padding: 0;

  border-bottom: 1px solid #D7D7D7;
}


/* ==================================================
   SP Menu Link
================================================== */

.sp_menu-item > .sp-menu__link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 74px;

  padding: 15px 4px;

  color: var(--color-text);

  text-decoration: none;

  transition: opacity 0.3s ease;
}

.sp_menu-item > .sp-menu__link:hover {
  opacity: 0.55;
}


/* ==================================================
   SP Menu Text
================================================== */

.sp_menu-text {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.sp_menu-text p {
  margin: 0;
}


/* English */

.sp_menu-en {
  color: #777777;

  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 400;

  line-height: 1.3;
}


/* Japanese */

.sp_menu-ja {
  color: var(--color-text);

  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 400;

  line-height: 1.5;
  letter-spacing: 0.04em;
}


/* ==================================================
   SP Menu Arrow
================================================== */

.sp_menu-arrow {
  position: relative;

  display: block;
  flex-shrink: 0;

  width: 20px;
  height: 20px;

  background-color: transparent;

  border: 1px solid #A5925D;
  border-radius: 50%;
}


/* Arrow */

.sp_menu-arrow::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 5px;
  height: 5px;

  border-top: 1px solid #A5925D;
  border-right: 1px solid #A5925D;

  transform:
    translate(-65%, -50%)
    rotate(45deg);
}


/* ==================================================
   SP Menu Bottom
================================================== */

.sp_menu-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  margin-top: auto;
  padding-top: 40px;
}


/* ==================================================
   Language
================================================== */

.sp_menu-language {
  display: flex;
  align-items: center;

  gap: 10px;
}

.sp_menu-language-link {
  color: #999999;

  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;

  text-decoration: none;
}

.sp_menu-language-link.is-current {
  color: var(--color-text);
}

.sp_menu-language > span {
  display: block;

  width: 1px;
  height: 14px;

  background-color: #BEBEBE;
}


/* ==================================================
   SP Contact
================================================== */

.sp_contact {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 145px;
  min-height: 44px;

  margin: 0;
  padding: 10px 18px;

  color: var(--color-text);
  background-color: #FFFFFF;

  border: 1px solid #404040;
  border-radius: 0;

  text-decoration: none;

  overflow: hidden;

  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
}

.sp_contact::before {
  content: "";

  position: absolute;
  z-index: 0;

  inset: 0;

  background-color: var(--color-switch);

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 0.4s ease;
}

.sp_contact:hover::before {
  transform: scaleX(1);
}


/* ==================================================
   Contact Text
================================================== */

.sp_contact p {
  position: relative;
  z-index: 2;

  margin: 0;

  color: inherit;

  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;

  line-height: 1;
}


/* ==================================================
   Contact Dot
================================================== */

.sp_contact-dot {
  position: relative;
  z-index: 2;

  display: block;
  flex-shrink: 0;

  width: 7px;
  height: 7px;

  background-color: var(--color-green);

  border-radius: 50%;
}


/* ==================================================
   768px
================================================== */

@media screen and (max-width: 768px) {

  .hamBtn {
    top: 9px;
    right: 14px;

    width: 46px;
    height: 46px;
  }

  .sp__menu-inner {
    padding:
      80px
      20px
      24px;
  }

  .sp__menu-logo {
    top: 19px;
    left: 20px;

    width: 105px;
  }

  .sp_menu-list {
    margin-top: 20px;
  }

  .sp_menu-item > .sp-menu__link {
    min-height: 68px;
  }

}


/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  .sp_menu-bottom {
    gap: 14px;
  }

  .sp_contact {
    width: 135px;

    padding-inline: 15px;
  }

}

/* ==================================================
   Tablet
================================================== */

@media screen and (max-width: 1100px) {

  .header,
  #header {
    height: 70px;
  }

  body {
    padding-top: 70px;
  }

  .header__inner {
    padding: 0 86px 0 24px;
  }

  .header__logo {
    width: 120px;
  }

  .header__logo img {
    max-width: 120px;
  }

  /* PCナビのみ非表示 */
  .header__nav {
    display: none;
  }

  /* 言語切替は残す */
  .header__language {
    display: flex;
    margin-left: auto;
    margin-right: 14px;
  }

  .header__language-link {
    padding: 6px 4px;
  }

  .header__language-link p,
  .header__language-separator {
    font-size: 10px;
  }

  /* Contactも残す */
  .header__contact {
    display: flex;

    width: 120px;
    height: 40px;

    margin-right: 12px;

    padding:
      0
      34px
      0
      15px;
  }

  .header__contact p {
    font-size: 11px;
  }

  .header__contact::after {
    right: 14px;

    width: 7px;
    height: 7px;
  }

  /* Hamburger */
  .hamBtn {
    top: 12px;
    right: 18px;

    display: flex;

    width: 46px;
    height: 46px;
  }

}

/* ==================================================
   SP
================================================== */

@media screen and (max-width: 768px) {

  .header,
  #header {
    height: 64px;
  }

  body {
    padding-top: 64px;
  }

  .header__inner {
    padding:
      0
      68px
      0
      16px;
  }


  /* Logo */
  .header__logo {
    width: 120px;
  }

  .header__logo img {
    max-width: 120px;
  }


  /* Language */
  .header__language {
    display: flex;

    margin-left: auto;
    margin-right: 8px;
  }

  .header__language-link {
    padding: 5px;
  }

  .header__language-link p,
  .header__language-separator {
    font-size: 12px;
  }

  .header__language-separator {
    margin: 0;
  }


  /* Contact */
  .header__contact {
    display: flex;

    width: 92px;
    height: 36px;

    margin-right: 8px;

    padding:
      0
      26px
      0
      12px;
  }

  .header__contact p {
    font-size: 12px;
  }

  .header__contact::after {
    right: 11px;

    width: 6px;
    height: 6px;
  }
  .header__right{
    gap: .5rem;
  }


  /* Hamburger */
  .hamBtn {
    top: 9px;
    right: 10px;

    width: 46px;
    height: 46px;
  }

}

/* ==================================================
   Small SP
================================================== */

@media screen and (max-width: 480px) {

  .header__inner {
    padding:
      0
      66px
      0
      12px;
  }

  .header__logo {
    width: 120px;
  }

  .header__logo img {
    max-width: 120px;
  }

  .header__language {
    margin-right: 6px;
  }

  .header__contact {
    width: 82px;
    height: 34px;

    margin-right: 6px;

    padding-left: 10px;
    padding-right: 22px;
  }

  .header__contact p {
    font-size: 9px;
  }

  .header__contact::after {
    right: 9px;

    width: 5px;
    height: 5px;
  }

  .hamBtn {
    right: 8px;
  }

}