/*
 * shop-pages.css
 * 道楽箱 / とれじゃらす / 買取りまっくす 共通スタイル
 * 読み込み：各HTMLの先頭で
 *   <link rel="stylesheet" href="/wp/wp-content/themes/philidge-theme/assets/css/shop-pages.css">
 */

/* ─── ラッパー ─── */
.ph-wrap {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  color: #333;
}

/* .entry-content p の margin-bottom を打ち消す */
.ph-wrap p { margin-bottom: 0; }


/* ─── ブランドヘッダー ─── */
.ph-brand {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 4px solid #dd9933;
  border-radius: 10px;
  padding: 1.8rem 2.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ph-brand__logo { flex-shrink: 0; width: 180px; text-align: center; }
.ph-brand__logo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.ph-brand__body { flex: 1; }
.ph-brand__en {
  font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
  color: #dd9933; font-weight: 700; display: block; margin-bottom: .3rem;
}
.ph-brand__name {
  font-size: 1.6rem; font-weight: 700; color: #222;
  margin: 0 0 .6rem; line-height: 1.2;
}
.ph-brand__desc {
  font-size: .88rem; color: #555; line-height: 1.9; margin: 0 0 1rem;
}
.ph-brand__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.ph-brand__btn {
  display: inline-block; padding: .5em 1.4em; border-radius: 5px;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  background: #dd9933; color: #fff; border: 2px solid #dd9933;
  transition: background .18s, border-color .18s;
}
.ph-brand__btn:hover {
  background: #b87d20; border-color: #b87d20; color: #fff; text-decoration: none;
}


/* ─── タグピル ─── */
.ph-tag {
  display: inline-block; padding: .2em .7em; border-radius: 12px;
  font-size: .68rem; font-weight: 600;
  background: #fff6e0; color: #b87d20; border: 1px solid #f0d080;
}


/* ─── エリア見出し ─── */
.ph-area { margin-bottom: 2rem; }
.ph-area__head {
  display: flex; align-items: center; gap: .8rem;
  background: #f7f7f7; border-radius: 8px;
  padding: .75rem 1.1rem; margin-bottom: 1rem;
}
.ph-area__badge {
  display: inline-block; padding: .2em .9em; border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; flex-shrink: 0; background: #dd9933;
}
.ph-area__badge--gray { background: #888; }
.ph-area__badge--red  { background: #c0392b; }
.ph-area__name  { font-size: .95rem; font-weight: 700; color: #333; margin: 0; }
.ph-area__count { margin-left: auto; font-size: .75rem; color: #999; }
.ph-area__count strong { font-size: 1.05rem; font-weight: 700; color: #dd9933; }


/* ─── 3カラムグリッド ─── */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }


/* ─── 店舗カード ─── */
.ph-card {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 5px rgba(0,0,0,.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ph-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-3px);
}

/* 画像 */
.ph-card__img { display: block; overflow: hidden; background: #f5f0e6; }
.ph-card__img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  display: block; transition: transform .3s ease;
}
.ph-card:hover .ph-card__img img { transform: scale(1.05); }

/* 本文エリア */
.ph-card__body { padding: .85rem .95rem; flex: 1; display: flex; flex-direction: column; }

/* バッジ */
.ph-badge {
  display: inline-block; padding: .1em .55em; border-radius: 3px;
  font-size: .6rem; font-weight: 700;
  margin-bottom: .35rem; align-self: flex-start;
  background: #dd9933; color: #fff;
}
.ph-badge--gray { background: #888;    color: #fff; }
.ph-badge--new  { background: #c0392b; color: #fff; }
.ph-badge--tcg  { background: #2980b9; color: #fff; }
.ph-badge--girls{ background: #c0607c; color: #fff; }
.ph-badge--flag { background: #dd9933; color: #fff; }

/* テキスト */
.ph-card__name {
  font-size: .85rem; font-weight: 700; color: #222;
  margin: 0 0 .4rem; line-height: 1.35;
}
.ph-card__addr {
  font-size: .72rem; color: #666; line-height: 1.65; margin: 0 0 .3rem; flex: 1;
}
.ph-card__tel  { font-size: .72rem; color: #666; margin: 0 0 .4rem; }
.ph-card__tel a { color: #555; text-decoration: none; }
.ph-card__tel a:hover { color: #dd9933; }

/* ジャンルタグ */
.ph-genre { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 .5rem; }
.ph-genre__tag {
  display: inline-block; padding: .15em .6em; border-radius: 4px;
  font-size: .68rem; font-weight: 600;
  background: #f5f5f5; color: #555; border: 1px solid #e0e0e0;
}

/* MAPリンク */
.ph-map-link {
  display: inline-block; font-size: .68rem; color: #dd9933;
  text-decoration: none; border-bottom: 1px solid #f0d080;
  transition: color .15s;
}
.ph-map-link:hover { color: #b87d20; text-decoration: none; }


/* ─── 注意書き ─── */
.ph-note {
  background: #f7f7f7; border-radius: 8px;
  padding: 1rem 1.3rem; font-size: .8rem; color: #666;
  line-height: 1.9; margin-top: 1rem;
}
.ph-note a { color: #dd9933; }


/* ─── レスポンシブ ─── */
@media (max-width: 700px) {
  .ph-brand { flex-direction: column; text-align: center; gap: 1rem; }
  .ph-brand__logo { width: 130px; }
  .ph-brand__tags { justify-content: center; }
  .ph-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .ph-grid { grid-template-columns: 1fr; }
}