/* =================================================
   Kinmata Mobile Top (TEST only)
   ================================================= */

/* page wrapper */
.km-mtop{
  padding: 0 0 120px;
  position: relative;
}
.km-mtop::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.90);
  pointer-events:none;
  z-index:0;
}
.km-mtop > *{ position: relative; z-index: 1; }

/* HERO VIDEO */
.km-hero{ position: relative; width: 100%; overflow: hidden; }
/* HERO VIDEO: full screen height */
.km-hero{
  height: 100svh;          /* iOS安定: small viewport */
  height: 100dvh;          /* 対応ブラウザでは動的に追従 */
  height: 100vh;           /* fallback */
}

.km-hero video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.km-hero__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.60) 35%, rgba(0,0,0,.82) 100%);
  color:#fff;
}
.km-hero__ttl{ margin:0; font-size:18px; letter-spacing:.18em; }
.km-hero__sub{ margin-top:8px; font-size:13px; line-height:1.55; letter-spacing:.06em; color:rgba(255,255,255,.92); }

/* Actions */
.km-actions{ display:flex; gap:10px; padding:12px 14px 0; }
.km-btn{
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:14px 12px; border-radius:14px; text-decoration:none;
  font-size:15px; letter-spacing:.08em; line-height:1.1;
}
.km-btn--primary{
  background: rgba(153, 51, 0, 0.92);
  color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 26px rgba(0,0,0,.16);
}
.km-btn--secondary{
  background: rgba(248,244,235,0.98);
  color:#3b2a1a; border:1px solid rgba(0,0,0,.08);
}

/* Story wrapper */
.km-story{ padding:14px; max-width:760px; margin:0 auto; }
.km-block{ margin-top:22px; }

/* Full-bleed photos (NO 100vw -> avoids iOS horizontal scroll) */
.km-photo{
  width: auto;
  margin-left: -14px;   /* .km-story の padding と同じ値 */
  margin-right: -14px;
  overflow: hidden;
}
.km-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.km-photo img{ width:100%; height:auto; display:block; }

