/*
Theme Name: FAMOUS Child
Template: famous_tcd064
*/

@import url("../famous_tcd064/style.css");

/* ショップリスト全体 */
.shoplist {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.shoplist-header {
  text-align: center;
  margin-bottom: 40px;
}

.shoplist-description {
  margin-top: 10px;
  color: #555;
}

/* カテゴリリスト */
.shoplist-category ul.shoplist-cat-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
}

.shoplist-cat-list li {
  background: #eee;
  padding: 5px 15px;
  border-radius: 20px;
}

/* グリッド表示 */
.shoplist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.shoplist-item {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: 0.3s;
}

.shoplist-item:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* サムネイル画像 */
.shoplist-thumb {
  background-color: #f2f2f2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.shoplist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトルとカテゴリ */
.shoplist-title {
  font-weight: bold;
  font-size: 1rem;
  margin-top: 8px;
}

.shoplist-category-name {
  font-size: 0.875rem;
  color: #666;
  margin-top: 4px;
}

/* パンくず非表示 */
.breadcrumb, .breadcrumb-wrapper {
  display: none;
}

/* ギャラリーセクション余白対策 */
.p-works-archive-gallery {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}






/* works-archive-gallery 用グリッドレイアウト */
.p-works-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* ギャラリーアイテム */
.p-works-gallery__item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* サムネイル */
.p-works-gallery__thumbnail {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.p-works-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* キャプション */
.p-works-gallery__caption {
  font-size: 1.2rem;
  margin-top: 0.8rem;
  font-weight: bold;
  line-height: 1.4;
}

/* カテゴリ表示 */
.p-works-gallery__category {
  font-size: 0.9rem;
  color: #999;
  margin-top: 0.4rem;
}

/* ギャラリー全体のグリッドレイアウト：3列（スマホで2列） */
.custom-works-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* 各アイテム */
.custom-works-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* サムネイル画像 */
.custom-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.custom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル */
.custom-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 0.8rem;
}

/* カテゴリ */
.custom-category {
  font-size: 0.9rem;
  color: #888;
  margin-top: 0.4rem;
}





/* === SPメニューのボタンから枠線を外す === */
.sp-grid-menu__btn,
.sp-grid-menu--sub__btn {
  border: none !important;
}

/* === SPメニューエリア背景 === */
.sp-grid-menu,
.sp-grid-menu--sub {
  background-color: #d6b064 !important;
  background-image: none !important;
}

/* === ボタン通常時 === */
.sp-grid-menu__btn,
.sp-grid-menu--sub__btn {
  background-color: transparent !important; /* 背景透明 */
  border: none !important;                 /* 枠線なし */
  color: #fffff4 !important;               /* きなり文字 */
  text-decoration: none;                   /* 下線なし */
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* === ボタン hover時 === */
.sp-grid-menu__btn:hover,
.sp-grid-menu--sub__btn:hover {
  color: #e6c884 !important;   /* 少し明るいゴールドに */
  text-decoration: underline;  /* 下線を表示 */
}











/* ===== SHOP LIST（固定ページ）だけ、サムネを常時表示に強制 ===== */
.page-template-page-shop-list .p-works-gallery__thumbnail,
.page-template-page-shop-list .p-works-gallery__thumbnail img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* hoverエフェクトの疑似要素や暗幕があれば無効化 */
.page-template-page-shop-list .p-hover-effect__image::before,
.page-template-page-shop-list .p-hover-effect__image::after {
  content: none !important;
}

/* 念のため枠のサイズも確保 */
.page-template-page-shop-list .p-works-gallery__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.page-template-page-shop-list .p-works-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* トップページ限定：ギャラリー本体を非表示（カテゴリは残す） */
.home .p-cb__item--works .p-works-gallery {
  display: none !important;
}
/* 余計な隙間が出る場合の微調整（任意） */
.home .p-cb__item--works .p-works-archive-gallery {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* トップページタイトルのフェードイン速度を短縮 */
.p-page-header__title,
.p-cb__item-headline {
  transition-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}

/* ========== SHOP LIST（固定ページ）用 レイアウト ========== */
/* Grid：PC最大3列、タブレット2列、SP1列 */
.custom-works-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .custom-works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .custom-works-grid { grid-template-columns: 1fr; }
}

/* 画像：正方形表示 */
.custom-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.custom-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル＆カテゴリ（常時表示） */
.custom-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 10px;
  line-height: 1.45;
  text-align: center;
}
.custom-category {
  font-size: .9rem;
  color: #666;
  margin-top: 6px;
  text-align: center;
}

/* 親テーマのホバー演出を抑制（このページだけ） */
.page-template-page-shop-list .p-hover-effect__image::before,
.page-template-page-shop-list .p-hover-effect__image::after {
  content: none !important;
}
.page-template-page-shop-list .p-works-gallery__item .p-works-gallery__caption {
  display: none !important; /* 既存のキャプションレイヤーは非表示 */
}

/* 余白最適化（必要に応じて） */
.page-template-page-shop-list .p-works-archive-gallery {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* SHOP LIST 固定ページで、ギャラリー画像を強制表示 */
.page-template-page-shop-list .p-works-gallery__thumbnail,
.page-template-page-shop-list .p-works-gallery__thumbnail img,
.page-template-page-shop-list .p-hover-effect__image,
.page-template-page-shop-list .p-hover-effect__image img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* 念のためサイズを確保（親テーマが高さ0にしているケース向け） */
.page-template-page-shop-list .p-works-gallery__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.page-template-page-shop-list .p-works-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== SHOP LIST 固定ページだけ、透明オーバーレイを無効化 ===== */
.page-template-page-shop-list .p-works-gallery__item a {
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  z-index: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

/* hover 用の暗幕やトランジションを殺す（必要最低限） */
.page-template-page-shop-list .p-hover-effect__image::before,
.page-template-page-shop-list .p-hover-effect__image::after {
  content: none !important;
}
.page-template-page-shop-list .p-hover-effect__image img {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* サムネは1:1でOK（任意） */
.page-template-page-shop-list .p-works-gallery__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.page-template-page-shop-list .p-works-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3列グリッド（1024px以下で2列、600px以下で1列） */
.page-template-page-shop-list .p-works-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) {
  .page-template-page-shop-list .p-works-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .page-template-page-shop-list .p-works-gallery {
    grid-template-columns: 1fr;
  }
}

/* タイトルとカテゴリを下に表示（見栄え調整。必要なら） */
.page-template-page-shop-list .p-works-gallery__item {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.page-template-page-shop-list .p-works-gallery__caption {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.6rem 0 0.2rem;
}
.page-template-page-shop-list .p-works-gallery__category {
  font-size: .9rem;
  color: #666;
}

/* ==== /shop-list/ の各カード内で、タイトル/カテゴリ用の高さを確保 ==== */
.page-template-page-shop-list .p-works-gallery__item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* サムネは1:1、下のテキストと十分に離す */
.page-template-page-shop-list .p-works-gallery__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 10px; /* ←サムネ下に余白 */
}
.page-template-page-shop-list .p-works-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトルは2行ぶん確保（幅に応じて折り返しOK） */
.page-template-page-shop-list .p-works-gallery__caption {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: calc(1.4em * 2); /* 2行ぶんの高さを常時確保 */
  margin: 4px 0 2px;
}

/* カテゴリ表示も行高を確保 */
.page-template-page-shop-list .p-works-gallery__category {
  font-size: .9rem;
  color: #666;
  line-height: 1.35;
  min-height: 1.35em;       /* 1行ぶんの高さを常時確保 */
  margin-bottom: 6px;       /* カード下の余裕 */
}

/* グリッド（PC3列 / タブ2列 / SP1列） */
.page-template-page-shop-list .p-works-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) {
  .page-template-page-shop-list .p-works-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .page-template-page-shop-list .p-works-gallery {
    grid-template-columns: 1fr;
  }
}





/* === トップページのファーストビューのSPでの動画表示変更 === */
@media only screen and (max-width: 930px) {
  .p-index-video, .p-index-video.is-mobile {
    height: auto;
    min-height: unset;
    aspect-ratio: 1280 / 720;
  }
}

/* ===== TOPだけ：CB見出しなどのフェードを完全オフ ===== */
.home .p-cb__item,
.home .p-cb__item-inner,
.home .p-cb__item-headline,
.home .p-cb__item-desc,
.home .p-index-archive,
.home .p-index-about__images,
.home .p-index-carousel,
.home .p-works-archive-gallery,
.home .p-works-gallery,
.home .u-fade,
.home .u-fade--up,
.home .u-fade--in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 念のため：親テーマの“is-active”待ちを無視して常時表示 */
.home .p-cb__item:not(.is-active),
.home .p-page-header:not(.is-active),
.home [data-appear],
.home .js-appear {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* === shop-listの見出し位置調整 === */
.page-template-page-shop-list .p-works-gallery {
  scroll-margin-top: 80px;
}

.page-template-page-shop-list .p-works-gallery__item {
  width: 100%;
}

.page-template-page-shop-list .p-works-gallery__thumbnail {
  background-color: #d6b064;
}

.page-template-page-shop-list .p-works-gallery__thumbnail img {
  margin-left: 0 !important;
}

.page-template-page-shop-list .p-works-gallery__item .p-works-gallery__caption {
  display: block !important;
  transform: translateY(-100%);
}

.page-template-page-shop-list .p-works-gallery__item .p-works-gallery__caption .p-works-gallery__terms {
  display: block;
  margin-top:.25em;
  font-size: .85em;
}

/* 投稿ページのパンくずで、カテゴリ項目（3番目）を非表示にする */
.single .p-breadcrumb__inner .p-breadcrumb__item:nth-child(3),
.single .c-breadcrumb__inner .c-breadcrumb__item:nth-child(3) {
  display: none !important;
}


/* PCだけ：メインとフッターの間の余白をリセット */
@media (min-width: 769px) {
  /* よくあるメイン領域の候補を一気にゼロ化（あなたのテーマのクラスに合わせて残してください） */
  main,
  .site-main,
  .content,
  .content-area,
  .l-main,
  .wrapper-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* フッター側に余白が付いている場合 */
  footer,
  .site-footer,
  .l-footer {
    margin-top: 0 !important;
  }

  /* 記事/固定ページ本文の「最後の要素だけ余白」対策 */
  .entry-content > *:last-child,
  .post > *:last-child,
  .page > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Gutenberg Spacer が犯人のとき（PCのみ無効化） */
  .wp-block-spacer {
    display: none !important;
    height: 0 !important;
  }
}