@charset "UTF-8";

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

/* ===============================
   パレット（モノトーン＋シルバー）
   =============================== */
:root{
  --bg-base: #ffffff;     /* 背景：白 */
  --ink: #1f1f1f;         /* 本文テキスト */
  --muted: #666666;       /* 補助テキスト */
  --silver: #bfc3c7;      /* 差し色（シルバー） */
  --silver-deep: #9aa1a8; /* 濃いシルバー */
  --line: #dcdfe3;        /* 枠線 */
  --paper: #f6f7f8;       /* 薄いグレー */
}

/* ===============================
   ベース
   =============================== */
html, body, body.custom-background{
  background-color: var(--bg-base) !important;
  color: var(--ink);
  background-image: none !important;
}

a{ color: var(--silver-deep); }
a:hover, a:focus{ color: #7f8891; }
:focus-visible{ outline: 2px solid var(--silver); outline-offset: 2px; }

/* コンテンツ側の背景を透明化（レイアウトは触らない） */
#container, #container-in, #content, #content-in,
#main, #main-in, .wrap, .article, .entry{
  background-color: transparent !important;
  background-image: none !important;
}

/* 段落 */
.entry-content p{ background: transparent !important; border:0 !important; box-shadow:none !important; padding:0; }
.entry-content li p, .entry-content th p, .entry-content td p{ background: transparent; padding:0; border:0; box-shadow:none; }

/* ===============================
   見出し（背景透明＋シルバー文字）
   =============================== */
/* サイドバー専用に限定（本文へ波及させない） */
#sidebar h2, #sidebar h2.widget-title, #sidebar .widget-title{
  color: var(--silver-deep) !important;
  text-shadow: none;
  background: BLACK !important;
  border-color: var(--line);
}


/* ↓ Cocoonの下線などを消してフラットに */
.entry-content h2.wp-block-heading::after,
#sidebar h2.wp-block-heading::after,
.wp-block-heading::after{
  content: none !important;
  background: none !important;
  border: none !important;
}


/* 本文のH2は黒ベタ。ただし blacksmith は除外 */
.entry-content h2:not(.h-blacksmith-metal) {
  background: #000 !important;
  color: #fff !important;
  padding: 0.6em 1em !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}




/* ===============================
   区切り線・テーブル・引用
   =============================== */
hr, .wp-block-separator{ background-color: var(--line) !important; border-color: var(--line) !important; }

.entry-content .wp-block-table table{ background-color: var(--paper); border-color: var(--line); }
.entry-content .wp-block-table th, .entry-content .wp-block-table td{ border-color: var(--line); }
.entry-content .wp-block-table th{ background-color: #e8eaed; color: var(--ink); }

.entry-content blockquote{
  color: var(--ink);
  background-color: var(--paper);
  border-left: 4px solid var(--silver);
}

/* ===============================
   ボタン（黒地＋白文字）
   =============================== */
.wp-block-button .wp-block-button__link,
.button, .btn, .btn a{
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
}
.wp-block-button .wp-block-button__link:hover,
.button:hover, .btn:hover, .btn a:hover{
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}
/* Gutenbergのアウトラインボタンも黒系に揃える */
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color: #000 !important;
  color: #fff !important;
}

/* ===============================
   サイドバー（モノトーン化。レイアウトは触らない）
   =============================== */
#sidebar, .sidebar, #sidebar-scroll{
  background-color: #f5f5f5 !important;
  color: #111;
  border-color: #ddd;
}
#sidebar .widget, .sidebar .widget{
  background-color: #fff !important;
  color: #111;
  border: 1px solid #ddd !important;
}
#sidebar .widget-title, .sidebar .widget-title{
  color: #333 !important;
  background: transparent !important;
  border-bottom: 2px solid #ccc !important;
}
#sidebar a, .sidebar a{ color: #111; }
#sidebar a:hover, .sidebar a:hover{ color: #000; font-weight: bold; }

/* タグクラウドなど */
#sidebar .tagcloud a, .sidebar .tagcloud a{
  display: inline-block; margin: 4px 6px 0 0; padding: 6px 10px;
  background: #eef0f2; border: 1px solid #dfe3e7; border-radius: 999px; color: #111;
}
#sidebar .tagcloud a:hover{ background: #dfe3e7; border-color: #cfd6dc; color: #000; }

/* ===============================
   ナビゲーション（色のみ）
   =============================== */
#header .menu li a,
#navi .menu li a,
#navi ul.menu li a,
#mobile-nav .menu li a,
#mobile-nav ul.menu li a{
  background-color: #eef0f2;
  color: var(--ink);
  border-color: var(--line);
}
#header .menu li a:hover,
#navi .menu li a:hover,
#navi ul.menu li a:hover,
#mobile-nav .menu li a:hover,
#mobile-nav ul.menu li a:hover{
  background-color: #dfe3e7;
  color: #000;
  border-color: var(--line);
}


/* ===============================
   メニュー
   =============================== */

/* item-label の基本スタイル */
.item-label {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* サンセリフ系 */
  font-weight: 600;  /* 少しボールド */
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.4;
  transition: color 0.2s ease, transform 0.2s ease;
  background-color: transparent !important; /* 背景色を常に透明 */
}

/* ホバー時の効果（文字色と拡大だけ） */
.item-label:hover {
  color: var(--accent);          /* 差し色に変更 */
  transform: scale(1.05);        /* 少し拡大 */
  background-color: transparent !important; /* 背景色は変えない */
}







/* /* =============================== */
   /* Cocoonデフォルトのヘッダー指定（後で上書き） */
   /* =============================== */ */
/* #header, #header-container, .header, .l-header{ */
  /* background-position: center center !important; */
  /* background-size: cover !important; */
/* } */

/* ===============================
   ヘッダー背景（横方向ループ＋高さ250px）
   =============================== */
/* 背景は #header-container に一本化 */
#header-container{
  background-image: url('assets/image/title_bg.png') !important;
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto !important;
  height: 250px !important;
  min-height: 250px !important;
  position: relative;
}

/* 内側は親の高さに追従させる */
#header{
  background: none !important;   /* ここでは背景を持たせない */
  height: 250 !important;       /* 親(#header-container)と同じ高さに */
  min-height: 250 !important;
}
#header-in{
  height: 250 !important;       /* ロゴの縦中央を維持 */
  display: flex;
  align-items: center;
  justify-content: center;
}




/* ===============================
   Cocoonの白抜きボックスをカード風に
   =============================== */
.box, .blank-box, .white-box,
.sidebar .box, .sidebar .blank-box, .sidebar .white-box,
#sidebar .box, #sidebar .blank-box, #sidebar .white-box,
.widget .box, .widget .blank-box, .widget .white-box {
  background-color: #eaeaea !important;  /* 濃いめの薄グレー */
  border: 1px solid #bbb !important;     /* やや濃い枠 */
  border-radius: 8px;                    /* 角を丸めてカード感UP */
  padding: 16px;                         /* 中身に余白 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 影で浮かせる */
  color: #111;                           /* テキストは黒寄り */
}

/* ===============================
   サイドバー全体の背景（カードより明るめ→濃グレーへ上書き）
   =============================== */
#sidebar, .sidebar, #sidebar-scroll {
  /* background-color: #3a3a3a !important;  /* 一段明るい濃グレー */ */
  color: #f0f0f0;
}

/* ===============================
   サイドバーのウィジェット（カード）
   =============================== */
#sidebar .widget, .sidebar .widget {
  background-color: #2b2b2b !important;    /* 濃いグレー（カード部分） */
  border: 1px solid #444 !important;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  padding: 14px;
  margin: 18px 0;
  color: #f0f0f0;
}

/* ウィジェットのタイトル */
#sidebar .widget-title, .sidebar .widget-title {
  color: #fff !important;
  border-bottom: 2px solid #555;
  background: transparent !important;
  margin-bottom: 10px;
}

/* ウィジェット内のリンク */
#sidebar .widget a, .sidebar .widget a {
  color: #ddd;
}
#sidebar .widget a:hover, .sidebar .widget a:hover {
  color: #fff;
  text-decoration: underline;
}

/* タグクラウドもカード調に馴染ませる */
#sidebar .tagcloud a, .sidebar .tagcloud a {
  background-color: #3a3a3a;
  border: 1px solid #555;
  color: #eee;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-block;
  margin: 4px 4px 0 0;
}
#sidebar .tagcloud a:hover, .sidebar .tagcloud a:hover {
  background-color: #555;
  border-color: #777;
  color: #fff;
}

/* ===============================
   サイドバーの4コマ（ランダム画像ウィジェット）
   濃いグレーカード＋グレー吹き出し
   =============================== */
.random-image-widget {
  background-color: #2b2b2b;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  padding: 14px;
  margin: 18px 0;
  text-align: center;
}

.random-image-widget img {
  max-width: 100%;
  height: auto;
  border: 3px solid #000;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* グレー吹き出しキャプション */
.random-image-widget p {
  position: relative;
  background: #e0e0e0;
  color: #111;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  margin: 8px 0 0;
  border-radius: 6px;
  display: inline-block;
  text-align: left;
  max-width: 90%;
}

/* 吹き出しの三角（上向き） */
.random-image-widget p::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 16px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #e0e0e0;
}


/* メニュー全体を右端に寄せる */
#menu-home {
  display: flex;                /* フレックスボックス化 */
  justify-content: flex-end;    /* 右端に寄せる */
  gap: 10px;                    /* ボタン同士の隙間 */
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu-home li {
  float: none !important;       /* デフォルトのfloatを消す */
}





/* 親を縦並び（列）にする */
#header-container{
  display: flex;
  flex-direction: column;
}

/* 念のため一旦みんな同じ順序に初期化 */
#header-container > *{ order: 1; }

/* メニューを先頭（上）に、帯はその下 */
#menu-home, #navi{ order: 0 !important; }  /* ← 上 */
#header{ order: 1 !important; }            /* ← 下 */

/* メニューがfloatで崩れるのを抑止（Cocoon対策） */
#menu-home, #navi{ clear: both; margin: 0; padding: 0; }

/* 親を縦並び化して順序を指定 */
#header-container-in{
  display: flex;
  flex-direction: column; /* 縦に並べる */
}

/* 上：メニュー、下：帯（ヘッダー） */
#navi{ order: 0; }
#header{ order: 1; }

/* メニューは右寄せに */
#menu-home{
  display: flex;
  justify-content: flex-end; /* 右端寄せ */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu-home li{ float: none !important; }

/* 帯200pxの中央にロゴを置く */
#header-in {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header-in .logo img {
  max-height: 200px; /* 帯250pxに収める */
  height: auto;
  width: auto;
}

/* 帯の背景：等倍クリップ＋横リピート（必要なら） */
#header{
  background-image: url('assets/image/title_bg_250.png') !important;
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto !important; /* 縮小しない */
  min-height: 250px; height: 250px;
  position: relative; /* キャラ配置の基準 */
}


/* ===============================
   キャラ（共通・アニメーション）
   =============================== */
.header-chara{
  position:absolute;
  z-index:20;
  pointer-events:none;
  opacity:0;
}
.header-chara img{
  height:auto;
  width:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

@keyframes fadeSlideLeft{
  from{opacity:0; transform:translateX(-10px);}
  to{opacity:1; transform:translateX(0);}
}
@keyframes fadeSlideRight{
  from{opacity:0; transform:translateX(10px);}
  to{opacity:1; transform:translateX(0);}
}
.header-chara-left{animation:fadeSlideLeft .8s ease-out forwards;}
.header-chara-right{animation:fadeSlideRight .8s ease-out forwards; animation-delay:.2s;}





/* ===============================
   問い合わせフォーム
   =============================== */
/* ====== CF7 ベース ====== */
.wpcf7 {
  --cf-max: 860px;
  --cf-gap: 14px;
  --cf-radius: 8px;
  --cf-border: #cfcfcf;
  --cf-text: #111;
  --cf-muted: #666;
  --cf-accent: #333;
  --cf-error: #d22;
  --cf-ok: #2a7a2a;
}

.wpcf7 form {
  max-width: var(--cf-max);
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--cf-text);
}

/* 見出し行 */
.wpcf7 .title {
  font-weight: 700;
}
.wpcf7 .careful {
  color: var(--cf-error);
  margin-left: .35em;
  font-weight: 600;
}

