/*
Theme Name: Belmeil
Theme URI: https://belmeil.example.com
Author: Belmeil
Description: ヘッドスパに特化した美容室 Belmeil（ベルメイユ）のオリジナルWordPressテーマ。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: belmeil
*/

:root{
  --ink:#232C4A;
  --ink-soft:#2D3760;
  --ink-line:rgba(239,233,216,0.22);
  --paper:#F6F3EA;
  --paper-soft:#EBE7D9;
  --paper-line:rgba(35,35,35,0.10);
  --brass:#A9895A;
  --brass-bright:#C7A472;
  --sage:#7C8A72;
  --charcoal:#2A2A2A;
  --cream:#F4F0E5;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  background:var(--paper);
  color:var(--charcoal);
  font-weight:300;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{
  font-family:"Shippori Mincho", serif;
  font-weight:600;
  margin:0;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.screen-reader-text{position:absolute;left:-9999px;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- header ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:22px 0;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.site.solid{
  background:rgba(18,22,42,0.94);
  backdrop-filter:blur(8px);
  padding:14px 0;
  border-bottom:1px solid var(--ink-line);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{
  font-family:"Shippori Mincho", serif;
  font-size:1.15rem;
  letter-spacing:.06em;
  color:var(--cream);
}
.brand span{color:var(--brass-bright); font-style:italic; font-weight:400;}
.head-right{display:flex; align-items:center; gap:26px;}
.head-tel{color:var(--cream); font-size:.86rem; letter-spacing:.02em;}
.head-tel strong{font-family:"Shippori Mincho",serif; font-size:1rem; margin-left:6px;}
.head-reserve{
  border:1px solid var(--brass-bright);
  color:var(--brass-bright);
  padding:9px 20px;
  border-radius:2px;
  font-size:.82rem;
  letter-spacing:.03em;
  transition:background .3s ease, color .3s ease;
}
.head-reserve:hover{background:var(--brass-bright); color:var(--ink);}

nav.primary-nav ul{display:flex; gap:32px;}
nav.primary-nav a{
  color:var(--cream);
  font-size:.86rem;
  letter-spacing:.03em;
  opacity:.82;
  position:relative;
  padding-bottom:4px;
  transition:opacity .3s ease;
}
nav.primary-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--brass-bright);
  transition:width .35s ease;
}
nav.primary-nav a:hover{opacity:1;}
nav.primary-nav a:hover::after{width:100%;}

.menu-toggle{display:none; background:none; border:1px solid var(--ink-line); color:var(--cream); font-size:.75rem; letter-spacing:.05em; padding:8px 14px; border-radius:2px;}
@media (max-width:920px){
  nav.primary-nav{
    position:fixed; inset:0; top:0;
    background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transform:translateY(-100%);
    transition:transform .4s ease;
    z-index:49;
  }
  nav.primary-nav.open{transform:translateY(0);}
  nav.primary-nav ul{flex-direction:column; text-align:center; gap:26px;}
  nav.primary-nav a{font-size:1.1rem;}
  .head-tel{display:none;}
  .menu-toggle{display:block;}
}
@media (max-width:380px){
  .head-right{gap:12px;}
  .head-reserve{padding:8px 14px; font-size:.76rem;}
  .brand{font-size:1rem;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--ink);
  color:var(--cream);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero.has-image{background-size:cover; background-position:center;}
.hero .glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(38% 46% at 72% 30%, rgba(169,137,90,0.20), transparent 60%),
    radial-gradient(50% 60% at 18% 78%, rgba(124,138,114,0.12), transparent 65%);
  animation:breathe 12s ease-in-out infinite;
}
.hero.has-image .glow{background:linear-gradient(180deg, rgba(18,22,42,.35), rgba(18,22,42,.75));}
@keyframes breathe{
  0%,100%{ transform:scale(1) translateY(0); opacity:.9;}
  50%{ transform:scale(1.08) translateY(-1%); opacity:1;}
}
.hero .wrap{position:relative; z-index:2; padding-bottom:9vh; width:100%;}
.hero-meta{
  font-size:.78rem; letter-spacing:.08em; color:var(--brass-bright);
  margin-bottom:26px; opacity:0; transform:translateY(10px);
  animation:rise .9s ease forwards; animation-delay:.15s;
}
.hero h1{
  font-size:clamp(2.2rem, 5.6vw, 4.4rem);
  line-height:1.35;
  max-width:14ch;
  opacity:0; transform:translateY(16px);
  animation:rise 1s ease forwards; animation-delay:.4s;
}
.hero-sub{
  margin-top:26px;
  max-width:46ch;
  font-size:.98rem;
  color:rgba(239,233,216,0.82);
  opacity:0; transform:translateY(12px);
  animation:rise 1s ease forwards; animation-delay:.75s;
}
.hero-link{
  display:inline-block; margin-top:22px; font-size:.82rem; letter-spacing:.04em;
  color:var(--brass-bright); border-bottom:1px solid var(--brass-bright); padding-bottom:2px;
  opacity:0; animation:rise 1s ease forwards; animation-delay:.9s;
}
@keyframes rise{ to{opacity:1; transform:translateY(0);} }

.hero-foot{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end;
  margin-top:56px; border-top:1px solid var(--ink-line); padding-top:20px;
  opacity:0; animation:rise 1s ease forwards; animation-delay:1.05s;
}
.hero-foot .addr{font-size:.78rem; color:rgba(239,233,216,0.6); letter-spacing:.04em;}
.scroll-cue{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; color:rgba(239,233,216,0.55);}
.scroll-cue .line{width:1px; height:34px; background:rgba(239,233,216,0.35); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--brass-bright);
  animation:drip 2.4s ease-in-out infinite;
}
@keyframes drip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------- section shells ---------- */
section{padding:120px 0;}
@media (max-width:640px){ section{padding:84px 0;} }
.dark{background:var(--ink); color:var(--cream);}
.paper{background:var(--paper); color:var(--charcoal);}
.label{
  display:flex; align-items:center; gap:14px;
  font-size:.86rem; letter-spacing:.1em; margin-bottom:20px;
  font-family:"Shippori Mincho", serif;
}
.label .tick{width:26px; height:1px; background:var(--brass);}
.dark .label{color:var(--brass-bright);}
.paper .label{color:var(--brass);}

.head-row{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end;
  margin-bottom:76px;
}
@media (max-width:860px){ .head-row{grid-template-columns:1fr; gap:24px;} }
.head-row h2{font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.5;}
.head-row .kicker-text{font-size:.94rem; line-height:2; opacity:.85; max-width:42ch;}
.dark .head-row .kicker-text{color:rgba(239,233,216,0.78);}

/* ---------- concept list ---------- */
.concept-list{display:flex; flex-direction:column;}
.concept-item{
  display:grid; grid-template-columns:110px 1fr 1.1fr; gap:36px;
  padding:38px 0; border-top:1px solid var(--paper-line);
}
.dark .concept-item{border-top:1px solid var(--ink-line);}
.concept-item:last-child{border-bottom:1px solid var(--paper-line);}
.dark .concept-item:last-child{border-bottom:1px solid var(--ink-line);}
@media (max-width:760px){ .concept-item{grid-template-columns:1fr; gap:10px;} }
.concept-num{font-family:"Shippori Mincho",serif; font-size:1.6rem; color:var(--brass);}
.concept-item h3{font-size:1.2rem; line-height:1.6;}
.concept-item p{font-size:.92rem; line-height:1.95; opacity:.82; margin:0;}

/* ---------- about / salon overview ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
@media (max-width:860px){ .about{grid-template-columns:1fr;} }
.about-visual{
  aspect-ratio:4/5; border:1px solid var(--ink-line); position:relative; overflow:hidden;
  background:linear-gradient(160deg, #232B4E 0%, #171C36 55%, #0F1226 100%);
}
.about-visual::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(199,164,114,0.07) 0 2px, transparent 2px 34px);
}
.about-visual img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.about-visual .tag{position:absolute; left:24px; bottom:24px; z-index:2; font-size:.72rem; letter-spacing:.08em; color:rgba(239,233,216,0.55);}
.about blockquote{
  font-family:"Shippori Mincho", serif; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.8; margin:0 0 30px; color:var(--cream);
}
.about p{font-size:.92rem; color:rgba(239,233,216,0.75); max-width:44ch;}
.about .hero-link{color:var(--brass-bright); border-color:var(--brass-bright); animation:none; opacity:1;}

/* ---------- menu ---------- */
.menu-group-label{margin-bottom:10px;}
.menu-group{margin-top:56px;}
.menu-group:first-of-type{margin-top:0;}
.menu-list{border-top:1px solid var(--paper-line);}
.menu-item{
  display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--paper-line);
}
@media (max-width:640px){ .menu-item{grid-template-columns:1fr; gap:4px;} }
.menu-item h4{font-family:"Shippori Mincho",serif; font-weight:600; font-size:1.08rem;}
.menu-item .desc{font-size:.82rem; opacity:.68; margin-top:6px; max-width:48ch;}
.menu-item .dur{font-size:.8rem; color:var(--sage); white-space:nowrap;}
.menu-item .price{font-family:"Shippori Mincho",serif; font-size:1.05rem; white-space:nowrap;}
.menu-note{margin-top:28px; font-size:.78rem; opacity:.6;}
.cancel-policy{margin-top:64px; padding-top:40px; border-top:1px solid var(--paper-line);}
.cancel-policy h3{font-size:1.05rem; margin-bottom:16px;}
.cancel-policy p{font-size:.86rem; opacity:.75; max-width:60ch;}
.cancel-policy ul{margin-top:16px; font-size:.86rem;}
.cancel-policy li{display:flex; justify-content:space-between; max-width:420px; padding:8px 0; border-bottom:1px solid var(--paper-line);}

