/* ============================================================
   F｜左縦ナビ・京仕出し
   参考: https://hishiiwa.com/ja/

   採り入れた考え方
     - グローバルナビを画面左端に縦書きで固定する（B案の「濃色サイドバー」とは別物。
       こちらは幅112pxの生成りのレール＋縦組みの文字で、面ではなく余白で見せる）
     - 生成り × 若草 の2色。写真の背後に色の面をずらして重ね、貼り絵のように組む
     - 見出しは太めの明朝を大きく。装飾は使わない
     - ボタンは菱形（回転させた正方形）に矢印

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

body.theme-design6 {
  --d6-ivory: #efece4;     /* 生成り（地色） */
  --d6-ivory-d: #e6e2d8;   /* 生成りの濃い側 */
  --d6-sage: #b5c1a0;      /* 若草（差し色の面） */
  --d6-ink: #26241f;       /* 墨 */
  --d6-sub: #7d786c;       /* 補助テキスト */
  --d6-card: #ffffff;
  --d6-line: #d5d0c3;
  /* 左ナビの幅。店舗ロゴは横長（例: 250×83）が多いため、
     読める大きさで置けるところまで広げている */
  --d6-rail: 140px;

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

body.theme-design6 .front__page {
  background: var(--d6-ivory) !important;
}

/* ============================================================
   左端の縦ナビ（PCのみ）
   SPは基本CSSどおりハンバーガーに戻るため、必ず 769px 以上に閉じ込める
   ============================================================ */
@media screen and (min-width: 769px) {
  body.theme-design6 #container { padding-left: var(--d6-rail); }

  /* レールは1画面に収める。スクロールバーを出さないため overflow:hidden にし、
     ロゴ・ナビ・タグラインの寸法を画面の高さ(vh)に連動させて縮める */
  body.theme-design6 .header {
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--d6-rail);
    height: 100vh;
    background-image: none;
    background-color: var(--d6-ivory);
    border-right: 1px solid var(--d6-line);
    overflow: hidden;
  }

  body.theme-design6 .header__main {
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    margin: 0;
    padding: clamp(14px, 2.4vh, 26px) 0 clamp(12px, 2vh, 22px);
  }
  body.theme-design6 .header__logo {
    width: clamp(72px, 9vh, 104px);
    padding: 0;
    margin: 0 0 clamp(18px, 4vh, 44px);
    flex: none;
  }
  /* ナビはロゴの直下に固定する。space-between にすると画面の高さによって
     項目の位置が上下してしまうため、flex-start で上に詰め、
     タグラインとSNSだけを margin-top:auto で下端へ送る */
  body.theme-design6 .header__right {
    flex: 1;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    min-height: 0;
  }
  /* DOM順は「タグライン＋SNS → ナビ」。表示はナビを上、タグラインを下にする。
     縦が足りないときはタグラインだけを縮め、SNSアイコンは必ず全部見えるようにする */
  body.theme-design6 .header__right-top {
    order: 2;
    flex: 0 1 auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    margin: auto 0 0;
    padding-top: clamp(12px, 2vh, 28px);
    gap: 10px;
  }
  body.theme-design6 .header__right-top-text {
    writing-mode: vertical-rl;
    color: var(--d6-sub);
    font-size: 10px;
    letter-spacing: .24em;
    flex: 0 1 auto;
    min-height: 0;
    max-height: clamp(4em, 12vh, 13em);
    overflow: hidden;
  }
  body.theme-design6 .header__right-top-icons { flex: none; flex-direction: row; margin: 0; gap: 14px; }
  body.theme-design6 .header__right-top-icons a { margin: 0; }
  body.theme-design6 .header__right-top-icons svg { color: var(--d6-ink); width: 17px; height: 17px; }
  body.theme-design6 .header__right-buttom { order: 1; flex: 0 0 auto; width: 100%; }

  body.theme-design6 .gnavi__lists { flex-direction: column; align-items: center; }
  body.theme-design6 .gnavi__list { margin: 0 0 clamp(12px, 2.6vh, 30px); text-align: center; }
  body.theme-design6 .gnavi__list:last-child { margin-bottom: 0; }
  body.theme-design6 .gnavi__list .gnavi__ja {
    writing-mode: vertical-rl;
    color: var(--d6-ink);
    font-size: clamp(11px, 1.6vh, 14px);
    font-weight: 400;
    letter-spacing: .26em;
    line-height: 1;
    display: inline-block;
  }
  body.theme-design6 .gnavi__list p { display: none; }
  body.theme-design6 .gnavi__list--reserve .gnavi__ja {
    background: var(--d6-sage);
    color: #fff;
    padding: 16px 7px;
  }
  /* 縦組みでは下線アニメーションが横に伸びて崩れるので止める */
  body.theme-design6 .a-animation-wh a::before { display: none; }
  body.theme-design6 .gnavi__list a:hover { opacity: .6; }
}

