@charset "utf-8";

/* エリア選択 ------------------------ */
.area-wrap { display: grid; grid-template-columns: max-content 1fr; align-items: center;}

.area-list > div { display:grid; grid-template-columns:3em repeat(6, 1fr); padding-block:.5em; }
.area-list dt > a { color:var(--color-sub1); font-weight:600; }
.area-list dt > a:hover { text-decoration:underline; }
.area-list dd { padding-right:1em; font-weight:400; font-feature-settings: "palt"; }
.area-list dd::before { content:"|"; margin-right:.5em; }
.area-list dd > a { text-decoration:underline; }

.map .btn .area { fill: #f39800; transition: fill 0.3s;}
.map .btn:hover .area { fill: #f39a00c5;}

svg { width: 100%; height: auto;}


/* チラシ ------------------------ */
.store-flyer { margin-bottom:10%; }
.store-flyer-list { display:grid; grid-template-columns:repeat(2, 1fr); gap:3%; }
.store-detail .store-flyer { margin-bottom:2em; }


/* 店舗 detail ------------------------ */
.store-detail { padding-top:2em; }
.store-detail .ttl-def { margin-block:2em .8em; }
.store-head {
  display:grid; grid-template-columns:1fr repeat(2,9em); align-items:center; gap:1em;
  margin-bottom:1.2em; padding:.6em 0 .2em; font-size:1.6em; line-height:1.5; border-bottom:3px solid var(--color-sub1);}
.store-head-tel { margin:0; color:var(--color-base); font-weight:700; }
.store-head-tel:before {
  content:""; display:inline-block; width:.85em; height:.85em;
  margin-right:.2em; vertical-align:-.06em;
  background:url(../img/common/ico-tel-base.svg) no-repeat center / 100%; }
.store-head-reserve { margin:0; font-size:.7em; }
.store-head-reserve .btn-def { display:block; }

.store-cat li { display:inline-block; padding:.2em .5em; color:#fff; font-size:.8em; line-height:1.5; background:var(--color-sub3); }

.store-lead { font-size:1.15em; }

.store-tel li { display:inline-block; margin-right:.6em; }
.store-tel .free:before, .tel-free:before { content:""; display:inline-block; margin-right:3px; width:19px; height:11px; background:url(../img/common/ico-freedial.png) no-repeat center / contain; }

.store-info-area { margin-block:min(8%,40px); }
.store-slider .slider-item:focus { outline:none; }
.store-slider-thumb { display:grid; grid-template-columns:repeat(6,1fr); gap:.5em; margin-top:.5em; }
.store-slider-thumb .slider-item { padding-top:79%; opacity:.6; position:relative; }
.store-slider-thumb .slider-item img { position:absolute; top:0; object-fit:contain; }
.store-slider-thumb .slider-item.current { opacity:1; }

.store-info-detail .link { gap:.5em; align-items:center; }

.store-sns { padding-top:1rem; text-align:right; border-top:1px solid #ffe4b7; }

.medama-ttl { margin-bottom:2%; }

.store-medama { margin-bottom:min(8.5%,60px); }
.store-medama .medama-list { display:grid; grid-template-columns:repeat(4, 1fr); }

.store-gmap-box iframe { width:100%; }
.store-stock-link > .btn-def { padding:.6em 2.5em .6em 1.5em; }


/* 960px 以上 ------------------------ */
@media screen and (min-width: 960px) {

  /* 店舗 detail ------------------------ */
  .store-info-area { display:flex; justify-content:space-between; }
  .store-slider-container { width:50%; }
  .store-info-detail { width:47%; }
  .store-stock-link > a + a { margin-left:2em; }

}

/* 959px 以下 ------------------------ */
@media screen and (max-width: 959px) {
  .area-list > div { grid-template-columns:3em repeat(4, 1fr); }
  .area-list dt { grid-row:1 / span 2; }


  /* 店舗 detail ------------------------ */
  .store-head { grid-template-columns:55% 1fr; gap:5px 15px; margin-bottom:.75em; }
  #service .store-head { grid-template-columns: 1fr 55%; }
  .store-head-name { grid-column:1 / span 2; }

  .store-info-detail { margin-top:5%; }
  .store-stock-link > .btn-def { margin-bottom:.5em; width:80%; }

  .store-medama .medama-list { grid-template-columns:repeat(3, 1fr); }

}

/* 599px 以下 ------------------------ */
@media screen and (max-width: 599px) {
  .area-wrap { grid-template-columns: 1fr; row-gap: 1.5em; justify-items: center;}
  .area-wrap .map { width: 90%;}
  .area-list { order: 1;}
  .area-list > div { grid-template-columns:3em repeat(3, 1fr); }

  .store-medama .medama-list { grid-template-columns:repeat(2, 1fr); margin-inline:5px; }
  .store-flyer-list { grid-template-columns:1fr; gap:1em; }

  .store-info-detail .link > li { width:100%; }
  .store-info-detail .link .btn-basic { display:block; padding-block:.6em; font-size:1.3em; }
}