/* 
  detail_common.css 
  瑞浪.comの優れたレイアウト構成・装飾素材を「ほぼパクリ」で再現しつつ、
  conoji_hpの配色（緑 #115E46, オレンジ #E4A054, 文字色 #2A2926, 背景 #FDFBF7）に完全に調和させた詳細ページ専用スタイル
*/

body {
  background-color: #FDFBF7 !important;
  color: #2A2926 !important;
  position: relative;
  overflow-x: hidden;
}

/* 短縮ヒーローヘッダー - 重複防止のため非表示 */
.subpage-hero-shop {
  display: none !important;
}

.subpage-hero-shop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(17, 94, 70, 0.4), rgba(17, 94, 70, 0.6)) !important;
  z-index: 1;
}

.subpage-hero-shop h1 {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.subpage-hero-shop .card-tag {
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
  background-color: #E4A054;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
}

/* ページ全体の装飾用アメーバシェイプ */
.decor-shape {
  position: fixed;
  z-index: -1;
  opacity: 0.15;
  pointer-events: none;
  transition: all 0.3s ease;
}

.decor-shape.shape1 {
  width: 250px;
  height: 250px;
  background-color: #115E46;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  left: -80px;
  top: 25%;
}

.decor-shape.shape2 {
  width: 350px;
  height: 350px;
  background-color: #E4A054;
  border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
  right: -120px;
  top: 45%;
}

.decor-shape.shape3 {
  width: 300px;
  height: 300px;
  background-color: #115E46;
  border-radius: 50% 50% 30% 70% / 40% 60% 50% 60%;
  left: -100px;
  bottom: 8%;
}

/* 点々ドットパターン */
.decor-dots {
  position: fixed;
  z-index: -1;
  opacity: 0.2;
  width: 80px;
  height: 140px;
  pointer-events: none;
  background-image: radial-gradient(#2A2926 2.5px, transparent 2.5px);
  background-size: 12px 12px;
}

.decor-dots.dots1 {
  left: 30px;
  top: 48%;
}

.decor-dots.dots2 {
  right: 35px;
  top: 28%;
}

/* 全体ラッパー */
.detail-outer-container {
  position: relative;
  width: 100%;
}

.detail-page-wrapper {
  max-width: 1000px;
  margin: 40px auto 0px !important; /* 下部マージンを0にしてフッターのネガティブマージンとの干渉をカット */
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow: visible !important;
  /* 子要素の100vwコンテナが左右に見切れるのを阻害しないよう可視化 */
}

/* フッターの重なりと隙間を根本解消する詳細ページ専用の上書き設定 */
.site-footer {
  margin-top: 140px !important; /* 本文とフッターの間に140pxの間隔をあけ、そこに波線を綺麗にフィットさせる */
  padding-bottom: 50px;
  position: relative !important;
  clear: both !important;
  background-color: #eae8e2 !important; /* フッターと同じベージュ背景色 */
}

.footer-wave-wrap {
  position: absolute !important;
  top: -140px !important; /* フッター要素の真上の空間（140px）にぴったり配置 */
  left: 0 !important;
  width: 100% !important;
  height: 140px !important;
  margin-top: 0 !important; /* ネガティブマージンの食い込みを無効化 */
  overflow: visible !important;
  z-index: 10 !important;
}

.footer-wave {
  position: absolute !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 140px !important;
}






/* パンくずリスト */
.breadcrumb-container {
  font-size: 13px;
  color: #706F6B;
  margin-bottom: 30px;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.breadcrumb-container a {
  color: #706F6B;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-container a:hover {
  color: #115E46;
}

/* タイトルヘッダー */
.detail-header {
  text-align: center;
  margin-bottom: 40px;
  /* コンテナの幅制限を突破してビューポート幅いっぱいに広げる */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 36px 40px 40px;
  box-sizing: border-box;
}

.detail-category-en {
  display: block;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.25em;
  color: #E4A054;
  margin-bottom: 14px;
}

.detail-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  color: #115E46;
  margin: 0 0 24px 0;
  line-height: 1.2;
  font-family: 'Zen Maru Gothic', sans-serif;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* タグバッジ */
.detail-tags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-tag-badge {
  background-color: #E4A054;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 20px;
  font-family: 'Zen Maru Gothic', sans-serif;
  box-shadow: 2px 2px 0px #2A2926;
  border: 2px solid #2A2926;
}

.detail-tag-hashtag {
  color: #115E46;
  font-size: 16px;
  font-weight: 900;
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* メインコンテンツ配置 */
.detail-main-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: visible !important;
  /* 横方向への見切れスライド表示を妨げない */
}

/* スライダーコンテナ (左右矢印の配置用) */
.detail-media-container {
  position: relative;
  width: 100% !important; /* 画面幅ではなくコンテンツ幅に収める */
  max-width: 100% !important;
  left: auto !important;
  transform: none !important;
  margin: 16px auto 0 auto !important;
  overflow: hidden !important; /* 待機画像がコンテナ両端で綺麗に切り落とされるようにする */
}



/* 画像が一枚だけの時は、複数画像のスライダーと同じサイズ（74%幅）で中央に固定配置し、はみ出さないようにする */
.detail-media-container.single-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px auto !important;
}

.detail-media-container.single-image .detail-media-section {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.detail-media-container.single-image .shop-detail-slide {
  flex: 0 0 74% !important; /* 複数枚画像のアクティブ画像と全く同じ74%サイズに固定 */
  width: 74% !important;
  margin: 0 auto !important; /* 中央に固定 */
  opacity: 1 !important;
  transform: scale(1) !important;
  border: 4px solid #2A2926 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
}

/* 1枚画像時はスライダー用の左右矢印ボタンを完全に非表示にする */
.detail-media-container.single-image .slider-arrow {
  display: none !important;
}

.detail-media-container.single-image .detail-carousel-inner {
  justify-content: center !important; /* スライド軌道全体を中央寄せ */
  transform: none !important; /* 位置ずれを強制リセット */
}



.detail-media-section {
  width: 100%;
  overflow: visible !important;
  height: auto;
  background-color: transparent;
  position: relative;
}


.detail-carousel-inner {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
  transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1); /* 少し軽快で滑らかなイージングに変更 */
  will-change: transform;
}

.shop-detail-slide {
  flex: 0 0 74% !important; /* 横幅を55%から74%へ大きく拡張 */
  width: 74% !important;

  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  box-sizing: border-box;
  padding: 0 !important; /* 枠の内側の余白を取り除き、画像を枠線のサイズぴったりに広げる */
  margin: 0 20px !important;
  opacity: 0.5 !important;
  transform: scale(0.85) !important;
  transition: transform 0.48s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.48s ease, z-index 0.48s !important;
  z-index: 1 !important;
  position: relative !important;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important; /* LPと同じ不規則な手書き風の歪み */
  overflow: hidden;
  will-change: transform, opacity; /* GPUアクセラレーション（GPUレンダリング）を強制 */
  backface-visibility: hidden; /* チラつきやカクつきを防止 */
  transform-style: preserve-3d; /* Safari等でのアニメーションを最適化 */

  border: 4px solid #2A2926 !important;
  background-color: #ffffff !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* 偶数番目のスライドは歪みの向きを逆にして手書き感を引き立てる */
.shop-detail-slide:nth-child(even) {
  border-radius: 15px 255px 15px 225px/225px 15px 255px 15px !important;
}

.shop-detail-slide.active {
  opacity: 1 !important;
  transform: scale(1) !important;
  /* 正面で100%サイズ表示 */
  z-index: 5 !important;
}



.shop-detail-slide img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important; /* 基本は枠いっぱいに綺麗にカバー表示 */
  border-radius: 0 !important;
  border: none;
  background-color: #ffffff !important; /* 縦長画像が入った場合の背景（余白）を白にする */
}

/* 縦長画像専用クラス：無理にズーム（カバー）せず、枠内に全体をきれいに収める（contain） */
.shop-detail-slide img.portrait-img {
  object-fit: contain !important;
}



/* スライダー左右矢印 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: transparent !important;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 300;
  color: #2A2926 !important;
  cursor: pointer;
  z-index: 10;
  box-shadow: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.slider-arrow:hover {
  opacity: 0.7;
}

.slider-arrow:active {
  transform: translateY(-50%) scale(0.9);
}

.slider-arrow.prev {
  left: calc(50% - 40.5%); /* 74%幅の中央画像のアウトサイド左側に綺麗に配置 */
}

.slider-arrow.next {
  right: calc(50% - 40.5%); /* 74%幅の中央画像のアウトサイド右側に綺麗に配置 */
}


/* サムネイルリスト */
.detail-slider-thumbnails {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 0;
}

.thumbnail-item {
  width: 70px;
  height: 50px;
  border-radius: 4px;
  border: 2px solid #2A2926 !important;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background-color: #ffffff;
}

.thumbnail-item.active {
  border-color: #115E46 !important;
  border-width: 3px !important;
  transform: scale(1.08);
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* POINT! ボックス（紹介文） */
.detail-point-box {
  background-color: #ffffff;
  border: 3px solid #2A2926;
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 12px 32px rgba(42, 41, 38, 0.04);
  position: relative;
  margin-top: 40px; /* ボックスの上に余白を作り、上に被るタイトル分のスペースを確保 */
}


/* 白抜き黒縁のアウトライン文字 */
.info-section-title,
.share-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  color: #ffffff;
  -webkit-text-stroke: 2px #2A2926;
  text-shadow: 2.5px 2.5px 0px #2A2926;
}

.point-box-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 42px; /* 少し大きめに調整 */
  letter-spacing: 0.05em;
  color: #ffffff;
  -webkit-text-stroke: 2.2px #2A2926; /* 少し太いアウトライン */
  text-shadow: 3px 3px 0px #2A2926;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* 左右中央に完全に重ねる */
  background-color: #FDFBF7; /* 枠線を白抜き */
  padding: 0 20px;
  margin: 0;
  white-space: nowrap;
  z-index: 10;
}