/* Text */
.km-text{ margin-top:12px; padding:0 2px; }
.km-text h2{ margin:0 0 10px; font-size:16px; letter-spacing:.10em; line-height:1.35; color:#1f1a14; }
.km-text p{ margin:0; font-size:13px; line-height:1.85; letter-spacing:.03em; color:rgba(0,0,0,.78); }

/* Scroll reveal initial */
.km-reveal .km-photo,
.km-reveal .km-text{
  opacity:0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
.km-reveal .km-text{ transform: translate3d(0, 22px, 0); }

/* Anchor */
#business-calendar{ scroll-margin-top: 12px; }

/* =================================================
   Calendar: disable full-bleed + typography (WIN)
   ================================================= */

/* 横スクロールは必要な時だけ：小さい端末のみ */
.km-calendar-wrap{
  overflow-x: visible;
}


/* ここから文字サイズ：ショートコードCSSに勝つため !important */
.km-calendar-wrap .kinmata-bc__title{
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 12px auto 14px !important;
  letter-spacing: .06em !important;
}
.km-calendar-wrap .kinmata-bc__month{
  display:block !important;
  text-align:center !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  margin: 8px auto 14px !important;
}
.km-calendar-wrap .kinmata-bc__range{
  display:block !important;
  text-align:center !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: .06em !important;
  margin: 6px auto 12px !important;
}
.km-calendar-wrap th{
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 10px 4px !important;
}
.km-calendar-wrap .kinmata-bc__day{
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.km-calendar-wrap .kinmata-bc__status{
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
  white-space: nowrap;
}
.km-calendar-wrap td{
  padding: 10px 6px !important;
}
/* Calendar block should NOT bleed */
.km-photo.km-photo--calendar{
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

/* =========================================
   Calendar: FORCE fit to viewport (no scroll)
   ========================================= */

/* まず横スクロールを許可しない */
.km-calendar-wrap{
  overflow-x: hidden !important;
}

/* テーブル／ラッパーの固定幅・最小幅を殺して100%に固定 */
.km-calendar-wrap table,
.km-calendar-wrap .kinmata-bc__table,
.km-calendar-wrap .kinmata-bc,
.km-calendar-wrap .business-calendar{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

/* セルを詰めて7列を必ず入れる */
.km-calendar-wrap th,
.km-calendar-wrap td{
  padding: 4px 2px !important;
  vertical-align: top !important;
}

/* 曜日 */
.km-calendar-wrap th{
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* 日付 */
.km-calendar-wrap .kinmata-bc__day{
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

/* 営業/休業：折り返し許可（横幅を食わない） */
.km-calendar-wrap .kinmata-bc__status{
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
  white-space: normal !important;   /* ←重要：nowrap を殺す */
  word-break: keep-all !important;
}

/* “翌月/前月” ボタンが幅を食ってはみ出す場合の保険 */
.km-calendar-wrap .kinmata-bc__nav,
.km-calendar-wrap .business-calendar__nav{
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.km-calendar-wrap button,
.km-calendar-wrap .kinmata-bc__btn,
.km-calendar-wrap .business-calendar__btn{
  padding: 6px 8px !important;
  font-size: 12px !important;
}
/* 
 * NOTE:
 * カレンダーは横スクロールさせない設計。
 * 100vw / min-width を使うと iOS Safari で横ズレするため禁止。
 */


/* =================================================
   Calendar: add side gutter (take margin on both sides)
   ================================================= */

/* 760px枠は維持したまま、内側に余白を作る */
.km-photo.km-photo--calendar{
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* =================================================
   Business Calendar: center on PC + side gutter everywhere
   (works even if parent layout is flex/grid)
   ================================================= */

#business-calendar .km-photo{
  width: 100% !important;
}

/* 「中央寄せ」と「最大幅」を “内側” に持たせる */
#business-calendar .km-photo > .km-calendar-wrap{
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* もし km-calendar-wrap が無い/違う場合に備えて本体にもガターを当てる */
#business-calendar .km-photo .kinmata-bc,
#business-calendar .km-photo table{
  max-width: 100% !important;
}

/* PCで少し広めの余白 */
@media (min-width: 768px){
  #business-calendar .km-photo > .km-calendar-wrap{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =================================================
   Business Calendar: align title start with calendar
   ================================================= */

/* 見出しブロックをカレンダー幅に合わせる */
#business-calendar .km-text{
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

/* PCでは少し余白を広げる */
@media (min-width: 768px){
  #business-calendar .km-text{
    padding-left: 20px;
    padding-right: 20px;
  }
}




/* Calendar top heading: keep in one line and scale down */
.km-calendar-wrap .kinmata-bc__title{
  white-space: nowrap !important;
  font-size: 16px !important;  /* 18→16 */
  letter-spacing: .04em !important;
}
@media (max-width: 390px){
  .km-calendar-wrap .kinmata-bc__title{
    font-size: 14px !important;
  }
}
/* Force mobile header visible */
.km-mhdr{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  height: 60px;                 /* ★高さを固定 */
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.km-mhdr__inner{
  height: 60px;                 /* ★中も揃える */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.km-mhdr__spacer{ height: 60px; } /* ★この白帯はこれ。高さはヘッダーと同じに */

/* Logo: ensure it actually shows */
.km-mhdr__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 1px;
}
.km-mhdr__logo img{
  display: block;
  height: 26px;
  width: auto;
}
.km-mhdr__logo img{ height:26px; width:auto; }

/* ================================
   FIX: header becomes huge white space
   (override theme's generic header styles)
   ================================ */
header.km-mhdr{
  box-sizing: border-box !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999 !important;
}

.km-mhdr__inner{
  box-sizing: border-box !important;
  height: 60px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* spacer: always exactly same as header */
.km-mhdr__spacer{
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ensure right block doesn't wrap/drop */
.km-mhdr__right{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}


/* ================================
   Mobile Header – FINAL override
   ================================ */
header.km-mhdr{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999 !important;
  height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.km-mhdr__spacer{ height: 60px !important; margin:0 !important; padding:0 !important; }

.km-mhdr__inner{
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  gap: 10px !important;
}

/* left: logo (never collapse) */
.km-mhdr__logo{
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: 55vw !important;
  overflow: visible !important;
}
.km-mhdr__logo img{
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* right cluster */
.km-mhdr__right{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

/* language select */
.km-lang__select{
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  font-size: 13px !important;
}

/* hamburger (force visible) */
.km-burger{
  width: 42px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 10px !important;
}
.km-burger span{
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #222 !important;
  border-radius: 2px !important;
}
/* =========================================
   Drawer (mobile header) – SAFE
   ========================================= */

/* ドロワーは閉じてる時は完全に存在しない */
#km-drawer[hidden]{
  display: none !important;
}

/* ドロワーコンテナ（開いてる時だけ表示される想定） */
#km-drawer{
  position: fixed;
  inset: 0;
  z-index: 100000; /* headerより上 */
}

/* backdrop：クリックはここが受ける（閉じてる時はhiddenなので存在しない） */
#km-drawer .km-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* パネル */
#km-drawer .km-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: -18px 0 40px rgba(0,0,0,.20);
  transform: translateX(100%);
  transition: transform .22s ease;
  padding: 16px 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 開いた時だけスライドイン */
#km-drawer.is-open .km-drawer__panel{
  transform: translateX(0);
}

/* 文字やボタン（現状踏襲） */
#km-drawer .km-drawer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
#km-drawer .km-drawer__ttl{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0;
}
#km-drawer .km-drawer__close{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  width: 42px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#km-drawer .km-drawer__nav{
  display: grid;
  gap: 10px;
}
#km-drawer .km-drawer__link{
  display: block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
  color: #222;
  font-size: 14px;
  line-height: 1.2;
  background: #fff;
}
#km-drawer .km-drawer__link--primary{
  background: rgba(153, 51, 0, 0.92);
  color: #fff;
  border-color: rgba(153, 51, 0, 0.92);
}
.km-mhdr__logo{ display:inline-flex !important; align-items:center !important; }
.km-mhdr__logo img{
  display:block !important;
  height: 26px !important;
  width: auto !important;
  max-width: 55vw !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* TEMP: make white svg visible on white header */
.km-mhdr__logo img{ filter: invert(1) grayscale(1) contrast(2); }

/* =================================================
   Kinmata Mobile Top (TEST only)
   ================================================= */

/* page wrapper */
.km-mtop::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.90);
  pointer-events:none;
  z-index:0;
}
.km-mtop > *{ position: relative; z-index: 1; }

/* HERO VIDEO */
.km-hero{ position: relative; width: 100%; overflow: hidden; }
/* HERO VIDEO: full screen height */
.km-hero{
  height: 100svh;          /* iOS安定: small viewport */
  height: 100dvh;          /* 対応ブラウザでは動的に追従 */
  height: 100vh;           /* fallback */
}

.km-hero video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.km-hero__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.60) 35%, rgba(0,0,0,.82) 100%);
  color:#fff;
}
.km-hero__ttl{ margin:0; font-size:18px; letter-spacing:.18em; }
.km-hero__sub{ margin-top:8px; font-size:13px; line-height:1.55; letter-spacing:.06em; color:rgba(255,255,255,.92); }

/* Actions */
.km-actions{ display:flex; gap:10px; padding:12px 14px 0; }
.km-btn{
  flex:1; display:flex; justify-content:center; align-items:center;
  padding:14px 12px; border-radius:14px; text-decoration:none;
  font-size:15px; letter-spacing:.08em; line-height:1.1;
}
.km-btn--primary{
  background: rgba(153, 51, 0, 0.92);
  color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 26px rgba(0,0,0,.16);
}
.km-btn--secondary{
  background: rgba(248,244,235,0.98);
  color:#3b2a1a; border:1px solid rgba(0,0,0,.08);
}

/* Story wrapper */
.km-story{ padding:14px; max-width:760px; margin:0 auto; }
.km-block{ margin-top:22px; }

/* Full-bleed photos (NO 100vw -> avoids iOS horizontal scroll) */
.km-photo{
  width: auto;
  margin-left: -14px;   /* .km-story の padding と同じ値 */
  margin-right: -14px;
  overflow: hidden;
}
.km-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.km-photo img{ width:100%; height:auto; display:block; }

/* Text */
.km-text{ margin-top:12px; padding:0 2px; }
.km-text h2{ margin:0 0 10px; font-size:16px; letter-spacing:.10em; line-height:1.35; color:#1f1a14; }
.km-text p{ margin:0; font-size:13px; line-height:1.85; letter-spacing:.03em; color:rgba(0,0,0,.78); }

/* Scroll reveal initial */
.km-reveal .km-photo,
.km-reveal .km-text{
  opacity:0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
.km-reveal .km-text{ transform: translate3d(0, 22px, 0); }

/* Anchor */
#business-calendar{ scroll-margin-top: 12px; }

/* =================================================
   Calendar: disable full-bleed + typography (WIN)
   ================================================= */

/* カレンダーは“全幅化しない”（はみ出し防止） */
.km-photo.km-photo--calendar{
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 760px;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* 横スクロールは必要な時だけ：小さい端末のみ */
.km-calendar-wrap{
  overflow-x: visible;
}


/* ここから文字サイズ：ショートコードCSSに勝つため !important */
.km-calendar-wrap .kinmata-bc__title{
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 12px auto 14px !important;
  letter-spacing: .06em !important;
}
.km-calendar-wrap .kinmata-bc__month{
  display:block !important;
  text-align:center !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  margin: 8px auto 14px !important;
}
.km-calendar-wrap .kinmata-bc__range{
  display:block !important;
  text-align:center !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: .06em !important;
  margin: 6px auto 12px !important;
}
.km-calendar-wrap th{
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 10px 4px !important;
}
.km-calendar-wrap .kinmata-bc__day{
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.km-calendar-wrap .kinmata-bc__status{
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
  white-space: nowrap;
}
.km-calendar-wrap td{
  padding: 10px 6px !important;
}


/* =========================================
   Calendar: FORCE fit to viewport (no scroll)
   ========================================= */

/* まず横スクロールを許可しない */
.km-calendar-wrap{
  overflow-x: hidden !important;
}

/* テーブル／ラッパーの固定幅・最小幅を殺して100%に固定 */
.km-calendar-wrap table,
.km-calendar-wrap .kinmata-bc__table,
.km-calendar-wrap .kinmata-bc,
.km-calendar-wrap .business-calendar{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

/* セルを詰めて7列を必ず入れる */
.km-calendar-wrap th,
.km-calendar-wrap td{
  padding: 4px 2px !important;
  vertical-align: top !important;
}

/* 曜日 */
.km-calendar-wrap th{
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* 日付 */
.km-calendar-wrap .kinmata-bc__day{
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

/* 営業/休業：折り返し許可（横幅を食わない） */
.km-calendar-wrap .kinmata-bc__status{
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
  white-space: normal !important;   /* ←重要：nowrap を殺す */
  word-break: keep-all !important;
}

/* “翌月/前月” ボタンが幅を食ってはみ出す場合の保険 */
.km-calendar-wrap .kinmata-bc__nav,
.km-calendar-wrap .business-calendar__nav{
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.km-calendar-wrap button,
.km-calendar-wrap .kinmata-bc__btn,
.km-calendar-wrap .business-calendar__btn{
  padding: 6px 8px !important;
  font-size: 12px !important;
}
/* 
 * NOTE:
 * カレンダーは横スクロールさせない設計。
 * 100vw / min-width を使うと iOS Safari で横ズレするため禁止。
 */



/* Calendar top heading: keep in one line and scale down */
.km-calendar-wrap .kinmata-bc__title{
  white-space: nowrap !important;
  font-size: 16px !important;  /* 18→16 */
  letter-spacing: .04em !important;
}
@media (max-width: 390px){
  .km-calendar-wrap .kinmata-bc__title{
    font-size: 14px !important;
  }
}
/* Force mobile header visible */
.km-mhdr{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  height: 60px;                 /* ★高さを固定 */
  background: rgba(255,255,255,.120);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.km-mhdr__inner{
  height: 60px;                 /* ★中も揃える */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}

.km-mhdr__spacer{ height: 60px; } /* ★この白帯はこれ。高さはヘッダーと同じに */

/* Logo: ensure it actually shows */
.km-mhdr__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 1px;
}
.km-mhdr__logo img{
  display: block;
  height: 26px;
  width: auto;
}
.km-mhdr__logo img{ height:26px; width:auto; }

/* ================================
   FIX: header becomes huge white space
   (override theme's generic header styles)
   ================================ */
header.km-mhdr{
  box-sizing: border-box !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999 !important;
}

.km-mhdr__inner{
  box-sizing: border-box !important;
  height: 60px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* spacer: always exactly same as header */
.km-mhdr__spacer{
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ensure right block doesn't wrap/drop */
.km-mhdr__right{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.km-mtop::before{
  display: none !important;
}

/* ================================
   Mobile Header – FINAL override
   ================================ */
header.km-mhdr{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999 !important;
  height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,0,0,.70) !important; /* 赤 */
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.km-mhdr__spacer{ height: 60px !important; margin:0 !important; padding:0 !important; }

.km-mhdr__inner{
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  gap: 10px !important;
}

/* left: logo (never collapse) */
.km-mhdr__logo{
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: 55vw !important;
  overflow: visible !important;
}
.km-mhdr__logo img{
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* right cluster */
.km-mhdr__right{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

/* language select */
.km-lang__select{
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  font-size: 13px !important;
}

/* hamburger (force visible) */
.km-burger{
  width: 42px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 10px !important;
}
.km-burger span{
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #222 !important;
  border-radius: 2px !important;
}
/* =================================================
   Mobile Header + Drawer (CLEAN OVERRIDE)
   - Put this block at the VERY END of your CSS file
   ================================================= */

/* Header container */
header.km-mhdr{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 99999 !important;
  height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* Spacer under fixed header */
.km-mhdr__spacer{
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Inner layout */
.km-mhdr__inner{
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* Right cluster */
.km-mhdr__right{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

/* Logo (remove any "plate" from global CSS) */
.km-mhdr__logo{
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  max-width: 55vw !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.km-mhdr__logo img{
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* TEMP: make white svg visible on white header */
  filter: invert(1) grayscale(1) contrast(2);
}

/* Language select */
.km-lang__select{
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  font-size: 13px !important;
}

/* Hamburger button */
.km-burger{
  width: 42px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 10px !important;
}
.km-burger span{
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #222 !important;
  border-radius: 2px !important;
}

/* ================================
   Drawer (SAFE / CLEAN)
   ================================ */

/* 閉じている時は完全に存在させない（クリック阻害防止） */
#km-drawer[hidden]{
  display: none !important;
}

/* Drawer overlay container */
#km-drawer{
  position: fixed;
  inset: 0;
  z-index: 100000; /* header より上 */
}

/* Backdrop */
#km-drawer .km-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* Drawer panel */
#km-drawer .km-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: -18px 0 40px rgba(0,0,0,.20);
  transform: translateX(100%);
  transition: transform .22s ease;
  padding: 16px 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Open state */
#km-drawer.is-open .km-drawer__panel{
  transform: translateX(0);
}

/* Drawer header */
#km-drawer .km-drawer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#km-drawer .km-drawer__ttl{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0;
}

#km-drawer .km-drawer__close{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  width: 42px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Drawer links */
#km-drawer .km-drawer__nav{
  display: grid;
  gap: 10px;
}

#km-drawer .km-drawer__link{
  display: block;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
  color: #222;
  font-size: 14px;
  line-height: 1.2;
  background: #fff;
}

#km-drawer .km-drawer__link--primary{
  background: rgba(153, 51, 0, 0.92);
  color: #fff;
  border-color: rgba(153, 51, 0, 0.92);
}

/* ================================
   White veil & Mobile Header
   ================================ */

/* 白ベールはヘッダーより下から開始 */
.km-mtop::before{
  top: 60px !important;   /* header height */
}

/* Mobile header transparency */
header.km-mhdr{
  background: rgba(255,255,255,.80) !important; /* ← 今回決めた透明度 */
}

/* テーマ由来の疑似要素・重ね背景を完全に無効化 */
header.km-mhdr::before,
header.km-mhdr::after{
  content: none !important;
  background: none !important;
}
/* ================================
   Header opacity on scroll
   ================================ */
/* スクロール後 */
header.km-mhdr.is-scrolled{
  background: rgba(255,255,255,.95) !important;
}




/* =========================================
   PRICING (current HTML: .km-pricing__table)
   ========================================= */

/* ブロック全体（iOSの勝手拡大対策もここで完結） */
#price .km-pricing{
  width: 100%;
  max-width: 100%;
  overflow: hidden;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  font-size: 16px;
  line-height: 1.65;
}

/* 見出し・導入文（必要なら） */
#price .km-pricing__title{
  margin: 0 0 10px;
}

#price .km-pricing__lead{
  margin: 0 0 18px;
  line-height: 1.65;
}

#price .km-pricing__smallnote{
  display: block;
  margin-top: 6px;
  font-size: 0.92em;
  color: #666;
}

/* テーブル */
#price .km-pricing__table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 6px; /* 金額行の詰め */
}

/* 列幅 */
#price .km-pricing__col-label{ width: 56%; }
#price .km-pricing__col-price{ width: 44%; }

/* 左列 */
#price .km-pricing__label{
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
}

/* 入店時間 */
#price .km-pricing__time{
  font-weight: 400;
  font-size: 0.78em;
  color: #555;
  line-height: 1.35;
  padding-top: 4px;
  white-space: nowrap;
}

/* 右列 */
#price .km-pricing__price{
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

/* 右列の金額（¥10,000 等） */
#price .km-pricing__amt{
  margin: 0;
  line-height: 1.55;
}

/* セクション間余白 */
#price .km-pricing__gap td{ height: 6px; }
#price .km-pricing__groupgap td{ height: 14px; }

/* 注釈（統一） */
#price .km-pricing__note td{
  padding-top: 2px;
  text-align: right;
}

#price .km-pricing__note--tight td{
  padding-top: 0;
}

/* 右列内の「ラベル＋金額」行（天ぷら付き、天丼、天ぷらコース） */
#price .km-pr-line{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  line-height: 1.45;
}

#price .km-pr-sublabel{
  font-size: 0.92em;
  opacity: 0.95;
  white-space: nowrap;
}

#price .km-pr-subprice{
  white-space: nowrap;
  min-width: 6.2em;
  text-align: right;
}