/* 入力欄（単一行） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  width: 100%;
  max-width: 640px;
  padding: 10px 12px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: #fff;
  color: var(--cf-text);
  box-sizing: border-box;
}

/* テキストエリア */
.wpcf7 textarea {
  width: 100%;
  max-width: 760px;
  height: 200px;                 /* ←必要なら調整 */
  padding: 12px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: #fff;
  color: var(--cf-text);
  box-sizing: border-box;
  resize: vertical;               /* 縦だけ伸縮可 */
}

/* ラジオ＆チェック系 */
.wpcf7 .wpcf7-list-item {
  display: inline-block;
  margin: 6px 1.2em 6px 0;
}
.wpcf7 .wpcf7-list-item label {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  line-height: 1.4;
}
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  transform: translateY(-1px);
}

/* 「見積もり種類」だけ縦並び */
.wpcf7 .vertical-radio .wpcf7-list-item {
  display: block;
  margin: 4px 0;
}


/* 「cm」など後置きテキストの間を少し詰める */
.wpcf7 p > input + span.unit,
.wpcf7 p > input + em,
.wpcf7 p > input + strong {
  margin-left: .4em;
}

/* 補足文（そのまま流し込んだ文章を落ち着かせる） */
.wpcf7 p + p,
.wpcf7 p + br + p {
  margin-top: .2rem;
  color: var(--cf-muted);
  font-size: .92rem;
}
.wpcf7 p { margin-bottom: var(--cf-gap); }

/* 送信ボタン */
.wpcf7 .submit-button,
.wpcf7 input[type="submit"] {
  margin-top: 10px;
}
.wpcf7 input[type="submit"] {
  background: var(--cf-accent);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .03s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.wpcf7 input[type="submit"]:hover { background: #555; }
.wpcf7 input[type="submit"]:active { transform: translateY(1px); }

/* バリデーション（未入力や不正） */
.wpcf7 .wpcf7-not-valid {
  border-color: var(--cf-error) !important;
  background: #fffafa;
}
.wpcf7 .wpcf7-not-valid-tip {
  color: var(--cf-error);
  font-size: .88rem;
  margin-top: .25rem;
}

/* 送信結果メッセージ */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: var(--cf-radius);
  border: 1px solid var(--cf-border);
  background: #fafafa;
  font-size: .95rem;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--cf-ok);
  color: var(--cf-ok);
  background: #f5fbf5;
}
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--cf-error);
  color: var(--cf-error);
  background: #fff7f7;
}

/* 横幅が狭い時は縦積みへ */
@media (max-width: 768px) {
  .wpcf7 .wpcf7-list-item { display: block; margin: 6px 0; }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea { max-width: 100%; }
}






/* ===============================
   コンテンツをトップーメニュー分ずらす
   =============================== */
/* #content { */
  /* margin-top: 60px; /* ヘッダーメニュー分 */ */
/* } */




/* ===============================
   バナーリンク
   =============================== */
.banner-text {
  display: block;
  padding: 14px 18px;
  margin: 12px 0;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 8px;
  color: #f0f0f0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.banner-text:hover {
  background: #3a3a3a;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  color: #fff;
}



/* カバー -----------------------------------------*/


/* 見出し・本文の初期値 */
.entry-content .wp-block-cover h1,
.entry-content .wp-block-cover h2,
.entry-content .wp-block-cover p {
  color: #fff;                       /* まずは白で視認性UP */
  line-height: 1.25;
  margin: .4em 0;
}