/* ============================================================
   ファーストビュー — 写真を内側に落とし込み、背後に若草の面をずらして敷く
   box-shadow は要素の背景の「後ろ」に描かれるため、色面の重なりに使える
   ============================================================ */
@media screen and (min-width: 769px) {
  body.theme-design6 .firstview {
    margin: 104px clamp(56px, 7vw, 120px) clamp(56px, 7vw, 104px) clamp(24px, 3.5vw, 64px);
    box-shadow: clamp(26px, 3.4vw, 58px) calc(-1 * clamp(26px, 3.4vw, 58px)) 0 0 var(--d6-sage);
  }
}
/* 電話は写真の右下に白い札で置く。写真の幅に対して小さく見えないよう大きめに取る */
body.theme-design6 .firstview__text {
  background-color: var(--d6-card) !important;
  color: var(--d6-ink);
  margin: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 1.8vw, 26px) clamp(24px, 3vw, 46px) clamp(13px, 1.5vw, 22px);
  letter-spacing: .12em;
}
body.theme-design6 .firstview__text p { color: var(--d6-sub); font-size: clamp(11px, 1vw, 14px); }
body.theme-design6 .firstview__tel {
  color: var(--d6-ink);
  font-size: clamp(22px, 2.5vw, 36px);
  letter-spacing: .04em;
}
body.theme-design6 .firstview__tel span { font-size: clamp(14px, 1.5vw, 21px); }
body.theme-design6 .copyright { color: var(--d6-sub); left: auto; right: 14px; top: 40%; }
@media screen and (max-width: 768px) {
  body.theme-design6 .copyright { display: none; }
}

/* ============================================================
   セクション見出し — 左そろえの大きな明朝。頭に小さな若草の菱形
   ============================================================ */
body.theme-design6 .menu__title,
body.theme-design6 .news__top-left {
  background-image: none;
  text-align: left;
}
body.theme-design6 .menu__title {
  max-width: 1120px;
  width: 88%;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 116px) 0 clamp(30px, 4vw, 52px);
}
body.theme-design6 .about__wrapper .menu__title {
  padding: clamp(64px, 8vw, 116px) 0 clamp(30px, 4vw, 52px);
}
body.theme-design6 .menu__title h2,
body.theme-design6 .news__top-left h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  margin-bottom: 12px;
  position: relative;
  padding-left: 26px;
}
body.theme-design6 .menu__title h2::after,
body.theme-design6 .news__top-left h2::after { display: none; }
body.theme-design6 .menu__title h2::before,
body.theme-design6 .news__top-left h2::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  width: 11px;
  height: 11px;
  background-color: var(--d6-sage);
  transform: translateY(-50%) rotate(45deg);
}
body.theme-design6 .menu__title p,
body.theme-design6 .news__top-left p {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--d6-sub);
  padding-left: 26px;
}

/* ============================================================
   お知らせ
   ============================================================ */
body.theme-design6 .news__wrapper { max-width: 1120px; width: 88%; margin: clamp(56px, 7vw, 96px) auto clamp(40px, 5vw, 70px); }
body.theme-design6 .news__item,
body.theme-design6 .news__item:first-child { border-color: var(--d6-line); }
body.theme-design6 .news__item a:hover { background: rgba(181, 193, 160, .18); }
body.theme-design6 .news__card .news__box { background: var(--d6-card); border: 0; }
body.theme-design6 .news__card-title { font-weight: 600; }
body.theme-design6 .news__arrow { border-color: var(--d6-line); background: var(--d6-card); }
body.theme-design6 .news__dot.is-current::before { background: var(--d6-sage); border-color: var(--d6-sage); }
body.theme-design6 .news__more a { color: var(--d6-ink); }

/* ============================================================
   こだわり — 生成りのまま。写真の背後に若草の面をずらして重ねる
   ============================================================ */
body.theme-design6 .feature__wrapper {
  background-color: var(--d6-ivory) !important;
  background-image: none !important;
  padding-bottom: 10px;
}
body.theme-design6 .feature__message { color: var(--d6-ink); padding: 11% 0; }
body.theme-design6 .feature__message h2 { font-weight: 600; letter-spacing: .2em; color: var(--d6-ink); }
body.theme-design6 .feature__message p { color: var(--d6-sub) !important; }
/* SPは横書きに戻る。基本CSSの40px（425px以下は6.5vw）だと見出しが4行以上に折り返すため、
   3行以内に収まる大きさへ落とし、字間も詰める */
@media screen and (max-width: 768px) {
  body.theme-design6 .feature__message h2 {
    font-size: clamp(20px, 5.4vw, 26px);
    letter-spacing: .1em;
    line-height: 1.55;
  }
  body.theme-design6 .feature__message p { font-size: 15px; line-height: 2; }
}