/* ---------- style gallery ---------- */
.style-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
@media (max-width:760px){ .style-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .style-grid{grid-template-columns:1fr;} }
.style-grid .cell{aspect-ratio:1/1; background:linear-gradient(160deg,#232B4E,#0F1226); position:relative; overflow:hidden;}
.style-grid .cell img{width:100%; height:100%; object-fit:cover;}
.style-more{display:inline-block; margin-top:30px; font-size:.82rem; letter-spacing:.04em; color:var(--brass); border-bottom:1px solid var(--brass); padding-bottom:2px;}

/* ---------- staff ---------- */
.staff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:760px){ .staff-grid{grid-template-columns:1fr; max-width:340px; margin:0 auto;} }
.staff-card{cursor:pointer; background:none; border:0; text-align:left; padding:0; color:inherit; width:100%;}
.staff-photo{aspect-ratio:3/4; overflow:hidden; background:linear-gradient(160deg,#DFDCCC,#C9C6B6); margin-bottom:18px;}
.staff-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.staff-card:hover .staff-photo img{transform:scale(1.04);}
.staff-card h3{font-size:1.1rem;}
.staff-role{font-size:.78rem; color:var(--brass); letter-spacing:.05em; margin-top:6px;}

.staff-modal{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center;
  background:rgba(18,22,42,0.88); padding:24px;
}
.staff-modal.open{display:flex;}
.staff-modal-inner{
  background:var(--paper); color:var(--charcoal); max-width:640px; width:100%;
  max-height:86vh; overflow-y:auto; position:relative; padding:44px;
}
@media (max-width:640px){ .staff-modal-inner{padding:30px 24px;} }
.staff-modal-close{position:absolute; top:18px; right:18px; background:none; border:0; font-size:1.3rem; color:var(--charcoal); line-height:1;}
.staff-modal-photo{aspect-ratio:4/3; overflow:hidden; margin-bottom:24px; background:var(--paper-soft);}
.staff-modal-photo img{width:100%; height:100%; object-fit:cover;}
.staff-modal h3{font-size:1.4rem;}
.staff-modal .staff-role{margin-bottom:20px;}
.staff-modal-body{font-size:.9rem; line-height:2;}

/* ---------- blog ---------- */
.blog-list{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media (max-width:860px){ .blog-list{grid-template-columns:1fr; gap:30px;} }
.blog-card{border-top:1px solid var(--ink-line); padding-top:20px;}
.blog-date{font-size:.76rem; color:var(--brass-bright); letter-spacing:.05em;}
.blog-card h3{font-size:1.02rem; margin-top:10px; line-height:1.7;}
.blog-card a:hover h3{color:var(--brass-bright);}
.blog-more{display:inline-block; margin-top:44px; font-size:.82rem; letter-spacing:.04em; color:var(--brass-bright); border-bottom:1px solid var(--brass-bright); padding-bottom:2px;}

/* ---------- access ---------- */
.access{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){ .access{grid-template-columns:1fr;} }
.access dl{display:grid; grid-template-columns:110px 1fr; row-gap:22px; font-size:.92rem;}
.access dt{color:var(--brass-bright); letter-spacing:.04em;}
.access dd{margin:0; color:rgba(239,233,216,0.85); white-space:pre-line;}
@media (max-width:480px){
  .access dl{grid-template-columns:1fr; row-gap:6px;}
  .access dt{margin-top:16px;}
  .access dt:first-child{margin-top:0;}
}
.map-box{border:1px solid var(--ink-line); min-height:320px; overflow:hidden;}
.map-box iframe{width:100%; height:100%; min-height:320px; border:0; filter:grayscale(.15) contrast(1.05);}

/* ---------- reserve / contact ---------- */
.reserve h2{font-size:clamp(1.8rem,4vw,3rem); line-height:1.5; max-width:16ch; margin-bottom:34px;}
.reserve-row{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px;}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; font-size:.9rem; letter-spacing:.04em;
  border-radius:2px; transition:transform .3s ease, background .3s ease, color .3s ease;
}
.btn-primary{background:var(--brass); color:var(--ink);}
.btn-primary:hover{background:var(--brass-bright); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--paper-line); color:var(--charcoal);}
.btn-ghost:hover{border-color:var(--charcoal); transform:translateY(-2px);}
.reserve-hours{margin-top:52px; padding-top:28px; border-top:1px solid var(--paper-line); font-size:.85rem; opacity:.75; max-width:52ch;}

/* WP contact form 7 / native comment form light reset (used if a form is embedded) */
.reserve form p{margin:0 0 18px;}
.reserve form label{display:block; font-size:.8rem; margin-bottom:8px; color:var(--charcoal);}
.reserve form input[type=text],
.reserve form input[type=email],
.reserve form input[type=tel],
.reserve form textarea{
  width:100%; border:1px solid var(--paper-line); background:transparent; padding:14px;
  font-family:inherit; font-size:.92rem; color:var(--charcoal); border-radius:2px;
}
.reserve form textarea{min-height:140px;}
.reserve form input[type=submit]{
  background:var(--brass); color:var(--ink); border:0; padding:14px 34px; font-size:.9rem; letter-spacing:.04em; border-radius:2px; cursor:pointer;
}
.reserve form input[type=submit]:hover{background:var(--brass-bright);}

/* ---------- footer ---------- */
footer.site-footer{background:var(--ink); color:rgba(239,233,216,0.6); padding:52px 0 34px;}
footer.site-footer .wrap{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;}
footer.site-footer .brand{margin-bottom:6px;}
footer.site-footer .fine{font-size:.72rem; letter-spacing:.03em;}
footer.site-footer nav ul{display:flex; gap:22px; font-size:.78rem; flex-wrap:wrap;}
footer.site-footer nav a:hover{color:var(--brass-bright);}
.social-icons{display:flex; gap:16px; margin-top:14px;}
.social-icons a{font-size:.76rem; letter-spacing:.03em; opacity:.75;}
.social-icons a:hover{opacity:1; color:var(--brass-bright);}

/* ---------- generic inner page (concept / salon-info templates) ---------- */
.page-hero{background:var(--ink); color:var(--cream); padding:180px 0 90px;}
.page-hero h1{font-size:clamp(1.9rem,4vw,3rem);}
.page-body{padding:100px 0;}
.page-body .entry-content{max-width:680px; font-size:.96rem; line-height:2.1;}
.page-body .entry-content h2{font-size:1.4rem; margin:48px 0 18px;}
.page-body .entry-content p{margin:0 0 22px;}

/* ---------- blog archive / single ---------- */
.archive-list{display:flex; flex-direction:column; max-width:760px; margin:0 auto;}
.archive-item{padding:34px 0; border-bottom:1px solid var(--paper-line);}
.archive-item .blog-date{display:block; margin-bottom:10px;}
.archive-item h2{font-size:1.15rem;}
.single-post{max-width:720px; margin:0 auto; padding:160px 24px 100px;}
.single-post .blog-date{display:block; margin-bottom:16px;}
.single-post h1{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:40px;}
.single-post .entry-content{font-size:.96rem; line-height:2.1;}
.single-post .entry-content p{margin:0 0 24px;}
.single-post .entry-content img{margin:30px 0;}