.entry-content .wp-block-cover h1,
.entry-content .wp-block-cover h2 {
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* カバー内のリンクだけ */
.entry-content .wp-block-cover a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.entry-content .wp-block-cover a:hover {
  opacity: 0.9;
}


/* 特定のカテゴリーリストを表示するウィジェット -----------------------------------------*/

/* 箇条書きマーカー消し（テーマの装飾も打ち消す） */
.cat-sitemap .catmap-level,
.cat-sitemap .catmap-level li { list-style: none; }
.cat-sitemap .catmap-level li::marker { content: ""; }
.cat-sitemap .catmap-level > li::before { content: none !important; }

/* アコーディオンの三角は summary::before で描画（別途入れてた場合はそのまま） */
.catmap-item details > summary { position: relative; cursor: pointer; list-style: none; padding: .25em 0 .25em 1.3em; user-select: none; }
.catmap-item details > summary::-webkit-details-marker { display: none; }
.catmap-item details > summary::before { content: "▶"; position: absolute; left: 0; top: .25em; line-height: 1; transition: transform .2s; font-size: .9em; opacity: .85; }
.catmap-item details[open] > summary::before { content: "▼"; }


/* 自前の三角マーカー */
.catmap-item details > summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: .25em;
  line-height: 1;
  transform-origin: .35em .35em;
  transition: transform .2s ease;
  font-size: .9em;
  opacity: .85;
}

/* 開いたときのマーカー回転＆記号変更でもOK */
.catmap-item details[open] > summary::before {
  content: "▼";  /* または transform: rotate(90deg); でも可 */
  transform: none;
}

/* アクセシビリティ：フォーカスリング */
.catmap-item details > summary:focus {
  outline: 2px solid #5b9dd9; outline-offset: 2px;
}






/* 特定のカテゴリーリストを表示するウィジェットカードタイプ -----------------------------------------*/
/* 既存カードCSSの上に追記 */
.cm-media { position: relative; }

.cm-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 6px 8px 2px;   
  font-size: 12px;
  line-height: 1.2;
  border-radius: 0;                     /* ← 角なし */
  border: 1px solid #fff;               /* ← 白のくっきりした枠線 */
  background: rgba(0, 0, 0, .55);       /* 背景は透ける黒でカードと差別化 */
  color: #fff;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0,0,0,.6);  /* 背景が明るくても読めるように */
  letter-spacing: .03em;
  pointer-events: none;
  white-space: nowrap;
}


/* ベース */
.cat-sitemap { margin: 1.2em 0; }
.catmap-rootline { font-weight: 700; margin-bottom: .6em; }
.catmap-level,
.catmap-level li { list-style: none; }
.catmap-level { margin:.4em 0 .2em 0; padding-left:0; }
.catmap-item { margin:.9em 0 1.2em; }

/* 見出し */
.catmap-heading { font-size:1.05rem; margin:.2em 0 .5em; font-weight:700; }
.catmap-name { text-decoration: none; }

/* カードグリッド */
.catmap-cards {
  display: grid;
  gap: 1rem;
}
/* ショートコード指定に合わせて列数を決定（PC） */
.cat-sitemap--cards.cols-2 .catmap-cards { grid-template-columns: repeat(2, 1fr); }
.cat-sitemap--cards.cols-3 .catmap-cards { grid-template-columns: repeat(3, 1fr); }
.cat-sitemap--cards.cols-4 .catmap-cards { grid-template-columns: repeat(4, 1fr); }


.cm-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cm-link { display:block; color:inherit; text-decoration:none; }
.cm-media { position:relative; aspect-ratio:var(--card-ratio, 16/9); overflow:hidden; background:#f2f3f5; }
.cm-media .cm-img { width:100%; height:100%; object-fit:cover; display:block; }
.cm-media.cm-placeholder { display:flex; align-items:center; justify-content:center; color:#888; font-size:.9em; }
.cm-title { font-size:.95rem; font-weight:600; line-height:1.35; padding:.7rem .8rem .85rem; }

/* サイトマップカード内の記事タイトル */
.cat-sitemap--cards .catmap-cards .cm-card .cm-title {
  border: none !important;        /* ← すべての枠線を消す */
  background: none !important;    /* ← 見出し背景色もリセット */
  padding-left: .8rem;       
  font-size: .85rem;
  line-height: 1.32;
  font-weight: 400; 
  font-weight: 700;
}


/* モバイル調整 */
/* スマホ（768px以下）は強制的に2列 */
@media (max-width: 768px) {
  .catmap-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* さらに狭い画面（480px以下）は1列 */
@media (max-width: 480px) {
  .catmap-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   レスポンシブ調整
   =============================== */
@media screen and (max-width:1024px){
  .header-chara-left{ right:calc(50% + 220px) !important; top:10px !important; }
  .header-chara-right{ left:calc(50% + 220px) !important; top:10px !important; }
  .header-chara-left img{ height:220px !important; }
  .header-chara-right img{ height:200px !important; }
}

@media screen and (max-width:768px){
  #menu-home, 
  #navi { 
    display: none !important; 
}
}



@media (max-width: 768px){
  /* ロゴの上に空きが出る系を一旦リセット */
  body { padding-top: 0 !important; margin-top: 0 !important; }
  #header-container,
  #header,
  #header-in,
  #navi,
  .wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* メニューを出さないなら、ナビ自体の余白も消す */
  #navi, #menu-home { display: none !important; margin:0 !important; padding:0 !important; }
}



/* ===============================
   メディアクエリ（必要になったら追記）
   =============================== */
@media screen and (max-width: 834px){
  #header::before, #header::after{
    width: 160px; height: 160px;
  }
  #header, #header-container{
    background-size: auto 180px !important;
    min-height: 180px; height: 180px;
  }
}
@media screen and (max-width: 480px){
  #header::before, #header::after{
    width: 120px; height: 120px;
    left: 16px; right: 16px;
  }
  #header, #header-container{
    background-size: auto 160px !important;
    min-height: 160px; height: 160px;
  }
}


