/*---------------------------------------------------
  single-store_review.php 用追加スタイル
  ※ 子テーマの functions.php で enqueue している前提
---------------------------------------------------*/

/*-----------------------------------
  0. 横スクロールを抑制
-----------------------------------*/
html, body {
  overflow-x: hidden; /* 横スクロールを抑制 */
}

/*-----------------------------------
  1. 本文（.store-single）領域：幅100%、最大幅900px
     見出し以外の文字サイズを統一
     全体テキストは中央寄せ
-----------------------------------*/
.store-single {
  padding: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  margin: 0 auto;
  box-sizing: border-box;

  /* PCでの最大表示幅を900pxに固定 */
  width: 100%;
  max-width: 900px;

  /* 見出し以外のデフォルトフォントサイズを指定 */
  font-size: 16px;
  line-height: 1.7;
}

/* 見出し（h1～h6）はお好みのサイズに再定義 */
.store-single h1 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.store-single h2 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 14px;
}
.store-single h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.store-single h4 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.store-single h5 {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.store-single h6 {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 6px;
}

/*-----------------------------------
  2. アイキャッチ＆メイン画像：幅100%、高さ自動
     画像自体を中央寄せ
-----------------------------------*/
.store-featured-image img,
.store-acf-main-image img {
  width: 100%;       /* ビューポート幅に合わせて伸縮 */
  max-width: 900px;  /* PC時 最大900px */
  height: auto;
  display: block;
  margin: 0 auto 24px; /* 自身を中央寄せ */
}

/*-----------------------------------
  3. 基本情報テーブル（縦型）
     - PC: 2列（th:20% / td:80%）
     - モバイル: 1列（flexで縦並び）
     テーブル全体を中央寄せ
-----------------------------------*/
.store-info {
  width: 100%;
  max-width: 900px;      /* PC時の最大幅 */
  margin: 24px auto;     /* 上下マージン＋中央寄せ */
  border-collapse: collapse;
  box-sizing: border-box;
  text-align: center;    /* テーブル内は左揃え */
}
.store-info th,
.store-info td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  vertical-align: top;

  /* セル内の文字サイズを統一 */
  font-size: 16px;
  line-height: 1.7;
}
.store-info th {
  width: 20%;
  background-color: #f5f5f5;
  font-weight: 600;
}
.store-info td {
  width: 80%;
}

/* モバイル：1列レイアウト */
@media (max-width: 767px) {
  .store-info {
    margin: 16px auto; /* モバイル時のマージン調整 */
  }
  .store-info tr {
    display: flex;
    flex-wrap: wrap;
  }
  .store-info tr th,
  .store-info tr td {
    display: block;
    width: 100%;
  }
  .store-info tr th {
    margin-top: 8px;
  }
}



/*-----------------------------------
  5. 対応サービス・出張対応エリア セクション
     - PC: フレックスで横並び、折り返し＆中央寄せ
     - モバイル: テキストを折り返し
-----------------------------------*/
.info-section {
  width: 100%;
  max-width: 900px;    /* PC時の最大幅 */
  margin: 10px auto;   /* 中央寄せ */
  padding: 5px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;  /* セクション内テキストは中央 */
}
.info-section h2 {
  margin-bottom: 12px;

  /* 見出しなので再度サイズ指定 */
  font-size: 20px;
  line-height: 1.4;
  color: #222;
}
.info-section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left; 
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-section ul li {
  padding: 6px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;

  /* li のテキストサイズを統一 */
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .info-section {
    margin: 8px auto; /* モバイル時のマージン調整 */
    padding: 8px;
  }
  .info-section ul {
    display: block;
    text-align: center; /* モバイル時も中央寄せ */
  }
  .info-section ul li {
    display: inline-block;
    margin-bottom: 8px;
    white-space: normal;
  }
}

/*-----------------------------------
  6. 提供サービスセクション
     - PC: 横2列（50% - 12px）＆中央寄せ
     - モバイル: 1列
-----------------------------------*/
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* カード群を中央揃え */
  gap: 24px;
  margin: 24px 0;
  box-sizing: border-box;
}
.service-item {
  width: calc(50% - 12px);
  max-width: 100%;    /* PC時にカード幅の最大値を指定 */
  padding: 5px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;  /* カード内テキストを中央揃え */
  box-sizing: border-box;
}
.service-item img {
  width: 100%;
  max-width: 400px;
  max-width: 100vw;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
}
.service-item h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.price {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: bold;
}