/* split（必要なら残す） */
#price .km-pr-line--split{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}

/* 英語の Tempura Course だけ折り返し許可（あなたの実績のある対策を維持） */
#price .km-pricing--en .km-pr-line--tempura{
  width: 100%;
  gap: 14px;
}

#price .km-pricing--en .km-pr-line--tempura .km-pr-sublabel{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: right;
  line-height: 1.25;
  font-size: 0.92em;
}

#price .km-pricing--en .km-pr-line--tempura .km-pr-subprice{
  flex: 0 0 auto;
  min-width: 6.2em;
  text-align: right;
}

/* モバイル：極小化防止（!important 乱用なしで止める） */
@media (max-width: 768px){
  #price .km-pricing{
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}
/* =========================================
   PRICING: vertical alignment normalize
   ========================================= */

/* 右カラム内の全行を “同じ行高” に統一 */
#price td.km-pricing__price > .km-pricing__amt,
#price td.km-pricing__price > .km-pr-line{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;  /* ← 全部同じにする */
}

/* flex行の上下ズレ（baseline）を潰す */
#price td.km-pricing__price > .km-pr-line{
  display: flex;
  align-items: center;            /* ← これで上下のズレが消える */
  gap: 12px;
}

/* ラベル文字が大きさ違いでも暴れない */
#price .km-pr-sublabel,
#price .km-pr-subprice{
  line-height: 1.55 !important;
}

