@charset "UTF-8";
/*
Theme Name:     Kura Child
Theme URI:      https://kuraweb.com/
Template:       lightning
Author:         Kura
Author URI:     https://kuraweb.com/
Description:    味工房 蔵 ／ アクアセラピー 蔵 統合サイト用の Lightning 子テーマ
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    kura-child
*/

/* =========================================================
   フォントの読み込み
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* =========================================================
   蔵 共通カラー変数
   全テンプレートで共通利用
   ========================================================= */
:root {
  /* 蔵カラー：土壁・木・墨（玄関＝中立色） */
  --kura-charcoal: #3a322c;       /* 墨色（玄関のメイン） */
  --kura-deep: #2a2421;           /* 深墨 */
  --kura-wall: #d8c9b0;           /* 土壁色 */
  --kura-wall-light: #ebe0cd;     /* 明るい土壁 */
  --kura-wall-bg: #f5ede0;        /* 背景・和紙色 */
  --kura-gold: #b08d4c;           /* 金茶（アクセント） */
  --kura-gold-light: #d4b87e;     /* 明るい金茶 */

  /* お弁当ページ用カラー */
  --bento-red: #b8332a;           /* 暖簾の赤 */
  --bento-deep-red: #8b1d18;
  --bento-orange: #d97441;
  --bento-green: #4a6741;

  /* アクアページ用カラー */
  --aqua-blue: #2a6f97;
  --aqua-deep: #013a63;
  --aqua-light: #a9d6e5;
  --aqua-bg: #eaf4f8;

  /* 共通：テキスト・線 */
  --ink: #2c1810;
  --brown: #6b5544;
  --cream: #fdf8ef;
  --kinari: #f5ead5;
  --warm-bg: #fcf4e4;
  --line: rgba(58, 50, 44, 0.12);
}

/* =========================================================
   基本リセット（蔵デザイン用）
   Lightning のスタイルを上書き
   ========================================================= */
body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* 蔵デザインを適用するページでは Lightning のコンテナを全幅化 */
body.page-template-page-portal .site-body,
body.page-template-page-kura .site-body,
body.page-template-page-aqua .site-body {
  padding: 0;
}

body.page-template-page-portal .container,
body.page-template-page-kura .container,
body.page-template-page-aqua .container,
body.kura-section-bento .container,
body.kura-section-aqua .container,
body.kura-section-company .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* デフォルトのページタイトル・パンくずなどを非表示 */
body.page-template-page-portal .page-header,
body.page-template-page-kura .page-header,
body.page-template-page-aqua .page-header,
body.page-template-page-portal .breadcrumb,
body.page-template-page-kura .breadcrumb,
body.page-template-page-aqua .breadcrumb,
body.kura-section-bento .page-header,
body.kura-section-aqua .page-header,
body.kura-section-bento .breadcrumb,
body.kura-section-aqua .breadcrumb,
body.kura-section-company .page-header,
body.kura-section-company .breadcrumb {
  display: none;
}

/* Lightning のサイドバー非表示（蔵のページではフル表示） */
body.page-template-page-portal #side,
body.page-template-page-kura #side,
body.page-template-page-aqua #side,
body.kura-section-bento #side,
body.kura-section-aqua #side,
body.kura-section-company #side {
  display: none;
}

body.page-template-page-portal #main,
body.page-template-page-kura #main,
body.page-template-page-aqua #main,
body.kura-section-bento #main,
body.kura-section-aqua #main,
body.kura-section-company #main {
  width: 100%;
}

/* Lightning のフッターを子テーマで完全に置き換える場合は非表示にする */
/* ※ 必要に応じてコメントを外してください
body.page-template-page-portal .site-footer,
body.page-template-page-kura .site-footer,
body.page-template-page-aqua .site-footer {
  display: none;
}
*/

/* =========================================================
   注：個別のページデザイン（玄関・お弁当・アクア）は
   それぞれ assets/css/portal.css、kura.css、aqua.css に
   分けて、functions.php で条件付きで読み込みます。
   ========================================================= */

/* =========================================================
   Lightning の見出しスタイル上書き
   蔵デザインのページ内では h1〜h6 のボーダー・背景・パディングをリセット
   色は color: inherit で親要素から継承させる（白背景は白文字、暗背景は白文字を保持）
   ========================================================= */