@media (max-width: 767px) {
  .service-item {
    width: 100%;
    margin-bottom: 24px;
  }
}

/*-----------------------------------
  7. 全体のレスポンシブ微調整
-----------------------------------*/
@media (max-width: 767px) {
  .store-single {
    padding: 5px !important;
    max-width: 95% !important;
  }
  .store-featured-image img,
  .store-acf-main-image img {
    margin-bottom: 16px;
  }
}

/*-----------------------------------
  ジャンル・エリア表示部分の装飾
-----------------------------------*/
.store-single .meta {
  display: inline-block;         /* テキスト幅に合わせてブロック化 */
  background-color: #e6f7ff;     /* 薄いブルー背景 */
  border-radius: 6px;            /* 角を少し丸める */
  padding: 6px 12px;             /* 文字まわりの余白 */
  margin-bottom: 24px;           /* 他要素との間に余白 */
  text-align: center;            /* 中身を中央揃え */
}
.store-single .meta span {
  display: inline-block;
  margin-right: 12px;
}
.store-single .meta span:last-child {
  margin-right: 0; /* 最後の span には余分な右マージンをつけない */
}

/* ===== 出張対応エリア：共通 ===== */
.business-areas {
  margin-bottom: 24px;
}

.business-areas-title {
  font-size: 1.1em;
  margin-bottom: 8px;
}

/* レベル別にインデントを付与 */
.ba-list {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}
.ba-list--level-0 {
  margin-left: 0;
}
.ba-list--level-1 {
  margin-left: 16px;
}
.ba-list--level-2 {
  margin-left: 32px;
}
/* さらに孫がある場合はレベル3以降も同じく */
.ba-list--level-2 .ba-list {
  margin-left: 16px; /* 32px + 16px = 48px など */
}

/* 親タームの文字を太字に */
.ba-item--parent > .ba-link {
  font-weight: 600;
}

/* リンクの色やホバー時の見た目 */
.ba-link {
  color: #0066cc;
  text-decoration: none;
}
.ba-link:hover {
  text-decoration: underline;
}

/* リストアイテムのマージン調整 */
.ba-item {
  margin-bottom: 4px;
}

/* 必要に応じてメディアクエリやフォントサイズの調整を追加してください */

/*-----------------------------------
  関連店舗カード（related-stores）共通スタイル
-----------------------------------*/

.related-stores {
  margin: 40px 0;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
}

.related-stores__title {
  font-size: 20px;
  margin-bottom: 12px;
  color: #333;
}

/* 横スライダー用コンテナ */
.related-stores__slider {
  display: flex;
  gap: 16px;            /* カード同士の間隔 */
  overflow-x: auto;     /* 水平方向スクロール有効化 */
  padding-bottom: 8px;   /* スクロールバー用の余白 */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* スクロールバーをなるべく目立たせたくない場合 */
.related-stores__slider::-webkit-scrollbar {
  height: 6px;
}
.related-stores__slider::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}
.related-stores__slider::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
}

/* カード本体 */
.related-card {
  flex: 0 0 400px;         /* 横幅を400pxに固定 */
  text-decoration: none;   /* リンク色抑制 */
  color: inherit;          /* テキストカラーを継承 */
  box-sizing: border-box;
}

.related-card__inner {
  display: flex;
  width: 400px;
  height: 150px;            /* カード高さを150pxに固定 */
  background-color: #fff; /* 薄いブルー背景 */
  border: 1px solid #7d7d7d; /* お好みで薄い枠線 */
  border-radius: 4px;        /* 角を少し丸める */
  overflow: hidden;
}

/* 左：サムネイル領域（200×150） */
.related-card__thumb {
  flex: 0 0 200px;         /* 幅200pxに固定 */
  height: 150px;           /* 高さ150pxに固定 */
  overflow: hidden;
}
.related-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 中央を切り取り */
}

