@charset "utf-8";
@media screen and (max-width: 950px) {
    body{font-size:10px;}
	body.active{overflow:hidden}
    h1{line-height: 0.6em;}
    .pcNone{display: block;}
    .spNone{display: none;}

    .mainInner{width: 90%;}
	.contentSec{padding: 1.7rem 0;}

    /* header */
    .logoImg{margin-bottom: 3em;text-align: center;}
    .logoImg img{width: 100%;max-width: 136px;}
    .headerAiImg {margin-top: min(2.3vh,22px);}
    .headerAiImg img{
        display: block;
        margin: 0 auto;
        /* width: 35%; */
        max-width: 200px;
        height: auto;
    }

    .header__nav {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        background-color: #fff;
        transition: ease .4s;
    }

    .nav-items {
        position: absolute;
        max-height: 80%;
        width: 90%;
        overflow: scroll;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0em 0 2em;
    }

    .nav-items__item a {
        color: #0a0a0a;
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: min(2vh,18px);
    }
	
	.nav-items__item .headerLinkSp{
		width: max-content;
		padding: 1em 3em;
		margin: 0px auto min(2vh, 18px);
	}

    .nav-items__item:last-child a {
        margin-bottom: 0;
    }

    .header__hamburger {
        width: 48px;
        height: 100%;
    
    }
    
    .hamburger {
        background-color: transparent;
        border-color: transparent;
        z-index: 9999;
        transition: 0.2s ease-in-out;
    }

    .hamburger span {
        width: 100%;
        height: 1px;
        background-color: #000;
        position: relative;
        transition: ease .4s;
        display: block;
    }
    
    .hamburger span:nth-child(1) {
        top: 0;
    }
    
    .hamburger span:nth-child(2) {
        margin: 8px 0;
    }
    
    .hamburger span:nth-child(3) {
        top: 0;
    }
    
    
      /* ハンバーガーメニュークリック後のスタイル */
    .header__nav.active {
        transform: translateX(0);
    }
	.is-hide .header__nav{
		transform: translateX(100%) translateY(var(--header-height));
	}
    .is-hide .header__nav.active {
        transform: translateX(0) translateY(var(--header-height));
    }
	
    .is-hide .active + .header__hamburger{
		position: absolute;
		top: 13vh;
		right: 20px;
	}


	
    .hamburger.active span:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    
    }
    
    .hamburger.active span:nth-child(3) {
        top: -13px;
        transform: rotate(-45deg);
    } 
    
#header .headerAbout{padding: 0.4em 0.5em 0.3em;}

    #header .headerAbout p{width: 65%; line-height:1.2em;}
    #header .headerWrap h1 img{width: 80%;}
    #header .headerWrap{padding: 0.5em 0 0.5em 1em;}
    .headerLink{display: none;}
    .headerLinkSp{display: block;width: 100%;text-align: center;padding: 1em 0;background-color: #DD513A;color: #fff !important;transition: ease .3s;position: relative;}
    .headerLinkSp::after{content: "";margin: auto;position: absolute;top: 0;bottom: 2px;right: 18px;width: 6px;height: 6px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);}

    #footer .footerInner{display: flex;flex-direction: column-reverse;}
    #footer .footerInner .footerAbout{display: block;width: 100%;}
    #footer .footerInner .footerAbout .footerAccess{width: 100%;}
    #footer .footerInner .footerNavi{width: 90%;margin: 0 auto;}
    #footer .footerInner .footerNavi .footerNaviList{display: flex;justify-content: space-between;flex-wrap: wrap;}
    #footer .footerInner .footerNavi .footerNaviList .footerNaviItem{margin-bottom: 2em;width: 35%;border-left: 1px solid #0a0a0a;padding-left: 1em;}
    #footer .footerInner .footerAbout img{display: block;margin: 0 auto 1em;}

    #relationSec .relationInner .relationWrap{display: flex;flex-wrap: wrap;justify-content: space-between;}
    #relationSec .relationInner .relationWrap:first-child{margin-bottom: 0;}
    #relationSec .relationInner .relationWrap a{display: block;width: 48%;}
    #relationSec .relationInner .relationWrap a img{width: 100%;}
    #relationSec .relationInner .relationWrap a{margin-bottom: 1em;}


