/** {
  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: #fff;
  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;
}

.filter-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.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;
}

.search-subtitle {
  color: #000;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  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;
}

.btn-2 {
  width: 100%;
  max-width: 128px;
  height: 48px;
  padding: 8px;
  background-color: #333;
  border-radius: 4px;
  color: #fff;
  margin: 8px auto 0 auto;
}

#locationSearchBtn img, #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;
}

.select-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.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%;
}

.maparea {
  position: relative;
}

.shoplist {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 16px 16px;
  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: 90vh;
  /* 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;
}

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

/* --------マップピンデザイン----------------------- */
.custom-marker {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0px 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  transform: translate(-50%, -110%);
}

.custom-marker::after {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 15px solid #FFFFFF;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 72%;
  transform: translate(-50%, 0);
  transition: all 0.3s ease-out;
  width: 0;
  z-index: -1;
}

.marker-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
}

/* クリック時の強調デザイン */
.active-marker {
  width: 66px;
  height: 66px;
  border: 3px solid #fff;
  transform: translate(-50%, -110%); /* 拡大を追加 */
}

.active-marker::after {
  top: 90%;
}

/* --------マップピンデザインここまで----------------------- */


/* ショップカセット（検索一覧用） */
.section3 {
  padding-top: 16px;
}

#mapList2 {
  margin: 0 !important; 
  padding: 0 !important;
  border-top: 1px solid #ccc;
  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%;
  min-height: 128px;
  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: 72px;
  height: 72px;
  text-decoration: none;
  display: flex;
  border-radius: 4px;
}

.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: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}

.name-area {
  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;
}

.area-wrapper {
  background-color: transparent;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  grid-column-gap: 4px;
}

.area-icon {
  width: 14px;
  height: 14px;
}

.area-pin {
  justify-content: center;
  align-items: center;
  width: 11.53;
  height: 14px;
  text-decoration: none;
  display: flex;
  mask-image: url(../images/area_pin.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
  background-color: #999;
}

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

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

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

.event-icon-wrapper {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  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;
  mask-image: url(../images/Vectors-Wrapper_1.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
  background-color: #d7000f;
}

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

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

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

.specialmenu-icon-wrapper {
  gap: 1px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  text-decoration: none;
  display: flex;
}

.specialmenu-icon1 {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 9.13px;
  height: 12.79px;
  text-decoration: none;
  display: flex;
  mask-image: url(../images/restaurant_mark.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
  background-color: #2C8B00;
}

.character-tag {
  background-color: transparent;
  border: 1px solid #999;
  border-radius: 2px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 1px 2px;
  text-decoration: none;
  display: flex;
  box-sizing: border-box;
}

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

.stamprally-mark {
  background-color: #f4cc25;
  border-bottom-right-radius: 4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 24px;
  padding: 2px 6px 2px 2px;
  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: 14.18px;
  height: 14.18px;
  text-decoration: none;
  display: flex;
}

.stamprally-join {
  color: #333;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 10px;
  font-family: Noto Sans JP, sans-serif;
  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;
}

/* ここまで */

/* さらに読み込むボタン */
.more {
  text-align: center;
  width: 100%;
  height: 48px;
}

.more button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  color:#333;
  padding: 0;
  line-height: 100%;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  font-size: 14px;
  font-weight: 400;
  font-family: Noto Sans JP, sans-serif;
}

.is-hidden {
  display: none !important;
}
/* ここまで */

.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;
}

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

/* インスタ周りのデザイン */
.insta_wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.insta_list{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  list-style: none;
  padding: 0;
}

.insta_list li{
  position: relative;
  width: calc((100% - 4px)/3);
}

.insta_list li::before{
content: "";
display: block;
padding-top: 100%;
}

.insta_list a{
position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.insta_list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insta_btn{
  background-color: #000;
  padding: 12px;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  transition: .3s;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  top: auto;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  z-index: 1;
}

.insta_logo {
  width: 16px;
  height: 16px;
}

.insta_btn div{
  color: #fff;
  text-decoration: none;
}

.insta_btn:hover{
  background-color: #999;
}

/* ここまで */