@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho+B1:wght@600;700&display=swap');

/* ==========================================================================
   串焼 千鳥 — 追加CSS
   すべて .chitori 配下にスコープしている。このページ以外には影響しない。
   朱 --c-cta は背景専用。対 --c-bg が約2.5:1 しかないため文字色には使わないこと。
   ========================================================================== */

.chitori {
  --c-bg:        #14100e;
  --c-bg2:       #1f1a17;
  --c-fg:        #ece3d2;
  --c-muted:     #a79d8c;
  --c-accent:    #c9a227;
  --c-cta:       #9b2d20;
  --c-cta-hover: #b23628;
  --c-on-cta:    #ece3d2;
  --c-rule:      rgba(201,162,39,.28);
  --c-rule-soft: rgba(236,227,210,.14);
  --c-danger:    #e8846f;   /* 対 --c-bg 約6.5:1。朱は文字色に使えないためこちらを使う */

  --c-mincho: "Shippori Mincho B1","Yu Mincho","游明朝","YuMincho","Hiragino Mincho ProN",serif;
  --c-gothic: "Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;

  --c-s1: 8px; --c-s2: 16px; --c-s3: 24px;
  --c-s4: 40px; --c-s5: 64px; --c-s6: 96px;

  --c-wagara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1' stroke-opacity='0.16'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z'/%3E%3Cpath d='M20 0 L20 40 M0 20 L40 20'/%3E%3C/g%3E%3C/svg%3E");

  /* テーマのコンテンツ幅を抜けて全幅にする */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--c-gothic);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  overflow-x: hidden;
  color-scheme: dark;   /* 日付ピッカーなどネイティブUIも暗い地に合わせる */
}

.chitori * { box-sizing: border-box; }
.chitori p { color: var(--c-fg); }
.chitori a { color: var(--c-accent); }

.chitori :focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* --- テーマ側の装飾を打ち消す --------------------------------------------
   SWELL は .post_content h2 などに地色や擬似要素の飾りを付ける。
   この和モダンの組版とぶつかるため、.chitori の中だけ素の状態に戻す。 */

.chitori h1, .chitori h2, .chitori h3, .chitori h4,
.chitori .wp-block-table figure,
.chitori blockquote {
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-block: 0;
  counter-increment: none;
}
.chitori h1::before, .chitori h1::after,
.chitori h2::before, .chitori h2::after,
.chitori h3::before, .chitori h3::after,
.chitori h4::before, .chitori h4::after,
.chitori blockquote::before, .chitori blockquote::after {
  content: none;
  display: none;
}

/* --- セクションの器 ------------------------------------------------------ */

.chitori .chitori-sec {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
  padding-block: var(--c-s6);
}
.chitori .chitori-sec + .chitori-sec { border-top: 1px solid var(--c-rule-soft); }
.chitori .chitori-menu,
.chitori .chitori-reserve { position: relative; }

/* --- 見出し -------------------------------------------------------------- */

.chitori .chitori-h2 {
  background: none;
  border: 0;
  border-left: 2px solid var(--c-accent);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--c-mincho);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 28.4px);
  line-height: 1.5;
  letter-spacing: .12em;
  color: var(--c-fg);
  margin: 0 0 var(--c-s4);
  padding: 0 0 0 var(--c-s2);
}
.chitori .chitori-h3 {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--c-mincho);
  font-weight: 600;
  font-size: 21.3px;
  letter-spacing: .1em;
  color: var(--c-accent);
  margin: var(--c-s5) 0 var(--c-s3);
}
.chitori .chitori-course-name {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--c-mincho);
  font-weight: 600;
  font-size: 21.3px;
  letter-spacing: .12em;
  color: var(--c-fg);
  margin: 0 0 var(--c-s1);
}

/* --- 本文の調子 ---------------------------------------------------------- */

.chitori .chitori-lede {
  font-family: var(--c-mincho);
  font-size: 21.3px;
  line-height: 1.9;
  letter-spacing: .08em;
}
.chitori .chitori-lede-sm { color: var(--c-muted); max-width: 38em; }
.chitori .chitori-note { color: var(--c-muted); font-size: 14px; max-width: 38em; }
.chitori .chitori-sign {
  margin-top: var(--c-s4);
  color: var(--c-accent);
  font-family: var(--c-mincho);
  font-size: 14px;
  letter-spacing: .2em;
}
.chitori .chitori-price {
  font-family: var(--c-mincho);
  font-size: 21.3px;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--c-s2);
}

