@charset "utf-8";
/* ふるさとデイサービス 蓮 - main stylesheet */

:root {
  /* Colors (蓮ブランドパレット) */
  --color-bg: #F5EDE0;
  --color-bg-alt: #E6DBCD;   /* tan: brand/intro/strip sections (XD) */
  --color-card: #F8F5F1;     /* intro card cream (XD) */
  --color-days: #2F3C43;     /* dark slate: 日々 section (XD) */
  --color-text: #3D2818;
  --color-text-muted: #7A5C45;
  --color-primary: #8B5A3C;
  --color-dark: #4A2F1C;
  --color-dark-text: #F5EDE0;
  --color-gold: #C19A3D;
  --color-border: #D8C9B0;
  --color-link: var(--color-primary);

  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --fs-base: 17px;
  --lh-base: 1.9;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  --container-max: 960px;
  --container-padding: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;   /* 装飾イラスト等のはみ出しによる左右ブレを防止 */
  max-width: 100%;
}
img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); line-height: 1.5; margin: 0 0 var(--sp-4); font-weight: 600; }
p { margin: 0 0 var(--sp-4); }
ul, ol { padding-left: 1.5em; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #fff;
  padding: var(--sp-2) var(--sp-4); z-index: 9999;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.al-c { text-align: center; }
.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-8);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.9375rem;
  transition: opacity 0.2s;
  font-family: var(--font-sans);
}
.btn:hover { opacity: 0.85; text-decoration: none; color: #fff; }
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-3) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.site-header__logo a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.125rem;
}
.site-header__logo img { max-height: 48px; width: auto; }
.site-header__contact-phone {
  font-family: var(--font-sans);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__contact-phone small {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 400;
}
.site-header__menu {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.site-header__menu a {
  color: var(--color-text);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item a {
  border-bottom-color: var(--color-primary);
  text-decoration: none;
}
.site-header__menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  padding: 0;
}
.site-header__menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 5px auto;
  position: relative;
}
.site-header__menu-toggle span::before,
.site-header__menu-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 2px; background: var(--color-text);
}
.site-header__menu-toggle span::before { top: -7px; }
.site-header__menu-toggle span::after { top: 7px; }

@media (max-width: 1023.98px) {
  .site-header__menu-toggle { display: block; }
  .site-header__nav {
    position: fixed;
    top: 0; right: -100%;
    width: 80%; max-width: 320px;
    height: 100vh;
    background: var(--color-bg);
    padding: var(--sp-12) var(--sp-6);
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 12px rgba(0,0,0,0.08);
  }
  .site-header__nav.is-open { right: 0; }
  .site-header__menu { flex-direction: column; gap: var(--sp-4); }
}

/* Footer (XD: nav → white phone pill → white logo → copyright) */
.site-footer {
  background: #402912;
  color: var(--color-dark-text);
  padding: var(--sp-16) 0 var(--sp-12);
  margin-top: 0;
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}
.site-footer__nav { margin: 0 0 var(--sp-12); }
.site-footer__menu {
  display: flex; gap: var(--sp-12);
  list-style: none; padding: 0;
  justify-content: center; flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-sans); font-size: 0.9375rem;
}
.site-footer__menu a { color: #fff; }
.site-footer__menu a:hover { color: var(--color-gold); text-decoration: none; }

/* White phone pill (same look as header) */
.site-footer__phone-box {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: #fff;
  border-radius: 14px;
  padding: var(--sp-2) var(--sp-8);
  margin: 0 0 var(--sp-8);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-decoration: none;
  line-height: 1.25;
}
.site-footer__phone-box .site-header__phone-icon { width: 30px; height: 30px; flex-shrink: 0; }
.site-footer__phone-box .site-header__phone-text { text-align: left; }
.site-footer__phone-box .site-header__phone-text small { display:block; font-size: 0.78rem; color: var(--color-dark); font-weight: 500; }
.site-footer__phone-box .site-header__phone-text strong { display:block; font-size: 1.5rem; color: var(--color-dark); font-weight: 700; letter-spacing: 0.03em; }

.site-footer__logo { margin: 0 0 var(--sp-6); }
.site-footer__logo img { height: 52px; width: auto; margin: 0 auto; display: block; }

.site-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.8;
  color: rgba(245,237,224,0.7);
  font-family: var(--font-sans);
}

/* Breadcrumb */
.breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-3) var(--container-padding);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); }
.breadcrumb a { color: var(--color-text-muted); }

/* Section */
.section { padding: var(--sp-20) 0; }
.section--alt { background: var(--color-bg-alt); }

.section-title {
  text-align: center;
  font-size: clamp(2.25rem, 4vw, 3.75rem);   /* XD: 60px */
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--sp-3);
}
.section-subtitle {
  text-align: center;
  font-family: var(--font-base);
  font-size: clamp(1.25rem, 2.4vw, 2.25rem);   /* XD: 36px */
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  margin: 0 0 var(--sp-12);
}

