/*
Theme Name: GENSEN child
Theme URI:https://tcd-theme.com/tcd050
Description:WordPressテーマ「GENSEN」の子テーマ
Template:gensen_tcd050
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/

/* 一覧ページのアイキャッチだけトリミングしない */
.archive .post-thumbnail img,
.search .post-thumbnail img {
  object-fit: contain !important;
  background-color: #7faf9b; /* 余白が出た時の背景色（画像に合わせて） */
}

/* restaurant 一覧ページの画像キャンバス */
.post-type-archive-restaurant #introduce_list .image {
  background-color: #7faf9b; /* 余白色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像は必ず収める */
.post-type-archive-restaurant #introduce_list .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ページタイトルの余白調整 */
.single-introduce #article #post_title{
    margin-top: 20px;
	margin-bottom: 25px;
  }

/* レストランページ */
.restaurant-summary {
  margin: 0.8rem 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

@media (max-width: 768px){
  .restaurant-summary {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }
}

.restaurant-info {
  margin-top: 2.5rem;
}

.restaurant-info__title{
  font-size: 1.2rem;
  margin: 0 0 0.8rem;
}

.restaurant-info__table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,.08);
}

.restaurant-info__table th,
.restaurant-info__table td{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}

.restaurant-info__table th{
  width: 28%;
  background: rgba(0,0,0,.03);
  font-weight: 600;
}

/* 店舗情報：注意書き */
.post_content .restaurant-info__note {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.45;   /* ← ここが効く */
  color: #777;
}

.restaurant-links{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-right: 5px;
}

/* 最後のリンクだけ余白を消す */
.restaurant-links:last-child{
  margin-right: 0;
}

/* 予約バナー（ホットペッパー・食べログ）横並び＆間隔 */
.reserve-banners,
.restaurant-links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* 5px間隔（gapが効かない環境対策でmargin方式） */
.reserve-banners > a,
.restaurant-links > a {
  display: inline-flex !important;
  margin-right: 5px !important;
}

/* 最後だけ余白なし */
.reserve-banners > a:last-child,
.restaurant-links > a:last-child {
  margin-right: 0 !important;
}

/* 画像の変な余白/枠線対策 */
.reserve-banners img,
.restaurant-links img {
  display: block !important;
  border: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

.reserve-banner img{
  display: block;
  width: 234px;   /* 画像サイズに合わせる */
  height: auto;
  max-width: 100%;
}

.restaurant-links { 
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

/* 予約バナー：共通 */
.reserve-banners{
  display: flex;
  flex-wrap: wrap;
}

/* スマホ：2列 + 余白 */
@media (max-width: 768px){
  .reserve-banners{
    gap: 6px;                 /* バナー間の余白 */
  }

  .reserve-banners .reserve-banner{
    width: calc(50% - 3px);   /* 2列 */
    display: block;
  }

  .reserve-banners .reserve-banner img{
    width: 100%;
    height: 44px;             /* 高さを揃える */
    object-fit: contain;      /* はみ出さず縮小 */
    display: block;           /* img下の謎余白対策 */
  }
}

/* ============================
   レストラン詳細（SP）
   表組み維持
   ============================ */
@media (max-width: 768px){

  .restaurant-info__table{
    width: 100%;
    table-layout: fixed;   /* ★最重要 */
  }

  .restaurant-info__table th{
    width: 32%;            /* SPでは少し広め */
    min-width: 0;
    white-space: normal;  /* 折返しOK */
  }

  .restaurant-info__table td{
    width: auto;
    min-width: 0;

    /* 長文・URL・英数字を必ず折る */
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}