@charset "utf-8";
/* ============================================================
   KAWARU（健美創） トップページ 仮デザイン用オーバーライド
   ・SORANO HOTEL テーマのレイアウトを流用し、配色を紺／白へ
   ・本CSSは style4b6d.css / adde7c9.css の後に読み込むこと
   ============================================================ */

:root{
  --kw-navy:#16223F;
  --kw-navy-2:#26375F;
  --kw-navy-3:#3E5586;
  --kw-accent:#8FA5CC;
  --kw-paper:#FFFFFF;
  --kw-paper-2:#F4F6FA;
  --kw-line:rgba(22,34,63,.14);

  /* テーマ変数の置き換え */
  /* Cardo には日本語グリフが無く「円」が別フォントに落ちて字面が崩れるため、
     明朝の日本語フォントをフォールバックとして明示する */
  --font-family-eng:"Cardo","Noto Serif JP","游明朝","Yu Mincho",serif;

  --color-blue:#26375F;
  --color-blue-hover:#16223F;
  --color-dark-blue:#16223F;
  --color-dark-blue-hover:#0E1730;
  --color-sorano-bllue:#8FA5CC;
  --color-gold:#3E5586;
  --color-gold-hover:#26375F;
  --color-bg-primary:#FFFFFF;
  --color-bg-gray:#F4F6FA;
  --color-bg-light-gray:#F8FAFD;
  --color-bg-dark-blue:#16223F;
  --color-bg-dark:#16223F;
  --color-dark:#16223F;
  --color-font-dark:#1B2237;
  --color-link:#1B2237;
  --color-link-hover:#26375F;
  --color-border-gray:rgba(22,34,63,.14);
  --color-border-dark-gray:rgba(22,34,63,.28);
  --color-border-light-gray:rgba(22,34,63,.07);
}

body{ background:var(--kw-paper); }

