/* ▼ ホバー（カーソルを乗せたときの見た目）について
 * すべての :hover 指定は @media (hover: hover) and (pointer: fine) の中に入れている。
 * 指で操作する端末では、1回目のタップが「カーソルを乗せた」扱いになってしまい、
 * リンクが開くまでに2回タップが必要になるため（2026-08-24 実機で確認）。
 * 新しくホバーを足すときも、必ずこのガードの中に書くこと。 */
/* ==================================================================
 * 割烹富士テーマ 基本CSS
 * ================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f3ece0; color: #33302b; }
img { max-width: 100%; }
a { color: inherit; }

/* WP管理バー時の調整 */
.admin-bar #kf-mobilebar { /* モバイルバーは下部固定なので影響なし */ }

/* 画像カバー共通 */
.kf-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================================================================
 * トップ ファーストビュー 画像スライダー（CSSクロスフェード）
 * ================================================================== */
.kf-hero-slider { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #e7ddca; }
.kf-hero-slide { position: absolute; inset: 0; opacity: 0; animation: kfHeroSlide 24s infinite; }
.kf-hero-slide picture, .kf-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kf-hero-slide:nth-child(1) { animation-delay: 0s; }
.kf-hero-slide:nth-child(2) { animation-delay: -6s; }
.kf-hero-slide:nth-child(3) { animation-delay: -12s; }
.kf-hero-slide:nth-child(4) { animation-delay: -18s; }
@keyframes kfHeroSlide {
  0%, 20.83% { opacity: 1; }
  25%        { opacity: 0; }
  95.83%     { opacity: 0; }
  100%       { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-hero-slide { animation: none; }
  .kf-hero-slide:nth-child(1) { opacity: 1; }
}

/* 写真プレースホルダー（画像未設定時） */
.kf-photoph {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background-color: #e7ddca;
  background-image: repeating-linear-gradient(135deg, rgba(184,146,63,0.10) 0, rgba(184,146,63,0.10) 1px, transparent 1px, transparent 11px);
  display: flex; align-items: center; justify-content: center;
}
.kf-photoph span {
  font-family: 'Shippori Mincho B1', serif; font-size: 14px; letter-spacing: 0.06em;
  color: rgba(98,80,48,0.72); text-align: center; padding: 0 14px; line-height: 1.5;
}

/* メニューグリッド（ショートコード出力）のレスポンシブ列数 */
.kf-menu-grid { display: grid; }
@media (max-width: 980px) { .kf-menu-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .kf-menu-grid { grid-template-columns: 1fr !important; } }

/* ==================================================================
 * レスポンシブ（元サイトと同一の #kf-responsive を移植）
 * ================================================================== */
@media (max-width:980px){
  .kf-foot-top{ flex-wrap:wrap !important; }
  div[style*="max-width: 1180px"][style*="display: flex"],
  div[style*="max-width: 1440px"][style*="display: flex"]:not(.kf-bar),
  div[style*="max-width: 1340px"][style*="display: flex"],
  div[style*="max-width: 1120px"][style*="display: flex"],
  div[style*="max-width: 920px"][style*="display: flex"],
  div[style*="max-width: 820px"][style*="display: flex"]{
    flex-direction:column !important; align-items:stretch !important;
  }
  div[style*="max-width: 1180px"][style*="display: flex"] > *,
  div[style*="max-width: 1440px"][style*="display: flex"]:not(.kf-bar) > *,
  div[style*="max-width: 1340px"][style*="display: flex"] > *,
  div[style*="max-width: 1120px"][style*="display: flex"] > *,
  div[style*="max-width: 920px"][style*="display: flex"] > *{
    width:100% !important; max-width:100% !important;
  }
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="writing-mode: vertical-rl"]{ writing-mode:horizontal-tb !important; height:auto !important; }
  [style*="min-height: 600px"],[style*="min-height: 330px"],[style*="min-height: 300px"],[style*="min-height: 230px"],[style*="min-height: 200px"]{ min-height:0 !important; }
  [style*="position: absolute"][style*="bottom: 34px"][style*="left: 54px"]{
    position:static !important; flex-wrap:wrap !important; padding:0 16px 28px !important;
  }
  [style*="position: absolute"][style*="top: 50%"][style*="right: 0px"]{ position:static !important; transform:none !important; margin-top:14px !important; }
  .kf-hero-photo{ min-height:240px !important; }
}
@media (max-width:640px){
  div[style*="display: flex"][style*="gap: 30px"],
  div[style*="display: flex"][style*="gap: 36px"],
  div[style*="display: flex"][style*="gap: 40px"],
  div[style*="display: flex"][style*="gap: 46px"]{ flex-wrap:wrap !important; align-items:stretch !important; }
  [style*="width: 200px"],[style*="width: 230px"],[style*="width: 240px"],[style*="width: 280px"],[style*="width: 300px"],[style*="width: 320px"],[style*="width: 340px"],[style*="width: 400px"],[style*="width: 480px"]{ width:100% !important; }
  div[style*="box-shadow: rgba(120, 100, 60, 0.08)"][style*="display: flex"]{ flex-direction:column !important; }
  div[style*="box-shadow: rgba(120, 100, 60, 0.08)"] > div[style*="width: 340px"]{ height:220px !important; }
  div[style*="box-shadow: rgba(120, 100, 60, 0.08)"] [style*="padding: 40px 46px"]{ padding:26px 22px !important; }
  .kf-ctaband{ flex-direction:column !important; }
  .kf-ctaband > div[style*="width: 200px"]{ height:200px !important; }
  .kf-menucard{ flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
  [style*="gap: 18px; margin-bottom: 18px; position: relative"]{ flex-wrap:wrap !important; }
}
@media (max-width:560px){
  [style*="grid-template-columns: repeat("],
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }
  .kf-ctarow{ flex-direction:column !important; align-items:stretch !important; }
  .kf-ctarow > a{ justify-content:center !important; }
  .kf-tlrow{ flex-direction:column !important; gap:4px !important; }
  .kf-formrow{ flex-direction:column !important; gap:6px !important; }
  .kf-formrow > label{ width:auto !important; padding-top:0 !important; }
  .kf-flow{ flex-wrap:wrap !important; }
  .kf-flow > div{ flex:1 1 calc(50% - 4px) !important; }
  [style*="padding: 0px 40px"]{ padding-left:16px !important; padding-right:16px !important; }
  [style*="padding: 70px 36px 40px 56px"]{ padding:34px 18px !important; }
  [style*="padding: 64px 0px 110px 54px"]{ padding:30px 18px 20px !important; }
  .kf-hero-photo{ min-height:200px !important; }
}
/* ファーストビュー（SP）：縦書きを横組みに整え、中央寄せでバランス最適化 */
@media (max-width:980px){
  .kf-hero-copy{ width:100% !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; padding:40px 22px 24px !important; text-align:center; }
  .kf-hero-titlewrap{ order:1; flex-direction:column !important; align-items:center !important; margin:0 !important; padding:0 !important; }
  .kf-hero-title{ writing-mode:horizontal-tb !important; height:auto !important; font-size:28px !important; line-height:1.85 !important; letter-spacing:0.12em !important; text-align:center; }
  .kf-hero-lead{ order:2; writing-mode:horizontal-tb !important; height:auto !important; margin:18px 0 0 !important; font-size:12.5px !important; line-height:2 !important; letter-spacing:0.06em !important; text-align:center; max-width:23em; }
  .kf-hero-divider{ display:none !important; }
  .kf-hero-cta{ gap:12px !important; }
  .kf-hero-cta > a{ flex:1 1 100% !important; justify-content:center !important; }
}
@media (max-width:560px){
  .kf-hero-title{ font-size:23px !important; line-height:1.8 !important; letter-spacing:0.1em !important; }
  .kf-hero-copy{ padding:30px 18px 20px !important; }
}

/* ==================================================================
 * 狭い画面での調整（2026-08-23 追加）
 *  768px・430px での見え方を点検して直した分
 * ================================================================== */

/* --- 語の途中で切れてほしくない見出し ---
 * kf_soft_lines() が1行ずつをこの塊にする。
 * 横幅に余裕があれば1行に並び、狭くなると塊の切れ目で改行される。 */
.kf-softbreak{ display: inline-block; }

/* --- 見出しの折り返し ---------------------------------------------
 * 最後の行に1〜2文字だけ残る折り返しを防ぐ。
 * text-wrap:balance は各行の長さをそろえてくれる。
 * line-break:strict で「、」「。」が行頭に来ないようにする。 */
#dc-root h1,
#dc-root h2,
#dc-root h3{
  text-wrap: balance;
  line-break: strict;
}

