/* ============================================================
   D｜藍の帯・縦書き
   参考: https://www.yusui.co.jp/

   採り入れた考え方
     - 濃紺の全幅バンドと白場を交互に積み、ページに呼吸をつくる
     - 見出しは金の縦書き。写真の端に食い込ませて重なりを出す
     - 英字を巨大な淡いゴーストテキストとして背面に敷く
     - 写真は継ぎ目なしで画面端まで並べた帯にする
     - ナビは右上のテキストのみ。ロゴは左で大きく

   HTML構造は design1 と共通。ここはCSSだけで組み替えている。
   管理画面の配色（<style>の動的CSS）より後に効かせる必要があるため、
   テーマが主導権を持つべき箇所は body.theme-design4 で詳細度を上げ、
   インラインstyleが付く箇所（feature/menu の色設定）だけ !important を使う。
   ============================================================ */

body.theme-design4 {
  --d4-navy: #12303a;      /* 藍（濃紺の帯） */
  --d4-navy-d: #0d242c;    /* 藍の暗い側（フッター） */
  --d4-gold: #c9a227;      /* 金（縦書き見出し・価格） */
  --d4-ink: #23282a;       /* 本文 */
  --d4-sub: #6e7679;       /* 補助テキスト */
  --d4-paper: #ffffff;     /* 白場 */
  --d4-mist: #f4f5f3;      /* 薄い地色 */
  --d4-line: #dcdedb;

  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  color: var(--d4-ink);
  background: var(--d4-paper);
  letter-spacing: .04em;
}

body.theme-design4 .front__page {
  background: var(--d4-paper) !important;
}

/* ============================================================
   ヘッダー（PC）— 白地。右上にテキストのナビだけを置く
   ============================================================ */
