@charset "utf-8";
/* -----------------------------------------------------------------
 site_header
----------------------------------------------------------------- */
.site_header {
}
/* -----------------------------------------------------------------
 site_header_inner
----------------------------------------------------------------- */
.site_header_inner {
  position: fixed;
  top: var(--site_header_margin_top);
  left: 10px;
  right: 10px;
  min-height: var(--site_header_height);
  border-radius: calc(var(--site_header_height) / 2);
  background: #fff;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  
  /* 折りたたみ状態 */
  max-height: var(--site_header_height);
  overflow: hidden;
  transition: max-height 0.8s ease, border-radius 0.8s ease;
}
@media screen and (max-width: 767px) {
  .site_header_inner {
/*    width: calc(100vw - 20px);*/
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  /*---------- js_menu_open ----------*/
  .site_header.js_menu_open .site_header_inner {
    max-height: calc(100% - 2rem);
    border-radius: 2rem;
    overflow-y: auto;
  }
  .site_header.js_menu_open .site_header_inner::-webkit-scrollbar {
    display: none;
  }
}
@media print, screen and (min-width: 768px) {
  .site_header_inner {
    display: flex;
    justify-content: space-between;
  }
}
/* -----------------------------------------------------------------
 site_header_flex
----------------------------------------------------------------- */
.site_header_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--site_header_height);
  border-radius: 9999px;
  background: #fff;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .site_header_flex {
    position: fixed;
    width: calc(100% - 20px - (min(25px,6.6vw) * 2));
    margin: auto min(25px,6.6vw);
  }
}
@media print, screen and (min-width: 768px) {
  .site_header_flex {
    margin: auto min(2.25rem,2.3vw) auto min(50px,3vw);
  }
}

/* -----------------------------------------------------------------
 site_header_logo
----------------------------------------------------------------- */
.site_header_logo {
/*  flex: 0 0 auto;*/
}
.site_header_logo .link {
  display: flex;
  align-items: flex-end;
}
.site_header_logo .text {
  margin-left: .7em;
  white-space: nowrap;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .site_header_logo .logo {
    width: min(39.5vw,220px);
  }
  .site_header_logo .text {
    font-size: .83rem;
  }

}
@media print, screen and (min-width: 768px) {
  .site_header_logo .logo {
    width: min(283px,15vw);
  }
  .site_header_logo .text {
    font-size: min(1rem, 1vw);
  }
}
@media print, screen and (min-width: 768px) and (max-width: 1600px) {
  .site_header_logo .link {
    flex-direction: column;
    gap: .5em;
  }
}

/* -----------------------------------------------------------------
 site_header_gnav_wrap
----------------------------------------------------------------- */
.site_header_gnav_wrap .nav_main .link .en {
  font-weight: 700;
  color: var(--color_main);
}
.site_header_gnav_wrap .nav_main .link .jp {
  font-weight: 700;
  color: var(--color_txt_gray);
}