/* 右：情報領域 */
.related-card__info {
  flex: 1;                 /* 残りの横幅を占有 */
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央揃え */
  box-sizing: border-box;
}

/* 店舗名 */
.related-card__name {
  font-size: 18px;
  margin: 0 0 6px;
  color: #222;
  line-height: 1.3;
}

/* ジャンル×エリア */
.related-card__taxo {
  font-size: 14px;
  margin: 0;
  color: #555;
  line-height: 1.4;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .related-stores__slider {
    gap: 12px;           /* 少し間隔を詰める */
  }
  .related-card {
    flex: 0 0 300px;     /* 幅を300pxに縮小 */
  }
  .related-card__inner {
    width: 300px;
    height: 120px;       /* 高さを120pxに縮小 */
  }
  .related-card__thumb {
    flex: 0 0 120px;     /* 画像幅を120pxに縮小 */
    height: 120px;
  }
  .related-card__thumb img {
    width: 100%;
    height: 100%;
  }
  .related-card__info {
    padding: 6px 8px;
  }
  .related-card__name {
    font-size: 16px;
  }
  .related-card__taxo {
    font-size: 12px;
  }
}

/* -----------------------------------
   「その２：親ジャンル関連店舗」ブロックを中央寄せ
   ----------------------------------- */

/* セクション全体を中央寄せするために text-align: center が効いている前提 */
.related-stores--parent {
  text-align: center !important;
  margin-top: 40px;
}

/* スライダーコンテナ自体を inline-flex にして中央寄せ */
.related-stores--parent .related-stores__slider {
  display: inline-flex !important;
  justify-content: center;
  gap: 16px;        /* カード間の余白 */
  overflow-x: auto; /* 横スクロールが要る場合はこのまま */
  padding-bottom: 8px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* カード本体を左右中央寄せさせやすくする */
.related-stores--parent .related-card {
  flex: 0 0 auto; /* 幅を固定せず、内容に合わせる */
  margin: 0 auto; /* 親の inline-flex 内で中央寄せ */
}

/* スライダー全体を中央に寄せたい場合 */
.related-stores--parent .related-stores__slider::-webkit-scrollbar {
  height: 6px;
}
.related-stores--parent .related-stores__slider::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.related-stores--parent .related-stores__slider::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}


/* ------------------------------------
   「対応サービス」セクション：見出し
   ------------------------------------ */
.supported-services-title {
  font-size: 20px;
  line-height: 1.4;
  margin: 24px auto 8px;
  text-align: center;
  color: #222;
  font-weight: bold;
  max-width: 900px;
}

/* ------------------------------------
   info-section ブロック全体を白背景に
   ------------------------------------ */
.info-section.supported-services {
  background-color: #fff;       /* 白背景 */
  border: 1px solid #e0e0e0;    /* 薄いグレー境界線 */
  border-radius: 4px;
  padding: 16px;
  margin: 0 auto 24px;
  max-width: 900px;
  box-sizing: border-box;
}

/* ------------------------------------
   対応サービステーブル
   ------------------------------------ */
.supported-services-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
}

.supported-services-table thead th {
  background-color: #f5f5f5;
  color: #333;
  font-weight: 600;
  padding: 10px;
  border: 1px solid #ddd;

}

.supported-services-table tbody td {
  border: 1px solid #ddd;
  padding: 10px;
  vertical-align: top;
}

.supported-services-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* 親ジャンルセル */
.supported-services-table .ps-parent {
  width: 100%; /* 任意の幅 */
  text-align:center
  background-color:#f5f5f5;
}

/* 子ジャンルセル */
.supported-services-table .ps-children {
  width: 100%;
  word-break: break-word;
  text-align:center/* 長い名前が折り返される */
}

/* モバイル時はテーブルを縦並びに */
@media (max-width: 767px) {
  .supported-services-table,
  .supported-services-table thead,
  .supported-services-table tbody,
  .supported-services-table th,
  .supported-services-table td,
  .supported-services-table tr {
    display: block;
    width: 100%;
  }
  .supported-services-table thead {
    display: none;
  }
  .supported-services-table .ps-parent{
   background-color:#f5f5f5;
  .supported-services-table tr {
    margin-bottom: 16px;
  }
  .supported-services-table td {
    border: none;
    padding: 8px 0;
    position: relative;
    text-align: left;
  }
  .supported-services-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: 600;
    text-align: left;
  }
}

