/* lt-style-adjust.css v2  見た目の調整（#409）
   管理画面「見た目の調整」で選んだ値を html の data 属性に入れ、ここで上書きする。
   属性が無ければ何も変えない（今までの見た目のまま）。
   data-lt-radius: 0 なし / 1 ひかえめ / 2 しっかり
   data-lt-shadow: 0 なし / 1 うっすら / 2 はっきり
   data-lt-font:   mincho 明朝 / rounded 丸ゴシック
   data-lt-btn:    square 四角 / rounded 角丸 / pill 丸型 */

/* ---- 角丸：カード・帯・写真・吹き出し ---- */
html[data-lt-radius] { --lt-r-card: 12px; --lt-r-img: 8px; }
html[data-lt-radius="0"] { --lt-r-card: 0px; --lt-r-img: 0px; }
html[data-lt-radius="1"] { --lt-r-card: 8px;  --lt-r-img: 6px; }
html[data-lt-radius="2"] { --lt-r-card: 24px; --lt-r-img: 16px; }
html[data-lt-radius] .pblk-bs-1 > .pblk-content,
html[data-lt-radius] .pblk-bs-4 > .pblk-content,
html[data-lt-radius] .dl-list-ul.dl-list-card2 > li,
html[data-lt-radius] .dl-list-ul.dl-list-card3 > li,
html[data-lt-radius] .lt-marquee-track > li,
html[data-lt-radius] .splide__slide.card { border-radius: var(--lt-r-card) !important; overflow: hidden; }
html[data-lt-radius] .pblk-bs-2 { border-radius: calc(var(--lt-r-card) * 1.5) !important; }
html[data-lt-radius] .dl-list-step .dl-list-pic,
html[data-lt-radius] .dl-list-pic img,
html[data-lt-radius] .lt-slider--banner .lt-slide,
html[data-lt-radius] .lt-slider--sidepeek .lt-slide,
html[data-lt-radius] .lt-split-media,
html[data-lt-radius] .lt-thumbs .lt-thumb,
html[data-lt-radius] .lt-vmarquee-list > li,
html[data-lt-radius] .lt-compare-frame,
html[data-lt-radius] .lt-marquee .lt-slide,
html[data-lt-radius] .card .photo,
html[data-lt-radius] .card .mphoto,
html[data-lt-radius] .card .bphoto-pb,
html[data-lt-radius] .card .mphoto-pb,
html[data-lt-radius] .pblk-content img.pbimg { border-radius: var(--lt-r-img) !important; overflow: hidden; }

/* ---- 影：カードと写真 ---- */
html[data-lt-shadow="0"] .pblk-bs-1 > .pblk-content,
html[data-lt-shadow="0"] .dl-list-ul.dl-list-card2 > li,
html[data-lt-shadow="0"] .dl-list-ul.dl-list-card3 > li,
html[data-lt-shadow="0"] .lt-slider--banner .lt-slide,
html[data-lt-shadow="0"] .splide__slide.card { box-shadow: none !important; }
html[data-lt-shadow="1"] .pblk-bs-1 > .pblk-content,
html[data-lt-shadow="1"] .dl-list-ul.dl-list-card2 > li,
html[data-lt-shadow="1"] .dl-list-ul.dl-list-card3 > li,
html[data-lt-shadow="1"] .lt-slider--banner .lt-slide,
html[data-lt-shadow="1"] .splide__slide.card { box-shadow: 0 4px 14px rgb(0 0 0 / .07) !important; }
html[data-lt-shadow="2"] .pblk-bs-1 > .pblk-content,
html[data-lt-shadow="2"] .dl-list-ul.dl-list-card2 > li,
html[data-lt-shadow="2"] .dl-list-ul.dl-list-card3 > li,
html[data-lt-shadow="2"] .lt-slider--banner .lt-slide,
html[data-lt-shadow="2"] .splide__slide.card { box-shadow: 0 14px 36px rgb(0 0 0 / .16) !important; }

