@charset "UTF-8";

:root {
  --hover-color: #105c96;
  --border-color: #ccc;
  /*  検索Box (input[type="search"] etc.)*/
  --sr-inside-color: #bbb;
  --sr-outside-color: #026e60d8;
  --btn-width: 15%;
  /*  検索結果 table*/
  --results-max-width: 1200px;
  --borderRadius: 5px;
  --tb-border-color: #ddd;
}

body {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

div#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
}

@media screen and (min-width:701px) {
  main {
    flex: 1;
    padding: .6em;
  }
}

div.search-wrapper * {
  box-sizing: border-box;
}

div.search-wrapper {
  width: 100%;
  border-radius: var(--borderRadius);
  margin: 2.2em auto 0;
  width: 95%;
  max-width: 450px;
  overflow: hidden;
  box-shadow: 2px 2px 6px #888;
}

@media screen and (min-width:701px) {
  div.search-wrapper {
    width: 420px;
    max-width: 420px;
  }
}

div#search-box {
  box-sizing: border-box;
  padding: 1px 2px;
  margin: 0 auto;
  width: 100%;
  background: var(--sr-outside-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 2px;
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/*******************************
      検索BOX内 虫眼鏡アイコン
*******************************/
div#search-box>div.search-icon {
  display: block;
  position: absolute;
  top: .75em;
  left: .7em;
  right: 0;
  width: 16px;
  height: 16px;
  z-index: 2;
}

/* レンズ部分 */
div#search-box>div.search-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  /* レンズの線 */
  border: 3px solid var(--sr-inside-color);
  border-radius: 50%;
}

/* 持ち手部分 */
.search-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 0px;
  /* 棒の中心位置 */
  right: 6px;
  /* 棒の幅 */
  width: 2px;
  /* 棒の長さ */
  height: 9px;
  background: var(--sr-inside-color);
  /* transform-originを調整して、回転の中心を合わせる */
  transform-origin: bottom center;
  transform: rotate(136deg);
}

/*******************************
      検索BOX input[search]
*******************************/
div#search-box>input#search-input {
  width: calc(100% - var(--btn-width));
  padding: .65em .2em .65em 2.0em;
  border: 2px solid var(--sr-outside-color);
  border-radius: var(--borderRadius) 0 0 0;
  color: currentColor;
  font-size: clamp(13px, 1.85vw, 15px);
}

div#search-box>input#search-input::placeholder {
  color: var(--sr-inside-color);
  font-size: 90%;
}

div#search-box>input#search-input:focus {
  outline: 3px solid orange;
  border: 2px solid orange;
}

/*******************************
      検索BOX submitButton
*******************************/
div.search-btn-box {
  box-sizing: border-box;
  width: var(--btn-width);
}

button#search-btn {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: .6em 0;
  border: none;
  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
  background: transparent;
  letter-spacing: .18em;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(11px, 1.85vw, 13px);
  text-shadow: 0 1px 2px #01413dff;
  transition: all 0.2s ease-in;
  cursor: pointer;
}

button#search-btn:hover {
  color: #ccc;
  text-shadow: none;
  background: #01413dff;
  opacity: .8;
}

/*
==================================
    検索 suggest (サジェスト)
==================================
*/
ul#suggest-list {
  box-sizing: border-box;
  width: 100%;
  background: #ffffffeb;
  font-size: clamp(10px, 1.85vw, 12px);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  overflow: hidden;
  display: none;
}

ul#suggest-list>li {
  width: 100%;
  padding: .6em 1.2em;
  cursor: pointer;
}

ul#suggest-list>li:not(:last-of-type) {
  border-bottom: 1px solid #eee;
}

ul#suggest-list>li:hover {
  background: #daedfdff;
  text-shadow: 0 1px 1px #ccc;
  font-weight: 600;
}

/*
==================================
      検索結果
==================================
*/
div.results-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--results-max-width);
  margin: 2em auto 0;
  padding: 0;
  overflow: hidden;
  /*初期設定*/
  display: none;
}

/*=========== h2見出し  ===========*/
div.results-wrapper>h2 {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
}

/*//////////////////////////////////////
    検索結果 情報BOX(件数・ページ表示)
//////////////////////////////////////*/
div.results-info-box {
  box-sizing: border-box;
  width: 100%;
  padding: 0 .8em;
  overflow: hidden;
}