/* Hero */
.front-hero {
  min-height: 480px;
  padding: var(--sp-20) var(--container-padding);
  background: var(--color-bg);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-hero__inner { max-width: 800px; }
.front-hero__catch {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.7;
  margin: 0 0 var(--sp-4);
  color: var(--color-text);
  font-weight: 600;
}
.front-hero__title {
  font-size: 1.125rem; color: var(--color-text-muted);
  margin: 0; font-family: var(--font-sans); letter-spacing: 0.1em;
}

/* Intro */
.front-intro { padding: var(--sp-20) 0; }
.front-intro__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}
.front-intro__lead {
  font-size: 1.25rem;
  line-height: 2;
  margin: 0 0 var(--sp-8);
}
.front-intro__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.front-intro__photos img { border-radius: 8px; }

/* One day flow */
.front-flow {
  background: var(--color-dark);
  color: var(--color-dark-text);
  padding: var(--sp-20) 0;
  text-align: center;
}
.front-flow .section-title { color: var(--color-dark-text); }
.front-flow__lead {
  max-width: 640px; margin: 0 auto var(--sp-12);
  padding: 0 var(--container-padding);
}
.front-flow__cta { margin-top: var(--sp-8); }
.front-flow__cta .btn { background: var(--color-gold); color: var(--color-dark); }

/* News (front) */
.front-news { padding: var(--sp-20) 0; background: var(--color-bg); }
.news-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--sp-8);
  max-width: 720px;
}
.news-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.news-list__date {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  flex-shrink: 0;
  min-width: 90px;
}
.news-list__cat {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px var(--sp-3);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}
.news-list__title {
  flex: 1;
  color: var(--color-text);
  font-size: 0.9375rem;
}
.news-list__title:hover { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 640px) {
  .news-list__date { min-width: 0; }
  .news-list__title { flex-basis: 100%; }
}