/* --------------------------------------------------
   出張対応エリア（business-areas）テーブルスタイル
   -------------------------------------------------- */
.info-section.business-areas {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  margin: 0 auto 24px;
  max-width: 900px;
  box-sizing: border-box;
}

.info-section.business-areas h2 {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.4;
  color: #222;
  text-align: center;
}

.business-areas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  table-layout: fixed;
}

.business-areas-table th,
.business-areas-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  vertical-align: top;
}

.business-areas-table th.ba-parent {
  width: 100%;
  background-color: #f5f5f5;
  text-align: left;
  font-weight: 600;
}

.business-areas-table td.ba-children {
  width: 100%;
  word-break: break-word;
  text-align: left;
}

.business-areas-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* モバイル時：1行ずつ縦並びに */
@media (max-width: 767px) {
  .business-areas-table,
  .business-areas-table thead,
  .business-areas-table tbody,
  .business-areas-table th,
  .business-areas-table td,
  .business-areas-table tr {
    display: block;
    width: 100%;
  }
  .business-areas-table th,
  .business-areas-table td {
    padding: 8px 0;
    position: relative;
  }
  .business-areas-table tr {
    margin-bottom: 16px;
    border-bottom: 1px solid #ddd;
  }
  .business-areas-table th.ba-parent::before {
    content: "都道府県";
    font-weight: 600;
    margin-right: 4px;
  }
  .business-areas-table td.ba-children::before {
    content: "市区町村";
    font-weight: 600;
    margin-right: 4px;
  }
}

/*-----------------------------------
  アクションボタン（詳細・電話・CTA）共通スタイル
-----------------------------------*/

/* 1. .actions のレイアウト */
.actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;               
  justify-content: center; 
}

/* 2. ボタン共通スタイル */
.btn-detail,
.btn-call {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;    /* 下線を消す */
  color: #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.1s ease;
}

/* 3. ボタン固有カラー */
/* サービス詳細・ホームページボタン */
.btn-detail {
  background-color: #fff;
}
.btn-detail:hover {
  background-color: #ffff;
}

/* 電話発信ボタン */
.btn-call {
  background-color: #fff;
}
.btn-call:hover {
  background-color: #fff;
}

/* 4. アイコン部分を○で囲むスタイル */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  margin-right: 8px;
  background-color: transparent;
  flex-shrink: 0; /* テキストが長くてもアイコンが縮まらない */
}

/* アイコン文字自体のサイズ調整 */
.icon-phone,
.icon-globe {
  font-size: 16px;
  line-height: 1;
  color: #00000;
}

/* 5. テキスト部分 */
.btn-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 6. レスポンシブ対応（画面幅480px以下） */
@media (max-width: 480px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-detail,
  .btn-call {
    justify-content: center;
    width: 100%;
  }
}

/* -------------------------------------------------
   「他店舗紹介カード」全体のレイアウト
------------------------------------------------- */
.related-cards {
  margin: 40px 0;
}

.related-cards h2 {
  font-size: 1.3em;
  margin-bottom: 16px;
}

.related-cards .card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* -------------------------------------------------
   各カードのスタイル
------------------------------------------------- */
.related-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  width: calc(25% - 20px); /* 4 カラム表示を想定。必要に応じて調整 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.related-card__title {
  font-size: 1.1em;
  margin-bottom: 8px;
  color: #333;
}

.related-card__taxo {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
}

.related-card__address {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 12px;
}

.related-card__button {
  display: inline-block;
  padding: 8px 12px;
  background: #659ad2;      /* 「詳細」ボタンは青系で揃える */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background 0.3s ease;
}

.related-card__button:hover {
  background: #4f8cc9;
}

/* -------------------------------------------------
   レスポンシブ調整（幅が狭い端末向け）
------------------------------------------------- */
@media (max-width: 768px) {
  .related-card {
    width: calc(50% - 20px); /* タブレットなら2カラム */
  }
}

@media (max-width: 480px) {
  .related-card {
    width: 100%;
  }
}