/*
Theme Name: もんじゃ･お好み･鉄板焼き｜すずめの御宿
Theme URI: https://kuukaifoods.com/
Author: kuukaifoods
Author URI: https://kuukaifoods.com/
Description: もんじゃ･お好み･鉄板焼き｜すずめの御宿のデザインテーマです。【恵比寿駅5分】一流和食料理人が作るもんじゃと和食を堪能◆綺麗で落ち着いた雰囲気の空間。
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: suzume
*/
@charset "UTF-8"; 
/* base */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font-family: 'YuMincho', 'Hiragino Mincho ProN', 'Sawarabi Mincho', 'Noto Serif JP', serif; color: #222; line-height: 1.85 }
img { display: block; max-width: 100% }
a { text-decoration: none; color: inherit }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px }
.section { padding: 84px 0 }
.sec-title { font-size: 1.9rem; margin-bottom: 10px; letter-spacing: .06em }
/* header (transparent over hero) */
.suzume-header { position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 70 }
.suzume-header-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: flex-end }
.suzume-nav { display: flex; gap: 28px; align-items: center }
.suzume-nav a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35) }
.sns-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)) }
.suzume-header { position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 90; }
.suzume-header-inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: flex-end; /* 右寄せ */
  align-items: center; }
.suzume-nav { display: flex; gap: 28px; align-items: center; }
.suzume-nav a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.sns-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
/* hamburger（2本ライン） */
.nav-toggle { display: none; position: relative; width: 30px; height: 20px; margin-left: 16px; /* ナビの右隣に余白 */
  border: none; background: transparent; cursor: pointer; z-index: 120; }
.nav-toggle__line { position: absolute; left: 0; right: 0; height: 1px; background: #fff; border-radius: 999px; transition: .25s; }
.nav-toggle__line:nth-child(1) { top: 2px; }
.nav-toggle__line:nth-child(2) { bottom: 3px; }
.nav-toggle .nav-toggle__line:nth-child(2) {}
/* 開いたときに「X」っぽくクロスさせる */
.nav-toggle.is-open .nav-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__line:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem; border-radius: 999px; font-weight: 500; transition: .2s; }
.btn--white { border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .08); color: #fff; }
.btn--white:hover { background: rgba(255, 255, 255, .2); }
.btn--ghost { background: transparent; }
/* SP時のナビ表示 */
@media(max-width:768px) { .nav-toggle { display: block; }
  .suzume-header-inner { justify-content: flex-end; /* 右寄せキープ */ }
  .suzume-nav { position: fixed; top: 0; left: 0; right: 0; padding: 80px 24px 24px; flex-direction: column; gap: 20px; background: rgba(0, 0, 0, .92); transform: translateY(-100%); transition: transform .28s ease; z-index: 110; }
  .suzume-nav a { font-size: 1.05rem; }
  .suzume-nav.is-open { transform: translateY(0); } }