/* Access */
.front-access { padding: var(--sp-20) 0; background: var(--color-bg-alt); }
.front-access__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 768px) {
  .front-access__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
.front-access__info dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.front-access__info dt { font-weight: 600; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.875rem; }
.front-access__info dd { margin: 0; }
.front-access__map { background: #ddd; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; }
.front-access__map iframe { width: 100%; height: 100%; border: 0; }

/* Page / Single */
.site-main { background: var(--color-bg); padding-bottom: var(--sp-20); }

.page-article,
.single-article {
  background: var(--color-card);
  max-width: 800px;
  margin: var(--sp-12) auto;
  padding: var(--sp-12) var(--sp-8);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(74,47,28,0.06);
}
.page-article__header,
.single-article__header { text-align: center; margin-bottom: var(--sp-8); padding: 0; }
.page-article__title,
.single-article__title {
  font-size: 1.625rem;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.single-article__meta {
  display: flex; justify-content: center; gap: var(--sp-4);
  font-family: var(--font-sans); font-size: 0.875rem; color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}
.single-article__cat {
  padding: 2px var(--sp-3);
  background: var(--color-bg);
  border-radius: 999px;
  color: var(--color-primary);
}
.single-article__thumb { margin: 0 auto var(--sp-8); border-radius: 8px; overflow: hidden; }
.single-article__pager ul {
  list-style: none; padding: 0;
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-12);
  font-family: var(--font-sans); font-size: 0.875rem;
}

/* News archive */
.archive-header {
  text-align: center;
  padding: var(--sp-12) var(--container-padding) var(--sp-6);
  max-width: 1200px;
  margin: 0 auto;
}
.archive-header__title {
  font-size: 1.875rem;
  margin: 0;
  display: inline-block;
  position: relative;
  padding: 0 var(--sp-6);
}
.archive-header__title::before,
.archive-header__title::after {
  content: ""; position: absolute; top: 50%;
  width: 32px; height: 1px; background: var(--color-primary);
}
.archive-header__title::before { left: -32px; }
.archive-header__title::after { right: -32px; }

.news-archive { max-width: 800px; margin: 0 auto; padding: 0 var(--container-padding); }
.news-archive__list { list-style: none; padding: 0; margin: 0; }
.news-archive__item {
  background: var(--color-card);
  border-radius: 6px;
  margin-bottom: var(--sp-3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.news-archive__item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74,47,28,0.1); }
.news-archive__link {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  color: inherit;
}
.news-archive__link:hover { text-decoration: none; }
.news-archive__date {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  min-width: 90px;
}
.news-archive__cat {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 2px var(--sp-3);
  background: var(--color-bg);
  border-radius: 999px;
  color: var(--color-primary);
  font-family: var(--font-sans);
}
.news-archive__title { flex: 1; font-size: 0.9375rem; color: var(--color-text); }
.news-archive__link:hover .news-archive__title { color: var(--color-primary); }
@media (max-width: 640px) {
  .news-archive__link { flex-wrap: wrap; }
  .news-archive__title { flex-basis: 100%; }
}

/* Pagination */
.pagination {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin: var(--sp-12) 0;
  font-family: var(--font-sans);
}
.pagination .page-numbers {
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-card);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-width: 40px;
  text-align: center;
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination .page-numbers:hover:not(.current) {
  background: var(--color-bg);
  text-decoration: none;
}

/* 404 */
.not-found { text-align: center; padding: var(--sp-20) 0; }
.not-found__title { font-size: 1.875rem; }
.not-found__desc { color: var(--color-text-muted); }

/* Service page */
.service-section { padding: var(--sp-16) 0; }
.service-section + .service-section { border-top: 1px dashed var(--color-border); }
.service-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .service-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .service-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  background: var(--color-card);
  padding: var(--sp-6);
  border-radius: 8px;
}
.service-card img { border-radius: 4px; margin-bottom: var(--sp-4); }
.service-card h3 { font-size: 1.0625rem; }

/* Editor content */
.page-article__content img,
.single-article__content img { border-radius: 4px; margin: var(--sp-4) 0; }
.page-article__content a,
.single-article__content a { color: var(--color-primary); text-decoration: underline; }
.page-article__content blockquote,
.single-article__content blockquote {
  border-left: 3px solid var(--color-gold);
  margin: var(--sp-6) 0; padding: var(--sp-2) var(--sp-6);
  background: var(--color-bg); border-radius: 0 4px 4px 0;
  color: var(--color-text-muted);
}


/* =====================================================
   Site-specific: 蓮 (ren) — XD-aligned v3
   ===================================================== */

/* Color extension */
:root {
  --color-accent: #E8A547;     /* hero highlight (笑顔/安心) */
  --color-flow-bg: #4A2F1C;
  --color-news-bg: #E6DBCD;   /* お便り section bg = tan (XD) */
}

.site-header__logo a img { max-height: 56px; width: auto; display: block; }

.illust {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}
.illust img { display: block; width: 100%; height: auto; }
section { position: relative; overflow: hidden; }

.hl {
  color: var(--color-accent);
  font-weight: 700;
}

/* ========================================
   HERO (full-bleed, crossfade slider, wave bottom)
   ======================================== */
.hero {
  position: relative;
  height: clamp(560px, 86vh, 860px);
  overflow: visible;        /* allow character feet to spill onto the dome below */
  z-index: 7;               /* sit above brand-block so feet aren't covered */
  background: #6BA9D8;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform-origin: center;
  transition: opacity 1.7s ease-in-out;
  will-change: opacity, transform;
  /* Every slide zooms continuously & independently, so crossfades never
     cause a transform jump (smooth in both directions). */
  animation: heroKenBurns 16s ease-in-out infinite alternate;
}
.hero__slide.is-active { opacity: 1; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active { animation: none; }
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero .hero__cloud-l { top: 6%;  left: 6%;   width: 200px; z-index: 2; }
.hero .hero__cloud-r { top: 4%;  right: 8%;  width: 220px; z-index: 2; }
.hero .hero__sun     { top: 4%;  left: 30%;  width: 100px; z-index: 2; opacity: 0.95; }
.hero .hero__granpa  { bottom: -18px; left: 3%;   width: 170px; z-index: 8; transform: rotate(-8deg); }
.hero .hero__granma  { bottom: -18px; right: 3%;  width: 170px; z-index: 8; transform: rotate(7deg); }
.hero .hero__dog     { bottom: 6px;   left: 19%;  width: 110px; z-index: 8; }
.hero .hero__cat     { bottom: 6px;   right: 19%; width: 100px; z-index: 8; }

.hero__catch {
  position: relative;
  z-index: 3;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--container-padding) 60px;
}
.hero__catch h1 {
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.8;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 20px rgba(0,0,0,0.15);
}
.hero__line1 { display: block; font-size: clamp(1.375rem, 3vw, 2.125rem); margin-bottom: var(--sp-4); letter-spacing: 0.03em; }
.hero__line2 { display: block; font-size: clamp(2rem, 5.5vw, 3.5rem); letter-spacing: 0.06em; }
.hero .hl { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero .hl--smile { color: #F25C6E; }   /* 笑顔: 赤系 */
.hero .hl--peace { color: #F2992E; }   /* 安心: オレンジ */

.hero__wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  width: 100%;
  height: 110px;
  display: block;
  z-index: 4;
}

/* ========================================
   BRAND BLOCK  (tan background, XD)
   ======================================== */
.brand-block {
  padding: var(--sp-4) 0 var(--sp-8);
  background: var(--color-bg-alt);
  text-align: center;
  position: relative;
  z-index: 1;               /* below hero so character feet overlap on top */
}
.brand-block__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.brand-block__logo { margin: 0; }
.brand-block__logo img {
  width: min(420px, 75%);
  height: auto;
  margin: 0 auto;
}

/* ========================================
   INTRO  (tan section, cream card)
   ======================================== */
.intro {
  padding: var(--sp-12) 0 var(--sp-16);
  background: var(--color-bg-alt);
  text-align: center;
  overflow: visible;        /* don't clip the origami crane wings */
}
/* Card holds origami (top-left) & ohajiki (bottom-right) overlapping its corners.
   High z-index + visible overflow so the whole crane shows. */
.intro .intro__origami { top: -48px; left: -40px;  width: 160px; z-index: 10; }
.intro .intro__ohajiki { bottom: -34px; right: -24px; width: 220px; z-index: 10; }
.intro__card { overflow: visible; }

.intro__card {
  position: relative;
  z-index: 2;
  width: 76%;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-16) var(--sp-16);
  background: var(--color-card);
  border-radius: 32px;
  box-shadow: 0 6px 30px rgba(74,47,28,0.07);
}
.intro__heading {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.7;
  margin: 0 0 var(--sp-12);
  color: var(--color-text);
}
.intro__body {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1.4vw, 1.5rem);   /* XD: 24px */
  line-height: 2.2;
  color: var(--color-text);
}
.intro__body p { margin: 0 0 var(--sp-6); }
.intro__photo {
  margin: var(--sp-12) auto 0;
  width: 60%;
  max-width: 600px;
  border-radius: 50%;            /* full ellipse (XD: 角丸100%) */
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(74,47,28,0.16);
}
.intro__photo img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* 3 tilted photos strip (top_days.png) on tan bg */
.intro__photos-strip {
  max-width: 1000px;
  margin: var(--sp-16) auto 0;
  padding: 0 var(--container-padding);
}
.intro__photos-strip img { width: 100%; height: auto; }

/* ========================================
   FLOW
   ======================================== */
.flow {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-dark-text);
}
.flow__overlay {
  background: rgba(47,60,67,0.70);   /* XD: mask opacity 70% */
  /* +5% padding on every side (XD) */
  padding: calc(var(--sp-16) + 5%) calc(var(--container-padding) + 5%) calc(var(--sp-20) + 5%);
  text-align: center;
  position: relative;
}
.flow__icon { margin: 0 0 var(--sp-4); }
.flow__icon img { width: 90px; height: auto; margin: 0 auto; display: block; filter: none; }
.flow__lead {
  max-width: 860px;
  margin: 0 auto var(--sp-12);
  font-size: clamp(1.0625rem, 1.4vw, 1.5rem);   /* XD: 24px */
  line-height: 2;
  color: var(--color-dark-text);
}

