/* =====================================================================
   D.D GROUP（Drink＆Darts CAVE / D.D.CLAN.）サイト共通 CSS
   出典: Figma 実測（docs/figma/design_tokens.md）。PC 1440 / SP 375。
   構成:
     1. フォント・トークン・リセット
     2. 共通ヘッダー（ハンバーガーのみ）＋ 右側メニュー
     3. 共通フッター
     4. 見出し・ボタン・レイアウト部品（.dd-*）
     5. TOP 用セクション部品
     6. 下層ページ用セクション部品
     7. レスポンシブ
   ※ カスタムHTMLブロックはこの .dd-* クラスだけで組む（ブロック個別CSSは不要）
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Dela+Gothic+One&family=Zen+Kaku+Gothic+Antique:wght@700;900&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Noto+Sans+JP:wght@500;700&display=swap');

:root {
  /* 色 */
  --dd-black: #000000;
  --dd-red: #FA1630;
  --dd-red-deep: #D30015;
  --dd-red-bar: #FE0922;
  --dd-gold: #FFAE00;
  --dd-gray-text: #464646;
  --dd-gray-light: #B4B4B4;
  --dd-table-dark: #3B3B3B;
  --dd-line-dark: #DEDEDE;
  --dd-line-red: #D9D9D9;
  --dd-placeholder: #C4C4C4;
  --dd-white: #FFFFFF;

  /* フォント */
  --dd-font-en: Impact, "Anton", "Arial Narrow", sans-serif;
  --dd-font-ja-display: "Dela Gothic One", "Zen Kaku Gothic Antique", sans-serif;
  --dd-font-ja: "Zen Kaku Gothic Antique", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --dd-font-ja-new: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --dd-font-table: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;

  /* 余白 */
  --dd-sec-gap: 80px;          /* セクション間 */
  --dd-sec-pad: 40px;          /* 各ブロックの上下（隣接で 80 になる） */
  --dd-gutter: 80px;           /* 1280 コンテナの左右余白 */

  /* 旧テンプレの変数（ブロック共通CSSが参照するため残す） */
  --bg-base: #000000;
  --bg-paper: #0F0F0F;
  --bg-warm: #000000;
  --ink: #FFFFFF;
  --text-main: #FFFFFF;
  --text-sub: #B4B4B4;
  --text-muted: #464646;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #B4B4B4;
  --gold: #FFAE00;
  --gold-light: #FFAE00;
  --vermilion: #FA1630;
  --fc-btn-bg: #000000;
  --fc-btn-fg: #FFFFFF;
  --fc-btn-bg-hover: #FFAE00;
  --fc-btn-fg-hover: #000000;
  --fc-btn-border: #FFAE00;
  --fc-btn-outline-fg: #FFFFFF;
  --line: rgba(255, 255, 255, 0.2);
  --line-dark: rgba(255, 255, 255, 0.2);
  --shadow-base: 0 18px 50px rgba(0, 0, 0, 0.4);
  --font-serif: var(--dd-font-ja-display);
  --font-sans: var(--dd-font-ja);
  --font-en: var(--dd-font-en);
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- 1. リセット・ベース ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--dd-black);
  color: var(--dd-white);
  font-family: var(--dd-font-ja);
  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  writing-mode: horizontal-tb;
  overflow-wrap: break-word;
}
body.dd-sub { background: linear-gradient(180deg, #000000 0%, #0F0F0F 100%); }
body::before { display: none; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease; }
a:hover { opacity: .8; }
button { font: inherit; }

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }

/* ---- フェードアップ演出（要素単位）----
   ブロック全体の .fade-up は「まとめて 1 回」なので、カスタムHTML と主要ブロックではブロックのフェードを止め、
   中の要素（見出し・カード・行など）を個別にふわっと出す。対象は共通フッターの custom_html にあるスクリプト
   （docs/blocks/common/reveal_script.html）が自動で .dd-reveal を付けて監視する */
.custom-html-wrapper.fade-up, .news-bar-section.fade-up, .news-list-grid-section.fade-up, .gmap-section.fade-up,
.store-info-section.fade-up, .fc-instagram-embed-section.fade-up { opacity: 1; transform: none; transition: none; }
.dd-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--dd-i, 0) * .1s); will-change: opacity, transform; }
.dd-reveal.is-in { opacity: 1; transform: none; }
.dd-reveal--left  { transform: translateX(-40px); }   /* 左から */
.dd-reveal--right { transform: translateX(40px); }    /* 右から */
.dd-reveal--left.is-in, .dd-reveal--right.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dd-reveal, .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 旧テンプレの共通見出し（使わないブロックが参照）は白基調に */
.section-header, .menu-section-header, .slf-header, .course-list-header, .news-section-header, .job-section-header, .contact-section-header { text-align: center; margin-bottom: 40px; }
.section-header h2, .menu-main-title, .slf-main-title, .course-list-title, .news-main-title, .job-main-title, .contact-main-title { font-family: var(--dd-font-en); font-size: 96px; line-height: 1.2; color: #fff; font-weight: 400; }
.section-header p, .menu-sub-text, .slf-sub-text, .course-list-desc, .news-sub-text, .job-sub-text, .contact-sub-text { margin-top: 10px; color: var(--dd-gray-text); font-family: var(--dd-font-ja-display); font-size: 36px; line-height: 1.2; letter-spacing: .1em; }

/* ---------- 2. 共通ヘッダー：ハンバーガーだけを右上に重ねる ---------- */
.global-header {
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  width: 100%;
  min-height: 0;
  padding: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  pointer-events: none;            /* ヒーローのクリックを邪魔しない */
}
.global-header .header-logo,
.global-header .desktop-nav,
.global-header .header-btns { display: none !important; }
/* SEO 用 H1（fc_pages.h1_title）は DOM に残して見えなくする */
.header-page-eyebrow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }

.menu-trigger {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 45px;
  height: 38px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: #fff;
  /* 3 本線（8px・ピッチ 15px・幅 45px） */
  background: linear-gradient(#fff 0 8px, transparent 8px 15px, #fff 15px 23px, transparent 23px 30px, #fff 30px 38px);
}
.menu-trigger i { display: none; }

/* 右側の赤いパネルメニュー（Figma: pc_menu） */
.mobile-nav-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  width: 320px;
  z-index: 2000;
  background: var(--dd-red-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 180px 20px 40px;
  gap: 40px;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .3s var(--ease), visibility .3s;
  box-shadow: -10px 0 40px rgba(0, 0, 0, .4);
}
.mobile-nav-overlay.active { visibility: visible; transform: translateX(0); }
.mobile-nav-overlay a {
  font-family: var(--dd-font-en);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
}
.mobile-nav-overlay .menu-trigger {
  position: absolute;
  top: 30px !important; right: 30px !important;
  background: none;
  width: 45px; height: 38px;
}
.mobile-nav-overlay .menu-trigger i { display: block; font-size: 36px; color: #fff; }
.mobile-nav-overlay .btn-header-reserve,
.mobile-nav-overlay .fc-language-switcher,
.fc-language-switcher-header { display: none !important; }

/* ---------- 3. 共通フッター ---------- */
.global-footer {
  padding: 0;
  background: transparent;
  color: #fff;
  border: 0;
}
.footer-nav-wrap { display: flex; justify-content: center; align-items: center; padding: 0 20px 40px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 70px; }
.footer-nav-link { font-family: var(--dd-font-en); font-size: 16px; line-height: 1.2; color: #fff; white-space: nowrap; }
.footer-nav-brand { display: none; }
.global-footer .info-grid { display: none; }
.footer-copy-text, .footer-copy {
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--dd-red-bar);
  color: #000;
  font-family: var(--dd-font-ja-new);
  font-weight: 900;
  font-size: 0;                     /* ブロックの定型文を隠して Figma の文言に差し替える */
  line-height: 1.2;
}
.footer-copy-text::after, .footer-copy::after { content: "©D.Dグループ All Right Reserved."; font-size: 12px; }
/* Figma に無い浮遊ボタンは使わない（各店の TEL/LINE/Instagram はヒーロー内に置く） */
.fc-floating-actions { display: none !important; }
body.has-floating-actions { padding-bottom: 0 !important; }

/* フッターのロゴ（footer レイアウトの custom_html） */
.dd-footer-logos { display: flex; justify-content: center; align-items: center; gap: 11px; padding: var(--dd-sec-pad) 20px 40px; }
.dd-footer-logos img { width: 200px; height: auto; flex: 0 0 auto; }

/* ---------- 4. 共通部品 ---------- */
/* セクションの外枠。隣接ブロック同士で 80px 空く */
.dd-sec { padding: var(--dd-sec-pad) 0; }
.dd-sec--flush { padding: 0; }

/* コンテナ */
.dd-container { width: min(100% - 40px, 1280px); margin: 0 auto; }
.dd-container--1129 { width: min(100% - 40px, 1129px); margin: 0 auto; }
.dd-container--1120 { width: min(100% - 40px, 1120px); margin: 0 auto; }
.dd-container--960 { width: min(100% - 40px, 960px); margin: 0 auto; }
.dd-container--880 { width: min(100% - 40px, 880px); margin: 0 auto; }
.dd-container--full { width: 100%; }

/* 見出し：番号（赤）＋英字（白・Impact 96）＋日本語（灰・Dela 36） */
.dd-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dd-head--left { align-items: flex-start; text-align: left; }
.dd-head-num { font-family: var(--dd-font-en); font-weight: 400; font-size: 48px; line-height: 1.2; color: var(--dd-red); }
.dd-head-en  { font-family: var(--dd-font-en); font-weight: 400; font-size: 96px; line-height: 1.2; color: #fff; letter-spacing: 0; white-space: nowrap; }
.dd-head-ja  { font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 36px; line-height: 1.2; color: var(--dd-gray-text); letter-spacing: .1em; }
.dd-head--top .dd-head-en { letter-spacing: .1em; }
.dd-head--top .dd-head-ja { letter-spacing: .2em; }
.dd-head--onphoto .dd-head-ja { color: #B5B5B5; }

/* 縁取り文字（Impact 96 ＋ 赤ストローク） */
.dd-outline { font-family: var(--dd-font-en); font-weight: 400; font-size: 96px; line-height: 1.2; letter-spacing: .1em; color: #000; -webkit-text-stroke: 10px var(--dd-red-deep); paint-order: stroke fill; white-space: nowrap; }
.dd-outline--white { color: #fff; }

/* ボタン「VIEW MORE ▶」 */
.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 21px;
  border: 3px solid var(--dd-gold);
  background: transparent;
  padding: 10px 20px;
  font-family: var(--dd-font-en); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: .1em;
  color: #fff; white-space: nowrap; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.dd-btn::after { content: ""; width: 0; height: 0; border-left: 14px solid #fff; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; transition: border-color .25s ease; }
.dd-btn:hover { background: var(--dd-gold); color: #000; opacity: 1; }
.dd-btn:hover::after { border-left-color: #000; }
.dd-btn--lg { padding: 20px 40px; font-size: 24px; }

/* SP だけ改行したい場所に置く <br class="dd-sp-br">（PC では改行しない） */
.dd-sp-br { display: none; }

/* 本文 */
.dd-lead { font-family: var(--dd-font-ja-new); font-weight: 900; font-size: 20px; line-height: 2; color: #fff; text-align: center; }
.dd-text { font-family: var(--dd-font-ja); font-weight: 700; font-size: 18px; line-height: 2; color: #fff; }
.dd-text--loose { line-height: 2.2; }

/* 赤ラベルの表（INFORMATION。store_info ブロックも同じ見た目にする） */
.dd-table { width: 100%; border-collapse: collapse; font-family: var(--dd-font-table); }
.dd-table th, .dd-table td { vertical-align: middle; font-size: 18px; color: #fff; text-align: left; }
.dd-table th { width: 320px; background: var(--dd-red); border: 1px solid var(--dd-line-red); padding: 20px 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.dd-table td { background: var(--dd-table-dark); border: 1px solid var(--dd-line-dark); padding: 20px; font-weight: 500; line-height: 2; }

/* ---------- 5. TOP ---------- */
/* ヒーロー */
.dd-hero { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.dd-hero-catch { font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 64px; line-height: 1.2; letter-spacing: .1em; color: #fff; }
.dd-hero-logos { display: flex; justify-content: center; gap: 40px; width: min(100% - 40px, 1240px); }
.dd-hero-logos a { flex: 1 1 0; display: block; }
.dd-hero-logos img { width: 100%; height: 446px; object-fit: cover; }
.dd-hero-logos img.is-stretch { object-fit: fill; }   /* Figma で「引き伸ばし」配置されている左パネル */
.dd-hero-big { font-family: var(--dd-font-en); font-weight: 400; font-size: 96px; line-height: 1.2; letter-spacing: .1em; color: var(--dd-gray-text); white-space: nowrap; }

/* NEWS（latest_news_bar を横並びに）は theme_block_css.json 側で指定 */

/* ABOUT：見出し＋赤い吹き出し（左）／写真 2 枚（右） */
.dd-about { position: relative; display: grid; grid-template-columns: 560px 1fr; align-items: start; }
.dd-about-left { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: 800px; }
.dd-about-left .dd-head { align-self: flex-start; padding-left: 30px; }
.dd-about-bubble { width: 640px; background: var(--dd-red-deep); padding: 40px 36px; border-radius: 0 40px 0 40px; }  /* Figma: 本文幅 567、右上・左下のみ角丸 40 */
.dd-about-bubble p { font-family: var(--dd-font-ja); font-weight: 700; font-size: 18px; line-height: 2; color: #fff; }
.dd-about-photos { display: flex; gap: 20px; }
.dd-about-photos img { width: 350px; height: 480px; object-fit: cover; border-radius: 0 46px 0 46px; }  /* 右上・左下のみ角丸 46 */

/* 2 店舗カード */
.dd-venues { display: grid; grid-template-columns: 1fr 1fr; }
.dd-venue {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px;
  min-height: 486px; padding: 80px 20px; border: 2px solid #fff; text-align: center;
  background-color: #000; background-repeat: no-repeat; background-position: center; background-size: contain;
}
.dd-venue--stretch { background-size: 100% 100%; }  /* Figma で「引き伸ばし」配置（CAVE 側） */
.dd-venue::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .8); }
.dd-venue > * { position: relative; }
.dd-venue-catch { font-family: var(--dd-font-ja); font-weight: 900; font-size: 32px; line-height: 1.4; color: #fff; }

/* ギャラリー（写真マーキー 2 段） */
.dd-marquee { width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.dd-marquee-row { display: flex; width: max-content; gap: 10px; animation: dd-marquee 40s linear infinite; }
.dd-marquee-row--reverse { animation-direction: reverse; }
.dd-marquee-row img { width: 320px; height: 240px; object-fit: cover; flex: 0 0 auto; }
@keyframes dd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dd-marquee:hover .dd-marquee-row { animation-play-state: paused; }

/* SYSTEM / STAFF バナー（写真背景 2 分割） */
.dd-banners { display: grid; grid-template-columns: 1fr 1fr; }
.dd-banner {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  min-height: 525px; padding: 120px 20px; text-align: center;
  background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* 写真の上に 黒 50% ＋ 中心が透けて外周が黒くなる放射グラデ（Figma と同じ重ね順） */
.dd-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, #000 100%), rgba(0, 0, 0, .5); }
.dd-banner > * { position: relative; }
.dd-banner-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.dd-banner .dd-lead { max-width: 540px; }

/* Instagram バナー（Figma から書き出した画像を 2 枚並べる） */
.dd-ig { display: grid; grid-template-columns: 1fr 1fr; }
.dd-ig a { display: block; }
.dd-ig img { width: 100%; height: auto; }

/* ---------- 6. 下層ページ ---------- */
/* ヒーロー（写真＋キャッチ＋ロゴ＋TEL/LINE/Instagram） */
.dd-hero-sub { position: relative; height: 600px; margin-bottom: 20px; background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
.dd-hero-sub::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.dd-hero-sub > * { position: relative; }
.dd-hero-sub-logo { position: absolute; top: 20px; left: 30px; width: 130px; height: 130px; }
.dd-hero-sub-logo img { width: 130px; height: 130px; object-fit: contain; }
.dd-hero-sub-tools { position: absolute; top: 20px; right: 95px; display: flex; align-items: center; gap: 20px; height: 40px; }
.dd-hero-sub-tel { display: inline-flex; align-items: center; gap: 5px; font-family: var(--dd-font-en); font-size: 20px; line-height: 1.2; letter-spacing: .1em; color: #fff; white-space: nowrap; }
.dd-hero-sub-tel svg, .dd-hero-sub-tools .dd-icon { width: 20px; height: 20px; fill: #fff; }
.dd-hero-sub-tel i { font-size: 20px; line-height: 1; }
.dd-hero-sub-tools a.dd-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; }
.dd-hero-sub-tools a.dd-icon-link svg { width: 40px; height: 40px; fill: #fff; }
.dd-hero-sub-tools a.dd-icon-link i { font-size: 40px; line-height: 1; }
/* 中央寄せは inset + flex で行う（transform を使うとフェードアップ演出の transform と衝突してずれる） */
.dd-hero-sub-catch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; text-align: center; pointer-events: none; }
.dd-hero-sub-catch .ja { font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 48px; line-height: 1.2; letter-spacing: .1em; color: #fff; text-shadow: 10px 10px 20px #000; }
.dd-hero-sub-catch .en { font-family: var(--dd-font-en); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: .08em; color: var(--dd-gray-light); text-shadow: 10px 10px 20px #000; }

/* 写真背景セクション（ABOUT など。写真 ＋ 黒 60%） */
.dd-photo-sec { position: relative; padding: 80px 0; background-color: #000; background-position: center; background-size: cover; }
.dd-photo-sec::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.dd-photo-sec > * { position: relative; }

/* ABOUT（下層）：写真左 720×480 ＋ 本文右 */
.dd-about-sub { display: flex; align-items: center; gap: 73px; padding: 0 20px; margin-top: 40px; }
.dd-about-sub img { width: 720px; height: 480px; object-fit: cover; flex: 0 0 auto; }
.dd-about-sub p { font-family: var(--dd-font-ja); font-weight: 700; font-size: 18px; line-height: 2.2; color: #fff; }

/* FEATURE：赤い斜め帯 ＋ 写真 640×400 ＋ 文章（左右交互） */
.dd-features { display: flex; flex-direction: column; margin-top: 40px; }
/* 行の高さ 480 に対し内容は 400。Figma では 1・3 行目は上寄せ、2 行目（写真右）は下寄せ */
.dd-feature { position: relative; min-height: 480px; display: flex; align-items: flex-start; }
.dd-feature--right { align-items: flex-end; }
.dd-mt40 { margin-top: 40px; }
.dd-feature + .dd-feature--gap { margin-top: 80px; }
/* Figma「Polygon 2」= 右上→右下→左下 の三角形（左下から右上へ上がる対角線の下側が赤） */
.dd-feature::before { content: ""; position: absolute; inset: 0; background: var(--dd-red); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* 2 行目（写真右）は上下反転（左上・右上・左下の三角形）。1 行目の赤と斜めにつながって一本の太い帯になる */
.dd-feature--right::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.dd-feature-inner { position: relative; display: flex; align-items: center; gap: 40px; width: 1240px; max-width: 100%; }
.dd-feature-inner img { width: 640px; height: 400px; object-fit: cover; flex: 0 0 auto; }
.dd-feature-body { display: flex; flex-direction: column; gap: 40px; width: 560px; max-width: 100%; }
.dd-feature-label { font-family: var(--dd-font-en); font-size: 32px; line-height: 1.2; color: var(--dd-gray-text); }
.dd-feature-title { font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 36px; line-height: 1.4; letter-spacing: .1em; color: #fff; margin-top: 20px; }
.dd-feature-body > p { font-family: var(--dd-font-ja); font-weight: 700; font-size: 18px; line-height: 2.2; color: #fff; }  /* 直下の本文だけ（ラベルは div 内） */
.dd-feature--right .dd-feature-inner { margin-left: auto; flex-direction: row-reverse; }

/* SYSTEM 誘導（見出し＋大ボタン） */
.dd-cta { display: flex; flex-direction: column; align-items: center; gap: 40px; }

/* Instagram フィードの見出しは入力が「Instagram」でも英字大文字で出す（Figma: INSTAGRAM） */
.fc-instagram-embed-heading h2 { text-transform: uppercase; }
/* Instagram 埋め込みの仮枠（instagram_feed 未設定時のダミー） */
.dd-ig-grid { display: grid; grid-template-columns: repeat(3, 280px); gap: 20px; justify-content: center; margin-top: 40px; }
.dd-ig-grid div { width: 280px; height: 280px; background: var(--dd-placeholder); }

/* 写真 2 枚の帯ヒーロー（SYSTEM / STAFF・CAST / NEWS）：600 高・中央に英字タイトル */
.dd-hero-band { position: relative; height: 600px; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; background: #000; }
.dd-hero-band img { width: 100%; height: 600px; object-fit: cover; }
.dd-hero-band-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--dd-font-en); font-weight: 400; font-size: 96px; line-height: 1.2; letter-spacing: .1em; color: #fff; text-align: center; }

/* 料金表・メニュー表（SYSTEM ページ）。コンテナ 960。表のかたまり同士は 90 空く */
.dd-sys { display: flex; flex-direction: column; gap: 90px; }
.dd-sys-group { display: flex; flex-direction: column; gap: 40px; }
.dd-sys-title { margin: 0; font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: .1em; color: #fff; text-align: center; }
/* Figma は各セルの「下線だけ」＋ 左右の列の間に 10px の切れ目。border-spacing で列間 10 を作り、外側の 10 は負マージンで消す */
.dd-sys-table { width: calc(100% + 20px); margin: 0 -10px; border-collapse: separate; border-spacing: 10px 0; font-family: var(--dd-font-ja-new); }
.dd-sys-table--single { width: 100%; margin: 0; border-spacing: 0; }
.dd-sys-table td { height: 69px; border: 0; border-bottom: 1px solid #fff; color: #fff; font-weight: 900; font-size: 18px; vertical-align: middle; }
.dd-sys-table td.l { padding: 20px; line-height: 1.6; text-align: left; }
.dd-sys-table td.r { width: 240px; padding: 20px 10px; line-height: 1.2; letter-spacing: .1em; text-align: center; white-space: nowrap; }
.dd-sys-table td.w { padding: 20px; line-height: 1.6; text-align: left; }   /* 右セル無しの 1 列行 */
.dd-sys-notes { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.dd-sys-note { margin: 0; font-family: var(--dd-font-ja-new); font-weight: 900; font-size: 16px; line-height: 1.6; color: #fff; text-align: center; }
.dd-sys-sub { display: flex; flex-direction: column; }
.dd-sys-band { min-height: 56px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 10px 0; background: #fff; border: 1px solid #fff; color: #000; font-family: var(--dd-font-ja-new); font-weight: 900; font-size: 28px; line-height: 1.2; letter-spacing: .1em; text-align: center; }

/* スタッフカード（STAFF・CAST ページ）Figma: 1280 幅・写真 480×600・gap 80・本文 720、カード同士 80、左右交互 */
.dd-mt80 { margin-top: 80px; }
.dd-staff-list { display: flex; flex-direction: column; gap: 80px; }
.dd-staff { display: flex; align-items: center; gap: 80px; }
.dd-staff:nth-child(even) { flex-direction: row-reverse; }
.dd-staff-photo { flex: 0 0 auto; width: 480px; }
.dd-staff-photo img { width: 480px; height: 600px; object-fit: cover; }
.dd-staff-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.dd-staff-name { margin: 0; font-family: var(--dd-font-en); font-weight: 400; font-size: 96px; line-height: 1.2; letter-spacing: 0; color: #fff; }
.dd-staff .dd-table th { width: 240px; padding: 20px 10px; font-family: var(--dd-font-ja-display); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: .1em; }
.dd-staff .dd-table td { padding: 20px; font-family: var(--dd-font-ja-new); font-weight: 900; font-size: 18px; line-height: 1.6; }

/* ---------- 7. レスポンシブ ---------- */
@media (max-width: 1280px) {
  .dd-head-en, .dd-outline, .dd-hero-big { font-size: clamp(48px, 6.7vw, 96px); }
  .dd-hero-catch { font-size: clamp(24px, 4.4vw, 64px); }
  .dd-about { grid-template-columns: 1fr; gap: 20px; }
  .dd-about-left { width: 100%; }
  .dd-about-bubble { width: 100%; max-width: 640px; }
  .dd-about-photos { justify-content: center; }
  .dd-about-photos img { width: calc(50% - 10px); height: auto; aspect-ratio: 350 / 480; }
  .dd-about-sub { gap: 40px; }
  .dd-about-sub img { width: 50%; height: auto; aspect-ratio: 720 / 480; }
  .dd-feature-inner { width: min(100% - 40px, 1240px); }
  .dd-feature-inner img { width: 50%; height: auto; aspect-ratio: 640 / 400; }
  .dd-staff-photo { width: 42%; }
  .dd-staff-name { font-size: clamp(40px, 6.7vw, 96px); }
}

@media (max-width: 768px) {
  :root { --dd-sec-pad: 20px; }
  body { font-size: 14px; }

  /* ヘッダー・メニュー */
  .global-header { padding: 20px; }
  .mobile-nav-overlay { width: min(320px, 85vw); }

  /* フッター（SP はロゴと著作権のみ） */
  .footer-nav-wrap { display: none; }
  .dd-footer-logos { padding: 20px 20px 40px; gap: 11px; }
  .dd-footer-logos img { width: 100px; }

  /* 共通部品 */
  .dd-container, .dd-container--1129, .dd-container--1120, .dd-container--960, .dd-container--880 { width: calc(100% - 40px); }
  .dd-head { gap: 5px; }
  .dd-head-num { font-size: 24px; }
  .dd-head-en { font-size: 48px; letter-spacing: .1em; }
  .dd-head-ja { font-size: 20px; letter-spacing: .2em; }
  .dd-outline { font-size: 40px; -webkit-text-stroke-width: 5px; }
  .dd-btn { gap: 10px; padding: 8px 15px; font-size: 14px; }
  .dd-btn::after { border-left-width: 11px; border-top-width: 6px; border-bottom-width: 6px; }
  .dd-btn--lg { padding: 12px 24px; font-size: 16px; }
  .dd-lead { font-size: 13px; }
  .dd-text, .dd-about-bubble p, .dd-about-sub p, .dd-feature-body > p { font-size: 14px; }
  .dd-table th { width: 110px; padding: 12px 6px; font-size: 14px; }
  .dd-table td { padding: 12px; font-size: 14px; line-height: 1.7; }

  .dd-sp-br { display: inline; }
  .dd-lead br { display: none; }          /* PC 用の改行は SP では使わず自然に折り返す */

  /* TOP */
  .dd-hero { gap: 30px; padding-top: 20px; }   /* Figma SP: 見出しは上から 40（ハンバーガーの下） */
  .dd-hero-catch { font-size: 24px; letter-spacing: .1em; padding: 0 40px; }
  .dd-hero-logos { flex-direction: column; gap: 20px; width: calc(100% - 40px); }
  .dd-hero-logos img { height: auto; aspect-ratio: 335 / 249; }
  .dd-hero-big { font-size: 32px; white-space: normal; }
  .dd-about { gap: 20px; }
  .dd-about-left { gap: 20px; }
  .dd-about-left .dd-head { padding-left: 20px; }
  .dd-about-bubble { padding: 40px 20px; }
  .dd-about-photos { flex-direction: column; gap: 20px; }
  .dd-about-photos img { width: 100%; height: 160px; aspect-ratio: auto; }
  .dd-venues { grid-template-columns: 1fr; }
  .dd-venue { min-height: 270px; padding: 40px 20px; gap: 20px; }
  .dd-venue-catch { font-size: 20px; }
  .dd-marquee-row img { width: 160px; height: 120px; }
  .dd-banners { grid-template-columns: 1fr; }
  .dd-banner { min-height: 285px; padding: 40px 20px; }
  .dd-ig { grid-template-columns: 1fr; }

  /* 下層 */
  .dd-hero-sub { height: 420px; }
  .dd-hero-sub-logo, .dd-hero-sub-logo img { width: 80px; height: 80px; }
  .dd-hero-sub-logo { top: 16px; left: 16px; }
  .dd-hero-sub-tools { top: auto; bottom: 16px; right: 16px; height: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 12px; }  /* SP はヒーロー右下に 1 列 */
  .dd-hero-sub-tel { font-size: 16px; }
  .dd-hero-sub-tools a.dd-icon-link, .dd-hero-sub-tools a.dd-icon-link svg { width: 32px; height: 32px; }
  .dd-hero-sub-catch .ja { font-size: 24px; text-shadow: 5px 5px 10px #000; }
  .dd-hero-sub-catch .en { font-size: 20px; text-shadow: 5px 5px 10px #000; }
  .dd-photo-sec { padding: 40px 0; }
  .dd-about-sub { flex-direction: column; gap: 20px; margin-top: 20px; padding: 0 20px; }
  .dd-about-sub img { width: 100%; }
  .dd-feature, .dd-feature--right { min-height: 0; padding: 40px 0; align-items: center; }
  .dd-mt40 { margin-top: 20px; }
  .dd-feature + .dd-feature--gap { margin-top: 40px; }
  .dd-feature-inner, .dd-feature--right .dd-feature-inner { flex-direction: column; gap: 20px; width: calc(100% - 40px); margin: 0 auto; }
  .dd-feature-inner img { width: 100%; }
  .dd-feature-body { gap: 20px; width: 100%; }
  .dd-feature-label { font-size: 20px; }
  .dd-feature-title { font-size: 22px; margin-top: 10px; }
  .dd-ig-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
  .dd-ig-grid div { width: auto; aspect-ratio: 1; height: auto; }
  .dd-hero-band { height: 300px; grid-template-columns: 1fr; }
  .dd-hero-band img { height: 300px; }
  .dd-hero-band img + img { display: none; }
  .dd-hero-band-title { font-size: 48px; }
  .dd-sys { gap: 50px; }
  .dd-sys-group { gap: 24px; }
  .dd-sys-title { font-size: 24px; }
  .dd-sys-table td { height: 48px; font-size: 14px; }
  .dd-sys-table td.l, .dd-sys-table td.w { padding: 10px 12px; }
  .dd-sys-table td.r { width: 125px; padding: 10px 6px; letter-spacing: 0; white-space: normal; }
  .dd-sys-note { font-size: 13px; }
  .dd-sys-notes { gap: 10px; }
  .dd-sys-band { min-height: 44px; font-size: 18px; }
  .dd-mt80 { margin-top: 40px; }
  .dd-staff-list { gap: 40px; }
  .dd-staff, .dd-staff:nth-child(even) { flex-direction: column; gap: 20px; }
  .dd-staff-photo { width: 100%; max-width: 335px; margin: 0 auto; }
  .dd-staff-photo img { width: 100%; height: auto; aspect-ratio: 480 / 600; }
  .dd-staff-body { gap: 20px; width: 100%; }
  .dd-staff-name { font-size: 48px; text-align: center; }
  .dd-staff .dd-table th { width: 120px; padding: 12px 6px; font-size: 14px; letter-spacing: 0; }  /* 「ニックネーム」が折れない幅 */
  .dd-staff .dd-table td { padding: 12px; font-size: 14px; }
}