.point-box-text {
  font-size: 16px;
  line-height: 1.8;
  color: #2A2926;
  margin: 0;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
}

/* INFORMATION 基本情報 */
.detail-info-section {
  margin-top: 10px;
}

.info-section-title {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.info-section-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #2A2926;
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing: 0;
}

/* 基本情報セクションのフレックスボックス風テーブル構成 */
.detail-info-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #ffffff;
  border: 3px solid #2A2926;
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 各行の表現 */
.detail-info-table tr {
  display: flex;
  width: 100%;
  border-bottom: 2px solid #2A2926;
  margin: 0;
  padding: 0;
}

.detail-info-table tr:last-child {
  border-bottom: none;
}

/* 偶数行のみ背景色を少しグレーにして視認性（ゼブラ柄）を向上 */
.detail-info-table tr:nth-child(even) td {
  background-color: #F8F7F4;
}

.detail-info-table tr:nth-child(even) th {
  background-color: rgba(17, 94, 70, 0.08);
}

/* タイトル列（thの代わり） */
.detail-info-table th {
  display: flex;
  align-items: center;
  width: 25%;
  min-width: 120px;
  background-color: rgba(17, 94, 70, 0.04);
  color: #115E46;
  font-weight: 700;
  text-align: left;
  padding: 20px;
  font-size: 15px;
  border-right: 2px solid #2A2926;
  border-bottom: none;
  font-family: 'Zen Maru Gothic', sans-serif;
  box-sizing: border-box;
}

