/* Pulin-hair time の店の色と、店用に足した部品。site.css の後に読む。
   色は店の写真（生成りの壁・木の床・茶の椅子と鏡の枠・植物）に合わせた温かい白・こげ茶・オリーブ。 */
:root {
  --c-title: #4a4036; --c-text: #595247; --c-sub: #6d655a; --c-border: #c9c1b5;
  --c-base: #f6f3ed; --c-base-2: #eee9df; --c-base-3: #e1dacc; --c-paper: #fffdf8;
  --c-light-title: #4a4036; --c-light-text: #595247; --c-light-border: #c9c1b5;
  --c-light-base: #f6f3ed; --c-light-base-2: #eee9df; --c-light-base-3: #e1dacc;
  --c-dark-title: #f6f3ed; --c-dark-base: #555a4c;
  --c-overlay: rgba(70, 74, 62, .92);
}
/* 色を入れ替える節（ヘッドスパ・メニュー・お約束）が画面の中ほどにあるとき */
:root.is-invert {
  --c-title: #f6f3ed; --c-text: #efeae0; --c-sub: #dad7cc; --c-border: #929788;
  --c-base: #555a4c; --c-base-2: #4e5346; --c-base-3: #464b3f;
}
body { line-break: strict; overflow-wrap: anywhere; }

/* 臨時休業のお知らせの受け皿（サーチサポートの notice.js が使う）。空のときは場所をとらない */
#search-support-notice:empty { display: none; }
[id] { scroll-margin-top: calc(var(--header-h, 6rem) + var(--search-support-notice-height, 0px) + 1rem); }

.pulin-skip { position: absolute; top: 0; left: -9999px; z-index: 100000; padding: .8rem 1.2rem; font-size: 14px; color: var(--c-title); background: var(--c-paper); }
.pulin-skip:focus { top: 1rem; left: 1rem; }

/* 店名の文字のロゴ */
.pulin-wordmark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-en); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; color: var(--c-title); }
@media (max-width: 1000px) { .pulin-wordmark { font-size: 18px; } }
@media (max-width: 680px) { .pulin-wordmark { font-size: 17px; } }

/* 写真 */
.pulin-figure-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-top__salon__splide .splide__slide img { aspect-ratio: 4 / 3; object-fit: cover; }
.b-top__salon__splide .splide__slide img.pulin-portrait-photo { aspect-ratio: 3 / 4; }

/* 英字の見出しの下の日本語 */
.pulin-title-ja { display: block; margin-top: .4em; font-family: var(--font-serif-ja); font-size: 14px; letter-spacing: .12em; line-height: 1.6; color: var(--c-sub); }
.b-common__head .pulin-title-ja { font-size: 15px; }
@media (max-width: 680px) { .pulin-title-ja { font-size: 12px; } }

/* トップの最初の画面の見出し（店名と地域） */
.pulin-mv-title { padding-bottom: .6rem; }
.pulin-mv-title > span { display: block; }
.pulin-mv-title__area { font-family: var(--font-serif-ja); font-size: 13px; letter-spacing: .1em; line-height: 1.8; }
.pulin-mv-title__name { font-family: var(--font-serif-en); font-size: 26px; font-weight: 500; letter-spacing: .02em; line-height: 1.4; color: var(--c-title); }
.b-top__mv__head__right .b-top__mv__text:not(.pulin-mv-title) { font-family: var(--font-serif-ja); font-size: 13px; letter-spacing: .04em; line-height: 1.9; }
@media (max-width: 1000px) { .pulin-mv-title__name { font-size: 22px; } }
@media (max-width: 680px) { .b-top__mv__head { padding-top: calc(var(--header-h) * 1.7); } }

/* 行を分ける所 */
.pulin-salon-info > span, .pulin-footer__text > span, .b-salon__info__table td > span, .l-header__hbg__modal__address > span { display: block; }
.pulin-note, .b-salon__info__table td > span.pulin-note { margin-top: .3em; font-family: var(--font-sans-ja); font-size: 12px; letter-spacing: .04em; line-height: 1.9; color: var(--c-sub); }
.pulin-tel { white-space: nowrap; }
@media (max-width: 680px) { .b-salon__info__table th, .b-salon__info__table td { padding: 1rem .8rem; } }

/* メニュー */
.pulin-menu-notes { max-width: 60rem; margin: 0 auto; }
.pulin-menu-notes li { display: block; margin-right: 0; }
.b-menu__menu__list__lead { margin: -2rem 0 1rem; font-family: var(--font-serif-ja); font-size: var(--fs-1); letter-spacing: .02em; line-height: 1.9; }
.b-menu__menu__list__time { margin-top: .8em; font-family: var(--font-sans-ja); font-size: 12px; letter-spacing: .08em; line-height: 1.8; color: var(--c-sub); }
.b-menu__menu__list__time + .b-menu__menu__list__text { margin-top: .6em; }
.b-menu__menu__list__price .p-price { white-space: nowrap; }
@media (max-width: 680px) { .b-menu__menu__list__lead { margin: -1rem 0 1rem; } }

