@charset "UTF-8";
/* =======================================================
Global Navigation
======================================================= */
.nav-global {
  width: 100%;
  margin-top: 26px;
}
.nav-global-logo {
  display: none;
}
.nav-global > ul {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-global li {
  width: 25%;
  /*height: 70px; 20200616非表示*/
  -ms-flex-item-align: center;
  align-self: center;
  padding: 10px 0;
  background: #fff;
  overflow: hidden;
}
.nav-global li a {
  color: #000;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  display: block;
  padding: 10px 0;
  border-left: 1px dotted #000;
  -webkit-transition: .3s ;
  transition: .3s ;
}
.nav-global li:nth-child(2) a {
  border: none;
}
.nav-global li .txt-ja {
  color: #C58F21;
  font-size: 1.3rem;
  font-weight: normal;
  display: block;
  margin-top: 5px;
}

.nav-global .btn-catalog,
.nav-global .btn-reservation {
/*  width: 85px;*/
  width: 126px;
  padding: 0;
}
.nav-global .btn-catalog figcaption {
  color: #fff;
  font-size: 1.4rem;
  margin-top: 5px;
}
.nav-global .btn-reservation figcaption {
  color: #fff;
  font-size: 1.3rem;
  margin-top: 5px;
}
.nav-global .btn-catalog a/*,
.nav-global .btn-reservation a*/ {
  border: none;
  padding: 12px 0;
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
    height: 74px;/*20220215追加*/
}

/* 20200428web相談追加 */
.nav-global .btn-reservation a {
    border: none;
    padding: 5px 0 6px!important;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    height: 74px;/*20220215追加*/
}
@media all and (-ms-high-contrast: none) {
.nav-global .btn-reservation a {
    padding: 5px 0 7px!important;
    }
}
  .is-pc .is-fixed.nav-global li.btn-reservation a:hover::after,
  .is-pc .is-fixed.nav-global li.btn-reservation a.active::after {
    display: none!important;
}

.nav-global .btn-catalog a:hover,
.nav-global .btn-reservation a:hover {
  opacity: .5;
}
.nav-global .btn-catalog img {
  width: 25px;
}
.nav-global .btn-reservation img {
  width: 28px;
}
.nav-global .btn-catalog {
  background: #c58f21;
}
.nav-global .btn-reservation {
  background: #00295f;
}
/* hover PCのみ */
@media screen and (min-width: 768px) {
  .is-pc .nav-global li a:hover {
    color: #c58f21;
  }
}

/* is-fixed */
.is-fixed.nav-global {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background: #f5f5f5;
  z-index: 999;
}
.is-fixed.nav-global .nav-global-logo,
.is-fixed.nav-global li .txt-ja {
  display: block;
}
.is-fixed.nav-global .nav-global-logo {
/*  width: 45px;*/
  width: 60px;
}
.is-fixed.nav-global .nav-global-logo a {
  padding: 0;
}
.is-fixed.nav-global  li:nth-child(2) {
  margin-left: 60px;
}
.is-fixed.nav-global  li:nth-child(6) {
  margin-right: 20px;
}
.is-fixed.nav-global li {
  width: 20%;
  background: none;
    height: 70px;/*20220215追加*/
}
.is-fixed.nav-global li a {
  font-size: 1.5rem;
  font-weight: normal;
  border: none;
  padding: 4px 0;
}
.is-fixed.nav-global li .txt-ja {
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 5px;
}
.is-fixed.nav-global .btn-catalog {
  width: 104px;
  background: #c58f21;
}
.is-fixed.nav-global .btn-reservation {
  width: 104px;
  background: #00295f;
}
.is-fixed.nav-global .btn-catalog a,
.is-fixed.nav-global .btn-reservation a {
  padding: 12px 0;
}
/* hover PCのみ */
@media screen and (min-width: 768px) {
  .is-pc .is-fixed.nav-global li a {
    position: relative;
      height: 70px;/*20220215追加*/
  }
  .is-pc .is-fixed.nav-global li a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #c58f21;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .is-pc .is-fixed.nav-global li a:hover {
    color: #000;
  }
  .is-pc .is-fixed.nav-global li a:hover::after,
  .is-pc .is-fixed.nav-global li a.active::after {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  .is-pc .is-fixed.nav-global .nav-global-logo a:hover::after {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /* =======================================================
    スマホハンバーガーボタン
  ======================================================= */
  .nav-global-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 9999;
  }
  .nav-global-btn::after {
    content: "menu";
    color: #000;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1;
    margin-top: 25px;
  }

  .nav-global-btn .nav-global-btn__line {
    position: absolute;
    left: 0;
    display: block;
    width: 35px;
    height: 2px;
    background: #000;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  /* 3本線の各線の位置を指定 ---------------------- */
  .nav-global-btn__line:first-child { top: 0; }
  .nav-global-btn__line:nth-child(2) { top: 10px; }
  .nav-global-btn__line:last-child { top: 20px; }

  /* アクティブ時表示 ---------------------------- */
  .is-active.nav-global-btn::after {
    content: "close";
    color: #000;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1;
    margin-top: 26px;
  }
  .is-active .nav-global-btn__line:first-child {
    top: 11px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .is-active .nav-global-btn__line:nth-child(2) {
    opacity: 0;
  }
  .is-active .nav-global-btn__line:last-child {
    top: 11px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  /* =======================================================
  メニュー開閉アニメーション
  ======================================================= */
  .nav-global-overlay {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 999;
    padding-bottom: 80px;
    background: rgba(255,255,255,1);
    visibility: hidden;
    -webkit-transition: visibility .35s, height .35s;
    transition: visibility .35s, height .35s;
  }
  .nav-global-overlay.is-open {
    visibility: visible;
    height: 100%;
  }

  .nav-global-overlay .nav-global-menu01 li,
  .nav-global-overlay .nav-global-menu02 li,
  .nav-global-overlay .nav-global-sns,
  .nav-global-overlay .nav-global-search {
    opacity: 0;
    position: relative;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li,
  .nav-global-overlay.is-open .nav-global-menu02 li {
    -webkit-animation: fadeInRight .5s ease forwards;
    animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
  }
  /* アニメーション設定 ---------------------------- */
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(2) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
    animation-delay: .50s;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(5) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(6) {
    -webkit-animation-delay: .60s;
    animation-delay: .60s;
  }
  .nav-global-overlay.is-open .nav-global-menu01 li:nth-of-type(7) {
    -webkit-animation-delay: .65s;
    animation-delay: .65s;
  }
  .nav-global-overlay.is-open .nav-global-menu02 li {
    -webkit-animation-delay: .70s;
    animation-delay: .70s;
  }
  .nav-global-overlay.is-open .nav-global-sns,
  .nav-global-overlay.is-open .nav-global-search {
    -webkit-animation: fadeIn .5s ease forwards;
    animation: fadeIn .5s ease forwards;
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
  }
  
  /* アニメーション設定 ---------------------------- */
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      left: 20%;
    }
    100% {
      opacity: 1;
      left: 0;
    }
  }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      left: 20%;
    }
    100% {
      opacity: 1;
      left: 0;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
  }
  @keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
  }
  /* レイアウト ---------------------------- */
  .nav-global-overlay a {
    font-size: 1.5rem;
    color: #000;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 15px 0;
    display: block;
    text-decoration: none;
  }
  .nav-global-menu {
    height: calc( 100vh - 100px );
    overflow-y: scroll;
  }
  .nav-global-menu01 {
    padding-top: 50px;
    margin-bottom: 25px;
  }
  .nav-global-menu01 .icon-catalog img {
    width: 32px !important;
    padding: 5px;
    margin: 0 auto 5px auto;
    background: #c58f21;
    border-radius: 50%;
  }
  .nav-global-menu01 .icon-catalog a {
    color: #c58f21;
    font-weight: bold;
  }
  .nav-global-menu01 a {
  }
  .nav-global-menu01 span {
    line-height: 1;
    display: block;
  }
  .nav-global-menu01 .txt-en {
    font-size: 1.9rem;
    margin-bottom: 4px;
  }
  .nav-global-menu01 .txt-ja {
    font-size: 1.3rem;
  }
  .nav-global-menu02 a {
    padding: 10px 0;
  }

  /* sns */
  .nav-global-sns {
    /*width: 180px;*/
      width: 80%;
      max-width: 280px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav-global-sns li {
    width: 23%;
    text-align: center;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .nav-global-sns .icon-fb {
    width: 38px !important;
  }
  .nav-global-sns .icon-youtube {
    width: 43px !important;
  }
  .nav-global-sns .icon-ig {
    width: 38px !important;
  }
  .nav-global-sns .icon-line {
    width: 38px !important;
  }

  /* search */
  .nav-global-search {
    width: 230px;
    margin: 0 auto;
    position: relative;
  }
  .nav-global-search input {
    width:100%;
    color: #000;
    padding: 8px 6px;
    border: 1px solid #000;
  }
  .nav-global-search img {
    width: 24px !important;
    position: absolute;
    top: 6px;
    right: 6px;
  }


}