/* 右列の “天ぷら付き” も同じルールで */
#price .km-pr-line .km-pr-sublabel{
  font-size: 0.92em;
  opacity: 0.95;
}

/* 右列：ラベル＋金額行は “右端基準” にする */
#price td.km-pricing__price > .km-pr-line{
  width: auto !important;     /* ←箱幅を捨てる */
  margin-left: 0 !important;
  justify-content: flex-end;  /* 右端に寄せる */
  gap: 18px;                  /* ラベルと金額の間隔 */
}

/* ラベルは右寄せ（見た目が整う） */
#price .km-pr-sublabel{
  text-align: right;
  min-width: 6.5em;           /* ←これでラベルの開始位置が揃う */
}

/* 金額幅は固定（桁が揃う） */
#price .km-pr-subprice{
  min-width: 6.2em;
  text-align: right;
}
/* ---- Tighten gaps between amounts and notes ---- */
#price .km-pricing__table{
  border-spacing: 0 6px; /* 6px → 2px に */
}

/* border-spacing を保ったまま、注釈行だけ上に詰める（確実） */
#price tr.km-pricing__note{
  transform: translateY(-8px); /* 3〜6pxで調整 */
}

/* =========================================
   Dish names (Tempura / Tendon etc.)
   - all languages
   - slightly smaller text
   ========================================= */

