/*
Theme Name: merci
Theme URI:
Author: merci hair salon
Description: 美容室merci（札幌市北区）オリジナルテーマ
Version: 1.0.0
License: Private
Text Domain: merci
*/

/* ── Reset & Base ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--white:#ffffff;--black:#111111;--gray:#888888;--light:#f7f7f7;--border:#e0e0e0;--text:#222222}
body{font-family:'Noto Sans JP',sans-serif;font-weight:300;background:var(--white);color:var(--text);font-size:15px;line-height:1.9;max-width:800px;margin:0 auto}

/* ── HEADER ── */
header{padding:24px 20px 14px;text-align:center;border-bottom:1px solid var(--border)}
.logo-img{width:120px;height:auto;display:block;margin:0 auto}
.logo-tagline{font-size:9px;letter-spacing:.35em;color:var(--gray);margin-top:5px;display:block}

/* ── NAV ── */
nav{display:flex;border-bottom:1px solid var(--border);background:var(--white);position:sticky;top:0;z-index:100;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
.nav-btn{flex:1;min-width:0;padding:13px 4px;background:none;border:none;border-bottom:2px solid transparent;font-family:'Noto Sans JP',sans-serif;font-weight:300;font-size:10px;letter-spacing:.05em;color:var(--gray);cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s;text-align:center;position:relative;overflow:hidden;height:42px;text-decoration:none;display:flex;align-items:center;justify-content:center}
.nav-btn.active,.nav-btn:hover{color:var(--black);border-bottom-color:var(--black)}
.nb-en{display:block;transition:opacity .25s ease;opacity:1;font-size:10px;letter-spacing:.05em;line-height:1;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.nb-ja{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-size:8px;letter-spacing:.08em;line-height:1;transition:opacity .25s ease;opacity:0;color:var(--black)}
.nav-btn:hover .nb-en{opacity:0}
.nav-btn:hover .nb-ja{opacity:1}
.nav-new-dot{position:absolute;top:8px;right:8px;width:5px;height:5px;background:#c0392b;border-radius:50%;animation:newblink 2s ease-in-out infinite}

/* ── HERO SLIDESHOW ── */
.hero-slideshow{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.8s ease-in-out}
.hero-slideshow img.active{opacity:1}

/* ── HOME NEWS カード ── */
.news-card{margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:20px}
.news-card:last-child{border-bottom:none;padding-bottom:0}
.news-card-inner{display:flex;gap:12px;align-items:flex-start}
.news-card-text-wrap{flex:1;min-width:0}
.news-card-img{width:100px;height:68px;object-fit:cover;flex-shrink:0;display:block;background:var(--light)}
.news-card-date{font-size:10px;color:var(--gray);margin-bottom:4px}
.news-card-title{font-size:13px;color:var(--black);margin-bottom:5px;font-weight:400;line-height:1.5}
.news-card-body{font-size:12px;color:var(--text);line-height:1.8;white-space:pre-wrap;word-break:break-all}
.news-card-body.collapsed{max-height:72px;overflow:hidden;position:relative}
.news-card-body.collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(transparent,white)}
.news-read-more{background:none;border:none;font-size:10px;letter-spacing:.2em;color:var(--gray);cursor:pointer;font-family:'Noto Sans JP',sans-serif;padding:6px 0;display:block}
.home-body{padding:28px 24px 0}
.sec-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1rem;letter-spacing:.25em;color:var(--black);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.home-news-row{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border)}
.home-news-row:last-child{border-bottom:none}
.hnd{font-size:11px;color:var(--gray);white-space:nowrap;flex-shrink:0}
.hnt{font-size:13px;color:var(--black)}
.view-all{display:block;text-align:center;font-size:10px;letter-spacing:.25em;color:var(--gray);padding:14px 0;text-decoration:none;width:100%}
.view-all:hover{color:var(--black)}

/* ── GALLERY ── */
.gallery-wrap{padding:28px 24px;border-top:1px solid var(--border)}
.gallery-grid{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-grid::-webkit-scrollbar{display:none}
.gallery-cell{width:140px;height:140px;flex-shrink:0;overflow:hidden;background:var(--light)}
.gallery-cell img{width:100%;height:100%;object-fit:cover;display:block}

/* ── MAP & INFO ── */
.map-info-line-wrap{display:block;border-top:1px solid var(--border)}
.map-info-col{padding:0 24px 28px;min-width:0}
.line-col{padding:20px 24px 28px;text-align:center;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center}
.map-embed-wrap{margin-top:20px;width:100%;height:220px;border:1px solid var(--border);overflow:hidden;background:var(--light)}
.map-embed-wrap iframe{width:100%;height:100%;border:none;display:block}
.info-block{padding:14px 0 0}
.info-label{font-size:10px;letter-spacing:.2em;color:var(--gray);margin-bottom:3px}
.info-val{font-size:13px;color:var(--black);line-height:1.8}
.info-val a{color:var(--black);text-decoration:none}

/* ── LINE ── */
.line-label{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:300;letter-spacing:.2em;color:var(--black);margin-bottom:8px}
.line-desc{font-size:12px;color:var(--gray);line-height:1.9}
.line-qr-img{width:100px;height:100px;margin:10px auto 0;display:block}

/* ── NEWS ── */
.news-page{padding:28px 24px}
.page-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.2rem;letter-spacing:.25em;color:var(--black);margin-bottom:24px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.news-article{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--border)}
.news-article:last-child{border-bottom:none;margin-bottom:0}
.news-card-img{width:100%;max-width:320px;height:auto;object-fit:cover;display:block;background:var(--light);margin-bottom:12px}
.nad{font-size:11px;color:var(--gray);margin-bottom:4px}
.nat{font-size:14px;font-weight:400;color:var(--black);margin-bottom:8px}
.nab{font-size:13px;color:var(--text);line-height:1.9}
.nab img{max-width:100%;height:auto;display:block;margin:8px 0}

/* ── MENU ── */
.menu-page{padding:28px 24px}
.msn{font-size:11px;color:var(--gray);text-align:right;margin-bottom:24px}
.menu-group{margin-bottom:24px}
.mct{font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:.85rem;letter-spacing:.2em;color:var(--black);padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.menu-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border);gap:8px}
.mn{font-size:13px;color:var(--black);flex:1;line-height:1.5}
.mn small{display:block;font-size:11px;color:var(--gray);margin-top:1px}
.mp{font-size:13px;color:var(--black);white-space:nowrap}
.mrk{font-size:11px;color:var(--gray);text-align:right;padding:5px 0 10px}
.menu-sp{border:1px solid var(--border);padding:14px 16px;margin-bottom:20px}
.mspt{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1rem;letter-spacing:.15em;color:var(--black);margin-bottom:6px}
.mspb{font-size:12px;color:var(--text);line-height:1.9}