/* 架空であることの明示 */
.chitori .chitori-notice {
  max-width: 44em;
  padding: var(--c-s2) var(--c-s3);
  border: 1px dashed var(--c-rule);
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* --- ヒーロー（core/cover） ---------------------------------------------- */

.chitori .chitori-hero {
  position: relative;
  margin-bottom: 0;
  padding: var(--c-s5) var(--c-s2) var(--c-s6);
}

/* カンプと同じ地のグラデーション。
   下部を強く沈めるスクリムは、創業表記を縦組みで写真の暗い側へ移したので不要。 */
.chitori .chitori-hero .wp-block-cover__background {
  background: linear-gradient(180deg,
    rgba(20,16,14,.55) 0%,
    rgba(20,16,14,.35) 45%,
    rgba(20,16,14,.92) 100%) !important;
  opacity: 1 !important;
}

/* 炭火の残光。写真の下部が真っ黒に沈まないよう暖色で持ち上げる。 */
.chitori .chitori-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  z-index: 1;
  background: radial-gradient(90% 100% at 50% 118%,
    rgba(201,90,40,.42), rgba(155,45,32,.14) 45%, transparent 72%);
  pointer-events: none;
}

/* キャッチコピーを右端に、創業表記をその左隣・下寄りに置く。
   row-reverse なので1つ目の子が右、2つ目がその左になる。 */
.chitori .chitori-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--c-s4);
}

.chitori .chitori-hero__copy {
  margin: 0;
  font-family: var(--c-mincho);
  font-weight: 700;
  /* 縦組みなので画面の高さにも連動させる。3文字ぶんの段差を足しても
     1列に収まる大きさにし、折り返しで3列目が出ないようにする。 */
  font-size: clamp(26px, min(5vw, 5vh), 50px);
  letter-spacing: .16em;
  line-height: 1.25;
  color: var(--c-fg);
  text-shadow: 0 2px 24px rgba(20,16,14,.9);
}

.chitori .chitori-hero__sub {
  margin: 0;
  align-self: flex-end;
  font-family: var(--c-mincho);
  font-size: 14px;
  letter-spacing: .24em;
  color: var(--c-muted);
}

@supports (writing-mode: vertical-rl) {
  .chitori .chitori-hero__copy {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .chitori .chitori-hero__sub {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .chitori .chitori-hero__sub .tcy { text-combine-upright: all; }
}

/* 2行目「ひと串ずつ。」だけを3文字ぶん下げて段差をつくる。
   hanging は「1行目以外を下げる」指定で、縦組みでは上端が下がる。 */
@supports (text-indent: 3em hanging) {
  .chitori .chitori-hero__copy { text-indent: 3em hanging; }
}

/* --- 画像の共通枠 -------------------------------------------------------- */

.chitori .chitori-fig { margin: 0; }

/* 比率は必ず CSS 側で決める。
   SWELL の遅延読み込みは表示前の src を 1x1 の GIF に差し替えるため、
   比率を指定しないと画像が正方形に膨らんでレイアウトが崩れる。
   メディア未差し替えでリンク切れのときも同じ理由で必要。 */
.chitori .chitori-fig img,
.chitori .wp-block-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--c-rule-soft);
  border-radius: 0;
}
.chitori .chitori-story .chitori-fig img { aspect-ratio: 4 / 5; }
.chitori .chitori-fig-wide { margin-bottom: var(--c-s3); }

/* 画像をメディアに差し替えるまでのあいだも、枠として成立させる。
   リンク切れの img には alt（元ファイル名）が出るので、どこに何を置くか分かる。 */
.chitori .chitori-fig img,
.chitori .chitori-media img,
.chitori .wp-block-gallery img,
.chitori .wp-block-cover__image-background {
  background-color: var(--c-bg2);
  background-image: var(--c-wagara);
  background-size: 40px 40px;
  font-family: var(--c-gothic);
  font-size: 12.8px;
  letter-spacing: .14em;
  color: var(--c-muted);
}

/* --- こだわり（木札を掛ける） ------------------------------------------- */

.chitori .chitori-pillars { gap: var(--c-s4); }
.chitori .chitori-media { position: relative; margin: 0 0 var(--c-s2); }
.chitori .chitori-media .chitori-fig img { aspect-ratio: 1 / 1; object-fit: cover; }

.chitori .chitori-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: var(--c-s2) 10px;
  background: rgba(31,26,23,.90);
  border-top: 1px solid var(--c-rule);
  border-right: 1px solid var(--c-rule);
  font-family: var(--c-mincho);
  font-weight: 600;
  font-size: 21.3px;
  letter-spacing: .22em;
  color: var(--c-accent);
}
@supports (writing-mode: vertical-rl) {
  .chitori .chitori-tag { writing-mode: vertical-rl; text-orientation: upright; }
}

.chitori .chitori-pillar-body {
  margin: 0;
  padding-top: var(--c-s2);
  border-top: 1px solid var(--c-rule);
  font-family: var(--c-mincho);
  line-height: 1.95;
}

/* --- おしながき（表を品書きに見せる） ----------------------------------- */

.chitori .wp-block-table { margin: 0; }
.chitori .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--c-fg);
  background: transparent;
}
.chitori .wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--c-rule-soft);
  padding: var(--c-s2) var(--c-s1);
  vertical-align: baseline;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 見出しは画像の左上に重ねる。黒帯を敷いて写真の明暗に左右されず読ませる。 */
.chitori .chitori-menu-media {
  position: relative;
  margin-bottom: var(--c-s3);
}
.chitori .chitori-menu-media .chitori-fig-wide { margin-bottom: 0; }

.chitori .chitori-menu-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: var(--c-s2) var(--c-s3);
  background: rgba(20,16,14,.85);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--c-mincho);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .1em;
  color: var(--c-accent);
}

.chitori .chitori-dishes table { table-layout: auto; }
.chitori .chitori-dishes td:nth-child(1) {
  font-family: var(--c-mincho);
  font-size: 21.3px;
  letter-spacing: .1em;
  white-space: nowrap;
  width: 1%;
}
.chitori .chitori-dishes td:nth-child(2) {
  color: var(--c-muted);
  font-size: 14px;
  border-bottom-style: dotted;
  border-bottom-color: var(--c-rule);
}
.chitori .chitori-dishes td:nth-child(3) {
  font-family: var(--c-mincho);
  font-size: 21.3px;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.chitori .chitori-spec td:nth-child(1) {
  font-family: var(--c-mincho);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--c-accent);
  white-space: nowrap;
  width: 8em;
}
.chitori .chitori-spec td:nth-child(2) { font-size: 14px; }

.chitori .chitori-newslist td { font-family: var(--c-mincho); }
.chitori .chitori-newslist td:nth-child(1) {
  color: var(--c-accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  white-space: nowrap;
  width: 11em;
}

.chitori .chitori-media-list td:nth-child(1) {
  font-family: var(--c-mincho);
  letter-spacing: .1em;
}
.chitori .chitori-media-list td:nth-child(2) {
  color: var(--c-muted);
  font-size: 14px;
  text-align: right;
}

.chitori .chitori-courses { gap: var(--c-s4); margin-top: var(--c-s3); }
.chitori .chitori-courses .wp-block-column {
  padding-top: var(--c-s3);
  border-top: 1px solid var(--c-rule);
}

/* --- 店内（ギャラリー） -------------------------------------------------- */

/* コアのギャラリーは gap を独自変数で計算するため、幅を自前で決める */
.chitori .chitori-grid4 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-s3);
}
/* コアは figure.wp-block-image に flex-grow:1 と列幅を当ててくる。しかもその
   セレクタは :not(#individual-image) でID相当の詳細度を稼いでいるため、
   こちらも同じ手を使わないと上書きできない。 */
.chitori .chitori-grid4.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: calc((100% - var(--c-s3) * 3) / 4);
  margin: 0;
  flex: 0 0 auto;
}
@media (max-width: 781px) {
  .chitori .chitori-grid4.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc((100% - var(--c-s3)) / 2);
  }
}
.chitori .chitori-grid4 figcaption,
.chitori .wp-element-caption {
  font-family: var(--c-mincho);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--c-fg);
  background: none;
  padding: var(--c-s1) 0 0;
}