.flow__card {
  position: relative;
  width: 82%;
  max-width: 920px;
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-16) var(--sp-20);   /* taller card; button fully inside */
  background: var(--color-card);
  color: var(--color-text);
  text-align: center;
  font-size: clamp(1.0625rem, 1.3vw, 1.375rem);   /* ~22-24px */
  line-height: 2.1;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.flow__card p { margin: 0 0 var(--sp-4); }

.btn--gold-pill,
.btn--pill {
  display: inline-block;
  padding: var(--sp-4) var(--sp-16);
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, opacity 0.15s;
}
.btn--gold-pill,
.btn--pill {
  background: #E2475F;   /* brand rose (XD CTA) */
  color: #fff;
  box-shadow: 0 4px 10px rgba(226,71,95,0.3);
}
.btn--gold-pill:hover,
.btn--pill:hover { transform: translateY(-2px); opacity: 0.92; text-decoration: none; color: #fff; }

/* Illust overlap the card's bottom corners (XD) */
.flow__card .flow__yakiimo { position: absolute; bottom: -56px; left: -56px;  width: 190px; opacity: 1; z-index: 3; }
.flow__card .flow__corn    { position: absolute; bottom: -60px; right: -56px; width: 200px; opacity: 1; z-index: 3; }
/* CTA button fully inside the card; gap from text per XD (~159px design ≈ 5.5rem) */
.flow__cta {
  margin: 5.5rem 0 0;
  position: relative;
  z-index: 4;
}

.section-title--light { color: var(--color-dark-text) !important; }
.section-subtitle--gold { color: var(--color-gold) !important; }
.flow .section-title::before,
.section--dark .section-title::before { display: none; }

/* ========================================
   NEWS
   ======================================== */
.news {
  padding: var(--sp-16) 0 var(--sp-20);
  background: var(--color-news-bg);
  text-align: center;
}
.news__icon { margin: 0 0 var(--sp-6); }
.news__icon img { width: 140px; height: auto; margin: 0 auto; display: block; }
.news__inner {
  max-width: 860px;
  margin: var(--sp-8) auto 0;
  padding: 0 var(--container-padding);
  text-align: left;
  position: relative;
  z-index: 2;
}
.news-list { list-style: none; padding: 0; margin: 0 0 var(--sp-8); }
.news-list__item {
  border-bottom: 1px solid rgba(139,90,60,0.2);
}
.news-list__item:first-child { border-top: 1px solid rgba(139,90,60,0.2); }
.news-list__link {
  display: grid;
  grid-template-columns: 120px 1fr 24px;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-2);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.news-list__link:hover { background: rgba(255,255,255,0.5); text-decoration: none; }
.news-list__date {
  color: var(--color-text-muted);
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
}
.news-list__title {
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);   /* XD: 24px */
  font-weight: 900;                            /* Zen Maru Gothic Black */
  color: var(--color-text);
}
.news-list__arrow {
  color: var(--color-primary);
  font-size: 0.875rem;
  text-align: right;
}
.news__cta { margin-top: var(--sp-16); }       /* gap between list and button */

/* Grandpa/Grandma: larger, pulled toward center (XD: ~23% / ~77%) */
.news .news__granpa { bottom: 10px; left: 18%;  width: 115px; z-index: 3; }
.news .news__granma { bottom: 10px; right: 18%; width: 115px; z-index: 3; }