/* ---- 見出しの書体 ---- */
html[data-lt-font="mincho"] .pblk-info > hgroup > h2,
html[data-lt-font="mincho"] .pblk-info > hgroup > h3,
html[data-lt-font="mincho"] .pblk-title,
html[data-lt-font="mincho"] .lt-slide-title,
html[data-lt-font="mincho"] .lt-split-title,
html[data-lt-font="mincho"] .dl-list-title,
html[data-lt-font="mincho"] h1 { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "游明朝", serif !important; font-weight: 600; letter-spacing: .06em; }
html[data-lt-font="rounded"] .pblk-info > hgroup > h2,
html[data-lt-font="rounded"] .pblk-info > hgroup > h3,
html[data-lt-font="rounded"] .pblk-title,
html[data-lt-font="rounded"] .lt-slide-title,
html[data-lt-font="rounded"] .lt-split-title,
html[data-lt-font="rounded"] .dl-list-title,
html[data-lt-font="rounded"] h1 { font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif !important; font-weight: 700; }

/* ---- ボタンの形 ---- */
html[data-lt-btn] { --lt-btn-radius: 6px; }
html[data-lt-btn="square"]  { --lt-btn-radius: 0px; }
html[data-lt-btn="rounded"] { --lt-btn-radius: 6px; }
html[data-lt-btn="pill"]    { --lt-btn-radius: 999px; }
html[data-lt-btn] .lt-btn,
html[data-lt-btn] .lt-btn-outline,
html[data-lt-btn] .lt-btn-r,
html[data-lt-btn] .lt-slide-btn,
html[data-lt-btn] .pblk a.btn,
html[data-lt-btn] .pblk .btn-r,
html[data-lt-btn] .pblk input[type="submit"],
html[data-lt-btn] .pblk button { border-radius: var(--lt-btn-radius) !important; }

/* ---- カレンダーの見せ方（トップの営業日カレンダーと予約カレンダーの両方）----
   data-lt-cal: modern 白いカードに丸いマス / minimal 線も枠もなし
   マスの中身：数字（テキスト）＋ span.no(休・×) / span.close / span.shiftNon / span.ok > a(○) / span.little > a(△)
   文字の印は消して、マスの色と小さな点で状態を出す。○ のリンクはマス全体に広げる */