/* お約束 */
.pulin-promise .b-common__fl__left .b-common__text { margin-bottom: 2rem; }
.pulin-promise__list li { position: relative; padding-left: 1.6em; font-family: var(--font-serif-ja); font-size: var(--fs-1); letter-spacing: .02em; line-height: 2; color: var(--c-text); }
.pulin-promise__list li + li { margin-top: 1.2em; }
.pulin-promise__list li::before { content: ""; position: absolute; top: .95em; left: 0; width: .8em; height: 1px; background-color: var(--c-title); }

/* スタッフ（写真なし） */
.pulin-staff .b-about__staff__profile { padding-top: 2rem; border-top: 1px solid var(--c-border); }
.pulin-staff .b-about__staff__fl__box { margin-bottom: 4rem; }
.pulin-staff .b-about__staff__profile__name { margin: 1.2rem 0 1rem; }
.pulin-staff .b-about__staff__profile__name .jp { display: block; margin: 0; font-family: var(--font-serif-ja); font-size: var(--fs-3); letter-spacing: .06em; line-height: 1.5; }
.pulin-staff__role { display: block; margin-top: .2em; font-family: var(--font-sans-ja); font-size: 12px; letter-spacing: .1em; line-height: 1.8; color: var(--c-sub); }
.pulin-staff__lead { margin-top: 1rem; }
@media (max-width: 680px) { .pulin-staff .b-about__staff__fl__box { margin-bottom: 2.5rem; } }

/* よくある質問（答えは開いたまま見せる） */
.pulin-faq .b-menu__menu__list__text { width: 100%; }

/* フッター */
.pulin-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 4rem; width: 90vw; margin: 0 auto; padding: 6rem 0 3rem; border-top: 1px solid var(--c-border); }
.pulin-footer__name { margin-bottom: .6rem; font-family: var(--font-serif-en); font-size: var(--fs-2); line-height: 1.5; color: var(--c-title); }
.pulin-footer__text { font-family: var(--font-serif-ja); font-size: 13px; letter-spacing: .04em; line-height: 2; color: var(--c-text); }
.pulin-footer__text + .pulin-footer__text { margin-top: .6rem; }
.pulin-footer__nav ul { display: grid; grid-template-columns: repeat(2, auto); gap: .6rem 2.4rem; }
.pulin-footer__nav a { display: inline-block; padding: .3rem 0; font-family: var(--font-serif-ja); font-size: 13px; letter-spacing: .06em; line-height: 1.8; color: var(--c-title); }
.pulin-footer__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 680px) { .pulin-footer { padding: 4rem 0 2rem; } .pulin-footer__nav ul { grid-template-columns: 1fr 1fr; gap: .4rem 1.6rem; } }

/* 見つからないページ */
.pulin-notfound .b-common__text { margin: 2rem 0; text-align: center; }
.pulin-notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; padding-bottom: 6rem; }

/* スマホの予約のボタン：枠の幅に収め、長い言語では2行に折り返す */
@media (max-width: 680px) {
  .l-reserve__modal__list dd > span, .b-common__reserve__list dd > span { display: inline-block; max-width: 94%; padding: .3em .8em; line-height: 1.5; white-space: normal; }
  .l-reserve__modal__list dd svg, .b-common__reserve__list dd svg { display: none; }
}

/* 操作のしやすさ */
a:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.l-header__nav__link[aria-current="page"] .l-header__nav__subtitle { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }

/* 改行の位置：見出しは行の長さをそろえ、文は最後の行が短くなりすぎないようにする。日本語の見出しは文節の切れ目で折る */
:is(h1, h2, h3, .b-common__lead, .pulin-title-ja) { text-wrap: balance; }
:is(.b-common__text, .b-menu__menu__list__text, .b-menu__menu__list__lead, .pulin-promise__list li, .pulin-footer__text) { text-wrap: pretty; }
html[lang="ja"] :is(h1, h2, h3, .b-common__lead, .b-menu__menu__list__name, .pulin-title-ja) { word-break: auto-phrase; }
/* 中央・左にそろえた短い文も、地名や語の途中で折らない（両端そろえの文には使わない） */
html[lang="ja"] :is(.b-about__salon__head, .b-top__salon, .l-reserve__modal__head, .pulin-notfound) .b-common__text, html[lang="ja"] .b-top__mv__text { word-break: auto-phrase; }

