/* ============================================================
   NERURA麻布 — WordPress Theme Stylesheet
   ============================================================ */

/* ===== TOKENS: Colors ===== */
:root {
  --gold:        #998f5c;
  --gold-btn:    #a09249;
  --gold-deep:   #8d8048;
  --gold-tint:   #b4aa8c;
  --ink:         #333130;
  --ink-soft:    #555555;
  --ink-light:   #888888;
  --white:       #ffffff;
  --bg:          #ffffff;
  --bg-gray:     #f1f1f1;
  --bg-warm:     #f6f4f1;
  --bg-warm-2:   #f3f0ec;
  --line:        #dddddd;
  --line-warm:   #b3b3b3;
  --line-faint:  rgba(0,0,0,.04);
  --shadow-card: 0 6px 22px rgba(0,0,0,.05);
  --shadow-float:0 4px 16px rgba(0,0,0,.12);
  --img-spa:     #d8cfc4;
  --text-body:        var(--ink-soft);
  --text-heading:     var(--ink);
  --text-meta:        var(--ink-light);
  --surface-page:     var(--bg);
  --surface-card:     var(--white);
  --surface-band:     var(--bg-gray);
  --surface-warm:     var(--bg-warm);
  --accent:           var(--gold-btn);
  --accent-hover:     var(--gold-deep);
  --accent-soft:      var(--gold);
  --border-default:   var(--line);
  --border-warm:      var(--line-warm);
}

[data-theme="dark"] {
  --gold:        #c4b787;
  --gold-btn:    #b6a65f;
  --gold-deep:   #cabb75;
  --gold-tint:   #6f6647;
  --ink:         #f4f1ec;
  --ink-soft:    #cdc8c0;
  --ink-light:   #9b958c;
  --white:       #2b2926;
  --bg:          #1e1c1a;
  --bg-gray:     #262320;
  --bg-warm:     #242120;
  --bg-warm-2:   #1c1a18;
  --line:        rgba(255,255,255,.16);
  --line-warm:   rgba(255,255,255,.24);
  --line-faint:  rgba(255,255,255,.06);
  --shadow-card: 0 6px 22px rgba(0,0,0,.45);
  --shadow-float:0 4px 16px rgba(0,0,0,.55);
  --img-spa:     #39342f;
}

/* ===== TOKENS: Typography ===== */
:root {
  --font-display: "Noto Serif JP", serif;
  --font-serif:   "Noto Serif JP", serif;
  --font-sans:    "Noto Sans JP", sans-serif;
  --font-tel:     "Inter", sans-serif;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fs-hero:     4rem;
  --fs-display:  3rem;
  --fs-h2:       1.7rem;
  --fs-lead:     1.45rem;
  --fs-h3:       1.05rem;
  --fs-body:     .9rem;
  --fs-ui:       .82rem;
  --fs-small:    .72rem;
  --lh-tight:    1.1;
  --lh-snug:     1.35;
  --lh-normal:   1.9;
  --lh-relax:    2.1;
  --ls-display:  .04em;
  --ls-lead:     .05em;
  --ls-body:     .04em;
  --ls-label:    .3em;
  --ls-logo:     .32em;
}

/* ===== TOKENS: Spacing & Layout ===== */
:root {
  --sp-1:  .4rem;  --sp-2:  .7rem;  --sp-3:  1rem;
  --sp-4:  1.6rem; --sp-5:  2rem;   --sp-6:  2.6rem;
  --sp-7:  3rem;   --sp-8:  4rem;   --sp-9:  5rem;
  --section-pad-y:  5rem;
  --section-gap:    3rem;
  --container:       1233px;
  --container-text:  1100px;
  --container-narrow: 900px;
  --gutter:          2rem;
  --radius-none:   0;
  --radius-pill:   50%;
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --dur:           .3s;
  --dur-slow:      .6s;
  --hover-lift:    scale(1.08);
  --header-h:      96px;
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text-heading);
  background: var(--surface-page);
  line-height: var(--lh-normal);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html, body { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-tint); color: #fff; }

