/* CSS Document */

/*  ========================
	*********  shop 20250830  *********
=============================================  */
#page_shop #inner h2 {
	font-family: serif;
	color: #402511;
	display: flex;
	padding-bottom: 10px;
	margin-bottom: 0;
	align-items: center;
	gap: 0 20px;
}
#inner h2 span {
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 14px;
}
#inner h3 {
	color: #402511;
	position: relative;
	z-index: 1;
}
#inner h2 img, #inner h3 img {
	top: -0.8em;
	position: relative;
	z-index: -1;
}
.shop-table thead tr th {
	background-color: rgb(255, 249, 231);
	border: 1px solid #ffdd75;
	border-right: 1px solid #ffdd75;
    border-bottom: 1px solid #ffdd75;
	text-align: center;
	padding: 8px 0;
}
.shop-table tbody tr:nth-child(2n+2)  {
	background: rgb(255, 249, 231);
}
.highway tbody tr:nth-child(odd) td:nth-child(odd) {
	background: #F7F7F7;
}
.highway tbody tr:nth-child(even) td:nth-child(even) {
	background: #F7F7F7;
}
.shop-table.low tbody tr:nth-child(2n+2) {
	background:#F7F7F7;
}
.shop-table td {
	padding: 0;
	text-align: center;
	padding: 8px;
}
.shop-table th:nth-child(1),
.shop-table td:nth-child(1) { width: 25%; } /* 店名 */
.shop-table td:nth-child(1) { text-align: left; }
.shop-table th:nth-child(2),
.shop-table td:nth-child(2) { width: 35%; } /* 所在地+地図 */
.shop-table td:nth-child(2) { text-align: left; }
.shop-table th:nth-child(3),
.shop-table td:nth-child(3) { width: 20%; } /* 電話番号 */
.shop-table th:nth-child(4),
.shop-table td:nth-child(4) { width: 20%; } /* 営業時間+店休日 */
#inner .shop-table a[href^="tel:"],
#inner .othershop a[href^="tel:"] {
	color: #000;
	text-decoration: none;
	pointer-events: none;
    cursor: default;
}
#sale1, #sale2, #depa, #airport1, #airport2, #highway, #other1, #other2 {
	border-collapse:collapse
}
#sale1, #sale2, #airport1, #airport2, #other1, #other2 {
	width: 100%;
	float: none;
}
#sale1 th, #sale2 th, #depa th, #airport1 th, #airport2 th, #highway th, #other1 th, #other2 th {
	line-height: 25px;
}

@media screen and (min-width: 769px) { 
	#inner .othershop .sh-wrap.js-scrollable {
		overflow-y: hidden!important;
	}
	#inner .othershop .sh-wrap.js-scrollable table {
		margin-top: 0;
	}
	.bread.sp {
		display: none;
	}
}

#directnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
}
#directnav li {
	display: flex;
}
#directnav li a {
	display:block;
}
#directnav li a {
	position: relative;
	display: inline-block;
  	padding: 8px 20px 8px 30px;
  	border: 1px solid #FBBD00;
  	background: #fff;
  	color: #600;
  	font-weight: bold;
  	text-decoration: none;
	width: 100%;

  	/* 角ごとに違う丸みをつける */
  	border-radius: 40% 60% 50% 50% / 60% 50% 50% 50%;
}
#directnav li a:before {
	position: absolute;
	content: "▶︎";
	font-size: 9px;
	top: 55%;
	transform: translateY(-50%);
	bottom: 0;
	left: 15%;
	margin: 0 auto;
}
#directnav li.is-active a {
	background: #FFDD04;
}


/*  ========================
	*********  SP  *********
=============================================  */
@media screen and (max-width: 768px) {
	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		overflow-x: hidden;
		font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	}
	#bread {
		display: none;
	}
	.bread.sp {
		display: flex;
		gap: 0 10px;
		color: #402511;
	}
	.bread.sp a {
		color: #402511;
	}
	.scroll-hint-icon {
		top: calc(25% - 20px)!important;
		width: 150px!important;
	}
	#inner {
		padding: 20px;
		box-sizing: border-box;
	}
	#inner h2 {
		flex-direction: column;
		align-items: flex-start;
	}
	#inner h3 {
		margin-top: 8%;
		margin-bottom: -6%;
	}
	#inner h2 img,
	#inner h3 img {
		width: 100%;
	}
	#page_shop #inner h2 {
		justify-content: flex-start;
		text-align: left;
		align-items: flex-start;
        flex-direction: column;
	}
	#inner h2 span {
		font-size: 13px;
		font-weight: 500;
	}
	#header {
