@charset "utf-8";

/* ============================================================
   店名検索  shopsearch.css  v3
   basic.css の後に読み込むこと。basic.css 自体は書き換えない。
   戻すときは <link> と <script> の2行を消すだけで元に戻る。

   置き場所: /public_html/{サイト}/html/css/shopsearch.css
   対になる js: /public_html/{サイト}/html/js/shopsearch.js

   v3 の変更点
   ・該当が複数あるとき、前後へ移動する ▲▼ を画面右に出すようにした
   ・見つからなかったときの文字色を橙にした（赤は「間違い」に見えるため）
   ============================================================ */


/* ------------------------------------------------------------
   [1] 調整用の設定値
   ------------------------------------------------------------ */

:root{
	--ss-hit-bg:     #fff7d6;              /* 薄いレモン */
	--ss-hit-ring:   #ffc663;              /* ミカン色 */
	--ss-hit-now:    #ffc663;
	--ss-hit-fade:   1.2s;
	--ss-input-max:  300px;

	--ss-nav-size:   34px;
	--ss-nav-left:   8px;                    /* --ss-nav-right から改名 */
	--ss-nav-bg:     #fff7d6;              /* 囲み枠と同じ薄いレモン */
	--ss-nav-fg:     #e08a1e;              /* 濃いミカン。薄地の上で読める */
	--ss-nav-line:   #ffc663;              /* 外周。囲み枠と同色 */
}


/* ------------------------------------------------------------
   [2] 検索窓
   エリアボタン(.areachoicebutton)の直後に置く。
   ★ボタンより前に置かないこと。理由は shopsearch.js の冒頭を参照。
   ------------------------------------------------------------ */

.shopsearch{
	margin:8px 0 12px;
	text-align:center;
	line-height:1.4;
}

.shopsearch input[type="search"]{
	/* 16px を下回ると iOS が入力時に画面を勝手に拡大する。
	   小さくしたい場合も 16px より下げないこと。 */
	font-size:16px;

	padding:6px 10px;
	width:70%;
	max-width:var(--ss-input-max);
	border:1px solid #999;
	border-radius:4px;
	background:#fff;
	color:#000;

	/* iOS Safari は type="search" に独自の見た目を当てるため打ち消す */
	-webkit-appearance:none;
	appearance:none;
}

.shopsearch-msg{
	display:block;
	margin:5px 0 0;
	font-size:14px;
	color:#e08a1e;       /* ▲▼ と同じ濃いミカン色。白背景でも読める */
	text-align:center;
}

.shopsearch-msg.is-none{
	color:#e08a1e;       /* ▲▼ と同じ濃いミカン色。白背景でも読める */
}


/* ------------------------------------------------------------
   [3] 該当した店名を光らせる

   ★掲載店の暖色枠には触れない。
     枠は <tr> に、この光は店名の <p> に当たるため競合しない。
   ------------------------------------------------------------ */

.shopsearch-hit{
	position:relative;
	z-index:40;                /* 写真20・新店バッジ30 より上 */
	background-color:var(--ss-hit-bg);
	box-shadow:0 0 0 2px var(--ss-hit-ring);
	border-radius:3px;
}

/* いま見ている1件。他の該当と見分けがつくように外周だけ濃くする */
.shopsearch-hit.is-now{
	box-shadow:0 0 0 4px var(--ss-hit-now);

	/* 移動してきた瞬間だけ強く光り、ゆっくり戻る */
	animation:ss-flash var(--ss-hit-fade) ease-out 1;
}

@keyframes ss-flash{
	0%   { background-color:#ffe9a0; box-shadow:0 0 0 8px var(--ss-hit-now); }
	100% { background-color:var(--ss-hit-bg); box-shadow:0 0 0 4px var(--ss-hit-now); }
}

/* 動きを減らす設定の環境では点滅させない */
@media (prefers-reduced-motion: reduce){
	.shopsearch-hit.is-now{ animation:none; }
}

/* 店名のリンク文字が黄色地で読めなくならないように */
.shopsearch-hit a,
.shopsearch-hit a:visited{
/* 	color:#000;*/
}


/* ------------------------------------------------------------
   [4] 前後の該当店へ移動する ▲▼

   スクロールした先でも押せるよう画面に貼り付ける。
   ★下端(bottom:0)には置かない。map.html の地域ジャンプナビが
     bottom:0 で古い iPhone のツールバーに隠れる問題があるため、
     同じ置き方を避けて右端の中ほどに出す。

   該当が2件以上あるときだけ、js が is-on を付けて表示する。
   ------------------------------------------------------------ */

.shopsearch-nav{
	touch-action:manipulation;
	display:none;
	position:fixed;
	left:var(--ss-nav-left);
	z-index:9000;

	width:var(--ss-nav-size);
	height:var(--ss-nav-size);
	line-height:var(--ss-nav-size);
	text-align:center;

	background:var(--ss-nav-bg);
	color:var(--ss-nav-fg);
	border:2px solid var(--ss-nav-line);
	border-radius:50%;

	/* 本文の上に浮くので、輪郭を淡いミカン色の影で締める。
	   黒い影は使わない。 */
	box-shadow:0 2px 6px rgba(224,138,30,.45);

	font-size:16px;
	font-weight:bold;
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:transparent;
}

.shopsearch-nav.is-on{ display:block; }

/* 押したときは色を反転させる */
.shopsearch-nav:hover,
.shopsearch-nav:focus{
	background:var(--ss-nav-line);
	color:#fff7d6;
	outline:none;
}

/* 上下に少し離して並べる。画面の中ほどに置き、
   本文やヘッダーと重なりにくい高さにしている。 */
#shopsearch-prev{ top:calc(50% - var(--ss-nav-size) - 14px); }
#shopsearch-next{ top:calc(50% + 14px); }

/* 何件目を見ているか。▲▼ のあいだに小さく出す */
.shopsearch-count{
	display:none;
	position:fixed;
	left:var(--ss-nav-left);
	top:calc(50% - 6px);
	z-index:9000;

	width:var(--ss-nav-size);
	box-sizing:border-box;
	padding:1px 0;
	text-align:center;

	background:var(--ss-nav-bg);
	color:var(--ss-nav-fg);
	border:1px solid var(--ss-nav-line);
	border-radius:9px;

	font-size:11px;
	font-weight:bold;
	line-height:1.3;
	pointer-events:none;
}

.shopsearch-count.is-on{ display:block; }

/* 画面が低いときは間隔を詰める */
@media all and (max-height: 480px){
	:root{ --ss-nav-size:30px; }
}