/* 内容列（tdの代わり） */
.detail-info-table td {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #2A2926;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  background-color: #ffffff;
  border-bottom: none;
  box-sizing: border-box;
}

.detail-info-table td a {
  color: #115E46;
  text-decoration: underline;
  font-weight: 700;
}

.detail-info-table td a:hover {
  color: #E4A054;
}

/* Googleマップエリア */
.detail-map-wrapper {
  width: 100%;
  height: 350px;
  border-radius: 24px;
  border: 3px solid #2A2926;
  overflow: hidden;
  margin-top: 24px;
  box-shadow: 0 12px 32px rgba(42, 41, 38, 0.04);
}

.detail-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* カスタムHTMLスペース */
.shop-custom-html-wrapper {
  width: 100%;
  margin-top: 30px;
  box-sizing: border-box;
}

.shop-custom-html-wrapper iframe {
  width: 100%;
  max-width: 100%;
  border: none;
}

/* SHARE シェアする */
.detail-share-section {
  text-align: center;
  margin-top: 20px;
}

.share-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}

.share-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #2A2926;
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing: 0;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.share-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* アイコンと文字の隙間 */
  width: 170px; /* 少し幅を広げてゆったりさせる */
  padding: 12px 0;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  font-family: 'Zen Maru Gothic', sans-serif;
  border: 2px solid #2A2926;
  box-shadow: 3px 3px 0px #2A2926; /* 手書き風の立体影を追加 */
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.share-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* メインボタン：緑色の塗りつぶし */
.share-btn.native-share {
  background-color: #115E46;
  color: #ffffff;
  cursor: pointer;
}

