/** {
  border: 1px solid black;
}*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 0;
}

input, select {
  -webkit-appearance: none;
  appearance: none;
}

.outline {
  max-width: 375px;
  background-color: #FFFFFF;
  margin: auto;
  padding-top: 64px;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, .25);
}

.heroarea {
  -webkit-text-fill-color: inherit;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  text-decoration: none;
  padding: 32px 16px;
}

.filter-area {
  display: flex;
  flex-direction: column;
/*  justify-content: center;*/
  align-items: center;
  width: 100%;
  gap: 32px;
}

.search-title {
  color: #000;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

#searcharea {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.search-small {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.btn {
  width: 100%;
  height: auto;
  padding: 8px;
  background-color: #F4CC25;
  border-radius: 4px;
}

#getLocationButton img {
  width: 18px;
  height: auto;
  margin-right: 8px;
  vertical-align: -3px;
}

.border {
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}

input[type=checkbox] {
  display: none;
}

input[type="checkbox"].checkbox01:checked + label {
  background: #333333;
  color: #ffffff;
  border: 1px solid #333333;
}

input[type="checkbox"].checkbox01:checked + label .icon01 {
  background-color: #ffffff;
}

input[type="checkbox"].checkbox02:checked + label {
  background: #D7000F;
  color: #ffffff;
  border: 1px solid #D7000F;
}

input[type="checkbox"].checkbox02:checked + label .icon02 {
  background-color: #ffffff;
}

input[type="checkbox"].checkbox03:checked + label {
  background: #2C8B00;
  color: #ffffff;
  border: 1px solid #2C8B00;
}

input[type="checkbox"].checkbox03:checked + label .icon03 {
  background-color: #ffffff;
}

input[type="checkbox"].checkbox03:checked + label .icon04 {
  background-color: #ffffff;
}

label {
  display: block;
/*  font-weight: bold;*/
}

.cl01:hover {
  background-color: rgba(51, 51, 51, 0.1);
}

.cl02:hover {
  background-color: rgba(215, 0, 15, 0.1);
}

.cl03:hover {
  background-color: rgba(44, 139, 0, 0.1);
}

.icon01 {
  width: 17.06px;
  height: 17.06px;
  margin: 4px;
  background-color: #333333;
  -webkit-mask-image: url("/images/Vectors-Wrapper_4.svg");
  -webkit-mask-size: 100%;
}

.icon02 {
  width: 11.84px;
  height: 17.06px;
  margin: 4px;
  background-color: #333333;
  -webkit-mask-image: url("/images/Vectors-Wrapper_1.svg");
  -webkit-mask-size: 100%;
}

.icon03 {
  width: 8px;
  height: 17.06px;
  margin-bottom: 4px;
  background-color: #333333;
  -webkit-mask-image: url("/images/Vectors-Wrapper_2.svg");
  -webkit-mask-size: 100%;
}

.icon04 {
  width: 5.17px;
  height: 17.06px;
  margin-bottom: 4px;
  background-color: #333333;
  -webkit-mask-image: url("/images/Vectors-Wrapper_3.svg");
  -webkit-mask-size: 100%;
}

.restauranticon {
  display: flex;
  flex-direction: row;
  margin-top: 4px;
}

.check_label {
  display: flex;
  flex-direction: column;
  width: 32%;
  height: auto;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  color: #333333;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  font-size: 10px;
  line-height: normal;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 12px;
}

select {
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
/*  color: #999999;*/
  border: 1px solid #CCCCCC;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
}

.form-select {
  color: #999999; /* 初期状態の文字色 */
}

/* セレクトボックスが選択された後の状態 */
.form-select.selected {
  color: black; /* 選択後の文字色 */
}

input[type=text] {
  width: 100%;
  height: auto;
  background-color: #FFFFFF;
  color: #999999;
  border: 1px solid #CCCCCC;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
}

/* 検索ボックスのデフォルト状態 */
.searchbox {
  color: #999999; /* 初期状態の文字色 */
}

/* 検索ボックスに入力された後の状態 */
.searchbox.entered {
  color: black; /* 入力後の文字色 */
}

.section2 {
  width: 100%;
  padding: 32px 16px;
}

.maparea {
  position: relative;
}

.shoplist {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 8px 8px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: auto;
  overflow: scroll;
  z-index: 10;
}

.shoplist-inner {
  width: 100%;
}

.mapComponent {
  position: relative;
  width: 100%;
  height: 100%;
}