body.page-template-page-portal h1,
body.page-template-page-portal h2,
body.page-template-page-portal h3,
body.page-template-page-portal h4,
body.page-template-page-kura h1,
body.page-template-page-kura h2,
body.page-template-page-kura h3,
body.page-template-page-kura h4,
body.page-template-page-aqua h1,
body.page-template-page-aqua h2,
body.page-template-page-aqua h3,
body.page-template-page-aqua h4 {
  border: none;
  background: none;
  padding: 0;
  text-align: inherit;
  color: inherit;
}

/* セクション見出しは中央寄せを強制 */
body.page-template-page-kura .section-head h2,
body.page-template-page-kura .section-head .lbl,
body.page-template-page-aqua .aqua-section-head h2,
body.page-template-page-aqua .aqua-section-head .lbl {
  text-align: center;
}

/* =========================================================
   フッター・CTA ブロックの文字色（暗背景なので白系）
   ※ Lightning(VK) の h2/h3/h4 タグへの強い指定に勝つため、
      h2 タグそのものに対して詳細度の高いセレクタで上書きします
   ========================================================= */

/* お弁当ページ：CTA ブロック内の h2/p/lbl すべて白に
   ※ page-kura テンプレ または kura-section-bento クラスが付いてれば適用 */
html body.page-template-page-kura div.kura-cta-block h2,
html body.page-template-page-kura div.kura-cta-block .cta-inner h2,
html body.page-template-page-kura div.kura-cta-block p,
html body.page-template-page-kura div.kura-cta-block .lbl,
html body.page-template-page-kura div.kura-cta-block .cta-inner .lbl,
html body.kura-section-bento div.kura-cta-block h2,
html body.kura-section-bento div.kura-cta-block .cta-inner h2,
html body.kura-section-bento div.kura-cta-block p,
html body.kura-section-bento div.kura-cta-block .lbl,
html body.kura-section-bento div.kura-cta-block .cta-inner .lbl {
  color: #ffffff !important;
}

/* アクアページ：CTA ブロック内の h2/p/lbl すべて白に */
html body.page-template-page-aqua div.aqua-cta-block h2,
html body.page-template-page-aqua div.aqua-cta-block .cta-inner h2,
html body.page-template-page-aqua div.aqua-cta-block p,
html body.page-template-page-aqua div.aqua-cta-block .lbl,
html body.page-template-page-aqua div.aqua-cta-block .cta-inner .lbl,
html body.kura-section-aqua div.aqua-cta-block h2,
html body.kura-section-aqua div.aqua-cta-block .cta-inner h2,
html body.kura-section-aqua div.aqua-cta-block p,
html body.kura-section-aqua div.aqua-cta-block .lbl,
html body.kura-section-aqua div.aqua-cta-block .cta-inner .lbl {
  color: #ffffff !important;
}

/* =========================================================
 * 共通フッターのVK対策（footer-kura.php 全テンプレ共通）
 * 蔵デザインのすべてのフッターに自動で効きます
 * ========================================================= */

/* すべてのフッター内の見出し・段落の装飾を除去 */
html body footer.kura-footer h3,
html body footer.aqua-footer h3,
html body footer.company-footer h3,
html body footer.kura-shared-footer h3,
html body footer.kura-footer h4,
html body footer.aqua-footer h4,
html body footer.company-footer h4,
html body footer.kura-shared-footer h4 {
  background: none !important;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}

/* h3 のテキスト色（生成り） */
html body footer.kura-footer h3,
html body footer.aqua-footer h3,
html body footer.company-footer h3,
html body footer.kura-shared-footer h3 {
  color: var(--kinari) !important;
}

/* h4 のテキスト色（金茶）＋下線 */
html body footer.kura-footer h4,
html body footer.aqua-footer h4,
html body footer.company-footer h4,
html body footer.kura-shared-footer h4 {
  color: var(--kura-gold) !important;
  border-bottom: 1px solid rgba(245, 234, 213, 0.2) !important;
  padding-bottom: 10px !important;
}

/* 段落・footer-bottom のテキスト色（生成り） */
html body footer.kura-footer p,
html body footer.aqua-footer p,
html body footer.company-footer p,
html body footer.kura-shared-footer p,
html body footer.kura-footer .footer-bottom,
html body footer.aqua-footer .footer-bottom,
html body footer.company-footer .footer-bottom,
html body footer.kura-shared-footer .footer-bottom {
  color: var(--kinari) !important;
}