/* Theme cross-fade */
.site, .site *, .site *::before, .site *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow;
  transition-duration: .8s;
  transition-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .site, .site *, .site *::before, .site *::after { transition-duration: 0s; }
}

/* ===== SITE WRAPPER ===== */
.site { width: 100%; }
#news, .site section[id] { scroll-margin-top: var(--header-h); }

/* ===== COMPONENTS: Section Title ===== */
.section-title {
  display: flex; flex-direction: column; line-height: 1;
  margin-bottom: 1.6rem;
}
.section-title--left  { align-items: flex-start; text-align: left; }
.section-title--center { align-items: center; text-align: center; }
.section-title--right { align-items: flex-end; text-align: right; }
.section-title__en {
  font-family: var(--font-display);
  color: var(--accent-soft);
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
}
.section-title__first { font-size: 64px; }
.section-title__jp {
  font-size: var(--fs-small);
  color: var(--text-meta);
  letter-spacing: 0;
  margin-top: .5rem;
}

/* ===== COMPONENTS: Lead ===== */
.lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.6;
  letter-spacing: var(--ls-lead);
  color: var(--text-heading);
  margin-bottom: 1rem;
}
/* Section leads sit inside text wrappers whose `p` rules would otherwise
   shrink them to body size — keep them at the lead size. */
.concept__text p.lead,
.location__text p.lead,
.feature__text p.lead { font-size: var(--fs-lead); }

/* ===== COMPONENTS: Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  letter-spacing: .06em; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-align: center; white-space: nowrap;
  text-decoration: none;
}
.btn--md { font-size: .85rem; padding: .7em 1.4em; font-weight: 700; }
.btn--lg { font-size: 1rem; padding: .9em 2em; font-weight: 700; }
.btn--sm { font-size: .78rem; padding: .45em 1.4em; font-weight: 500; }
.btn--line { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--line:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--outline { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--outline:hover { background: var(--accent); color: #fff; }

/* ===== COMPONENTS: Phone Link ===== */
.phone-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-tel); font-weight: 700;
  text-decoration: none;
}
.phone-link svg { flex-shrink: 0; }

/* ===== COMPONENTS: Logo ===== */
.logo { display: inline-block; }
.logo img { display: block; }

/* ===== COMPONENTS: SNS Links ===== */
.sns-links { display: inline-flex; align-items: center; gap: .8rem; }
.sns-links a { display: block; opacity: .85; transition: opacity var(--dur) var(--ease); }
.sns-links a:hover { opacity: 1; }