/* --- お客様の声 ---------------------------------------------------------- */

.chitori .chitori-stars {
  color: var(--c-accent);
  letter-spacing: .12em;
  margin: 0 0 var(--c-s1);
}
.chitori .chitori-voice {
  margin: 0;
  padding: var(--c-s3) 0 0;
  border: 0;
  border-top: 1px solid var(--c-rule);
}
.chitori .chitori-voice p {
  font-family: var(--c-mincho);
  line-height: 1.95;
  margin: 0;
}
.chitori .chitori-voice cite {
  display: block;
  margin-top: var(--c-s2);
  color: var(--c-muted);
  font-size: 14px;
  font-style: normal;
}

/* --- ボタン -------------------------------------------------------------- */

.chitori .chitori-buttons { margin-top: var(--c-s4); gap: var(--c-s2); }
.chitori .chitori-btn .wp-block-button__link {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--c-s5);
  border-radius: 0;
  background: var(--c-cta);
  color: var(--c-on-cta);
  border: 1px solid var(--c-cta);
  font-family: var(--c-mincho);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background-color .2s ease, border-color .2s ease;
}
.chitori .chitori-btn .wp-block-button__link:hover { background: var(--c-cta-hover); }
.chitori .chitori-btn.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-rule);
}
.chitori .chitori-btn.is-style-outline .wp-block-button__link:hover {
  border-color: var(--c-accent);
  background: transparent;
}

/* --- フッター注記 -------------------------------------------------------- */

.chitori .chitori-foot { padding-block: var(--c-s5); text-align: center; }
.chitori .chitori-sep {
  border: 0;
  border-top: 1px solid var(--c-rule);
  margin: 0 0 var(--c-s3);
}
.chitori .chitori-foot-note {
  max-width: 42em;
  margin-inline: auto;
  color: var(--c-muted);
  font-size: 12.8px;
  line-height: 1.9;
}

/* --- ご予約フォーム（Contact Form 7） -------------------------------------
   CF7 が出力するクラスにも .chitori を前置し、他ページに漏れないようにする。 */

.chitori .wpcf7 { margin-top: var(--c-s4); }
.chitori .wpcf7-form { display: grid; gap: var(--c-s3); }
.chitori .wpcf7-form > .hidden-fields-container { display: none; }
.chitori .chitori-field p,
.chitori .chitori-submit p { margin: 0; }
.chitori .chitori-field br { display: none; }

@media (min-width: 640px) {
  .chitori .wpcf7-form { grid-template-columns: repeat(2, 1fr); }
  .chitori .chitori-field { grid-column: 1 / -1; }
  .chitori .chitori-field-half { grid-column: auto; }
  .chitori .chitori-submit,
  .chitori .wpcf7-response-output { grid-column: 1 / -1; }
}

.chitori .chitori-field label {
  display: flex; align-items: center; gap: var(--c-s1);
  font-family: var(--c-mincho); font-size: 14px;
  letter-spacing: .14em; margin-bottom: var(--c-s1);
}
.chitori .chitori-req {
  font-family: var(--c-gothic); font-size: 11px; letter-spacing: .1em;
  background: var(--c-cta); color: var(--c-on-cta);
  padding: 2px 6px; line-height: 1.6;
}
.chitori .chitori-help {
  margin: 6px 0 0; color: var(--c-muted);
  font-size: 12.8px; line-height: 1.7;
}
.chitori .wpcf7-form-control-wrap { display: block; }

.chitori .wpcf7-form input[type="text"],
.chitori .wpcf7-form input[type="tel"],
.chitori .wpcf7-form input[type="email"],
.chitori .wpcf7-form input[type="date"],
.chitori .wpcf7-form input[type="number"],
.chitori .wpcf7-form select,
.chitori .wpcf7-form textarea {
  width: 100%; min-height: 48px; padding: 10px var(--c-s2);
  background: var(--c-bg); color: var(--c-fg);
  border: 1px solid var(--c-rule-soft); border-radius: 0;
  font-family: var(--c-gothic); font-size: 16px;
  transition: border-color .2s ease;
}
.chitori .wpcf7-form textarea { min-height: 120px; line-height: 1.8; resize: vertical; }
.chitori .wpcf7-form input:hover,
.chitori .wpcf7-form select:hover,
.chitori .wpcf7-form textarea:hover { border-color: var(--c-rule); }
.chitori .wpcf7-form input:focus-visible,
.chitori .wpcf7-form select:focus-visible,
.chitori .wpcf7-form textarea:focus-visible { border-color: var(--c-accent); }

