/* 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}

/* 実画面で確認したサイト固有の補正 */
body.z-journal-page>header .hd-nav a,body.z-journal-page>header .hd-tel *{color:var(--z-ink,#342016)}@media(max-width:767px){.hero .eyebrow{display:block}.hero .eyebrow::before{display:inline-block;vertical-align:middle;margin-right:12px}}@media(min-width:768px) and (max-height:740px){.hero-scroll{display:none}}@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}body.z-mobile-open>header nav{height:100dvh!important;width:100vw!important;max-width:none!important;min-height:100dvh;box-sizing:border-box;justify-content:flex-start!important;top:0!important;left:0!important;right:0!important;bottom:0!important;overflow:auto!important}}

/* 2026-10-11 追加の補正（local/sample05.css） */
/* sample05 ぞろ屋珈琲店（カフェ） 2026-10-11 サイト担当の補正 */

/* 手で折り目（wbr）を入れた本文：文節の切れ目だけで折る（iPhoneでも語の途中で折れない） */
.s05-ph,#msgBody{word-break:keep-all;overflow-wrap:break-word;line-break:strict}

/* 折らない箱（z-nw）：機械が箱の中にも折り目（wbr）を入れるため、iPhone（WebKit）では箱の中で折れて
   同じ文字が2行に二重に描かれた（「豆のことを／ことを聞ける場所に。」）。箱の中の折り目を無効にし、箱をひとかたまりにする */
/* （共通側で直ったので、ここの指定は外した） */

/* 写真の上に重なる透明ヘッダーのとき、茶色のロゴが写真に沈んで読めない → 白抜きにする（地色が付いたら元の色） */
body:not(.z-journal-page)>header#siteHeader:not(.is-solid) .hd-logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(28,15,8,.45))}

/* 下層ページ（サービス・概要・FAQ・お問い合わせ・プライバシー）は明るい地色なのに、
   トップ用の白い文字色が引き継がれてメニューと電話番号が読めなかった */
body>header.site-header:not(#siteHeader) .hd-nav a{color:var(--ink,#342016)}
body>header.site-header:not(#siteHeader) .hd-nav a:hover{background:var(--surface,#FFF9EF);color:var(--main,#9B4A2F)}
body>header.site-header:not(#siteHeader) .hd-nav a[aria-current="page"]{color:var(--main,#9B4A2F)}
body>header.site-header:not(#siteHeader) .hd-tel .num{color:var(--ink,#342016)}
body>header.site-header:not(#siteHeader) .hd-tel .hours{color:var(--muted,#8B7568)}

/* 説明に使う小さな文字を読める大きさへ（飾りの英字ラベルはそのまま） */
body>header.site-header .hd-tel .hours{font-size:12px}
/* 営業時間の行・メニューのラベル：日本語の箱だけが共通の仕組みで16pxに上がり、数字や英字と大きさが混ざっていた。行ごと16pxにそろえる */
.hero-note{font-size:16px}
.c-menusec .eyebrow>span{font-size:16px}
.c-cta__tel small{margin-top:2px}

/* お客様の声：肩書きと利用メニューを語の途中で折らない */
.c-voice__who{flex-wrap:wrap;gap:2px 10px}
.c-voice__who b{white-space:nowrap}
.c-voice__item{white-space:nowrap}
.c-voice__item::before{content:"／ "}
@media(max-width:768px){.c-voice__item{flex-basis:100%}.c-voice__item::before{content:none}}

/* 問い合わせボタンが2行になったとき、左に寄らないように */
.c-cta__act .btn{text-align:center}

@media(max-width:900px){
  /* 下層ページ：固定ヘッダー（高さ約93px）の下に、ページ名の上のラベルが隠れていた */
  .page-main>.page-hero{padding-top:128px}
}

@media(max-width:767px){
  /* 最初の画面：文字の量に合わせて高さを伸ばす（小さい画面でヘッダーとラベルが重ならない・下の「SCROLL」に文字が掛からない） */
  .hero{height:auto;min-height:max(600px,100svh)}
  .hero-content{position:relative;inset:auto;min-height:max(600px,100svh);padding:116px 0 104px;box-sizing:border-box}
  /* 下層ページの左右の余白を、ブログのページと同じ20pxにそろえる */
  .page-hero .section-inner,.page-section .section-inner,.zoroya-final .section-inner{width:calc(100% - 40px)}
  /* ヘッダーのロゴ：枠が狭いと横だけ縮んで、つぶれて見えていた（元546×180 → 133×58）。縦横の比を保ったまま収める */
  body>header.site-header .hd-top{gap:12px}
  body>header.site-header .hd-logo{min-width:0}
  body>header.site-header .hd-logo img{width:auto;height:auto;max-width:100%;max-height:58px}
  body>header.site-header .hd-cta{padding:12px 14px;white-space:nowrap}
  /* メニューの一覧：品名の列が縮めず、幅320で価格ごと右へはみ出していた */
  .c-menu__incl li{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}
  /* フッターのリンクを指で押しやすい高さに */
  .footer__nav{gap:0 18px;margin:22px 0 18px}
  .footer__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .footer__sns a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:13px}
  .footer__sns{margin-bottom:18px}
}
/* 幅340px未満：ロゴの場所を確保するため、ヘッダーの「ご来店案内」は出さない（同じ行き先は最初の画面の「お店の場所を見る」にある） */
@media(max-width:339px){body>header.site-header .hd-cta{display:none}}
/* 背の低いスマホでは「SCROLL」の飾りを出さない（営業時間の行と近すぎる） */
@media(max-width:767px) and (max-height:760px){.hero-scroll{display:none}}

/* ブログの題：共通CSSの見出し指定（auto-phrase）のほうが強く、Chrome系では機械の折り目（data-zp）が効かずに
   「入りづらい方／へ。」のように折れていた。折り目のある見出しは、折り目だけで折る */
/* （共通側で直ったので、ここの指定は外した） */

/* 下層ページ：「進め方」の番号つきの箱が、リストの既定の字下げで右へ40pxずれていた */
.zoroya-flow{margin:0;padding-left:0}
/* 下層ページ：フッターの下のページ一覧が画面の左端に貼りつき、白っぽい丸の上の白い字で読めなかった */
body>footer.footer .wp-page-links{width:min(1160px,calc(100% - 56px));margin:20px auto 0;padding-bottom:32px}
body>footer.footer .wp-page-links a{color:var(--ink,#342016);background:rgba(255,246,232,.92);border-color:transparent;min-height:44px;padding:0 16px}

/* 下層ページ（2026-10-11 午後・店の内容に書き直した分の体裁） */
.zs-price{font-family:"Shippori Mincho",serif;font-weight:700;font-size:20px!important;line-height:1.5!important;color:var(--main);margin:0 0 6px}
.zs-note{margin-top:18px;color:var(--muted);font-size:15px}
.zoroya-form-slot ul{margin:12px 0 0;padding-left:1.3em}
.zoroya-form-slot li{margin:4px 0}
.page-section .section-inner>p{max-width:44em}
@media(min-width:769px){.zs-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 幅340px未満（2026-10-11 引き継ぎ後）：アクセスの一覧が右へはみ出す／メニュー名「自家焙煎コーヒー」の「ー」が落ちる */
.info li>*{min-width:0}
.info li span{overflow-wrap:anywhere}
@media(max-width:339px){
  .info li{grid-template-columns:76px minmax(0,1fr);gap:10px}
  .c-menu__incl li{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}
  .c-menu__incl .mth{width:44px}
}

/* 見本の入力欄（送信はしない） */
.zoroya-form-slot{border-style:solid;border-color:rgba(0,0,0,.12)}
.zs-form{display:grid;gap:16px;margin-top:18px}
.zs-form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.zs-form input,.zs-form textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid rgba(0,0,0,.25);border-radius:8px;background:#fff;color:inherit;width:100%;box-sizing:border-box;min-height:48px}
.zs-form button{min-height:48px;justify-self:start;cursor:pointer;border:0}
.zs-form-note{margin:0;font-size:15px;color:inherit}
@media(min-width:769px){.zs-form{grid-template-columns:repeat(2,minmax(0,1fr))}.zs-form label:last-of-type,.zs-form button,.zs-form-note{grid-column:1/-1}}

/* 下層ページの長い本文：手で入れた文節の折り目だけで折る */
.page-main p:has(>wbr){word-break:keep-all;overflow-wrap:break-word;line-break:strict}

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

/* 2026-10-13 内田さん「（左が明るい件）暗くしよう」。文字を左へ寄せたら、窓の明るい所に説明文が重なり1行目が読みにくかった。
   パソコン幅だけ、左から右へ薄れていく暗い層を、今までの上下の暗い層に重ねる。 */
@media(min-width:901px){
  .hero-overlay{background:linear-gradient(90deg,rgba(28,15,8,.58) 0%,rgba(28,15,8,.46) 30%,rgba(28,15,8,.12) 56%,rgba(28,15,8,0) 70%),linear-gradient(180deg,rgba(28,15,8,.42) 0%,rgba(28,15,8,.18) 38%,rgba(28,15,8,.66) 100%)}
}