/* ===== COMPONENTS: News Bar ===== */
.news-bar { background: var(--white); position: relative; overflow: hidden; }
/* gold hairline at the bottom + white light sweeping left→right every 6s */
.news-bar::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px;
  background: rgba(160,146,73,.5);
}
.news-bar::after {
  content: ""; position: absolute; bottom: 0; left: -6%; width: 6%; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: news-sweep 6s cubic-bezier(.45,.05,.35,1) infinite;
}
@keyframes news-sweep { 0% { left: -6%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .news-bar::after { animation: none; } }
.news-bar__inner {
  max-width: 100%; margin: 0 auto;
  padding: 1rem 0.5rem;
  display: flex; align-items: center; gap: 1.4rem;
  font-size: var(--fs-ui); min-height: 3.2rem;
}
.news-bar__content {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1; min-width: 0;
  transition: opacity .45s var(--ease);
}
.news-bar__content.fade { opacity: 0; }
.news-bar__tag {
  font-family: var(--font-tel); color: var(--accent-soft);
  letter-spacing: .1em; font-weight: 600; font-size: .9rem; flex: none;
}
.news-bar__tag.hidden { visibility: hidden; }
.news-bar__date { color: var(--text-meta); flex: none; }
.news-bar__title {
  color: var(--text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; transition: color var(--dur) var(--ease);
}
.news-bar__title:hover { color: var(--accent); }
.news-bar__more {
  flex: none; margin-left: 1.4rem;
  color: var(--accent); letter-spacing: .06em; white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.news-bar__more:hover { opacity: .7; }

/* ===== COMPONENTS: Blog Card ===== */
.blog-card {
  display: flex; gap: 1.8rem; align-items: flex-start;
}
.blog-card__img {
  flex: 0 0 130px; width: 130px; height: 130px;
  display: block; background-size: cover; background-position: center;
  background-color: var(--img-spa);
}
.blog-card__title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.05rem; margin-bottom: .5rem;
  letter-spacing: .03em; color: var(--text-heading);
}
.blog-card__title a { color: inherit; transition: color var(--dur) var(--ease); }
.blog-card__title a:hover { color: var(--accent); }
.blog-card__excerpt {
  font-size: .82rem; color: var(--text-body); line-height: 1.9;
}
.blog-card .btn { margin-top: .7rem; }

/* ===== COMPONENTS: Menu Body (フロントページ本文 = 料金) ===== */
.menu__body {
  max-width: 716px; margin: 2.5rem auto 0; padding: 0 24px;
  text-align: center;
}
.menu__body p {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.1rem; line-height: 2; color: var(--text-heading);
}
.menu__body table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  font-family: var(--font-serif);
}
.menu__body table th,
.menu__body table td {
  padding: 1rem 1.2rem; text-align: left;
  border-bottom: 1px solid var(--border-warm);
  font-size: 1rem; color: var(--text-heading);
}
.menu__body table th { font-weight: 600; font-size: 1.1rem; }
.menu__body table td:last-child { text-align: right; font-size: 1.3rem; }
.menu__body h2, .menu__body h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.2rem; margin: 2rem 0 1rem;
  letter-spacing: .04em; color: var(--text-heading);
}
.menu__body ul, .menu__body ol {
  list-style: none; padding: 0;
}
.menu__body li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 0; border-bottom: 1px solid var(--border-warm);
  font-family: var(--font-serif); font-size: 1rem; color: var(--text-heading);
}
.menu__body li:last-child { border-bottom: none; }