/* 天ぷらコース・天丼コース名など */
#price .km-pr-sublabel{
  font-size: 0.7em;
  line-height: 1.4;
}

/* 天丼（野菜・並・上・特上）など */
#price .km-pr-label{
  font-size: 0.7em;
  line-height: 1.4;
}

/* 天ぷら付き */
#price .km-pr-opt__label{
  font-size: 0.7em;
  line-height: 1.35;
}



/* 入店時間を小さく（このCSSだけ追加でOK） */
.km-pr-time{
  margin-top: 4px;
  font-size: 0.73em; /* ←ここで大きさ調整 */
  font-weight: 400;
  color: #555;
  line-height: 1.35;
  white-space: nowrap;
}
/* 注釈も小さく（このCSSだけ追加でOK） */
#price tr.km-pricing__note .km-pricing__smallnote{
  font-size: 0.82em;      /* ←小さめ */
  line-height: 1.4;
  color: #666;
}


/* ================================
   Mobile Footer (show always)
   - Mobile site templates
   - Logo size scales with display size
   ================================ */

#km-footer-mobile{
  display: block;
  background:#111;
  color:#fff;
  padding:16px 12px 18px;
  font-size:13px;
  line-height:1.5;
}

/* --------------------------------
   Buttons
--------------------------------- */
.km-footer-mobile__nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.km-footer-btn{
  display:block;
  text-align:center;
  padding:12px 6px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  white-space:nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}