/* VK の h2 ボーダー・装飾を完全に消す（CTAブロックのみ。フッターは上で対応済み） */
html body.page-template-page-kura .kura-cta-block h2,
html body.page-template-page-aqua .aqua-cta-block h2,
html body.kura-section-bento .kura-cta-block h2,
html body.kura-section-aqua .aqua-cta-block h2 {
  border: none !important;
  border-bottom: none !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* =========================================================
   蔵デザイン共通：ハンバーガーメニュー＆ヘッダー固定
   ========================================================= */

/* Lightningの親コンテナの overflow を解除（sticky が効くように） */
body.page-template-page-kura,
body.page-template-page-aqua,
body.page-template-page-aqua-information,
body.page-template-page-aqua-service,
body.page-template-page-aqua-contact,
body.page-template-page-company,
body.kura-section-bento,
body.kura-section-aqua {
  overflow-x: clip;
}
body.page-template-page-kura #main,
body.page-template-page-aqua #main,
body.page-template-page-aqua-information #main,
body.page-template-page-aqua-service #main,
body.page-template-page-aqua-contact #main,
body.page-template-page-company #main,
body.kura-section-bento #main,
body.kura-section-aqua #main,
body.page-template-page-kura .site-body,
body.page-template-page-aqua .site-body,
body.page-template-page-aqua-information .site-body,
body.page-template-page-aqua-service .site-body,
body.page-template-page-aqua-contact .site-body,
body.page-template-page-company .site-body,
body.kura-section-bento .site-body,
body.kura-section-aqua .site-body,
body.page-template-page-kura .kura-page,
body.page-template-page-aqua .aqua-page,
body.page-template-page-aqua-information .aqua-page,
body.page-template-page-aqua-service .aqua-page,
body.page-template-page-aqua-contact .aqua-page,
body.page-template-page-company .company-page,
body.kura-section-bento .kura-page,
body.kura-section-aqua .aqua-page {
  overflow: visible !important;
  overflow-x: clip;
}

/* PC：ヘッダーをスクロール時に固定 */
html body .kura-nav,
html body .aqua-nav,
html body .company-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* ハンバーガーボタン（PCでは非表示） */
.kura-hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 101;
}
.kura-hamburger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kura-hamburger span:nth-child(1) { top: 14px; }
.kura-hamburger span:nth-child(2) { top: 21px; }
.kura-hamburger span:nth-child(3) { top: 28px; }

/* お弁当系：色を赤に */
body.kura-section-bento .kura-hamburger span,
body.page-template-page-kura .kura-hamburger span {
  background: var(--bento-red);
}

/* アクア系：色を青に */
body.kura-section-aqua .kura-hamburger span,
body.page-template-page-aqua .kura-hamburger span,
body.page-template-page-aqua-information .kura-hamburger span,
body.page-template-page-aqua-service .kura-hamburger span,
body.page-template-page-aqua-contact .kura-hamburger span {
  background: var(--aqua-blue);
}

/* 会社案内：色を金茶に */
body.page-template-page-company .kura-hamburger span {
  background: var(--kura-charcoal);
}

/* 開いてる時：×印に */
.kura-hamburger.is-active span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.kura-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.kura-hamburger.is-active span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* オーバーレイ */
.kura-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44, 24, 16, 0.6);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.kura-drawer-overlay.is-open {
  display: block;
  opacity: 1;
}

/* ドロワーメニュー（モバイル時に右からスライドイン） */
.kura-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  background: white;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(44, 24, 16, 0.2);
  visibility: hidden;
}
.kura-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* WordPress管理バーがある場合の対応 */
body.admin-bar .kura-drawer {
  top: 46px;
  height: calc(100vh - 46px);
}
@media screen and (min-width: 783px) {
  body.admin-bar .kura-drawer {
    top: 32px;
    height: calc(100vh - 32px);
  }
}
/* オーバーレイも管理バー対応 */
body.admin-bar .kura-drawer-overlay {
  top: 46px;
}
@media screen and (min-width: 783px) {
  body.admin-bar .kura-drawer-overlay {
    top: 32px;
  }
}

/* ドロワーのヘッダー */
.kura-drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--kura-wall-bg);
}
.kura-drawer-title {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.1em;
}
.kura-drawer-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--brown);
  padding: 4px 8px;
  line-height: 1;
}

/* ドロワーの本体（スクロール可能） */
.kura-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
}