/* ===============================
   ヘッダー高さの統一（親＝#header-container が唯一の管理者）
   ※ ここを style.css の一番下に追加（既存指定を上書き）
   =============================== */
:root{
  --header-h: 250px; /* ← 高さを変えたい時はここだけ！ */
}

/* 背景も高さも“親”で一元管理 */
#header-container{
  background-image: url('assets/image/title_bg.png') !important; /* 既存の背景画像 */
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto !important;
  min-height: var(--header-h) !important;
  height: auto !important;
  position: relative;
  display: flex;           /* 親を縦並び化済なので維持 */
  flex-direction: column;
  overflow: visible;
}

/* 子たちは背景ナシ＆高さは親に追従（固定heightは撤廃） */
#header{
  background: none !important;
  min-height: var(--header-h) !important;
  height: auto !important;          /* ← ここで 250px 固定を解除 */
  position: relative;
}

#header-in{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-h) !important;
  height: auto !important;
}

/* ロゴ縮尺の安全装置（必要なら） */
#header-in .logo img{
  max-height: calc(var(--header-h) - 50px);
  height: auto;
  width: auto;
}

/* コンテンツのめり込みガード（環境によっては不要なら削ってOK） */
#content{
  margin-top: 0 !important;
  padding-top: 0 !important;
  clear: both;
}


/* ===============================
   スマホでメニューを非表示（768px以下）
   =============================== */
@media (max-width: 768px){
  /* 例1：ヘッダーのカスタムメニューを丸ごと隠す */
  #menu-home{ display: none !important; }   /* ←必要なら外してね */
  #navi{ display: none !important; }        /* ←必要なら外してね */

  /* 例2：補助メニュー（あれば）を隠す */
  .header-extra-menu{ display: none !important; }

  /* 例3：ヘッダー直下のメニュー全体を隠す（保険）
     テーマや配置によっては #header .menu が効くことあり */
  #header .menu{ display: none !important; }
}


/* ===============================
   スマホ時のヘッダーをピタッと 250px に固定
   （余白・枠・別ブロックも徹底的にゼロ化）
   =============================== */
@media (max-width: 768px){
  :root{ --header-h: 250px; } /* 必要ならここを変える */

  /* 親：高さを固定（合算を許さない） */
  #header-container{
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    overflow: hidden;              /* はみ出しを切る */
  }

  /* 子：#header 帯だけ生かす。他は消す or 0化 */
  #navi,
  #menu-home,
  #header .menu,
  .header-extra-menu,
  .bukikoubou-top-banner-area{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* 帯側は高さだけ合わせて中央寄せ */
  #header{
    background: none !important;                  /* 背景は container 側で持つ運用なら none */
    min-height: var(--header-h) !important;
    height: var(--header-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: relative;
  }
  #header-in{
    min-height: var(--header-h) !important;
    height: var(--header-h) !important;
    display: flex; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
  }

  /* ロゴがデカすぎる時の保険（任意） */
  #header-in .logo img{
    max-height: calc(var(--header-h) - 50px);
    height: auto; width: auto;
  }
}