/* 念のため派手色を無効化 */
.km-footer-btn--call,
.km-footer-btn--mail,
.km-footer-btn--map{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.18);
}

/* --------------------------------
   Bottom area (info + logo)
--------------------------------- */
#km-footer-mobile .km-footer-mobile__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* 左：情報 */
#km-footer-mobile .km-footer-mobile__info{
  order:1;
  flex: 1 1 auto;
  min-width:0;
  color:#ccc;
  font-size:12px;
}

.km-footer-mobile__address{ margin-bottom:6px; }
.km-footer-mobile__tel{
  font-weight:700;
  margin-bottom:2px;
  color:#ddd;
}
.km-footer-mobile__mailtext{
  margin-bottom:10px;
  color:#bbb;
}

/* 右：ロゴ（画面サイズに応じて可変） */
#km-footer-mobile .km-footer-mobile__logo{
  order:2;

  /* 最小92px / 画面に応じて拡大 / 最大160px */
  flex: 0 0 clamp(120px, 20vw, 200px);
  width:      clamp(120px, 20vw, 200px);

  margin-left:auto;   /* 常に右寄せ */
  margin-top:26px;    /* 視覚的な高さ調整 */
  opacity:.95;
}

#km-footer-mobile .km-footer-mobile__logo img{
  width:100%;
  height:auto;
  display:block;
}

/* --------------------------------
   Lower row (always full width)
--------------------------------- */
#km-footer-mobile .km-footer-mobile__switch{
  order:99;
  flex:0 0 100%;
  width:100%;
  text-align:center;
  margin-top:12px;
}

#km-footer-mobile .km-footer-mobile__switch a{
  color:#aaa;
  font-size:12px;
  text-decoration:none;
}

#km-footer-mobile .km-footer-mobile__copyright{
  order:100;
  flex:0 0 100%;
  width:100%;
  text-align:center;
  margin-top:6px;
  font-size:11px;
  color:#777;
}


/* ================================
   Drawer: 上下分離レイアウト
   ================================ */

/* nav 全体を縦flexに */
#km-drawer .km-drawer__nav{
  display: flex;
  flex-direction: column;
  height: 100%;              /* ← これが超重要 */
}

/* 上ブロック（料金〜予約）はそのまま積む */
#km-drawer .km-drawer__link{
  margin-bottom: 14px;
}

/* 予約ボタン直後は少しだけ詰める */
#km-drawer .km-drawer__link--primary{
  margin-bottom: 8px;
}

/* ===== ここが肝 ===== */
/* ================================
   Drawer: 上下分離レイアウト（最終）
   ================================ */

/* nav 全体を縦に積む */
#km-drawer .km-drawer__nav{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: calc(50px + env(safe-area-inset-bottom)); /* Safari下UI対策・最小限 */
}

/* 上ブロック（料金〜予約） */
#km-drawer .km-drawer__link{
  margin-bottom: 14px;
}

/* 予約ボタンだけ少し詰める */
#km-drawer .km-drawer__link--primary{
  margin-bottom: 8px;
}

/* 下ブロック（TEL / メール / PC）を下に寄せる */
#km-drawer .km-drawer__sub{
  margin-top: auto;      /* 上下分離の肝 */
  padding-left: 18px;    /* 右寄り感 */
  display: grid;
  gap: 8px;              /* 最小限の間隔 */
}

/* TEL / メールのボタン */
#km-drawer .km-drawer__sublink{
  display: block;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  font-size: 15px;
  line-height: 1.2;
}

/* PC用サイトへ：余白なし */
#km-drawer .km-drawer__sep{
  height: 0;
}

/* Mobile footer: LINE button only (scoped override) */
@media (max-width: 768px){
  .km-footer-mobile__info .km-line-follow img{
    width: auto !important;
    max-width: 120px !important; /* 好みで 220–300 */
    height: auto !important;
  }
}