/* --- パンくず ------------------------------------------------------
 * 980px以下では「横並びを縦積みにする」共通ルールが当たってしまい、
 * 「トップ / > / ページ名」が3行に割れていた。ここだけ1行に戻す。
 * 共通ルールより強く当てるため #dc-root を付けている。 */
@media (max-width:980px){
  #dc-root .kf-crumb{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    font-size: 11.5px;
  }
  #dc-root .kf-crumb > *{ width: auto !important; max-width: none !important; flex: 0 0 auto; }
  /* ページ名が長いときは…で省略して、折り返さない */
  #dc-root .kf-crumb > span:last-child{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto;
  }
}

/* --- フッター上部 ---
 * 共通の「980px以下は縦積み」ルールは [style*="max-width: 1340px"]（コロンの後に空白）で
 * 書かれているが、フッターの style は空白なしの max-width:1340px なので当たっていなかった。
 * その結果、430px幅で電話番号が「0584- / 89- / 3358」と3行、住所が4行に割れていた。 */
@media (max-width:980px){
  .kf-foot-top{ flex-wrap: wrap !important; gap: 28px !important; }
  .kf-foot-top > *{ width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
}

/* --- iPhone幅（393px前後）での積み残し（2026-08-24）--- */
@media (max-width:560px){
  /* トップ「季節の献立」の名前と価格。
     名前の枠が147pxしかなく「初夏の／頃 献立」と割れていた。
     価格も枠90pxに対して大きすぎ、「4,000／円(税別)」と割れていた。 */
  #dc-root h3[style*="font-size: 23px"]{ font-size: 18px !important; letter-spacing: 0.04em !important; }
  /* 価格の枠は折り返さず、必要な幅を先に取る。
     残りを名前の枠に回すことで、名前も価格も1行に収まる。
     ※金額の指定は必ずこの枠の中だけに効かせる。
       枠を外して [style*="font-size: 26px"] だけで書くと、
       同じ26pxで書かれた各ページの見出しまで巻き込んで縮んでしまう。 */
  #dc-root [style*="margin-left: auto"][style*="text-align: right"][style*="line-height: 1.2"]{
    white-space: nowrap; flex: 0 0 auto;
  }
  #dc-root [style*="margin-left: auto"][style*="text-align: right"][style*="line-height: 1.2"] [style*="font-size: 26px"]{
    font-size: 21px !important;
  }
  #dc-root [style*="letter-spacing: 0.28em"]{ letter-spacing: 0.16em !important; font-size: 10px !important; }

  /* プライバシーポリシーの「お問い合わせページへ」。
     文字とアイコンの間が40px、左右の余白が54pxもあり「へ」だけ次の行へ落ちていた */
  #dc-root .kf-btn[style*="gap: 40px"]{
    gap: 14px !important;
    padding: 14px 26px !important;
    white-space: nowrap;
  }

  /* トップ「お品書き一覧を見る」。文字の間隔と余白が広く、3行に割れていた */
  #dc-root .kf-btn[style*="gap: 24px"]{
    gap: 10px !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* トップ「仕出しのご案内」の文章。左右の余白が100pxもあり、
     1行に5px足りずに「た」だけが次の行へ落ちていた */
  #dc-root [style*="padding: 56px 40px 56px 60px"]{ padding: 40px 20px !important; }

  /* お知らせ詳細の記事タイトル。「ホームページ開／設しました。」と割れていた */
  #dc-root h1[style*="font-size: 29px"]{ font-size: 22px !important; }

  /* 下層ページの見出し帯の文字側。左右の余白が56px/36pxもあり、
     リード文の最後の1〜2文字（「〜しま／す。」）が次の行に落ちていた。
     page-hero.php は空白なし、page-hero-block.php は空白ありの書き方なので両方書く */
  #dc-root [style*="padding:70px 36px 40px 56px"],
  #dc-root [style*="padding: 70px 36px 40px 56px"]{ padding: 44px 20px 30px !important; }
  /* リード文は家紋の分（52px）だけ右へずらしてあるが、狭い画面ではその余裕がない。
     ずらしをやめ、文字も2px小さくして、仕出し・こだわりの長い一文を1行に収める */
  #dc-root [style*="padding-left:52px"][style*="font-size:16px"],
  #dc-root [style*="padding-left: 52px"][style*="font-size: 16px"]{
    padding-left: 0 !important;
    font-size: 14px !important;
  }
}