/* 		width: calc(100% - 20px); */
		width: 100%;
		position: fixed;
		top: 0;
		background: #402511;
		display: flex;
		align-items: center;
		z-index: 300;
		box-sizing: border-box;
	}
	.head_inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: relative;
		z-index: 999;
		padding: 0 20px;
		margin: 0 auto;
		background: #402511;
	}
	#headttl {
		display: flex;
		padding: 0;
		box-sizing: border-box;
		align-items: center;
		width: 66%;
	}
	#headttl img {
		width: 100%;
		height: auto;
	}
	#unav {
		display: flex;
		justify-content: flex-end;
		top: 50%;
		transform: translateY(-50%);
		left: inherit;
		right: 0;
	}
	#gnav,
	#unav ul {
		display: none;
	}
	#unav #btn_link {
		width: 80%;
		margin: 0 0% 0 0px;
		display: flex;
		align-items: center;
	}
	#unav #btn_link .en {
		width: 25%;
	}
	#unav #btn_link .en a {
		width: auto;
	}
	#unav #btn_link .en a img {
		width: 100%;
	}
	#unav #btn_link .btn_online {
		width: 40%;
	}
	#unav #btn_link .btn_online a {
		width: 100%;
		margin-left: 10px;
	}
	#unav #btn_link .btn_online a img {
		width: 100%;
	}
	#customsearch {
		display: none;
	}
	#gnav {
		width: 100%;
		background-image: none;
		padding: 0;
	}
	#gnav ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-image: none;
		transform: translateX(-9999px);
		transition: all 0.3s ease;
	}
	#gnav ul.active {
		transform: translateX(0);
	}
	#gnav ul li,
	#gnav ul li a {
		float: none;
		width: 100%;
		display: block;
		text-indent: 0;
	}
	#gnav ul li a:hover {
		background-image: none;
	}
	.wrapper {
		width: 100%;
	}
	#side {
		display: none;
	}
	#mainarea {
		width: 100%;
	}
	#container,
	#container #inner,
	#innerwrap {
		background-image: none;
	}
	#container {
		padding-top: 0;
	}
	#container #inner {
		padding: 0;
	}
	#content {
		padding: 0 16px;
		box-sizing: border-box;
		margin-top: 80px;
	}
	#contentimg img {
		width: 100%;
	}
	#directnav {
		display: flex;
		flex-wrap: wrap;
		margin-top: 2em;
	}
	#directnav li {
		width: 30%;
	}

	#directnav li a {
		width: 100%;
		height: 40px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4px 0 4px 10px;
	}
	#directnav li a:before {
	    top: 57%;
	    transform: translateY(-50%);
	}
	#inner .shop-table a[href^="tel:"] {
		color: #000;
		text-decoration: underline;
		pointer-events: initial;
    	cursor: pointer;
	}
	.shop-table,
	.othershop table {
		width: 1000px;
		margin-bottom: 10px;
	}
	.othershop table {
		margin-top: 0;
	}
	#inner .othershop h3 {
		margin-top: 15%;
	}
	#inner .othershop h3 img {
		width: 50%;
	}
  	.sh-wrap {
  	  position: relative;
  	  overflow-x: auto;
  	  -webkit-overflow-scrolling: touch;
  	}

  	/* 右端にグラデと矢印（初期表示） */
  	.sh-wrap::after {
  	  content: "";
  	  position: sticky;        /* スクロールしても右端に留まる */
  	  right: 0;
  	  bottom: 8px;
  	  margin-left: auto;
  	  display: inline-block;
  	  font-size: 12px;
  	  color: #555;
  	  
  	  padding: 6px 10px 6px 30px;
  	  border-radius: 14px 0 0 14px;
  	  box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
  	  pointer-events: none;
  	}
	.scroll-hint-shadow-wrap::before,
	.scroll-hint-shadow-wrap::after {
		background: none!important
	}

  	/* 左右のエッジに薄い影（スクロール余地の方向だけ表示） */
  	.sh-wrap:not(.sh-left)::before,
  	.sh-wrap.sh-right::after { /* 擬似要素の併用回避のため簡易対応 */
	  content: none;
  	}

  	/* 左側に余地があるとき、左にもグラデ影を表示 */
  	.sh-wrap.sh-left::before {
  	  content: "";
  	  position: sticky;
  	  left: 0;
  	  top: 0;
  	  bottom: 0;
  	  width: 16px;
  	  pointer-events: none;
  	}

  	/* 右側に余地があるとき（初期状態）、右側影を強調 */
  	.sh-wrap.sh-right::after {
  	  /* 上の ::after をそのまま使う（文言＋白グラデ） */
  	}

  	/* 1回スクロールしたらヒント文字だけフェードアウト（影は残す） */
  	.sh-wrap.hint-read::after {
  	  content: "";
  	  padding: 0;
  	  height: 100%;
  	  width: 24px;
  	  border-radius: 0;
  	  bottom: 0;
  	}

  	/* オーバーフローが無い場合はヒント非表示 */
  	.sh-wrap.no-overflow::before,
  	.sh-wrap.no-overflow::after {
  	  display: none !important;
  	  content: "";
  	}
	
	#fnav {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.navsec {
		width: 50%;
	}
	#fnav {
		background-size: contain;
		background-position: 0 4%;
	}
}