@media (max-width: 768px){
  /* win against existing fixed rules */
  footer#km-footer-mobile .km-footer-mobile__bottom .km-footer-mobile__logo{
    width: 130px !important;
    max-width: 130px !important;
    flex: 0 0 130px !important;   /* flex-basis を固定 */
    overflow: visible !important;
  }

  footer#km-footer-mobile .km-footer-mobile__bottom .km-footer-mobile__logo a{
    display: block !important;
    width: 100% !important;
  }

  footer#km-footer-mobile .km-footer-mobile__bottom .km-footer-mobile__logo img{
    width: 100% !important;
    max-width: 130px !important;
    height: auto !important;
    display: block !important;
  }
}
@media (max-width: 768px){

  /* ロゴの基準位置を作る */
  footer#km-footer-mobile .km-footer-mobile__bottom{
    position: relative !important;
  }

  /* ロゴを右側に固定（flexの流れから外す） */
  footer#km-footer-mobile .km-footer-mobile__bottom .km-footer-mobile__logo{
    position: absolute !important;
    right: 16px !important;
    bottom: 92px !important;   /* ← ここが調整点（PC版表示の上あたり） */
    width: 130px !important;
    max-width: 130px !important;
    margin: 0 !important;
  }

  footer#km-footer-mobile .km-footer-mobile__bottom .km-footer-mobile__logo img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* =========================
   km-text background objs
   ========================= */