/* ========================================
   ACCESS MAP
   ======================================== */
.access-map {
  height: 320px;
  background: #ddd;
  padding: 0;
  overflow: hidden;
}
.access-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ========================================
   Mobile
   ======================================== */
@media (max-width: 767.98px) {
  /* Full-screen hero on mobile, same feel as PC */
  .hero { height: 88vh; min-height: 480px; }
  .hero__line1 { font-size: 1.125rem; }
  .hero__line2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero .hero__cloud-l { width: 130px; top: 8%; }
  .hero .hero__cloud-r { width: 130px; top: 5%; }
  .hero .hero__sun     { width: 72px; top: 5%; left: 8%; }
  /* Keep all characters visible, scaled down to fit narrow screens */
  .hero .hero__granpa  { width: 84px;  bottom: -10px; left: 1%; }
  .hero .hero__granma  { width: 84px;  bottom: -10px; right: 1%; }
  .hero .hero__dog     { width: 60px;  bottom: 4px;  left: 22%; }
  .hero .hero__cat     { width: 56px;  bottom: 4px;  right: 22%; }

  /* Hero-area logo (蓮) 10% smaller on mobile */
  .brand-block__logo img { width: 67.5%; }

  /* Intro: wider card on mobile (+10%) so text isn't cramped */
  .intro__card { width: 92%; padding: var(--sp-8) var(--sp-4) var(--sp-12); }
  .intro .intro__origami { display: block; width: 80px;  top: -24px; left: -8px; }
  .intro .intro__ohajiki { display: block; width: 110px; bottom: -22px; right: -6px; }

  /* 施設案内: wider card on mobile (+10%) + smaller illustrations at corners */
  .flow__card { width: 92%; padding: var(--sp-8) var(--sp-4) var(--sp-12); }
  .flow__card .flow__yakiimo { display: block; width: 90px;  bottom: -30px; left: -16px; }
  .flow__card .flow__corn    { display: block; width: 95px;  bottom: -34px; right: -16px; }

  /* CTA buttons: keep on one line on mobile */
  .btn--gold-pill, .btn--pill {
    padding: var(--sp-3) var(--sp-8);
    font-size: 1rem;
    white-space: nowrap;
  }

  /* ニュース: keep grandpa/grandma on mobile (smaller, near edges) */
  .news .news__granpa { display: block; width: 80px; left: 1%; bottom: 6px; }
  .news .news__granma { display: block; width: 80px; right: 1%; bottom: 6px; }
  .news-list__link { grid-template-columns: 88px 1fr 16px; gap: var(--sp-3); }
  .news-list__title { font-size: 1.125rem; }
}

/* ========================================
   Header override (XD: dark brown header)
   ======================================== */
.site-header {
  background: var(--color-dark);
  border-bottom: none;
}
.site-header__inner {
  max-width: 1280px;
  padding: var(--sp-3) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-6);
}
.site-header__logo a img,
.site-header__logo a {
  filter: brightness(0) invert(1);
  max-height: 48px;
}
.site-header__menu {
  justify-content: center;
  gap: var(--sp-8);
  margin: 0;
}
.site-header__menu a {
  color: #fff;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item a {
  color: var(--color-gold);
  border-bottom: 0;
  text-decoration: none;
}

.site-header__phone-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-card);
  color: var(--color-primary);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.site-header__phone-box:hover { text-decoration: none; opacity: 0.92; }
.site-header__phone-icon { font-size: 1.125rem; }
.site-header__phone-text small {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  font-weight: 400;
}
.site-header__phone-text strong {
  display: block;
  font-size: 1.0625rem;
  color: var(--color-primary);
  font-weight: 700;
}

.site-header__menu-toggle span,
.site-header__menu-toggle span::before,
.site-header__menu-toggle span::after {
  background: #fff;
}