/* ===== CF7 入力欄だけ白地＋黒文字に戻す ===== */
.wpcf7 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
}
.wpcf7 ::placeholder {
  color: #666 !important;
  opacity: 1 !important;
}


/* 子テーマCSSロード確認テスト（入れて保存→リロード） */
html { outline: 3px solid #ff00ff !important; }





/* ===== 本文（entry-content）だけに適用：H2/H3 ===== */

/* H2：鋼鉄プレート（ヘアライン入り） */
.entry-content h2.wp-block-heading.h-blacksmith-metal {
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 2px),
    linear-gradient(135deg,#3c3c3c 0%,#1a1a1a 30%,#2b2b2b 60%,#444 100%);
  background-blend-mode: overlay, normal;
  color:#e0e0e0;
  padding:1rem 1.4rem;
  margin-bottom: 0.4em !important; /* ← お好みで 0～0.8em 程度に */
  border:1px solid #666;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.05em;
  box-shadow: inset 0 0 6px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.45) !important;
  overflow:hidden;
  text-shadow:0 0 8px rgba(255,255,255,.08);
}
.entry-content h2.wp-block-heading.h-blacksmith-metal::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.18) 0%, transparent 60%);
  opacity:.3; mix-blend-mode:overlay; pointer-events:none;
}
.entry-content h2.wp-block-heading.h-blacksmith-metal::after{
  content:""; position:absolute; inset:0; border-radius:10px;
  background:linear-gradient(45deg, rgba(255,255,255,.08) 0%, transparent 50%, rgba(255,255,255,.08) 100%);
  opacity:.45; mix-blend-mode:overlay; pointer-events:none;
}

/* H3：小さめステンレス（ヘアライン入り） */
.entry-content h3.wp-block-heading.h-blacksmith-stainless {
  position:relative;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.28) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(135deg,#f5f5f5 0%,#d9d9d9 25%,#b8b8b8 50%,#dcdcdc 75%,#ffffff 100%);
  background-blend-mode: overlay, normal;
  color:#222;
  padding:.6rem 1rem;
  border:1px solid #b0b0b0;
  border-radius:6px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow: inset 0 0 4px rgba(255,255,255,.4), inset 0 0 12px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.25);
  overflow:hidden;
  text-shadow:0 1px 0 rgba(255,255,255,.30);
}
.entry-content h3.wp-block-heading.h-blacksmith-stainless::before,
.entry-content h3.wp-block-heading.h-blacksmith-stainless::after{
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
}
.entry-content h3.wp-block-heading.h-blacksmith-stainless::before{
  background:linear-gradient(45deg, rgba(255,255,255,.50) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.50) 100%);
  opacity:.40; mix-blend-mode:overlay;
}
.entry-content h3.wp-block-heading.h-blacksmith-stainless::after{
  background:linear-gradient(-45deg, rgba(255,255,255,.45) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.45) 100%);
  opacity:.30; mix-blend-mode:overlay;
}

/* サイドバーの h2 に影響しないよう、サイドバーは既存の指定を維持 */
#sidebar h2, #sidebar h2.widget-title, #sidebar .widget-title { /* ここは既存のまま */ }


/* ===============================================
   Header Character Position Fix (PCレイアウト対応)
   =============================================== */

/* 変数で高さ管理（必要に応じて数値調整） */
:root{
  --header-h: 250px;
}

/* ヘッダー全体の高さを安定化 */
#header, #header-container, .l-header, .header{
  position: relative;
  min-height: var(--header-h);
}

/* キャラ画像を右下に固定配置（PC時） */
.header-chara{
  position: absolute;
  right: max(2vw, 16px);
  bottom: 0;
  height: calc(var(--header-h) - 12px);
  transform: none;
  z-index: 5;
  pointer-events: none; /* リンク被り防止 */
}



/* ヘッダー背景：全面リピート */
#header,
#header-container,
.l-header,
.header{
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: 0 0 !important; /* 左上から敷き詰め */
  background-attachment: scroll !important;
}



