/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */

:root {
  scroll-padding: 80px;
  /* scroll-behavior: smooth; アンカーリンクの位置ズレが起こる*/
  --primary-main-01: #295d61;
  --primary-main-02: #eeeeee;
  --primary-main-03: #f9d20c;
  --primary-main-04: #1a8272;
  --text-inverted: #ffffff;
  --text-01: #000000;
  --text-02: #6a6a6a;
  --text-03: #acacac;
  --background: #323232;
  --divider: #6c717e;
  --divider-02: #d9dada;
  --warning: #bf0000;
}
body {
  color: var(--text-01);
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  padding: 0;
  position: relative;
}
h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
}
img {
  height: 100%;
  object-fit: contain;
  vertical-align: top;
  width: 100%;
}
p {
  margin: 0;
  padding: 0;
}
dl, dd {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover, button:hover, .btn:hover {
  opacity: 0.6;
}
[role="button"]:hover {
  filter: brightness(1.2);
}
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
b {
  background: linear-gradient(transparent 60%, rgb(242 214 91 / 60%) 40%);
  padding: 0 2px 2px;
}
hr {
  border: none;
  border-top: 2px dotted var(--divider-02);
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.bold {
  font-weight: 600;
}
.text_primary {
  color: var(--primary-main-01);
}
.text_secondary {
  color: #b88716;
}
.text_02 {
  color: var(--text-02);
}
.text_ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.font_futura {
  font-family: futura, 'Century Gothic', sans-serif;
}
.font_10 {
  font-size: 10px;
}
.font_12 {
  font-size: 12px;
}
.font_14 {
  font-size: 14px;
}
.font_16 {
  font-size: 16px;
}
.font_20 {
  font-size: 20px;
}
.block {
  display: block;
}
.inline_block {
  display: inline-block;
}
/* seoの関係でhtmlテキスト上に存在させるが見せない用 */
.visually_hidden { 
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.warning {
  color: var(--warning);
}
.prewrap {
  white-space: pre-wrap;
}
.flex {
  display: flex;
  align-items: flex-start;
}
.flex_end {
  justify-content: flex-end;
}
.flex_between {
  justify-content: space-between;
}
.flex_j_center {
  justify-content: center;
}
.flex_center {
  align-items: center;
}
.flex_wrap {
  flex-wrap: wrap;
}
.flex_shrink {
  flex-shrink: 0;
}
.grid_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.gap_4 {
  gap: 4px;
}
.gap_8 {
  gap: 8px;
}
.gap_16 {
  gap: 16px;
}
.overflow_hidden {
  overflow: hidden;
}
.link {
  color: #165D8E;
  word-break: break-all;
}
.link2 {
  border: 1px solid var(--divider-02);
  border-radius: 16px;
  display: inline-block;
  padding: 4px 15px;
}
.external_link {
  position: relative;
}
.external_link::after {
  content: url(/assets/external_link-b7c1b96d7df7d2cdfeb1ed990f72aef02139d8bc0a7e30b237c6ac9a5ef125f9.svg);
  display: inline-block;
  right: -4px;
  position: relative;
  width: 10px;
}
.link_divider {
  border-right: 1px solid var(--divider);
  padding-right: 4px;
}
.link_divider:last-child {
  border-right: none;
}
.underline {
  background: linear-gradient(transparent 60%, rgb(242 214 91 / 60%) 40%);
  display: inline-block;
  padding: 0 2px;
}
.inactive {
  color: var(--text-03);
}
button {
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  outline: none;
  padding: 0;
  appearance: none;
}
input {
  border: 1px solid var(--divider-02);
  border-radius: 4px;
  margin: 0;
}
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--primary-main-01);
}

/* brand */
.twitter {
  background: var(--background);
  border-radius: 4px;
  padding: 6px;
  max-width: 14px;
  max-height: 14px;
}
.line, .instagram, .website {
  max-height: 28px;
  max-width: 28px;
}
.sns_share {
  display: flex;
  justify-content: flex-end;
}
.share_twitter, .share_line {
  background: var(--background);
  border-radius: 4px;
  color: var(--text-inverted);
  font-size: 12px;
  padding: 0 4px;
  position: relative;
}
.share_line {
  background: #0dc755;
}
.read_more_open {
  background: linear-gradient(rgb(255 255 255 / 0%), 5%, #fff);
  padding-top: 12px;
  top: -12px;
  width: 100%;
}
.read_more_close {
  padding: 8px 0;
  width: 100%;
}
ins.adsbygoogle[data-ad-status="unfilled"], ins.adsbygoogle[data-ad-status="unfill-optimized"]{
  display: none !important;
}


/* header */
header {
  /* background: var(--primary-main-01); */
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.2);
  background-color: #36646c;
  background-image: repeating-linear-gradient(-45deg, var(--primary-main-01), var(--primary-main-01) 4px, transparent 0, transparent 10px), repeating-linear-gradient(45deg, var(--primary-main-01), var(--primary-main-01) 4px, transparent 0, transparent 10px);
  color: var(--text-inverted);
}

/* footer */
.footer_above {
  background-color: #f6f2ed;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  /* background-position: bottom;
  background-size: auto;
  background-blend-mode: lighten;
  background-color: rgb(255 255 255 / 90%);
  background-image: url(/assets/bg-3772424cc245ed5d3699f5fcf5dd2bbb8c92368491384988f70aa2e4fe9c1159.webp); */
  padding: 12px 0 20px;
}
.footer_wrapper {
  bottom: 0;
  position: absolute;
  width: 100%;
}
.footer {
  background: var(--background);
  color: var(--text-inverted);
  padding: 8px 0;
  position: relative;
}
.footer_area {
  display: grid;
  grid-template-columns: repeat(2, 1fr); */
  line-height: 1;
  max-width: 1040px;
  margin: 0 auto;
}
@media screen and (max-width:750px) {
  .footer_area {
    display: block
  }
  .footer_area li {
    margin: 4px 0;
  }
}

/* breadcrumbs */
nav {
  background: #f6f6f6;
  padding: 8px 4px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}
.breadcrumbs li:not(:last-of-type)::after {
  content: '›';
  margin: 0 8px 0 4px;
}
@media screen and (max-width:750px) {
  .breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .breadcrumbs li {
    flex-shrink: 0;
  }
}

/* container */
.view_container {
  padding: 0 16px;
  margin: 0 auto;
  max-width: 1100px;
}
.container_wrapper {
  /* overflow: hidden; */
  padding-bottom: 280px;
}
@media screen and (max-width:750px) {
  .container_wrapper {
    padding-bottom: 480px;
  }
}
.separate_container {
  display: flex;
  gap: 20px;
}
.main_container {
  width: 72%;
}
.sub_container {
  width: 28%;
}
@media screen and (max-width:750px) {
  .separate_container {
    display: block;
  }
  .main_container, .sub_container {
    width: 100%;
  }
}

/* wrapper */
.wrapper {
  box-sizing: border-box;
  margin: 24px 0;
  width: 100%; /* for ad width */
}
.wrapper_sub {
  padding: 8px;
  background: #f6f2ed;
  border-radius: 4px;
}
.wrapper_4 {
  margin: 4px 0;
}
.wrapper_8 {
  margin: 8px 0;
}
.wrapper_12 {
  margin: 12px 0;
}
.padding_4 {
  padding: 0 4px;
}
.title {
  font-size: 20px;
  font-weight: 600;
  margin: 12px 0;
}
.title2 {
  background: linear-gradient(#b34926 50%, #aa310a 50%);
  border-radius: 4px 4px 0 0;
  color: var(--text-inverted);
  font-size: 13px;
  padding: 4px 8px;
}
.title3 {
  background: #f6f6f6;
  border-left: 4px solid var(--primary-main-01);
  font-weight: 600;
  margin: 12px 0;
  padding: 4px 8px;
}
.info::after {
  border: 1px solid var(--text-02);
  border-radius: 12px;
  color: var(--text-02);
  content: '?';
  display: inline-block;
  font-size: 10px;
  right: 0;
  margin-left: 2px;
  position: relative;
  text-align: center;
  line-height: 12px;
  height: 12px;
  width: 12px;
}
.info2 {
  font-size: 12px;
  padding: 4px;
  text-align: center;
  border: 1px solid var(--text-01);
  border-radius: 4px;
}
.btn {
  background: var(--primary-main-03);
  border-radius: 4px;
  border: none;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
  font-size: inherit;
  line-height: 1.4;
  margin-left: 4px;
  padding: 4px 8px;
  text-align: center;
  letter-spacing: 0;
}
.btn2 {
  border: 1px solid var(--divider-02);
  border-radius: 12px;
  padding: 0 8px;
}
.btn3 {
  border: 2px solid #add2cc;
  border-radius: 4px;
  box-shadow: 0px 2px 0px rgb(61 139 152 / 0.2);
  color: var(--primary-main-01);
  padding: 4px 8px;
}
.ad_wrapper {
  text-align: center;
}
.ad_banner {
  position: relative;
}
.ad_banner::before {
  background: rgb(50 50 50 / 50%);
  color: var(--text-inverted);
  content: 'PR';
  font-size: 10px;
  padding: 0 2px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 1;
}
.mobile-only {
  display: none;
}
@media screen and (max-width:750px) {
  .pc-only {
    display: none;
  }
}

/* modal */
.modal_container {
  background: rgb(50 50 50 / 50%);
  display: none;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 100000;
  width: 100%;
}
.modal_wrapper {
  background: var(--text-inverted);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  max-width: 400px;
  padding: 16px;
  text-align: center;
  margin: 0 auto;
  min-height: 160px;
  overflow: hidden;
  width: 80%;
}
.modal_close {
  background: var(  --background);
  border-radius: 16px;
  color: var(--text-inverted);
  display: inline;
  position: absolute;
  top: 8px;
  right: 8px;
  height: 20px;
  line-height: 20px;
  width: 20px;
  z-index: 10;
}
.modal_icon {
  margin: 16px;
  width: 60px;
}
.modal_title {
  font-weight: 600;
  margin: 8px 16px;
}
.modal_message {
  font-size: 12px;
  margin: 16px 32px 56px;
  text-align: left;
}
.modal_link {
  border: 1px solid;
  border-radius: 12px;
  font-size: 12px;
  padding: 2px 12px;

  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* ピックアップ */
.pickup_wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}
.pickup_item {
  background: #fffef9;
  border: 1px solid #ece4c9;
  border-radius: 4px;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
  padding: 8px;
}
.service_type_label {
  padding: 0 4px;
  border-radius: 8px;
  display: inline-block;
  background: var(--primary-main-04);
  color: var(--text-inverted);
  font-size: 10px;
  letter-spacing: 0.5px;
}
@media screen and (max-width:750px) {
  .pickup_wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

.city_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media screen and (max-width:750px) {
  .city_wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
.city_item {
  background-blend-mode: darken;
  background-color: rgb(0 0 0 / 50%);
  background-repeat: no-repeat;
  background-size:cover;
  border-radius: 4px;
  color: var(--text-inverted);
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.city_item_渋谷駅 {
  background-image: url(/assets/area/渋谷-e27c2b9a80cc76631536b8f230dcdbb872e0c79beac9885ceec84b8d3706b318.webp);
}
.city_item_新宿駅 {
  background-image: url(/assets/area/新宿-d9ab9d194807fe30646d335663946270fadd6fe3c427589d9987149dd059f94f.webp);
}
.city_item_横浜駅 {
  background-image: url(/assets/area/横浜-5bbe19e84bbc4808a0b56cfce75bfc9da66c8875dfbc2bde7538aa3ae5310d12.webp);
}
.city_item_栄駅 {
  background-image: url(/assets/area/栄-429f0d35c05561c303206db7e4b1bac0e0e56fe1db1554b8a19535bdfbd94be2.webp);
}
.city_item_梅田駅 {
  background-image: url(/assets/area/梅田-dc0502861377d3eba90e2ec54d20de2b3ce6260674d0d5b3d39022f86a0c68ad.webp);
}
.city_item_仙台駅 {
  background-image: url(/assets/area/仙台-17a46d9af5d24f9f8a1d0f2d42e9bff49da90720cb4610539682e27a35c5e8c1.webp);
}
.city_item_札幌駅 {
  background-image: url(/assets/area/札幌-908d7a9a1c580a4ea6abcccea018411d85053848cb5ebf1cb3eeb88833490781.webp);
}
.city_item_博多駅 {
  background-image: url(/assets/area/博多-6201de1b72ee410b2270bfcfbf7abd7cc93aaeb05db6caab3cf93f1179ce7ee8.webp);
}

/* 地域選択地図 */
.filter_wrapper {
  background-color: var(--text-inverted);
  border-radius: 0 0 0 12px;
  box-shadow: 0px 2px 0px 0px var(--divider-02);
  display: inline-flex;
}
.area_map_wrapper {
  background: #eff6fa;
  border: 1px solid var(--primary-main-04);
  border-top-width: 4px;
  padding: 28px 16px 8px;
  position: relative;
}
.area_map {
  background: url(/assets/map_japan-5a0e7f3e2e9388e0449c048cfdc84c64e22573b2ff04da0b0ca511fbcbfdf25e.webp) 
              no-repeat right center / contain;
}
.area_map_label {
  background: var(--primary-main-04);
  border-radius: 0 0 4px 0;
  color: var(--text-inverted);
  font-size: 12px;
  font-weight: bold;
  padding: 0 8px;
  left: 0;
  top: -2px;
  position: absolute;
}
.area_map_bg {
  background-position: bottom;
  background-size: contain;
  background-blend-mode: darken;
  background-color: rgb(0 0 0 / 40%);
  background-image: url(/assets/bg-3772424cc245ed5d3699f5fcf5dd2bbb8c92368491384988f70aa2e4fe9c1159.webp);
  padding: 16px 0;
}
.region {
  background: var(--text-inverted);
  border-radius: 4px;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  margin: 4px 4px 4px 0;
  max-width: 120px;
  padding: 2px 0;
  text-align: center;
  width: 40%;
}
.region_北海道 {
  border: 2px solid #7478c2;
}
.region_東北 {
  border: 2px solid #4389d3;
}
.region_関東 {
  border: 2px solid #31bfca;
}
.region_中部 {
  border: 2px solid #4bb968;
}
.region_近畿 {
  border: 2px solid #b1b730;
}
.region_中国 {
  border: 2px solid #eea02a;
}
.region_四国 {
  border: 2px solid #d18f69;
}
.region_九州 {
  border: 2px solid #ff7575;
}
.region_details {
  background: rgb(255 255 255 / 90%);
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  max-width: 60%;
  padding: 0 4px;
  margin: 4px 0;
}
@media screen and (max-width:500px) {
  .region_details {
    display: none;
  }
}
.region_modal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.prefecture_modal {
  border: 1px solid var(--divider);
  border-radius: 4px;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.2);
}

.shop_list_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.shop_list {
  background-image: linear-gradient(#fff 70%, #f5f5f5);
  padding: 8px;
  border-bottom: 1px solid var(--divider-02);
}
@media screen and (max-width:750px) {
  .shop_list_wrapper {
    display: block;
  }
}

/* 店舗地図 */
#map {
  background: #b9d6ff !important;
  border-radius: 4px;
  box-sizing: border-box;
  height: 42vh;
  width: 100%;
}
@media screen and (max-width:750px) {
  #map {
    height: 38vh;
  }
}
.leaflet-tile-pane {
  filter: brightness(1.1) !important;
  opacity: 0.8 !important;
}

.map_direction_sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 8px;
  z-index: 10;
}
.map_filter_icon, .map_switch_icon {
  padding: 2px 8px;
  position: relative;
}
.map_switch_icon {
  padding: 2px 20px 2px 8px;
}
.filter_form_item {
  display: inline-block;
  letter-spacing: 0;
  line-height: 1.8;
  width: 48%;
}
.center_mark_title {
  color: #d6100f;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  white-space: nowrap;
}
.numbered_icon, .numbered_pin {
  background-color: #d60f0f;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
  color: var(--text-inverted);
  flex-shrink: 0;
  font-size: 12px;
  margin-right: 8px;
  text-align: center;
  line-height: 25px;
  height: 25px;
  width: 25px;
}
.numbered_pin::after {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-top: 12px solid #d60f0f;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.result_item {
  border-bottom: 1px solid var(--divider-02);
  padding: 8px 4px 8px 4px;
}
.selected_result_item {
  background-color: #fff9f8;
  border-left: 4px solid #d60f0f;
}
.result_item_guide {
  margin-bottom: 8px;
}
.rating {
  font-weight: 600;
  margin-right: 4px;
}
.review_score {
  color: orange;
}
.review_comment {
  font-size: 12px;
  margin: 4px 0;
}
.review_count {
  background: var(--background);
  border-radius: 12px;
  color: var(--text-inverted);
  font-size: 10px;
  letter-spacing: 0;
  text-align: center;
  position: absolute;
  top: -2px;
  right: -2px;
  line-height: 20px;
  height: 20px;
  width: 20px;
}
blockquote {
  background: #f6f6f6;
  border-radius: 12px;
  font-style: italic;
  line-height: 1.4;
  margin: 8px 0;
  padding: 8px 12px;
}
.shop_map {
  height: 300px;
  overflow: hidden;
  width: 100%;
}
.shop_map iframe {
  height: calc(100% + 300px);
  margin-top: -200px;
  width: 100%;
}
.shop_map_info {
  display: inline-block;
  background: var(--text-inverted);
  box-shadow: 0px 0px 4px 0px #acacac;
  position: relative;
  top: 4px;
  left: 4px;
  padding: 8px;
  max-width: 250px;
}

.area_list_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 8px 4px;
  padding: 0 4px;
}
@media screen and (max-width:750px) {
  .area_list_wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .area_list {
    display: inline-block;
  }
}
.train_line_title {
  position: relative;
}
.train_line_title:hover {
  opacity: 0.6;
}
.icon_arrow_right, .icon_arrow_up, .icon_arrow_down {
  position: relative;
}
.icon_arrow_right::after, .icon_arrow_up:after, .icon_arrow_down::after {
  content: url(/assets/arrow-b5988cc417bce35d844ecf8014f209219847ff4630ec59b4a2979db9708a62ab.svg);
  right: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 12px;
}
.icon_arrow_right::after {
  transform: translateY(-50%) rotate(-90deg);
  -webkit-transform: translateY(-50%) rotate(-90deg);
}
.icon_arrow_up::after {
  transform: translateY(-50%) rotate(-180deg);
  -webkit-transform: translateY(-50%) rotate(-180deg);
}
.icon_arrow_invert::after {
  filter: invert(1);
}

.icon_mylist_wrapper {
  border-radius: 4px;
  border: 1px solid var(--divider-02);
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
  padding: 0 8px;
  margin: 8px 0 8px auto;
}

.icon_before {
  display: flex; 
  align-items: center; 
  gap: 4px;
}
.icon_before::before {
  content: '';
  flex-shrink: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon_station::before {
  background-image: url(/assets/train-9c5267719a964f80054718bcb6ae178b615187c1d4f0593bdab7a1e753f5e747.svg);
  color: var(--primary-main-01);
  height: 18px;
  width: 18px;
}
.icon_camera::before {
  background-image: url(/assets/camera-6bcb31a8b889ff4784218975a5d07f4c02a81698a228d961b236faa45b37d166.svg);
  height: 16px;
  width: 16px;
}
.icon_search::before {
  background-image: url(/assets/search-f0dbfceb1aaee2236379ba1eeb380e04363dc85352d3e0b37cd87d71ef0ad54c.svg);
  height: 16px;
  width: 16px;
}
.icon_filter::before {
  content: '≡';
}
.icon_twitter::before {
  background-image: url(/assets/x-d2c8c42f4876a817fdf31d324280e6504cafd2ef0cf8358df92776ee11cfd05f.svg);
  height: 10px;
  width: 10px;
}
.icon_line::before {
  background-image: url(/assets/line-e30161a33586b98f18a280f266ebc28401801720c55116fbb1331e50cd3d076e.svg);
  height: 16px;
  width: 16px;
}
.icon_mylist {
  letter-spacing: 0;
}
.icon_mylist::before {
  background-image: url(/assets/mylist-7dbf379cd672ed79d87a43b187b30ccccc8bc279ca1aab05b98c0b560b714da5.svg);
  height: 12px;
  width: 10px;
}
.icon_mylist_inactive {
  color: var(--text-02);
}
.icon_mylist_inactive::before {
  filter: grayscale(1);
  opacity: 0.4;
}
.icon_memo::before {
  content: '📝';
}
.icon_hint::before {
  content: '💡';
  background: #b88716;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon_question::before {
  font-family: futura, 'Century Gothic', sans-serif;
  color: var(--primary-main-04);
  content: 'Q.';
}

/* 店舗詳細 */
.shop_bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/assets/bg_detail-c9ab6f7d071bdb2dd0a2d391625951d333bbe2b6c86fe7a6f7b4bbe6b188098c.webp);
  padding: 12px 0;
}
.shop_bg2 {
  /* backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(8px); */
  /* -ms-filter: blur(6px); */
  background: rgb(255 255 255 / 94%);
  padding: 4px 8px;
}
.shop_bg3 {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/assets/map_wide-5100adda2b3179dcf0105397c04f53d65f9e3eee070aecc89e3a5d5157549c46.webp);
  border-radius: 4px;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
  display: block;
  text-align: center;
  padding: 8px 0;
}
.shop_bg3_title {
  background: rgb(48 118 0 / 60%);
  color: var(--text-inverted);
  display: block;
  line-height: 1.2;
  padding: 8px 0;
  text-shadow: #307600 0px 1px 0px;
}
.shop_details {
  display: grid;
  grid-template-columns: 100px 1fr;
  font-size: 12px;
}
.shop_details dt {
  background: #ecf0eb;
  border-bottom: 1px solid var(--divider-02);
  font-weight: 600;
  padding: 8px;
}
.shop_details dd {
  border-bottom: 1px solid var(--divider-02);
  padding: 8px;
}
@media screen and (max-width:750px) {
  .shop_details {
    display: block;
  }
  .shop_details dt {
    padding: 4px 8px;
  }
  .shop_details dt, .shop_details dd {
    border-bottom: none;
  }
}
.equipments {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media screen and (max-width:750px) {
  .equipments {
    font-size: 12px;
    grid-template-columns: repeat(4, 1fr);
  }
}
.equipments li {
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: -1px;
  padding-top: 24px;
  text-align: center;

  background-position: center 4px;
  background-repeat: no-repeat;
  background-size: 20px;
  color: var(--text-inverted);
}
.equipments_simple {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.equipments_simple_item {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  border-radius: 4px;
  display: inline-block;
  font-size: 12px;
  padding: 2px;
  height: 22px;
  width: 22px;
}
.equipment_false {
  filter: grayscale(1);
  opacity: 0.25;
}
.equipment_smoking {
  background-image: url(/assets/icon/smoking-aff2b80495efb2131392670c9fd8b947d88a3af98ccc2dcb817ff4858dd47e28.webp);
  background-color: #bd110d;
}
.equipment_smoking_denshi {
  background-image: url(/assets/icon/smoking_denshi-46154c51c1d987459fd485c0be6fa7a6a1714b94ffc0dd3f8436b0c1e0d75a17.webp);
  background-color: #bd110d;
}
.equipment_smoking_kanetsu {
  background-image: url(/assets/icon/smoking_kanetsu-a47df27fce07032e60abcadcabb4c27bf8b8fbc628980a63f67909074ff35e3f.webp);
  background-color: #bd110d;
}
.equipment_smoking_separate {
  background-image: url(/assets/icon/smoking_separate-406d69aebab7b6677ef78a8d8d5f6588c77b5c351f413ca002d9d9af83c20b10.webp);
  background-color: #bd110d;
}
.equipment_non_smoking {
  background-image: url(/assets/icon/non_smoking-1cf5a68974f5f574464201605f3c36bde862c8a8f1c9e44cc9456c840c3d24c7.webp);
  background-color: #bd110d;
}
.equipment_auto_dealing_table {
  background-color: #2e8331;
}
.equipment_parking {
  background-image: url(/assets/icon/parking-d497fc7ac3981ae42533e80d1bfdd8544ff51ecd2811625c64b431c541f7799c.webp);
  background-color: #956D28;
}
.equipment_internet {
  background-image: url(/assets/icon/internet-c011c6b5e2c0c27034885b929a0df7831f88b01f0a8f6c2fd73a05e5ec80c46e.webp);
  background-color: #24587e;
}
.equipment_air_cleaner {
  background-image: url(/assets/icon/air_cleaner-93da627d4b568105d8324ed3f3b74998768384dc858e4d35fd3fdd669944339d.webp);
  background-color: #45a8cf;
}
.equipment_large_screen_tv {
  background-image: url(/assets/icon/large_screen_tv-1fac5f6ff9738f2b23786e6e53b7165c7114c5916716331d817f0064e929f843.webp);
  background-color: #FF6105;
}
.equipment_womens_toilet {
  background-image: url(/assets/icon/womens_toilet-3c0f1f3805a53f8c6f4a6bf5cdf510e3adfde77dbb544e143e829eee6be8d8ad.webp);
  background-color: #f959a3;
}
.equipment_private_room {
  background-image: url(/assets/icon/private_room-497c86e62555ea5575326d7b3c3379845e11dccd5717b4e88a283674dc3ca856.webp);
  background-color: #8857a1;
}
.equipment_bring_in {
  background-image: url(/assets/icon/bring_in-4ada0cfb5582f0e28f352accd26149f750f395c4e8dad9c90e436ccc0c1286b9.webp);
  background-color: #805656;
}
.place_btn {
  background: var(--primary-main-03);
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 8px;
}
.place_map {
  border: 1px solid var(--divider-02);
  border-radius: 4px;
  height: 50px;
  width: 50px;
}
.status {
  font-size: 12px;
  padding: 4px 8px;
  background: #ffdfdf;
}
.status::before {
  background: var(--background);
  border-radius: 50%;
  color: var(--text-inverted);
  content: 'i';
  display: inline-block;
  position: relative;
  left: 0;
  margin-right: 2px;
  text-align: center;
  width: 16px;
  line-height: 16px;
  height: 16px;
  width: 16px;
}
.new {
  color: #d72b2b;
  margin-right: 4px;
}
.new_ribbon {
  min-width: 40px;
  overflow: hidden;
  position: relative;
}
.new_ribbon::before {
  background: #d72b2b;
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
  color: var(--text-inverted);
  font-family: futura, 'Century Gothic', sans-serif;
  font-size: 10px;
  padding: 0 20px;
  content: "OPEN";
  position: absolute;
  top: 8px;
  left: -20px;
  line-height: 1.2;
  -webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.new_bg {
  background-position: center;
  background-size: cover;
  background-image: url(/assets/bg_new-ad2d4b92e73f9ffd14ae58e8f60a3c96fe8147c3a4ca1b62e60bbdf5c2349f32.webp);
  min-height: 40px;
}
.tag_list {
  border: 1px solid var(--divider-02);
  border-radius: 24px;
  display: inline-flex;
  font-size: 12px;
  list-style: none;
  margin: 4px 0;
  padding: 4px 8px;
}
.tag {
  background: var(--primary-main-01);
  border-radius: 4px;
  color: var(--text-inverted);
  font-size: 12px;
  margin: 0 2px;
  padding: 2px 4px;
}
/* ランキング */
.rank_wrapper {
  background-blend-mode: darken;
  background-color: rgb(0 0 0 / 20%);
  background-size: cover;
  background-image: url(/assets/bg_rank-5f6aea9eb78bfb3c832892580cd1b2604c391dfbfae2f43d3f331e3f9a9b21da.webp);
  padding: 8px;
}
.rank {
  background: var(--primary-main-01);
  color: var(--text-inverted);
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  position: relative;
}
.rank_1 {
  background: #c28e2b;
}
.rank_2 {
  background: #979797;
}
.rank_3 {
  background: brown;
}
.rank_1::before, .rank_2::before, .rank_3::before {
  content: "";
  position: absolute;
  border-top: 4px solid transparent;
  border-left: 6px solid #fbde45;
  border-right: 6px solid #fbde45;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.rank_1::after, .rank_2::after, .rank_3::after {
  content: "";
  position: absolute;
  border: 4px solid transparent;
  border-bottom: 6px solid #e6c833;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.price_wrapper {
  border-radius: 4px;
  padding: 8px;
  background: #fefaeb;
}
.feature_label {
  border: 1px solid #c16909;
  background: linear-gradient(90deg, #c16909, #d50000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
  border-radius: 4px;
}
.mylist_wrapper {
  padding: 4px 0;
  background: #fefaeb;
}
.station_memo_wrapper {
  border: 1px solid #b88716;
  border-radius: 8px;
  background: linear-gradient(0deg, transparent 9px, #edeae3 10px), linear-gradient(90deg, transparent 9px, #edeae3 10px);
  background-size: 10px 10px;
  position: relative;
}
.station_memo_wrapper::after {
  content: '';
  position: absolute;
  background-image: url(/assets/point-b874b4b42c8c8a362b4c1e500f30f0b3387bf283a0602e9e795397b80f51d4ab.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-left: 8px solid #fff;
  height: 50px;
  width: 50px;
  right: 8px;
  top: -22px
}
.station_memo_title {
  background: #b88716;
  color: var(--text-inverted);
  padding: 2px 12px;
  display: inline-block;
  border-radius: 4px 0;
}
.station_memo {
  line-height: 1.6;
  padding: 8px 12px;
}
.answer {
  border-radius: 12px;
  padding: 8px;
  background: #f6f6f6;
  line-height: 1.6;
  margin: 4px 0 20px;
}
.nearby_shop_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width:750px) {
  .nearby_shop_wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nearby_shop {
  border: 1px solid var(--divider-02);
  border-radius: 4px;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 8px;
}
.nearby_shop_comment {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  background: #f6f6f6;
  line-height: 1.4;
  margin-top: 8px;
  padding: 4px 4px 2px;
}
.suggest_wrapper {
  background: #fefaeb;
  border: 1px solid #f2e7cf;
  border-radius: 4px;
  overflow-x: scroll;
  padding: 6px 8px;
}
.list_top_banner_wrapper {
  position: relative;
}
.list_top_banner_wrapper_date {
  line-height: 1;
  color: var(--text-inverted);
  position: absolute;
  top: 3px;
  left: 62%;
  transform: translateX(-62%);
  -webkit-transform: translateX(-62%);
  -ms-transform: translateX(-62%);
}