@charset "UTF-8";

/* =========================================================
   JP 貸渡・返却店舗  -  page-shops.php
   namespace: .p-shops

   旧ページ（WPBakery）の見た目をそのまま引き継ぐ。
   注意: 旧ページのスタイルはテーマCSSではなく、WPBakeryの
   「ページ別カスタムCSS」（postmeta の _wpb_post_custom_css）に入っていた。
   ショートコードを外すと出力されなくなるため、必要な指定をここへ移してある。
   移した元の値:
     h2                       … border-left 8px #f0c540 / background #FFF8E3 / padding 10px
     .custom-sub-heading p strong … 「お車預り可能」の紺色バッジ #1d4a67
     .rental-place-heading    … 「貸渡提携先」の中央寄せ＋背面の横線
     .vc_btn3-color-orange    … CTAボタンのオレンジ #f90
     html{scroll-padding-top} … アンカー（#albi）の着地位置。ここでは
                                .p-shops__name の scroll-margin-top で代替
   ========================================================= */

.p-shops {
  --color-text: #1a1a1a;
  --color-heading: #273f44;
  --color-badge: #1d4a67;
  --color-red: #ff0000;
  --color-orange: #f90;
  --color-name-bg: #fff8e3;
  --color-name-bar: #f0c540;
  --color-dashed: #c9c9c9;
  --radius: 12px;

  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* インナー幅は料金ページ（.inner-1210）と同じ 1210px・左右15px にする。
     box-sizing はこの要素自身にも要る。下の「.p-shops *」は子孫だけが対象で、
     .p-shops 本体には当たらない。既定の content-box のままだと
     1210px が中身の幅になり、左右15pxを足した1240pxが外側の幅になって、
     料金ページ（border-boxで外側1210px）より30px広くなってしまう */
  box-sizing: border-box;
  max-width: 1210px;
  margin: 0 auto;
  padding: 8px 15px 96px;
}

.p-shops *,
.p-shops *::before,
.p-shops *::after {
  box-sizing: border-box;
}

/* パンくず（#topicpath）は .inner の外に出力されていて、
   幅1240px・左右余白なしで中央寄せされる。中身は 1210px・左右15px なので、
   このままだと左端が30pxずれる。タイトルを中央寄せから左寄せに変えたことで
   ズレが見えるようになるため、パンくず側を中身と同じ箱にして左端を揃える。

   このCSSはこのページでしか読み込まれないので、他のページのパンくずには影響しない。
   max-width に !important が要るのは、全ページ共通の css/add-outoptimize.css が
   同じプロパティを !important で指定しているため。 */
#topicpath {
  max-width: 1210px !important;
  padding-left: 15px;
  padding-right: 15px;
}

/* h1（ページタイトル）は、グロナビ下層ページで見た目を揃える方針により
   ご利用案内ページのタイトル（.p-guide__h1）と同じ 32px / 700 / 1.4 にする。
   上余白はパンくずとタイトルの間隔。入れ物側に既に8pxあるので、
   合計が他の下層ページと同じ23pxになるよう15pxにしている。 */
.p-shops__title {
  font-size: 32px;
  /* 色は料金ページのタイトルと同じ #212121 */
  color: #212121;
  line-height: 1.4;
  /* 料金ページのタイトルに合わせて左寄せ */
  text-align: left;
  font-weight: 700;
  margin: 15px 0 24px;
}

.p-shops__lead {
  margin: 0 0 48px;
}

/* 「貸渡提携先」。中央のテキストの背面に横線を通す */
.p-shops__group {
  position: relative;
  text-align: center;
  margin: 56px 0 32px;
  z-index: 0;
}

.p-shops__group::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.p-shops__group span {
  font-size: 20px;
  font-weight: 700;
  background: #fff;
  display: inline-block;
  padding: 0 20px;
}

.p-shops__item {
  margin: 0 0 56px;
}

.p-shops__item:last-child {
  margin-bottom: 0;
}

/* 店舗名（h2）。旧ページはクリーム地＋左の黄色い縦棒だったが、
   下層ページのトンマナを揃える依頼により、料金ページの h2（css/jp-price.css の
   .heading03）と同じ「左の赤い縦棒＋下の薄い赤の罫線」に変更した。 */
.p-shops__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 800;
  color: #212121;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-left: none;
  background: none;
  border-bottom: 2px solid rgba(230, 51, 18, 0.3);
  /* 固定ヘッダーがあるため、アンカー着地位置をずらす（#albi） */
  scroll-margin-top: 100px;
}

.p-shops__name::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: #e63312;
}

/* 「お車預り可能」の紺色バッジ */
.p-shops__badge {
  display: inline-block;
  background-color: var(--color-badge);
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  padding: 2px 10px;
  border-radius: 5px;
  margin: 0 0 12px;
}

.p-shops__notes {
  margin: 0 0 24px;
}

.p-shops__notes p {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.p-shops__notes p:last-child {
  margin-bottom: 0;
}

/* 旧ページで船橋本店だけ赤字・太字なしだったのを引き継ぐ */
.p-shops__notes--red p {
  color: var(--color-red);
  font-weight: 400;
}

.p-shops__body {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.p-shops__info,
.p-shops__media {
  flex: 1 1 0;
  min-width: 0;
}

/* 項目リスト。旧ページの破線区切り（vc_sep_dashed）を引き継ぐ */
.p-shops__dl {
  margin: 0;
}

.p-shops__dl dt {
  font-weight: 700;
  margin: 0 0 4px;
}

.p-shops__dl dd {
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px dashed var(--color-dashed);
}

.p-shops__dl dd:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.p-shops__dl dd span {
  display: block;
}

.p-shops__map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f2f2f2;
}

.p-shops__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 店舗写真。旧ページは2カラム（vc_col-sm-6 ×2） */
.p-shops__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
}

.p-shops__photo {
  flex: 1 1 calc(50% - 16px);
  min-width: 0;
}

.p-shops__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* お見積もり・ご予約はこちら */
.p-shops__cta {
  text-align: center;
  margin-top: 32px;
}

/* 文字色は :link / :visited まで付けないと効かない。
   共通CSSの「a:link, a:visited { color: #1a1a1a }」の方が詳細度が高く、
   .p-shops__btn だけではオレンジ地に黒文字のままになる */
.p-shops__btn,
.p-shops__btn:link,
.p-shops__btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-orange);
  border: 1px solid var(--color-orange);
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 5px;
  transition: opacity 0.2s;
}

.p-shops__btn:hover,
.p-shops__btn:focus {
  color: #fff;
  opacity: 0.85;
}

.p-shops__btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  /* 右向き矢印（旧ページの fa-arrow-right 相当） */
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .p-shops {
    padding-bottom: 64px;
  }

  .p-shops__title {
    /* SPもご利用案内ページのタイトルと同じ24px */
    font-size: 24px;
    line-height: 1.4;
  }

  .p-shops__lead {
    margin-bottom: 32px;
  }

  .p-shops__group {
    margin: 40px 0 24px;
  }

  .p-shops__group span {
    font-size: 18px;
  }

  /* SPも料金ページの h2 と同じ値にする */
  .p-shops__name {
    font-size: 18px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .p-shops__name::before {
    height: 20px;
  }

  .p-shops__body,
  .p-shops__photos {
    gap: 24px;
  }

  .p-shops__info,
  .p-shops__media,
  .p-shops__photo {
    flex: 1 1 100%;
  }
}