/* 言語の切り替え（scripts/i18n.mjs が足す。PCはヘッダー、スマホはメニューの中、どの幅もフッター） */
@media (min-width: 681px) { .l-header__inner > div:last-child { display: flex; align-items: center; } }
.lang-switch { position: relative; margin-left: 1.4rem; }
.lang-switch > summary { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .2rem; cursor: pointer; list-style: none; font-family: var(--font-serif-en); font-size: 15px; letter-spacing: .06em; color: var(--c-title); }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch__icon { flex: none; width: 18px; height: 18px; }
.lang-switch > ul { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 100; min-width: 13rem; padding: .6rem 0; background: #fffdf8; border: 1px solid #c9c1b5; box-shadow: 0 10px 30px rgba(74, 64, 54, .12); }
.lang-switch > ul a { display: block; padding: .55rem 1.4rem; font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: .02em; line-height: 1.6; color: #4a4036; }
.lang-switch > ul a[aria-current="page"] { font-weight: 700; }
@media (max-width: 1100px) { .lang-switch { margin-left: .8rem; } .lang-switch > summary span { display: none; } }
@media (max-width: 680px) { .l-header .lang-switch { display: none; } }
.pulin-lang-list { display: flex; align-items: flex-start; gap: .6rem; margin-top: 2.4rem; }
.pulin-lang-list > svg { flex: none; width: 16px; height: 16px; margin-top: .45em; color: var(--c-sub); }
.pulin-lang-list ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.pulin-lang-list a { display: inline-block; padding: .35rem 0; font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; font-size: 12px; letter-spacing: .02em; line-height: 1.8; color: var(--c-title); }
.pulin-lang-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.pulin-footer > .pulin-lang-list { flex-basis: 100%; margin-top: 0; padding-top: 2rem; border-top: 1px dotted var(--c-border); }
.l-header__hbg__modal .pulin-lang-list { justify-content: center; }
.l-header__hbg__modal .pulin-lang-list ul { justify-content: center; max-width: 30rem; }
.l-header__hbg__modal .pulin-lang-list a, .l-header__hbg__modal .pulin-lang-list > svg { color: var(--c-dark-title); }

/* 訳したページ：日本語の原文の併記と、言語ごとの書体 */
.ja-original { display: block; margin-top: .35em; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 11px; font-weight: 400; letter-spacing: .04em; line-height: 1.7; color: var(--c-sub); }
.b-menu__menu__list__name .ja-original { font-size: 12px; }
.b-salon__info__table td > .ja-original { margin-top: .35em; font-size: 11px; letter-spacing: .04em; line-height: 1.7; }
.translated-page [lang="ja"] { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.translated-page { font-variant-numeric: lining-nums; }
html[lang="en"], html[lang="fr"], html[lang="de"], html[lang="es"], html[lang="id"], html[lang="ms"] { --font-serif-ja: Georgia, "Times New Roman", serif; --font-sans-ja: "Helvetica Neue", Arial, sans-serif; }
html[lang="vi"] { --font-serif-ja: "Times New Roman", "Noto Serif", Georgia, serif; --font-sans-ja: "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-serif-en: "Times New Roman", "Noto Serif", Georgia, serif; }
html[lang="ko"] { --font-serif-ja: "Apple SD Gothic Neo", "Noto Serif KR", "Nanum Myeongjo", "Malgun Gothic", serif; --font-sans-ja: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
html[lang="zh-Hans"] { --font-serif-ja: "Songti SC", STSong, "Noto Serif SC", SimSun, serif; --font-sans-ja: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html[lang="zh-Hant"] { --font-serif-ja: "Songti TC", "Noto Serif TC", PMingLiU, serif; --font-sans-ja: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
html[lang="th"] { --font-serif-ja: Thonburi, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; --font-sans-ja: Thonburi, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }
html[lang="th"] body * { letter-spacing: 0 !important; }
html[lang="ko"] body { word-break: keep-all; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .b-common__nav { word-break: keep-all; }
.translated-page .b-top__mv__text { width: auto; max-width: 28rem; }
/* 両端そろえの文：タイ語は語の間の空白が少なく大きなすき間が出るので左にそろえる。ラテン文字の言語は語の途中をハイフンで折れるようにする */
:where(html[lang="th"]) .b-common__text { text-align: start; }
@media (max-width: 1000px) { :where(html[lang="th"]) .b-menu__menu__head .b-common__text { text-align: start; } }
:where(html:is([lang="en"], [lang="fr"], [lang="de"], [lang="es"], [lang="vi"], [lang="id"], [lang="ms"])) .b-common__text { -webkit-hyphens: auto; hyphens: auto; }
/* 中央にそろえた短い文はハイフンで折らない（幅によって中央にそろえる所も含む） */
:is(.b-about__salon__head, .b-top__salon, .l-reserve__modal__head, .pulin-notfound) .b-common__text { -webkit-hyphens: manual; hyphens: manual; }
@media (min-width: 681px) { .b-salon__access__foot .b-common__text { -webkit-hyphens: manual; hyphens: manual; } }
@media (min-width: 1001px) { .b-menu__menu__head .b-common__text { -webkit-hyphens: manual; hyphens: manual; } }
@media (max-width: 680px) { .b-common__reserve .b-common__text { -webkit-hyphens: manual; hyphens: manual; } }
/* 予約の欄の「どこでも折る」は日本語のためのもの。外国語では語の途中で折らない */
.translated-page .b-common__reserve__fl__left .b-common__text { word-break: inherit; }
/* 文ごとの span が横に続く所は、語の間をあける言語では文の間に空白を入れる（中国語は入れない） */
.translated-page:not(.lang-zh-hans):not(.lang-zh-hant) :is(.b-common__text, .b-common__news__content, .b-salon__info__table td, .pulin-footer__text, .b-menu__menu__list__text) > span + span:not(.ja-original)::before { content: " "; }