/* ---- ロゴ（テキストロゴのため塗りを明示） ---- */
.l-header-logo__svg,.l-gnav-logo__svg,.l-footer-logo__svg{ fill:var(--kw-navy); }
.l-header.is-transparent .l-header-logo__svg,
.is-kv-visible .l-header-logo__svg{ fill:#fff; }

.l-gnav-logo__svg{ fill:#fff; }
.l-footer-logo__svg{ fill:#fff; }
.p-top-kv__logo-item{ fill:#fff; }

/* ---- KV ---- */
.p-top-kv__logo-item{ width:100%; height:auto; aspect-ratio:200/17; }
.p-top-kv__heading{ text-shadow:0 2px 24px rgba(0,0,0,.35); }
.p-top-kv__text{ text-shadow:0 1px 16px rgba(0,0,0,.4); }
/* 実写は明るいカットがあるため、コピーが乗る右側と下部を暗く落として可読性を確保 */
.p-top-kv__overlay{ background:
  linear-gradient(to left, rgba(22,34,63,.60) 0%, rgba(22,34,63,.30) 34%, rgba(22,34,63,0) 60%),
  linear-gradient(180deg, rgba(22,34,63,.42) 0%, rgba(22,34,63,.10) 42%, rgba(22,34,63,.62) 100%); }
@media screen and (max-width:767px){
  .p-top-kv__overlay{ background:linear-gradient(180deg, rgba(22,34,63,.50) 0%, rgba(22,34,63,.28) 38%, rgba(22,34,63,.68) 100%); }
}

/* ---- INFORMATION：右カラム（会員バナー）を削除したため、右端の区切り線を消す ---- */
.p-top-information__news{ border-right:none; }

/* ---- INFORMATION：文字サイズをテーマ既定より 2px 大きく（1rem = 10px のため +0.2rem） ---- */
.p-top-information__news-heading{ font-size:1.6rem; }
.p-top-information__news-item-date{ font-size:1.5rem; }
.p-top-information__news-item-title{ font-size:1.5rem; }
@media screen and (max-width:1024px){
  .p-top-information__news-heading{ font-size:1.4rem; }
  .p-top-information__news-item-date{ font-size:1.3rem; }
  .p-top-information__news-item-title{ font-size:1.4rem; }
}
@media screen and (max-width:767px){
  .p-top-information__news-item-date{ font-size:1.2rem; }
  .p-top-information__news-item-title{ font-size:1.3rem; }
}

/* ---- セクション見出し ---- */
.c-heading-set__main{ color:var(--kw-navy); }

/* ---- 料金表示（メニューカード） ---- */
.kw-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.8rem 1.6rem; margin-top:1.2rem; }
.kw-price__main{ font-family:var(--font-family-eng); font-size:2.2rem; letter-spacing:.04em; color:var(--kw-navy); }
.kw-price__tax{ font-size:1.1rem; opacity:.65; }
/* 「円」は Cardo にグリフが無く痩せて潰れるため、単位としてサンセリフで組む */
.kw-yen{ font-family:var(--font-family-sans); font-size:.62em; font-weight:400;
  margin-left:.14em; letter-spacing:.02em; }
.kw-price__first{ display:inline-block; padding:.3em .8em; font-size:1.2rem; letter-spacing:.06em;
  color:#fff; background:var(--kw-navy-3); border-radius:1px; }
.kw-time{ margin-top:.6rem; font-size:1.2rem; letter-spacing:.08em; opacity:.7; }
.kw-note{ margin-top:.8rem; font-size:1.1rem; line-height:1.7; opacity:.6; }

/* ---- 区分バッジ（男女共通／女性／男性） ---- */
.kw-badge{ display:inline-block; padding:.35em .9em; margin-bottom:1.2rem;
  font-size:1.1rem; letter-spacing:.12em; color:var(--kw-navy);
  border:1px solid var(--kw-line); border-radius:2px; background:var(--kw-paper-2); }
.kw-badge[data-type="women"]{ color:#7A4A63; border-color:rgba(122,74,99,.3); background:rgba(122,74,99,.06); }
.kw-badge[data-type="men"]{ color:#2A5670; border-color:rgba(42,86,112,.3); background:rgba(42,86,112,.06); }

/* ---- コンセプト（旧RESTAURANT枠） ---- */
.p-top-restaurant__list-item-name[data-type]{ min-height:auto; }
.kw-concept-name{ font-family:var(--font-family-eng); font-size:1.8rem; letter-spacing:.1em; color:var(--kw-navy); }

/* ---- 参考リンク注記 ---- */
.kw-ref{ margin-top:2.4rem; font-size:1.2rem; line-height:2; opacity:.7; }
.kw-ref a{ text-decoration:underline; }

@media screen and (max-width:767px){
  .kw-price__main{ font-size:1.9rem; }
}

/* ---- メニューカード（旧PLANスライダー） ---- */
.kw-cat{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.kw-cat .kw-badge{ margin-bottom:0; }
.kw-desc{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
  margin-top:1.2rem; font-size:1.3rem; line-height:1.9; letter-spacing:.04em; opacity:.78; }
.p-top-plan__card-price{ display:block; }
.p-top-plan__card-price-label{ font-size:1.2rem; letter-spacing:.08em; opacity:.65; }
.p-top-plan__card-price-item{ margin-top:.4rem; }
.c-svg-arrow-left-s{ height:20px; }

/* ---- メニューカテゴリーカード（旧ROOMS） ---- */
.p-top-rooms__card-body-lsit-item{ font-size:1.3rem; line-height:1.9; }
.kw-cat-price{ display:block; margin-top:.3rem; font-family:var(--font-family-eng); font-size:1.5rem;
  letter-spacing:.04em; opacity:.85; }

/* ---- 特徴（旧SPA）：明るい背景のまま、見出しを紺に ---- */
.p-top-spa__pick-up-item-heading{ color:var(--kw-navy); }

/* ---- 注記リスト ---- */
.kw-notes{ margin-top:1.2rem; }
.kw-notes li{ position:relative; padding-left:1.2em; font-size:1.15rem; line-height:1.9; opacity:.7; }
.kw-notes li:before{ position:absolute; left:0; content:"※"; }

/* ---- フッター：紺地／白文字（テーマ既定は白地のため明示指定） ---- */
.l-footer{ color:#fff; background-color:var(--kw-navy); }
.l-footer a,
.l-footer .l-footer-address,
.l-footer .l-footer-copyright,
.l-footer .l-footer-sns__heading{ color:#fff; }
.l-footer__medium,
.l-footer__bottom{ border-top-color:rgba(255,255,255,.22); }
.l-footer-contact__link{
  color:#fff; background:transparent; border:1px solid rgba(255,255,255,.5);
  transition:color .4s, background-color .4s, border-color .4s;
}
@media (hover:hover) and (pointer:fine){
  .l-footer-contact__link:hover{ color:var(--kw-navy); background:#fff; border-color:#fff; }
}
.l-footer-sns__list-item-link svg{ fill:#fff; }
.l-footer-pagetop__item{ filter:brightness(0) invert(1); }
.l-footer-logo__svg{ fill:#fff; }

/* ---- KV 実写：横長（約2.1:1）のため、縦画面では横方向に切り取られる。やや右寄りにして文字の背後に余白を確保 ---- */
@media screen and (max-width:767px){
  .p-top-kv__slider-image img{ object-position:58% center; }
}

/* ---- PC ではハンバーガーボタンを非表示 ----
   ヘッダー内のナビは 1160px 以下で display:none になるため、
   それより広い＝ヘッダーナビが出ている幅でのみボタンを隠す。
   1160px 以下では引き続きボタンが唯一の導線として機能する。 */
@media screen and (min-width:1161px){
  .l-gnav-toggle{ display:none !important; }
}

/* ============================================================
   メインビジュアル直下のボタン 2 連
   左：施術メニュー（紺の枠線）／右：ご予約・ご相談（ゴールドのグラデーション）
   ============================================================ */
:root{
  --kw-gold-1:#B99A5B;
  --kw-gold-2:#E3CD98;
  --kw-gold-3:#A8813F;
}

.kw-booking{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:1.6rem;
  padding:3rem 0;
}
.kw-booking .kw-booking__btn{
  flex:1 1 0;
  width:auto;
  max-width:38rem;
  min-height:7.2rem;
  padding:2rem 2.4rem;
  text-align:center;
  transition:background .4s cubic-bezier(.33,1,.68,1),
             color .4s cubic-bezier(.33,1,.68,1),
             box-shadow .4s cubic-bezier(.33,1,.68,1);
}

/* 左：施術メニュー */
.kw-booking .kw-booking__btn[data-variant="menu"]{
  color:var(--kw-navy);
  background:#fff;
  border:1px solid var(--kw-navy);
}
.kw-booking .kw-booking__btn[data-variant="menu"]:hover{
  color:#fff;
  background:var(--kw-navy);
}

/* 右：ご予約・ご相談（ゴールド） */
.kw-booking .kw-booking__btn[data-variant="reserve"]{
  color:#fff;
  border:1px solid transparent;
  background:linear-gradient(100deg,
    var(--kw-gold-3) 0%,
    var(--kw-gold-1) 26%,
    var(--kw-gold-2) 50%,
    var(--kw-gold-1) 74%,
    var(--kw-gold-3) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  text-shadow:0 1px 2px rgba(90,66,24,.35);
}
.kw-booking .kw-booking__btn[data-variant="reserve"]:hover{
  color:#fff;
  background-position:100% 50%;
  box-shadow:0 6px 20px rgba(168,129,63,.32);
}

@media screen and (max-width:767px){
  .kw-booking{ gap:1.2rem; padding:2.4rem 0; }
  .kw-booking .kw-booking__btn{
    flex:1 1 100%;
    max-width:100%;
    min-height:6rem;
    padding:1.6rem 1.6rem;
    font-size:1.5rem;
  }
}

/* ============================================================
   下層ページ共通（2026.09.16 追加）
   l-content-header → l-content-lead → l-content-body の骨格に乗せる
   ============================================================ */

/* ---- 下層ヘッダー（写真なし・紺のバンド） ----
   トップのKVが「暗い面に白の明朝」なので、下層も同じ見え方に揃える。
   固定ヘッダーの高さ分だけ白を残してから紺を始めるので、
   ヘッダーのナビは常に白地＋濃色のまま読める（テーマJSの状態に依存しない）。 */
.l-content-header{
  padding-top:var(--header-height);
  padding-bottom:0;
  background:none;
}
.kw-page-head{
  position:relative;
  padding-top:9rem;
  padding-bottom:8rem;
  color:#fff;
  background-color:var(--kw-navy);
  background-image:
    radial-gradient(120% 95% at 84% 12%, rgba(143,165,204,.22) 0%, rgba(143,165,204,0) 62%),
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.030) 0 1px, rgba(255,255,255,0) 1px 96px);
}
/* 下端の細いゴールドライン（予約ボタンと同じ金を1本だけ） */
.kw-page-head:after{
  position:absolute; right:0; bottom:0; left:0; height:1px; content:"";
  background:linear-gradient(90deg,
    var(--kw-gold-3) 0%, var(--kw-gold-2) 34%, var(--kw-gold-1) 62%, rgba(168,129,63,0) 100%);
  opacity:.85;
}
.l-content-header__heading-main{
  font-size:7.2rem; line-height:1; letter-spacing:.14em; color:#fff;
}
.l-content-header__heading-sub{
  margin-top:1.6rem; font-size:1.3rem; letter-spacing:.24em; color:#fff; opacity:.62;
}

/* パンくず */
.kw-crumb{
  margin-bottom:6.4rem; font-size:1.15rem; letter-spacing:.16em; color:#fff; opacity:.55;
}
.kw-crumb span{ margin:0 1em; opacity:.6; }
.kw-crumb a{ color:inherit; transition:opacity .4s; }
.kw-crumb a:hover{ opacity:.6; }

/* 見出しの右にキャッチコピーを並べる */
.kw-page-head__row{ display:flex; align-items:flex-end; gap:6.4rem; }
.kw-page-head__row .l-content-header__heading{ flex:0 0 auto; }
.kw-page-head__copy{
  flex:1 1 auto; padding-left:6.4rem;
  border-left:1px solid rgba(255,255,255,.22);
  font-family:var(--font-family-serif);
  font-size:2.6rem; font-weight:400; line-height:1.95; letter-spacing:.12em; color:#fff;
}

@media screen and (max-width:1024px){
  .kw-page-head{ padding-top:7rem; padding-bottom:6.4rem; }
  .l-content-header__heading-main{ font-size:5.6rem; }
  .kw-crumb{ margin-bottom:4.8rem; }
  .kw-page-head__row{ gap:4rem; }
  .kw-page-head__copy{ padding-left:4rem; font-size:2.1rem; }
}
@media screen and (max-width:767px){
  .kw-page-head{ padding-top:5.6rem; padding-bottom:5.6rem; }
  .l-content-header__heading-main{ font-size:4.2rem; }
  .kw-crumb{ margin-bottom:3.2rem; }
  .kw-page-head__row{ display:block; }
  .kw-page-head__copy{
    padding-left:0; padding-top:3.2rem; margin-top:3.2rem;
    border-left:none; border-top:1px solid rgba(255,255,255,.22);
    font-size:1.9rem; line-height:1.9;
  }
}

/* ---- リード（導入文＋右に注記） ---- */
.kw-lead-row{ display:flex; gap:8rem; align-items:flex-start; }
.kw-lead-row__body{ flex:1 1 auto; max-width:72rem; }
.kw-lead-row__body .c-text + .c-text{ margin-top:2.4rem; }
.kw-lead-row__note{
  flex:0 0 30rem; padding-top:.6rem;
  font-size:1.2rem; line-height:2.1; letter-spacing:.04em; opacity:.62;
}
.kw-lead-row__note dt{
  margin-bottom:.8rem; font-family:var(--font-family-eng); font-size:1.2rem;
  font-weight:400; letter-spacing:.2em; color:var(--kw-navy-3); opacity:1;
}
@media screen and (max-width:1024px){
  .kw-lead-row{ gap:4.8rem; }
  .kw-lead-row__note{ flex-basis:24rem; }
}
@media screen and (max-width:767px){
  .kw-lead-row{ display:block; }
  .kw-lead-row__note{
    padding-top:2.4rem; margin-top:3.2rem; border-top:1px solid var(--kw-line);
  }
}

/* ---- サイドのアンカーナビ ---- */
.kw-anchor{ position:sticky; top:12rem; }
.kw-anchor .c-anchor__item{ padding:1.1rem 0; border-bottom:1px solid var(--kw-line); }
.kw-anchor .c-anchor__item:first-child{ border-top:1px solid var(--kw-line); }
.kw-anchor .c-anchor__name-main{ color:var(--kw-navy-3); }
.kw-anchor .c-anchor__name-sub{ font-size:1.4rem; letter-spacing:.06em; color:var(--kw-navy); }
@media screen and (max-width:1024px){
  .kw-anchor{ position:relative; top:0; }
  .kw-anchor .c-anchor{ flex-direction:row; flex-wrap:wrap; column-gap:2.4rem; width:100%; padding-left:0; }
  .kw-anchor .c-anchor__item:first-child{ border-top:none; }
}

/* ---- カテゴリ見出し ---- */
.kw-cat-block + .kw-cat-block{ margin-top:12rem; }
.kw-cat-head{ padding-bottom:2.4rem; margin-bottom:4.8rem; border-bottom:1px solid var(--kw-navy); }
.kw-cat-head__en{
  font-family:var(--font-family-eng); font-size:1.3rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-cat-head__ja{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:1.6rem;
  margin-top:.8rem; font-family:var(--font-family-serif);
  font-size:3.2rem; font-weight:400; line-height:1.4; letter-spacing:.08em; color:var(--kw-navy);
}
.kw-cat-head__count{ font-size:1.3rem; letter-spacing:.14em; opacity:.55; }
.kw-cat-head__lead{ margin-top:1.6rem; font-size:1.4rem; line-height:2; letter-spacing:.04em; opacity:.8; }
/* 一覧ページ → カテゴリ下層ページへの導線 */
.kw-cat-head__more{ margin-top:1.6rem; font-size:1.3rem; letter-spacing:.08em; }
.kw-cat-head__more a{ color:var(--kw-navy-3); }
.kw-cat-head__more a:after{ margin-left:.6em; content:"→"; }

/* ---- サブ見出し（オイルマッサージ／女性の脱毛 など） ---- */
.kw-sub-head{
  display:flex; align-items:baseline; gap:1.2rem;
  margin:6.4rem 0 2.8rem; font-family:var(--font-family-serif);
  font-size:1.9rem; font-weight:500; letter-spacing:.08em; color:var(--kw-navy);
}
.kw-sub-head:first-of-type{ margin-top:0; }
.kw-sub-head__count{
  font-family:var(--font-family-eng); font-size:1.4rem;
  letter-spacing:.06em; color:var(--kw-navy-3);
}
.kw-sub-head__count:before{ content:"— "; }

/* ---- メニューカードのグリッド ---- */
.kw-menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6.4rem 4rem; }
.kw-menu-grid[data-cols="1"]{ grid-template-columns:1fr; }
.kw-menu-grid[data-cols="2"]{ grid-template-columns:repeat(2,1fr); }
.kw-menu-grid .p-top-plan__card{ height:100%; }
.kw-menu-grid .p-top-plan__card-link{ display:flex; flex-direction:column; height:100%; }
.kw-menu-grid .kw-card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.kw-menu-grid .p-top-plan__card-price{ margin-top:auto; }
/* 一覧ページでは説明文を省略せず全文出す */
.kw-menu-grid .kw-desc{ display:block; -webkit-line-clamp:unset; overflow:visible; }
/* 連番を出さないので、番号用に空けてある左余白を戻す */
.kw-menu-grid .p-top-plan__card-header{ padding-left:0; }

/* 1件だけのカテゴリは横組みにして行を埋める */
.kw-menu-grid[data-cols="1"] .p-top-plan__card-link{
  flex-direction:row; gap:4.8rem; align-items:flex-start;
}
.kw-menu-grid[data-cols="1"] .p-top-plan__card-image{ flex:0 0 30%; max-width:30%; }
.kw-menu-grid[data-cols="1"] .kw-cat{ margin-top:0; }
.kw-menu-grid[data-cols="2"] .p-top-plan__card-image{ aspect-ratio:4/3; }

@media screen and (max-width:1024px){
  .kw-menu-grid{ grid-template-columns:repeat(2,1fr); gap:5.6rem 3.2rem; }
  .kw-cat-block + .kw-cat-block{ margin-top:9rem; }
  .kw-cat-head__ja{ font-size:2.6rem; }
}
@media screen and (max-width:1024px){
  .kw-menu-grid[data-cols="1"] .p-top-plan__card-image{ flex:0 0 38%; max-width:38%; }
}
@media screen and (max-width:767px){
  .kw-menu-grid,
  .kw-menu-grid[data-cols="2"]{ grid-template-columns:1fr; gap:4.8rem; }
  .kw-menu-grid[data-cols="1"] .p-top-plan__card-link{ flex-direction:column; gap:0; }
  .kw-menu-grid[data-cols="1"] .p-top-plan__card-image{ flex:none; max-width:100%; }
  .kw-menu-grid[data-cols="1"] .kw-cat{ margin-top:2rem; }
  .kw-cat-block + .kw-cat-block{ margin-top:7rem; }
  .kw-cat-head__ja{ font-size:2.2rem; }
  .kw-sub-head{ margin:4.8rem 0 2.4rem; font-size:1.7rem; }
}

/* ---- 料金一覧表 ---- */
.kw-pricetable-wrap{ overflow-x:auto; }
.kw-pricetable{ width:100%; min-width:56rem; border-collapse:collapse; }
.kw-pricetable th,
.kw-pricetable td{ padding:1.4rem 1.6rem; text-align:left; vertical-align:baseline; }
.kw-pricetable thead th{
  font-size:1.15rem; font-weight:400; letter-spacing:.14em; color:#fff;
  white-space:nowrap; background:var(--kw-navy);
}
.kw-pricetable tbody td{ font-size:1.35rem; line-height:1.8; border-bottom:1px solid var(--kw-line); }
.kw-pricetable__cat th{
  padding-top:3.2rem; font-family:var(--font-family-serif); font-size:1.7rem;
  font-weight:500; letter-spacing:.1em; color:var(--kw-navy);
  border-bottom:1px solid var(--kw-navy);
}
.kw-pricetable tbody tr:first-child th{ padding-top:1.4rem; }
.kw-pricetable__sub th{
  padding-top:2.4rem; padding-bottom:.6rem; font-size:1.2rem; font-weight:400;
  letter-spacing:.14em; color:var(--kw-navy-3);
}
.kw-pricetable__t{ white-space:nowrap; font-size:1.25rem; opacity:.75; }
.kw-pricetable__p,
.kw-pricetable__f{ white-space:nowrap; font-family:var(--font-family-eng); letter-spacing:.04em; }
.kw-pricetable__p{ font-size:1.6rem; }
.kw-pricetable__f{ color:var(--kw-navy-3); }
.kw-pricetable .kw-none{ color:var(--kw-navy); opacity:.28; }
@media screen and (max-width:767px){
  .kw-pricetable th,.kw-pricetable td{ padding:1.1rem 1.1rem; }
}

/* ---- 注記ボックス（割引・オプション） ----
   （詳細ページでも使用） */
.kw-infobox{
  padding:3.2rem 3.6rem; margin-top:4.8rem;
  background:var(--kw-paper-2); border-left:2px solid var(--kw-navy);
}
.kw-infobox__heading{
  font-family:var(--font-family-serif); font-size:1.6rem; font-weight:500;
  letter-spacing:.08em; color:var(--kw-navy);
}
.kw-infobox__list{ margin-top:1.6rem; }
.kw-infobox__list li{
  position:relative; padding-left:1.4em; margin-top:.8rem;
  font-size:1.3rem; line-height:1.95; letter-spacing:.03em;
}
.kw-infobox__list li:before{ position:absolute; left:0; content:"—"; color:var(--kw-navy-3); }
@media screen and (max-width:767px){
  .kw-infobox{ padding:2.4rem 2rem; }
}

/* ============================================================
   メニューカテゴリ下層ページ（2026.09.18 追加）
   menu/hari・ikumou・facial・datsumou
   SORANO HOTEL の plan/detail の骨格に、1メニュー＝1ブロックで載せる
   ============================================================ */

.kw-crumb a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }

/* ---- メニュー1件のブロック（画像＋本文の2カラム／偶数番は左右反転） ---- */
.kw-item{
  display:flex; gap:5.6rem; align-items:flex-start;
  padding-bottom:7.2rem; margin-bottom:7.2rem; border-bottom:1px solid var(--kw-line);
}
.kw-item:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.kw-item:nth-of-type(even){ flex-direction:row-reverse; }
.kw-item__media{ flex:0 0 42%; max-width:42%; aspect-ratio:3/2; overflow:hidden; }
.kw-item__media img{ width:100%; height:100%; object-fit:cover; }
.kw-item__body{ flex:1 1 auto; min-width:0; }
.kw-item__body .kw-cat{ margin-top:0; }
.kw-item__name{
  margin-top:1.6rem; font-family:var(--font-family-serif); font-size:2.2rem;
  font-weight:500; line-height:1.6; letter-spacing:.06em; color:var(--kw-navy);
}
.kw-item__desc{ margin-top:1.6rem; font-size:1.4rem; line-height:2.05; letter-spacing:.04em; opacity:.8; }

/* ---- 施術の流れ ---- */
.kw-item__flow-heading{
  margin-top:3.2rem; margin-bottom:1.2rem; font-family:var(--font-family-eng);
  font-size:1.2rem; letter-spacing:.2em; color:var(--kw-navy-3);
}
.kw-flow__item{
  display:flex; align-items:baseline; gap:1.6rem;
  padding:1.1rem 0; border-bottom:1px solid var(--kw-line);
}
.kw-flow__item:first-child{ border-top:1px solid var(--kw-line); }
.kw-flow__num{
  flex:0 0 auto; font-family:var(--font-family-eng); font-size:1.3rem;
  letter-spacing:.08em; color:var(--kw-navy-3);
}
.kw-flow__label{ font-size:1.4rem; line-height:1.8; letter-spacing:.04em; color:var(--kw-navy); }

/* ---- 時間・料金 ---- */
.kw-spec{ margin-top:3.2rem; }
.kw-spec__row{
  display:flex; align-items:baseline; gap:1.6rem;
  padding:1.2rem 0; border-bottom:1px solid var(--kw-line);
}
.kw-spec__row:first-child{ border-top:1px solid var(--kw-line); }
.kw-spec__label{
  flex:0 0 11rem; font-size:1.2rem; letter-spacing:.14em; color:var(--kw-navy-3);
}
.kw-spec__value{ flex:1 1 auto; font-size:1.3rem; letter-spacing:.04em; opacity:.7; }
.kw-spec__price{
  margin-right:.8rem; font-family:var(--font-family-eng); font-size:2rem;
  letter-spacing:.04em; color:var(--kw-navy); opacity:1;
}
.kw-spec__row[data-type="first"] .kw-spec__label{
  padding:.2em .8em; margin-right:0; color:#fff; background:var(--kw-navy-3);
  flex-basis:auto; border-radius:1px; font-size:1.15rem;
}
.kw-spec__row[data-type="first"]{ gap:2.4rem; }

.kw-item__cta{ margin-top:3.2rem; }
.kw-item__cta .c-button-rect{ min-width:28rem; }

/* ---- ほかのメニューカテゴリ ---- */
.kw-other{ padding-top:9.6rem; }
.kw-other__heading{
  display:flex; align-items:baseline; gap:1.6rem;
  padding-bottom:1.6rem; margin-bottom:3.2rem; border-bottom:1px solid var(--kw-navy);
}
.kw-other__heading-en{
  font-family:var(--font-family-eng); font-size:1.2rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-other__heading-ja{
  font-family:var(--font-family-serif); font-size:2rem; font-weight:500;
  letter-spacing:.08em; color:var(--kw-navy);
}
.kw-other__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:3.2rem; }
.kw-other__image{ aspect-ratio:2/1; overflow:hidden; }
.kw-other__image img{ width:100%; height:100%; object-fit:cover; }
.kw-other__body{ margin-top:1.6rem; }
.kw-other__en{
  display:block; font-family:var(--font-family-eng); font-size:1.1rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-other__ja{
  display:block; margin-top:.6rem; font-family:var(--font-family-serif);
  font-size:1.7rem; letter-spacing:.08em; color:var(--kw-navy);
}

/* ---- 一覧へ戻る ---- */
.kw-back{ padding-top:7.2rem; text-align:center; }

/* ============================================================
   コンセプトページ（2026.09.18 追加）
   ============================================================ */

/* ---- 冒頭の動画枠（素材支給までのプレースホルダー） ---- */
.kw-video{
  position:relative; aspect-ratio:16/9; margin-bottom:8rem;
  overflow:hidden; background:var(--kw-navy);
}
.kw-video__poster{ width:100%; height:100%; object-fit:cover; opacity:.52; }
.kw-video__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; text-align:center;
}
.kw-video__icon{
  width:7.2rem; height:7.2rem; margin-bottom:2.4rem;
  border:1px solid rgba(255,255,255,.7); border-radius:50%;
  position:relative;
}
/* 中央に三角（再生マーク） */
.kw-video__icon:after{
  position:absolute; top:50%; left:50%; content:"";
  transform:translate(-42%,-50%);
  border-style:solid; border-width:.9rem 0 .9rem 1.5rem;
  border-color:transparent transparent transparent #fff;
}
.kw-video__label{
  font-family:var(--font-family-eng); font-size:1.4rem; letter-spacing:.24em; text-transform:uppercase;
}
.kw-video__note{ margin-top:1.2rem; font-size:1.15rem; letter-spacing:.08em; opacity:.72; }

/* ---- 本文ブロック（メニューの kw-item を流用。写真は正方形） ---- */
.kw-concept .kw-item__media{ flex-basis:38%; max-width:38%; aspect-ratio:1/1; }
.kw-item__en{
  font-family:var(--font-family-eng); font-size:1.2rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-item__en + .kw-item__name{ margin-top:1.2rem; }
.kw-concept .kw-item__desc + .kw-item__desc{ margin-top:1.6rem; }
.kw-concept .kw-lead-row__body .c-text[data-font="serif"]{
  font-size:2.2rem; line-height:1.9; letter-spacing:.1em; color:var(--kw-navy);
}

/* ---- カテゴリ導線を4枚並べるとき ---- */
.kw-other__list[data-cols="4"]{ grid-template-columns:repeat(4,1fr); }

/* ============================================================
   設備・機器／店舗情報・アクセス（2026.09.18 追加）
   ============================================================ */

/* ---- 未確定項目のマーク（正式な情報が届いたら外す） ---- */
.kw-tbd{
  display:inline-flex; align-items:baseline; gap:.7em; padding:.15em .8em;
  background:rgba(184,154,91,.12); border-bottom:1px dashed rgba(168,129,63,.65);
}
.kw-tbd:after{
  content:"仮"; font-size:.78em; letter-spacing:.1em; color:var(--kw-gold-3); opacity:.9;
}

/* ---- その機器を使うメニュー ---- */
.kw-use{ margin-top:2.8rem; }
.kw-use__heading{
  margin-bottom:1.2rem; font-family:var(--font-family-eng); font-size:1.15rem;
  letter-spacing:.18em; color:var(--kw-navy-3);
}
.kw-use__list{ display:flex; flex-wrap:wrap; gap:.8rem; }
.kw-use__item{
  padding:.5em 1.1em; font-size:1.2rem; line-height:1.6; letter-spacing:.04em;
  color:var(--kw-navy); background:var(--kw-paper-2);
  border:1px solid var(--kw-line); border-radius:2px;
  transition:color .4s, background .4s, border-color .4s;
}
.kw-use__item:hover{ color:#fff; background:var(--kw-navy); border-color:var(--kw-navy); }

/* ---- 大きな写真 ---- */
.kw-hero{ aspect-ratio:16/9; margin-bottom:6.4rem; overflow:hidden; }
.kw-hero[data-type="wide"]{ aspect-ratio:64/21; margin:9.6rem 0 0; }
.kw-hero img{ width:100%; height:100%; object-fit:cover; }

/* ---- 店舗情報の表（ラベルを広めに） ---- */
.kw-info .kw-spec{ margin-top:0; }
.kw-info .kw-spec__label{ flex-basis:15rem; }

/* ---- アクセス経路 ---- */
.kw-route{ display:grid; grid-template-columns:repeat(3,1fr); gap:3.2rem; margin-bottom:4.8rem; }
.kw-route__item{ padding-top:2rem; border-top:1px solid var(--kw-navy); }
.kw-route__en{
  font-family:var(--font-family-eng); font-size:1.15rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-route__ja{
  margin-top:.8rem; font-family:var(--font-family-serif); font-size:1.6rem;
  font-weight:500; letter-spacing:.08em; color:var(--kw-navy);
}
.kw-route__desc{ margin-top:1.2rem; font-size:1.3rem; line-height:1.9; letter-spacing:.04em; }

/* ---- 地図（住所確定までのプレースホルダー） ---- */
.kw-map{
  aspect-ratio:16/7; margin-bottom:4.8rem;
  background:var(--kw-paper-2); border:1px solid var(--kw-line);
}
.kw-map__inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; text-align:center;
}
.kw-map__label{
  font-family:var(--font-family-eng); font-size:1.4rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--kw-navy-3);
}
.kw-map__note{ margin-top:1rem; font-size:1.15rem; letter-spacing:.06em; opacity:.6; }
/* Googleマップ埋め込み: 枠いっぱいに表示 */
.kw-map__inner > span:not(.kw-map__label){ display:block; flex:1 1 auto; width:100%; min-height:0; }
.kw-map__inner iframe{ display:block; width:100%; height:100%; border:0; }
.kw-map:has(iframe) .kw-map__label{ display:none; }

@media screen and (max-width:1024px){
  .kw-hero{ margin-bottom:4.8rem; }
  .kw-hero[data-type="wide"]{ margin-top:7.2rem; }
  .kw-route{ gap:2.4rem; }
  .kw-info .kw-spec__label{ flex-basis:12rem; }
}
@media screen and (max-width:767px){
  .kw-hero{ aspect-ratio:4/3; margin-bottom:4rem; }
  .kw-hero[data-type="wide"]{ aspect-ratio:3/2; margin-top:5.6rem; }
  .kw-route{ grid-template-columns:1fr; gap:2.4rem; margin-bottom:4rem; }
  .kw-map{ aspect-ratio:4/3; margin-bottom:4rem; }
  .kw-info .kw-spec__label{ flex-basis:auto; }
  .kw-use__item{ font-size:1.15rem; }
}

@media screen and (max-width:1024px){
  .kw-video{ margin-bottom:6.4rem; }
  .kw-video__icon{ width:6rem; height:6rem; margin-bottom:1.6rem; }
  .kw-concept .kw-item__media{ flex-basis:36%; max-width:36%; }
  .kw-other__list[data-cols="4"]{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:767px){
  .kw-video{ aspect-ratio:4/3; margin-bottom:4.8rem; }
  .kw-video__icon{ width:5rem; height:5rem; }
  .kw-video__label{ font-size:1.2rem; }
  .kw-video__note{ font-size:1.05rem; padding:0 1.6rem; }
  .kw-concept .kw-item__media{ max-width:100%; }
  .kw-concept .kw-lead-row__body .c-text[data-font="serif"]{ font-size:1.8rem; }
  .kw-other__list[data-cols="4"]{ grid-template-columns:1fr; }
}

@media screen and (max-width:1024px){
  .kw-item{ gap:4rem; padding-bottom:5.6rem; margin-bottom:5.6rem; }
  .kw-item__media{ flex-basis:38%; max-width:38%; }
  .kw-other{ padding-top:7.2rem; }
  .kw-back{ padding-top:5.6rem; }
}
@media screen and (max-width:767px){
  .kw-item,
  .kw-item:nth-of-type(even){ display:block; padding-bottom:4.8rem; margin-bottom:4.8rem; }
  .kw-item__media{ max-width:100%; aspect-ratio:4/3; }
  .kw-item__body{ margin-top:2.4rem; }
  .kw-item__name{ font-size:1.9rem; }
  .kw-spec__label{ flex-basis:8rem; font-size:1.1rem; }
  .kw-spec__price{ font-size:1.8rem; }
  .kw-item__cta .c-button-rect{ min-width:0; width:100%; }
  .kw-other__list{ grid-template-columns:1fr; gap:2.4rem; }
  .kw-other__heading{ display:block; }
  .kw-other__heading-ja{ display:block; margin-top:.4rem; font-size:1.8rem; }
}

/* ============================================================
   2026.09.25 修正分
   ============================================================ */

/* ---- 予約バナー（電話／LINE／WEB）：上段 2 つ、下段に WEB 予約を全幅で ---- */
.kw-rsv{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.6rem; max-width:96rem; margin:0 auto; }
.kw-rsv__btn{ display:flex; align-items:center; justify-content:center; gap:2.4rem; min-height:10rem; padding:2rem 2.4rem;
  font-family:var(--font-family-serif); font-size:2.2rem; letter-spacing:.08em; line-height:1.3;
  color:#fff; background:var(--kw-navy); transition:background-color .3s; }
.kw-rsv__btn[data-type="web"]{ grid-column:1 / -1; font-size:2.6rem; }
.kw-rsv__btn,.kw-rsv__btn:hover{ color:#fff; }
@media (hover:hover) and (pointer:fine){
  .kw-rsv__btn:hover{ background:var(--kw-navy-2); }
}
.kw-rsv__icon{ flex-shrink:0; width:4.4rem; height:4.4rem; color:#fff; }
.kw-rsv__btn[data-type="line"] .kw-rsv__icon{ width:5.2rem; height:5.2rem; }
.kw-rsv__btn[data-type="web"] .kw-rsv__icon{ width:5.6rem; height:5.6rem; }
.kw-rsv__label{ white-space:nowrap; }
/* 白背景のセクションに置く場合の外枠 */
.kw-rsv-section{ padding:6.4rem 0; }
.kw-rsv-section__heading{ margin-bottom:2.4rem; text-align:center; font-family:var(--font-family-eng);
  font-size:2.4rem; letter-spacing:.12em; color:var(--kw-navy); }
.kw-rsv-section__heading span{ display:block; margin-top:.4rem; font-family:var(--font-family-serif); font-size:1.3rem; letter-spacing:.1em; opacity:.7; }
/* 写真背景の RESERVATION 帯の中では、背景と分けるため細い白枠をつける */
.c-reservation .kw-rsv{ margin-top:3.2rem; }
.c-reservation .kw-rsv__btn{ border:1px solid rgba(255,255,255,.35); }
/* 本文中（メニュー／店舗情報）に置く場合 */
.l-content-body .kw-rsv{ margin-top:4rem; }
@media screen and (max-width:767px){
  .kw-rsv{ gap:1rem; }
  .kw-rsv__btn{ gap:1rem; min-height:7.2rem; padding:1.4rem 1rem; font-size:1.6rem; letter-spacing:.04em; }
  .kw-rsv__btn[data-type="web"]{ font-size:1.9rem; gap:1.6rem; }
  .kw-rsv__icon{ width:3rem; height:3rem; }
  .kw-rsv__btn[data-type="line"] .kw-rsv__icon{ width:3.4rem; height:3.4rem; }
  .kw-rsv__btn[data-type="web"] .kw-rsv__icon{ width:4rem; height:4rem; }
  .kw-rsv-section{ padding:4.8rem 0; }
}

/* ---- メニューページ：PC で左側に出ていたサイドメニュー欄を削除し、本文を全幅に ----
   タブレット・スマホ（1024px 以下）ではサイド欄は本文の上に横並びで出るため従来どおり残す */
@media screen and (min-width:1025px){
  .l-content-body__side{ display:none; }
  .l-content-body__main{ width:100%; }
}

/* ---- KV 下部のロゴ（画像） ---- */
/* 元のテキストロゴと同じく、コンテナ幅いっぱいに横一列で表示 */
.p-top-kv__logo-img{ display:block; width:100%; height:auto; }
/* 右下の「ご予約」フローティングボタンに隠れないよう、ボタンの上に持ち上げる */
.p-top-kv__bottom{ bottom:7.2rem; }
@media screen and (max-width:767px){
  .p-top-kv__bottom{ bottom:6.4rem; }
}

/* ---- KV 実写（スマホ）：写真ごとに被写体が収まる位置へ寄せる ----
   縦長画面では元画像の横幅の 3 割前後しか見えないため、1 枚ずつ指定する */
@media screen and (max-width:767px){
  .p-top-kv__slider-item:nth-child(1) .p-top-kv__slider-image img{ object-position:27% center; }  /* イメージ写真：女性の顔 */
  .p-top-kv__slider-item:nth-child(2) .p-top-kv__slider-image img{ object-position:50% center; }  /* 美容鍼：顔と鍼 */
  .p-top-kv__slider-item:nth-child(3) .p-top-kv__slider-image img{ object-position:43% center; }  /* フェイシャル：顔と手 */
  .p-top-kv__slider-item:nth-child(4) .p-top-kv__slider-image img{ object-position:46% center; }  /* オイルマッサージ：手元 */
  .p-top-kv__slider-item:nth-child(5) .p-top-kv__slider-image img{ object-position:64% center; }  /* 店舗入口：KAWARU ロゴ */
}

/* ---- コンセプト：写真なしのテキスト表示（KV・メニューとの写真の重複を避け、SP のスクロール量を短縮） ---- */
.kw-concept-text .p-top-restaurant__col-body{ flex-basis:100%; max-width:80rem; margin:0; }
.kw-concept-text .p-top-restaurant__main-heading{ margin-top:0; }
.kw-concept-text .p-top-restaurant__list-item-body{ height:100%; padding-top:2.4rem; border-top:1px solid var(--kw-navy); }
.kw-concept-text .p-top-restaurant__list-item-link{ display:block; height:100%; }
@media screen and (max-width:767px){
  .kw-concept-text .p-top-restaurant__col-body{ margin-top:0; }
  .kw-concept-text .p-top-restaurant__list{ margin-top:4rem; row-gap:3.2rem; }
}

/* ---- KV 見出し（スマホ）：「。」だけ次行に落ちないよう行内で改行させない ----
   2 行目「身体の不調も同時に。」は 10 文字 × 字間 0.3em ≒ 13em 必要なため、狭い画面では文字サイズを画面幅に合わせて縮める */
@media screen and (max-width:767px){
  .p-top-kv__heading{ white-space:nowrap; font-size:min(2.4rem, calc((100vw - 7rem) / 13)); }
}


/* ---- KV 見出し・説明文（スマホ）：説明文を 1.2rem に拡大し、1 行に入る文字数を増やして折り返しの違和感を減らす ----
   文字ブロック自体の左右余白（1.5rem）をなくし、画面端の余白はコンテナの余白のみとする */
@media screen and (max-width:767px){
  .p-top-kv__content-box{ padding-left:0; padding-right:0; }
  .p-top-kv__text{ font-size:1.2rem; }
}

/* ============================================================
   お問い合わせ・ご予約（MW WP Form の状態クラスで確認画面を切り替え）
   ============================================================ */
.p-contact .c-form{ margin-top:4rem; }
.p-contact .c-form__header{ display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:4rem; }
.p-contact .c-form__footer{ margin-top:5.6rem; }
.p-contact .c-form-button{ display:flex; gap:2rem; justify-content:center; }
.p-contact .c-form-button__col{ width:32rem; max-width:100%; }
.p-contact .c-form-button__item{ background:var(--kw-navy); transition:background-color .4s; }
@media (hover:hover) and (pointer:fine){
  .p-contact .c-form-button__item:hover{ background:var(--kw-navy-3); }
}
.p-contact .c-text a{ text-decoration:underline; }
.p-contact .c-text + .kw-ref{ margin-top:1.2rem; }
/* 確認画面：入力値は背景つきで表示 */
.mw_wp_form_confirm .c-form-input,
.mw_wp_form_confirm .c-form-textarea{ padding:1.2rem 2.4rem; background:var(--color-bg-light-gray); }
.mw_wp_form_confirm .c-form-button__item[value="back"]{ color:var(--kw-navy); background:transparent; border:1px solid var(--kw-navy); }
/* 入力欄の幅（kawaru.shop/reservation に合わせ、PC はご住所・メールアドレス以外を短く） */
@media screen and (min-width:768px){
  .p-contact .c-form-input input:not([name="addr"]):not([name="mail"]){ width:50%; }
}
@media screen and (max-width:767px){
  .p-contact .c-form__header{ display:block; }
  .p-contact .c-form__header-note{ display:block; margin-top:1.6rem; }
  .p-contact .c-form-button{ flex-direction:column; align-items:stretch; }
  .p-contact .c-form-button__col{ width:100%; }
}

/* ============================================================
   お知らせ・個人情報保護方針
   ============================================================ */
.p-privacy .p-privacy__block + .p-privacy__block{ margin-top:4rem; }
.p-privacy .kw-sub-head{ margin-top:0; margin-bottom:1.6rem; }
.p-privacy .kw-infobox__list{ margin-top:1.6rem; }
.p-privacy .kw-ref{ margin-top:5.6rem; text-align:right; }
.kw-news-body .p-news__footer{ margin-top:5.6rem; }
.kw-news-body .p-news-detail__footer{ margin-top:8rem; display:flex; justify-content:center; }
.kw-news-body .p-news-detail__body .kw-hero{ margin-bottom:4rem; }
/* お知らせはカテゴリーのサイドメニューを PC でも表示（メニューページ用の非表示ルールを打ち消す）
   ※ body の class は app.js が書き換えるため、本文側の .kw-news-body で指定する */
@media screen and (min-width:1025px){
  .kw-news-body .l-content-body__side{ display:block; }
  .kw-news-body .l-content-body__main{ width:75%; }
}

/* お知らせ：アイキャッチ未設定時のロゴ表示 */
.kw-noimg{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; background:var(--kw-paper-2);
  transition:transform 2s cubic-bezier(0.33,1,0.68,1);
}
a:hover .kw-noimg{ transform:scale(1.08); }
.kw-noimg__logo{ width:72%; max-width:36rem; aspect-ratio:200/17; fill:var(--kw-navy); }

/* TOP ACCESS: 店舗情報テキストの右余白 */
@media screen and (min-width:768px){
  .p-top-access__text{ margin-right:50px; }
}

/* スマホでは画面下固定の「ご予約」ボタンを非表示 */
@media screen and (max-width:767px){
  .c-floating-reservation{ display:none; }
}

/* TOP NEWS：先頭記事（縦型）のサムネイルが大きくなりすぎないよう上限を設定 */
.p-top-news [data-type=vertical] .p-top-news__list-item-image{ max-width:40rem; }
@media screen and (max-width:767px){
  .p-top-news [data-type=vertical] .p-top-news__list-item-image{ max-width:none; }
}