body.theme-design6 .feature__box {
  max-width: 1180px;
  width: 88%;
  margin: 0 auto;
  align-items: center;
  padding-bottom: clamp(56px, 7vw, 110px);
  color: var(--d6-ink);
}
body.theme-design6 .feature__box-img img {
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
}
/* 奇数は左上に、偶数は右上に色面をずらす */
body.theme-design6 .feature__content .feature__box:nth-child(2n + 1) .feature__box-img {
  box-shadow: calc(-1 * clamp(18px, 2.4vw, 38px)) calc(-1 * clamp(18px, 2.4vw, 38px)) 0 0 var(--d6-sage);
}
body.theme-design6 .feature__content .feature__box:nth-child(2n) .feature__box-img {
  box-shadow: clamp(18px, 2.4vw, 38px) calc(-1 * clamp(18px, 2.4vw, 38px)) 0 0 var(--d6-sage);
}
body.theme-design6 .feature__box-text h3 {
  font-family: inherit;
  font-size: clamp(21px, 2.4vw, 31px);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.6;
  margin-bottom: 22px;
  color: var(--d6-ink) !important;
}
body.theme-design6 .feature__box-text p {
  font-size: 14.5px;
  line-height: 2.3;
  color: var(--d6-ink) !important;
}
@media screen and (max-width: 768px) {
  body.theme-design6 .feature__box,
  body.theme-design6 .feature__content .feature__box:nth-child(2n) { width: 88%; padding-bottom: 54px; }
  body.theme-design6 .feature__box-img,
  body.theme-design6 .feature__content .feature__box:nth-child(2n) .feature__box-img {
    width: 100%;
    max-width: none;
    box-shadow: -14px -14px 0 0 var(--d6-sage);
  }
  body.theme-design6 .feature__box-img img { height: 58vw; }
  body.theme-design6 .feature__box-text p { width: 100%; }
}

/* ============================================================
   お品書き — 白いカードを若草の面にずらして貼る
   ============================================================ */
body.theme-design6 .menu__wrapper {
  background-color: var(--d6-ivory-d) !important;
  background-image: none !important;
  padding-bottom: clamp(64px, 8vw, 112px);
}
body.theme-design6 .menu__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(38px, 4.6vw, 66px) clamp(24px, 3vw, 44px);
  max-width: 1120px;
  width: 88%;
  margin: 0 auto;
}
body.theme-design6 .menu__box {
  position: static;
  max-width: none;
  width: auto;
  margin: 0 !important;
  background: var(--d6-card);
}
/* 3枚に1枚だけ色面をずらして、貼り絵のような揺らぎを出す */
body.theme-design6 .menu__content .menu__box:nth-child(3n + 1) {
  box-shadow: -16px 16px 0 0 var(--d6-sage);
}
body.theme-design6 .menu__content .menu__box:nth-child(3n) {
  box-shadow: 16px 16px 0 0 var(--d6-sage);
}
body.theme-design6 .menu__inbox { display: block; }
body.theme-design6 .menu__inbox-left { width: 100%; }
body.theme-design6 .menu__inbox-left img {
  width: 100%;
  height: clamp(180px, 19vw, 240px);
  object-fit: cover;
}
/* page01.css は :nth-child(2n) / :nth-child(3) でお品書きの位置を個別に指定している。
   カードのグリッドへ組み替えるため、幅・余白・高さは !important で明示的に打ち消す。 */
