/* =========================================================
   沖縄そば だしと釜 専用スキン（site.css）
   - 土台は業種テーマ「焼肉」（エディタで適用）。ここで 藍 × 木目 × 和紙・明朝 に着せ替える
   - 読み込みは header.php（各ページ <head> の style / blocks / custom.css より後）
   - 焼肉テーマのブロック CSS は !important が多い → ここでは body を前に付けて詳細度を上げ、
     上書きが必要な所だけ !important を付ける
   - 画像は /image/site/（画像管理には上げない）
   - 計画書 docs/site_plan_2026-09-29.md §2
========================================================= */

:root {
  --dk-ai: #044370;          /* 藍（ロゴの地色）：ポイントカラー */
  --dk-ai-deep: #032b48;
  --dk-ai-soft: #cddbe6;
  --dk-wood: #7a4f31;        /* 木目画像の下地色 */
  --dk-wood-dark: #2c1c12;
  --dk-paper: #f6efe2;       /* 和紙 */
  --dk-paper-2: #fbf7ef;
  --dk-ink: #2b2019;         /* 本文（和紙の上） */
  --dk-ink-sub: #54463a;
  --dk-cream: #f6ecd9;       /* 暗い地の上の文字 */
  --dk-cream-sub: #dcc9a8;
  --dk-shu: #c23a2b;         /* 朱（角印） */
  --dk-line: #b07840;        /* 金茶の線 */
  --dk-head: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --dk-body: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "游明朝", serif;
  --dk-wood-img: url("/image/site/bg_wood.jpg");
  --dk-washi-img: url("/image/site/bg_washi.jpg");
  --dk-minsa: url("/image/site/minsa_band.svg");
  --dk-minsa-ai: url("/image/site/minsa_band_ai.svg");
  --dk-minsa-cream: url("/image/site/minsa_band_cream.svg");
  --dk-dots: radial-gradient(circle, rgba(4, 67, 112, .075) 1.3px, transparent 1.7px);  /* やちむんの点打ち */
  --dk-wrap: 1120px;

  /* 焼肉テーマの :root（暗い地・金）を、この店の色に置き換える */
  --bg-base: #2c1c12;
  --bg-paper: #f6efe2;
  --bg-warm: #f6efe2;
  --ink: #2b2019;
  --text-main: #2b2019;
  --text-sub: #54463a;
  --text-muted: #7a6a5c;
  --gold: #b07840;
  --gold-light: #d7b889;
  --line: rgba(176, 120, 64, .35);
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
}

/* ---------- 全体 ---------- */
html body {
  background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto;
  color: var(--dk-ink);
  font-family: var(--dk-body);
  font-weight: 500;
  line-height: 1.9;
}
body a:hover { color: inherit; }
.dk-sp { display: none; }
@media (max-width: 768px) { .dk-sp { display: inline; } .dk-pc { display: none; } }

/* 英字ラベル＋日本語見出し（断片・各ブロック共通の型） */
.dk-head { text-align: center; margin: 0 0 40px; }
.dk-head-en,
body .dk-head .dk-head-en {
  margin: 0 0 10px; color: var(--dk-ai); font-family: var(--dk-head); font-size: 13px; font-weight: 700;
  letter-spacing: .32em; line-height: 1.4;
}
.dk-head-ja,
body .dk-head .dk-head-ja {
  margin: 0; color: var(--dk-ink); font-family: var(--dk-head); font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800;
  letter-spacing: .14em; line-height: 1.5;
}
.dk-head::after {
  content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0;
  background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px; opacity: .9;
}