/*======== 最大件数オーバーmessage =======*/
div.results-wrapper>div.results-info-box>p.message {
  box-sizing: border-box;
  width: fit-content;
  margin: 1.65em auto 1.35em;
  padding: .65em .8em;
  font-size: clamp(12px, 1.85vh, 13px);
  color: #53a500;
  line-height: 1.35em;
  /*text-indent: -.6em;*/
  border: 2px solid #53a500;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

/*=========== 該当件数・ページ数 表示  ===========*/
div.results-wrapper>div.results-info-box>ul.results-info {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 1em auto .2em;
  padding: .2em;
  display: flex;
  justify-content: center;
  gap: 0;
}

@media screen and (min-width:701px) {
  div.results-wrapper>div.results-info-box>ul.results-info {
    margin: 1em auto .6em;
  }
}

div.results-wrapper>div.results-info-box>ul.results-info>li {
  box-sizing: border-box;
  width: calc(100% / 3);
  font-size: clamp(12px, 1.35vh, 14px);
  text-align: center;
}

div.results-wrapper>div.results-info-box>ul.results-info>li>span {
  color: #008e53;
  font-weight: 600;
  font-size: clamp(16px, 2.65vh, 18px);
}

/*//////////////////////////////////////
            検索結果 wrapper
//////////////////////////////////////*/
div.results-wrapper>div#results-box {
  box-sizing: border-box;
  width: 100%;
  margin-top: .6em;
  font-size: clamp(11px, 1.85vw, 13px);
  overflow-x: auto;
  /* 横スクロールを有効に */
  overflow-y: visible;
  /* 縦は不要 */
  -webkit-overflow-scrolling: touch;
  /* iOSでスムーズに */
  scroll-snap-type: x mandatory;
  /* scrollbar off => IE, Edge */
  -ms-overflow-style: none;
  /* scrollbar off =>Firefox */
  scrollbar-width: none;
}

div.results-wrapper>div.err-msg {
  color: #ef0c0cff;
  text-align: center;
}

div.results-wrapper>div.err-msg::before {
  content: '\26A0 該当する結果はありません';
}

/*=========== 検索結果 table (外枠部分) ===========*/
div.results-wrapper>div#results-box>div#results-table {
  box-sizing: border-box;
  width: fit-content;
  max-width: var(--results-max-width);
  border-top: 1px solid var(--tb-border-color);
  border-bottom: 1px solid var(--tb-border-color);
  display: table;
  overflow: hidden;
  margin: 0 auto;
}

@media screen and (min-width:701px) {
  div.results-wrapper>div#results-box>div#results-table {
    border: 1px solid var(--tb-border-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 2px 2px 6px #888;
  }
}

/*=========== 検索結果 table ヘッダー(表見出し)  ===========*/
div.results-wrapper>div#results-box>div#results-table>div.result-header {
  box-sizing: border-box;
  font-weight: 600;
  text-align: center;
  display: table-row;
  position: sticky;
  left: 0;
  background: #e9edfdff;
}

div.results-wrapper>div#results-box>div#results-table>div.result-header>div {
  box-sizing: border-box;
  display: table-cell;
  border-right: 1px solid var(--tb-border-color);
  border-bottom: 1px dotted #bbb;
  padding: .2em .4em;
}

div.shop-list {
  flex: 1;
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Safari用 */
  -webkit-text-overflow: ellipsis;
  /* Opera用 */
  -o-text-overflow: ellipsis;
}

div.pref-list {
  text-align: center;
}

div.city-list {
  text-align: center;
}

/*=========== 検索結果 table リスト部分  ===========*/
div.results-wrapper>div#results-box>div#results-table>ul#results-list {
  box-sizing: border-box;
  padding: 0;
  display: table-row-group;
  box-shadow: 2px 2px 6px #888;
}

div.results-wrapper>div#results-box>div#results-table>ul#results-list>li {
  box-sizing: border-box;
  width: 100%;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: clamp(12px, 1.85vw, 14px);
  display: table-row;
}

div.results-wrapper>div#results-box>div#results-table>ul#results-list>li:nth-child(even) {
  background: #eee;
}

div.results-wrapper>div#results-box>div#results-table>ul#results-list>li>div {
  box-sizing: border-box;
  border-right: 1px solid var(--border-color);
  padding: .6em 1em;
  display: table-cell;
  white-space: nowrap;
}

div.results-wrapper>div#results-box>div#results-box>div#results-table>ul#results-list>li>div:first-child {
  font-size: clamp(13px, 1.85vw, 15px);
}

ul#results-list>li>div.shop-list>a:link,
ul#results-list>li>div.shop-list>a:visited {
  color: var(--sr-outside-color);
  font-weight: 600;
}

div.results-wrapper>div#results-box>div#results-table>ul#results-list>li>div>a:hover {
  color: var(--hover-color);
  text-decoration: underline;
}

/*
=====================================
    ページング ボタン (検索table下)
=====================================
*/
div#pagination {
  box-sizing: border-box;
  width: 100%;
  margin: 2em auto 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6em;
}

div#pagination button {
  height: 2.4em;
  width: 2.4em;
  color: #fff;
  font-weight: 600;
  text-shadow: 1px 1px 1px #888;
  background: #008e53;
  border: 2px solid #006a3e;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -ms-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
}

div#pagination button:disabled {
  background: #eee;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
}

div#pagination button:hover {
  background: var(--hover-color);
  border-color: #04375f;
  -webkit-filter: drop-shadow(0 0 0.2em #029a3c);
  filter: drop-shadow(0 0 0.2em #029a3c);
}

/*
div#pagination:has(> button:hover) button:not(:hover) {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  background: #ecfff3;
  border-color: #9cc0a9;
}
*/