@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.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 本番サイト由来のカスタム CSS
** （バックアップ _backup_pre_upgrade-20260420-203634 / 本番 style.css と内容一致）
** Cocoon子テーマを 1.1.3 へ更新した際に親テーマ更新で上書き消失していたため復元。
************************************/

/*logo位置の変更*/
.logo {
	text-align: left;
	margin-left: 30px;
}

/*
 * ページ毎にヘッダー背景を上書き *
 ********************************/
/*ギャラリースケジュール*/
.page-id-19 .header {
	background-image: url("images/header_shop_002.jpg");
}

/*ギャラリーご利用規約*/
.page-id-23 .header {
	background-image: url("images/header_shop_003.jpg");
}

/*アクセス*/
.page-id-58 .header {
	background-image: url("images/header_shop_004.jpg");
}

/*お問い合わせ*/
.page-id-63 .header {
	background-image: url("images/header_shop_005.jpg");
}

/*お問い合わせ内容確認*/
.page-id-282 .header {
	background-image: url("images/header_shop_005.jpg");
}

/*お問い合わせ入力エラー*/
.page-id-445 .header {
	background-image: url("images/header_shop_005.jpg");
}

/*お問い合わせ完了*/
.page-id-286 .header {
	background-image: url("images/header_shop_005.jpg");
}

/*お申し込み*/
.page-id-66 .header {
	background-image: url("images/header_shop_006.jpg");
}

/*お申し込み内容確認*/
.page-id-264 .header {
	background-image: url("images/header_shop_006.jpg");
}

/*お申し込み入力エラー*/
.page-id-432 .header {
	background-image: url("images/header_shop_006.jpg");
}

/*お申し込み完了*/
.page-id-268 .header {
	background-image: url("images/header_shop_006.jpg");
}

/*フッターロゴ正常化*/
.footer-bottom-logo .logo-image {
	max-width: 80%;
}
.footer-bottom-logo img {
	height: auto;
}

/*グローバルナビスクロール追従*/
.navifixed {
	position: fixed;
	top: 0;
	width: 100%;
	opacity: 0.9;
	z-index: 10000;
}

/* xo-event-calendar 個別ページのカテゴリー表示を非表示
 * 旧 xo-event-calendar 2.1.2（本番）はカテゴリー span を出力していなかったが、
 * 3.x（更新後）ではハードコードで常に出力される。本番と見た目を揃えるため非表示にする。
 *
 * セレクタは specificity を稼ぐため `.xo-event-meta .xo-event-category` で書く。
 * プラグイン側 `.xo-event-meta span { display: block; }` (specificity 0,0,2,0) に対して、
 * `.xo-event-category` 単独 (0,0,1,0) では勝てないため。
 */
.xo-event-meta .xo-event-category {
	display: none;
}

/* xo_event 個別ページのパンくずリストを非表示
 *  本番（旧 Cocoon 2019）の xo_event 個別ページではパンくずが出ていなかったが、
 *  新版 Cocoon (2026) の `tmp/breadcrumbs.php` は CPT でも階層型タクソノミーが
 *  あれば自動でパンくず（"ホーム > 開催 > 〇〇"）を出力する。
 *  本サイトでは fix-terms.sql で xo_event を全て `xo_event_cat=開催` に紐付けた結果、
 *  この条件に合致してパンくずが常時表示されるようになってしまう。
 *
 *  Cocoon の `is_single_breadcrumbs_visible()` は `single_breadcrumbs_position` の
 *  グローバル設定を見るだけで CPT 別 ON/OFF 機能が無いため（投稿記事のパンくずは
 *  残したい）、ここで body class `single-xo_event` を限定して CSS で非表示化する。
 */
body.single-xo_event #breadcrumb {
	display: none;
}

/* TablePress テーブル「ギャラリー利用規約」(`id="tablepress-2"`) のセル縦位置調整
 *
 * `/terms/` の表は左カラムが 1〜2 行のラベル、右カラムが 1〜3 行の説明文という
 * 行ごとに高さが大きく変わる構成。本番（旧 Cocoon 2019）ではラベルが
 * セル内で **縦中央** に表示されるが、新版 Cocoon (2026) では同じセル HTML が
 * **上揃え**で表示されてしまい、本番との見た目に差が出ていた。
 *
 * 原因:
 *  - TablePress の既定 CSS は新旧とも `.tablepress tbody td { vertical-align: top }`
 *  - セル本文は `<p style="vertical-align: middle">` だが、`<p>` は block 要素のため
 *    インラインの `vertical-align` は効かず、td 側の top が勝つ
 *  - 旧 Cocoon は `.article p` にマージン指定が無く、ブラウザ既定の
 *    `margin: 1em 0` により上下に均等な余白が生まれ、結果としてラベルが
 *    視覚的に縦中央に近い位置に落ち着いていた
 *  - 新 Cocoon は `.article p { margin-bottom: 1.4em }` を追加し、`<p>` の
 *    上下マージンが非対称になったため、ラベルが上端に張り付いて見える
 *
 * 対応:
 *  - td 自体に `vertical-align: middle` を当てて確実に縦中央化
 *  - セル内 `<p>` のマージンを 0 にして上下対称な余白に揃える
 *  - スコープは `.tablepress-id-2` に限定し、他テーブルへの影響を避ける
 */
.tablepress-id-2 tbody td {
	vertical-align: middle;
}
.tablepress-id-2 tbody td > p {
	margin: 0;
}

/* ============================================================================
 * モバイル幅でのヘッダー画像領域復元（新版 Cocoon 親テーマ仕様変更への対応）
 *
 * 本番（旧 Cocoon, 2019 版）のヘッダー挙動:
 *   - 既定:  .header .header-in { min-height: 300px }   (header_area_height=300)
 *   - ≤834: .header div.header-in { min-height: 200px } (mobile_header_area_height=200)
 *   - ≤1023: .no-mobile-header-logo .logo-header { display: none }
 *            （上部の小ロゴテキストだけ非表示、背景画像領域は残る）
 *   - ≤834: .navi-in > .menu-header { display: none }
 *            （アイコン付きグローバルナビは 834px 以下で非表示）
 *
 * 新版 Cocoon (2026 版) は cocoon-master/style.css で下記の新ルールを追加:
 *
 *   @media (max-width: 834px) {
 *     .no-mobile-header-logo .header .header-in { min-height: auto; }  // 11643行目
 *     .navi-in .menu-pc                          { display: none; }    // 11640行目
 *     .navi-in > .menu-header                    { display: none; }    // 11677行目
 *   }
 *
 * このうち本サイトに不都合なのは min-height: auto のみ（背景画像領域が
 * 高さ 0 になり潰れる）。ナビの非表示は本番と同じ挙動なので親テーマに
 * 任せて上書きしない（過去ここで `.menu-pc / .menu-header` を常時 flex に
 * していたが、本番では 834px 以下でナビが消えるためローカルだけ残ると
 * 本番と乖離する。よって削除）。
 *
 * 子テーマでの上書き:
 *   @media (max-width: 834px) で .header / .header-in に min-height:200px を
 *   !important 付きで再指定し、本番のモバイルヘッダー高 200px を再現する。
 *   .header (height:100%) と .header-in (flex 子要素) の両方に当てる必要が
 *   あるのは、片方だけだと flex コンテキストで高さが伝播しないため。
 * ============================================================================ */
@media screen and (max-width: 834px) {
	.no-mobile-header-logo .header,
	.no-mobile-header-logo .header .header-in {
		min-height: 200px !important;
	}
}