.chitori .chitori-submit input[type="submit"] {
  min-height: 56px; padding: 0 var(--c-s5);
  background: var(--c-cta); color: var(--c-on-cta);
  border: 1px solid var(--c-cta); border-radius: 0;
  font-family: var(--c-mincho); font-size: 16px; font-weight: 600;
  letter-spacing: .12em; cursor: pointer;
  transition: background-color .2s ease;
}
.chitori .chitori-submit input[type="submit"]:hover { background: var(--c-cta-hover); }

/* 検証メッセージは当該項目の直下に出る（CF7 の既定） */
.chitori .wpcf7-not-valid-tip {
  margin-top: 6px; color: var(--c-danger);
  font-size: 12.8px; line-height: 1.7;
}
.chitori .wpcf7-form .wpcf7-not-valid { border-color: var(--c-danger); }
.chitori .wpcf7-response-output {
  margin: var(--c-s2) 0 0; padding: var(--c-s2) var(--c-s3);
  border: 1px solid var(--c-rule); border-radius: 0;
  color: var(--c-fg); font-size: 14px; line-height: 1.8;
}
.chitori .wpcf7 form.invalid .wpcf7-response-output,
.chitori .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--c-danger); }
.chitori .wpcf7-spinner { margin-left: var(--c-s2); }

/* --- ヘッダーロゴ ------------------------------------------------------------
   子テーマの swell_parts_head_logo フィルターで、サイト名を最初の空白で
   2つの span に分けている。通常ヘッダーと固定ヘッダーの両方に効く。 */

.chitori-logo__sub,
.chitori-logo__main {
  font-family: "Shippori Mincho B1", "Yu Mincho", "游明朝", "YuMincho", serif;
  font-weight: 600;
}
.chitori-logo__sub {
  font-size: .62em;
  letter-spacing: .14em;
  margin-right: .45em;
  opacity: .9;
}
.chitori-logo__main { letter-spacing: .16em; }

/* --- 固定ヘッダーの位置 ------------------------------------------------------
   SWELL の透過ヘッダー用CSSは .l-header のコンテナだけ max-width:100% にし、
   固定ヘッダー側には当てない。そのためスクロールすると店名とナビが内側へずれる。
   .-transparent はトップページでしか付かないので、他ページには影響しない。 */

.l-fixHeader.-transparent .l-container { max-width: 100%; }

/* --- ヘッダーの「席を予約する」ボタン --------------------------------------
   ここだけはページ本文（.chitori）の外に出るためスコープの前置が使えない。
   このサイト固有のクラス .chitori-nav-cta に限定して、他へ影響させない。 */

.menu-item.chitori-nav-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  background: #9b2d20;
  color: #ece3d2 !important;
  border-radius: 0;
  font-family: "Shippori Mincho B1", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: .12em;
  transition: background-color .2s ease;
}
.menu-item.chitori-nav-cta > a:hover { background: #b23628; }
.menu-item.chitori-nav-cta > a::after { display: none; }

/* --- レスポンシブ -------------------------------------------------------- */

@media (max-width: 1023px) {
  .chitori .chitori-pillars { gap: var(--c-s5); }
  .chitori .chitori-media .chitori-fig img { aspect-ratio: 3 / 2; }
}

@media (max-width: 781px) {
  .chitori .chitori-sec { padding-block: var(--c-s5); }
  .chitori .chitori-menu-tag { font-size: 26px; padding: var(--c-s1) var(--c-s2); }
  .chitori .chitori-hero .wp-block-cover__inner-container { gap: var(--c-s3); }
  .chitori .chitori-dishes td:nth-child(1),
  .chitori .chitori-dishes td:nth-child(3) { font-size: 18px; }
  .chitori .chitori-spec td:nth-child(1) { width: 6em; }
  .chitori .chitori-newslist td:nth-child(1) { width: auto; }
}

/* --- モーションを減らす設定を尊重する ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .chitori *,
  .chitori *::before,
  .chitori *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}