@charset "utf-8";
/* CSS Document */
/*
@import "/site/css/print.css";
*/
/* ------------------------------- */
/* Initialize */
/* ------------------------------- */

html{color:#333;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

.error {
 font-weight: bold;
 color: #F00;
}

.text-bold {
 font-weight: bold;
}

.text-red {
 color: #F00;
}


/* ------------------------------- */
/* Common */
/* ------------------------------- */

a {
 color: #333;
}

a:link,
a:hover,
a:visited,
a:active {
 color: #333;
}

a:hover img {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}

img {
 -webkit-backface-visibility: hidden;
}


/* ------------------------------- */
/* Fonts */
/* ------------------------------- */

body {
 font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* Edge Hack Web Fonts */
@supports (-ms-ime-align: auto) {
 body {
  transform: rotate(0.001deg);
 }
}

/* Firefox Hack Web Fonts */
@-moz-document url-prefix() {
 body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 }
}

/* IE Hack Web Fonts */
@media all and (-ms-high-contrast:none) {
 body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 }
}

.font-sans {
 font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.font-serif {
 font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo,serif;
}


/* ------------------------------- */
/* Site Width */
/* ------------------------------- */
/*
@media (min-width: 1200px) {
 .container {
  max-width: 1030px;
 }
}
*/

/* ------------------------------- */
/* Equal Height Columns */
/* ------------------------------- */

.row-eq-height {
 display: flex;
 flex-wrap: wrap;
}

/* Flexbox Safari bug */
.row-eq-height.container:before,
.row-eq-height.container:after,
.row-eq-height.row:before,
.row-eq-height.row:after {
 content: normal;
}








/* ------------------------------- */
/* Map */
/* ------------------------------- */

#map {
 height: 100vh;
 background-color: #dbdbdb;
}


/* ------------------------------- */
/* Genre Bar */
/* ------------------------------- */

.genre-bar{
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 9999;
 padding: 10px 8px 5px;
 background: rgba(255,255,255,0.95);
 border-top: 1px solid #ddd;
}

/* 横スクロール本体 */
.genre-scroll{
 display: flex;
 gap: 8px;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 cursor: grab;
 user-select: none; /* ドラッグで文字選択されないように */

 /* スクロールを気持ちよく */
 -webkit-overflow-scrolling: touch;

 /* 端の余白 */
 padding: 10px 4px 8px;
}

/* スクロールバーを目立たせたくない場合（任意） */
.genre-scroll::-webkit-scrollbar{
 height: 6px;
}
.genre-scroll::-webkit-scrollbar-thumb{
 background: rgba(0,0,0,0.15);
 border-radius: 15px;
}

.genre-btn{
 position: relative;
 padding: 10px 14px;
 flex: 0 0 auto;          /* 重要：縮まない＝横に並ぶ */
 border: 1px solid #ddd;
 border-radius: 15px;
 background: #fff;
 cursor: pointer;
}

.genre-scroll.is-dragging{
 cursor: grabbing;
}

.genre-btn.is-active{
 border-color: #f76108;
 font-weight: 700;
}

/* アクティブなジャンルは目立たせる */
.genre-btn.is-active .count-badge{
 background: #f76108;
 color: #fff;
}

/* 右上に飛び出すバッジ */
.count-badge{
 position: absolute;

 top: 0;
 right: 0;

 /* 見た目だけ右上に飛び出す（要素としては内側にいる） */
 transform: translate(30%, -30%);

 min-width: 20px;
 height: 20px;
 padding: 0 6px 2px;

 display: inline-flex;
 align-items: center;
 justify-content: center;

 font-size: 11px;
 line-height: 1;
 border-radius: 999px;

 background: #FFF;
 color: #333;

 box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}


/* 0件はバッジ非表示 */
.count-badge.is-hidden{
 display: none;
}

/* 0件ジャンルは薄く＋クリック不可 */
.genre-btn.is-disabled{
 opacity: 0.35;
 cursor: default;
 pointer-events: none; /* ←重要：クリック不可（ドラッグは親に流れる） */
}



/* ------------------------------- */
/* Bottom Sheet */
/* ------------------------------- */

.sheet-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.35);
 z-index: 999;
}

.bottom-sheet {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 max-height: 60vh;
 padding-bottom: 95px;
 background: #fff;
 border-radius: 18px 18px 0 0;
 box-shadow: 0 -10px 30px rgba(0,0,0,0.18);

 transform: translateY(110%);
 transition: transform 220ms ease;
 z-index: 1000;

 display: flex;
 flex-direction: column;
}

.bottom-sheet.is-open {
 transform: translateY(0);
}

.sheet-handle {
 width: 44px;
 height: 5px;
 background: #ddd;
 border-radius: 999px;
 margin: 10px auto 6px;
}

.sheet-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 30px;
 border-bottom: 1px solid #eee;
}

.sheet-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.sheet-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
}

.sheet-body {
  padding: 14px 30px;
  overflow: auto;
  line-height: 1.6;
}

.sheet-body img {
 margin-bottom: 20px;
}

.shop-table {
 width: 100%;
}

.shop-table th,
.shop-table td {
 padding: 5px 10px;
 border: 1px solid #333;
}