/* --- 大きい見出しの文字サイズ ---
 * 430px幅では1行に11文字ほどしか入らず、
 * 「〜します。」の最後の2文字だけが次の行に落ちていた。
 * 大きい見出しだけ縮める（小さい見出しは元のまま）。 */
@media (max-width:560px){
  #dc-root h2[style*="font-size: 23px"],
  #dc-root h2[style*="font-size: 24px"],
  #dc-root h2[style*="font-size: 25px"],
  #dc-root h2[style*="font-size: 26px"],
  #dc-root h2[style*="font-size: 27px"],
  #dc-root h2[style*="font-size: 28px"],
  #dc-root h2[style*="font-size: 29px"],
  #dc-root h2[style*="font-size: 32px"],
  #dc-root h2[style*="font-size: 33px"],
  /* 会社概要のあいさつ見出し（h3・27px）。h2と同じ大きさなので同じ扱いにする */
  #dc-root h3[style*="font-size: 27px"]{ font-size: 22px !important; }
  #dc-root h1[style*="font-size: 40px"],
  #dc-root h1[style*="font-size: 52px"]{ font-size: 30px !important; }
}
@media (max-width:430px){
  #dc-root h2[style*="font-size: 23px"],
  #dc-root h2[style*="font-size: 24px"],
  #dc-root h2[style*="font-size: 25px"],
  #dc-root h2[style*="font-size: 26px"],
  #dc-root h2[style*="font-size: 27px"],
  #dc-root h2[style*="font-size: 28px"],
  #dc-root h2[style*="font-size: 29px"],
  #dc-root h2[style*="font-size: 32px"],
  #dc-root h2[style*="font-size: 33px"],
  /* 19px … 仕出しの見出し「お弁当を、心を込めてお届けします。」が20pxだと
     「心を込め／て」、会社概要の「季節の味わいとおもてなし。」が
     「おもてな／し。」と割れるため（2026-08-24） */
  #dc-root h3[style*="font-size: 27px"]{ font-size: 19px !important; }
  #dc-root h1[style*="font-size: 40px"],
  #dc-root h1[style*="font-size: 52px"]{ font-size: 27px !important; }
}

/* --- 左右を逆にしているセクション（こだわり「大切なひとときを、割烹富士で。」）---
 * パソコン表示は「写真（左）／テキスト（右）」。
 * 980px以下は縦積みになるため、そのままだと写真が先に来て、
 * 上の「これからも、変わらぬ心で。」と順番が食い違う。
 * column-reverse でテキストを先に出し、2つの節の並びをそろえる。 */
@media (max-width:980px){
  #dc-root .kf-mirror-row{ flex-direction: column-reverse !important; }
}

/* --- 下層ページ上部のリード文 ---
 * 430px幅では「割烹富士が大切にしているこだわりをご紹介します。」の1行に
 * 399px必要なのに段落が394pxしかなく、5px足りずに折り返していた。
 * 字を1px小さくして収める。 */