.share-btn.native-share:hover {
  background-color: #0d4a37;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px #2A2926;
}

/* サブボタン：白のアウトライン */
.share-btn.copy-link {
  background-color: #ffffff;
  color: #2A2926;
  cursor: pointer;
}

.share-btn.copy-link:hover {
  background-color: #FDFBF7;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px #2A2926;
}


/* コピー完了時のトースト表示通知 */
.copy-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #2A2926;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Zen Maru Gothic', sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
  pointer-events: none;
}

.copy-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* 一覧へ戻るボタン */
.detail-back-button-container {
  text-align: center;
  margin-top: 60px; /* 前の要素（SHARE）との間を広げる */
  margin-bottom: 20px;
}


.detail-back-btn {
  display: inline-block;
  background-color: #115E46;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 60px;
  border-radius: 30px;
  text-decoration: none;
  border: 2px solid #2A2926;
  box-shadow: 4px 4px 0px #2A2926;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  font-family: 'Zen Maru Gothic', sans-serif;
}

.detail-back-btn:hover {
  background-color: #0a4331;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #2A2926;
}

/* スマホ表示向けの最適化 */
@media (max-width: 767px) {

  .decor-shape,
  .decor-dots {
    display: none !important;
  }

  .detail-page-wrapper {
    margin: 20px auto 0px !important; /* モバイルも下部マージンを0にしてめり込み競合をリセット */
    padding: 0 16px;
    overflow: visible !important;
  }





  .breadcrumb-container {
    margin-bottom: 20px;
  }

  .detail-title {
    font-size: clamp(22px, 6vw, 36px);
    margin-bottom: 20px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .detail-media-container {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 16px;
    margin-bottom: 8px;
    overflow: visible !important;
  }


  /* モバイル時の1枚のみ画像コンテナの調整 */
  .detail-media-container.single-image {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
    margin: 16px auto !important;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .detail-media-container.single-image .detail-media-section {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .detail-media-container.single-image .shop-detail-slide {
    flex: 0 0 90% !important; /* スマホの複数枚画像と同じ90%幅に揃える */
    width: 90% !important;
    margin: 0 auto !important; /* 中央固定 */
    opacity: 1 !important;
    transform: scale(1) !important;
  }


  /* スマホの1枚画像でも矢印ボタンを完全に消去 */
  .detail-media-container.single-image .slider-arrow {
    display: none !important;
  }


  .detail-media-section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    border: none;
    border-radius: 0;
    overflow: visible !important;
  }

  .shop-detail-slide {
    flex: 0 0 90% !important; /* スマホ時の画像横幅を80%から90%へ拡大（左右に5%ずつの余白が残り、画面いっぱいに近く綺麗に表示される） */
    width: 90% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 8px !important;
    padding: 0;
    border: 3px solid #2A2926 !important;
    border-radius: 16px;
    overflow: hidden;
  }

  .shop-detail-slide img {
    border-radius: 0 !important; /* 親の手書き風枠線の形状にマスクさせる */
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border: none;
    background-color: #ffffff !important;
  }

  .shop-detail-slide img.portrait-img {
    object-fit: contain !important;
  }



  /* スマホでの矢印位置を安全なインサイド寄りに調整 */
  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 24px;
    box-shadow: none !important;
  }

  .slider-arrow:active {
    transform: translateY(-50%) scale(0.9);
  }

  .slider-arrow.prev {
    left: 15px;
  }

  .slider-arrow.next {
    right: 15px;
  }

  .detail-slider-thumbnails {
    margin-top: 8px;
    margin-bottom: 0;
    gap: 6px;
  }

  .thumbnail-item {
    width: 50px;
    height: 36px;
    border-width: 1.5px;
  }

  .thumbnail-item.active {
    border-width: 2px;
  }

  .detail-point-box {
    border-radius: 16px;
    padding: 36px 20px 24px 20px !important; /* タイトル分の高さを上に少し確保 */
    border-width: 2px;
    position: relative !important;
    margin-top: 52px !important; /* タイトルがさらに大きくなったためマージンを広げる */
  }

  .point-box-title {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 中央に重ねる */
    background-color: #FDFBF7 !important; /* 背景色と同じ色で枠線を白抜き */
    padding: 0 18px !important; /* 左右に少し余白を入れて枠線と文字を離す */
    margin: 0 !important;
    font-size: 38px !important; /* タイトル文字をさらに大きく（32pxから38pxに変更） */
    white-space: nowrap !important;
    -webkit-text-stroke: 2px #2A2926 !important; /* 文字拡大に合わせて縁取りも太く */
    text-shadow: 2.2px 2.2px 0px #2A2926 !important;
    z-index: 10 !important;
  }



  .info-section-title,
  .share-title {
    font-size: 28px;
    -webkit-text-stroke: 1.5px #2A2926;
    text-shadow: 1.5px 1.5px 0px #2A2926;
  }


  .detail-info-table {
    border-radius: 12px;
    border: 2px solid #2A2926;
  }

  .detail-info-table tr {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    border-bottom: 1.5px solid #2A2926;
  }

  .detail-info-table tr:last-child {
    border-bottom: none;
  }

  .detail-info-table th {
    display: flex !important;
    align-items: center !important;
    width: 32% !important; /* スマホ画面向けに見出し幅を少し確保 */
    min-width: auto !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
    border-right: 1.5px solid #2A2926 !important;
    border-bottom: none !important;
    background-color: rgba(17, 94, 70, 0.04);
  }

  .detail-info-table td {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-bottom: none !important;
    word-break: break-all !important; /* 長いURLが来た時に途中で改行させ、縦長に伸びるのを防ぐ */
    overflow-wrap: break-word !important;
  }

  .detail-info-table td a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }



  .detail-map-wrapper {
    height: 250px;
    border-radius: 16px;
    border-width: 2px;
    margin-top: 16px;
  }

  .shop-custom-html-wrapper {
    margin-top: 20px;
  }

  .share-buttons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* 横並びをキープ */
    gap: 12px !important;
    margin-bottom: 20px;
  }

  .share-btn {
    width: 135px !important; /* スマホ向けに横幅を小さくする */
    padding: 8px 0 !important; /* 上下余白を小さく */
    font-size: 12.5px !important; /* 文字を小さく */
    gap: 6px !important;
    border-radius: 20px !important;
    box-shadow: 2px 2px 0px #2A2926 !important;
  }

  .share-btn svg {
    width: 14px !important;
    height: 14px !important;
  }


  .detail-back-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 0;
    box-shadow: 3px 3px 0px #2A2926;
  }
}