@media screen and (max-width: 767px) {
  .site_header_gnav_wrap {
    display: flex;
    flex-direction: column;
    margin: var(--site_header_height) min(25px,6.6vw) var(--margin_size_60);
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /*---------- js_menu_open ----------*/
  .site_header.js_menu_open .site_header_gnav_wrap {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site_header_gnav_wrap .nav_main {
    display: flex;
    flex-direction: column;
    gap:1.65rem;
    margin-top: 1rem;
  }
  .site_header_gnav_wrap .nav_main .link {
    display: flex;
    align-items: baseline;
    gap:1rem;
  }
  .site_header_gnav_wrap .nav_main .link .en {
    font-size: 1.83rem;
  }
  .site_header_gnav_wrap .nav_main .link .jp {
  }
  .site_header_gnav_wrap .cmn_btn01 {
    width: 100%;
  }
  .site_header_gnav_wrap .cmn_btn01 .text {
    font-size: 1.25rem;
  }
  .site_header_gnav_wrap .nav_entry .cmn_btn01 {
    margin-top: 1.3rem;
  }
}
@media print, screen and (min-width: 768px) {
  .site_header_gnav_wrap {
    display: flex;
    align-items: center;
    margin-right: min(25px, 1.8vw);
  }
  .site_header_gnav_wrap .nav_main {
    display: flex;
    gap: min(2.25rem,2.3vw);
    margin-right: min(2.25rem,2.3vw);
  }
  .site_header_gnav_wrap .nav_main .link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    height: var(--site_header_height);
  }
  .site_header_gnav_wrap .nav_main .link::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 100%;
    height: 3px;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
    background-color: #333;
  }
  .site_header_gnav_wrap .nav_main .link:nth-of-type(1)::after {
    background-color: var(--color_accent_red);
  }
  .site_header_gnav_wrap .nav_main .link:nth-of-type(2)::after {
    background-color: var(--color_accent_orange);
  }
  .site_header_gnav_wrap .nav_main .link:nth-of-type(3)::after {
    background-color: var(--color_accent_Yellow);
  }
  .site_header_gnav_wrap .nav_main .link:nth-of-type(4)::after {
    background-color: var(--color_accent_green);
  }
  .site_header_gnav_wrap .nav_main .link:nth-of-type(5)::after {
    background-color: var(--color_accent_blue);
  }
  .site_header_gnav_wrap .nav_main .link:hover::after {
    transform-origin: left top;
    transform: scale(1, 1);
  }
  .site_header_gnav_wrap .nav_main .link .en {
    font-size: 1.13rem;
    font-size: min(1.13rem,1.45vw);
  }
  .site_header_gnav_wrap .nav_main .link .jp {
    font-size: .875rem;
    font-size: min(.875rem,1vw);
  }
  .site_header_gnav_wrap .nav_contact {
    margin-right: min(1rem,1vw);
  }
  .site_header_gnav_wrap .cmn_btn01 {/*cmn_parts上書き*/
    width: auto;
    min-width: max-content;
    min-height: 3.18rem;
    margin-top: 0;
    padding: 0.5em 1em 0.5em 1.8em;
    font-size: min(1rem,1vw);
  }
  .site_header_gnav_wrap .cmn_btn01 > .text {/*cmn_parts上書き*/
    font-size: min(1rem,1vw);
  }
  .site_header_gnav_wrap .cmn_btn01 > .arrow {/*cmn_parts上書き*/
    border-width: 0.22em 0 0.22em .86em;
  }
}
@media print, screen and (min-width: 768px) and (max-width: 1600px) {
  .site_header_gnav_wrap .cmn_btn01 {/*cmn_parts上書き*/
    gap: 0;
    padding: 0.5em 0.8em 0.5em 0.5em;
  }
}
/* -----------------------------------------------------------------
 site_header_toggle
----------------------------------------------------------------- */
.site_header_toggle {
  position: relative;
  width: 25px;
  height: 10px;
  border: none;
  background: none;
  cursor: pointer;
}
@media print, screen and (min-width: 768px) {
  .site_header_toggle {
    display: none;
  }
}

/* -----------------------------------------------------------------
 site_header_toggle_bar
----------------------------------------------------------------- */
.site_header_toggle_bar {
  display: block;
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transform: translateX(-50%);
}

/* 初期位置：二本線 */
.site_header_toggle_bar:nth-of-type(1) { top: 0px; }
.site_header_toggle_bar:nth-of-type(2) { top: 8px; }

/* アニメーション定義 */
@keyframes bar1-to-x {
  0%   { top: 0px; transform: translateX(-50%) rotate(0deg); }
  40%  { top: 4px; transform: translateX(-50%) rotate(0deg); }
  100% { top: 4px; transform: translateX(-50%) rotate(30deg); }
}

@keyframes bar2-to-x {
  0%   { top: 8px; transform: translateX(-50%) rotate(0deg); }
  40%  { top: 4px; transform: translateX(-50%) rotate(0deg); }
  100% { top: 4px; transform: translateX(-50%) rotate(-30deg); }
}

/* アクティブ時にアニメ再生 */
.site_header_toggle.js_active .site_header_toggle_bar:nth-of-type(1) {
  animation: bar1-to-x 0.6s forwards;
}

.site_header_toggle.js_active .site_header_toggle_bar:nth-of-type(2) {
  animation: bar2-to-x 0.6s forwards;
}

/* 元に戻す用アニメーション */
@keyframes bar1-to-menu {
  0%   { top: 4px; transform: translateX(-50%) rotate(30deg); }
  40%  { top: 4px; transform: translateX(-50%) rotate(0deg); }
  100% { top: 0px; transform: translateX(-50%) rotate(0deg); }
}

@keyframes bar2-to-menu {
  0%   { top: 4px; transform: translateX(-50%) rotate(-30deg); }
  40%  { top: 4px; transform: translateX(-50%) rotate(0deg); }
  100% { top: 8px; transform: translateX(-50%) rotate(0deg); }
}

.site_header_toggle:not(.js_active) .site_header_toggle_bar:nth-of-type(1) {
  animation: bar1-to-menu 0.6s forwards;
}

.site_header_toggle:not(.js_active) .site_header_toggle_bar:nth-of-type(2) {
  animation: bar2-to-menu 0.6s forwards;
}