/* 2026-10-11 読みやすさ・画像・操作の共通補正。各サイトの色と演出は引き継ぐ。 */
html{scroll-padding-top:110px}body{font-size:16px}
h1,h2,h3,h4,h5,h6,summary{word-break:auto-phrase;text-wrap:balance;overflow-wrap:break-word}
button,input,select,textarea{font-size:16px}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.z-readability{font-size:max(16px,var(--z-original-font,16px))!important;line-height:max(1.6,var(--z-original-leading,1.6))}
.z-heading-line{display:inline-block;max-width:100%;white-space:normal}
@media(max-width:767px){h1,h2,h3{max-width:100%}.z-fit-heading{font-size:clamp(28px,8.2vw,40px)!important;line-height:1.5!important;letter-spacing:0!important}.c-features__img{max-width:100%}.z-journal-page header .logo,.z-journal-page header .brand{min-width:0}}
@media(max-height:700px) and (min-width:901px){.z-low-hero{min-height:650px!important;height:auto!important}.z-low-hero h1{max-width:100%;font-size:clamp(38px,5vw,70px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.z-mobile-menu{display:none}.z-mobile-menu summary{cursor:pointer;min-height:44px;min-width:44px;padding:10px;border:1px solid currentColor;border-radius:999px;font-size:16px;background:var(--bg,#fff)}.z-mobile-menu nav{position:absolute;right:20px;top:100%;width:min(320px,calc(100vw - 40px));padding:16px;background:var(--bg,#fff);border:1px solid currentColor;z-index:100;box-shadow:0 10px 30px #0002}.z-mobile-menu nav a{display:block;padding:12px;font-size:16px;min-height:44px}.z-mobile-menu[open] summary{background:var(--paper,#fff)}@media(max-width:900px){.z-mobile-menu{display:block;margin-left:auto}}
.btns{min-width:0}.btns>a{box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:break-word}@media(max-width:767px){.footer .fcta{grid-template-columns:1fr!important}.footer .fcta .btns{width:100%;justify-content:flex-start}}
.z-mobile-menu{position:relative;width:max-content}.z-mobile-menu nav{top:calc(100% + 12px);right:0}@media(max-width:900px){body>header.nav:has(.z-mobile-menu){display:flex;align-items:center;gap:16px}}
.z-mobile-menu{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:102}.z-mobile-menu nav{max-height:calc(100dvh - 160px);overflow:auto}.z-mobile-menu summary{background:var(--z-bg,#fff);color:var(--z-ink,#222)}@media(max-width:900px){body>header:has(.z-mobile-menu){padding-right:116px!important}}

body>header.z-nav-collapsed{padding-right:116px!important}body>header.z-nav-collapsed>.z-mobile-menu{display:block}
.z-mobile-menu nav a{float:none!important;position:static!important;border-radius:0!important;white-space:normal!important;max-width:100%;margin:0!important}
@media(max-width:767px){.z-privacy-heading{font-size:clamp(22px,6.2vw,28px)!important;line-height:1.6!important;letter-spacing:0!important}}
.z-drawer-close{display:block;align-self:flex-end;margin:12px 16px 0 auto;min-height:44px;padding:8px 16px;background:transparent;border:1px solid currentColor;color:inherit;cursor:pointer;position:relative;flex:none;font-size:16px}
.c-ov>.z-drawer-close{position:absolute;top:12px;right:12px;margin:0;z-index:2;color:var(--ivory,#fff)}
.c-menu>.z-drawer-close,.sp-menu>.z-drawer-close{position:absolute;top:12px;right:12px;margin:0;z-index:100;color:inherit}
body.z-journal-page>header.z-light-header{background:var(--z-bg,#fff);color:var(--z-ink,#222);border-bottom:1px solid var(--z-line,#ddd)}
body.z-journal-page>header.z-light-header .zhd__inner{mix-blend-mode:normal;color:var(--z-ink,#222)}
body.z-journal-page>header.z-light-header nav:not([class*="menu"]) a,body.z-journal-page>header.z-light-header .zhd__inner a{color:var(--z-ink,#222)}
body.z-journal-page>header.z-light-header :is(.hd-tel,.c-hd__tel,.c-header__tel) *{color:var(--z-ink,#222)}
body.z-journal-page>header.z-light-header :is(.zhd__burger,.c-hd__burger) span{background:var(--z-ink,#222)}
body.z-journal-page.is-locked{overflow:hidden}
/* 全画面メニューを、ぼかし・変形付きヘッダーの寸法から切り離す。 */
@media(max-width:900px){
 body.z-mobile-open>header,body.z-mobile-open>header :has(nav){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;transform:none!important;perspective:none!important;contain:none!important;will-change:auto!important;overflow:visible!important}
 body.z-mobile-open>header nav{height:100dvh!important;min-height:100dvh!important;max-height:none!important;width:100vw!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important;justify-content:flex-start!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:auto!important;overscroll-behavior:contain;scroll-padding-top:88px}
 body.z-mobile-open>header nav{flex-wrap:nowrap!important}
 body.z-mobile-open.z-mobile-open>header nav{justify-content:flex-start!important;flex-wrap:nowrap!important}
 body.z-mobile-open>header nav a{flex-shrink:0!important}
 body.z-mobile-open>header nav ul{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;width:100%;margin:0;padding:0;gap:0}
 body.z-mobile-open>header nav li{width:100%;list-style:none}
 body.z-mobile-open>header .z-mobile-toggle{position:fixed!important;top:16px!important;right:16px!important;transform:none!important;z-index:10002!important}
}
.z-mobile-menu[open]>nav{display:block!important}
.z-mobile-panel{display:block!important;position:fixed!important;inset:auto 16px auto auto!important;top:var(--z-panel-top,80px)!important;width:min(320px,calc(100vw - 32px))!important;max-height:calc(100dvh - var(--z-panel-top,80px) - 16px)!important;box-sizing:border-box;padding:16px!important;margin:0!important;overflow:auto!important;overscroll-behavior:contain;background:var(--z-bg,#fff)!important;color:var(--z-ink,#222)!important;border:1px solid currentColor;box-shadow:0 10px 30px #0002;z-index:10030!important}
.z-mobile-panel a{display:block!important;float:none!important;position:static!important;inset:auto!important;transform:none!important;border-radius:0!important;white-space:normal!important;max-width:100%;margin:0!important;padding:12px!important;min-height:44px;font-size:16px!important;line-height:1.6!important;color:inherit!important;background:none!important}
@media(max-width:900px){
 body:has(:is(.dw,.c-drawer,.c-ov,#spnav,.sp-menu,.c-menu)[aria-hidden="false"]){overflow:hidden}
 :is(.dw,.c-drawer,.c-ov,#spnav,.sp-menu,.c-menu)[aria-hidden="false"]{z-index:10020!important}
 :is(.dw,.c-drawer,.c-ov,#spnav,.sp-menu,.c-menu)[aria-hidden="false"]>.z-drawer-close{position:fixed;top:16px;right:16px;z-index:3;margin:0;background:var(--paper,var(--ivory,#fff));color:var(--ink,#222)}
 body.is-menu-open:has(>header .menu-toggle){overflow:hidden}
 body.is-menu-open>header .site-nav{max-height:calc(100dvh - var(--z-menu-top,68px));overflow-y:auto;overscroll-behavior:contain}
}
/* 2026-10-11 追加：短い文言（見出し・ボタン・ラベル）は文節の切れ目だけで折る。iPhoneでも語の途中で折れない。印は zphrase.py が入れる */
[data-zp]{word-break:keep-all!important;overflow-wrap:break-word;line-break:strict}
.znb{white-space:nowrap}
p,li,dd,td{line-break:strict;text-wrap:pretty}
/* 手で改行を整えるための部品：z-nw＝この範囲は折らない／z-br-sp＝スマホだけ改行／z-br-pc＝PCだけ改行 */
.z-nw{white-space:nowrap}
.z-br-sp{display:none}
@media(max-width:767px){.z-br-sp{display:inline}.z-br-pc{display:none}}
/* zp-nested：data-zp の箱の中にある、印の無い別のブロック（長い段落など）には keep-all を引き継がせない。
   強さは0（:where）。サイト側・補正側の指定があれば、そちらが勝つ */
:where([data-zp]) :where(p,div,li,dd,dt,td,th,section,article,aside,figure,figcaption,blockquote,h1,h2,h3,h4,h5,h6,summary,details,button,form,address):where(:not([data-zp])){word-break:normal}
/* 値段の「円」は数字より小さく見せる（内田さんの決め・2026-10-07）。印は zyen.py が入れる。小さな文字の中でも10pxより小さくしない */
.z-yen{display:inline!important;font-size:max(.7em,10px);font-weight:inherit;letter-spacing:0;margin-left:.06em;white-space:nowrap;position:static!important;transform:none!important}

/* 実画面で確認したサイト固有の補正 */
@media(max-width:767px){.hero{height:auto;min-height:100svh}.hero-content{position:relative;min-height:100svh;padding:110px 0 100px;box-sizing:border-box}.hero-hint{left:24px;right:24px;bottom:22px}}body:not(.z-journal-page)>header .zhd__brand img{filter:brightness(0) invert(1)}@media(max-width:767px){.hero .eyebrow{display:block}.hero .eyebrow::before{display:inline-block;vertical-align:middle;margin-right:12px}}@media(max-width:767px){.cfeat__wrap{grid-template-columns:minmax(0,1fr)}.cfeat__wrap>*{min-width:0}.cfeat{overflow:clip}}
@media(max-width:900px){
 .zhd__menu{display:block;height:100dvh;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:88px 24px 32px}
 .zhd__menu .zhd__left{padding:0;display:block}.zhd__menu .zhd__img{height:180px;flex:none}.zhd__menu .zhd__info{padding:24px 0}
 .zhd__menu .zhd__nav a{min-height:48px;align-items:center}.zhd__menu .zhd__book{margin:24px 0;max-width:none;padding:18px 16px}
 .zhd__menu>a{display:block;padding:14px 0;border-top:1px solid rgba(255,255,255,.25)}
}


/* 2026-10-11 追加の補正（local/sample02.css） */
/* sample02 美容室ZOROYA：サイト担当の補正（2026-10-11） */

/* 「折らない」指定（z-nw）の中に機械の折り返しの印（wbr）が入ると、Chrome系では印の位置で折れる
   （2026-10-11 Chromium と WebKit で実測。WebKit は折れない）。範囲の中の印を無効にする */
.z-nw wbr{display:none}

/* ===== トップの固定ヘッダー =====
   白いロゴと白い3本線を、背景との合成（mix-blend-mode）に頼って見せていたが、固定の箱の中では合成が効かず、
   白や淡いピンクの背景の上で見えなくなっていた。合成をやめ、最上部は上からの薄い影、
   スクロール後（local/sample02.js が z-solid を付ける）は濃い帯にして、どの背景でも読めるようにする */
body:not(.z-journal-page)>header.zhd .zhd__inner{mix-blend-mode:normal;background:linear-gradient(rgba(10,10,10,.5),rgba(10,10,10,0))}
body:not(.z-journal-page)>header.zhd.z-solid .zhd__inner{background:rgba(18,17,17,.95);box-shadow:0 1px 0 rgba(255,255,255,.12)}
body.is-locked:not(.z-journal-page)>header.zhd .zhd__inner{background:none;box-shadow:none}
/* 全画面メニュー（PC）：画面の高さに収める。行の高さが中身まかせになっていて、高さ768pxの画面では
   下の「LINEで相談・予約する」と住所・電話が画面の外に出ていた（スクロールもできない） */
@media(min-width:901px){
 .zhd__menu{grid-template-rows:minmax(0,1fr)}
 .zhd__left{min-height:0;overflow-y:auto}
 .zhd__right{min-height:0}
 .zhd__nav a{line-height:1.5}
 .zhd__nav{margin-bottom:18px}
}
/* メニュー内の住所：括弧の部分だけ16pxに上がって不ぞろいだった */
.zhd__info .row .znb{font-size:inherit!important;line-height:inherit!important}
/* 3本線のボタン：押せる範囲を48pxに */
.zhd__burger{min-width:48px;min-height:48px}

/* ===== 記事・一覧ページ：固定ヘッダー（高さ79px）の分だけ本文を下げる =====
   共通JSが入れる余白（--z-header-offset）は、WebKit では読み込み直後に 0px になり、
   スマホでパンくず「ホーム／読みもの」がヘッダーの下に隠れていた（resize のあとは 103px になる。実測） */
html body.z-journal-page>main{padding-top:103px}

/* ===== 下層ページ（概要・サービス・FAQ・お問い合わせ・プライバシー）のヘッダー =====
   スマホで左右のナビ10項目がそのまま4段に折り返し、高さ350pxの帯が画面の上に貼り付いていた。
   960px以下ではナビを畳み、ロゴと「メニュー」ボタンの1段にする（項目はメニューの中に出る） */
@media(max-width:960px){
 body>header.site-header .hd-main nav{display:none}
 body>header.site-header .hd-main{display:flex;align-items:center;min-height:64px;padding:10px 0;width:auto;margin:0 20px}
 body>header.site-header .hd-brand img{height:40px;margin:0}
}
/* 下層ページのフッター末尾のページ一覧：左端に余白なしで貼り付いていた */
body>footer.footer .wp-page-links{justify-content:center;gap:8px;margin:0;padding:0 20px 40px}

/* ===== FV ===== */
.hero .eyebrow .z-sep{white-space:pre}
@media(max-width:767px){
 /* 小見出し：2行目を1行目の文字の頭にそろえる（区切りの「／」が行頭・行末に来ていた） */
 .hero .eyebrow .z-sep{display:none}
 .hero .eyebrow{padding-left:42px;text-indent:-42px}
 .hero .eyebrow .z-heading-line{text-indent:0}
}

/* ===== 料金の一覧 =====
   名前・説明・金額の3列だと、スマホで名前の列が2〜3字幅になり「ブリー／チカ／ラー」と縦に崩れていた。
   名前と金額を上の段、説明を下の段（全幅）にする。PCでも一覧の幅が足りなくなる1100px以下は同じ形 */
@media(max-width:1100px){
 .cprice__list li{grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:18px 2px}
 .cprice__list li .mt{grid-column:1;grid-row:1}
 .cprice__list li .mp{grid-column:2;grid-row:1}
 .cprice__list li .md{grid-column:1/-1;grid-row:2}
}
/* 金額の列：WebKit では、あとから読み込まれた書体で文字幅が増えても列の幅が変わらず、金額が罫線の右へ12pxはみ出していた（実測）。
   列の最小幅を先に確保し、右にそろえる */
.cprice__list li .mp{min-width:6.2em;text-align:right}
/* 料金カードの注記・スタイリストの肩書き（説明の文字が11pxだった） */
.cprice__card .tax{font-size:12px}
.cprice__card .tax .znb{font-size:inherit!important;line-height:inherit!important}  /* 「（税込」だけ16pxに上がって不ぞろいだった */
.cmsg__vlabel,.cmsg__meta .role{font-size:12px}

/* ===== スタイリストの手紙（大きい頭文字） ===== */
@media(max-width:767px){
 /* 頭文字の横に2行目「仕事ではありません。」が入りきらず、句点だけが次の行に落ちていた。
    頭文字を少し小さくし、1行目の文字を画面の幅に合わせる */
 .cmsg__body .drop{font-size:72px;margin:4px 14px -4px 0}
 .cmsg__body .lead-line{font-size:clamp(17px,5.4vw,22px)}
}

/* ===== 最後の予約案内 =====
   本文が中央揃えのまま語の途中で折れていた（「大丈夫で／す」）。Chrome系は文節で折り、スマホは左揃えで読ませる */
.finalcta p.lead{word-break:auto-phrase}
@media(max-width:767px){.finalcta p.lead{text-align:left}}

/* ===== よくある質問（スマホ） =====
   番号と開閉の印の列を詰めて、問いの文に幅を回す（3行に折れていた問いを2行に収める） */
@media(max-width:767px){
 .cfaq__q{grid-template-columns:30px minmax(0,1fr) 22px;gap:10px;padding:22px 4px}
 .cfaq__a div{padding-left:44px}
}

/* 折らない範囲で区切った小さな注記（フッターの住所と著作権、予約の下の3語）は、元の文字の大きさのままにする。
   共通JSは日本語を直接含む要素を16pxへ上げるため、区切りを入れると12〜13pxの注記が16pxに変わってしまう */
.footer .fnap .z-nw,.footer .cp .z-nw,.finalcta .sub .z-nw{font-size:inherit!important;line-height:inherit!important}

/* ===== 320px幅 ===== */
@media(max-width:359px){
 /* 悩みの4行目「自分だけ浮いてしまった。」の句点が落ちる：左右の余白を詰めて1行に入れる */
 .cintro__copy{padding-left:22px;padding-right:22px}
}

/* ===== 2026-10-11 午後の追記 =====
   日本語が入る所の書体：末尾が monospace の指定だと Windows では MSゴシックになる。本文の書体を間に入れる */
.eyebrow,.zhd__info .row,.zhd__info .brand,.hero-frame,.hero-hint,.cintro__pain,.cfeat__item p,.cfeat__item .tag,
.cprice__note,.cprice__note .nt,.cmsg__vlabel,.cmsg__meta .role,.cmsg__kicker,.cnews__row .meta,.cfaq__q,
.finalcta .btns,.finalcta .sub,.footer .fnap,.footer .cp,.zgal .zg-head,.cintro__num,.cmsg__left,.cmsg__right,.mono{
 font-family:"Space Grotesk","Zen Kaku Gothic New",sans-serif}
/* 320px：料金の一覧で「髪質改善トリートメント」が語の途中で折れる／質問の見出しが4行になる */
@media(max-width:359px){
 .cprice__list li .mt{grid-column:1/-1;grid-row:1}
 .cprice__list li .md{grid-column:1;grid-row:2}
 .cprice__list li .mp{grid-column:2;grid-row:2;min-width:6.2em}
 .cprice__list li .md{padding-right:4px}
 .cfaq__q{grid-template-columns:26px minmax(0,1fr) 20px;gap:8px;padding:20px 2px}
}

/* 問い合わせの見本フォーム */
.z-mockform{display:grid;gap:18px;max-width:640px}
.z-mockform label{display:block;font-size:15px;line-height:1.7}
.z-mockform label input,.z-mockform label textarea{display:block;margin-top:6px}
.z-mockform input,.z-mockform textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid rgba(0,0,0,.25);border-radius:6px;background:#fff;width:100%;box-sizing:border-box}
.z-mockform button{justify-self:start;min-height:48px;cursor:pointer}
.z-mockmsg{margin:0;font-size:14px;color:#8a4a68}

/* 最後の予約案内の見出し：390pxで「でも、」だけ1行に落ちていた。字を少し小さくして1行目に収める */
@media(max-width:430px){.finalcta h2{font-size:26px}}

/* 下層ページの固定ヘッダー：下の濃い帯の白い文字が薄く透けて見えていたので、ほぼ不透明にする */
body>header.site-header{background:rgba(255,255,255,.99)}

/* ===== ブログ一覧・記事：全画面メニューを開いているあいだだけ、ロゴと閉じるボタンを明るい色にする =====
   閉じているときのヘッダーは明るい（黒いロゴ・黒い3本線）。開くと暗い全画面メニューが重なるので、トップと同じ白にする */
body.z-journal-page.is-locked>header.z-light-header .zhd__brand img{filter:brightness(0) invert(1)}
body.z-journal-page.is-locked>header.z-light-header :is(.zhd__burger,.c-hd__burger) span{background:#fff}
/* 三本線を×にする動き（トップは画面の中のスクリプトでやっている。ブログのページにはそのスクリプトが無いのでCSSで同じ形にする） */
body.z-journal-page.is-locked>header.zhd .zhd__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.z-journal-page.is-locked>header.zhd .zhd__burger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.z-journal-page.is-locked>header.zhd .zhd__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* 2026-10-12 内田さん指示「見出しとコンテンツが右寄りでバランスが悪い」。
   文字の箱（幅720px）を画面の中央に置き、その中で左寄せにしていたため、書き出しが約320px右にあった。
   左端を下の段の器（幅1160px）にそろえる。狭い幅では、枠の線（端から26px）に文字が触れないよう6vwあける。 */
@media(min-width:901px){
  .hero-content .inner{margin-left:max(6vw,calc((100% - 1160px)/2));margin-right:auto}
}