@media (max-width: 1023.98px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__nav {
    background: var(--color-dark);
  }
  .site-header__menu a { color: #fff; }
}
@media (max-width: 640px) {
  .site-header__phone-box {
    padding: var(--sp-2) var(--sp-3);
  }
  .site-header__phone-text small { display: none; }
  .site-header__phone-text strong { font-size: 0.875rem; }
}

/* ========================================
   Header: hidden at top, slides down on scroll (okina-style)
   DARK BROWN bar, white logo + nav, white rounded phone box (XD).
   ======================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--color-dark);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}
.site-header.is-stuck { transform: translateY(0); }

/* Logo: white version image (logo_w.png). Clear any inherited invert filter
   on BOTH the anchor and the img (parent filter would whiten the whole logo). */
.site-header__logo a,
.site-header__logo a img { filter: none !important; }
.site-header__logo a img { max-height: 56px; width: auto; }

/* Nav: white */
.site-header__menu a { color: #fff; }
.site-header__menu a:hover,
.site-header__menu .current-menu-item a { color: var(--color-gold); }

/* Hamburger: white */
.site-header__menu-toggle span,
.site-header__menu-toggle span::before,
.site-header__menu-toggle span::after { background: #fff; }

/* Phone box: white rounded rectangle, brown text (XD-matched) */
.site-header__phone-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #fff;
  border-radius: 14px;
  padding: var(--sp-2) var(--sp-6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  line-height: 1.25;
}
.site-header__phone-box .site-header__phone-icon { width: 34px; height: 34px; display: block; flex-shrink: 0; }
.site-header__phone-box .site-header__phone-text small {
  display: block;
  color: var(--color-dark);
  font-size: 0.78rem;
  font-weight: 500;
}
.site-header__phone-box .site-header__phone-text strong {
  display: block;
  color: var(--color-dark);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Front page: hero at very top; header floats in on scroll */
.home .site-main { margin-top: 0; padding-bottom: 0; }   /* last section (map) meets footer directly */
.home .site-footer { margin-top: 0; }

/* Inner pages: header shown immediately, offset content */
body:not(.home) .site-header { transform: translateY(0); }
body:not(.home) .site-main { padding-top: 84px; }

/* ========================================
   Scroll reveal (fade-up) — okina-style
   ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
/* Stagger news list items slightly */
.news-list__item.is-visible { transition-duration: 0.7s; }
.news-list__item:nth-child(2).is-visible { transition-delay: 0.08s; }
.news-list__item:nth-child(3).is-visible { transition-delay: 0.16s; }
.news-list__item:nth-child(4).is-visible { transition-delay: 0.24s; }
.news-list__item:nth-child(5).is-visible { transition-delay: 0.32s; }

/* Decorative illustrations must never be hidden by reveal (they use their own
   absolute positioning/transforms); ensure they stay visible. */
.illust { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================
   施設案内ページ (template-service) — XD準拠
   ===================================================== */
.svc { background: var(--color-bg-alt); }

/* Page title */
.svc-pagehead { text-align: center; padding: var(--sp-12) var(--container-padding) var(--sp-8); }
.svc-pagehead__title { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; margin: 0; }

/* Hero */
.svc-hero { max-width: 1200px; margin: 0 auto var(--sp-16); padding: 0 var(--container-padding); }
.svc-hero img { width: 100%; height: auto; max-height: 440px; object-fit: cover; border-radius: 16px; box-shadow: 0 6px 24px rgba(74,47,28,0.12); }

/* Section + white card shared */
.svc-section { padding: 0 var(--container-padding) var(--sp-16); }
.svc-card {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-card);
  border-radius: 24px;
  padding: var(--sp-16) var(--sp-16) var(--sp-16);
  box-shadow: 0 6px 30px rgba(74,47,28,0.07);
}

/* Intro card */
.svc-intro { text-align: center; }
.svc-intro__title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.5; margin: 0 0 var(--sp-8); }
.svc-intro__body { max-width: 760px; margin: 0 auto; text-align: left; font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 2; }
.svc-intro__body p { margin: 0 0 var(--sp-6); }
.svc-intro__photos {
  position: relative;
  max-width: 760px;
  margin: var(--sp-12) auto 0;
  height: 420px;
}
.svc-intro__photos figure { position: absolute; margin: 0; width: 230px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 18px rgba(74,47,28,0.12); }
.svc-intro__photos figure img { width: 100%; height: 100%; object-fit: cover; }
.svc-intro__p1 { top: 0;    left: 8%; }
.svc-intro__p2 { top: -30px; right: 6%; }
.svc-intro__p3 { top: 150px; left: 38%; }
.svc-intro__bubbles { position: absolute; bottom: 0; left: 0; width: 200px; }
.svc-intro__bubbles img { width: 100%; height: auto; }
@media (max-width: 767.98px) {
  /* Photos: centered flex row, all fully visible, not cut/shifted */
  .svc-intro__photos {
    position: static; height: auto; max-width: none;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--sp-4); margin: var(--sp-8) auto 0; padding: 0;
  }
  .svc-intro__photos figure {
    position: static; top: auto; left: auto; right: auto;
    width: 40vw; max-width: 170px; flex: 0 0 auto;
  }
  .svc-intro__bubbles { display: none; }
}

/* Living heading */
.svc-living-head { text-align: center; padding: var(--sp-8) var(--container-padding) var(--sp-12); }
.svc-living-head__lead { margin: var(--sp-8) 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.5rem); line-height: 2; }

/* Feature cards (体・脳/心おどる/五感) */
.svc-feature__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.svc-feature__icon { width: 90px; height: 90px; display: block; }
.svc-feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.svc-feature__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; margin: 0; }
.svc-feature__body { max-width: 800px; margin: 0 auto var(--sp-12); text-align: center; font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 2; }

.svc-grid { display: grid; gap: var(--sp-6); margin: 0 auto var(--sp-6); max-width: 860px; }
.svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .svc-grid--2, .svc-grid--3 { grid-template-columns: 1fr; } }
.svc-photo { margin: 0; }
.svc-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 10px rgba(74,47,28,0.1); display: block; }
.svc-photo figcaption { margin-top: var(--sp-2); font-size: 0.9375rem; color: var(--color-text-muted); text-align: center; font-family: var(--font-sans); }