/* ===== COMPONENTS: Review Card ===== */
.review-card {
  background: var(--surface-card);
  padding: 1.6rem 1.4rem;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.review-card__quote {
  font-size: .85rem; color: var(--text-heading);
  line-height: 1.8; margin-bottom: 1rem;
}
.review-card__who { font-size: .75rem; color: var(--text-meta); }

/* ===== HEADER ===== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-faint);
}
.header__inner {
  max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 2.4rem; gap: 1rem;
}
.header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.header__top { display: flex; align-items: center; gap: 1rem; }
.gnav { display: flex; gap: 1.4rem; }
.gnav a { font-size: var(--fs-ui); letter-spacing: .05em; position: relative; padding-bottom: 2px; }
.gnav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--accent); transition: width var(--dur) var(--ease); }
.gnav a:hover::after { width: 100%; }

/* Mobile cluster (LINE button + hamburger) — shown under 861px */
.header__mobile { display: none; align-items: center; gap: .9rem; }
.header__line-mobile { display: none; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; }
.hamburger span { display: block; height: 2px; width: 26px; background: var(--ink); transition: var(--dur); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer (mobile nav — 2-column grid) */
.drawer { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--line); }
.drawer.open { display: flex; }
.drawer__grid { display: grid; grid-template-columns: 1fr 1fr; }
.drawer__grid a { padding: .9rem 2rem; border-bottom: 1px solid #eee; font-size: .9rem; }
.drawer__grid a:nth-child(odd) { border-right: 1px solid #eee; }
.drawer__cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.6rem 2rem 1.8rem; }
.drawer__cta a { padding: 0; border-bottom: none; }
.drawer__cta .btn { width: 100%; height: 44px; padding: 0; justify-content: center; }
.drawer__hours { font-size: .8rem; color: var(--text-meta); letter-spacing: .03em; }
.drawer__sns { display: flex; align-items: center; gap: 1.2rem; margin-top: .4rem; }

/* Theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-default); background: transparent;
  color: var(--text-heading); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ===== HERO ===== */
.hero { position: relative; display: flex; align-items: center; min-height: 360px; overflow:hidden; }
.hero__img {
  position: absolute; inset: 0;
  background: url("../images/mv-01.jpg") right center/cover no-repeat;
}
.hero__copy { position: relative; max-width: 100%; margin: 0 auto; padding: 0 2.4rem; width: 100%; }
.hero__copy h1 {
  font-family: var(--font-serif); font-weight: 600; font-size: 96px;
  line-height: var(--lh-snug); letter-spacing: .06em; color: #333130;
}
.hero__copy p { margin-top: 1.6rem; font-size: 20px; letter-spacing: .04em; line-height: 2; color: #555555; }
[data-theme="dark"] .hero__copy h1 { color: #333130; }
[data-theme="dark"] .hero__copy p { color: #555555; }

/* ===== SHARED BG (Concept → Method) ===== */
.restbg {
  background: url("../images/bg-img.png") top center/cover no-repeat, var(--bg);
}

/* ===== CONCEPT ===== */
.concept { position: relative; padding: calc(var(--section-pad-y) + 50px) 0 calc(3rem + 50px); }
.concept__inner { position: relative; max-width: 100%; margin: 0 auto; padding: 0 2.4rem; min-height: 460px; display: flex; align-items: flex-start; }
.concept__text { position: relative; z-index: 2; max-width: 460px; }
.concept__text p { font-size: var(--fs-body); color: var(--text-body); text-shadow: 0 0 5px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff, 0 0 10px #ffffff, 0 0 18px #ffffff, 0 0 28px #ffffff, 0 0 38px rgba(255, 255, 255, .85); }
.concept__img {
  position: absolute; right: 0; bottom: 0; top: auto; transform: none;
  width: 70%; max-width: 1000px; aspect-ratio: 1999 / 1050; z-index: 1;
  background: url("../images/concept-bg-new.png") center/contain no-repeat;
}

/* ===== LOCATION ===== */
.location { position: relative; padding: calc(var(--section-pad-y) + 50px) 0 calc(3rem + 50px); }
.location__inner { position: relative; max-width: 100%; margin: 0 auto; padding: 0 2.4rem; min-height: 460px; display: flex; justify-content: flex-end; align-items: flex-start; }
.location__text { position: relative; z-index: 2; text-align: left; max-width: 460px; }
.location__text p { font-size: var(--fs-body); color: var(--text-body); text-shadow: 0 0 5px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff,1px 1px 10px #ffffff, 0 0 10px #ffffff, 0 0 18px #ffffff, 0 0 28px #ffffff, 0 0 38px rgba(255, 255, 255, .85); }
.location__img {
  position: absolute; left: 0; bottom: 0; top: auto; transform: none;
  width: 70%; max-width: 1000px; aspect-ratio: 2000 / 1050; z-index: 1;
  background: url("../images/location-bg.png") center/contain no-repeat;
}

/* ===== METHOD ===== */
.method { padding: calc(3rem + 50px) 0 var(--section-pad-y); }
.method__head { max-width: var(--container-narrow); margin: 0 auto; padding: 0 2rem; }
.method__inner { max-width: var(--container-narrow); margin: 2rem auto 0; padding: 0 2rem; }
.method__block h4 { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; margin: 1.6rem 0 .4rem; color: var(--ink); }
.method__block h4:first-child { margin-top: 0; }
.method__block p { font-size: .88rem; color: var(--text-body); line-height: 2; }
.method__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.method__img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.method__img--1 { background-image: url("../images/method-img-01-new.jpg"); }
.method__img--2 { background-image: url("../images/method-img-02-new.jpg"); }

/* ===== BLOG ===== */
.site .blog {
  position: relative; max-width: 100%; margin: 0 auto; padding: 4rem 2.4rem var(--section-pad-y);
  background: url("../images/blog-bg.png") right bottom / 1440px auto no-repeat;
}
.blog__inner { max-width: var(--container-text); margin: 0 auto; }
.blog__list { margin-top: 2rem; display: flex; flex-direction: column; gap: 2.6rem; }
.blog__more { display: flex; justify-content: flex-end; margin-top: 2.6rem; }
.blog__more-link { font-size: var(--fs-ui); letter-spacing: .06em; color: var(--accent); transition: opacity var(--dur) var(--ease); }
.blog__more-link:hover { opacity: .7; }

/* ===== MENU ===== */
.menu { background: url("../images/bg-img.png") center center / cover no-repeat; padding: 4rem 0 var(--section-pad-y); }
.menu__head { text-align: center; }
.menu__body p strong {
  font-size: 2rem; line-height: 2; color: var(--text-heading);
  font-weight: 500;
}
.menu__body p strong s {
  text-decoration-color: red;
}

/* ===== CTA ===== */
.cta { background: var(--bg-gray); text-align: center; padding: 3.5rem 2rem; }
.cta__lead { font-family: var(--font-serif); font-size: 1.02rem; letter-spacing: .03em; color: var(--ink); }
.cta__row { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin: 1.6rem 0 1rem; flex-wrap: wrap; }
.cta__hours { font-size: .8rem; color: var(--text-meta); }
.cta .btn--line { width: 230px; height: 50px; padding: 0; font-size: 1rem; }

/* ===== INSIDE ===== */
.inside { max-width: 100%; margin: 0 auto; padding: 4rem 2rem var(--section-pad-y); text-align: center; background: url("../images/inside-bg.png") left top / 1440px auto no-repeat; }
.inside__inner { max-width: 1040px; margin: 0 auto; }
.inside__desc { font-size: .88rem; color: var(--text-body); margin: 0 auto 2.2rem; line-height: 2; max-width: 680px; }
.inside__hero { position: relative; aspect-ratio: 3/2; max-width: 760px; margin: 0 auto; background-size: cover; background-position: center; }
.inside__hero[data-img] { cursor: pointer; }
.placeholder { background: #DDDDDD url("../images/placeholder.png") center/cover no-repeat; }
.play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--dur) var(--ease); border: none; }
.play:hover { transform: var(--hover-lift); }
.play span { display: block; width: 0; height: 0; border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.inside__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 42px auto 0; max-width: 760px; }
.inside__cell { aspect-ratio: 3/2; padding: 0; width: 100%; border: none; cursor: pointer; transition: opacity var(--dur) var(--ease); background-size: cover; background-position: center; }
button.inside__cell { font: inherit; }
.inside__cell:hover { opacity: .8; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(40,38,36,.78); display: flex; align-items: center; justify-content: center; padding: 4vw; animation: lb-fade .25s var(--ease); }
.lightbox.hidden { display: none; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { width: min(900px, 92vw); aspect-ratio: 3/2; background: #DDDDDD url("../images/placeholder.png") center/cover no-repeat; background-size: cover; background-position: center; }
.lightbox__close { position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; border: none; background: #b6a65f; color: var(--ink); font-size: 1.7rem; line-height: 1; border-radius: 50%; cursor: pointer; transition: background var(--dur) var(--ease); }
.lightbox__close:hover { background: #cabb75; }

/* ===== FEATURE (Amenity / Hygiene) ===== */
.featurebg { background: url("../images/bg-img.png") center center / cover no-repeat; }
.feature { padding: 4.5rem 0; }
.feature__inner { max-width: 1000px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap); align-items: center; }
.feature__inner--imgleft .feature__img { order: -1; }
.feature__text p { font-size: .88rem; color: var(--text-body); }
.feature__img { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.amenity__img { background-image: url("../images/amenity-img.jpg"); }
.hygiene__img { background-image: url("../images/hygiene-img.jpg"); }

/* ===== REVIEW ===== */
.review {
  position: relative; max-width: 100%; margin: 0 auto; padding: 4.5rem 2.4rem var(--section-pad-y);
  background: url("../images/voice-bg.png") right top / 1440px auto no-repeat;
}
.review__inner { max-width: var(--container-text); margin: 0 auto; }
.review__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }

/* ===== ACCESS ===== */
.access { background: url("../images/bg-img.png") center center / cover no-repeat; text-align: center; padding: 4.5rem 2rem 4rem; }
.access__addr { margin-top: 1.5rem; font-size: .92rem; color: var(--ink); }
.access__block { margin-top: 1.4rem; font-size: .85rem; color: var(--text-body); line-height: 1.9; }
.access__h { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }

/* ===== MAP ===== */
.map { height: 480px; width: 100%; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.1); }

/* ===== FOOTER ===== */
.footer { background: #fff; padding: 3rem 2rem 2.5rem; text-align: center; }
.footer__inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.footer__info { text-align: left; }
.footer__row { display: flex; align-items: center; gap: 1.4rem; margin-bottom: .6rem; }
.footer__info p { font-size: .78rem; color: var(--text-body); line-height: 1.7; }
.footer__sns { display: flex; justify-content: center; margin: 1.6rem 0; }
.footer__company { display: inline-block; font-size: .82rem; text-decoration: underline; color: var(--ink); margin-bottom: 1rem; }
.copy { font-size: .72rem; color: var(--text-meta); }
.footer .btn--line { width: 160px; height: 36px; padding: 0; font-size: .8rem; }

/* ===== PAGE TOP ===== */
.pagetop { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-float); display: flex; align-items: center; justify-content: center; z-index: 90; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.pagetop.show { opacity: 1; pointer-events: auto; }
.pagetop:hover { background: var(--accent-hover); }
.pagetop span { display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); margin-top: 4px; }

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .header { background: rgba(30,28,26,.8); border-bottom: 1px solid var(--line-faint); }
[data-theme="dark"] .hamburger span { background: var(--ink); }
[data-theme="dark"] .drawer { background: var(--white); border-top: 1px solid var(--line); }
[data-theme="dark"] .drawer__grid a { border-bottom: 1px solid var(--line-faint); }
[data-theme="dark"] .drawer__grid a:nth-child(odd) { border-right: 1px solid var(--line-faint); }
[data-theme="dark"] .concept__text p, [data-theme="dark"] .location__text p { text-shadow: 0 0 6px #000000, 0 0 14px #000000, 0 0 22px rgba(0,0,0,.75); }
[data-theme="dark"] .restbg { background: linear-gradient(rgba(22,20,18,.9), rgba(22,20,18,.9)), url("../images/bg-img.png") top center/cover no-repeat, var(--bg); }
[data-theme="dark"] .featurebg { background: linear-gradient(rgba(22,20,18,.9), rgba(22,20,18,.9)), url("../images/bg-img.png") center center/cover no-repeat, var(--bg); }
[data-theme="dark"] .menu { background: linear-gradient(rgba(22,20,18,.92), rgba(22,20,18,.92)), url("../images/bg-img.png") center center/cover no-repeat, var(--bg); }
[data-theme="dark"] .access { background: linear-gradient(rgba(22,20,18,.92), rgba(22,20,18,.92)), url("../images/bg-img.png") center center/cover no-repeat, var(--bg); }
[data-theme="dark"] .inside { background: linear-gradient(rgba(22,20,18,.85), rgba(22,20,18,.85)), url("../images/inside-bg.png") left top/1440px auto no-repeat, var(--bg); }
[data-theme="dark"] .blog { background: linear-gradient(rgba(22,20,18,.8), rgba(22,20,18,.8)), url("../images/blog-bg.png") right bottom/1440px auto no-repeat, var(--bg); }
[data-theme="dark"] .review { background: linear-gradient(rgba(22,20,18,.8), rgba(22,20,18,.8)), url("../images/voice-bg.png") right top/1440px auto no-repeat, var(--bg); }
[data-theme="dark"] .concept__img, [data-theme="dark"] .location__img, [data-theme="dark"] .feature__img, [data-theme="dark"] .method__img { filter: brightness(.82); }
[data-theme="dark"] .footer { background: var(--white); }
[data-theme="dark"] .map iframe { filter: grayscale(.2) invert(.9) hue-rotate(180deg) brightness(.9); }
[data-theme="dark"] .news-bar { background: var(--white); }

/* ===== ARCHIVE & ARTICLE PAGES ===== */
.site .archive, .site .article { padding: 3rem 2.4rem var(--section-pad-y); background: var(--bg); }
.archive__inner, .article__inner { max-width: 820px; margin: 0 auto; }
.archive__head { margin: 1.5rem 0 2.6rem; }

/* Breadcrumb */
.crumbs { font-size: var(--fs-small); color: var(--text-meta); letter-spacing: .03em; }
.crumbs a { color: var(--text-meta); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { margin: 0 .6em; color: var(--border-default); }
.crumbs__current { color: var(--text-heading); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 3rem; }
.pager__num, .pager__next {
  font-family: var(--font-tel); font-size: .85rem; min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .8em;
  border: 1px solid var(--border-default); color: var(--text-heading);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pager__num:hover, .pager__next:hover { border-color: var(--accent); color: var(--accent); }
.pager__num.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager__next { letter-spacing: .04em; }

/* Article detail */
.article__head { margin: 1.6rem 0 1.8rem; }
.article__title {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem; line-height: 1.5;
  letter-spacing: .04em; color: var(--text-heading); margin-top: 1rem;
}
.article__date { font-family: var(--font-tel); font-size: .8rem; color: var(--text-meta); letter-spacing: .04em; }
.article__hero { width: 100%; aspect-ratio: 16/9; background: #DDDDDD url("../images/placeholder.png") center/cover no-repeat; margin-bottom: 2.6rem; }
.article__body > * { margin-bottom: 1.6rem; }
.article__inner .cta { margin-top: 3rem; }
.article__body p { font-size: .95rem; color: var(--text-body); line-height: 2.1; letter-spacing: .03em; }
.article__body h2 {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; letter-spacing: .04em;
  color: var(--text-heading); line-height: 1.6; margin: 2.6rem 0 1.2rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--border-default);
}
.article__figure { margin: 2.2rem 0; }
.article__figimg { width: 100%; aspect-ratio: 16/9; background: #DDDDDD url("../images/placeholder.png") center/cover no-repeat; }
.article__figure figcaption { font-size: .76rem; color: var(--text-meta); margin-top: .7rem; text-align: center; letter-spacing: .03em; }
.article__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--border-default); }
.article__navlink--prev { justify-self: start; }
.article__back { justify-self: center; }
.article__navlink--next { justify-self: end; }
.article__navlink { font-size: .85rem; color: var(--text-body); letter-spacing: .03em; transition: color var(--dur) var(--ease); }
.article__navlink:hover { color: var(--accent); }
.article__back {
  font-size: .82rem; letter-spacing: .06em; color: var(--accent); border: 1px solid var(--accent);
  padding: .7em 1.8em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.article__back:hover { background: var(--accent); color: #fff; }

.wp-block-separator {
    border-top: 1px solid;
}
.site p a {
  text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .gnav { gap: 1rem; }
  .gnav a { font-size: .74rem; }
  .hero__copy h1 { font-size: 3rem; }
}
@media (max-width: 860px) {
  .header__inner { padding: .6rem 1.2rem; }
  .header__right { display: none; }
  .header__mobile { display: flex; }
  .header__line-mobile { display: inline-flex; }
  .hamburger { display: flex; }
  .n2-ss-slider { height: 100vh; }
  .hero__img { background: url("../images/mv-01.jpg") center/cover no-repeat; }
  .hero__copy h1 { font-size: 2.4rem; }
  .concept__inner { min-height: 380px; }
  .location__inner { min-height: 380px; }
  .feature__inner { grid-template-columns: 1fr; }
  .feature__inner--imgleft .feature__img { order: 0; }
  .method__imgs { grid-template-columns: 1fr; }
  .inside__grid { grid-template-columns: 1fr 1fr; }
  .review__grid { grid-template-columns: 1fr; }
  .cta__lead { font-size: .95rem; }
  .footer__inner { flex-direction: column; gap: 1.4rem; }
  .footer__info { text-align: center; }
  .footer__row { flex-direction: column; gap: .8rem; }
  .article__nav { grid-template-columns: 1fr; gap: 1.2rem; }
  .article__nav > * { justify-self: center; }
  .alist { grid-template-columns: 1fr; gap: .9rem; }
  .alist__thumb { width: 100%; height: 200px; }
  .article__title { font-size: 1.55rem; }
}
@media (max-width: 480px) {
  .hero__copy h1 { font-size: 2rem; }
  .map { height: 340px; }
}


/* ================================================
   アニメーション　カスタムプロパティ
   出現演出の距離・時間・イージングをここで一元管理する。
   ================================================ */
:root {
  /* 出現演出のトークン
     --fade-distance: 初期位置のずらし量（スライド距離）
     --fade-duration: フェード/スライドの所要時間
     --fade-easing:   減速して止まる自然なイージング */
  --fade-distance:          48px;
  --fade-duration:          1s;
  --fade-easing:            cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   出現演出の本体
   プログレッシブエンハンスメント:
   - JS が動く環境では html.js が付与される。
     このときだけ初期状態を「透明＋ずらした位置」にし、
     .is-visible が付くまで隠す。
   - JS 無効・このスクリプトが届かない環境では html.no-js の
     ままになり、下記ルールが効かないため、要素は最初から
     通常表示される（コンテンツが消えない）。
   ================================================ */
.js .c-fade__item[data-fade-in] {
  opacity: 0;
  transform: translateY(var(--fade-distance));
  transition:
    opacity var(--fade-duration) var(--fade-easing),
    transform var(--fade-duration) var(--fade-easing);
  /* 不可視の間はクリック/フォーカス対象にしない（透明な要素の誤操作を防ぐ）。
     レイアウトは確保したまま、表示後に pointer-events を auto へ戻す。 */
  pointer-events: none;
  will-change: opacity, transform;
}

/* 出現方向の切り替え（初期位置のずらし方向だけを変える） */
.js .c-fade__item[data-fade-direction="down"] {
  transform: translateY(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="left"] {
  transform: translateX(calc(var(--fade-distance) * -1));
}

.js .c-fade__item[data-fade-direction="right"] {
  transform: translateX(var(--fade-distance));
}

/* 純フェード（動きなし）: transform を一切当てず、opacity だけで出現させる。
   初期状態は opacity: 0 のみ。translate を打ち消すのではなく最初から付与
   しないため、transition も opacity だけにして無駄な合成を避ける。 */
.js .c-fade__item[data-fade-direction="none"] {
  transform: none;
  transition: opacity var(--fade-duration) var(--fade-easing);
  will-change: opacity;
}

/* ビューポート進入後に付与される最終状態
   どの方向指定でも translate を 0 に戻し、本来の位置へ。
   will-change はワンショット表示の都合上、出現後はもう不要になる。
   CSS 側の最終状態で auto に戻すことで、表示後も合成レイヤーが残り
   続けるのを防ぐ（要素数が多いページでのメモリ常駐を回避）。 */
.js .c-fade__item.is-visible {
  opacity: 1;
  transform: translate(0, 0);
  /* 表示されたら操作可能に戻す。 */
  pointer-events: auto;
  will-change: auto;
}

/* ================================================
   prefers-reduced-motion: 動きを減らす設定への配慮
   前庭機能障害等で OS の「視差効果を減らす」を有効に
   しているユーザーには、フェード/スライドを行わず
   即時に最終状態（表示）で見せる。
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .c-fade__item[data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
    /* 即時表示されるため、表示と同時に操作可能にする
       （可視なのに操作不可になる不整合を防ぐ）。 */
    pointer-events: auto;
    will-change: auto;
  }
}