@media (max-width:560px){
  #dc-root p[style*="padding-left: 52px"]{ font-size: 14px !important; padding-left: 34px !important; }
}

/* --- 店舗概要の表 ---
 * 430px幅では見出し列130pxのせいで値側が260pxしかなく、
 * 所在地（1行に273px必要）が2行に折り返していた。見出し列を詰める。 */
@media (max-width:560px){
  #dc-root table td[style*="width: 130px"]{ width: 100px !important; padding-right: 8px !important; }
}

/* --- トップ「季節の献立」---
 * 768px幅では、340px固定の写真の横で文章側が331pxしか残らず、
 * 品書きの2列が99pxまで潰れて「鰻蒲焼」が縦書きのように割れていた。
 * 430pxと同じ縦積みを980px以下から効かせる。 */
@media (max-width:980px){
  #dc-root div[style*="box-shadow: rgba(120, 100, 60, 0.08)"][style*="display: flex"]{ flex-direction: column !important; }
  #dc-root div[style*="box-shadow: rgba(120, 100, 60, 0.08)"] > div[style*="width: 340px"]{ width: 100% !important; height: 260px !important; }
  #dc-root div[style*="box-shadow: rgba(120, 100, 60, 0.08)"] [style*="padding: 40px 46px"]{ padding: 30px 26px !important; }
  #dc-root div[style*="box-shadow: rgba(120, 100, 60, 0.08)"] [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important; }

  /* --- トップ「お料理のご案内」---
   * 見出しと「お品書き一覧を見る」ボタンの高さを上下中央でそろえる */
  #dc-root div[style*="align-items: flex-end"][style*="justify-content: space-between"]{ align-items: center !important; }

  /* --- 店舗情報「ご予約・お問い合わせ」---
   * 電話とフォームのボタンを上下に並べる（横並びだと文字が折り返していた） */
  .kf-ctarow{ flex-direction: column !important; align-items: stretch !important; }
  .kf-ctarow > a{ justify-content: center !important; }
}

/* --- こだわり「3つのカード」---
 * 2列になると、110pxの写真の横で文字の列が70〜110pxまで潰れ、
 * 見出しが「和のおも／てなし」のように語の途中で割れていた。縦に積む。 */