/* Day timeline */
.svc-day { padding: var(--sp-16) var(--container-padding) var(--sp-20); text-align: center; }
.svc-day__title { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; margin: 0 0 var(--sp-16); }
.svc-day__sun { width: 56px; height: 56px; }
.svc-day__sun img { width: 100%; height: 100%; }
.svc-day__inner { position: relative; max-width: 900px; margin: 0 auto; min-height: 720px; }
.svc-timeline { list-style: none; margin: 0; padding: 0; max-width: 560px; text-align: left; position: relative; }
.svc-timeline::before { content: ""; position: absolute; left: 37px; top: 14px; bottom: 14px; width: 2px; background: var(--color-dark); }
.svc-timeline__item { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-8); position: relative; }
.svc-timeline__time {
  flex-shrink: 0; width: 76px; text-align: center;
  background: var(--color-dark); color: #fff;
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 700;
  padding: var(--sp-1) 0; border-radius: 999px; position: relative; z-index: 1;
}
.svc-timeline__label { font-size: clamp(1rem, 1.3vw, 1.375rem); }
.svc-day__photos { position: absolute; right: 0; top: 60px; width: 280px; }
.svc-day__photos figure { margin: 0 0 var(--sp-12); border-radius: 50%; overflow: hidden; box-shadow: 0 6px 18px rgba(74,47,28,0.12); aspect-ratio: 1/1; }
.svc-day__photos figure:nth-child(2) { margin-left: 40px; width: 220px; }
.svc-day__photos figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .svc-day__photos { position: static; width: auto; display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-12); }
  /* Equal square photos (override nth-child width) so they don't distort */
  .svc-day__photos figure,
  .svc-day__photos figure:nth-child(2) {
    width: 28vw; max-width: 160px; min-width: 0; margin: 0;
    flex: 0 0 auto; aspect-ratio: 1 / 1;
  }
  .svc-day__inner { min-height: 0; }
  .svc-timeline { margin: 0 auto; }
}

/* 施設案内ページ モバイル微調整 */
@media (max-width: 767.98px) {
  /* 「デイサービス蓮での暮らし」を1行に収める */
  .svc-living-head .section-title { font-size: 1.5rem; white-space: nowrap; }
  /* カード左右余白を詰めて本文幅を確保 */
  .svc-card { width: 92%; padding: var(--sp-8) var(--sp-4); }
}

/* 施設情報 */
.svc-info { background: #fff; padding: var(--sp-20) var(--container-padding); }
.svc-info__title { text-align: center; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; margin: 0 0 var(--sp-16); }
.svc-info__list { max-width: 720px; margin: 0 auto; }
.svc-info__list > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-6); padding: var(--sp-3) 0; align-items: start; }
.svc-info__list dt { font-weight: 700; position: relative; padding-left: var(--sp-4); }
.svc-info__list dt::before { content: ""; position: absolute; right: 0; top: 0.1em; bottom: 0.1em; width: 1px; background: var(--color-border); }
.svc-info__list dd { margin: 0; line-height: 1.9; }
.svc-info__map-btn {
  display: inline-block; margin-top: var(--sp-2);
  background: #3aa739; color: #fff; font-family: var(--font-sans);
  padding: var(--sp-2) var(--sp-8); border-radius: 6px; font-size: 0.9375rem; font-weight: 700;
}
.svc-info__map-btn:hover { opacity: 0.9; text-decoration: none; color: #fff; }
@media (max-width: 600px) {
  .svc-info__list > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .svc-info__list dt { padding-left: 0; }
  .svc-info__list dt::before { display: none; }
}

/* =====================================================
   汎用固定ページ (page.php) — 個人情報保護方針など / XD準拠
   ===================================================== */
.page-default { background: var(--color-bg-alt); }
.page-default__head { text-align: center; padding: var(--sp-16) var(--container-padding) var(--sp-12); }
.page-default__title { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; margin: 0; }
.page-default__card {
  max-width: 920px;
  margin: 0 auto var(--sp-20);
  background: var(--color-card);
  border-radius: 24px;
  padding: clamp(var(--sp-8), 5%, var(--sp-16));
  box-shadow: 0 6px 30px rgba(74,47,28,0.07);
}
.page-default__thumb { margin: 0 0 var(--sp-8); border-radius: 10px; overflow: hidden; }
.page-default__content { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 2; }
.page-default__content h2 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--sp-12) 0 var(--sp-3);
}
.page-default__content h2:first-child { margin-top: 0; }
.page-default__content h3 { font-size: 1.0625rem; font-weight: 700; margin: var(--sp-8) 0 var(--sp-2); }
.page-default__content p { margin: 0 0 var(--sp-6); }
.page-default__content ul { padding-left: 1.4em; margin: 0 0 var(--sp-6); }
.page-default__content li { margin-bottom: var(--sp-2); }
.page-default__content a { color: var(--color-primary); text-decoration: underline; }

/* =====================================================
   お問合せページ (template-contact)
   ===================================================== */
.contact-lead { text-align: center; font-size: clamp(1.0625rem, 1.3vw, 1.375rem); line-height: 2; margin: 0 0 var(--sp-12); }

.contact-methods { display: grid; gap: var(--sp-6); margin: 0 auto var(--sp-12); max-width: 760px; }
@media (min-width: 700px) { .contact-methods { grid-template-columns: 1fr 1fr; } }

.contact-box {
  background: var(--color-bg-alt);
  border-radius: 16px;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.contact-box__label { font-weight: 700; margin: 0 0 var(--sp-4); font-size: 1.0625rem; }
.contact-box__tel {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--color-dark); font-family: var(--font-base);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none;
}
.contact-box__icon { width: 30px; height: 30px; }
.contact-box__line {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: #06C755; color: #fff; font-weight: 700;
  font-family: var(--font-base); font-size: 1.125rem;
  padding: var(--sp-3) var(--sp-12); border-radius: 999px; text-decoration: none;
  box-shadow: 0 4px 10px rgba(6,199,85,0.25);
  transition: transform 0.15s, opacity 0.15s;
}
.contact-box__line:hover { transform: translateY(-2px); opacity: 0.92; text-decoration: none; color: #fff; }
.contact-box__line-icon {
  background: #fff; color: #06C755; font-size: 0.75rem; font-weight: 800;
  padding: 1px 6px; border-radius: 6px; letter-spacing: 0.02em;
}
.contact-box__note { margin: var(--sp-3) 0 0; font-size: 0.875rem; color: var(--color-text-muted); }

.contact-access { max-width: 760px; margin: 0 auto; }
.contact-access h2 { text-align: center; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 700; margin: 0 0 var(--sp-6); }
.contact-access dl { margin: 0; }
.contact-access dl > div { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.contact-access dt { font-weight: 700; color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.9375rem; }
.contact-access dd { margin: 0; }
.contact-page .access-map { margin-top: 0; }
@media (max-width: 600px) {
  .contact-access dl > div { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* =====================================================
   Header: ロゴ + ハンバーガー / ドロワーメニュー（全画面共通）
   ===================================================== */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }

/* ハンバーガー（常時表示・白） */
.site-header__menu-toggle {
  display: inline-flex !important;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 48px; height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
}
.site-header__menu-toggle span:first-child {
  display: block; width: 26px; height: 2px; background: #fff; position: relative; margin: 0;
}
.site-header__menu-toggle span:first-child::before,
.site-header__menu-toggle span:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff;
}
.site-header__menu-toggle span:first-child::before { top: -7px; }
.site-header__menu-toggle span:first-child::after { top: 7px; }
.site-header__menu-toggle-label {
  font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.12em; color: #fff; margin-top: 6px;
}

/* ドロワー本体（右からスライドイン） */
.site-header__nav {
  position: fixed; top: 0; right: 0;
  width: min(86%, 360px); height: 100vh; height: 100dvh;
  background: var(--color-dark);
  padding: var(--sp-16) var(--sp-8) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateX(105%);
  transition: transform 0.35s ease;
  z-index: 200; overflow-y: auto;
  box-shadow: -6px 0 24px rgba(0,0,0,0.25);
}
.site-header__nav.is-open { transform: translateX(0); }

/* メニューリスト（縦・白） */
.site-header__nav .site-header__menu {
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  font-family: var(--font-base);
}
.site-header__nav .site-header__menu a {
  display: block; color: #fff; padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 1.0625rem; text-decoration: none; border-radius: 0;
}
.site-header__nav .site-header__menu a:hover,
.site-header__nav .site-header__menu .current-menu-item a { color: var(--color-gold); border-bottom-color: rgba(255,255,255,0.15); }

/* 閉じる × ボタン */
.site-header__close {
  position: absolute; top: var(--sp-3); right: var(--sp-4);
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  color: #fff; font-size: 2rem; line-height: 1;
}
.site-header__close:hover { color: var(--color-gold); }

/* ドロワー内 CTA（電話）— 全幅の白ピル */
.site-header__nav .site-header__phone-box {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; margin-top: var(--sp-6);
  background: #fff; border-radius: 14px; padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); text-decoration: none;
}
.site-header__nav .site-header__phone-box .site-header__phone-text { text-align: left; }
.site-header__nav .site-header__phone-box .site-header__phone-text small { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.site-header__nav .site-header__phone-box .site-header__phone-text strong { display: block; font-size: 1.375rem; color: var(--color-dark); font-weight: 700; letter-spacing: 0.02em; }
.site-header__nav .site-header__phone-icon { width: 28px; height: 28px; filter: none; }

/* オーバーレイ */
.site-header__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 150; }
.site-header__overlay[hidden] { display: none; }
body.nav-open { overflow: hidden; }

/* 施設案内(過ごす日々)セクション：モバイルで余白を詰めてカード幅を確保 */
@media (max-width: 767.98px) {
  .flow__overlay { padding: var(--sp-12) var(--sp-3) var(--sp-16); }
  .flow__card { width: 94%; padding: var(--sp-8) var(--sp-4) var(--sp-16); }
}

/* ハンバーガー: ラベルspanが旧ルールでバー化する不具合を打ち消す */
.site-header__menu-toggle .site-header__menu-toggle-label {
  width: auto; height: auto; background: none; margin: 6px 0 0; position: static;
}
.site-header__menu-toggle .site-header__menu-toggle-label::before,
.site-header__menu-toggle .site-header__menu-toggle-label::after { content: none; display: none; }