/*  ========================
	*********  header ハンバーガー  *********
=============================================  */
@media screen and (max-width: 768px) { 
		/* ハンバーガーアイコン */
		.sp_nav {
		  width: 2em;
		  height: 22px;
		  position: absolute;
		  cursor: pointer;
		  z-index: 1001; /* メニューより前に出す */
		  right: 1.5em;
		}

		.sp_nav span {
		  position: absolute;
		  left: 0;
		  width: 100%;
		  height: 3px;
		  background: #FFF;
		  border-radius: 3px;
		  transition: all 0.4s;
		}

		.sp_nav span:nth-child(1) { top: 0; }
		.sp_nav span:nth-child(2) { top: 9px; }
		.sp_nav span:nth-child(3) { top: 18px; }

		/* 開いたときのアニメーション */
		.sp_nav.active span:nth-child(1) {
		  transform: rotate(45deg);
		  top: 9px;
		}
		.sp_nav.active span:nth-child(2) {
		  opacity: 0;
		}
		.sp_nav.active span:nth-child(3) {
		  transform: rotate(-45deg);
		  top: 9px;
		}

		body.menu_open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        /* SPメニュー本体 */
        .sp_menu {
            position: absolute;
			padding-top: 70px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            /* background-color: #FFF; */
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 300;
            overflow-y: auto;
			scrollbar-width: none; /* Firefox */
    		-ms-overflow-style: none; /* IE/Edge */
        }
		.sp_menu::-webkit-scrollbar {
    		display: none; /* Chrome/Safari/WebKit */
		}

        .sp_menu.open {
            transform: translateX(0);
			overflow-x: hidden;
        }

        .menu_content {
            background-color: white;
            width: 100%;
            min-height: 100vh;
            padding: 0 0 40px;
			margin-top: 0;
        }

        /* メインメニュー項目 */
        .menu_item {
            border-bottom: 1px solid #e0e0e0;
        }

        .menu_item > a,
        .menu_toggle {
            display: block;
            padding: 20px 25px;
            color: #333;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
			font-weight: 500;
        }
        .menu_item button {
	        font-weight: normal;
        }

        /* 階層あり項目のスタイル */
        .menu_item.has_children {
            /* background-color: #FEF1C3; */
        }

        .menu_toggle::after {
            content: '+';
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: bold;
            color: #666;
            transition: transform 0.3s ease;
        }

        .menu_item.active .menu_toggle::after {
            transform: translateY(-50%) rotate(45deg);
        }

        /* サブメニュー */
        .sub_menu {
            display: none;
            background-color: #FFF9E7;
            border-top: 1px solid #e0e0e0ae;
        }

        .menu_item.active .sub_menu {
            display: block;
        }

        .sub_menu li {
            border-bottom: 1px solid #e0e0e0ae;
        }

        .sub_menu li:last-child {
            border-bottom: none;
        }

        .sub_menu a {
            display: block;
            padding: 15px 25px 15px 45px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
            position: relative;
        }

        .sub_menu a::before {
            content: '▶';
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #8b4513;
        }

        .sub_menu a:hover {
            background-color: #f1ead5;
        }

        /* オンラインショップバナー */
        .online_banner {
            margin: 30px auto 0;
            text-align: center;
			width: calc(70% - 20px);
        }
		
		.online_banner02 {
            margin: 30px auto 120px;
            text-align: center;
			width: calc(70% - 20px);
			display: flex;
			gap: 0 10px;
        }
		.online_banner02 a {
			width: 50%;
			padding: 10px 0;
			display: flex;
			color: initial;
			justify-content: center;
			align-items: center;
			gap: 0 10px;
		}
		.online_banner02 a {
			border: 1px solid #402511;
			color: #402511;
		}
		.online_banner02 a img {
			filter: invert(11%) sepia(17%) saturate(5400%) hue-rotate(4deg) brightness(90%) contrast(87%);
		}
		.online_banner02 span {
			display: inline-block;
			width: 20px;
			margin-left: -10px;
		}
		.online_banner02 span img {
			width: 100%;
		}
        .online_banner img {
            max-width: 100%;
            height: auto;
        }

        
}
/* レスポンシブ */
        @media (min-width: 768px) {
            .sp_nav,
            .sp_menu {
                display: none;
            }
        }