@media screen and (min-width: 769px) {
  body.theme-design4 .header {
    background-image: none;
    background-color: rgba(255, 255, 255, .95);
    border-bottom: 1px solid var(--d4-line);
  }
  body.theme-design4 .header__main { margin: 12px 0; }
  body.theme-design4 .header__right { margin-right: 44px; }
  body.theme-design4 .header__right-top { margin-bottom: 12px; }
  body.theme-design4 .header__right-top-text { color: var(--d4-sub); font-size: 11px; letter-spacing: .14em; }
  body.theme-design4 .header__right-top-icons svg { color: var(--d4-navy); }
  body.theme-design4 .gnavi__list { margin-left: 36px; }
  body.theme-design4 .gnavi__list .gnavi__ja {
    color: var(--d4-navy);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .14em;
  }
  body.theme-design4 .gnavi__list p { display: none; }
  body.theme-design4 .gnavi__list--reserve a {
    background: var(--d4-navy);
    padding: 9px 22px;
  }
  body.theme-design4 .gnavi__list--reserve .gnavi__ja { color: #fff; }
  body.theme-design4 .a-animation-wh a::before { background-color: var(--d4-gold); }
}

/* ============================================================
   ファーストビュー — 写真は右寄せ。左に白のヌケをつくる
   ============================================================ */
body.theme-design4 .firstview { background-position: 76% center; position: relative; }
@media screen and (min-width: 769px) {
  body.theme-design4 .firstview::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, #fff 0, #fff 34%, rgba(255, 255, 255, .88) 46%, rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
  }
  /* 左のヌケに、店舗のキャッチと「こだわり」の見出し・本文をまとめて縦書きで置く。
     文言は管理画面の site.tagline / intro.title / intro.body をそのまま使う。
     縦書きは右の列から左へ流れるので、右端を固定して左へ伸ばす。
     こうすると本文が長くなっても読み始めの位置が動かず、写真側にはみ出さない。 */
  body.theme-design4 .firstview__lead {
    display: block;
    position: absolute;
    /* 縦書きは右の列から左へ流れる。読み始めを白場の右端に置き、
       そこから左へ伸ばすことで、文章量が増えても写真側にはみ出さない */
    right: 66%;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    max-height: 76%;
    max-width: 34%;
    overflow: hidden;
    z-index: 2;
  }
  body.theme-design4 .firstview__lead-sub {
    font-size: 13px;
    letter-spacing: .3em;
    line-height: 1;
    color: var(--d4-gold);
    margin: 0 0 0 26px;
  }
  body.theme-design4 .firstview__lead-main {
    font-size: clamp(22px, 2.3vw, 32px);
    letter-spacing: .24em;
    line-height: 1.6;
    color: var(--d4-navy);
    margin: 0 0 0 24px;
  }
  body.theme-design4 .firstview__lead-body {
    font-size: 14.5px;
    letter-spacing: .12em;
    line-height: 2.2;
    color: var(--d4-ink);
    margin: 0;
  }
  /* コピーライトはコピーの邪魔にならないよう画面の左下端へ逃がす */
  body.theme-design4 .copyright {
    left: 22px;
    top: auto;
    bottom: 26px;
    color: var(--d4-sub);
    font-size: 10px;
    letter-spacing: .26em;
    opacity: .7;
    z-index: 2;
  }
}
body.theme-design4 .firstview__text {
  background-color: rgba(18, 48, 58, .86) !important;
  margin: 0 0 34px;
  right: 0;
  padding: 16px 30px 12px;
  letter-spacing: .12em;
  z-index: 2;
}
body.theme-design4 .firstview__tel { color: #fff; }

/* ============================================================
   セクション見出し — 中央に明朝、下に小さな英字
   ============================================================ */
body.theme-design4 .menu__title { background-image: none; padding: 108px 0 54px; position: relative; }
body.theme-design4 .about__wrapper .menu__title { padding: 108px 0 54px; }
body.theme-design4 .menu__title h2 {
  font-size: 33px;
  font-weight: 500;
  letter-spacing: .28em;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
body.theme-design4 .menu__title h2::before,
body.theme-design4 .menu__title h2::after { display: none; }
body.theme-design4 .menu__title p {
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--d4-sub);
  position: relative;
  z-index: 1;
}

/* ============================================================
   お知らせ — 白場。一覧は細い罫線だけ
   ============================================================ */
body.theme-design4 .news__wrapper { max-width: 1120px; margin: 96px auto 84px; }
body.theme-design4 .news__top { justify-content: center; margin-bottom: 40px; }
body.theme-design4 .news__top-left { align-items: center; text-align: center; }
body.theme-design4 .news__top-left h2 { font-size: 33px; font-weight: 500; letter-spacing: .28em; }
body.theme-design4 .news__top-left p { font-size: 10px; letter-spacing: .34em; margin: 12px 0 0; }
body.theme-design4 .news__item,
body.theme-design4 .news__item:first-child { border-color: var(--d4-line); }
body.theme-design4 .news__card .news__box { border-color: var(--d4-line); border-radius: 0; }
body.theme-design4 .news__card-title { font-weight: 500; }
body.theme-design4 .news__more a { color: var(--d4-navy); }
body.theme-design4 .news__dot.is-current::before { background: var(--d4-gold); border-color: var(--d4-gold); }

/* ============================================================
   こだわり — 藍の全幅バンド。金の縦書き見出しを写真に重ねる
   ============================================================ */
body.theme-design4 .feature__wrapper {
  background-color: var(--d4-navy) !important;
  background-image: none !important;
  padding-bottom: 30px;
}
/* PCは、こだわりの見出しと本文をファーストビューの余白に出す。
   このセクションには「こだわり」の見出しだけを置き、本文の重複を避ける。
   SPはファーストビューに余白がないので、従来どおりここに見出しと本文を出す。 */
body.theme-design4 .feature__heading { display: none; }
body.theme-design4 .feature__message {
  color: #f2efe6;
  padding: 12% 0;
  margin: 0 auto;
}
body.theme-design4 .feature__message h2 { color: var(--d4-gold); letter-spacing: .28em; }
body.theme-design4 .feature__message p { color: #e9e6dc !important; }
/* このブロックが出るのはSPだけ（PCはファーストビューに出している）。
   基本CSSの40px（425px以下は6.5vw）だと見出しが5〜6行に折り返すため、
   2〜3行に収まる大きさへ落とし、字間も詰める */
@media screen and (max-width: 768px) {
  body.theme-design4 .feature__message h2 {
    font-size: clamp(20px, 5.4vw, 26px);
    letter-spacing: .1em;
    line-height: 1.55;
  }
  body.theme-design4 .feature__message p { font-size: 15px; line-height: 2; }
}

@media screen and (min-width: 769px) {
  body.theme-design4 .feature__message { display: none; }
  body.theme-design4 .feature__heading {
    display: block;
    text-align: center;
    padding: clamp(64px, 8vw, 112px) 0 clamp(34px, 4vw, 56px);
  }
  body.theme-design4 .feature__heading h2 {
    font-size: 33px;
    font-weight: 500;
    letter-spacing: .28em;
    text-indent: .28em;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #f2efe6;
  }
  body.theme-design4 .feature__heading p {
    font-size: 10px;
    letter-spacing: .34em;
    color: rgba(242, 239, 230, .6);
  }
}

body.theme-design4 .feature__box {
  position: relative;
  display: grid;
  grid-template-columns: 54fr 46fr;
  align-items: stretch;
  gap: 0;
  max-width: none;
  width: 100%;
  padding-bottom: 96px;
  color: #f2efe6;
}
body.theme-design4 .feature__box-img { width: auto; }
body.theme-design4 .feature__box-img img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 38vw, 520px);
  object-fit: cover;
}
body.theme-design4 .feature__box-text {
  width: auto;
  margin: 0;
  padding: 0 clamp(26px, 4.5vw, 74px) 0 clamp(58px, 7vw, 108px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.theme-design4 .feature__content .feature__box:nth-child(2n) .feature__box-img { order: 2; }
body.theme-design4 .feature__content .feature__box:nth-child(2n) .feature__box-text {
  order: 1;
  margin: 0;
  padding: 0 clamp(58px, 7vw, 108px) 0 clamp(26px, 4.5vw, 74px);
}
/* 見出し = 金の縦書き。写真と文章の境目から、写真の内側へ向かって列を伸ばす。
   縦書きは右→左に列が増えるため、写真が左のときは right、右のときは left を固定する。
   こうすると見出しが長くても必ず写真の中に収まり、本文と重ならない。
   写真の明暗は店舗ごとに変わるので、文字の裏に藍色の帯（フレーム）を必ず敷く。 */
@media screen and (min-width: 769px) {
  body.theme-design4 .feature__box-text h3 {
    position: absolute;
    /* 写真は .feature__box の上端から padding-bottom(96px) を除いた範囲。
       top と bottom の両方を決めて、帯が写真の外へはみ出さないようにする */
    top: 34px;
    bottom: 130px;
    writing-mode: vertical-rl;
    font-family: inherit;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 500;
    letter-spacing: .24em;
    line-height: 1.5;
    margin: 0;
    padding: 26px 16px;
    color: var(--d4-gold) !important;
    background-color: rgba(12, 34, 42, .88);
    border-top: 1px solid rgba(201, 162, 39, .55);
    border-bottom: 1px solid rgba(201, 162, 39, .55);
    box-shadow: 0 6px 26px rgba(0, 0, 0, .3);
    z-index: 2;
  }
  /* 帯は写真の内側に収める（背景の藍地に溶けて枠が半分だけ見えるのを防ぐ） */
  body.theme-design4 .feature__content .feature__box:nth-child(2n + 1) .feature__box-text h3 {
    right: calc(46% + 14px);
    left: auto;
  }
  body.theme-design4 .feature__content .feature__box:nth-child(2n) .feature__box-text h3 {
    left: calc(54% + 14px);
    right: auto;
  }
}
body.theme-design4 .feature__box-text p {
  font-size: 15px;
  line-height: 2.3;
  letter-spacing: .06em;
  color: #e6e3d9 !important;
}

@media screen and (max-width: 768px) {
  body.theme-design4 .feature__box,
  body.theme-design4 .feature__content .feature__box:nth-child(2n) {
    display: block;
    padding-bottom: 62px;
  }
  body.theme-design4 .feature__box-img,
  body.theme-design4 .feature__content .feature__box:nth-child(2n) .feature__box-img {
    order: 0;
    width: 100%;
    max-width: none;
  }
  body.theme-design4 .feature__box-img img { height: 58vw; }
  body.theme-design4 .feature__box-text,
  body.theme-design4 .feature__content .feature__box:nth-child(2n) .feature__box-text {
    display: block;
    width: auto;
    padding: 26px 22px 0;
  }
  body.theme-design4 .feature__box-text h3 {
    color: var(--d4-gold) !important;
    font-size: 21px;
    letter-spacing: .12em;
    margin-bottom: 14px;
  }
  body.theme-design4 .feature__box-text p { width: auto; margin: 0; }
}

/* ============================================================
   お品書き — 白場。背面に巨大な英字のゴーストテキストを敷く
   ============================================================ */
body.theme-design4 .menu__wrapper {
  background-color: var(--d4-paper) !important;
  background-image: none !important;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
/* 英字は巨大な淡いゴーストテキストとして左に寄せ、見出しの後ろから覗かせる */
body.theme-design4 .menu__wrapper .menu__title p {
  position: absolute;
  left: 4%;
  right: auto;
  top: 30%;
  transform: translateY(-50%);
  text-align: left;
  white-space: nowrap;
  font-size: clamp(52px, 8.6vw, 124px);
  letter-spacing: .02em;
  line-height: 1;
  color: rgba(18, 48, 58, .06);
  z-index: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  body.theme-design4 .menu__wrapper .menu__title p { left: 3%; font-size: 13vw; }
}
body.theme-design4 .menu__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 36px;
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
}
body.theme-design4 .menu__box {
  position: static;
  max-width: none;
  width: auto;
  margin: 0 !important;
}
body.theme-design4 .menu__inbox { display: block; }
body.theme-design4 .menu__inbox-left { width: 100%; }
body.theme-design4 .menu__inbox-left img { width: 100%; height: 210px; object-fit: cover; }
/* page01.css は :nth-child(2n) / :nth-child(3) でお品書きの位置を個別に指定している。
   カードのグリッドへ組み替えるため、幅・余白・高さは !important で明示的に打ち消す。 */
body.theme-design4 .menu__inbox-right {
  writing-mode: horizontal-tb;
  position: static;
  width: auto !important;
  margin: 0 !important;
  padding-top: 16px;
}
body.theme-design4 .menu__inbox-right-color {
  writing-mode: horizontal-tb;
  background-color: transparent !important;
  color: var(--d4-navy) !important;
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .08em;
  display: block;
  width: auto !important;
  padding: 0;
  margin: 0 !important;
}
body.theme-design4 .menu__inbox-right-white {
  background-color: transparent !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--d4-sub);
}
body.theme-design4 .menu__price {
  color: var(--d4-gold) !important;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
body.theme-design4 .menu__price::before { content: "ー"; margin-right: 2px; opacity: .5; }
body.theme-design4 .menu__text { display: none; }

/* CTA = 藍の大きなボタン。右端に矢印 */
body.theme-design4 .menu__button a {
  background-color: var(--d4-navy) !important;
  color: #fff !important;
  max-width: 460px;
  width: 84%;
  margin: 72px auto 0;
  padding: 22px 0;
  position: relative;
  border-radius: 0;
}
body.theme-design4 .menu__button a p { font-size: 16px; letter-spacing: .24em; margin: 0; }
body.theme-design4 .menu__button a::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 900px) {
  body.theme-design4 .menu__content { grid-template-columns: repeat(2, 1fr); gap: 38px 24px; }
}
@media screen and (max-width: 560px) {
  body.theme-design4 .menu__content { grid-template-columns: 1fr; gap: 34px; }
  body.theme-design4 .menu__inbox-left img { height: 54vw; }
  body.theme-design4 .menu__wrapper { padding-bottom: 60px; }
  body.theme-design4 .menu__button a { margin-top: 44px; padding: 18px 0; }
}

/* ============================================================
   店舗のご案内 — 薄い地色。写真は継ぎ目なしで画面端まで並べる
   ============================================================ */
body.theme-design4 .about__wrapper { background-color: var(--d4-mist); }
body.theme-design4 .about__content {
  background: transparent;
  max-width: 1120px;
  width: 90%;
  margin: 0 auto 84px;
}
body.theme-design4 .about__img { margin-bottom: 46px; }

/* --- 店舗写真：小さなサムネイルの横一列（A案と同じ見え方）をやめ、
       3列のタイルを主役にする。タイルを選ぶと上の大きな枠に拡大表示される --- */
body.theme-design4 .about__slider .slide { background: #0b1f26; }
body.theme-design4 .slide .item::before { padding-top: 56%; }
body.theme-design4 .slide .item img { object-fit: cover; height: 100%; }

body.theme-design4 .slide-navigation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
}
body.theme-design4 .slide-navigation .item {
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer;
}
body.theme-design4 .slide-navigation .item::before { display: none; }
body.theme-design4 .slide-navigation .item img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, opacity .3s ease;
}
body.theme-design4 .slide-navigation .item:hover img { transform: scale(1.06); }
/* 選択中は黒を被せず、金の枠で示す（写真が暗くならないように） */
body.theme-design4 .slide-navigation .current::after {
  opacity: 1;
  background: transparent;
  border: 3px solid var(--d4-gold);
}
@media screen and (max-width: 560px) {
  body.theme-design4 .slide-navigation { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

body.theme-design4 .about__icons { margin: 40px 0 0; }
body.theme-design4 .about__icons-box { align-items: flex-start; margin-bottom: 34px; }
body.theme-design4 .about__icons-box-img {
  background: var(--d4-navy);
  border-radius: 0;
  max-width: 44px;
  min-width: 44px;
  height: 44px;
}
body.theme-design4 .about__icons-box-img svg { color: #fff; width: 20px; height: 20px; }
body.theme-design4 .about__icons-box-text h3 { font-size: 14px; letter-spacing: .16em; color: var(--d4-navy); }
body.theme-design4 .about__icons-box-text p { font-weight: 400; }
body.theme-design4 .about__map iframe { aspect-ratio: 21 / 9; }
@media screen and (max-width: 768px) {
  body.theme-design4 .about__map iframe { aspect-ratio: 4 / 3; }
}

/* ============================================================
   よくあるご質問
   ============================================================ */
body.theme-design4 .faq__item { border-bottom-color: var(--d4-line); }
body.theme-design4 .faq__q::before,
body.theme-design4 .faq__q::after { color: var(--d4-gold); }
body.theme-design4 .faq__item[open] .faq__q { color: var(--d4-navy); }

/* ============================================================
   フッター — 藍
   ============================================================ */
body.theme-design4 .footer__slider { background-color: var(--d4-navy-d); }
body.theme-design4 .footer__content {
  background-color: var(--d4-navy-d) !important;
  color: #eae7dd;
  padding: 76px 0 44px;
}
body.theme-design4 .footer__content-nav a,
body.theme-design4 .footer__content-sns a,
body.theme-design4 .footer__actions__item { color: #eae7dd; }
body.theme-design4 .footer__content-nav a { font-size: 13px; letter-spacing: .14em; }
body.theme-design4 .footer__content-text { letter-spacing: .16em; opacity: .8; }
/* 電話・店舗概要・地図・最上位のピクトグラムはSP下部の固定バーが担う。PCには出さない */
body.theme-design4 .footer__actions { display: none; }
body.theme-design4 .footer__bottom { opacity: .6; letter-spacing: .16em; }

/* ============================================================
   下層ページ
   ============================================================ */
body.theme-design4 .page__wrapper .menu__title h1 { font-weight: 500; letter-spacing: .2em; }
body.theme-design4 .page__wrapper .menu__title h1::before,
body.theme-design4 .page__wrapper .menu__title h1::after { display: none; }
body.theme-design4 .page__content td,
body.theme-design4 .page__content th { border-color: var(--d4-line); }
body.theme-design4 .page__back a,
body.theme-design4 .news__top-right a {
  background-color: var(--d4-navy) !important;
  color: #fff !important;
  border-radius: 0;
  letter-spacing: .18em;
}
body.theme-design4 .news__top-right a::after { border-top-color: #fff; border-right-color: #fff; }