@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 1. 固定ページ内のヘアスタイルカードの投稿タイトルを非表示 */
.page .hairstyle-card .entry-title {
  display: none !important;
}

/* 2. ヘアスタイル一覧グリッド表示 */
.hairstyle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* 3. ヘアスタイルカード共通 */
.hairstyle-card {
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

/* 4. ヘアスタイル画像 */
.hairstyle-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

/* 5. ホバー時の拡大アニメーション */
.hairstyle-card img:hover {
  transform: scale(1.05);
}

/* 6. 単一ヘアスタイル投稿ページのタイトル非表示 */
.single-hairstyle .entry-title {
  display: none !important;
}

/* 7. 特定ページのヘッダー非表示 */
.page-id-135 .header,
.page-id-92 .header,
.page-id-100 .header,
.page-id-153 .header {
  display: none !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .hairstyle-card {
    width: 100%;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .hairstyle-card {
    width: 100%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /* 特別な透かし表示は削除済みのため、ここに指定なし */
}
/* PC（1024px以上）で画像の最大幅を制限 */
@media screen and (min-width: 1024px) {
  .hairstyle-card {
    max-width: 250px; /* カード全体の最大幅 */
    margin: 0 auto;   /* 中央寄せ */
  }

  .hairstyle-card img {
    height: 180px;    /* 少し小さめに */
  }
}