/* --------------------------------------------------------------
 * Theme Name:   Vogue Child
 * Theme URI:    https://www.shion-kumiko.com/
 * Description:  子テーマ（VOGUE TCD051 用）
 * Author:       Shimizu / Tosei Trading
 * Template:     vogue_tcd051
 * Version:      1.0
 * -------------------------------------------------------------- */

/* --------------------------------------------------------------
 * 子テーマ専用CSS
 * -------------------------------------------------------------- */


/* ==============================================================
   カラーバリアブル
   ============================================================== */
:root {
  --q-black: #111827;  /* 先頭ボタンの背景色 */
  --q-gray:  #b7b7b7;  /* 2つ目以降の背景色 */
  --q-hover: #004353;  /* ホバー時の背景色 */
  --q-white: #ffffff;  /* 文字色 */
}


/* ==============================================================
   カテゴリーボタン帯
   ============================================================== */
.q_button_container {
  width: 100%;
  flex: 0 0 100% !important;
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 4px;
  padding: 4px 0 8px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  box-sizing: border-box;
}




/* ==============================================================
   WORKS：カテゴリーボタン群 統一デザイン＋ホバー効果
   ============================================================== */

.q_button_container .q_btn {
  --q-btn-h: 32px;
  height: var(--q-btn-h) !important;
  min-height: var(--q-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 18px !important;
  padding-block: 0 !important;
  background-color: #b7b7b7;  /* 全ボタン灰色 */
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: var(--q-btn-h);
  letter-spacing: 0.02em;
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ホバー時 */
.q_button_container .q_btn:hover {
  background-color: #004353;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* アクティブ（現在のカテゴリ） */
.q_button_container .q_btn.is-active,
.q_button_container .q_btn[aria-current="page"] {
  background-color: #111827 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}


/* モバイル調整 */
@media (max-width: 600px) {
  .q_button_container .q_btn {
    --q-btn-h: 28px;
    font-size: 12px;
    padding-inline: 10px !important;
  }
}


/* ==============================================================
   WORKS：ALLボタン（/works/）閲覧中は黒固定
   ============================================================== */
/* まず ALL を既定でグレーに戻す（リセット） */
.q_button_container .q_btn.first {
  background-color: #b7b7b7 !important;
  color: #ffffff !important;
}

/* /works/ の時だけ ALL を黒固定（複数クラスに対応） */
body.post-type-archive-works .q_button_container .q_btn.first,
body.archive.post-type-archive-works .q_button_container .q_btn.first,
body.is-works-archive:not(.tax-works_cat):not(.is-works-single) .q_button_container .q_btn.first {
  background-color: #111827 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* カテゴリーページや個別では ALL を必ずグレーに */
body.tax-works_cat .q_button_container .q_btn.first,
body.is-works-single .q_button_container .q_btn.first {
  background-color: #b7b7b7 !important;
  color: #ffffff !important;
}



/* --- Responsive --- */
@media (max-width: 1024px) {
  .q_button_container {
    column-gap: 6px;
    row-gap: 5px;
  }
  .q_button_container .q_btn {
    padding: 3px 8px;
    font-size: 12.5px;
    min-height: 28px;
  }
}

@media (max-width: 600px) {
  .q_button_container {
    column-gap: 4px;
    row-gap: 4px;
  }
  .q_button_container .q_btn {
    padding: 3px 6px;
    font-size: 12px;
    min-height: 26px;
  }
}


/* ==============================================================
   画像＆縦リボン（一覧カード共通）
   ============================================================== */

/* --- サムネイル構造 --- */
.p-article01__thumbnail,
.p-article01__thumbnail a,
.p-article01__thumbnail figure {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.p-article01__thumbnail img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- 画像コンテナ --- */
.image-container {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
}

.image-container > a {
  display: block;
}

/* --- メイン画像 --- */
.main-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
}

.image-container:hover .main-image {
  transform: scale(1.07);
  filter: brightness(1.15);
}

/* --- NO IMAGE プレースホルダー --- */
.image--placeholder {
  aspect-ratio: 16/9;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image--placeholder .noimg {
  font-size: 22px;
  color: #9ca3af;
  letter-spacing: .02em;
}


/* ==============================================================
   縦リボン（overlay-button）
   ============================================================== */
.overlay-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #111827;
  color: #fff;
  padding: 6px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-bottom-right-radius: 3px;
  line-height: 1.1;
  transition: background-color .3s;
  pointer-events: auto;
  cursor: pointer !important;
}

.overlay-button:hover,
.overlay-button:focus-visible {
  background: #004353;
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .overlay-button {
    padding: 5px 5px;
    font-size: 10px;
    letter-spacing: .5px;
  }
}


/* ==============================================================
   カーソル／クリック制御
   ============================================================== */

/* サムネイル上は常に手の形 */
.image-container > a.p-article01__thumbnail,
.image-container > a.p-article01__thumbnail * {
  cursor: pointer !important;
  pointer-events: auto;
  z-index: 1;
}

/* テーマの hover クラスを強制上書き */
a.p-article01__thumbnail.p-hover-effect--type1,
.p-hover-effect--type1 {
  cursor: pointer !important;
}

/* a とその子要素も確実に pointer */
.image-container,
.image-container a,
.image-container a *,
.image-container > a.p-article01__thumbnail,
.image-container > a.p-article01__thumbnail * {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1;
}

/* 疑似要素クリックブロック防止 */
.image-container a.p-article01__thumbnail::before,
.image-container a.p-article01__thumbnail::after {
  pointer-events: none !important;
  cursor: inherit !important;
}

/* hover/effect系クラスが被ってもカーソルを継承 */
.image-container [class*="hover"],
.image-container [class*="effect"] {
  cursor: inherit !important;
}


/* ==============================================================
   WORKS／記事タイトル・見出し共通デザイン
   ============================================================== */

/* 一覧レイアウト：見出しを1列に固定 */
.archive .p-workingHeading,
.blog .p-workingHeading {
  flex: 0 0 100%;
}

/* 個別記事タイトル */
.is-works-single h1.entry-title,
.is-works-single .p-article__title,
.is-works-single .c-postTitle,
.is-works-single .l-article__title {
  text-align: left;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .02em;
  font-weight: 700;
  color: #111;
}

.is-works-single .p-article__subtitle,
.is-works-single .c-postTitle small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}


/* ==============================================================
   WORKS見出し（最終版・一本化）
   ============================================================== */

/* アーカイブ・個別記事共通 */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading,
.is-works-single h2.c-heading01.c-heading01--en.p-workingHeading {
  display: inline-flex !important;       /* 英語＋日本語を横並び */
  align-items: baseline !important;      /* ベースライン揃え */
  gap: 0.6em !important;                 /* 英語と日本語の間隔 */
  white-space: nowrap !important;        /* 改行防止 */
  text-align: left !important;
  margin: 28px 0 22px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* 日本語側（span） */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading > span,
.is-works-single h2.c-heading01.c-heading01--en.p-workingHeading > span {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #666 !important;
}

/* 旧定義の打ち消し */
.p-workingHeading span {
  display: inline !important;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading,
  .is-works-single h2.c-heading01.c-heading01--en.p-workingHeading {
    font-size: 20px !important;
    gap: .5em !important;
    margin: 20px 0 18px !important;
  }

  .is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading > span,
  .is-works-single h2.c-heading01.c-heading01--en.p-workingHeading > span {
    font-size: 12px !important;
  }
}





/* ==============================================================
   WORKS 見出し：ブロック化 & 横線を必ず下に
   ============================================================== */

/* h2 をブロック化（既存の inline-flex を打ち消し） */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading,
.is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading {
  display: block !important;      /* ← これが肝。横線を同じ行に並べない */
  white-space: normal !important; /* 本体は改行許可 */
  text-align: left !important;
  margin: 50px 0 24px !important; /* お好みで */
  font-size: 22px !important;
  line-height: 1.25 !important;
  letter-spacing: .05em !important;
  font-weight: 700 !important;
  color: #111 !important;
  position: relative;
}

/* 日本語側は横並び感を margin で再現＆単語は折り返さない */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading > span,
.is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading > span {
  display: inline !important;
  white-space: nowrap !important;
  margin-left: .6em !important;   /* 以前の gap 相当 */
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #666 !important;
}

/* 見出しの下に横線（サムネイル幅に合わせる） */
/* PC・タブレット共通（標準の太さ） */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading::after,
.is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 1150px;
  height: 1px;              /* ← 標準太さ */
  background-color: #000000;
  margin: 10px auto 20px;
  opacity: 0.6;
}

/* スマホ専用（600px以下） */
@media (max-width: 600px) {
  .is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading::after,
  .is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading::after {
    max-width: 100%;
    height: 0.4px;          /* ← スマホでは少し細く（例：0.4px） */
    margin: 8px auto 16px;
    opacity: 0.5;
  }
}





/* ==============================================================
   WORKS：カテゴリーボタンの高さを統一（中の要素も含めて）
   ============================================================== */

/* ボタンの高さを完全固定（テキストも同値） */
.q_button_container .q_btn {
  --q-btn-h: 32px; /* 好みで 30〜36 に調整可 */
  height: var(--q-btn-h) !important;
  line-height: var(--q-btn-h) !important;   /* ← これが効きます */
  min-height: var(--q-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* 子要素も親の行高を継承してズレ防止 */
.q_button_container .q_btn *,
.q_button_container .q_btn > span {
  line-height: inherit !important;
  display: inline-block;
  white-space: nowrap;
}

/* 視覚的に高さが違って見える原因を除去（任意） */
.q_button_container .q_btn.is-active {
  box-shadow: none !important;  /* 下端ハイライトを消すと等高に見えます */
  filter: none !important;
}

/* モバイル時 */
@media (max-width: 600px) {
  .q_button_container .q_btn {
    --q-btn-h: 28px;
    font-size: 12px;
    padding-inline: 8px !important;
  }
}




/* ==============================================================
   WORKS：縦リボン（overlay-button）をサムネイルと連動ホバー
   ============================================================== */

/* サムネイルにホバーした時、リボンも変化 */
.image-container:hover .overlay-button {
  background-color: #004353 !important; /* ← 詩音組子カラーに変更 */
  color: #ffffff !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 既存の hover 定義をやや柔らかく統一（単体hoverも同色） */
.overlay-button:hover,
.overlay-button:focus-visible {
  background-color: #004353 !important;
  color: #ffffff !important;
  outline: none !important;
}





/* ==============================================================
   WORKS：カテゴリーボタンの浮かび効果を無効化
   ============================================================== */

.q_button_container .q_btn:hover {
  transform: none !important;       /* ← 浮かせない */
  box-shadow: none !important;      /* ← 影も消す */
}




/* ==============================================================
   WORKS：ALL以外のカテゴリーボタンはクリック時に濃いグレー
   ============================================================== */

/* 通常（全ボタン灰） */
.q_button_container .q_btn {
  background-color: #b7b7b7 !important;
  color: #ffffff !important;
  transition: background-color .2s ease, color .2s ease;
}

/* ホバー（全ボタン共通） */
.q_button_container .q_btn:hover {
  background-color: #004353 !important;
  color: #ffffff !important;
}

/* ALLボタンだけは常に黒 */
.q_button_container .q_btn.first {
  background-color: #111827 !important;
  color: #ffffff !important;
}

/* 「ALL」以外をクリックしたときのアクティブ色 → 濃いグレー */
.q_button_container .q_btn.is-active:not(.first) {
  background-color: #004353 !important;  /* ← 濃いグレー */
  color: #ffffff !important;
}




/* ==============================================================
   WORKS：見出しの日本語フォントサイズ調整
   ============================================================== */
.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading > span,
.is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading > span {
  font-size: 15px !important; /* ← 13px → 15px に拡大 */
}


body.is-works-archive h2.c-heading01.c-heading01--en.p-workingHeading > span,
body.is-works-single  h2.c-heading01.c-heading01--en.p-workingHeading > span {
  font-size: 15px !important;
}





/* WORKS配下（親カテゴリ works と子カテゴリ restaurant/hotel）で本文の見出し直下サムネイルだけ非表示 */
body.single.category-works main.l-main article.p-entry.l-primary > div.p-entry__thumbnail,
body.single.category-restaurant main.l-main article.p-entry.l-primary > div.p-entry__thumbnail,
body.single.category-hotel main.l-main article.p-entry.l-primary > div.p-entry__thumbnail {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 念のため：サイドバーのサムネイルは常に表示許可 */
body.single.category-works section.l-secondary img.wp-post-image,
body.single.category-restaurant section.l-secondary img.wp-post-image,
body.single.category-hotel section.l-secondary img.wp-post-image,
body.single.category-works section.l-secondary .post-thumbnail,
body.single.category-restaurant section.l-secondary .post-thumbnail,
body.single.category-hotel section.l-secondary .post-thumbnail {
  display: block !important;
}




/* ==============================================================
   WORKS：カテゴリーボタンの表示順をCSSで制御
   ============================================================== */

/* まず全てにデフォルトの順序を付与（大きめ数値） */
.q_button_container .q_btn { order: 100; }

/* 先頭：ALL */
.q_button_container .q_btn.first { order: 0; }

/* 以降 任意の順序（数字が小さいほど左に来る） */
.q_button_container .q_btn[href$="/works/restaurant/"],
.q_button_container .q_btn[href*="/works/restaurant"] { order: 10; }

.q_button_container .q_btn[href$="/works/hotel/"],
.q_button_container .q_btn[href*="/works/hotel"] { order: 20; }

.q_button_container .q_btn[href$="/works/office/"],
.q_button_container .q_btn[href*="/works/office"] { order: 30; }

.q_button_container .q_btn[href$="/works/house/"],
.q_button_container .q_btn[href*="/works/house"] { order: 40; }

/* 並び替えが効くように念のため */
.q_button_container { display: flex; flex-wrap: wrap; }