/* ── SCHEDULE ── */
.sch-page{padding:20px 16px 32px}
.sch-legend{display:flex;gap:16px;margin-bottom:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.sch-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray);letter-spacing:.05em}
.sch-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sch-dot-off{background:#c0392b}
.sch-dot-watanabe{background:#e07b2a}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav-btn{background:none;border:none;font-size:20px;color:var(--gray);cursor:pointer;padding:4px 12px;line-height:1}
.cal-month{font-family:'Cormorant Garamond',serif;font-size:1.1rem;letter-spacing:.15em;color:var(--black)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{text-align:center;font-size:9px;letter-spacing:.05em;color:var(--gray);padding:4px 0}
.cal-dow:first-child{color:#c0392b}
.cal-dow:last-child{color:#e07b2a}
.cal-cell{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;border-radius:3px}
.cal-cell.other-month{color:#ddd}
.cal-cell.today{background:var(--light);font-weight:400}
.cal-cell.off{color:#fff;background:#c0392b;border-radius:50%;font-weight:400}
.cal-cell.sun-watanabe{color:var(--black)}
.cal-cell.sun-watanabe::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#e07b2a}
.cal-holiday{font-size:6px;color:#c0392b;line-height:1;margin-top:1px;letter-spacing:0;text-align:center;display:block}
.cal-cell.off .cal-holiday{color:#fff}
.sch-notice{margin-top:16px;padding:12px 14px;border:1px solid var(--border);font-size:12px;color:var(--text);line-height:1.85;white-space:pre-wrap}
.sch-notice-label{font-size:10px;letter-spacing:.15em;color:var(--gray);margin-bottom:6px}
@keyframes slideLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
.cal-slide-left{animation:slideLeft .2s ease}
.cal-slide-right{animation:slideRight .2s ease}

/* ── STYLIST / ABOUT ── */
.stylist-page{padding:28px 20px}
.stylist-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stylist-photo{width:75%;margin:0 auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;background:var(--light);margin-bottom:12px}
.stylist-name-en{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1rem;letter-spacing:.12em;color:var(--black);margin-bottom:2px;line-height:1.3}
.stylist-name-ja{font-size:10px;letter-spacing:.15em;color:var(--gray);margin-bottom:8px}
.stylist-role{font-size:9px;letter-spacing:.15em;color:var(--gray);margin-bottom:8px;text-transform:uppercase}
.stylist-bio{font-size:11px;color:var(--text);line-height:1.85}
.stylist-divider{width:16px;height:0.5px;background:var(--border);margin:8px 0}
.stylist-blog{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.stylist-blog-title{font-size:9px;letter-spacing:.25em;color:var(--gray);margin-bottom:8px;text-transform:uppercase}
.blog-post{padding:6px 0;border-bottom:1px dashed var(--border)}
.blog-post:last-child{border-bottom:none}
.blog-post-date{font-size:10px;color:var(--gray);margin-bottom:2px}
.blog-post img{max-width:100%;height:auto;display:block;margin:6px 0}
.blog-post p{font-size:11px;color:var(--text);line-height:1.8}

/* ── RESERVATION ── */
.res-page{padding:28px 24px}
.res-desc{font-size:12px;color:var(--gray);line-height:1.9;margin-bottom:28px}
.res-qr-wrap{text-align:center;padding:28px 0;border:1px solid var(--border);margin-bottom:20px}
.res-qr-label{font-family:'Cormorant Garamond',serif;font-size:1rem;letter-spacing:.2em;color:var(--black);margin-bottom:4px}
.res-qr-sub{font-size:11px;color:var(--gray);margin-bottom:16px}
.res-qr-img{width:160px;height:160px;display:block;margin:0 auto}
.res-tel{text-align:center;padding:20px;border:1px solid var(--border)}
.res-tel-label{font-size:10px;letter-spacing:.2em;color:var(--gray);margin-bottom:6px}
.res-tel-num{font-family:'Cormorant Garamond',serif;font-size:1.8rem;letter-spacing:.1em;margin-bottom:6px}
.res-tel-num a{color:var(--black);text-decoration:none}
.res-tel-note{font-size:12px;color:var(--gray);line-height:1.9}

/* ── BLOG ── */
.blog-page{padding:28px 24px}
.blog-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:24px}
.blog-tab{flex:1;padding:10px;background:none;border:none;border-bottom:2px solid transparent;font-family:'Noto Sans JP',sans-serif;font-weight:300;font-size:11px;letter-spacing:.1em;color:var(--gray);cursor:pointer;text-align:center}
.blog-tab.active{color:var(--black);border-bottom-color:var(--black)}
.blog-entry{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--border)}
.blog-entry:last-child{border-bottom:none}
.blog-entry-date{font-size:10px;color:var(--gray);margin-bottom:4px}
.blog-entry-author{font-size:10px;letter-spacing:.1em;color:var(--gray);margin-bottom:8px}
.blog-entry-content{font-size:13px;color:var(--text);line-height:1.9}
.blog-entry-content img{max-width:100%;height:auto;display:block;margin:10px 0;border:1px solid var(--border);max-height:500px;object-fit:cover}

/* ── NEW バッジ ── */
.new-badge{display:inline-block;font-size:8px;letter-spacing:.1em;color:#c0392b;border:0.5px solid #c0392b;padding:1px 4px;border-radius:2px;margin-left:6px;vertical-align:middle;animation:newblink 2s ease-in-out infinite}
@keyframes newblink{0%,100%{opacity:1}50%{opacity:0.4}}

/* ── FOOTER ── */
footer{padding:32px 20px;text-align:center;border-top:1px solid var(--border);margin-top:40px}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;letter-spacing:.3em;color:var(--black);margin-bottom:6px}
.footer-copy{font-size:10px;color:var(--gray);letter-spacing:.1em}

/* ── Responsive ── */
@media(max-width:480px){
  .stylist-grid{grid-template-columns:1fr}
  .map-info-line-wrap{flex-direction:column}
  .line-col{border-left:none;border-top:1px solid var(--border);flex:none;padding:20px 24px}
  .news-card-img{max-width:100%}
}

/* ── MENU コンテンツ ── */
.menu-content h2,.menu-content h3{font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:.85rem;letter-spacing:.2em;color:var(--black);padding-bottom:6px;margin:20px 0 4px;border-bottom:1px solid var(--border)}
.menu-content p{font-size:13px;color:var(--text);line-height:1.9;padding:6px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:8px}
.menu-content table{width:100%;border-collapse:collapse;font-size:13px}
.menu-content table td{padding:8px 4px;border-bottom:1px solid var(--border);color:var(--text)}
.menu-content table td:last-child{text-align:right;white-space:nowrap;color:var(--black)}