/* 1. 通常時の上部メニューバーに、スムーズに動くアニメーションを設定 */
#header {
  transition: transform 0.3s ease;
}

/* 2. JSで「is-hide」クラスがついた時、画面の上にスライドさせて隠す */
#header.is-hide {
  transform: translateY(-100%); /* 自分の高さ分、上に引っ込める */
}

/* 一番外側の親枠（強制的に横並びを1行で保証し、高さを固定） */
#bottom-fixed-menu.bottom-nav {
  position: fixed ;
  bottom: -60px ; /* 初期状態は画面の下に隠しておく */
  left: 0 ;
  width: 100% ;
  height: 56px ;
  background-color: #ffffff ;
  display: flex ;
  flex-direction: row ; /* 要素を縦ではなく必ず横一列にする */
  align-items: stretch ; /* 中身のパーツの高さを揃える */
  justify-content: space-between ;
  z-index: 9999 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1) ;
  transition: bottom 0.3s ease !; /* スムーズに競り上がるアニメーション */
  box-sizing: border-box ;
  padding: 0 ;
  margin: 0 ;
}

/* JSによって「is-show」クラスがついたら画面内に表示する */
#bottom-fixed-menu.bottom-nav.is-show {
  bottom: 0 ;
}


/* ==========================================================================
   各メニュー項目の幅・比率指定（19% : 19% : 43% : 19%）とレイアウト崩れ対策
   ========================================================================== */

/* 各共通設定：他の不要なCSS干渉をリセットし、上下中央に整列させる */
#bottom-fixed-menu .nav-item {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  text-decoration: none ;
  font-size: 11px ;
  color: #333333 ;
  box-sizing: border-box;
  height: 100% ;
  margin: 0 ;
  padding: 0 ;
  border: none ;
}

/* ① ロゴ部分（19%） */
#bottom-fixed-menu .logo-item {
  flex: 0 0 21%;
  max-width: 21%;
  background-color: #ffffff;
  padding: 0 4px;
} 

/* ② アクセス部分（19%） */
#bottom-fixed-menu .access-item {
  flex: 0 0 21%;
  max-width: 21%;
  background-color: #a8a19a;
  color: #ffffff;
  /* flex-direction: column; */ /* アイコンの下に文字を配置 */
  gap: 2px;
  font-size: 14px;
} 

/* ③ ご宿泊予約部分（43%） */
#bottom-fixed-menu .reserve-item {
  flex: 0 0 38%;
  max-width: 38%;
  background-color: #8b6411;
  color: #ffffff;
  font-size: 14px; /* 広くなったので少し文字を大きく */
  /* flex-direction: column; */ /* アイコンの下に文字を配置 */
  gap: 2px;
} 

/* ④ ハンバーガーボタン部分（19%） */
#bottom-fixed-menu .burger-item {
  flex: 0 0 20%;
  max-width: 20%;
  background: none;
  cursor: pointer;
  position: relative;
  flex-direction: column;
} 


/* ==========================================================================
   アイコン画像とテキスト、三本線の詳細デザイン
   ========================================================================== */

/* 画像（アイコン・ロゴ）が消えたり巨大化したりするのを防ぐ */
#bottom-fixed-menu .nav-item img {
  display: block;
  width: auto ;
  height: auto;
  max-width: 100%;
  box-sizing: border-box ;
}

/* 個別の画像サイズ調整 */
#bottom-fixed-menu .logo-item img {
  max-width: 95% ;
  max-height: 35px ;
  object-fit: contain ;
}

#bottom-fixed-menu .access-item img {
  width: 14px ; /* 見やすいサイズに調整 */
}

#bottom-fixed-menu .reserve-item img {
  width: 16px ; /* 見やすいサイズに調整 */
}

/* ハンバーガーメニューの三本線（ただの黒い線に戻るのを防止） */
#bottom-fixed-menu .burger-item span {
  display: block ;
  width: 22px ;
  height: 2px ;
  background-color: #333333 ;
  margin: 3px 0 ;
}
}

/* ==========================================================================
   スマホ表示（レスポンシブ）の最優先保証
   ========================================================================== */
@media screen and (max-width: 767px) {
  #bottom-fixed-menu.bottom-nav.is-show {
    display: flex !important; /* 画面幅が狭くても絶対に横flexを維持 */
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    width: 100% ;
  }
}