#map_canvas {
  position: relative;
  top: 0;
  width: 100%;
  height: 75vh;
  /* add for mobile click event */
  cursor:pointer;
}

#mapList {
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  width: 100%;
  display: flex;
}

#mapList li {
  background-color: rgba(255, 255, 255, .85);
  cursor: pointer;
  list-style-type: none;
  display: flex;
  grid-column-gap: 11px;
  grid-row-gap: 11px;
  flex-flow: column;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
}

#mapList li:hover {
  transform: scale(1.02, 1.02);
  transition: var(--mainTransition);
}

.swiper-wrapper {
  cursor: pointer;
  list-style-type: none;
  /*display: flex;
  grid-column-gap: 11px;
  grid-row-gap: 11px;
  flex-flow: column;*/
  width: 100%;
  height: 100%;
}

.swiper-wrapper:hover {
  transform: scale(1.02, 1.02);
  transition: var(--mainTransition);
}

.swiper-slide {
  height: auto;
  position: relative;
}

.shop-detail-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.searchResults-inner {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.serchResults-title {
  margin-left: 16px;
}


/* ショップカセット（検索一覧用） */
#mapList2 {
  margin: 0 !important; 
  padding: 0 !important;
  border-top: 1px solid #ccc;
  max-height: 816px;
  overflow-y: scroll;
}

#mapList2 li {
  list-style: none;
  border-bottom: 1px solid #ccc;*/
}

.restaurant_wrap {
  background-color: rgba(255, 255, 255, .85);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  width: 100%;
  height: 100%;
}

.shopcassette {
  grid-row-gap: 10px;
/*  border: 1px solid #ccc;*/
  border-width: 1px 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px;
  text-decoration: none;
  display: flex;
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
}

.shopprof {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 343px;
  text-decoration: none;
  display: flex;
}

.shopicon {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  text-decoration: none;
  display: flex;
}

.shopinfo {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 239px;
  text-decoration: none;
  display: flex;
}

.shoptext {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.shopname {
  color: #333;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

.erea-small {
  color: #999;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}

.tags {
  grid-column-gap: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.event-tag {
  background-color: #d7000f;
  border-radius: 2px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding-right: 4px;
  text-decoration: none;
  display: flex;
}

.event-icon-wrapper {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 3px 4px;
  text-decoration: none;
  display: flex;
}

.event-icon {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 8.87655px;
  height: 13.05px;
  text-decoration: none;
  display: flex;
}

.specialmenu-text {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.specialmenu-tag {
  background-color: #2c8b00;
  border-radius: 2px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding-right: 6px;
  text-decoration: none;
  display: flex;
}

.specialmenu-icon-wrapper {
  grid-column-gap: 1px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 3px 4px;
  text-decoration: none;
  display: flex;
}

.specialmenu-icon1 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 4.851px;
  height: 12.7935px;
  text-decoration: none;
  display: flex;
}

.specialmenu-icon2 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 3.26475px;
  height: 12.7733px;
  text-decoration: none;
  display: flex;
}

.samprally-mark {
  background-color: #f4cc25;
  border-bottom-right-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  text-decoration: none;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.stamp-icon {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 3px;
  text-decoration: none;
  display: flex;
}

.vectors-wrapper-10 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 17.0141px;
  height: 17.017px;
  text-decoration: none;
  display: flex;
}

.samprally-join {
  color: #333;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 8px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
}

.loadmore-btn {
  grid-column-gap: 10px;
  background-color: #fff;
  border: 0 solid #ccc;
  border-bottom-width: 1px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 375px;
  height: 48px;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
  display: flex;
}

.loadmore {
  color: #333;
  text-align: center;
  flex: 0 auto;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  display: block;
}

/* ここまで */


.footer {
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, .25);
}


/* 参加規約（terms.html）用CSS */

.terms-inner {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 343px;
  text-decoration: none;
  display: flex;
}

.terms_title {
  color: #222;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
}

.terms-list {
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.terms-description {
  grid-row-gap: 14px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.terms_subtitle {
  color: #222;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 160%;
  text-decoration: none;
}

.terms_text-1 {
  color: #222;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  text-decoration: none;
  padding-left: 24px;
  gap: 4px;
  display: flex;
  flex-flow: column;
}

.terms-text-btn {
  color: #222;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: underline;
}

.terms_wrapper {
  background-color: #fff;
  width: 100%;
  max-width: 375px;
  padding: 104px 16px 64px;
  margin: 0 auto;
}

/* 参加規約ここまで */