/* lt-mood.css v1  全体の雰囲気（#518）
   管理画面「見た目の調整 → 全体の雰囲気」で選んだ型を html[data-lt-mood] に入れる。
   square 四角（標準）/ round 丸 / line 線だけ / wa 和。「今までの形（classic）」のときはこのファイルを読まない。

   決まる順：細かい項目（data-lt-radius / shadow / font / btn / line / cal）→ 全体の雰囲気 → 四角。
   細かい項目の値は include/_headertop_pb.php が型の既定値で埋めるので、ここに来る時点で全部そろっている。
   角の大きさ（--lt-r-card / --lt-r-img / --lt-btn-radius）と線の太さ（--lt-line-w）は lt-style-adjust.css が決める。
   このファイルは、その値を「ブロック以外の部品」（予約・会員・ログイン・マイページ・一覧・口コミ・オプション）にも当てる。
   書体は端末のものだけ（Web フォントは読まない）。影は使わない。 */

/* ---- 全ページ共通の値 ---- */
html[data-lt-mood] {
  --lt-m-accent: var(--lt-tertiary-bg, #333);
  --lt-m-on-accent: var(--lt-tertiary-color, #fff);
  --lt-m-ink: var(--lt-body-color, #222);
  --lt-m-line: color-mix(in srgb, var(--lt-m-ink) 18%, transparent);      /* 細い罫線 */
  --lt-m-line-strong: color-mix(in srgb, var(--lt-m-ink) 70%, transparent);
  --lt-m-surface: transparent;                                              /* うすい色の面（丸だけ） */
  --lt-m-surface-border: var(--lt-m-line);
  --lt-r-input: 0px;
  --lt-m-btn-fill: var(--lt-m-accent);
  --lt-m-btn-ink: var(--lt-m-on-accent);
  --lt-m-btn-border: var(--lt-m-accent);
  --lt-m-head-font: inherit;
  --lt-m-head-weight: 700;
  --lt-m-head-spacing: .04em;
  --lt-m-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "游明朝", "MS PMincho", serif;
  --lt-m-rounded: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
}
html[data-lt-mood="round"] {
  --lt-m-surface: color-mix(in srgb, var(--lt-m-accent) 7%, var(--lt-body-bg, #fff));
  --lt-m-surface-border: transparent;
  --lt-m-line: color-mix(in srgb, var(--lt-m-ink) 10%, transparent);
  --lt-r-input: 12px;
}
html[data-lt-mood="line"] {
  --lt-m-line: color-mix(in srgb, var(--lt-m-ink) 14%, transparent);
  --lt-m-head-weight: 500;
  --lt-m-head-spacing: .08em;
}
html[data-lt-mood="wa"] {
  --lt-m-head-font: var(--lt-m-mincho);
  --lt-m-head-weight: 600;
  --lt-m-head-spacing: .12em;
}
/* 枠線だけのボタン（線だけ・和の既定。細かい項目で「四角の枠線だけ」を選んだときも） */
html[data-lt-btn="outline"] {
  --lt-m-btn-fill: transparent;
  --lt-m-btn-ink: var(--lt-m-accent);
  --lt-m-btn-border: var(--lt-m-accent);
}

/* ---- 書体：端末の書体だけ。lt-style-adjust.css の Web フォント名より先に端末の書体を使う ---- */
html[data-lt-mood][data-lt-font="mincho"] .pblk-info > hgroup > h2,
html[data-lt-mood][data-lt-font="mincho"] .pblk-info > hgroup > h3,
html[data-lt-mood][data-lt-font="mincho"] .pblk-title,
html[data-lt-mood][data-lt-font="mincho"] .lt-slide-title,
html[data-lt-mood][data-lt-font="mincho"] .lt-split-title,
html[data-lt-mood][data-lt-font="mincho"] .dl-list-title,
html[data-lt-mood][data-lt-font="mincho"] h1,
html[data-lt-mood][data-lt-font="mincho"] #main h2,
html[data-lt-mood][data-lt-font="mincho"] #main h3,
html[data-lt-mood][data-lt-font="mincho"] .ttl_specs01,
html[data-lt-mood][data-lt-font="mincho"] .ttl_specs02 { font-family: var(--lt-m-mincho) !important; font-weight: 600; letter-spacing: .1em; }
html[data-lt-mood][data-lt-font="rounded"] .pblk-info > hgroup > h2,
html[data-lt-mood][data-lt-font="rounded"] .pblk-info > hgroup > h3,
html[data-lt-mood][data-lt-font="rounded"] .pblk-title,
html[data-lt-mood][data-lt-font="rounded"] .lt-slide-title,
html[data-lt-mood][data-lt-font="rounded"] .lt-split-title,
html[data-lt-mood][data-lt-font="rounded"] .dl-list-title,
html[data-lt-mood][data-lt-font="rounded"] h1,
html[data-lt-mood][data-lt-font="rounded"] #main h2,
html[data-lt-mood][data-lt-font="rounded"] #main h3 { font-family: var(--lt-m-rounded) !important; font-weight: 700; }
/* 本文の書体はテーマのまま（端末の書体で置き換えると、事業所の見た目が大きく変わるため） */
html[data-lt-mood="line"] #main h1, html[data-lt-mood="line"] #main h2 { font-weight: var(--lt-m-head-weight); letter-spacing: var(--lt-m-head-spacing); }

/* ---- ボタン：予約・会員・ログイン・マイページ・一覧の古いボタンも、同じ形・同じ色に ----
   .btn_specs02 ふつう / .btn_specs03 確定（#dd5555 の直書きをやめ、テーマの色に）/ .nextBtn / .reserveBtn / .side-tell / .lt-btn
   .loyRec-add オプションのおすすめの「追加する」 / .lc-week-btn 週の表 / .lkm-ft a 口コミの窓 / .btn-register ブログの会員限定 */
html[data-lt-mood] .btn_specs02,
html[data-lt-mood] .btn_specs03,
html[data-lt-mood] .btn_specs02_,
html[data-lt-mood] .btn_specs03_,
html[data-lt-mood] .nextBtn,
html[data-lt-mood] .reserveBtn a,
html[data-lt-mood] .side-tell a,
html[data-lt-mood] .lt-btn,
html[data-lt-mood] .lt-btn-r,
html[data-lt-mood] .loyRec-add,
html[data-lt-mood] .lc-week-btn,
html[data-lt-mood] .lc-btn,
html[data-lt-mood] .lkm-ft a,
html[data-lt-mood] .btn-register,
html[data-lt-mood] .btn-print,
html[data-lt-mood] .btn-calendar-item,
html[data-lt-mood] .pagelink .highlight a,
html[data-lt-mood] .info-cta,
html[data-lt-mood] .wl-bands label,
html[data-lt-mood] .btnBox2 a,
html[data-lt-mood] #enableNotify,
html[data-lt-mood] #dismissNotify,
html[data-lt-mood] .menu .menuList01 .btn_specs02,
html[data-lt-mood] .staff .staffList li .reserveBtn a,
html[data-lt-mood] #footer .contR .btn_specs02,
html[data-lt-mood] #main input[type="submit"],
html[data-lt-mood] #main button[type="submit"] { border-radius: var(--lt-btn-radius, 0px) !important; box-shadow: none !important; }

html[data-lt-mood] .btn_specs02,
html[data-lt-mood] .btn_specs03,
html[data-lt-mood] .btn_specs02_,
html[data-lt-mood] .btn_specs03_,
html[data-lt-mood] .nextBtn,
html[data-lt-mood] .reserveBtn a,
html[data-lt-mood] .side-tell a,
html[data-lt-mood] .lt-btn,
html[data-lt-mood] .lt-btn-r,
html[data-lt-mood] .btnBox2 a,
html[data-lt-mood] .pagelink .highlight a,
html[data-lt-mood] .menu .menuList01 .btn_specs02,
html[data-lt-mood] .staff .staffList li .reserveBtn a,
html[data-lt-mood] .lkm-ft a,
html[data-lt-mood] .btn-register {
  /* 色はブロックごとのボタンの色（濃い帯の上は白など）をそのまま使う。形だけを型で決める */
  background: var(--lt-btn-bg, var(--lt-m-accent)) !important;
  color: var(--lt-btn-color, var(--lt-m-on-accent)) !important;
  border: 2px solid var(--lt-btn-bg, var(--lt-m-accent)) !important;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background .15s, color .15s;
}
/* 枠線だけ（線だけ・和）：塗らずに、ボタンの色で文字と枠を描く。押すと塗る */
html[data-lt-mood][data-lt-btn="outline"] :is(.btn_specs02, .btn_specs03, .btn_specs02_, .btn_specs03_, .nextBtn, .reserveBtn a, .side-tell a, .lt-btn, .lt-btn-r, .btnBox2 a, .pagelink .highlight a, .lkm-ft a, .btn-register) {
  background: transparent !important; color: var(--lt-btn-bg, var(--lt-m-accent)) !important; border-color: currentColor !important;
}
html[data-lt-mood][data-lt-btn="outline"] :is(.btn_specs02, .btn_specs03, .nextBtn, .reserveBtn a, .lt-btn, .btnBox2 a):hover {
  background: var(--lt-btn-bg, var(--lt-m-accent)) !important; color: var(--lt-btn-color, var(--lt-m-on-accent)) !important; border-color: var(--lt-btn-bg, var(--lt-m-accent)) !important;
}
html[data-lt-mood] .btn_specs02:not([disabled]):hover, html[data-lt-mood] .btn_specs03:not([disabled]):hover,
html[data-lt-mood] .nextBtn:not([disabled]):hover { opacity: .85; }
/* 取り消し・危険なものは赤のまま */
html[data-lt-mood] .lt-btn-danger,
html[data-lt-mood] .btn_specs03.cancel,
html[data-lt-mood] .mypage .cancel .btn_specs02 { background: var(--lt-red, #dc3545) !important; color: #fff !important; border-color: var(--lt-red, #dc3545) !important; }
/* 2番目のボタン（線だけ）：ログインの「新規登録」、オプションの「詳しく見る」 */
html[data-lt-mood] .login .btn_specs02.member,
html[data-lt-mood] .lt-btn-outline,
html[data-lt-mood] .loyRec-links a.loyRec-more { background: transparent !important; color: var(--lt-m-ink) !important; border: 1px solid var(--lt-m-line-strong) !important; border-radius: var(--lt-btn-radius, 0px) !important; }
/* オプションのおすすめの「追加する」：currentColor の塗りをテーマの色に */
html[data-lt-mood] .loyRec-add { background: var(--lt-btn-bg, var(--lt-m-accent)) !important; border: 2px solid var(--lt-btn-bg, var(--lt-m-accent)); }
html[data-lt-mood] .loyRec-add span { color: var(--lt-btn-color, var(--lt-m-on-accent)); }
html[data-lt-mood] .loyRec-item.is-added .loyRec-add { background: transparent !important; }
html[data-lt-mood] .loyRec-item.is-added .loyRec-add span { color: var(--lt-m-ink); }
html[data-lt-mood] .loyRec-item { border-bottom-color: var(--lt-m-line); }
html[data-lt-mood] .loyRec-head { border-bottom-color: var(--lt-m-line-strong); }
html[data-lt-mood] .loyRec-ph { border-radius: var(--lt-r-img, 0px); }
html[data-lt-mood] .loyRec-detail { border-color: var(--lt-m-line); border-radius: var(--lt-r-card, 0px); }

/* ---- 入力欄：角と線をそろえる ---- */
html[data-lt-mood] #main input[type="text"],
html[data-lt-mood] #main input[type="tel"],
html[data-lt-mood] #main input[type="tell"],
html[data-lt-mood] #main input[type="email"],
html[data-lt-mood] #main input[type="password"],
html[data-lt-mood] #main input[type="number"],
html[data-lt-mood] #main input[type="search"],
html[data-lt-mood] #main input[type="date"],
html[data-lt-mood] #main select,
html[data-lt-mood] #main textarea,
html[data-lt-mood] .login .loginArea .contL input[type="email"],
html[data-lt-mood] .login .loginArea .contL input[type="password"],
html[data-lt-mood] #footer .contR textarea {
  border: 1px solid var(--lt-m-line-strong) !important;
  border-radius: var(--lt-r-input) !important;
  background: var(--lt-body-bg, #fff);
  box-shadow: none !important;
  font-size: 16px;
}
html[data-lt-mood="round"] #main input[type="text"],
html[data-lt-mood="round"] #main input[type="tel"],
html[data-lt-mood="round"] #main input[type="email"],
html[data-lt-mood="round"] #main input[type="password"],
html[data-lt-mood="round"] #main select,
html[data-lt-mood="round"] #main textarea { background: var(--lt-m-surface); border-color: transparent !important; }
html[data-lt-mood] #main input:focus, html[data-lt-mood] #main select:focus, html[data-lt-mood] #main textarea:focus { outline: 2px solid var(--lt-m-accent); outline-offset: 0; border-color: var(--lt-m-accent) !important; }

/* ---- カード・面・区切り：ブロック以外のもの ----
   角は --lt-r-card、影はなし。丸のときはうすい色の面、ほかは線で区切る */
html[data-lt-mood] .calendarArea01,
html[data-lt-mood] #main .sectionArea01 #daySchedule,
html[data-lt-mood] .details-content,
html[data-lt-mood] .optionText,
html[data-lt-mood] .optionText .popup,
html[data-lt-mood] .required_option,
html[data-lt-mood] .contact-info:not([class*="contact-info--"]),
html[data-lt-mood] #notificationPrompt,
html[data-lt-mood] .loyPushCard,
html[data-lt-mood] .lkc .lkc-item,
html[data-lt-mood] .lkm-sum,
html[data-lt-mood] .lrb .lrb-img,
html[data-lt-mood] .wl-done,
html[data-lt-mood] .calendar-add-section,
html[data-lt-mood] .member-lock-box,
html[data-lt-mood] .loy-sender .card,
html[data-lt-mood] .lp-seo-cta,
html[data-lt-mood] .step-circle { border-radius: var(--lt-r-card, 0px) !important; box-shadow: none !important; }
html[data-lt-mood] .lrb .lrb-cat,
html[data-lt-mood] .lkm-bar span:nth-child(2) { border-radius: var(--lt-btn-radius, 0px) !important; }
html[data-lt-mood] .lkc .lkc-item,
html[data-lt-mood] .contact-info:not([class*="contact-info--"]),
html[data-lt-mood] .calendar-add-section,
html[data-lt-mood] .member-lock-box,
html[data-lt-mood] .loyPushCard { background: var(--lt-m-surface) !important; border: 1px solid var(--lt-m-surface-border) !important; }
html[data-lt-mood] .reservation1 .hbar { box-shadow: none !important; border-top: 1px solid var(--lt-m-line); }
html[data-lt-mood] .step.active .step-circle { box-shadow: none !important; }
html[data-lt-mood] .step-circle { border-radius: 50% !important; }
html[data-lt-mood="square"] .step-circle, html[data-lt-mood="line"] .step-circle, html[data-lt-mood="wa"] .step-circle { border-radius: 0 !important; }
html[data-lt-mood] .splide .splide__pagination__page { border-radius: var(--lt-btn-radius, 0px); }

/* 表・区切り線：罫線は細く、色は薄く */
html[data-lt-mood] table.type01 th, html[data-lt-mood] table.type01 td,
html[data-lt-mood] .confirmArea01 th, html[data-lt-mood] .confirmArea01 td,
html[data-lt-mood] .formArea01 th, html[data-lt-mood] .formArea01 td,
html[data-lt-mood] .mypage table th, html[data-lt-mood] .mypage table td { border-color: var(--lt-m-line) !important; border-width: var(--lt-line-w-m, 1px) 0 !important; }
html[data-lt-mood="wa"] table.type01 th, html[data-lt-mood="wa"] .confirmArea01 th, html[data-lt-mood="wa"] .formArea01 th { background: transparent !important; }
html[data-lt-mood="round"] table.type01 th, html[data-lt-mood="round"] .confirmArea01 th, html[data-lt-mood="round"] .formArea01 th { background: var(--lt-m-surface) !important; }

/* 和：見出しは明朝、横線だけ */
html[data-lt-mood="wa"] #main h1, html[data-lt-mood="wa"] #main h2, html[data-lt-mood="wa"] #main h3,
html[data-lt-mood="wa"] .ttl_specs01, html[data-lt-mood="wa"] .ttl_specs02 { font-family: var(--lt-m-mincho) !important; font-weight: var(--lt-m-head-weight); letter-spacing: var(--lt-m-head-spacing); }
html[data-lt-mood="wa"] .ttl_specs01, html[data-lt-mood="wa"] .ttl_specs02 { background: transparent !important; color: var(--lt-m-ink) !important; border-top: 1px solid var(--lt-m-ink); border-bottom: 1px solid var(--lt-m-ink); border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; padding: 10px 0; }

/* 丸：バッジや小さなラベルも丸く、面はうすい色 */
html[data-lt-mood="round"] .lkc .lkc-item { border: 0 !important; }
html[data-lt-mood="round"] .loyRec-item { border-bottom: 0; background: var(--lt-m-surface); border-radius: var(--lt-r-card); padding: 16px; margin-bottom: 10px; }

/* ヘッダー（lt-header.css）：丸のときは、スマホのタイル・上のバーのボタン・下の固定ボタン・PC の電話予約ボタンも丸く。ほかの型は四角のまま */
html[data-lt-mood="round"] .lt-spbar-act,
html[data-lt-mood="round"] .lt-hd-btn,
html[data-lt-mood="round"] .lt-fixbar a,
html[data-lt-mood="round"][data-lt-spmenu="tiles"] #gNavi li._menuTop a,
html[data-lt-mood="round"][data-lt-spmenu="tiles"] #gNavi li._menuTopPhoto a { border-radius: var(--lt-r-card, 12px) !important; }

/* ---- 丸：下層ページの見出し・一覧（四角・線だけ・和は lt-calendar.css の平らな形を使う。丸はここで、うすい色の面と角丸に） ---- */
html[data-lt-mood="round"] body:not(.home) #main .ttl_specs02,
html[data-lt-mood="round"] body:not(.home) #main :is(h2, h3):not([class]) {
  background: var(--lt-m-surface) !important;
  color: var(--lt-m-ink) !important;
  border: 0 !important;
  border-radius: var(--lt-r-card, 16px) !important;
  padding: 12px 18px !important;
  font-weight: 700;
  letter-spacing: .04em;
}
html[data-lt-mood="round"] body:not(.home) #main h3.ttl_specs02 { font-size: 15px !important; padding: 8px 14px !important; border-radius: 999px !important; display: inline-block; }
html[data-lt-mood="round"] body:not(.home) #main .ttl_specs02::before { color: var(--lt-m-accent); }
html[data-lt-mood="round"] body:not(.home) #main .hbar { height: 0 !important; border: 0 !important; }
html[data-lt-mood="round"] body:not(.home) #main :is(.blogList01, .infoList01) :is(li, li > a, .img) { border-radius: var(--lt-r-card, 16px) !important; box-shadow: none !important; overflow: hidden; }
html[data-lt-mood="round"] body:not(.home) #main :is(.blogList01, .infoList01) dt { border-radius: 999px !important; }
html[data-lt-mood="round"] body:not(.home) #main .pager { background: none !important; color: var(--lt-m-ink) !important; }
html[data-lt-mood="round"] body:not(.home) #main .pager :is(a, span, .prev, .next) { border-radius: 999px !important; }
html[data-lt-mood="round"] body:not(.home) #main .reservation-flow .step-circle { border-radius: 50% !important; box-shadow: none !important; }
html[data-lt-mood="round"] #main table.type01, html[data-lt-mood="round"] #main .confirmArea01 table, html[data-lt-mood="round"] .menu .menuList01 table { border-radius: var(--lt-r-card, 16px); overflow: hidden; border-collapse: separate; border-spacing: 0; }
html[data-lt-mood="round"] .menu .menuList01 img, html[data-lt-mood="round"] .staff .staffList img { border-radius: var(--lt-r-img, 16px); }