/* logo panel */
.logo-panel { position: absolute; left: 10px; top: 0; transform: translateX(0); width: 100px; background: #fff; padding: 12px 20px; z-index: 45; display: grid; place-items: center; transition: background .35s ease, box-shadow .35s ease, transform .35s ease }
.header_fixed_bg .logo-panel { width: 180px; background: none; box-shadow: 0 8px 28px rgba(0, 0, 0, .12); animation: dropFade 1s ease-out both }
@keyframes dropFade { 
  0% { opacity: 0; transform: translate(0, 0px) }
  100% { opacity: 1; transform: translate(0%, 0) }
}
@media(max-width:768px) { 
  .logo-panel { top: 0; padding: 10px 14px; }
}
.swiper { z-index: -1; }
/* hero */
.hero { position: relative; padding: 0; overflow: hidden }
.hero-swiper { position: relative; width: 100%; height: 100svh; min-height: 100vh }
.hero-swiper .swiper-slide { width: 100%; height: 100% }
.hero-swiper img { width: 100%; height: 100%; object-fit: cover }
.hero .swiper-pagination { bottom: 16px }
.hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding-bottom: 64px; color: #FFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.80) }
.hero-title { font-size: clamp(28px, 7vw, 72px); line-height: 1.22; text-align: center; font-weight: normal; }
.hero-title span { font-size: clamp(18px, 4vw, 42px); }
/* cards & grid */
.grid { display: grid; gap: 20px; margin-top: 20px }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media(max-width:900px) { .grid-3 { grid-template-columns: 1fr 1fr } }
@media(max-width:640px) { .grid-3 { grid-template-columns: 1fr } }
.card { border: 1px solid #e9e9e9; border-radius: 14px; padding: 16px; background: #fff }
.list { padding-left: 1.1rem }
.list li { margin: .25rem 0 }
/* gallery & lightbox */
.g-filter { display: flex; gap: 10px; margin: 10px 0 8px }
.g-filter__btn { appearance: none; padding: .5rem .9rem; border: 1px solid #e1e1e1; border-radius: 999px; background: #fff; cursor: pointer }
.g-filter__btn.is-active { border-color: #b9422a; box-shadow: 0 0 0 2px rgba(185, 66, 42, .12) }
.gallery-grid .g-item { display: block; border-radius: 14px; overflow: hidden; border: 1px solid #e9e9e9 }
.g-item.is-hidden { display: none }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; align-items: center; justify-content: center; z-index: 100 }
.lightbox.is-show { display: flex }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5) }
.lightbox-close { position: fixed; top: 22px; right: 24px; font-size: 32px; color: #fff; background: transparent; border: none; cursor: pointer }
/* ふわっとアニメーション用 */
.gallery-grid .g-item { /* すでにあれば追加でOK */
  transition: opacity .28s ease, transform .28s ease; }
/* 表示するとき */
.gallery-grid .g-item.g-fade-in { animation: gFadeIn .28s ease-out; }
/* 消えるとき */
.gallery-grid .g-item.g-fade-out { animation: gFadeOut .2s ease-in; }
@keyframes gFadeIn { from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); } }
@keyframes gFadeOut { from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); } }
/* map */
.map-iframe { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid #e9e9e9 }
.map-iframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
/* footer */
.site-footer { border-top: 1px solid #eee; padding: 40px 0; color: #777; text-align: center } /* intro 2カラムレイアウト */
.intro-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.intro-text p { margin-top: 0.75rem; }
.intro-media img, .intro-media .intro-video { width: 100%; height: auto; border: 1px solid #e9e9e9; object-fit: cover; }
/* スマホでは縦並びに */
@media (max-width:768px) { .intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .intro-media { order: -1; /* 先に写真を見せたければ -1 / 後ならそのまま */ } }
.g-item { position: relative; overflow: hidden; }
.g-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.92); color: #111; font-family: "Noto Serif JP", serif; font-size: 0.9rem; text-align: center; padding: 10px; opacity: 0; transform: translateY(100%); transition: all 0.45s ease; line-height: 1.5; }
.g-item:hover .g-caption { opacity: 1; transform: translateY(0); }
/* 英語部分 */
.g-caption small { display: block; color: #777; font-size: 0.8rem; margin-top: 2px; }
/* ライトボックス全体 */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 9999; }
/* 表示時 */
.lightbox.is-active { opacity: 1; pointer-events: auto; animation: fadeIn 0.5s ease forwards; }
/* モーダルのフェードイン */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); } }
/* 画像 */
.lightbox img { max-width: 90%; max-height: 85%; border-radius: 8px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); animation: fadeZoom 0.5s ease; }
@keyframes fadeZoom { from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); } }
/* 閉じるボタン */
.lightbox-close { position: absolute; top: 20px; right: 25px; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; opacity: 0.8; transition: opacity 0.3s ease; }
.lightbox-close:hover { opacity: 1; }
/* =================================
リセット
================================= */  