/* ドロワーのナビメニュー */
.kura-drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kura-drawer-nav li {
  list-style: none;
}
.kura-drawer-nav a {
  display: block;
  padding: 16px 24px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', sans-serif;
  font-weight: 600;
  border-bottom: 1px solid rgba(58, 50, 44, 0.06);
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.kura-drawer-nav a:hover {
  background: var(--kura-wall-bg);
  padding-left: 30px;
}

/* お弁当用カラー */
body.kura-section-bento .kura-drawer-nav a:hover,
body.page-template-page-kura .kura-drawer-nav a:hover {
  background: var(--warm-bg);
  color: var(--bento-red);
}
body.kura-section-bento .kura-drawer-nav li.menu-item-cta a,
body.page-template-page-kura .kura-drawer-nav li.menu-item-cta a {
  background: var(--bento-red);
  color: white !important;
}

/* アクア用カラー */
body.kura-section-aqua .kura-drawer-nav a:hover,
body.page-template-page-aqua .kura-drawer-nav a:hover,
body.page-template-page-aqua-information .kura-drawer-nav a:hover,
body.page-template-page-aqua-service .kura-drawer-nav a:hover,
body.page-template-page-aqua-contact .kura-drawer-nav a:hover {
  background: var(--aqua-bg);
  color: var(--aqua-blue);
}
body.kura-section-aqua .kura-drawer-nav li.menu-item-cta a,
body.page-template-page-aqua .kura-drawer-nav li.menu-item-cta a,
body.page-template-page-aqua-information .kura-drawer-nav li.menu-item-cta a,
body.page-template-page-aqua-service .kura-drawer-nav li.menu-item-cta a,
body.page-template-page-aqua-contact .kura-drawer-nav li.menu-item-cta a {
  background: var(--aqua-blue);
  color: white !important;
}

/* ドロワーのフッター（電話番号など） */
.kura-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--line);
  background: var(--kura-wall-bg);
}
.kura-drawer-tel {
  display: block;
  background: white;
  padding: 16px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.kura-drawer-tel .label {
  font-size: 11px;
  color: var(--brown);
  margin-bottom: 4px;
  display: block;
  letter-spacing: 0.05em;
}
.kura-drawer-tel .num {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}
.kura-drawer-home {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--brown);
  text-decoration: none;
  padding: 10px;
  border-radius: 100px;
  background: white;
  border: 1px solid var(--line);
}

/* ドロワー開いてる時、bodyスクロール禁止 */
body.is-drawer-open {
  overflow: hidden;
}

/* =========================================================
   モバイル表示
   ========================================================= */
@media (max-width: 900px) {
  /* ハンバーガー表示 */
  .kura-hamburger {
    display: block !important;
  }

  /* PC用ナビメニューを非表示 */
  html body .kura-nav .kura-nav-menu,
  html body .aqua-nav .aqua-nav-menu,
  html body .kura-nav > div.kura-nav-menu,
  html body .aqua-nav > div.aqua-nav-menu {
    display: none !important;
  }

  /* 「← トップへ戻る」「← アクアトップに戻る」を完全に非表示 */
  html body .kura-nav .nav-back,
  html body .aqua-nav .nav-back,
  html body .company-header .nav-back,
  html body .header-back {
    display: none !important;
  }

  /* ヘッダーをコンパクトに */
  html body .kura-nav,
  html body .aqua-nav {
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  html body .company-header {
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0 !important;
  }

  /* ロゴエリアは左寄せで省スペース化 */
  html body .kura-nav .nav-left,
  html body .aqua-nav .nav-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* ヘッダー内のロゴサイズ調整 */
  html body .aqua-nav-brand .name,
  html body .kura-nav-brand .name {
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
  }
  html body .aqua-nav-brand .sub,
  html body .kura-nav-brand .sub {
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
  }
  html body .aqua-nav-brand .mark,
  html body .kura-nav-brand .mark {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }
  html body .aqua-nav-brand,
  html body .kura-nav-brand {
    gap: 10px !important;
  }
}

/* =========================================================
   ロゴ画像（ヘッダーのブランド部分）
   ========================================================= */
.kura-nav-brand.has-logo,
.aqua-nav-brand.has-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 4px 0;
}

.brand-logo-img {
  display: block;
  height: auto;
  width: auto;
  max-width: 180px;
  max-height: 50px;
  object-fit: contain;
}

/* スマホ */
@media (max-width: 900px) {
  .brand-logo-img {
    max-width: 140px;
    max-height: 40px;
  }
}

/* hover効果 */
.kura-nav-brand.has-logo:hover .brand-logo-img,
.aqua-nav-brand.has-logo:hover .brand-logo-img {
  opacity: 0.8;
  transition: opacity 0.2s;
}