/* ボタン（藍地・白文字・明朝。右に細い線） */
body .fc-block-btn,
body .btn-recruit-link,
body .fc-instagram-embed-action a,
.dk-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  min-height: 54px !important; padding: 0 36px 0 40px !important; border: 1px solid var(--dk-ai) !important; border-radius: 0 !important;
  background: var(--dk-ai) !important; color: #fff !important; font-family: var(--dk-head) !important; font-size: 14px !important;
  font-weight: 700 !important; letter-spacing: .22em !important; text-decoration: none !important; box-shadow: none !important;
  white-space: nowrap !important; transition: background .3s ease, border-color .3s ease !important;
}
body .fc-block-btn::after,
body .btn-recruit-link::after,
body .fc-instagram-embed-action a::after,
.dk-btn::after {
  content: ""; display: block; width: 22px; height: 1px; margin-left: 6px; background: currentColor; transition: width .3s ease;
}
body .fc-block-btn:hover,
body .btn-recruit-link:hover,
body .fc-instagram-embed-action a:hover,
.dk-btn:hover { background: var(--dk-ai-deep) !important; border-color: var(--dk-ai-deep) !important; color: #fff !important; transform: none !important; }
body .fc-block-btn:hover::after,
body .btn-recruit-link:hover::after,
body .fc-instagram-embed-action a:hover::after,
.dk-btn:hover::after { width: 34px; }
body .btn-recruit-link i { display: none !important; }
.dk-btn i { font-size: 1.15em; }

/* =========================================================
   ヘッダー
   - MV の上：左上にロゴ（白抜き）、その下に縦書きナビ、右上に H1（小）と Instagram
   - MV を過ぎたら（site.js が .dk-fixed を付ける）藍の横並びバーで上部に固定
   - 電話番号は出さない（指示書）
========================================================= */
body .global-header { padding: 34px 50px !important; }
body .global-header .header-page-eyebrow {
  top: 12px; right: 50px; color: rgba(255, 255, 255, .9); opacity: 1; font-family: var(--dk-head); font-size: 11.5px;
  letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); max-width: 62%;
}
body .header-logo img {
  height: 116px !important; max-height: none !important; width: auto !important;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .55)) !important;
}
body .desktop-nav { top: 178px !important; left: 62px !important; gap: 16px !important; }
body .desktop-nav a {
  font-family: var(--dk-head) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .42em !important;
  color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .75) !important;
}
body .desktop-nav a:hover,
body .desktop-nav a.active { color: #f3dfb6 !important; }
body .desktop-nav a::after { background: #f3dfb6 !important; left: -9px !important; }
/* 電話番号・予約ボタンは出さない */
body .global-header .header-btns { display: none !important; }
/* Instagram（ヘッダーの外部リンク 1）は右上のアイコンに */
body .desktop-nav a[href*="instagram.com"] {
  position: absolute !important; top: -144px; right: auto; left: calc(100vw - 62px - 62px - 36px);
  width: 36px; height: 36px; padding: 0 !important; font-size: 0 !important; letter-spacing: 0 !important; writing-mode: horizontal-tb !important;
  display: flex !important; align-items: center; justify-content: center;
}
body .desktop-nav a[href*="instagram.com"]::before {
  content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400; font-size: 24px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
body .desktop-nav a[href*="instagram.com"]::after { display: none !important; }
body .desktop-nav a[href*="instagram.com"]:hover::before { color: #f3dfb6; }

/* 固定バー（スクロール後） */
@keyframes dkHeaderIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
body .global-header.dk-fixed {
  position: fixed !important; height: 72px; padding: 0 44px !important; align-items: center !important;
  background: var(--dk-ai) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, .22) !important;
  animation: dkHeaderIn .38s ease both;
}
body .global-header.dk-fixed::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: var(--dk-minsa) repeat-x 0 0 / auto 10px; pointer-events: none;
}
body .global-header.dk-fixed .header-page-eyebrow { display: none; }
body .global-header.dk-fixed .header-logo {
  width: 186px; height: 48px; background: url("/image/site/logo_bar_white.png") left center / contain no-repeat;
}
body .global-header.dk-fixed .header-logo img { display: none !important; }
body .global-header.dk-fixed .desktop-nav {
  position: static !important; margin-left: auto !important; align-items: center !important; gap: 34px !important;
}
body .global-header.dk-fixed .desktop-nav a {
  writing-mode: horizontal-tb !important; font-size: 14.5px !important; letter-spacing: .16em !important; line-height: 72px !important;
  text-shadow: none !important;
}
body .global-header.dk-fixed .desktop-nav a::after {
  top: auto !important; left: 0 !important; bottom: 20px !important; width: 0 !important; height: 2px !important;
  transition: width .28s ease !important;
}
body .global-header.dk-fixed .desktop-nav a:hover::after,
body .global-header.dk-fixed .desktop-nav a.active::after { width: 100% !important; height: 2px !important; }
body .global-header.dk-fixed .desktop-nav a[href*="instagram.com"] { position: static !important; line-height: 1 !important; font-size: 0 !important; letter-spacing: 0 !important; }
body .global-header.dk-fixed .desktop-nav a[href*="instagram.com"]::before { font-size: 21px; text-shadow: none; }

/* PC 幅の中でも狭いとき（ナビ 6 項目＋ロゴが 1 行に入る幅＝約 1000px） */
@media (max-width: 1100px) and (min-width: 769px) {
  body .global-header.dk-fixed { padding: 0 24px !important; }
  body .global-header.dk-fixed .desktop-nav { gap: 22px !important; }
  body .global-header.dk-fixed .desktop-nav a { letter-spacing: .08em !important; font-size: 14px !important; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  body .global-header { padding: 24px 28px !important; }
  body .header-logo img { height: 96px !important; }
  body .desktop-nav { top: 146px !important; left: 40px !important; }
  body .desktop-nav a[href*="instagram.com"] { left: calc(100vw - 40px - 40px - 36px); top: -114px; }
}

/* スマホ：ロゴ（横組み）＋ハンバーガーの細いバーを常に上部に固定。MV の上は透明、過ぎたら藍 */
@media (max-width: 768px) {
  body .global-header {
    position: fixed !important; height: 60px; padding: 0 14px 0 16px !important; align-items: center !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)) !important;
    transition: background .3s ease, box-shadow .3s ease;
  }
  body .global-header.dk-fixed { height: 60px; padding: 0 14px 0 16px !important; background: var(--dk-ai) !important; animation: none; }
  body .global-header.dk-fixed::before { bottom: -8px; height: 8px; background-size: auto 8px; }
  body .global-header .header-logo,
  body .global-header.dk-fixed .header-logo {
    width: 150px; height: 40px; background: url("/image/site/logo_bar_white.png") left center / contain no-repeat;
  }
  body .global-header .header-logo img { display: none !important; }
  body .menu-trigger { color: #fff !important; font-size: 25px !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .5) !important; margin-top: 0 !important; }
}

/* スマホのメニュー（全画面・和紙） */
body .mobile-nav-overlay { background: var(--dk-paper) var(--dk-washi-img) repeat 0 0 / 900px auto !important; }
body .mobile-nav-overlay::before {
  content: ""; width: 210px; height: 175px; margin-bottom: 18px; background: url("/image/site/logo_black.png") center / contain no-repeat;
}
body .mobile-nav-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--dk-minsa) repeat-x 0 0 / auto 24px;
}
body .mobile-nav-overlay a {
  margin: 9px 0 !important; color: var(--dk-ink) !important; font-family: var(--dk-head) !important; font-size: 19px !important;
  letter-spacing: .24em !important;
}
body .mobile-nav-overlay a:hover { color: var(--dk-ai) !important; }
body .mobile-nav-overlay a[href*="instagram.com"] { margin-top: 18px !important; color: var(--dk-ai) !important; font-size: 16px !important; letter-spacing: .12em !important; }
body .mobile-nav-overlay a[href*="instagram.com"]::before { content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400; margin-right: .5em; }
body .mobile-nav-overlay .menu-trigger { color: var(--dk-ai) !important; text-shadow: none !important; font-size: 26px !important; }