@media (max-width: 768px){
  .header-chara-left img{
    height: 50px !important;        /* ← mobile.height */
  }
  .header-chara-left{
    top: 0 !important;               /* ← mobile.top */
    right: calc(50% + 0px) !important; /* ← mobile.offset（左キャラは right 側） */
  }
}

<img
  src="<?php echo esc_url($src); ?>"
  srcset="<?php echo esc_url($src); ?> 1x, <?php echo esc_url($src_2x); ?> 2x"
  sizes="(max-width: 768px) 40vw, 25vw"
  alt="<?php echo esc_attr('キャラ' . $side); ?>"
  class="header-chara-img-<?php echo esc_attr($side); ?>"
  decoding="async"
  fetchpriority="high"
/>

@media (max-width: 768px){
  /* サイドメニュー（ドロワー）を前面に固定 */
  #navi, .navi-in, .drawer, .menu-drawer, .mobile-menu {
    position: fixed !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 768px){
  .header-chara-wrap,
  .header-chara {
    z-index: 2 !important;     /* ← ここで確実に下げる */
  }
}



/* --- Single YouTube Video --- */
.ytv-error { padding:10px; background:#2a2f36; color:#ffdede; border-left:4px solid #d9534f; }

.ytv-embed { position: relative; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ytv-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.ytv-card { display:block; text-decoration:none; color:#e9eef5; background:#1b1e22; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.25); transition:transform .12s ease, box-shadow .12s ease; }
.ytv-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.35); }

.ytv-thumb { position:relative; height:0; overflow:hidden; background:#111; }
.ytv-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ytv-play { position:absolute; right:10px; bottom:8px; background:rgba(0,0,0,.55); padding:6px 10px; border-radius:999px; font-weight:700; }

.ytv-meta { padding:10px 12px 12px; font-size:.95rem; line-height:1.35; font-weight:600; }

/* 可変比率（16:9 等）は inline style の padding-top で制御 */


/* === 小型YouTubeカード ギャラリー === */
.ytv-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.ytv-card {
  display: block;
  text-decoration: none;
  background: #1b1e22;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  transition: transform .1s ease, box-shadow .1s ease;
}
.ytv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.ytv-thumb {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}
.ytv-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ytv-play {
  display: none; /* 小型なので非表示 */
}

.ytv-meta {
  padding: 6px 8px;
  color: #e0e5eb;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スマホ対応：2列→1列 */
@media (max-width: 480px) {
  .ytv-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* === JSなしインライン再生・小型サムネ型 === */

/* 親：センター寄せ＋詰めたグリッド */
.yt-inline-gallery.njs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* センター揃え */
  gap: 6px;                /* カード間を詰める */
}

/* カード */
.yt-inline-njs {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #121418;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}

/* タイトルは1行省略・小さめ */
.yt-inline-njs-title {
  max-width: 100%;
  padding: 6px 8px;
  color: #e0e6ee;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* iframe角丸（親の角丸に合わせる） */
.yt-inline-njs iframe {
  display: block;
  border: 0;
  border-radius: 8px 8px 0 0;
}

/* スマホ：さらにギュッと */
@media (max-width: 480px) {
  .yt-inline-gallery.njs { gap: 4px; }
}


/* --- カードをやや大きく＆均等感アップ --- */
.yt-inline-gallery.njs {
  gap: 10px; /* 少し広めに戻す */
}

.yt-inline-njs {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: transform .1s ease, box-shadow .1s ease;
}
.yt-inline-njs:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.yt-inline-njs-title {
  font-size: 0.82rem; /* タイトル少し大きく */
  padding: 8px 10px;
}

/* iframeサイズに自然な余白 */
.yt-inline-njs iframe {
  border-radius: 10px 10px 0 0;
}

/* ---------- 武器工房：サイドバー用 大ボタン（安全版） ---------- */
.wg-bigbtn-wrap { text-align:center; margin: 1rem 0; }
.wg-bigbtn {
  display:inline-block; width:100%; box-sizing:border-box;
  padding: 1rem 1.2rem; font-size:1.1rem; font-weight:700;
  text-decoration:none; color:#fff;
  background: linear-gradient(135deg, #3c4b63, #1f2a38);
  border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.wg-bigbtn:hover, .wg-bigbtn:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity:.95; text-decoration:none; outline:none;
}