@charset "UTF-8";


:root {
  --table-boder-color: #ccc;
  --photo-width: 220px;
}

h1#title>span {
  font-size: 90%;
}

h1#title>span::before {
  white-space: pre-wrap;
  content: ' (';
}

h1#title>span::after {
  content: ')';
}

@media screen and (min-width:651px) {
  h1#title>span {
    display: block;
    font-size: 75%;
  }

  h1#title>span::before,
  h1#title>span::after {
    content: ' － ';
  }
}

main {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

/*--------掲載情報 全登録数-----------*/
div.keisai_box {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 .4em;
  font-size: 12px;
}

@media screen and (min-width:701px) {
  div.keisai_box {
    padding: .4em .6em 0;
  }
}

div.keisai_box>span.erea-kensu {
  font-size: clamp(18px, 1.85vh, 20px);
  color: #008e53;
  font-weight: 700;
}

/*
===============================
          おすすめ店
===============================
*/
h2 {
  box-sizing: border-box;
  width: 100%;
  padding: .6em .6em .2em;
  font-size: clamp(16px, 2.85vh, 24px);
  font-weight: 600;
  text-align: center;
}

h2:first-letter {
  font-size: 1.35em;
  color: #fff;
  padding: 0 .2em;
  background: #81dbca;
  border-radius: 50%;
  text-shadow: 1px 1px 3px #aaa;
}

@media screen and (min-width:701px) {
  h2 {
    padding: .2em .6em .6em;
  }

  h2:first-letter {
    font-size: 1.65em;
    color: #fff;
    padding: 0 .2em;
    background: #81dbca;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    text-shadow: 1px 1px 3px #aaa;
  }
}

/*------------おすすめWrapper--------------*/
ul.recom-box {
  box-sizing: border-box;
  width: 100%;
  margin: .6em auto 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 1px solid var(--table-boder-color);
  box-shadow: 2px 4px 6px #ccc;
}

ul.recom-box>li {
  box-sizing: border-box;
  border-left: 1px solid var(--table-boder-color);
  border-bottom: 1px solid var(--table-boder-color);
  width: calc(100%/2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media screen and (min-width:701px) {
  ul.recom-box>li {
    width: calc(100%/3);
  }
}

/*------------おすすめ>店舗写真--------------*/
ul.recom-box>li>div.shop_photo_div {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

@media screen and (min-width:701px) {
  ul.recom-box>li>div.shop_photo_div {
    width: 100%;
    height: 250px;
  }
}

ul.recom-box>li>div.shop_photo_div img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

ul.recom-box>li>div.shop_photo_div img:hover {
  opacity: 0.5;
}

/*----------------------------------------
            おすすめ店舗情報
------------------------------------------*/
div.shop_info_box {
  box-sizing: border-box;
  width: 100%;
  padding: .4em .6em .8em;
}

/*----------おすすめ>店舗情報>タグ----------*/
div.shop_info_box>ul.shop_tag_box {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: .1em;
  display: flex;
  gap: .4em;
}

div.shop_info_box>ul.shop_tag_box>li {
  box-sizing: border-box;
  padding: 0 .6em;
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  border: 1.5px solid #00869e;
  border-radius: 5px;
  overflow: hidden;
}

div.shop_info_box>ul.shop_tag_box>li>a:link,
div.shop_info_box>ul.shop_tag_box>li>a:visited {
  display: block;
  color: #00869e;
}

div.shop_info_box>ul.shop_tag_box>li>a:hover {
  border-color: #0062bd;
  color: #0062bd;
  opacity: .5;
}

/*----おすすめ>店舗情報>店舗名----------*/
div.shop_info_box>div.shop-name {
  box-sizing: border-box;
  width: 100%;
  padding: .4em 0 .4em;
  font-size: clamp(12px, 1.65vw, 16px);
  font-weight: 700;
  line-height: 1.35em;
}

@media screen and (min-width:701px) {
  div.shop_info_box>div.shop-name::before {
    content: '‣';
  }
}

div.shop_info_box>div.shop-name>a:link,
div.shop_info_box>div.shop-name>a:visited {
  color: #10998f;
}

div.shop_info_box>div.shop-name>a:hover {
  color: #0062bd;
  text-decoration: underline;
}

/*----おすすめ>店舗情報>住所----------*/
div.shop_info_box>div.shop_address {
  box-sizing: border-box;
  width: 100%;
  font-size: clamp(11px, 1.65vw, 14px);
  text-indent: .4em;
  line-height: 1.5em;
}

/*----おすすめ>店舗情報>住所(郵便番号)----*/
div.shop_info_box>div.shop_address>span {
  font-size: clamp(11px, 1.65vw, 12px);
  vertical-align: top;
}

/*
============================================
        クチコミ満足度が高い
============================================
*/
section.section-review>h3 {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 1.0em;
  font-size: clamp(16px, 1.85vw, 18px);
  background: #07a98b;
  box-shadow: 3px 3px 8px #036351;
  text-shadow:
    #fff 2px 0px 2px, #fff -2px 0px 2px,
    #fff 0px -2px 2px, #fff -2px 0px 2px,
    #fff 2px 2px 2px, #fff -2px 2px 2px,
    #fff 2px -2px 2px, #fff -2px -2px 2px,
    #fff 1px 2px 2px, #fff -1px 2px 2px,
    #fff 1px -2px 2px, #fff -1px -2px 2px,
    #fff 2px 1px 2px, #fff -2px 1px 2px,
    #fff 2px -1px 2px, #fff -2px -1px 2px,
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}

ul.review-ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: solid 1px var(--table-boder-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

ul.review-ul>li * {
  box-sizing: border-box;
}

ul.review-ul>li {
  padding: 0;
  border-bottom: 1px solid var(--table-boder-color);
  overflow: hidden;
  /*---------  grid  ------------*/
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: 160px auto auto;
}

ul.review-ul>li:last-child {
  border-bottom: none;
}

ul.review-ul>li>div {
  box-sizing: border-box;
}

/*-----------------------------
          grid
------------------------------*/
div.review-photo-box {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  /*--- grid END ---*/
}

div.review-shop-name {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  /*--- grid END ---*/
  padding: .3em .6em;
  background-image: linear-gradient(90deg, #f3fef4, #f8f9fa);
}

div.review-btn-box {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  /*--- grid END ---*/
  background: #f5f5f5;
  padding: .4em 0 .6em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}

div.review-shop-review {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  /*--- grid END ---*/
  padding: .3em .5em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .2em 0;
}

/*-----★★★  PC grid  ★★★-----*/
@media screen and (min-width:701px) {
  ul.review-ul {
    padding: 1.2em 1.6em;
  }

  ul.review-ul>li {
    padding: 0;
    border-bottom: 1px dotted var(--table-boder-color);
    /*--------- PC grid  ------------*/
    display: grid;
    grid-template-columns: 200px 1fr 120px;
    grid-template-rows: 35% 65%;
  }

  div.review-photo-box {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    /*--- PC grid END ---*/
    height: 200px;
  }

  div.review-shop-name {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    /*--- PC grid END ---*/
    padding: .3em 1em;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  div.review-shop-review {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    /*--- PC grid END ---*/
    background: inherit;
    padding: .3em .6em .6em 1.2em;
    height: 100%;
  }

  div.review-btn-box {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    /*--- PC grid END ---*/
    background: inherit;
    padding: 0 .6em;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  ul.review-ul>li>div {
    width: 100%;
    box-sizing: border-box;
  }
}

/*--------review-photo-box 写真------------*/
ul.review-ul>li>div.review-photo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  margin: 0 auto;
}

ul.review-ul>li>div.review-photo-box img:hover {
  opacity: 0.5;
}

/*-----投稿写真がない場合----*/
ul.review-ul>li>div.review-photo-box>div.review-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}

ul.review-ul>li>div.review-photo-box>div.review-no-image>span {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 20px;
}

/*-----ShopName/address-----*/
div.review-shop-name>h4 {
  font-weight: 600;
  font-size: clamp(14px, 1.85vw, 20px);
}

@media screen and (min-width:701px) {
  div.review-shop-name>h4 {
    padding-top: .2em;
  }
}

div.review-shop-name>div.review-shop-adress {
  font-size: clamp(12px, 1.65vw, 14px);
  text-indent: .4em;
  padding-top: .2em;
  color: #999;
}

@media screen and (min-width:701px) {
  div.review-shop-name>div.review-shop-adress {
    padding: .6em 0 .8em;
    text-indent: .6em;
  }
}

/*----review Post内容-----*/
div.review-shop-review * {
  box-sizing: border-box;
}

div.review-shop-review>p.contributor {
  color: #777;
  font-size: clamp(12px, 1.85vh, 13px);
}

div.review-shop-review>div.comme_title {
  box-sizing: border-box;
  width: 100%;
  font-weight: 600;
  font-size: clamp(14px, 1.85vh, 16px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (min-width:701px) {
  div.review-shop-review>div.comme_title {
    display: flex;
    font-size: clamp(14px, 1.85vh, 16px);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

div.review-shop-review>div.comme_title>img {
  box-sizing: border-box;
  display: block;
  padding: .2em .2em .4em .3em;
}

div.review-shop-review>div.comme_title>div {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 0em .2em .3em;
  text-shadow: 1px 0px 2px#fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

div.review-shop-review>p.comment {
  width: 100%;
  font-size: clamp(75%, 1.85vh, 16px);
  line-height: 1.45em;
  color: #888;
  /*制限の行を超えると省略記号 :3 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
}

@media screen and (min-width:701px) {
  div.review-shop-review>p.comment {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/*--------div.review-btn-box LinkBtn------------*/
/*--  buttonStyle  --*/
div.review-btn-box>div {
  box-sizing: border-box;
  font-size: clamp(10px, 1.65vw, 11px);
  text-shadow: 0px 1px 1px #777;
  text-align: center;
  width: 80px;
  overflow: hidden;
}

div.review-btn-box>div>a {
  display: block;
  width: 100%;
  padding: .2em .4em;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

div.review-shop-btn a:link,
div.review-shop-btn a:visited {
  color: #fff;
  background: #ffaf38;
  border: 2px solid #ffa221;
}

div.review-btn a:link,
div.review-btn a:visited {
  color: #fff;
  background: #4ee889;
  border: 2px solid #3fbf6c;
}

div.review-btn-box>div>a:hover {
  background: #fff;
  color: #ffa221;
  text-shadow: none;
}

div.review-btn-box>div.review-btn a:hover {
  background: #fff;
  color: #3fbf6c;
  text-shadow: none;
}

/*
=========================================
  市区町村をお選びください
=========================================
*/
section.section-city-select {
  box-sizing: border-box;
  padding: 1.2em .8em 0;
}

@media screen and (min-width:701px) {
  section.section-city-select {
    padding: 1.2em 1.0em 0;
  }
}

section.section-city-select>h3 {
  box-sizing: border-box;
  width: 100%;
  padding: .3em .8em;
  font-size: clamp(16px, 1.85vw, 18px);
  border-left: 8px solid #10967d;
}

@media screen and (min-width:701px) {
  section.section-city-select>h3 {
    margin: 0 0 .8em .6em;
  }
}

ul#city-link-box {
  box-sizing: border-box;
  width: 100%;
  padding: 1.2em .0em 0;
  display: flex;
  flex-direction: column;
  gap: .8em;
  border-bottom: 1px solid #eee;
}

@media screen and (min-width:701px) {
  ul#city-link-box {
    padding: .6em 0 0 2.0em;
  }
}

ul#city-link-box>li {
  box-sizing: border-box;
}

ul#city-link-box>li>h5 {
  box-sizing: border-box;
  font-weight: 700;
}

@media screen and (min-width:701px) {
  ul#city-link-box>li:not(:first-of-type)>h5 {
    margin-top: 1.0em;
  }
}

ul#city-link-box>li>ul.city-list {
  box-sizing: border-box;
  padding: .6em 0 0 .8em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .35em 1.4em;
}

@media screen and (min-width:701px) {
  ul#city-link-box>li>ul.city-list {
    padding: .6em .6em 0 1.4em;
    gap: 1.2em 1.4em;
  }
}

ul#city-link-box>li>ul.city-list>li {
  box-sizing: border-box;
  padding: 0 0 .6em;
}

ul#city-link-box>li>ul.city-list>li>a:link,
ul#city-link-box>li>ul.city-list>li>a:visited {
  color: #10998f;
}

ul#city-link-box>li>ul.city-list>li>a:hover {
  color: #0062bd;
  text-decoration: underline;
}