@media (max-width:980px){
  .kf-kcard{ flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .kf-kcard > div[style*="width: 110px"]{ width: 100% !important; height: 150px !important; }
}

/* --- こだわり「6つのカード」---
 * 2列のまま横並び（文字＋190pxの写真）だと、文字の列が70px程度まで
 * 潰れて見出しが3〜6行に割れていた。写真を上に回して縦に積む。 */
@media (max-width:980px){
  .kf-stackcard{
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .kf-stackcard > div[style*="width: 190px"]{ width: 100% !important; height: 160px !important; }
}
@media (max-width:560px){
  /* 1列にする指定は上のまとまり（560px）に既にあるので、写真の高さだけ調整 */
  .kf-stackcard > div[style*="width: 190px"]{ height: 180px !important; }
}

@media (max-width:560px){
  /* --- 左右の余白 ---
   * 40pxは狭い画面では取りすぎ（430pxのうち19%）。20pxに詰める。 */
  #dc-root [style*="padding: 0px 40px"],
  #dc-root [style*="padding:0 40px"]{ padding-left: 20px !important; padding-right: 20px !important; }
  #dc-root .kf-crumb{ padding-left: 20px !important; padding-right: 20px !important; }

  /* --- お品書きの切り替えタブ ---
   * 「仕出し弁当」が2行に折り返していた。文字を小さくして1行に収める。 */
  .kf-menutabs > a{
    font-size: 14.5px !important;
    padding: 15px 2px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap;
  }

  /* --- 料理カード ---
   * 縦積みになったとき写真だけ200px幅で左に寄っていた。全幅にする。 */
  .kf-menucard{ padding: 20px 18px !important; }
  .kf-menucard > div:first-child{ width: 100% !important; height: 190px !important; }

  /* --- フッター --- */
  .kf-foot-top{ padding: 32px 20px 26px !important; gap: 24px !important; }
  .kf-foot-bottom{ padding: 14px 20px !important; }
  footer nav a{ padding: 4px 10px !important; }
}

@media (max-width:430px){
  .kf-menutabs > a{ font-size: 13px !important; letter-spacing: 0 !important; }
}

/* ==================================================================
 * スクロールで下からふわっと出す（2026-08-23 追加）
 *
 *   .kf-inview        … その要素じたいが出る
 *   .kf-inview-group  … 中身を順番に出す入れ物（自分は動かない）
 *   .kf-inview__item  … 入れ物の中で順番に出るもの
 *
 * すべて html.kf-inview-on の中でだけ効く。この目印を付けるのは
 * assets/js/kf-inview.js なので、JavaScriptが動かない環境では
 * 何も隠れず、そのまま読める状態になる。
 * ================================================================== */
/* ボタン（.kf-btn）は :not() で除外している。
   ボタンに入場の指定を当てると、ボタン自身が持つホバーの指定
   （背景色・文字色・枠線・影を0.38秒で変える）が丸ごと打ち消され、
   色が一瞬で切り替わってしまうため。
   ボタンを順番に出したいときは、ボタンではなく囲みの箱に目印を付ける。 */
html.kf-inview-on .kf-inview,
html.kf-inview-on .kf-inview-group .kf-inview__item:not(.kf-btn){
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
  /* 姿が先に現れ、少し遅れて定位置に収まるので「ふわっ」と感じる
     （2026-08-23：1.5倍ゆっくりに変更。透明度0.5→0.75秒、位置1.0→1.5秒） */
  transition-duration: .75s, 1.5s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.kf-inview-on .kf-inview.is-shown,
html.kf-inview-on .kf-inview-group.is-shown .kf-inview__item:not(.kf-btn){
  opacity: 1;
  transform: translateY(0);
}

/* 写真は本体より少し遅れて濃くなる（重なりが出て上品に見える） */
html.kf-inview-on .kf-inview img,
html.kf-inview-on .kf-inview-group img{ opacity: 0; }
html.kf-inview-on .kf-inview.is-shown img,
html.kf-inview-on .kf-inview-group.is-shown img{
  opacity: 1;
  /* transform も必ず並べて書くこと。
     opacity だけ書くと、カード写真のゆっくり拡大（.kf-card-photo img）の
     指定がここで打ち消され、拡大が一瞬で終わってしまう。
     時間・曲線は .kf-card-photo img と同じ値にそろえる。 */
  transition:
    opacity   .6s  cubic-bezier(.55,.06,.46,1) .68s,
    transform 1.6s cubic-bezier(.25,.46,.45,.94);
}

/* 動きを減らす設定の端末では、そもそも隠さない（JS側で目印を付けない）。
   念のためCSS側でも打ち消しておく。 */
@media (prefers-reduced-motion: reduce){
  html.kf-inview-on .kf-inview,
  html.kf-inview-on .kf-inview-group .kf-inview__item:not(.kf-btn),
  html.kf-inview-on .kf-inview img,
  html.kf-inview-on .kf-inview-group img{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ==================================================================
 * ハンバーガーメニューの開け閉め（2026-08-23 追加）
 *
 * 表示を消す（display:none）のではなく、透明にして触れなくしておく。
 * こうすると開くときも閉じるときも、ふわっと変化させられる。
 *
 * visibility は 0.38秒 遅らせて切り替える。すぐ hidden にすると
 * 消えるところが見えないため。開くときは遅らせずすぐ表示する。
 * ================================================================== */
.kf-mobmenu{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity    .38s cubic-bezier(.22,.61,.36,1),
    transform  .38s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .38s;
}
.kf-mobmenu.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}

/* 動きを減らす設定の端末では、動かさずに切り替える */
@media (prefers-reduced-motion: reduce){
  .kf-mobmenu{ transform: none; transition: visibility 0s linear .01s; }
  .kf-mobmenu.is-open{ transition-delay: 0s; }
}

/* ==================================================================
 * モバイル固定バー
 * ================================================================== */
#kf-mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:none; align-items:stretch; font-family:'Noto Sans JP',sans-serif;
  box-shadow:0 -4px 16px rgba(0,0,0,0.16);
}
#kf-mobilebar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; padding:9px 4px; }
#kf-mobilebar .kf-mb-tel{ background:#2a2724; color:#f3ecdd; }
#kf-mobilebar .kf-mb-cta{ background:#b8923f; color:#fffdf8; }
#kf-mobilebar .kf-mb-num{ display:flex; align-items:center; gap:7px; font-family:'Noto Serif JP',serif; font-weight:600; font-size:17px; }
#kf-mobilebar .kf-mb-num i{ color:#c79a45; font-size:13px; }
#kf-mobilebar .kf-mb-num2{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; }
#kf-mobilebar .kf-mb-cap{ font-size:9px; letter-spacing:0.04em; opacity:0.85; }
@media (max-width:980px){
  #kf-mobilebar{ display:flex !important; }
  body{ padding-bottom:62px !important; }
}

/* ==================================================================
 * お知らせ一覧
 * ================================================================== */
.kf-newsrow{ display:flex; align-items:center; gap:24px; text-decoration:none; color:#33302b; padding:22px 8px; border-bottom:1px solid #ddcfb6; }
.kf-newsrow .kf-date{ font-family:'Noto Serif JP',serif; font-size:14px; color:#7c7363; letter-spacing:0.04em; white-space:nowrap; transition:color .35s cubic-bezier(.22,.61,.36,1); }
.kf-newsrow .kf-ttl{ flex:1; font-size:14.5px; color:#3d382f; transition:color .35s cubic-bezier(.22,.61,.36,1); }

/* 記事にカーソルを乗せたとき
 * 背景は変えず、タイトルの文字を金色にして、下線を左から右へ伸ばす */
.kf-newsrow .kf-ttl-in{
  display:inline;
  padding-bottom:3px;
  background-image:linear-gradient(#b8923f,#b8923f);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  transition:background-size .55s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .kf-newsrow:hover .kf-ttl{ color:#b8923f; }
  .kf-newsrow:hover .kf-ttl-in{ background-size:100% 1px; }
}
.kf-newsrow:focus-visible{ outline:2px solid #b8923f; outline-offset:2px; }
@media (max-width:560px){
  .kf-newsrow{ flex-wrap:wrap; gap:8px 12px; }
  .kf-newsrow .kf-ttl{ flex:1 1 100%; order:3; }
}

/* ==================================================================
 * Contact Form 7（元フォームの見た目に合わせる）
 * ================================================================== */
.kf-cf7 .wpcf7-form p{ margin:0; }
.kf-formrow{ display:flex; gap:18px; padding:16px 0; border-bottom:1px solid #eadfca; align-items:flex-start; }
.kf-formrow > .kf-label{ width:170px; flex:none; padding-top:10px; font-size:14px; color:#3d382f; font-weight:500; }
.kf-formrow .kf-req{ display:inline-block; margin-left:8px; font-size:10px; color:#fff; background:#c0563e; padding:2px 7px; border-radius:2px; letter-spacing:0.04em; vertical-align:middle; }
.kf-formrow .kf-opt{ display:inline-block; margin-left:8px; font-size:10px; color:#7c7263; background:#efe7d6; border:1px solid #e0d5bd; padding:2px 7px; border-radius:2px; vertical-align:middle; }
.kf-formrow .kf-input{ flex:1; }
.kf-cf7 input[type=text],
.kf-cf7 input[type=tel],
.kf-cf7 input[type=email],
.kf-cf7 input[type=date],
.kf-cf7 select,
.kf-cf7 textarea{
  width:100%; font-family:'Noto Sans JP',sans-serif; font-size:14px; color:#33302b;
  padding:11px 13px; border:1px solid #d9cdb2; background:#fbf8f1; border-radius:2px;
}
.kf-cf7 textarea{ min-height:150px; resize:vertical; }
.kf-cf7 .wpcf7-list-item{ margin:0; }
.kf-cf7 .kf-agree{ padding:18px 0; text-align:center; font-size:13px; color:#6b6356; }
.kf-cf7 .kf-agree a{ color:#b8923f; }
.kf-cf7 .kf-submit{ text-align:center; padding-top:8px; }
.kf-cf7 input[type=submit]{
  font-family:'Shippori Mincho B1',serif; font-size:16px; letter-spacing:0.1em; color:#fff;
  background:#b8923f; border:none; padding:15px 60px; cursor:pointer; border-radius:2px;
  transition:
    background-color .38s cubic-bezier(.22,.61,.36,1),
    color            .38s cubic-bezier(.22,.61,.36,1),
    box-shadow       .38s cubic-bezier(.22,.61,.36,1),
    transform        .38s cubic-bezier(.22,.61,.36,1);
}
/* 送信ボタンも他のボタンと同じ反転（金地・白文字 → 白地・金文字） */
@media (hover: hover) and (pointer: fine){
  .kf-cf7 input[type=submit]:hover{
    background:#fffdf8; color:#b8923f;
    box-shadow: inset 0 0 0 1px #b8923f, rgba(120,100,60,.22) 0 8px 22px;
    transform:translateY(-2px);
  }
}
.kf-cf7 input[type=submit]:active{ transform:translateY(0); transition-duration:.12s; }
.kf-cf7 input[type=submit]:focus-visible{ outline:2px solid #b8923f; outline-offset:3px; }
.wpcf7-not-valid-tip{ color:#c0563e; font-size:12px; }
@media (max-width:560px){
  .kf-formrow{ flex-direction:column; gap:6px; }
  .kf-formrow > .kf-label{ width:auto; padding-top:0; }
}

/* ==================================================================
 * ボタンのホバー（DESIGN-SYSTEM.md の配色に準拠）
 *
 * 考え方：ホバーで「地の色と文字の色が入れ替わる」。
 *   金のボタン → 白地に金文字   ／ 墨のボタン → 生成り地に墨文字
 *   白いボタン → 墨地に生成り文字 ／ 控えめボタン → 墨地に生成り文字
 *   暗い帯の中のボタンだけは反転させず、枠線と文字を金にする
 *
 * 枠線を持たないボタンは、反転時に内側の影（inset）で輪郭を描く。
 * border を足すと1px分ずれるため。
 *
 * 通常時の色は各テンプレートの style 属性で指定しているので、
 * ホバー側は !important で上書きする。
 * ================================================================== */
.kf-btn{
  transition:
    background-color .38s cubic-bezier(.22,.61,.36,1),
    color            .38s cubic-bezier(.22,.61,.36,1),
    border-color     .38s cubic-bezier(.22,.61,.36,1),
    box-shadow       .38s cubic-bezier(.22,.61,.36,1),
    transform        .38s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .kf-btn:hover{ transform: translateY(-2px); }
}

/* 指で操作する端末は、上のホバーが一切効かない。
 * 押しても何も変わらないと「効いていない」と感じるため、
 * 画面下の追従バーと同じく、押している間だけ少し薄くする。
 * （2026-08-24：実機で2回タップが必要だった件の対応とセット） */
@media (hover: none){
  .kf-btn:active,
  .kf-card-link:active,
  .kf-textlink:active,
  .kf-nav-link:active,
  .kf-newsrow:active,
  .kf-faq-q:active{ opacity: .68; }
}
.kf-btn:active{ transform: translateY(0); transition-duration: .12s; }
.kf-btn:focus-visible{ outline: 2px solid #b8923f; outline-offset: 3px; }

/* 主ボタン（金地・白文字）→ 白地・金文字 */
@media (hover: hover) and (pointer: fine){
  .kf-btn--primary:hover{
    background: #fffdf8 !important;
    color: #b8923f !important;
    box-shadow: inset 0 0 0 1px #b8923f, rgba(120,100,60,.22) 0 8px 22px !important;
  }

  /* 濃い墨色のボタン（墨地・生成り文字）→ 生成り地・墨文字 */
  .kf-btn--dark:hover{
    background: #f3ece0 !important;
    color: #2b2520 !important;
    box-shadow: inset 0 0 0 1px #2b2520, rgba(0,0,0,.16) 0 8px 22px !important;
  }

  /* 白＋枠線のボタン（白地・墨文字）→ 墨地・生成り文字 */
  .kf-btn--outline:hover{
    background: #2b2520 !important;
    color: #f4eddd !important;
    border-color: #2b2520 !important;
    box-shadow: rgba(0,0,0,.18) 0 8px 22px !important;
  }

  /* 控えめボタン（生成り地・墨文字）→ 墨地・生成り文字 */
  .kf-btn--quiet:hover{
    background: #2b2520 !important;
    color: #f4eddd !important;
    border-color: #2b2520 !important;
    box-shadow: rgba(0,0,0,.16) 0 6px 18px !important;
  }

  /* 暗い帯の中の枠線ボタンは反転させず、枠線と文字を金にする */
  .kf-btn--ghost:hover{
    border-color: #b8923f !important;
    color: #f4eddd !important;
  }

  /* 反転したときにアイコンも文字色に合わせる（色を直接指定しているものを上書き） */
  .kf-btn--primary:hover i{ color: #b8923f !important; }
  .kf-btn--dark:hover i{ color: #b8923f !important; }
  .kf-btn--outline:hover i,
  .kf-btn--quiet:hover i{ color: #c79a45 !important; }
  .kf-btn--ghost:hover i{ color: #b8923f !important; }

  /* 浮き上がらせないボタン
   * ヘッダー右上の「ご予約」… ヘッダーにぴったり付いているため
   * お知らせの絞り込みボタン … 行に並ぶ小さなボタンで、浮くとちらついて見えるため */
  .kf-nolift:hover{ transform:none !important; }
  .kf-cta.kf-btn--primary:hover{ box-shadow: inset 0 0 0 1px #b8923f !important; }
  .kf-chip:hover{ transform:none !important; box-shadow:none !important; }

  /* 暗いフッターの中の金ボタンは、真っ白まで振ると浮きすぎるので生成りで止める */
  footer .kf-btn--primary:hover{
    background:#f3ecdd !important;
    box-shadow: inset 0 0 0 1px #b8923f, rgba(0,0,0,.30) 0 8px 22px !important;
  }
}

/* お品書きの切り替えタブ（ランチ／夜／仕出し弁当／おせち）
 * 表示中のタブ（.kf-tab-on）は、すでにそのページにいるので何も変化させない。
 * そのため .kf-btn / .kf-chip も付けていない（template-parts/menu-tabs.php） */

/* タブレット幅以下で出るボタン
 * ・画面下に貼り付く電話／ご予約のバー
 * ・ヘッダーの電話／ご予約／メニュー
 * 指で触る端末では、指を離したあとも色が残るのを避けるため
 * 「本物のカーソルがある端末」に限ってホバーを効かせる */
#kf-mobilebar a{
  transition:
    background-color .38s cubic-bezier(.22,.61,.36,1),
    color            .38s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  #kf-mobilebar .kf-mb-tel:hover{ background:#f3ecdd; color:#2a2724; }
  #kf-mobilebar .kf-mb-cta:hover{ background:#fffdf8; color:#b8923f; }
}
/* 指で押したときの手ごたえ（触る端末はこちらが働く） */
#kf-mobilebar .kf-mb-tel:active{ background:#f3ecdd; color:#2a2724; }
#kf-mobilebar .kf-mb-cta:active{ background:#fffdf8; color:#b8923f; }

/* ヘッダーの電話・ご予約・メニュー（タブレット幅以下）は
 * .kf-btn の反転をそのまま使う。ヘッダーにぴったり付いているので
 * 浮き上がりと影は .kf-chip で止めている */

/* ==================================================================
 * 文字だけのリンク
 *  ・パンくずの「トップ」
 *  ・フッターのナビ／プライバシーポリシー／サイトマップ
 * 文字の幅ぴったりに下線が左から右へ伸び、文字が金色になる
 * ================================================================== */
.kf-textlink{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
/* 下線は内側のspanに引く。
   リンクそのものは横並びの部品（flexの子）になることがあり、
   そのときは幅いっぱいに広がってしまうため */
.kf-textlink-in{
  display:inline;
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  transition: background-size .5s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .kf-textlink:hover{ color:#b8923f !important; }
  .kf-textlink:hover .kf-textlink-in{ background-size:100% 1px; }
}
.kf-textlink:focus-visible{ outline:2px solid #b8923f; outline-offset:3px; }
/* 暗いフッターの中は、もう少し明るい金にする */
@media (hover: hover) and (pointer: fine){
  footer .kf-textlink:hover{ color:#c79a45 !important; }
}

/* フッターの「大きな地図で見る」は横並びなので、色だけ変える */
.kf-maplink,
.kf-maplink i{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-maplink:hover{ color:#c79a45 !important; }
}

/* ==================================================================
 * グローバルナビ（パソコン表示）
 * 表示中のページに出ている金の下線が、そのまま左から右へ伸びる
 * ================================================================== */
.kf-nav-link{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-nav-link:hover{ color:#b8923f !important; }
}
.kf-nav-line{
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity   .25s cubic-bezier(.22,.61,.36,1);
}
.kf-nav-line.is-on{ transform: scaleX(1); }
@media (hover: hover) and (pointer: fine){
  .kf-nav-link:hover .kf-nav-line{ opacity:1 !important; transform: scaleX(1); }
}

/* ==================================================================
 * プライバシーポリシーの目次／お知らせ詳細の前後リンク
 * 横に並ぶ行なので下線は引かず、文字を金色にして矢印を動かす
 * ================================================================== */
.kf-toclink,
.kf-toclink i{ transition: color .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-toclink:hover{ color:#b8923f !important; }
  .kf-toclink:hover i{ transform: translateX(4px); }
}

/* 前後リンクはWordPressが組み立てるので、下線を消すのもここで行う */
.kf-postnav a{ text-decoration: none; }
.kf-postnav a span,
.kf-postnav a i{ transition: color .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-postnav a:hover span{ color:#b8923f !important; }
  .kf-postnav a:hover i{ transform: translateX(-4px); }
  .kf-postnav--next a:hover i{ transform: translateX(4px); }
}

/* 一覧に戻る升目のアイコン。他のボタンと同じく色を入れ替える */
.kf-postnav-all{ transition: background-color .38s cubic-bezier(.22,.61,.36,1), color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-postnav-all:hover{ background:#2b2520; color:#c79a45 !important; }
}

/* 文字だけで置かれている電話番号（押すと電話がかかる）
 * ヘッダー（パソコン表示）／お問い合わせページ／店舗情報ページ
 * 枠のないただの文字なので、色だけ金色に変える */
.kf-tel-text,
.kf-tel-text i{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-tel-text:hover{ color:#b8923f !important; }
  .kf-tel-text:hover i{ color:#a8842f !important; }
}
.kf-tel-text:focus-visible{ outline:2px solid #b8923f; outline-offset:3px; }

/* おせちページ「ご予約方法」の電話番号。タップで電話がかかる
 * 番号の文字色が直接指定されているので、反転時は上書きが必要 */
.kf-tel-plate span{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-tel-plate:hover span{ color:#f4eddd !important; }
}

/* おせちページ「よくあるご質問」の質問行
 * 開け閉めの見出しなので、色は反転させず、
 * うっすら色が付いて質問文と＋印が金色になる形にする */
.kf-faq-q{
  transition: background-color .38s cubic-bezier(.22,.61,.36,1);
}
.kf-faq-q span,
.kf-faq-q i{
  transition: color .38s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .kf-faq-q:hover{ background:#f5edde !important; }
  .kf-faq-q:hover span{ color:#b8923f !important; }
  .kf-faq-q:hover i{ color:#a8842f !important; }
}
.kf-faq-q:focus-visible{ outline:2px solid #b8923f; outline-offset:-2px; }

/* ==================================================================
 * カード全体がリンクになっているもの
 *  ・トップページ「お料理のご案内」の5枚（.kf-card-link）
 *  ・お品書き／会席料理の案内カード4枚（.kf-card-link--raised）
 * ボタンのように色を反転させると重いので、
 *  写真がゆっくり寄る ＋ 見出しが金色になる ＋ 矢印が右へ動く
 * の3つで表現する。
 * ================================================================== */
.kf-card-link{ display:block; }
.kf-card-photo{ overflow:hidden; }
.kf-card-photo img{
  /* 写真の拡大はゆっくり見せる（2026-08-23：0.8秒 → 1.6秒）。
     曲線は「出だしが穏やかで、終わりに向けて静かに止まる」ものを使う。
     動き出しが速い曲線だと、時間を伸ばしても速く感じてしまうため。 */
  transition: transform 1.6s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine){
  .kf-card-link:hover .kf-card-photo img{ transform: scale(1.07); }
}

.kf-card-link h3{ transition: color .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-card-link:hover h3{ color:#a8842f !important; }
}

.kf-card-link i{ transition: transform .38s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine){
  .kf-card-link:hover i{ transform: translateX(6px); }
}

.kf-card-link:focus-visible{ outline:2px solid #b8923f; outline-offset:4px; }

/* 背景と影を持つカードだけ、少し浮かせて影を濃くする */
.kf-card-link--raised{
  transition:
    transform  .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine){
  .kf-card-link--raised:hover{
    transform: translateY(-4px);
    box-shadow: rgba(120,100,60,0.20) 0px 14px 30px !important;
  }
}

/* 動きを減らす設定の端末では浮き上がりを止める */
@media (prefers-reduced-motion: reduce){
  .kf-btn{ transition: background-color .38s ease, color .38s ease, border-color .38s ease; }
  @media (hover: hover) and (pointer: fine){
    .kf-btn:hover{ transform: none; }
    .kf-card-link:hover .kf-card-photo img{ transform: none; }
    .kf-card-link:hover i{ transform: none; }
    .kf-card-link--raised:hover{ transform: none; }
    .kf-toclink:hover i,
    .kf-postnav a:hover i,
    .kf-postnav--next a:hover i{ transform: none; }
  }
}