body.theme-design6 .menu__inbox-right {
  writing-mode: horizontal-tb;
  position: static;
  width: auto !important;
  margin: 0 !important;
  padding: 22px 22px 26px;
}
body.theme-design6 .menu__inbox-right-color {
  writing-mode: horizontal-tb;
  background-color: transparent !important;
  color: var(--d6-ink) !important;
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .1em;
  display: block;
  width: auto !important;
  padding: 0;
  margin: 0 0 10px !important;
}
body.theme-design6 .menu__inbox-right-white {
  background-color: transparent !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 2;
  color: var(--d6-sub);
}
body.theme-design6 .menu__price {
  color: var(--d6-ink) !important;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
body.theme-design6 .menu__text { display: none; }

@media screen and (max-width: 1024px) {
  body.theme-design6 .menu__content { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 560px) {
  body.theme-design6 .menu__content { grid-template-columns: 1fr; gap: 34px; }
  body.theme-design6 .menu__inbox-left img { height: 54vw; }
  /* SPは色面のずれ幅を詰める（横スクロールを出さないため） */
  body.theme-design6 .menu__content .menu__box:nth-child(3n + 1),
  body.theme-design6 .menu__content .menu__box:nth-child(3n) { box-shadow: -10px 10px 0 0 var(--d6-sage); }
}

/* CTA = 若草の菱形に矢印 */
body.theme-design6 .menu__button a,
body.theme-design6 .page__back a {
  background-color: transparent !important;
  color: var(--d6-ink) !important;
  max-width: none;
  width: 88%;
  min-width: 0;
  border-radius: 0;
  padding: 0;
  margin: clamp(44px, 5vw, 72px) auto 0;
  justify-content: center;
}
body.theme-design6 .menu__button a p,
body.theme-design6 .page__back a p {
  position: relative;
  padding-left: 62px;
  font-size: 15px;
  letter-spacing: .2em;
  margin: 0;
}
body.theme-design6 .menu__button a p::before,
body.theme-design6 .page__back a p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  background: var(--d6-sage);
  transform: rotate(45deg);
}
body.theme-design6 .menu__button a p::after,
body.theme-design6 .page__back a p::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ============================================================
   店舗のご案内
   ============================================================ */
body.theme-design6 .about__content {
  background: transparent;
  max-width: 1120px;
  width: 88%;
  margin: 0 auto clamp(56px, 7vw, 96px);
}
body.theme-design6 .about__icons { margin: 44px 0 0; }
body.theme-design6 .about__icons-box { align-items: flex-start; margin-bottom: 32px; }
body.theme-design6 .about__icons-box-img {
  background: var(--d6-sage);
  border-radius: 0;
  max-width: 44px;
  min-width: 44px;
  height: 44px;
}
body.theme-design6 .about__icons-box-img svg { color: #fff; width: 19px; height: 19px; }
body.theme-design6 .about__icons-box-text h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--d6-sub);
}
body.theme-design6 .about__icons-box-text p { font-weight: 400; font-size: 14px; }
/* サムネイルはメイン写真に重ねず、下に並べる */
body.theme-design6 .slide-navigation { margin: 10px 0 0; justify-content: flex-start; }
body.theme-design6 .slide-navigation .item { border: 0; margin: 0 4px 0 0; }

/* ============================================================
   よくあるご質問
   ============================================================ */
body.theme-design6 .faq__item { border-bottom-color: var(--d6-line); }
body.theme-design6 .faq__q { font-weight: 600; }
body.theme-design6 .faq__q::before,
body.theme-design6 .faq__q::after { color: var(--d6-sage); }
body.theme-design6 .faq__item[open] .faq__q { color: var(--d6-ink); }

/* ============================================================
   フッター — 生成りのまま。細い罫で区切る
   ============================================================ */
body.theme-design6 .footer__slider { background-color: var(--d6-ivory-d); }
body.theme-design6 .footer__content {
  background-color: var(--d6-ivory) !important;
  color: var(--d6-ink);
  border-top: 1px solid var(--d6-line);
  padding: clamp(52px, 6vw, 84px) 0 40px;
}
body.theme-design6 .footer__content-nav a,
body.theme-design6 .footer__content-sns a,
body.theme-design6 .footer__actions__item { color: var(--d6-ink); }
body.theme-design6 .footer__content-nav a { font-size: 13px; letter-spacing: .16em; }
body.theme-design6 .footer__content-text { font-size: 11px; letter-spacing: .2em; color: var(--d6-sub); }
body.theme-design6 .footer__content-sns svg { color: var(--d6-ink); }
body.theme-design6 .footer__text { color: var(--d6-ink); }
/* 電話・店舗概要・地図・最上位のピクトグラムはSP下部の固定バーが担う。PCには出さない */
body.theme-design6 .footer__actions { display: none; }
body.theme-design6 .footer__bottom { color: var(--d6-sub); font-size: 10px; letter-spacing: .18em; margin-top: 56px; }
body.theme-design6 #sp_bottom { border-top: 1px solid var(--d6-line); }

/* ============================================================
   下層ページ
   ============================================================ */
body.theme-design6 .page__wrapper .menu__title { width: 100%; text-align: left; padding: 0 0 44px; }
body.theme-design6 .page__wrapper .menu__title h1 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: .14em;
  padding-left: 26px;
  position: relative;
}
body.theme-design6 .page__wrapper .menu__title h1::after { display: none; }
body.theme-design6 .page__wrapper .menu__title h1::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 50%;
  width: 11px;
  height: 11px;
  background-color: var(--d6-sage);
  transform: translateY(-50%) rotate(45deg);
}
body.theme-design6 .page__content table { background: var(--d6-card); }
body.theme-design6 .page__content td,
body.theme-design6 .page__content th { border-color: var(--d6-line); }
body.theme-design6 .news__top-right a {
  background-color: var(--d6-sage) !important;
  color: #fff !important;
  border-radius: 0;
  letter-spacing: .16em;
}
body.theme-design6 .news__top-right a::after { border-top-color: #fff; border-right-color: #fff; }