/* =================================
共通
================================= */
#contents { max-width: 1200px; margin: auto; }
@media (min-width: 979px) { 
  .suzumeno-oyado-view_pc { display: block; }
  .suzumeno-oyado-view_sp { display: none; }
@media (max-width: 478px) { 
  .suzumeno-oyado-view_pc { display: none; }
  .suzumeno-oyado-view_sp { display: block; }
}
/* =================================
お問い合わせフォーウ
================================= */
.suzumeno-oyado-form { --brand: #12a79f; --brand-d: #0b6f6a; --ink: #0f1b1a; --muted: #6b7a79; --line: #e6efed; --bg: #f3f9f8; --error: #e44; color: var(--ink); background: ; }
.suzumeno-oyado-form__inner { max-width: 840px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) 20px 64px; }
/* Title / lead */
.suzumeno-oyado-form__title { text-align: center; color: var(--brand-d); font-weight: bold; letter-spacing: .05em; font-size: clamp(24px, 3.6vw, 40px); margin: 0 0 14px; }
.suzumeno-oyado-form__lead { text-align: center; color: #2e3a39; margin: 0 0 24px; line-height: 1.9; }
/* ===== 上部チェックボックス（複数選択可） ===== */
.suzumeno-oyado-purpose { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin: 6px 0 2px; }
.suzumeno-oyado-purposeItem { position: relative; }
.suzumeno-oyado-purpose input[type="checkbox"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.suzumeno-oyado-purpose label { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: bold; letter-spacing: .02em; padding: 10px 14px 10px 34px; border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.suzumeno-oyado-purpose label::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; }
.suzumeno-oyado-purpose label::after { content: ""; position: absolute; left: 22px; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand); opacity: 0; transition: opacity .2s ease; }
.suzumeno-oyado-purpose input[type="checkbox"]:checked + label { background: #e6f7f5; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 167, 159, .15) inset; }
.suzumeno-oyado-purpose input[type="checkbox"]:checked + label::after { opacity: 1; }
.suzumeno-oyado-purposeNote { text-align: center; font-size: 12px; color: var(--muted); margin: 2px 0 18px; }
/* ===== Fields ===== */
.suzumeno-oyado-field { margin: 18px 0; }
.suzumeno-oyado-label { display: block; font-weight: bold; margin: 0 0 10px; letter-spacing: .02em; }
.suzumeno-oyado-required { color: var(--error); margin-left: .25em; }
.suzumeno-oyado-input, .suzumeno-oyado-select, .suzumeno-oyado-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 16px; font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.suzumeno-oyado-input::placeholder, .suzumeno-oyado-textarea::placeholder { color: #b7c6c4; }
.suzumeno-oyado-input:focus, .suzumeno-oyado-select:focus, .suzumeno-oyado-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 167, 159, .18); }
/* Select（矢印） */
.suzumeno-oyado-select { -webkit-appearance: none; appearance: none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M4 6l8 8 8-8" fill="none" stroke="%2312a79f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') right 14px center/18px 12px no-repeat, #fff; padding-right: 48px; }
.suzumeno-oyado-textarea { min-height: 180px; resize: vertical; }
/* ===== 規約同意（中央寄せ＋必ず表示） ===== */
.suzumeno-oyado-checkline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); justify-content: center; /* 中央寄せ */
  text-align: center; /* 折返し時も中央 */ }
.suzumeno-oyado-checkline input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; margin: 0 4px 0 0; accent-color: var(--brand); appearance: auto; position: static; opacity: 1; /* テーマの非表示を打ち消し */ }
.suzumeno-oyado-checkline label { display: inline-flex; align-items: center; gap: 8px; }
.suzumeno-oyado-checkline a { color: var(--brand-d); text-decoration: underline; }
/* Submit */
.suzumeno-oyado-submit { text-align: center; margin-top: 28px; }
.suzumeno-oyado-submit input[type="submit"] { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; background: var(--brand); color: #fff; font-weight: bold; letter-spacing: .06em; padding: 16px 0; min-width: 90%; max-width: 260px; border-radius: 12px; box-shadow: 0 8px 18px rgba(18, 167, 159, .25); transition: transform .08s ease, filter .2s ease, box-shadow .2s ease; margin: auto; display: block; }
.suzumeno-oyado-submit input[type="submit"]:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(18, 167, 159, .28); }
.suzumeno-oyado-submit input[type="submit"]:active { transform: translateY(1px); }
.suzumeno-oyado-submit input[type="submit"]:disabled { background: #b9dedd; box-shadow: none; cursor: not-allowed; }
/* a11y utils */
.suzumeno-oyado-note { color: var(--muted); font-size: 13px; margin-top: 6px; }
.suzumeno-oyado-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); overflow: hidden; }
/* Responsive */
@media (max-width:560px) { .suzumeno-oyado-form__inner { padding: 24px 10px 48px; }
  .suzumeno-oyado-purpose { gap: 12px; } }
