/*
Theme Name: 岡田美容室
Description: レンガとステンドグラスをモチーフにした岡田美容室専用テーマ。
Version: 1.0.1
Requires PHP: 7.4
Text Domain: okada-salon
*/
:root { color-scheme:light; --ok-paper:#f6f3ed; --ok-ink:#302e29; --ok-muted:#655e54; --ok-line:#d9d2c6; --ok-surface:#fffcf6; --ok-accent:#864e3b; --ok-wash:#e9dbcd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ok-paper); color:var(--ok-ink); font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; font-size:16px; line-height:1.85; overflow-wrap:break-word; }
button,input,textarea,select { font:inherit; }
a { color:inherit; text-underline-offset:5px; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--ok-accent); outline-offset:5px; }
img { max-width:100%; height:auto; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:400; }
.ok-serif,h1,h2 { font-family:'Noto Serif JP','Yu Mincho',serif; }
.ok-en { font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; }
.ok-container { width:min(100% - 80px,1120px); margin-inline:auto; }
.ok-skip { position:absolute; left:18px; top:-100px; background:var(--ok-surface); padding:10px 18px; z-index:100; }
.ok-skip:focus { top:10px; }
.ok-top-area { position:relative; isolation:isolate; overflow:hidden; }
.ok-top-area>:not(.ok-brick-backdrop) { position:relative; z-index:1; }
.ok-brick-backdrop { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.09; mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.7) 50%,transparent); -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.7) 50%,transparent); }
.ok-brick-row { height:33px; display:flex; gap:3px; margin-bottom:3px; width:max-content; }
.ok-brick-row:nth-child(even) { transform:translateX(-56px); }
.ok-brick { display:block; flex:0 0 109px; height:100%; border-radius:1px; background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(68,32,16,.15)),#a57354; box-shadow:inset 0 1px rgba(255,255,255,.35),inset 0 -2px rgba(50,25,10,.12); }
.ok-brick:nth-child(3n) { background-color:#b48b70; }
.ok-topline { border-bottom:1px solid var(--ok-line); }
.ok-topline .ok-container { display:flex; justify-content:space-between; gap:16px; padding-block:10px; font-size:.75rem; letter-spacing:.16em; color:var(--ok-muted); }
.ok-header { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:30px; }
.ok-wordmark { text-decoration:none; font-size:2.1rem; letter-spacing:.08em; line-height:1.3; white-space:nowrap; }
.ok-wordmark small { display:block; font-family:sans-serif; font-size:.75rem; margin-top:11px; letter-spacing:.2em; line-height:1.5; }
.ok-nav { display:flex; flex-wrap:wrap; align-items:center; gap:25px; font-size:.875rem; }
.ok-nav a { text-decoration:none; padding-block:10px; }
.ok-nav a:hover { color:var(--ok-accent); }
.ok-nav .ok-call { border:1px solid var(--ok-ink); padding:12px 19px; }
.ok-hero { display:grid; grid-template-columns:1fr 1.04fr; gap:54px; align-items:center; padding-block:20px 64px; }
.ok-kicker { font-size:.8125rem; color:var(--ok-accent); letter-spacing:.15em; }
.ok-hero h1 { white-space:pre-line; font-size:clamp(2rem,3.4vw,3.1rem); line-height:1.85; letter-spacing:.035em; margin:25px 0 20px; }
.ok-intro { color:var(--ok-muted); font-size:1rem; line-height:2; white-space:pre-line; }
.ok-hero-link { display:inline-flex; gap:25px; margin-top:28px; padding-block:8px; border-bottom:1px solid var(--ok-ink); text-decoration:none; font-size:.875rem; }
.ok-main-photo { display:block; width:100%; aspect-ratio:1/1.06; object-fit:cover; border-radius:350px 350px 0 0; }
.ok-caption { display:flex; justify-content:space-between; gap:12px; margin-top:13px; font-size:.75rem; color:var(--ok-muted); letter-spacing:.1em; }
.ok-schedule { background:var(--ok-surface); padding-block:50px; border-block:1px solid var(--ok-line); scroll-margin-top:24px; }
.ok-section-head { margin-bottom:25px; }
.ok-section-head .ok-en,.ok-news .ok-en { color:var(--ok-accent); font-size:1.125rem; margin-bottom:6px; }
.ok-section-head h2 { font-size:1.9rem; line-height:1.6; }
.ok-hours { color:var(--ok-muted); font-size:.9375rem; line-height:1.95; margin-bottom:30px; white-space:pre-line; }
.ok-news { display:grid; grid-template-columns:210px 1fr; gap:30px; padding-block:40px; border-bottom:1px solid var(--ok-line); scroll-margin-top:24px; }
.ok-news h2 { font-size:1.6rem; }
.ok-news-empty { font-size:.9375rem; color:var(--ok-muted); align-self:center; }
.ok-news-list { list-style:none; margin:0; padding:0; }
.ok-news-list li+li { border-top:1px solid var(--ok-line); }
.ok-news-list a { display:grid; grid-template-columns:105px 1fr 20px; gap:20px; align-items:baseline; padding:16px 0; text-decoration:none; }
.ok-news-list a:hover span { text-decoration:underline; }
.ok-news-list time { font-family:Georgia,serif; font-size:.875rem; color:var(--ok-muted); }
.ok-news-more { display:inline-block; margin-top:16px; font-size:.875rem; }
.ok-salon { display:grid; grid-template-columns:.9fr 1.1fr; gap:58px; align-items:center; padding-block:65px; }
.ok-salon img { width:100%; display:block; aspect-ratio:1.2; object-fit:cover; }
.ok-salon h2 { font-size:1.8rem; line-height:1.7; white-space:pre-line; margin:15px 0; }
.ok-services { font-size:.9375rem; letter-spacing:.035em; border-top:1px solid var(--ok-line); padding-top:20px; margin-top:25px; line-height:2.2; white-space:pre-line; }
.ok-footer { background:var(--ok-wash); padding-block:38px; }
.ok-footer-inner { display:flex; justify-content:space-between; align-items:center; gap:35px; }
.ok-footer h2 { font-size:1.6rem; margin-bottom:12px; }
.ok-footer p { font-size:.875rem; line-height:2; }
.ok-contact-call { text-decoration:none; display:block; padding-block:12px; }
.ok-contact-call span { display:block; font-size:.875rem; }
.ok-phone { font:2rem Georgia,serif; letter-spacing:.025em; }
.ok-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:16px; color:var(--ok-muted); font-size:.75rem; }
.ok-page { padding-block:40px 70px; min-height:45vh; }
.ok-page h1 { font-size:2.2rem; margin-bottom:32px; }
.ok-page .ok-post-date { color:var(--ok-muted); margin-bottom:12px; }
.ok-content { max-width:850px; margin-inline:auto; }
.ok-content>*+* { margin-top:24px; }
.ok-content h2 { margin-top:40px; font-size:1.65rem; }
.ok-content h3 { font-size:1.3rem; }
.ok-content a { color:var(--ok-accent); }
.ok-content table { border-collapse:collapse; width:100%; }
.ok-content td,.ok-content th { padding:15px; text-align:left; border-bottom:1px solid var(--ok-line); }
.ok-content th { min-width:5.5em; }
.ok-content iframe { max-width:100%; }
.ok-content .wp-block-cover { padding:32px!important; }
.ok-content .wp-block-cover p,.ok-content .wp-block-cover h2 { color:#fff; }
.ok-content .wp-block-columns { gap:30px; }
.ok-back { display:inline-block; margin-top:36px; }
.ok-pagination { margin-top:24px; }
.ok-pagination .page-numbers { display:inline-block; padding:8px 14px; border:1px solid var(--ok-line); margin:4px; }
@media(min-width:1400px) { .ok-container { width:min(100% - 100px,1200px); } }
@media(max-width:900px) { .ok-container { width:calc(100% - 48px); } .ok-nav { gap:16px; } .ok-nav .ok-about-link { display:none; } .ok-hero { gap:30px; } .ok-hero h1 { font-size:2rem; } .ok-salon { gap:30px; } }
@media(max-width:680px) {
 .ok-container { width:calc(100% - 36px); }
 .ok-topline .ok-container { font-size:.75rem; }
 .ok-topline span:last-child { display:none; }
 .ok-header { align-items:flex-start; gap:16px; padding-block:24px; }
 .ok-wordmark { font-size:1.5rem; flex-shrink:0; }
 .ok-wordmark small { max-width:132px; font-size:.75rem; letter-spacing:.12em; }
 .ok-nav { gap:2px 14px; justify-content:flex-end; font-size:.8125rem; }
 .ok-nav .ok-call { flex-basis:100%; text-align:center; padding:8px; }
 .ok-hero { grid-template-columns:1fr; gap:30px; padding-block:12px 35px; }
 .ok-hero h1 { font-size:clamp(1.8rem,6.5vw,2.5rem); line-height:1.8; margin:18px 0 15px; }
 .ok-main-photo { aspect-ratio:1.5; border-radius:240px 240px 0 0; }
 .ok-caption { font-size:.75rem; letter-spacing:.02em; }
 .ok-schedule { padding-block:32px; }
 .ok-section-head h2 { font-size:1.5rem; }
 .ok-news { grid-template-columns:1fr; gap:14px; padding-block:28px; }
 .ok-news-list a { grid-template-columns:1fr 20px; gap:5px; }
 .ok-news-list time { grid-column:1/-1; }
 .ok-salon { grid-template-columns:1fr; gap:26px; padding-block:38px; }
 .ok-salon h2 { font-size:1.6rem; }
 .ok-footer-inner { flex-direction:column; align-items:flex-start; gap:22px; }
 .ok-phone { font-size:1.8rem; }
 .ok-page { padding-block:30px 50px; }
 .ok-content td,.ok-content th { padding:12px 6px; }
}
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }