/*
Theme Name: hair salon nagi
Theme URI: https://example.com/
Author: 株式会社かねさわ
Description: 横浜の美容室向けオリジナルテーマ。フルワイドのファーストビュー、ギャラリーCPT、年別アコーディオンのお知らせ一覧、スマホ追従フッター(予約・電話)対応。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: nagi
*/

/* ==========================================================
   0. Tokens / Reset
========================================================== */
:root{
  --c-bg:      #f7f6f2;   /* 生成り */
  --c-bg-deep: #eeece6;
  --c-ink:     #24272a;   /* 墨 */
  --c-navy:    #33414c;   /* 夕凪ブルーグレー */
  --c-navy-d:  #232e37;
  --c-brass:   #a08348;   /* 真鍮 */
  --c-brass-l: #c3a86f;
  --c-line:    #dcd8cf;
  --c-white:   #ffffff;

  --f-en:   "Cormorant Garamond", serif;
  --f-min:  "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --f-go:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  --w-wide: 1560px;  /* PCヘッダー・ヒーローは広め */
  --w-main: 1120px;
  --w-text: 780px;

  --ease: cubic-bezier(.22,.9,.24,1);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-go);
  color:var(--c-ink);
  background:var(--c-bg);
  font-size:15px;
  line-height:2;
  letter-spacing:.06em;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.inner{ max-width:var(--w-main); margin:0 auto; padding:0 24px; }
.inner--wide{ max-width:var(--w-wide); }
.inner--text{ max-width:var(--w-text); }

/* ==========================================================
   1. Common parts
========================================================== */
.sec{ padding:120px 0; position:relative; }
.sec--tint{ background:var(--c-bg-deep); }
.sec--navy{ background:var(--c-navy-d); color:#eceae4; }

/* 見出し: 英字eyebrow + 明朝 + 真鍮の短罫線 */
.sec-head{ margin-bottom:56px; }
.sec-head .en{
  display:block;
  font-family:var(--f-en);
  font-size:13px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--c-brass);
  margin-bottom:14px;
}
.sec-head h2{
  font-family:var(--f-min);
  font-weight:600;
  font-size:clamp(26px,3.2vw,40px);
  letter-spacing:.14em;
  line-height:1.5;
}
.sec-head h2::after{
  content:"";
  display:block;
  width:52px; height:1px;
  background:linear-gradient(90deg,var(--c-brass),transparent);
  margin-top:22px;
}
.sec-head--center{ text-align:center; }
.sec-head--center h2::after{ margin-left:auto; margin-right:auto; background:linear-gradient(90deg,transparent,var(--c-brass),transparent); }
.sec--navy .sec-head h2{ color:#f2f0ea; }

.lead{ max-width:var(--w-text); font-size:15px; line-height:2.4; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-width:240px; padding:17px 36px;
  font-family:var(--f-min); font-size:14px; letter-spacing:.24em;
  border:1px solid var(--c-ink);
  color:var(--c-ink);
  position:relative; overflow:hidden;
  transition:color .45s var(--ease);
  z-index:1;
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--c-navy);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:-1;
}
.btn:hover{ color:#fff; }
.btn:hover::before{ transform:scaleX(1); }
.btn .arrow{ font-family:var(--f-en); transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(6px); }

.btn--fill{ background:var(--c-navy); border-color:var(--c-navy); color:#fff; }
.btn--fill::before{ background:var(--c-brass); }
.btn--ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:var(--c-navy-d); }

/* スクロールリビール */
.js-reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js-reveal.is-shown{ opacity:1; transform:none; }
.js-reveal-group > *{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js-reveal-group.is-shown > *{ opacity:1; transform:none; }
.js-reveal-group.is-shown > *:nth-child(1){ transition-delay:.05s; }
.js-reveal-group.is-shown > *:nth-child(2){ transition-delay:.17s; }
.js-reveal-group.is-shown > *:nth-child(3){ transition-delay:.29s; }
.js-reveal-group.is-shown > *:nth-child(4){ transition-delay:.41s; }
.js-reveal-group.is-shown > *:nth-child(5){ transition-delay:.53s; }
.js-reveal-group.is-shown > *:nth-child(6){ transition-delay:.65s; }
.js-reveal-group.is-shown > *:nth-child(7){ transition-delay:.77s; }
.js-reveal-group.is-shown > *:nth-child(8){ transition-delay:.89s; }

/* ==========================================================
   2. Header / Global nav
========================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  transition:background .5s var(--ease), box-shadow .5s, height .4s var(--ease);
}
.site-header .inner--wide{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.site-header.is-solid,
.site-header.is-inner{
  background:rgba(247,246,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line);
}
.site-header.is-solid{ height:68px; }
.brand{ display:flex; flex-direction:column; line-height:1.2; }
.brand .brand-en{
  font-family:var(--f-en); font-size:26px; font-weight:600;
  letter-spacing:.2em; color:#fff;
  transition:color .5s;
}
.brand .brand-ja{
  font-size:10.5px; letter-spacing:.3em; color:rgba(255,255,255,.85);
  margin-top:4px; transition:color .5s;
}
.site-header.is-solid .brand-en,
.site-header.is-inner .brand-en{ color:var(--c-ink); }
.site-header.is-solid .brand-ja,
.site-header.is-inner .brand-ja{ color:var(--c-navy); }

.gnav{ display:flex; align-items:center; gap:34px; }
.gnav ul{ display:flex; gap:32px; }
.gnav a{
  font-family:var(--f-min); font-size:13.5px; letter-spacing:.16em;
  color:#fff; position:relative; padding:6px 0;
  transition:color .5s;
}
.gnav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--c-brass);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.gnav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.site-header.is-solid .gnav a,
.site-header.is-inner .gnav a{ color:var(--c-ink); }

.gnav .nav-reserve{
  font-family:var(--f-min); font-size:13px; letter-spacing:.2em;
  color:#fff; background:var(--c-brass);
  padding:12px 28px; border-radius:999px;
  transition:background .4s, transform .4s var(--ease);
}
.gnav .nav-reserve:hover{ background:var(--c-navy); transform:translateY(-2px); }
.gnav .nav-reserve::after{ content:none; }

/* ハンバーガー */
.menu-toggle{
  display:none;
  width:48px; height:48px; position:relative; z-index:210;
}
.menu-toggle span{
  position:absolute; left:12px; width:24px; height:1.5px;
  background:#fff; transition:.45s var(--ease);
}
.site-header.is-solid .menu-toggle span,
.site-header.is-inner .menu-toggle span{ background:var(--c-ink); }
.menu-toggle span:nth-child(1){ top:17px; }
.menu-toggle span:nth-child(2){ top:24px; }
.menu-toggle span:nth-child(3){ top:31px; }
body.drawer-open .site-header{
  z-index:300;
  background:transparent !important;
  border-bottom:0 !important;
  backdrop-filter:none !important;
}
body.drawer-open .brand-en{ color:#fff !important; }
body.drawer-open .brand-ja{ color:rgba(255,255,255,.85) !important; }
body.drawer-open .menu-toggle span{ background:#fff !important; }
body.drawer-open .menu-toggle span:nth-child(1){ top:24px; transform:rotate(28deg); }
body.drawer-open .menu-toggle span:nth-child(2){ opacity:0; transform:translateX(10px); }
body.drawer-open .menu-toggle span:nth-child(3){ top:24px; transform:rotate(-28deg); }

/* ドロワー(モバイル) */
.drawer{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(160deg,var(--c-navy-d) 0%,#1b232a 100%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:90px 40px 120px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.drawer-open .drawer{ opacity:1; visibility:visible; }
.drawer nav ul li{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
body.drawer-open .drawer nav ul li{ opacity:1; transform:none; }
body.drawer-open .drawer nav ul li:nth-child(1){ transition-delay:.10s; }
body.drawer-open .drawer nav ul li:nth-child(2){ transition-delay:.16s; }
body.drawer-open .drawer nav ul li:nth-child(3){ transition-delay:.22s; }
body.drawer-open .drawer nav ul li:nth-child(4){ transition-delay:.28s; }
body.drawer-open .drawer nav ul li:nth-child(5){ transition-delay:.34s; }
body.drawer-open .drawer nav ul li:nth-child(6){ transition-delay:.40s; }
body.drawer-open .drawer nav ul li:nth-child(7){ transition-delay:.46s; }
.drawer nav a{
  display:flex; align-items:baseline; gap:16px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--f-min); font-size:17px; letter-spacing:.18em;
}
.drawer nav a .en{
  font-family:var(--f-en); font-size:11px; letter-spacing:.3em;
  color:var(--c-brass-l); text-transform:uppercase;
}
.drawer-cta{
  margin-top:36px; display:flex; gap:12px;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease) .52s, transform .6s var(--ease) .52s;
}
body.drawer-open .drawer-cta{ opacity:1; transform:none; }
.drawer-cta a{
  flex:1; text-align:center; padding:15px 0;
  font-family:var(--f-min); font-size:13.5px; letter-spacing:.18em;
  border-radius:999px;
}
.drawer-cta .d-reserve{ background:var(--c-brass); }
.drawer-cta .d-tel{ border:1px solid rgba(255,255,255,.5); }

/* ==========================================================
   3. Hero (フルワイド・ファーストビュー)
========================================================== */
.hero{
  position:relative; height:100svh; min-height:640px;
  display:flex; align-items:center;
  color:#fff; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-6% 0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(20,28,35,.35) 0%, rgba(20,28,35,.15) 45%, rgba(20,28,35,.55) 100%),
    linear-gradient(115deg, #3b4b58 0%, #2a3640 38%, #4a5a66 62%, #232e37 100%);
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero-bg.has-image{ background-blend-mode:multiply; }
/* 髪の艶をイメージした光の帯 */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    transparent 30%,
    rgba(255,246,225,.14) 46%,
    rgba(255,255,255,.22) 50%,
    rgba(255,246,225,.14) 54%,
    transparent 70%);
  transform:translateX(-120%) skewX(-8deg);
  animation:sheen 9s var(--ease) 1.4s infinite;
  pointer-events:none;
}
@keyframes sheen{
  0%{ transform:translateX(-120%) skewX(-8deg); }
  38%,100%{ transform:translateX(120%) skewX(-8deg); }
}
.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--w-wide);
  margin:0 auto; padding:0 48px;
}
.hero-title-en{
  font-family:var(--f-en); font-weight:500;
  font-size:clamp(72px,11vw,176px);
  letter-spacing:.08em; line-height:1;
  display:flex;
}
.hero-title-en .ch{
  display:inline-block;
  opacity:0; transform:translateY(.5em) rotate(4deg);
  animation:ch-in 1.1s var(--ease) forwards;
}
@keyframes ch-in{ to{ opacity:1; transform:none; } }
.hero-catch{
  margin-top:28px;
  font-family:var(--f-min); font-size:clamp(16px,2vw,22px);
  letter-spacing:.3em; line-height:2.2;
  opacity:0; animation:fade-up 1.2s var(--ease) 1s forwards;
}
.hero-sub{
  margin-top:14px; font-size:12.5px; letter-spacing:.24em;
  color:rgba(255,255,255,.8);
  opacity:0; animation:fade-up 1.2s var(--ease) 1.3s forwards;
}
@keyframes fade-up{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.hero-cta{
  margin-top:44px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; animation:fade-up 1.2s var(--ease) 1.55s forwards;
}
.hero-scroll{
  position:absolute; left:50%; bottom:28px; z-index:2;
  transform:translateX(-50%);
  font-family:var(--f-en); font-size:11px; letter-spacing:.4em;
  color:rgba(255,255,255,.75);
  padding-bottom:56px;
}
.hero-scroll::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:1px; height:48px; background:rgba(255,255,255,.6);
  animation:scroll-line 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scroll-line{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ==========================================================
   4. Front sections
========================================================== */
/* Concept */
.concept-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center;
}
.concept-copy .catch{
  font-family:var(--f-min); font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.16em; line-height:2; margin-bottom:28px;
}
.concept-visual{
  aspect-ratio:4/5; position:relative;
  background:
    linear-gradient(160deg,#c9c2b4 0%,#a9a294 50%,#8f8878 100%);
  background-size:cover; background-position:center;
}
.concept-visual::before{
  content:""; position:absolute; inset:16px;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.concept-visual .visual-caption{
  position:absolute; right:-14px; bottom:24px;
  writing-mode:vertical-rl;
  font-family:var(--f-en); font-size:11px; letter-spacing:.4em;
  color:var(--c-brass);
}

/* Menu */
.menu-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 72px;
  max-width:940px; margin:0 auto;
}
.menu-item{
  display:flex; align-items:baseline; gap:16px;
  padding:22px 4px;
  border-bottom:1px solid var(--c-line);
}
.menu-item .name{ font-family:var(--f-min); font-size:15.5px; letter-spacing:.12em; }
.menu-item .dots{ flex:1; border-bottom:1px dotted #b9b4a8; transform:translateY(-4px); }
.menu-item .price{ font-family:var(--f-en); font-size:17px; letter-spacing:.08em; color:var(--c-navy); }
.menu-note{ text-align:center; margin-top:28px; font-size:12.5px; color:#6d6a63; }
.sec-more{ text-align:center; margin-top:52px; }

/* Gallery */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gallery-card{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#c8c2b6; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery-card:hover img{ transform:scale(1.07); }
.gallery-card .ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-en); letter-spacing:.3em; font-size:12px; color:#fff;
  background:linear-gradient(150deg,#9aa5ad,#6d7a84 55%,#55636e);
  transition:transform 1.2s var(--ease);
}
.gallery-card:hover .ph{ transform:scale(1.07); }
.gallery-card .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(24,32,39,.75));
  color:#fff; font-size:12px; letter-spacing:.14em;
  opacity:0; transform:translateY(8px);
  transition:.5s var(--ease);
}
.gallery-card:hover .cap{ opacity:1; transform:none; }
.gallery-card .cap .cap-cat{
  display:block; margin-top:4px;
  font-size:10.5px; letter-spacing:.12em; color:var(--c-brass-l);
}
/* タッチ端末はキャプション常時表示 */
@media (hover:none){
  .gallery-card .cap{ opacity:1; transform:none; }
}

/* ギャラリー絞り込み */
.filter-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px; }
.filter-nav button, .filter-nav a{
  padding:9px 22px; border:1px solid var(--c-line);
  font-size:12.5px; letter-spacing:.16em; border-radius:999px;
  background:#fff; transition:.35s;
}
.filter-nav .is-active,
.filter-nav button:hover, .filter-nav a:hover{
  background:var(--c-navy); border-color:var(--c-navy); color:#fff;
}
.gallery-grid .is-hide{ display:none; }

/* Gallery archive(写真中心ページ) */
.gallery-grid--archive{ grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-grid--archive .gallery-card{ aspect-ratio:3/4; }
@media (max-width:900px){ .gallery-grid--archive{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* Column */
.column-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.column-card{ display:block; background:#fff; border:1px solid var(--c-line); transition:border-color .4s, transform .5s var(--ease); }
.column-card:hover{ border-color:var(--c-brass); transform:translateY(-4px); }
.column-card .thumb{
  aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(140deg,#b7c0c7,#8a97a1 55%,#6c7b86);
  position:relative;
}
.column-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.column-card:hover .thumb img{ transform:scale(1.06); }
.column-card .thumb .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-en); font-size:12px; letter-spacing:.3em; color:rgba(255,255,255,.85);
}
.column-card .body{ padding:22px 24px 26px; }
.column-card .meta{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.column-card .meta time{ font-family:var(--f-en); font-size:12.5px; letter-spacing:.14em; color:#77746a; }
.column-card .meta .cat{
  font-size:10px; letter-spacing:.16em;
  border:1px solid var(--c-brass); color:var(--c-brass);
  padding:3px 10px; border-radius:999px;
}
.column-card h3{
  font-family:var(--f-min); font-size:16px; letter-spacing:.08em; line-height:1.8;
  transition:color .35s;
}
.column-card:hover h3{ color:var(--c-navy); }
.column-card .excerpt{ margin-top:10px; font-size:12.5px; line-height:1.9; color:#6b685f;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:900px){ .column-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; gap:24px; } }

/* Stylist */
.stylist-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.stylist-card .photo{
  aspect-ratio:3/4; margin-bottom:20px;
  background:linear-gradient(155deg,#c7bfb0,#a49b8a 60%,#877e6d);
  background-size:cover; background-position:center;
  position:relative;
}
.stylist-card .photo::before{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(255,255,255,.5); pointer-events:none;
}
.stylist-card .role{ font-size:11.5px; letter-spacing:.28em; color:var(--c-brass); margin-bottom:6px; }
.stylist-card .name{ font-family:var(--f-min); font-size:19px; letter-spacing:.16em; }
.stylist-card .name .en{ font-family:var(--f-en); font-size:12px; letter-spacing:.24em; color:#8a8578; margin-left:10px; }
.stylist-card p{ margin-top:12px; font-size:13px; line-height:2; color:#54524c; }

/* News (front) */
.news-list li{ border-bottom:1px solid var(--c-line); }
.news-list li:first-child{ border-top:1px solid var(--c-line); }
.news-list a{
  display:grid; grid-template-columns:120px 110px 1fr auto;
  gap:20px; align-items:center;
  padding:24px 8px;
  transition:background .35s;
}
.news-list a:hover{ background:rgba(160,131,72,.06); }
.news-list time{ font-family:var(--f-en); font-size:13.5px; letter-spacing:.14em; color:#77746a; }
.news-list .cat{
  font-size:10.5px; letter-spacing:.18em; text-align:center;
  border:1px solid var(--c-brass); color:var(--c-brass);
  padding:4px 8px; border-radius:999px;
}
.news-list .title{ font-size:14px; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news-list .arrow{ font-family:var(--f-en); color:var(--c-brass); transition:transform .4s var(--ease); }
.news-list a:hover .arrow{ transform:translateX(6px); }

/* Instagram */
.insta-head-icon{ font-family:var(--f-en); letter-spacing:.3em; }
.insta-fallback{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
}
.insta-fallback .tile{
  aspect-ratio:1/1;
  background:linear-gradient(145deg,#a9b3ba,#7a8891 55%,#5d6c76);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-family:var(--f-en); font-size:11px; letter-spacing:.2em;
}
.insta-note{ margin-top:18px; font-size:12px; color:#8b887e; text-align:center; }

/* Access */
.access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.access-map{
  min-height:380px;
  background:linear-gradient(140deg,#d8d4c9,#c2bdb0);
  position:relative;
}
.access-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(35%); }
.info-table{ width:100%; border-collapse:collapse; }
.info-table th,.info-table td{
  padding:16px 8px; border-bottom:1px solid var(--c-line);
  font-size:14px; text-align:left; vertical-align:top;
}
.info-table th{
  width:110px; font-family:var(--f-min); font-weight:600;
  letter-spacing:.14em; color:var(--c-navy); white-space:nowrap;
}

/* CTA帯 */
.cta-band{ text-align:center; }
.cta-band .cta-catch{
  font-family:var(--f-min); font-size:clamp(20px,2.4vw,28px);
  letter-spacing:.2em; margin-bottom:14px; color:#f2f0ea;
}
.cta-band .tel{
  font-family:var(--f-en); font-size:clamp(30px,4vw,44px);
  letter-spacing:.1em; color:#fff; display:inline-block; margin:10px 0 4px;
}
.cta-band .hours{ font-size:12.5px; color:rgba(255,255,255,.72); margin-bottom:32px; }
.cta-band .cta-btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================
   5. 下層ページ共通
========================================================== */
.page-hero{
  height:340px; margin-top:var(--header-h);
  display:flex; align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(28,38,46,.25), rgba(28,38,46,.45)),
    linear-gradient(115deg,#42525f,#2b3844 55%,#4a5a66);
  background-size:cover; background-position:center;
  color:#fff;
}
.page-hero .inner--wide{ width:100%; padding-bottom:44px; }
.page-hero .en{
  font-family:var(--f-en); font-size:clamp(38px,5vw,64px);
  letter-spacing:.12em; line-height:1;
}
.page-hero .ja{ margin-top:10px; font-family:var(--f-min); font-size:14px; letter-spacing:.3em; }

.breadcrumb{ padding:16px 0; font-size:11.5px; letter-spacing:.1em; color:#8b887e; }
.breadcrumb a:hover{ color:var(--c-brass); }
.breadcrumb .sep{ margin:0 10px; color:#c4c0b4; }

/* 記事本文 */
.entry-body{ max-width:var(--w-text); margin:0 auto; }
.entry-body > *+*{ margin-top:1.6em; }
.entry-body h2{
  font-family:var(--f-min); font-size:24px; letter-spacing:.12em; line-height:1.7;
  padding:14px 0 14px 22px; margin-top:2.4em;
  border-left:3px solid var(--c-brass);
  background:linear-gradient(90deg,rgba(160,131,72,.08),transparent 70%);
}
.entry-body h3{
  font-family:var(--f-min); font-size:19px; letter-spacing:.1em;
  padding-bottom:10px; margin-top:2em;
  border-bottom:1px solid var(--c-line);
}
.entry-body a{ color:var(--c-navy); text-decoration:underline; text-underline-offset:4px; }
.entry-body ul{ list-style:none; padding-left:4px; }
.entry-body ul li{ position:relative; padding-left:20px; margin:.4em 0; }
.entry-body ul li::before{
  content:""; position:absolute; left:2px; top:.9em;
  width:8px; height:1px; background:var(--c-brass);
}
.entry-body ol{ padding-left:1.6em; }
.entry-body blockquote{
  padding:20px 26px; background:var(--c-bg-deep);
  border-left:3px solid var(--c-navy); font-size:14px;
}
.entry-meta{ display:flex; gap:16px; align-items:center; margin-bottom:36px; }
.entry-meta time{ font-family:var(--f-en); letter-spacing:.12em; color:#77746a; }
.entry-title{
  font-family:var(--f-min); font-size:clamp(22px,3vw,32px);
  letter-spacing:.1em; line-height:1.8; margin-bottom:18px;
}
.post-nav{
  display:flex; justify-content:space-between; gap:24px;
  margin-top:72px; padding-top:32px; border-top:1px solid var(--c-line);
}
.post-nav a{ font-size:13px; color:var(--c-navy); }
.post-nav a:hover{ color:var(--c-brass); }

/* ==========================================================
   6. News archive (年別アコーディオン)
========================================================== */
.cat-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:52px; }
.cat-nav a{
  padding:9px 22px; border:1px solid var(--c-line); background:#fff;
  font-size:12.5px; letter-spacing:.14em; border-radius:999px;
  transition:.35s;
}
.cat-nav a:hover, .cat-nav a.is-current{
  background:var(--c-navy); border-color:var(--c-navy); color:#fff;
}

.year-block{ margin-bottom:20px; }
.year-block--open .year-label{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--f-en); font-size:30px; letter-spacing:.14em;
  color:var(--c-navy); margin-bottom:8px;
}
.year-label .ja{ font-family:var(--f-go); font-size:12px; letter-spacing:.2em; color:#8b887e; }

.year-toggle{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:22px 8px;
  border-top:1px solid var(--c-line);
  font-family:var(--f-en); font-size:24px; letter-spacing:.14em;
  color:#6d7a84;
  transition:color .35s;
}
.year-block:last-child .year-toggle{ border-bottom:1px solid var(--c-line); }
.year-toggle .count{ font-family:var(--f-go); font-size:11.5px; letter-spacing:.12em; color:#9b978b; }
.year-toggle .icon{
  margin-left:auto; width:30px; height:30px; position:relative;
  border:1px solid var(--c-line); border-radius:50%;
  transition:.4s var(--ease);
}
.year-toggle .icon::before, .year-toggle .icon::after{
  content:""; position:absolute; top:50%; left:50%;
  width:12px; height:1px; background:currentColor;
  transform:translate(-50%,-50%);
}
.year-toggle .icon::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--ease); }
.year-toggle:hover{ color:var(--c-navy); }
.year-toggle[aria-expanded="true"]{ color:var(--c-navy); }
.year-toggle[aria-expanded="true"] .icon{ background:var(--c-navy); border-color:var(--c-navy); color:#fff; }
.year-toggle[aria-expanded="true"] .icon::after{ transform:translate(-50%,-50%) rotate(0deg); }

.year-panel{
  overflow:hidden; max-height:0;
  transition:max-height .7s var(--ease);
}
.year-panel .news-list{ padding:4px 0 28px; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:56px; }
.pagination .page-numbers{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-line); font-family:var(--f-en); font-size:14px;
  transition:.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover{ background:var(--c-navy); border-color:var(--c-navy); color:#fff; }

/* ==========================================================
   7. Menu page / Contact
========================================================== */
.price-sec{ margin-bottom:72px; }
.price-sec h3{
  font-family:var(--f-min); font-size:21px; letter-spacing:.18em;
  display:flex; align-items:center; gap:18px; margin-bottom:24px;
}
.price-sec h3::after{ content:""; flex:1; height:1px; background:var(--c-line); }
.price-sec h3 .en{ font-family:var(--f-en); font-size:12px; letter-spacing:.3em; color:var(--c-brass); }

.contact-intro{ text-align:center; margin-bottom:56px; }
.wpcf7 form{ max-width:720px; margin:0 auto; }
.wpcf7 form p{ margin-bottom:26px; }
.wpcf7 label{ display:block; font-size:13px; letter-spacing:.14em; margin-bottom:8px; font-family:var(--f-min); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea{
  width:100%; padding:14px 16px;
  border:1px solid var(--c-line); background:#fff;
  font:inherit; letter-spacing:.06em;
  transition:border-color .3s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus{
  outline:none; border-color:var(--c-brass);
}
.wpcf7 input[type="submit"]{
  display:block; margin:36px auto 0; min-width:260px;
  padding:17px 40px; cursor:pointer;
  background:var(--c-navy); color:#fff; border:1px solid var(--c-navy);
  font-family:var(--f-min); letter-spacing:.24em; font-size:14px;
  transition:.4s;
}
.wpcf7 input[type="submit"]:hover{ background:var(--c-brass); border-color:var(--c-brass); }
.plugin-notice{
  max-width:720px; margin:0 auto; padding:24px 28px;
  border:1px dashed var(--c-brass); font-size:13px; line-height:2; color:#6d6a63;
  background:#fff;
}

/* ==========================================================
   8. Footer / 追従フッター
========================================================== */
.site-footer{
  background:var(--c-navy-d); color:#d9d7cf;
  padding:80px 0 40px;
}
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:56px; margin-bottom:56px; }
.footer-brand .brand-en{ font-family:var(--f-en); font-size:30px; letter-spacing:.2em; color:#fff; }
.footer-brand .brand-ja{ font-size:11px; letter-spacing:.3em; margin-top:8px; color:rgba(255,255,255,.7); }
.footer-brand address{ font-style:normal; font-size:13px; margin-top:22px; line-height:2.2; }
.footer-nav h4, .footer-info h4{
  font-family:var(--f-en); font-size:12px; letter-spacing:.34em;
  color:var(--c-brass-l); margin-bottom:20px;
}
.footer-nav li{ margin-bottom:10px; }
.footer-nav a{ font-size:13px; letter-spacing:.12em; transition:color .3s; }
.footer-nav a:hover{ color:var(--c-brass-l); }
.footer-info p{ font-size:13px; line-height:2.2; }
.footer-sns{ margin-top:20px; }
.footer-sns a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-en); font-size:12px; letter-spacing:.26em;
  border:1px solid rgba(255,255,255,.35); border-radius:999px;
  padding:10px 24px; transition:.35s;
}
.footer-sns a:hover{ background:var(--c-brass); border-color:var(--c-brass); color:#fff; }
.copyright{
  text-align:center; padding-top:32px;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--f-en); font-size:11px; letter-spacing:.2em;
  color:rgba(255,255,255,.55);
}

/* スマホ追従フッター(予約・電話) */
.sticky-footer{
  display:none;
  position:fixed; left:12px; right:12px; bottom:12px; z-index:150;
  gap:10px;
  transform:translateY(120%);
  transition:transform .5s var(--ease);
}
.sticky-footer.is-shown{ transform:none; }
.sticky-footer a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  height:56px; border-radius:999px;
  font-family:var(--f-min); font-size:14px; letter-spacing:.18em;
  backdrop-filter:blur(8px);
}
.sticky-footer .sf-reserve{
  background:linear-gradient(120deg,var(--c-brass),#b3925a);
  color:#fff;
  box-shadow:0 8px 24px rgba(35,46,55,.28);
}
.sticky-footer .sf-tel{
  background:rgba(35,46,55,.92); color:#fff;
  box-shadow:0 8px 24px rgba(35,46,55,.28);
}
.sticky-footer .ic{ font-family:var(--f-en); font-size:12px; letter-spacing:.1em; }
body.has-sticky-footer{ }

/* ==========================================================
   9. Responsive
========================================================== */
@media (max-width:1100px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .insta-fallback{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  :root{ --header-h:68px; }
  .gnav ul, .gnav .nav-reserve{ display:none; }
  .menu-toggle{ display:block; }
  .sec{ padding:80px 0; }
  .concept-grid{ grid-template-columns:1fr; gap:44px; }
  .concept-visual{ max-width:480px; }
  .menu-list{ grid-template-columns:1fr; }
  .stylist-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:48px; }
  .access-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr; gap:40px; }
  .news-list a{ grid-template-columns:96px 1fr auto; grid-template-rows:auto auto; padding:18px 4px; gap:8px 14px; }
  .news-list .cat{ justify-self:start; }
  .news-list .title{ grid-column:1 / -1; white-space:normal; }
  .hero-inner{ padding:0 28px; }
  .page-hero{ height:260px; }
}
@media (max-width:640px){
  body{ font-size:14px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .insta-fallback{ grid-template-columns:repeat(3,1fr); }
  .sticky-footer{ display:flex; }
  .site-footer{ padding-bottom:110px; } /* 追従フッター分の逃げ */
  .btn{ min-width:0; width:100%; }
  .hero-cta{ flex-direction:column; max-width:320px; }
  .cta-band .cta-btns{ flex-direction:column; align-items:stretch; max-width:320px; margin:0 auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .js-reveal,.js-reveal-group>*{ opacity:1; transform:none; }
}

/* WP標準クラス最低限 */
.aligncenter{ margin-left:auto; margin-right:auto; }
.wp-caption{ max-width:100%; }
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}