.km-story .km-text::before,
.km-story .km-text::after{
  content: "";
  position: absolute;
  width: min(60vw, 300px);
  height: 100%;
  opacity: .50;              /* ← 指定どおり */
  pointer-events: none;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 左：少し上 */
.km-story .km-text::before{
  top: 28%;                  /* ← 上側に寄せる */
  left: -2vw;
  transform: translateY(-50%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-left.svg");
}

/* 右：少し下 */
.km-story .km-text::after{
  top: 68%;                  /* ← 下側に寄せる */
  right: -2vw;
  transform: translateY(-50%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-right.svg");
}
/* フッター直前の装飾：スペースを作らない */
.km-footer-decor{
  position: relative;
  height: 0;              /* ← 高さをゼロにする */
  margin: 0;
  padding: 0;
  overflow: visible;      /* ← ここ超重要 */
  background: transparent;
}

/* SVGは上方向に重ねる */
.km-footer-decor::before,
.km-footer-decor::after{
  content: "";
  position: absolute;
  bottom: -170px;          /* ← フッター側に被せる */
  width: min(60vw, 320px);
  height: 160px;
  opacity: .50;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 左：少し上 */
.km-footer-decor::before{
  left: -4vw;
  transform: translateY(-30%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-left.svg");
}

/* 右：少し下 */
.km-footer-decor::after{
  right: -4vw;
  transform: translateY(10%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-right.svg");
}

footer{
  position: relative;
  z-index: 10;   /* ← フッターを最前面へ */
}
.km-footer-decor{
  position: relative;
  z-index: 1;
}

.km-footer-decor::before,
.km-footer-decor::after{
  z-index: 0;    /* ← フッターより下 */
}

/* =========================
   Drawer panel background objs（FIX版）
   ========================= */

#km-drawer .km-drawer__panel{
  position: absolute;   /* ← relative にしない */
  top: 0;
  right: 0;             /* ← 右固定 */
  left: auto;
  height: 100%;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* 背景SVG */
#km-drawer .km-drawer__panel::before,
#km-drawer .km-drawer__panel::after{
  content:"";
  position: absolute;
  width: min(70vw, 280px);
  height: 220px;
  opacity: .50;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 左上 */
#km-drawer .km-drawer__panel::before{
  top: 30%;
  left: -12vw;
  transform: translateY(-50%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-left.svg");
}

/* 右下 */
#km-drawer .km-drawer__panel::after{
  top: 75%;
  right: -12vw;
  transform: translateY(-50%);
  background-image: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-right.svg");
}

/* 中身は前面 */
#km-drawer .km-drawer__panel > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Drawer main buttons
   ========================= */

#km-drawer .km-drawer__panel a{
  font-size: 16.5px;     /* ← 少し大きく */
  font-weight: 500;      /* ← 細さ解消（600だと少し強い） */
  letter-spacing: .04em; /* 和文が締まる */
}

/* ご予約（茶色ボタン）は一段強め */
#km-drawer .km-drawer__panel a.km-btn--primary,
#km-drawer .km-drawer__panel a[href*="tablecheck"]{
  font-size: 17.5px;
  font-weight: 600;
}
#km-drawer .km-drawer__panel a{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Pricing: small label (With tempura / Vegetable / etc.) */
.km-pricing__price .km-pr-label{
  font-size: 0.85em;   /* 0.80〜0.90で調整 */
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .9;
}

/* Pricing label baseline fix */
.km-pricing__price .km-pr-label{
  font-size: 0.85em;
  font-weight: 500;

  display: inline-block;   /* vertical-align を効かせる */
  vertical-align: baseline;/* まず通常に揃える */

  line-height: 1;          /* 上下ズレの原因を潰す */
  transform: translateY(0.06em); /* まだ上に見える場合の微調整 */
}

/* Pricing: Tempura course label (small & baseline fix) */
.km-pricing__price .km-pr-sublabel{
  font-size: 0.75em;        /* ← With tempura / Vegetable と同じ */
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .9;

  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  transform: translateY(0.06em); /* ← 上ズレ補正 */
}

/* ================================
   Align only "With tempura" rows
   ================================ */

.km-pricing__price .km-pr-opt{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.km-pricing__price .km-pr-opt__label{
  font-size: 0.78em;        /* 小さめ */
  white-space: nowrap;
  letter-spacing: .02em;
  opacity: .9;
}

.km-pricing__price .km-pr-opt__amt{
  white-space: nowrap;
  margin-left: auto;
}
/* ================================
   Tempura line: allow wrap but keep clean
   ================================ */

.km-pr-line--tempura{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  /* ラベルが2行でも上で揃う */
  gap: 12px;
}

/* ===== Tempura label: DON'T break inside words ===== */
.km-pr-line--tempura .km-pr-sublabel{
  white-space: normal !important;
  overflow-wrap: normal !important;   /* anywhere を潰す */
  word-break: keep-all !important;    /* 英単語を途中で割らない */
  hyphens: none !important;           /* ハイフネーション禁止 */
}

.km-pr-line--tempura .km-pr-subprice{
  flex: 0 0 auto;
  white-space: nowrap;

  font-size: 1em;           /* 価格は主役のまま */
  font-weight: 600;
  line-height: 1.1;
}
/* ===== Tempura row: align label with price baseline ===== */
.km-pr-line--tempura{
  align-items: baseline !important; /* 価格と同じ基準線で揃える */
}

/* ===== FORCE override: Tempura row only ===== */
.km-price-reset .km-pricing__table .km-pr-line.km-pr-line--tempura{
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.km-price-reset .km-pricing__table .km-pr-line.km-pr-line--tempura .km-pr-sublabel{
  font-size: 0.82em !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  transform: translateX(0.6em); /* ← 0.3〜0.6em で微調整 */
  position: relative !important;
  top: -0.8em !important;  /* ←ここをいじる */
}
/* ===== FORCE: make only ¥15,000 look like other prices ===== */
.km-price-reset .km-pricing__table
.km-pr-line.km-pr-line--tempura
.km-pr-subprice{
  font-weight: 400 !important;  /* 太さを戻す */
  color: inherit !important;    /* 色を親に合わせる */
  opacity: 1 !important;        /* 濃さを揃える */
}

.km-footer-decor {
  contain: layout paint;
  content-visibility: auto;
}

.km-footer-decor {
  min-height: 120px; /* 実際の高さに近い値 */
}
/* カレンダーの白いエリアに装飾を置く */
.km-photo--calendar{
  position: relative;
  overflow: visible;
}

/* 装飾（白背景の上に出す） */
.km-photo--calendar::before,
.km-photo--calendar::after{
  content:"";
  position:absolute;
  left:-4vw;
  right:-4vw;
  height:160px;
  opacity:.50;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:0;                 /* 背景扱い */
}

/* 左 */
.km-photo--calendar::before{
  bottom: 50px; /* ←フッターの“手前”で止める（値は好みで） */
  left:-4vw;
  right:auto;
  width:min(60vw, 320px);
  background-image:url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-left.svg");
}

/* 右 */
.km-photo--calendar::after{
  bottom: -150px;
  right:-4vw;
  left:auto;
  width:min(60vw, 320px);
  background-image:url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/top-head-obj-right.svg");
}

/* カレンダーやボタン本文を前に */
.km-photo--calendar > *{
  position: relative;
  z-index: 1;
}

/* PCサイトに飛ぶ注意書き */
.km-btn-note{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  opacity:.75;
}
.km-mtop{ position: relative; }








/* =================================================
   HERO直下の背景（ボタンの向こう側）
   - 対象：.km-actions（Heroのすぐ下の白帯）
   - 背景は ::before で敷く（レイヤー分離）
   ================================================= */

/* 1) 白帯（器）の高さを暴れないように固定 */
.km-actions{
  position: relative !important;
  padding: 14px 14px 18px !important;   /* ← 白帯の高さをここで決める */
  margin: 0 !important;
  background: transparent !important;   /* 白は作らない（下地は既存に任せる） */
}

/* 2) 背景ドット：Hero直下〜次の写真の後ろに“食い込む” */
.km-actions::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  top: -26px !important;      /* ← Hero直下に近づける（上に伸ばす） */
  bottom: -110px !important;  /* ← 次の写真の後ろまで伸ばす（下に食い込ませる） */

  background: url("https://www.kinmata.com/cms_wp/wp-content/themes/kinmata/images/top/facility-obj.svg")
              no-repeat center / min(92vw, 980px) !important;

  opacity: .18 !important;    /* ← さりげなく（0.12〜0.22） */
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 3) ボタンは必ず前面 */
.km-actions > a{
  position: relative !important;
  z-index: 1 !important;
}


/* =================================================
カウンター席3日前要予約notice注意書きサイズ変更　スマホ極小化防止 
 * ================================================= */
p.km-note-reserve{
  font-size: clamp(12px, 0.85vw, 13.5px)!important;
  line-height: 1.6;
  color: #666;
}

/* =================================================
   Drawer: Instagram (right aligned)
   ================================================= */
#km-drawer .km-drawer__ig{
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important; /* ← 右寄せ */
  align-items: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 10px 16px !important;  /* ← 右端との余白（他の項目と揃える） */
  margin: 6px 0 2px !important;
}

.km-story,
.km-block{
  overflow: visible;
}
footer{
  clear: both;
}