/* ===== tokens（任意） ===== */
.suzumeno-oyado-form { --brand: #12a79f; --muted: #6b7a79; --line: #e6efed; }
.suzumeno-oyado-confNoJS { --brand: #12a79f; --brand-d: #0b6f6a; --ink: #0f1b1a; --muted: #5f6f6e; --card: #fff; --line: #dfe9e8; --bg: #f5fbfa; --accent: #e3352f; --shadow: 0 10px 28px rgba(5, 41, 39, .10); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: var(--ink); background: var(--bg); }
.suzumeno-oyado-confNoJS *, .suzumeno-oyado-confNoJS *::before, .suzumeno-oyado-confNoJS *::after { box-sizing: border-box; }
.suzumeno-oyado-confNoJS .wrap { max-width: 980px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 16px 56px; }
/* ================== Heading ================== */
.suzumeno-oyado-confNoJS h2 { margin: 0 0 6px; font-weight: bold; letter-spacing: .02em; font-size: clamp(20px, 2.2vw, 28px); color: var(--brand-d); }
.suzumeno-oyado-confNoJS .lead { margin: 0 0 20px; color: var(--muted); line-height: 1.9; }
/* ================== Card rows ================== */
.suzumeno-oyado-confirmNoJS { display: grid; gap: 0; }
.suzumeno-oyado-confirmNoJS .row { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; margin: 0; }
.suzumeno-oyado-confirmNoJS dt { margin: 0; padding: 14px 16px; background: #e9f6f4; color: #085b56; font-weight: bold; letter-spacing: .04em; display: flex; align-items: center; }
.suzumeno-oyado-confirmNoJS dd { margin: 0; padding: 16px 18px; min-height: 52px; display: flex; align-items: center; line-height: 1.8; word-break: break-word; }
/* 複数行テキスト（お問い合わせ内容） */
.suzumeno-oyado-confirmNoJS dd[data-multiline="true"] { align-items: flex-start; white-space: pre-wrap; }
/* 空欄時（CF7が完全空なら表示。空白が入るテーマでは効かない可能性あり） */
.suzumeno-oyado-confirmNoJS dd:empty::before { content: "— 入力なし —"; color: #98a5a4; font-style: italic; }
/* ================== “お問い合わせ種別”の箱表示（JSなし代替） ================== */
/* CF7の [multiform "checkbox-12"] がテキスト出力のため、まとまりチップ風の枠で視認性を向上。 */
.suzumeno-oyado-confirmNoJS dd[data-cf7="checkbox-12"] { padding: 10px 12px; line-height: 1.7; color: #0a6e67; font-weight: bold; }
/* ================== Actions ================== */
.suzumeno-oyado-actionsNoJS { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.suzumeno-oyado-btnNoJS { appearance: none; border: 0; cursor: pointer; text-decoration: none; user-select: none; padding: 14px 22px; border-radius: 999px; font-weight: bold; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; min-width: 220px; transition: transform .05s ease, filter .2s ease, box-shadow .2s ease; }
.suzumeno-oyado-btnNoJS:focus-visible { outline: 3px solid rgba(18, 167, 159, .32); outline-offset: 3px; }
.suzumeno-oyado-btnNoJS:hover { filter: brightness(1.03); }
.suzumeno-oyado-btnNoJS:active { transform: translateY(1px); }
.suzumeno-oyado-btnNoJS--ghost { background: #fff; color: #123; border: 2px solid #cfdad8; }
.suzumeno-oyado-btnNoJS--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 18px rgba(18, 167, 159, .25); }
/* ================== Responsive ================== */
@media (max-width: 720px) { .suzumeno-oyado-confirmNoJS .row { grid-template-columns: 1fr; }
  .suzumeno-oyado-confirmNoJS dt { border-bottom: 1px solid var(--line); }
}
.suzumeno-oyado-actions--center { margin: 2em 0 0 0; display: flex; align-items: center; justify-content: center; align-items: center;}
/* wpcf7 */
.suzumeno-oyado-form .wpcf7-list-item .wpcf7-list-item-label::before, .suzumeno-oyado-form .wpcf7-list-item .wpcf7-list-item-label::after { content: none !important; }
/* ====== 「目的チェック」本体：name=checkbox-12 にフック ====== */
/* ラッパー（どちらかは必ず出るはず） */
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin: 6px 0 2px; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item { position: relative; }
@media (max-width: 480px) {
  .wpcf7-list-item { margin: .5em .5em .5em 0; } 
}
/* input は全面クリック可能に（見た目は label で作る） */
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label > input[type=checkbox], .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label > input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* pill 見た目は label のみ */
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label { display: inline-flex; align-items: center; position: relative; font-weight: bold; letter-spacing: .02em; padding: 10px 14px 10px 34px; border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* label 内のテキスト span は素通し */
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label .wpcf7-list-item-label, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label .wpcf7-list-item-label { display: inline; margin: 0; padding: 0; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label::before, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label::after, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label::after { content: ""; position: absolute; left: 20px; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand); opacity: 0; transition: opacity .2s ease; }
@media (max-width: 480px) { 
  .suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label .wpcf7-list-item-label, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label .wpcf7-list-item-label { font-size: 12px;  }
  .suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label { padding: 8px 12px 8px 30px; }
  .suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label::before, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label::before { left: 9px; top: 50%; width: 12px; height: 12px; }
  .suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label::after, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label::after {left: 17px; top: 50%; width: 6px; height: 6px; }  
}
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label:has(> input:checked), .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label:has(> input:checked) { background: #e6f7f5; box-shadow: 0 0 0 3px rgba(18, 167, 159, .15) inset; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label:has(> input:checked)::after, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label:has(> input:checked)::after { opacity: 1; }
/* 注意書き（任意） */
.suzumeno-oyado-purposeNote { text-align: center; font-size: 12px; color: var(--muted); margin: 2px 0 18px; }
/* ====== 同意（name=agree）中央寄せは据え置き ====== */
.suzumeno-oyado-form .wpcf7-form-control-wrap.agree, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="agree"] { display: block; text-align: center; margin-top: 8px; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.agree label, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="agree"] label { display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.agree input[type=checkbox], .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="agree"] input[type=checkbox] { appearance: auto; width: 18px; height: 18px; accent-color: var(--brand); }
/* （JSフォールバック用） */
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label.is-checked, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label.is-checked { background: #e6f7f5; box-shadow: 0 0 0 3px rgba(18, 167, 159, .15) inset; }
.suzumeno-oyado-form .wpcf7-form-control-wrap.checkbox-12 .wpcf7-list-item > label.is-checked::after, .suzumeno-oyado-form .wpcf7-form-control-wrap[data-name="checkbox-12"] .wpcf7-list-item > label.is-checked::after { opacity: 1; }

/* フィールド下のエラーメッセージを表示 */
.wpcf7-form-control.wpcf7-not-valid { border: 2px solid #e53935 !important; background-color: #fff5f5 !important; }
.wpcf7-not-valid-tip { font-size: 14px; margin-bottom: 10px; }
.form-0 .wpcf7-form-control.wpcf7-not-valid { border: none !important; background-color: rgba(0,0,0,0.00) !important; }
.form-0 .wpcf7-not-valid-tip { width: 100%; text-align: center; position: relative; margin: 0; }
.form-0 .wpcf7-form-control-wrap {  gap: 10px !important; }
.form-0 .wpcf7-form-control.wpcf7-not-valid label { border: 2px solid #e53935 !important; background-color: #fff5f5 !important; }
.form-0 .wpcf7-not-valid-tip::after { content: "選択してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: -7px; left: 0; padding: 5px 0 0 0; }
.form-1 .wpcf7-not-valid-tip::after { content: "会社名を入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-2 .wpcf7-not-valid-tip::after { content: "従業員数を選択してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-3 .wpcf7-not-valid-tip::after { content: "業種を入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-4 .wpcf7-not-valid-tip::after { content: "お名前を入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-5 .wpcf7-not-valid-tip::after { content: "電話番号を入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-6 .wpcf7-not-valid-tip::after { content: "メールアドレスを入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 37px; left: 0; padding: 5px 0 0 0; }
.form-7 .wpcf7-not-valid-tip::after { content: "内容を入力してください。"; display: block; width: 100%; z-index: 1; background: #FFF; position: absolute; top: 15px; left: 0; padding: 5px 0 0 0; }
.wpcf7-submit:disabled { background-color: #CCC; border: 1px solid #CCC; }
.wpcf7-submit:disabled:hover { background-color: #CCC; border: 1px solid #CCC; color: #FFF !important; }
@media (max-width: 680px) { 
  .wpcf7-list-item { margin: 0 .5em 1em 0 !important; }
  .suzumeno-oyado-checkline .wpcf7-list-item { margin: 0 !important; }
  .form-0 .wpcf7-form-control.wpcf7-not-valid label { border: 1px solid #e53935 !important;  }
}
/* ============================
   Breadcrumb (WordPress auto)
   ============================ */
#breadcrumbs {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 24px;
  padding: 0 20px;
  font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 0.85rem;
  color: #666;
}

#breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}

#breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: #777;
}

/* 区切り（»）を上品に整える */
#breadcrumbs li:not(:last-child)::after {
  content: "›";
  color: #bba375;
  margin: 0 8px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* WordPress出力にある "»" を非表示に */
#breadcrumbs li:contains("»") {
  display: none;
}

/* リンクスタイル */
#breadcrumbs a {
  color: #777;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#breadcrumbs a:hover {
  color: #222;
  border-color: #bba375;
}

/* 最後の要素（現在位置） */
#breadcrumbs li:last-child {
  color: #aaa;
  pointer-events: none;
}

/* clearfix不要な場合 */
#breadcrumbs.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* モバイル対応 */
@media (max-width: 768px) {
  #breadcrumbs {
    font-size: 0.78rem;
    margin: 40px auto 16px;
    padding: 0 16px;
  }
  #breadcrumbs li:not(:last-child)::after {
    margin: 0 6px;
  }
}
.header_fixed { opacity: 0; top:-200px; }
.logo_scroll { display: none; }
.header_fixed .logo_top { display: none; } 
.header_fixed .logo_scroll { display: block; }
.header_fixed_bg { background: rgba(0,0,0,0.52); opacity: 1; top:0; transition: all 1s ease-out; }
.sub_cont_fv { position: relative; }
.sub_cont_fv::before { content:""; display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.30); z-index: -1; }
.sub_cont_fv h1 { text-align: center; color: #FFF; padding: 10vh 0; margin: 0; }  
.sub_cont_fv h1::after { content:""; display: block; background: #FFF; width: 100px; height: 1px; margin: 1% auto; }
.sub_cont_fv .pankuzu_list { font-size: 14px; }  
.sub_cont_fv h1 span { display: block; font-size: 16px; opacity: .8; }

.sub_cont_bg { background: url("https://kuukaifoods.com/wp-content/themes/suzume-no-oyado/assets/images/hero-1.jpg") fixed repeat; background-size: 100%; width: 100%; position: relative; z-index: -2; background-position: 0 200%; }
.sub_cont_bg::after { content:""; background: rgb(64 188 181 / 30%); backdrop-filter: blur(5px); background-size: 100%; width: 100%;  position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: -1 }

@media (max-width: 1137px) { 
  .sub_cont_fv h1 { padding: 20% 0 15% 0; }
}
@media (max-width: 768px) {
  .sub_cont_fv { margin-top: 0%; }
}