html[data-lt-cal] { --lt-cal-accent: var(--lt-tertiary-bg, #333); --lt-cal-on-accent: var(--lt-tertiary-color, #fff); --lt-cal-ink: var(--lt-part-color, #2b2b2b); }
html[data-lt-cal] .calendarArea01 { position: relative; background: var(--lt-part-bg, #fff); color: var(--lt-cal-ink); border: 0; padding: 22px 20px 18px; max-width: 540px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
html[data-lt-cal="modern"] .calendarArea01 { border-radius: var(--lt-r-card, 16px); box-shadow: 0 10px 40px rgb(0 0 0 / .07); }
html[data-lt-cal="minimal"] .calendarArea01 { background: transparent; padding-left: 0; padding-right: 0; }
html[data-lt-cal] .calendarArea01 .title { background: transparent !important; color: rgb(0 0 0 / .45) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .18em; text-align: left; padding: 0 0 6px !important; margin: 0; }
html[data-lt-cal] .calendarArea01 .headLine { display: flex; align-items: center; margin: 0 0 14px; min-height: 36px; }
html[data-lt-cal] .calendarArea01 .headLine .month { flex: 1; text-align: left; font-size: 20px; font-weight: 700; letter-spacing: .04em; margin: 0; line-height: 1.2; }
html[data-lt-cal] .calendarArea01 .headLine .month .design-old { display: none; }
html[data-lt-cal] .calendarArea01 .headLine .prev, html[data-lt-cal] .calendarArea01 .headLine .next,
html[data-lt-cal] .calendarArea01 .headLine .prev2, html[data-lt-cal] .calendarArea01 .headLine .next2 { position: static; margin: 0 0 0 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .12); background: var(--lt-part-bg, #fff); color: var(--lt-cal-ink); text-indent: 0; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
html[data-lt-cal] .calendarArea01 .headLine .prev:hover, html[data-lt-cal] .calendarArea01 .headLine .next:hover,
html[data-lt-cal] .calendarArea01 .headLine .prev2:hover, html[data-lt-cal] .calendarArea01 .headLine .next2:hover { background: var(--lt-cal-accent); color: var(--lt-cal-on-accent); border-color: var(--lt-cal-accent); }
html[data-lt-cal] .calendarArea01 .calendar { background: transparent; border: 0; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
html[data-lt-cal] .calendarArea01 .calendar th { border: 0; background: transparent !important; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: rgb(0 0 0 / .4); padding: 0 0 8px; height: auto; }
html[data-lt-cal] .calendarArea01 .calendar th .design-old { display: none; }
html[data-lt-cal] .calendarArea01 .calendar td { position: relative; border: 0; background: transparent !important; height: 46px; padding: 0; font-size: 15px; font-weight: 500; line-height: 46px; text-align: center; vertical-align: middle; color: var(--lt-cal-ink); border-radius: 12px; transition: background .15s, color .15s; }
html[data-lt-cal="minimal"] .calendarArea01 .calendar td { border-radius: 50%; height: 42px; line-height: 42px; }
html[data-lt-cal] .calendarArea01 .calendar td.nextM { background: transparent !important; }
html[data-lt-cal] .calendarArea01 .calendar td .date-wrapper, html[data-lt-cal] .calendarArea01 .calendar td .date-wrapper > div { display: inline; height: auto !important; }
/* 印は文字ではなく、数字の下の小さな点 */
html[data-lt-cal] .calendarArea01 .calendar td > span, html[data-lt-cal] .calendarArea01 .calendar td .date-wrapper span { position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; font-size: 0; line-height: 0; padding: 0; background: transparent; display: block; }
html[data-lt-cal] .calendarArea01 .calendar .no, html[data-lt-cal] .calendarArea01 .calendar .close, html[data-lt-cal] .calendarArea01 .calendar .shiftNon { top: auto; height: 5px; width: 5px; background: rgb(0 0 0 / .14); color: transparent; }
html[data-lt-cal] .calendarArea01 .calendar td:has(> .no), html[data-lt-cal] .calendarArea01 .calendar td:has(> .close), html[data-lt-cal] .calendarArea01 .calendar td:has(> .shiftNon) { color: rgb(0 0 0 / .3); font-weight: 400; }
/* 空きあり：うすいアクセント色のマス、点はアクセント色、マス全体がリンク */
html[data-lt-cal] .calendarArea01 .calendar .ok { background: var(--lt-cal-accent); }
html[data-lt-cal] .calendarArea01 .calendar .ok a, html[data-lt-cal] .calendarArea01 .calendar .little a { position: absolute; inset: -46px -50vw; font-size: 0; text-decoration: none; }
html[data-lt-cal] .calendarArea01 .calendar td:has(> .ok), html[data-lt-cal] .calendarArea01 .calendar td:has(.date-wrapper .ok) { background: color-mix(in srgb, var(--lt-cal-accent) 10%, transparent) !important; font-weight: 700; overflow: hidden; cursor: pointer; }
html[data-lt-cal] .calendarArea01 .calendar td:has(> .ok):hover, html[data-lt-cal] .calendarArea01 .calendar td:has(.date-wrapper .ok):hover { background: color-mix(in srgb, var(--lt-cal-accent) 22%, transparent) !important; }
/* 残りわずか */
html[data-lt-cal] .calendarArea01 .calendar .little { background: #e8a33d; }
html[data-lt-cal] .calendarArea01 .calendar td:has(> .little) { background: #fff4e3 !important; font-weight: 700; overflow: hidden; cursor: pointer; }
/* 選んだ日 */
html[data-lt-cal] .calendarArea01 .calendar td.active { background: var(--lt-cal-accent) !important; color: var(--lt-cal-on-accent) !important; box-shadow: none; }
html[data-lt-cal] .calendarArea01 .calendar td.active .ok, html[data-lt-cal] .calendarArea01 .calendar td.active .little { background: var(--lt-cal-on-accent); }
/* 凡例 */
html[data-lt-cal] .calendarArea01::after { content: "■ 空きあり　■ 残りわずか　● 休み・受付なし"; display: block; margin-top: 10px; font-size: 11px; color: rgb(0 0 0 / .45); letter-spacing: .04em; text-align: right; }

/* 予約画面（calendar.php）は css/lt-calendar.css（.lc-*）で描く。ここは営業日カレンダーのブロックだけ */

/* ---- 角ばったボタン（v2）：outline 四角の枠線だけ / arrow 四角＋右に矢印 ---- */
html[data-lt-btn="outline"], html[data-lt-btn="arrow"] { --lt-btn-radius: 0px; }
html[data-lt-btn="outline"] .lt-btn, html[data-lt-btn="outline"] .lt-btn-outline, html[data-lt-btn="outline"] .lt-btn-r,
html[data-lt-btn="outline"] .pblk a.btn, html[data-lt-btn="outline"] .pblk .btn-r { background: transparent !important; color: var(--pb-accent, var(--lt-tertiary-bg)) !important; border: 2px solid currentColor !important; box-shadow: none !important; transition: background .15s, color .15s; }
html[data-lt-btn="outline"] .lt-slide-btn { background: transparent !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; }
html[data-lt-btn="outline"] .lt-btn:hover, html[data-lt-btn="outline"] .lt-btn-outline:hover, html[data-lt-btn="outline"] .lt-btn-r:hover,
html[data-lt-btn="outline"] .pblk a.btn:hover, html[data-lt-btn="outline"] .pblk .btn-r:hover { background: var(--pb-accent, var(--lt-tertiary-bg)) !important; color: var(--pb-on-accent, #fff) !important; border-color: var(--pb-accent, var(--lt-tertiary-bg)) !important; }
html[data-lt-btn="outline"] .lt-slide-btn:hover { background: #fff !important; color: #222 !important; }
/* 矢印は文字の → ではなく、細い線の山型にする */
html[data-lt-btn="arrow"] .lt-btn::after, html[data-lt-btn="arrow"] .lt-btn-outline::after, html[data-lt-btn="arrow"] .lt-btn-r::after,
html[data-lt-btn="arrow"] .lt-slide-btn::after, html[data-lt-btn="arrow"] .pblk a.btn::after, html[data-lt-btn="arrow"] .pblk a.btn-r::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); position: relative; top: -2px; transition: transform .2s; }
html[data-lt-btn="arrow"] .lt-btn:hover::after, html[data-lt-btn="arrow"] .lt-btn-outline:hover::after, html[data-lt-btn="arrow"] .lt-btn-r:hover::after,
html[data-lt-btn="arrow"] .lt-slide-btn:hover::after, html[data-lt-btn="arrow"] .pblk a.btn:hover::after, html[data-lt-btn="arrow"] .pblk a.btn-r:hover::after { transform: translateX(4px) rotate(45deg); }

/* 四角・枠線・矢印のボタン：一覧などの下に置いたときの間隔と大きさをそろえる */
html[data-lt-btn="square"] .pblk .pprt:has(.link-list-content), html[data-lt-btn="outline"] .pblk .pprt:has(.link-list-content), html[data-lt-btn="arrow"] .pblk .pprt:has(.link-list-content) { margin-top: 32px; }
html[data-lt-btn="square"] .pblk .link-list-content a.lt-btn, html[data-lt-btn="outline"] .pblk .link-list-content a.lt-btn, html[data-lt-btn="arrow"] .pblk .link-list-content a.lt-btn { max-width: 340px; margin-left: auto; margin-right: auto; padding: 16px 28px; font-size: 15px; letter-spacing: .08em; line-height: 1.4; }

/* 角ばった設定（角丸なし、または四角・枠線・矢印のボタン）のときは、カード型スライダーの矢印も四角い枠に */
html[data-lt-radius="0"] .topslider .splide__arrow, html[data-lt-btn="square"] .topslider .splide__arrow, html[data-lt-btn="outline"] .topslider .splide__arrow, html[data-lt-btn="arrow"] .topslider .splide__arrow { width: 40px; height: 40px; border-radius: 0; background: transparent; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); opacity: 1; color: inherit; transition: background .15s, border-color .15s; }
html[data-lt-radius="0"] .topslider .splide__arrow svg, html[data-lt-btn="square"] .topslider .splide__arrow svg, html[data-lt-btn="outline"] .topslider .splide__arrow svg, html[data-lt-btn="arrow"] .topslider .splide__arrow svg { width: 12px; height: 12px; fill: currentColor; }
html[data-lt-radius="0"] .topslider .splide__arrow:hover:not(:disabled), html[data-lt-btn="square"] .topslider .splide__arrow:hover:not(:disabled), html[data-lt-btn="outline"] .topslider .splide__arrow:hover:not(:disabled), html[data-lt-btn="arrow"] .topslider .splide__arrow:hover:not(:disabled) { background: var(--pb-accent, var(--lt-tertiary-bg)); border-color: var(--pb-accent, var(--lt-tertiary-bg)); color: var(--pb-on-accent, #fff); }

@media screen and (min-width: 768px) {
  html[data-lt-radius="0"] .topslider .splide__arrow--prev, html[data-lt-btn="square"] .topslider .splide__arrow--prev, html[data-lt-btn="outline"] .topslider .splide__arrow--prev, html[data-lt-btn="arrow"] .topslider .splide__arrow--prev { left: -56px; }
  html[data-lt-radius="0"] .topslider .splide__arrow--next, html[data-lt-btn="square"] .topslider .splide__arrow--next, html[data-lt-btn="outline"] .topslider .splide__arrow--next, html[data-lt-btn="arrow"] .topslider .splide__arrow--next { right: -56px; }
}

/* ---- カレンダー「格子」（v2）：営業日カレンダーの旧 HTML（.calendarArea01）用。予約画面・新 HTML は lt-calendar.css の .lc-square ---- */
html[data-lt-cal="square"] .calendarArea01 { border: var(--lt-line-w, 1px) solid rgb(0 0 0 / .14); border-radius: 0; box-shadow: none; }
html[data-lt-cal="square"] .calendarArea01 .headLine .prev, html[data-lt-cal="square"] .calendarArea01 .headLine .next,
html[data-lt-cal="square"] .calendarArea01 .headLine .prev2, html[data-lt-cal="square"] .calendarArea01 .headLine .next2 { border-radius: 0; }
html[data-lt-cal="square"] .calendarArea01 .calendar { border-collapse: collapse; border-spacing: 0; }
html[data-lt-cal="square"] .calendarArea01 .calendar th { border-bottom: 2px solid var(--lt-cal-ink); }
html[data-lt-cal="square"] .calendarArea01 .calendar td { border: var(--lt-line-w, 1px) solid rgb(0 0 0 / .12); border-radius: 0; height: 48px; line-height: 48px; }
html[data-lt-cal="square"] .calendarArea01 .calendar td > span, html[data-lt-cal="square"] .calendarArea01 .calendar td .date-wrapper span { border-radius: 0; }

/* ---- 線の太さ（v3）：data-lt-line = thin 細め / bold 太め。pblk-patterns.css の罫線・区切り線とカレンダーの格子が変数を使う ---- */
html[data-lt-line="thin"] { --lt-line-w: .5px; --lt-line-w-m: 1px; --lt-line-w-b: 2px; --lt-line-w-l: 3px; }
html[data-lt-line="bold"] { --lt-line-w: 2px; --lt-line-w-m: 3px; --lt-line-w-b: 5px; --lt-line-w-l: 8px; }
html[data-lt-line] .qa-item:not(:last-child) { border-bottom-width: var(--lt-line-w, 1px); }
html[data-lt-line] .pblk-hs-1 .pblk-title::after { height: var(--lt-line-w-b, 3px); }
html[data-lt-line] .pblk-hs-2 .pblk-info > hgroup { border-left-width: var(--lt-line-w-l, 5px); }
html[data-lt-line] .pblk-hs-6 .pblk-title::before { height: var(--lt-line-w-l, 5px); }
html[data-lt-line] .pblk-hs-4 .pblk-title::before, html[data-lt-line] .pblk-hs-4 .pblk-title::after { height: var(--lt-line-w, 1px); }

/* ---- よくあるご質問の「＋」：角ばった設定（角丸なし、または四角・枠線・矢印のボタン）のときは四角に ---- */
html[data-lt-radius="0"] .qa-toggle, html[data-lt-btn="square"] .qa-toggle, html[data-lt-btn="outline"] .qa-toggle, html[data-lt-btn="arrow"] .qa-toggle { border-radius: 0; border-width: var(--lt-line-w-m, 2px); }
html[data-lt-radius="0"] .qa-checkbox:checked ~ .qa-question .qa-toggle, html[data-lt-btn="square"] .qa-checkbox:checked ~ .qa-question .qa-toggle, html[data-lt-btn="outline"] .qa-checkbox:checked ~ .qa-question .qa-toggle, html[data-lt-btn="arrow"] .qa-checkbox:checked ~ .qa-question .qa-toggle { background: var(--lt-content-color); }
html[data-lt-radius="0"] .qa-checkbox:checked ~ .qa-question .qa-toggle::before, html[data-lt-btn="square"] .qa-checkbox:checked ~ .qa-question .qa-toggle::before, html[data-lt-btn="outline"] .qa-checkbox:checked ~ .qa-question .qa-toggle::before, html[data-lt-btn="arrow"] .qa-checkbox:checked ~ .qa-question .qa-toggle::before { background: var(--lt-content-bg, #fff); }