/* =========================================================
   MV（hero_main）
========================================================= */
body .hero-wrapper { background: var(--dk-wood-dark) !important; }
body .hero-wrapper::before { content: none !important; display: none !important; }  /* 焼肉テーマの「炭火とお酒…」の直書きを消す */
body .hero-wrapper::after {
  z-index: 2 !important;
  background:
    linear-gradient(180deg, rgba(20, 12, 6, .62) 0%, rgba(20, 12, 6, .08) 32%, rgba(20, 12, 6, .1) 62%, rgba(20, 12, 6, .55) 100%),
    linear-gradient(270deg, rgba(20, 12, 6, .42) 0%, rgba(20, 12, 6, 0) 36%),
    linear-gradient(90deg, rgba(20, 12, 6, .5) 0%, rgba(20, 12, 6, 0) 26%) !important;
  box-shadow: none !important;
}
/* キャッチ：右寄せの縦書き（テーマの重ね(::after)より上） */
body .hero-slider .hero-slide-caption {
  z-index: 5 !important; top: 50% !important; bottom: auto !important; left: auto !important; right: 8vw !important;
  padding: 0 !important; transform: translateY(-50%) !important; writing-mode: vertical-rl; text-align: left !important;
}
body .hero-slider .hero-slide-catch {
  margin: 0 !important; color: #fff !important; font-family: var(--dk-head) !important; font-size: clamp(1.9rem, 3.1vw, 3rem) !important;
  font-weight: 800 !important; line-height: 1.85 !important; letter-spacing: .32em !important; white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .5) !important;
}
/* キャッチの上に朱の角印（縦書きの段の上・中央） */
body .hero-slider .hero-slide-caption::before {
  content: ""; position: absolute; top: -66px; left: 50%; width: 42px; height: 42px; margin-left: -21px;
  background: url("/image/site/logo_hanko.png") center / contain no-repeat; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
body .hero-slider-dots { z-index: 6 !important; bottom: 34px !important; }
body .hero-slider-dot { background: rgba(255, 255, 255, .45) !important; border-color: transparent !important; }
body .hero-slider-dot.is-active { background: #fff !important; }
/* MV の下辺にミンサー柄の帯 */
body .hero-wrapper .hero-slider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 22px;
  background: var(--dk-minsa) repeat-x 0 0 / auto 22px;
}
@media (max-width: 768px) {
  body .hero-slider .hero-slide-caption { right: 7vw !important; top: 54% !important; }
  body .hero-slider .hero-slide-catch { font-size: clamp(1.45rem, 7.2vw, 1.9rem) !important; letter-spacing: .26em !important; }
  body .hero-slider .hero-slide-caption::before { top: -50px; width: 32px; height: 32px; margin-left: -16px; }
  body .hero-slider-dots { bottom: 30px !important; }
  body .hero-wrapper .hero-slider::after { height: 14px; background-size: auto 14px; }
}

/* =========================================================
   下層ヒーロー（hero_page）：縦書きのタイトル＋英字（テーマの型）を藍・生成りに
========================================================= */
body .page-hero-wrapper { min-height: 600px !important; background-color: var(--dk-wood-dark) !important; }
body .page-hero-wrapper .ph-overlay,
body .page-hero-wrapper::after {
  background:
    var(--dk-minsa) repeat-x left bottom / auto 20px,
    linear-gradient(to left, rgba(20, 12, 6, .78) 0%, rgba(20, 12, 6, 0) 45%),
    linear-gradient(to right, rgba(20, 12, 6, .55) 0%, rgba(20, 12, 6, 0) 28%),
    linear-gradient(180deg, rgba(20, 12, 6, .6) 0%, rgba(20, 12, 6, .12) 42%, rgba(20, 12, 6, .5) 100%) !important;
}
body .page-hero-wrapper::after { background: none !important; }
body .ph-container { top: 200px !important; right: 9% !important; gap: 22px !important; }
body .ph-title { font-family: var(--dk-head) !important; font-weight: 800 !important; letter-spacing: .3em !important; color: #fff !important; }
body .ph-desc {
  color: #f3dfb6 !important; font-family: var(--dk-head) !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .42em !important; line-height: 1.6 !important;
}
@media (max-width: 1024px) and (min-width: 769px) { body .ph-container { top: 170px !important; } }
@media (max-width: 768px) {
  body .page-hero-wrapper { min-height: 360px !important; }
  body .page-hero-wrapper .ph-overlay { background:
    var(--dk-minsa) repeat-x left bottom / auto 14px,
    linear-gradient(180deg, rgba(20, 12, 6, .55) 0%, rgba(20, 12, 6, .35) 100%) !important; }
  body .ph-container { top: 55% !important; }
  body .ph-title { border-bottom: 0 !important; padding-bottom: 0 !important; letter-spacing: .2em !important; }
  body .ph-desc { font-size: 12px !important; letter-spacing: .36em !important; }
}

/* =========================================================
   concept_split
   (A) ヒーローの直後に置いたもの＝「当店のご案内」「採用の導入」など → 木目の上の和紙カード（横書き）
       ※「ヒーローより後にあり、ヒーローとの間に他のブロック（section / div）が無い最初のコンセプト」と書く。
         MV（スライド）ブロックは直後に <script> を、エディタのプレビューは各ブロックの前に <style> を出力するので、
         「+（直後）」だと効かない場面がある
   (B) それ以外＝TOP のこだわり・お品書き → 参考サイトの朝昼夜の型（縦書き・写真を溶かす）を和紙×藍に
========================================================= */
/* 共通：英字ラベル（eyebrow）を小さく（blocks.css の特大表示を打ち消す） */
body .concept-content p.concept-eyebrow {
  margin: 0 0 14px !important; color: var(--dk-ai) !important; font-family: var(--dk-head) !important; font-size: 13px !important;
  font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .34em !important; text-shadow: none !important;
  max-height: none !important;
}

/* (B) 縦書きの帯 */
body .concept-section {
  border-top: 0 !important; border-bottom: 0 !important; padding: 22px 0 0 !important;
  background: var(--dk-paper) var(--dk-dots) 0 0 / 22px 22px !important;
}
body .concept-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 30;
  background: var(--dk-minsa) repeat-x 0 0 / auto 22px;
}
body .concept-section .concept-content { gap: 44px !important; padding: 70px 6% !important; }
body .concept-section .concept-title {
  font-family: var(--dk-head) !important; font-weight: 800 !important; font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  letter-spacing: .16em !important; line-height: 1.75 !important; color: var(--dk-ink) !important;
}
body .concept-section .concept-text {
  max-height: 30em !important; font-family: var(--dk-body) !important; font-size: 1rem !important; font-weight: 500 !important;
  line-height: 2.35 !important; letter-spacing: .08em !important; color: var(--dk-ink-sub) !important;
}
body .concept-section .concept-content p.concept-eyebrow {
  writing-mode: vertical-rl !important; font-size: 15px !important; letter-spacing: .5em !important; padding-top: 0 !important;
  border-right: 2px solid var(--dk-ai); padding-right: 10px !important; height: max-content;
}
body .concept-section .concept-content .fc-block-btn-wrap { flex: 0 0 auto !important; align-self: flex-end; margin: 0 !important; }
body .concept-section .concept-img-wrapper { min-height: 560px !important; }
body .concept-section .concept-img-wrapper img { filter: saturate(1.05) contrast(1.02) !important; }

/* (A) ヒーロー直後：木目の上に和紙のカード（横書き・写真は右） */
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section),
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) {
  padding: 110px 24px !important; background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto !important;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section)::before,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section)::before { display: none; }
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container {
  max-width: var(--dk-wrap) !important; margin: 0 auto !important; flex-direction: row !important;
  background: var(--dk-paper) var(--dk-washi-img) repeat 0 0 / 900px auto; border-left: 6px solid var(--dk-ai);
  box-shadow: 0 22px 50px rgba(20, 12, 6, .35);
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content {
  display: block !important; flex: 1 1 auto !important; padding: 72px 64px 70px !important;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title,
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-text,
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content p,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-text,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content p { writing-mode: horizontal-tb !important; text-shadow: none !important; max-height: none !important; }
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content p.concept-eyebrow,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content p.concept-eyebrow {
  writing-mode: horizontal-tb !important; border-right: 0; padding-right: 0 !important; font-size: 13px !important; letter-spacing: .34em !important;
  text-align: left !important;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title {
  margin: 0 0 30px !important; font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; line-height: 1.6 !important; letter-spacing: .14em !important;
  text-align: left !important;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title::after,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-title::after {
  content: ""; display: block; width: 156px; height: 20px; margin-top: 18px; background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-text,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-text {
  font-size: 1rem !important; line-height: 2.15 !important; letter-spacing: .05em !important; text-align: left !important;
}
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .fc-block-btn-wrap,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .fc-block-btn-wrap { margin-top: 36px !important; }
body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper,
body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper {
  flex: 0 0 42% !important; min-height: 460px !important; margin: 0 !important; -webkit-mask-image: none !important; mask-image: none !important;
}

@media (max-width: 1024px) {
  body .concept-section .concept-content { gap: 34px !important; padding: 60px 5% !important; }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container,
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container { flex-direction: column-reverse !important; }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper,
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper { flex: none !important; min-height: 320px !important; }
}
@media (max-width: 768px) {
  body .concept-section { padding: 14px 0 0 !important; }
  body .concept-section::before { height: 14px; background-size: auto 14px; }
  body .concept-section .concept-content { padding: 48px 22px 40px !important; }
  /* 反転（写真が左）の帯はテーマの詳細度が高く、スマホでも縦書き・横並びのまま残るので明示的に戻す */
  body .concept-section .concept-container .concept-content { display: block !important; }
  body .concept-section .concept-container .concept-title,
  body .concept-section .concept-container .concept-text,
  body .concept-section .concept-container .concept-content p { writing-mode: horizontal-tb !important; max-height: none !important; text-align: left !important; }
  body .concept-section .concept-content p.concept-eyebrow { writing-mode: horizontal-tb !important; border-right: 0; padding-right: 0 !important; font-size: 13px !important; letter-spacing: .34em !important; }
  body .concept-section .concept-title { font-size: 1.55rem !important; line-height: 1.65 !important; letter-spacing: .1em !important; }
  body .concept-section .concept-text { font-size: .95rem !important; line-height: 2.05 !important; letter-spacing: .04em !important; }
  body .concept-section .concept-content .fc-block-btn-wrap { margin-top: 26px !important; }
  body .concept-section .concept-img-wrapper { min-height: 260px !important; }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section),
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) { padding: 56px 14px !important; }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container,
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-container { border-left: 0; border-top: 5px solid var(--dk-ai); }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content,
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-content { padding: 40px 22px 44px !important; }
  body .hero-wrapper ~ .concept-section:not(.hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper,
  body .page-hero-wrapper ~ .concept-section:not(.page-hero-wrapper ~ :is(section, div) ~ .concept-section) .concept-img-wrapper { min-height: 230px !important; }
  body .fc-block-btn,
  body .btn-recruit-link,
  body .fc-instagram-embed-action a,
  .dk-btn { width: 100% !important; padding: 0 20px !important; }
}

/* =========================================================
   採用バナー（recruit_banner）：木目の上の二重枠カード＋「RECRUIT」の透かし
========================================================= */
body .recruit-banner-section { padding: 110px 24px !important; background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto !important; }
body .recruit-banner-container {
  max-width: 920px !important; padding: 70px 60px 64px !important; border: 1px solid rgba(4, 67, 112, .5) !important;
  background: var(--dk-paper) var(--dk-washi-img) repeat 0 0 / 900px auto !important; box-shadow: 0 22px 50px rgba(20, 12, 6, .35) !important;
}
body .recruit-banner-container::before { border-color: rgba(246, 236, 217, .7) !important; opacity: .8 !important; }
body .recruit-banner-container::after {
  color: rgba(4, 67, 112, .06) !important; font-family: var(--dk-head) !important; font-size: 5.6rem !important; letter-spacing: .12em !important;
}
body .recruit-title {
  color: var(--dk-ink) !important; font-family: var(--dk-head) !important; font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important;
  font-weight: 800 !important; letter-spacing: .16em !important; margin: 0 0 30px !important;
}
body .recruit-title::before {
  content: "RECRUIT"; display: block; margin-bottom: 10px; color: var(--dk-ai); font-size: 13px; font-weight: 700; letter-spacing: .34em;
}
body .recruit-title::after {
  content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0; background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px;
}
body .recruit-desc {
  color: var(--dk-ink-sub) !important; font-family: var(--dk-body) !important; font-size: 1rem !important; font-weight: 500 !important;
  line-height: 2.1 !important; margin: 0 0 38px !important;
}
@media (max-width: 768px) {
  body .recruit-banner-section { padding: 60px 16px !important; }
  body .recruit-banner-container { padding: 48px 22px 44px !important; }
  body .recruit-desc { text-align: left; font-size: .95rem !important; line-height: 2 !important; }
}

/* =========================================================
   ギャラリー（image_grid）：和紙の帯・PC 4 列／SP 2 列（エディタの「4列（PC4 / スマホ2）」）
========================================================= */
body .image-grid-section { padding: 100px 24px !important; background: var(--dk-paper) var(--dk-dots) 0 0 / 22px 22px !important; color: var(--dk-ink) !important; }
body .image-grid-container { max-width: 1180px; }
body .image-grid-header { margin-bottom: 44px; }
body .image-grid-title {
  color: var(--dk-ink) !important; font-family: var(--dk-head) !important; font-size: clamp(1.6rem, 2.8vw, 2.1rem) !important; letter-spacing: .16em !important;
}
body .image-grid-title::before { content: "GALLERY"; display: block; margin-bottom: 10px; color: var(--dk-ai); font-size: 13px; font-weight: 700; letter-spacing: .34em; }
body .image-grid-title::after { content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0; background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px; }
body .image-grid-desc { color: var(--dk-ink-sub) !important; }
body .image-grid { gap: 12px !important; }
body .image-grid-item { position: relative; overflow: hidden; background: #d9ccb6; }
body .image-grid-item img { transition: transform .6s ease; }
body .image-grid-item:hover img { transform: scale(1.04); }
@media (max-width: 768px) { body .image-grid-section { padding: 64px 12px !important; } body .image-grid { gap: 8px !important; } }

/* =========================================================
   Instagram（instagram_feed）：木目の上。見出しは生成り
========================================================= */
body .fc-instagram-embed-section { padding: 100px 24px !important; background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto !important; color: var(--dk-cream) !important; }
body .fc-instagram-embed-label { color: #f3dfb6 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .34em !important; }
body .fc-instagram-embed-heading h2 { color: #fff !important; font-size: clamp(1.6rem, 2.8vw, 2.1rem) !important; letter-spacing: .16em !important; }
body .fc-instagram-embed-heading h2::after { content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0; background: var(--dk-minsa-cream) repeat-x 0 0 / auto 20px; }
body .fc-instagram-embed-heading p { color: var(--dk-cream-sub) !important; font-size: 15px !important; }
body .fc-instagram-embed-card--legacy { max-width: 760px !important; margin: 0 auto !important; }
body .fc-instagram-embed-card .instagram-media { border-radius: 0 !important; box-shadow: 0 18px 44px rgba(20, 12, 6, .4) !important; }
body .fc-instagram-embed-action { margin-top: 40px !important; }
body .fc-instagram-embed-action a { background: var(--dk-paper) !important; border-color: var(--dk-paper) !important; color: var(--dk-ai) !important; }
body .fc-instagram-embed-action a:hover { background: #fff !important; border-color: #fff !important; color: var(--dk-ai-deep) !important; }
@media (max-width: 768px) { body .fc-instagram-embed-section { padding: 64px 14px !important; } }

/* =========================================================
   店舗案内（store_info）と地図（gmap）
   (1) TOP：店舗概要と地図を左右に並べる（ブロックは 店舗概要 → Googleマップ の順に隣り合わせる。
       間にエディタのプレビューが入れる <style> が 2 つまで挟まっても効くように書いている）
       ※ ページ本体を 2 列のグリッドにして、この 2 ブロックだけ 1 列ずつ使う（他は全幅）。高さは自動でそろう
   (2) 店舗案内ページ：和紙の帯。店舗概要は指示書の順（任意項目の「貸切・お支払方法」を座席数の前へ）
========================================================= */
body .store-info-section,
body .gmap-section { padding: 100px 24px !important; background: var(--dk-paper) var(--dk-dots) 0 0 / 22px 22px !important; color: var(--dk-ink) !important; }
body .store-info-container,
body .gmap-container { max-width: 960px; }
body .store-info-title,
body .gmap-title {
  color: var(--dk-ink) !important; font-family: var(--dk-head) !important; font-size: clamp(1.6rem, 2.8vw, 2.1rem) !important; letter-spacing: .16em !important;
}
body .store-info-title::before { content: "INFORMATION"; display: block; margin-bottom: 10px; color: var(--dk-ai); font-size: 13px; font-weight: 700; letter-spacing: .34em; }
body .gmap-title::before { content: "ACCESS MAP"; display: block; margin-bottom: 10px; color: var(--dk-ai); font-size: 13px; font-weight: 700; letter-spacing: .34em; }
body .store-info-title::after,
body .gmap-title::after { content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0; background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px; }
body .store-info-desc,
body .gmap-desc { color: var(--dk-ink-sub) !important; font-size: 15px !important; }
body .store-info-table th,
body .store-info-table td { padding: 18px 8px !important; border-bottom: 1px solid rgba(43, 32, 25, .16) !important; font-size: 15px !important; line-height: 1.9 !important; }
body .store-info-table tr:first-child th,
body .store-info-table tr:first-child td { border-top: 1px solid rgba(43, 32, 25, .16) !important; }
body .store-info-table th { width: 150px !important; color: var(--dk-ai) !important; font-family: var(--dk-head) !important; font-weight: 700 !important; letter-spacing: .12em; }
body .store-info-table td { color: var(--dk-ink) !important; }
body .gmap-frame-wrap { border-radius: 0 !important; border: 0 !important; box-shadow: 0 16px 40px rgba(20, 12, 6, .2); background: #e8e0d0 !important; }
body .gmap-frame-wrap iframe { filter: saturate(.85) !important; }

/* (1) TOP：2 列グリッド */
@media (min-width: 901px) {
  body:has(> .hero-wrapper) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body:has(> .hero-wrapper) > * { grid-column: 1 / -1; min-width: 0; }
  body:has(> .hero-wrapper) > .store-info-section:has(+ .gmap-section, + style + .gmap-section, + style + style + .gmap-section) {
    grid-column: 1; padding: 110px 44px 110px max(24px, calc(50vw - 580px)) !important;
  }
  body:has(> .hero-wrapper) > :is(.store-info-section + .gmap-section, .store-info-section + style + .gmap-section, .store-info-section + style + style + .gmap-section) {
    grid-column: 2; padding: 110px max(24px, calc(50vw - 580px)) 110px 12px !important; display: flex; flex-direction: column;
  }
  body:has(> .hero-wrapper) > .store-info-section ~ .gmap-section .gmap-container { width: 100%; max-width: none; flex: 1; display: flex; flex-direction: column; }
  body:has(> .hero-wrapper) > .store-info-section ~ .gmap-section .gmap-frame-wrap { flex: 1; aspect-ratio: auto !important; min-height: 420px; }
  body:has(> .hero-wrapper) > .store-info-section:has(~ .gmap-section) .store-info-header { text-align: left; margin-left: 0; }
  body:has(> .hero-wrapper) > .store-info-section:has(~ .gmap-section) .store-info-title::after { margin-left: 0; }
}
/* TOP の店舗概要は 6 行（店名・電話・住所・アクセス・営業時間・定休日）だけ。
   並び順はブロック設定の row_order＝name,tel,address,access,hours,closed,seats,parking（座席数・駐車場は店舗案内ページ用） */
body:has(> .hero-wrapper) .store-info-table tr:nth-child(n + 7) { display: none; }
body:has(> .hero-wrapper) .store-info-section,
body:has(> .hero-wrapper) .gmap-section {
  background: var(--dk-wood-dark) var(--dk-wood-img) repeat 0 0 / 1000px auto !important; background-blend-mode: multiply !important;
  color: var(--dk-cream) !important;
}
body:has(> .hero-wrapper) .store-info-section { position: relative; }
body:has(> .hero-wrapper) .store-info-title { color: #fff !important; }
body:has(> .hero-wrapper) .store-info-title::before { content: "ACCESS"; color: #f3dfb6; }
body:has(> .hero-wrapper) .store-info-title::after { background-image: var(--dk-minsa-cream); }
body:has(> .hero-wrapper) .store-info-table th,
body:has(> .hero-wrapper) .store-info-table td { border-color: rgba(246, 236, 217, .2) !important; }
body:has(> .hero-wrapper) .store-info-table th { color: #f3dfb6 !important; }
body:has(> .hero-wrapper) .store-info-table td { color: var(--dk-cream) !important; }
body:has(> .hero-wrapper) .gmap-frame-wrap { box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }

/* (2) 店舗案内ページ：指示書の順に並べ替え（表を縦並びの flex にして order で入れ替える）
   DOM の順：1店名 2電話 3住所 4アクセス 5営業時間 6定休日 7座席数 8駐車場 9貸切 10お支払方法 11禁煙喫煙（任意項目） */
body .page-hero-wrapper ~ .store-info-section .store-info-table tbody { display: flex; flex-direction: column; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr { display: flex; }
body .page-hero-wrapper ~ .store-info-section .store-info-table th { flex: 0 0 170px; }
body .page-hero-wrapper ~ .store-info-section .store-info-table td { flex: 1 1 auto; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:nth-child(9) { order: 7; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:nth-child(10) { order: 8; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:nth-child(7) { order: 9; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:nth-child(8) { order: 10; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:nth-child(11) { order: 11; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:first-child th,
body .page-hero-wrapper ~ .store-info-section .store-info-table tr:first-child td { border-top: 0 !important; }
body .page-hero-wrapper ~ .store-info-section .store-info-table tbody { border-top: 1px solid rgba(43, 32, 25, .16); }
body .page-hero-wrapper ~ .gmap-section { padding-top: 20px !important; }
@media (max-width: 768px) {
  body .store-info-section,
  body .gmap-section { padding: 64px 16px !important; }
  body .store-info-section ~ .gmap-section { padding-top: 0 !important; }
  body .store-info-table th,
  body .store-info-table td { padding: 14px 4px !important; font-size: 14px !important; }
  body .store-info-table th { width: 96px !important; letter-spacing: .06em; }
  body .page-hero-wrapper ~ .store-info-section .store-info-table th { flex: 0 0 100px; }
}

/* =========================================================
   共通フッター：藍の帯に ロゴ＋ナビ＋©（店舗情報・地図は TOP と店舗案内ページに集約）
========================================================= */
html body .global-footer,
body .global-footer {
  padding: 84px 20px 56px !important; border-top: 0 !important; background: var(--dk-ai) !important; color: var(--dk-cream) !important;
}
body .global-footer::before {
  content: "" !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 26px !important; z-index: 2 !important;
  background: var(--dk-minsa) repeat-x 0 0 / auto 26px !important; transform: none !important; filter: brightness(1.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
body .global-footer .info-grid { display: none !important; }
body .global-footer .footer-nav-wrap { display: flex !important; flex-direction: column-reverse; align-items: center; gap: 34px; }
body .global-footer .footer-nav-brand h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .global-footer .footer-nav-brand { width: 190px; height: 158px; background: url("/image/site/logo_white.png") center / contain no-repeat; }
body .global-footer .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
body .global-footer .footer-nav-link {
  padding: 2px 22px; color: var(--dk-cream) !important; font-family: var(--dk-head); font-size: 14px; font-weight: 700; letter-spacing: .16em;
  border-left: 1px solid rgba(246, 236, 217, .35);
}
body .global-footer .footer-nav-link:first-child { border-left: 0; }
body .global-footer .footer-nav-link:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }
body .global-footer .footer-nav-link[href*="instagram.com"]::before { content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400; margin-right: .4em; }
body .footer-copy-text {
  margin: 0 !important; padding: 18px 20px !important; border-top: 0 !important; background: var(--dk-ai-deep) !important;
  color: rgba(246, 236, 217, .7) !important; font-family: var(--dk-head) !important; font-size: 11.5px !important; letter-spacing: .14em !important;
}
@media (max-width: 768px) {
  body .global-footer { padding: 64px 16px 40px !important; }
  body .global-footer::before { height: 16px !important; background-size: auto 16px !important; }
  body .global-footer .footer-nav-brand { width: 150px; height: 125px; }
  body .global-footer .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; max-width: 360px; }
  body .global-footer .footer-nav-link { padding: 12px 6px; text-align: center; border-left: 0; border-top: 1px solid rgba(246, 236, 217, .2); font-size: 13.5px; letter-spacing: .1em; }
}

/* =========================================================
   追従ボタン（custom_html 断片 30_follow_bar.html をフッターページに置く）
   スマホ：画面下の 2 分割バー／PC：右下に縦に 2 つ。電話は出さない（指示書）
========================================================= */
.dk-follow { position: fixed; right: 20px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.dk-follow-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 76px; height: 76px;
  background: var(--dk-ai); color: #fff !important; font-family: var(--dk-head); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; box-shadow: 0 8px 22px rgba(20, 12, 6, .3); border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .25s ease, background .25s ease;
}
.dk-follow-btn i { font-size: 22px; line-height: 1; }
.dk-follow-btn:hover { background: var(--dk-ai-deep); transform: translateY(-2px); }
.dk-follow-ig { background: var(--dk-paper); color: var(--dk-ai) !important; border-color: rgba(4, 67, 112, .25); }
.dk-follow-ig:hover { background: #fff; }
@media (max-width: 768px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .dk-follow {
    left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; padding-bottom: env(safe-area-inset-bottom);
    background: var(--dk-ai); box-shadow: 0 -6px 18px rgba(20, 12, 6, .22);
  }
  .dk-follow-btn { flex: 1 1 50%; width: auto; height: 58px; flex-direction: row; gap: 10px; font-size: 14px; letter-spacing: .14em; box-shadow: none; border: 0; }
  .dk-follow-btn i { font-size: 19px; }
  .dk-follow-btn:hover { transform: none; }
}
/* 断片を包む custom_html ブロックは「ふわっと出る」演出（transform）付き。transform のある親の中では
   position: fixed が画面ではなく親に対して固定されてしまうので、追従バーを包むブロックだけ演出を止める */
body .custom-html-wrapper:has(.dk-follow) { transform: none !important; opacity: 1 !important; transition: none !important; padding: 0 !important; }
/* 正本のフローティングボタン（電話）を念のため隠す（フッターブロックの「固定ボタン全体：非表示」が本来の設定） */
body .fc-floating-actions { display: none !important; }

/* =========================================================
   断片（custom_html）
========================================================= */
/* COMING SOON（こだわり・お品書き） */
.dk-soon { padding: 110px 24px; background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto; }
.dk-soon-card {
  position: relative; max-width: 860px; margin: 0 auto; padding: 72px 64px 66px; text-align: center;
  background: var(--dk-paper) var(--dk-washi-img) repeat 0 0 / 900px auto; box-shadow: 0 22px 50px rgba(20, 12, 6, .35);
  border-top: 6px solid var(--dk-ai);
}
.dk-soon-card::after {
  content: ""; position: absolute; right: 26px; bottom: 22px; width: 46px; height: 46px; background: url("/image/site/logo_hanko.png") center / contain no-repeat; opacity: .9;
}
.dk-soon-en { margin: 0 0 12px; color: var(--dk-ai); font-family: var(--dk-head); font-size: 14px; font-weight: 700; letter-spacing: .42em; }
.dk-soon-title { margin: 0 0 30px; color: var(--dk-ink); font-family: var(--dk-head); font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: .12em; line-height: 1.6; }
.dk-soon-title::after { content: ""; display: block; width: 156px; height: 20px; margin: 18px auto 0; background: var(--dk-minsa-ai) repeat-x 0 0 / auto 20px; }
.dk-soon-lead { margin: 0 0 22px; color: var(--dk-ink-sub); font-size: 1rem; line-height: 2.1; }
.dk-soon-note { margin: 0 0 34px; color: var(--dk-ink-sub); font-size: .92rem; }

/* 採用：募集要項 */
.dk-recruit { padding: 100px 24px; background: var(--dk-paper) var(--dk-dots) 0 0 / 22px 22px; }
.dk-table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; background: rgba(255, 255, 255, .55); }
.dk-table th,
.dk-table td { padding: 26px 28px; border-top: 1px solid rgba(43, 32, 25, .16); border-bottom: 1px solid rgba(43, 32, 25, .16); text-align: left; vertical-align: top; font-size: 15.5px; line-height: 1.95; }
.dk-table th { width: 220px; color: var(--dk-ai); font-family: var(--dk-head); font-weight: 700; letter-spacing: .12em; background: rgba(4, 67, 112, .05); }
.dk-table td { color: var(--dk-ink); }
.dk-table-sub { margin: 0 0 6px; color: var(--dk-ink); font-family: var(--dk-head); font-weight: 700; letter-spacing: .08em; }
.dk-table-sub + .dk-list { margin-bottom: 16px; }
.dk-list { margin: 0; padding: 0; list-style: none; }
.dk-list li { position: relative; padding-left: 1.3em; }
.dk-list li::before { content: ""; position: absolute; left: .2em; top: .82em; width: 7px; height: 7px; background: var(--dk-ai); transform: rotate(45deg); }

/* 採用：応募方法＋TEL */
.dk-apply { padding: 100px 24px 110px; background: var(--dk-wood) var(--dk-wood-img) repeat 0 0 / 1000px auto; }
.dk-apply-card {
  max-width: 860px; margin: 0 auto; padding: 70px 60px 64px; text-align: center;
  background: var(--dk-paper) var(--dk-washi-img) repeat 0 0 / 900px auto; box-shadow: 0 22px 50px rgba(20, 12, 6, .35); border-top: 6px solid var(--dk-ai);
}
.dk-apply-text { margin: 0 0 36px; color: var(--dk-ink-sub); font-size: 1rem; line-height: 2.1; }
.dk-tel {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 18px 44px; background: var(--dk-ai); color: #fff !important; text-decoration: none; box-shadow: 0 10px 24px rgba(4, 67, 112, .28);
  transition: background .3s ease;
}
.dk-tel:hover { background: var(--dk-ai-deep); }
.dk-tel i { grid-row: 1 / 3; font-size: 26px; }
.dk-tel-label { font-family: var(--dk-head); font-size: 12.5px; letter-spacing: .14em; opacity: .9; text-align: left; }
.dk-tel-num { font-family: var(--dk-head); font-size: 28px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-align: left; }

/* 店舗案内：駐車場 */
.dk-parking { padding: 20px 24px 110px; background: var(--dk-paper) var(--dk-dots) 0 0 / 22px 22px; }
.dk-parking-fig { max-width: 860px; margin: 0 auto; box-shadow: 0 16px 40px rgba(20, 12, 6, .2); }
.dk-parking-fig img { width: 100%; height: auto; }
.dk-parking-note { max-width: 860px; margin: 22px auto 0; color: var(--dk-ink-sub); font-size: 15px; text-align: center; }

@media (max-width: 768px) {
  .dk-head { margin-bottom: 30px; }
  .dk-soon, .dk-apply { padding: 60px 14px; }
  .dk-soon-card, .dk-apply-card { padding: 48px 22px 50px; }
  .dk-soon-lead, .dk-apply-text { text-align: left; font-size: .95rem; line-height: 2; }
  .dk-soon-card::after { width: 36px; height: 36px; right: 14px; bottom: 12px; }
  .dk-recruit { padding: 64px 14px; }
  .dk-table, .dk-table tbody, .dk-table tr, .dk-table th, .dk-table td { display: block; width: 100%; }
  .dk-table th { padding: 14px 16px; border-bottom: 0; }
  .dk-table td { padding: 16px 16px 20px; border-top: 0; font-size: 15px; }
  .dk-tel { padding: 16px 22px; column-gap: 12px; width: 100%; justify-content: center; }
  .dk-tel-num { font-size: 24px; }
  .dk-parking { padding: 10px 12px 64px; }
}