/* ==========================================================================
   かくれみのの森 — style.css
   Plain HTML/CSS/JS implementation (no build step, no framework).
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

img,
video,
iframe {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
}

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --color-primary: #c9782d;
  --color-primary-hover: #a85f2a;
  --color-secondary: #8b5a3c;
  --color-accent: #6f7c5f;
  --color-accent-dark: #4f6449;
  --color-background: #f6eee3;
  --color-surface: #ffffff;
  --color-surface-accent: #eadfc8;
  --color-text-primary: #4a4a40;
  --color-text-secondary: #6c665c;
  --color-divider: #e8dcc8;

  /* Fonts */
  --font-shippori: "Shippori Mincho", serif;
  --font-body: "Inter", sans-serif;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 20px;
  --header-height: 72px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 80px;
    --header-height: 88px;
  }
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

html,
body {
  /* .mobile-nav sits off-canvas via `transform: translateX(100%)` while
     closed — some engines still count that transformed (but off-screen)
     box toward the document's scrollable width. This guards against any
     such off-canvas element ever introducing real horizontal scroll. */
  overflow-x: hidden;
}

body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-shippori);
  font-weight: 600;
}

/* ---------- Layout utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: 40px;
}

.section--lg {
  padding-block: 56px;
}

@media (min-width: 768px) {
  .section {
    padding-block: 64px;
  }
  .section--lg {
    padding-block: 96px;
  }
}

.section--surface {
  background: var(--color-surface);
}
.section--surface-accent {
  background: var(--color-surface-accent);
}
.section--background {
  background: var(--color-background);
}
.section--accent {
  background: var(--color-accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Eyebrow / heading scale ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.16px;
  color: var(--color-primary);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .eyebrow {
    font-size: 13px;
    letter-spacing: 2.34px;
  }
}

.page-title {
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .page-title {
    font-size: 48px;
    line-height: 60px;
  }
}

.section-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .section-heading {
    font-size: 32px;
    line-height: 44px;
  }
}

.rule {
  height: 2px;
  width: 32px;
  margin: 0;
  background: var(--color-primary);
  border: 0;
  /* Used on both <div class="rule"> and <hr class="rule">. A bare <hr>
     carries a browser default `margin-inline: auto`, which — inside a
     column flex container (e.g. .hero-facilities) — centers it on the
     cross axis instead of respecting the container's `align-items:
     flex-start`, pulling it away from the left edge. `margin: 0` above
     resets that for every element this class is applied to. */
  align-self: flex-start;
}
@media (min-width: 768px) {
  .rule {
    width: 52px;
  }
}

.body-text {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
}
@media (min-width: 768px) {
  .body-text {
    font-size: 16px;
    line-height: 28px;
  }
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 32px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn-secondary:hover .icon-arrow path {
  stroke: #fff;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  transition: color 0.2s ease;
}
/* Every stacked, single-column mobile layout puts its CTA under
   left-aligned copy — center the button/link itself rather than the text
   around it, regardless of the parent's own align-items. Row-based groups
   (.hero__actions, .tag-grid, header nav) size and center themselves
   separately, so this only affects standalone CTAs. */
@media (max-width: 767px) {
  .btn,
  .link-arrow {
    /* align-self centers on a flex column's cross axis; justify-self does
       the equivalent for a CSS Grid parent (Quiet Camp, Green Topia…) —
       harmless no-ops on whichever axis/layout doesn't apply. */
    align-self: center;
    justify-self: center;
  }
  /* A long label (e.g. "グリーントピアフォレスト法人サイトへ") is wider
     than a narrow phone screen at the base nowrap sizing — with html/body
     clipping horizontal overflow (see base rules), that text was getting
     silently cut off rather than causing scroll. Let it wrap onto a second
     line instead, capped so the pill can't exceed the column width. */
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}
.link-arrow:hover {
  color: var(--color-primary-hover);
}
.link-arrow .icon-arrow {
  transition: transform 0.2s ease;
}
.link-arrow:hover .icon-arrow {
  transform: translateX(4px);
}

.icon-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.icon-arrow path {
  stroke: currentColor;
}

/* ---------- Horizontal-scroll-driven-by-vertical-scroll ----------
   Progressive enhancement added by js/main.js's initHScrollPin(): it
   wraps an already-horizontally-scrollable element (anything with
   overflow-x, e.g. `.table-wrap`) in these two wrappers so that
   scrolling the page down slides the wrapped content across first,
   then releases back to normal page scroll once fully seen. Without
   JS, or on viewports where there's nothing to scroll, `.hscroll-pin`
   never gets a height and this is a no-op — the wrapped element keeps
   working exactly as before (native horizontal swipe/scroll). */
.hscroll-pin {
  position: relative;
}

.hscroll-pin__sticky {
  position: sticky;
  top: var(--header-height, 0px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.25s ease;
}
/* Slides the header off-screen on downward mobile scroll (main.js toggles
   this class; it never applies at >=768px, so desktop stays fixed). */
.site-header--hidden {
  transform: translateY(-100%);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .site-header__bar {
    padding-inline: 80px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .brand {
    gap: 12px;
  }
}

.brand__mark {
  width: 40px;
  height: 40px;
}
@media (min-width: 768px) {
  .brand__mark {
    width: 48px;
    height: 48px;
  }
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-shippori);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .brand__name {
    font-size: 18px;
    font-weight: 600;
  }
}

.brand__sub {
  font-size: 6px;
  letter-spacing: 0.3px;
  color: var(--color-text-secondary);
}
@media (min-width: 768px) {
  .brand__sub {
    font-size: 10px;
  }
}

.main-nav {
  display: none;
  align-items: center;
  gap: 36px;
}
@media (min-width: 768px) {
  .main-nav {
    display: flex;
  }
}

.main-nav a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.main-nav a:hover {
  color: var(--color-primary);
}
.main-nav a[aria-current="page"] {
  font-weight: 600;
  color: var(--color-primary);
}

.header-cta {
  display: none;
}
@media (min-width: 768px) {
  .header-cta {
    display: inline-flex;
    flex-shrink: 0;
  }
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface-accent);
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.mobile-nav {
  position: fixed;
  inset-inline: 0;
  top: var(--header-height);
  bottom: 0;
  z-index: 40;
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.mobile-nav.is-open {
  transform: translateX(0);
}
@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 32px 20px;
}

.mobile-nav__list a {
  display: block;
  border-radius: 8px;
  padding: 16px 12px;
  font-size: 16px;
  font-weight: 500;
}
.mobile-nav__list a[aria-current="page"] {
  background: var(--color-surface-accent);
  color: var(--color-primary);
  font-weight: 600;
}

.mobile-nav__cta {
  margin-top: 16px;
}

body.nav-open {
  overflow: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-secondary);
  color: #fff;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 48px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    gap: 64px;
    padding-block: 72px 48px;
  }
}

.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}
/* The mark is a flat-color PNG (orange, for the light header) — recolor
   it white here so it reads against the footer's dark brown background. */
.site-footer__brand > img {
  filter: brightness(0) invert(1);
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 220px;
}

.site-footer__brand-name {
  font-family: var(--font-shippori);
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .site-footer__brand-name {
    font-size: 18px;
  }
}

.site-footer__brand-tagline {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__addr,
.site-footer__phone {
  font-size: 13px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.site-footer__social a {
  color: #fff;
  transition: opacity 0.2s ease;
}
.site-footer__social a:hover {
  opacity: 0.8;
}
.site-footer__social svg {
  width: 36px;
  height: 36px;
}

.site-footer__ig-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .site-footer__ig-note {
    font-size: 13px;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .site-footer__col {
    gap: 18px;
  }
}

.site-footer__col-title {
  font-weight: 700;
  letter-spacing: 0.7px;
}
@media (min-width: 768px) {
  .site-footer__col-title {
    font-weight: 600;
    letter-spacing: 1.3px;
  }
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
}
@media (min-width: 768px) {
  .site-footer__col ul {
    gap: 11px;
  }
}
.site-footer__col a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) {
  .site-footer__bottom {
    font-size: 13px;
  }
}

/* ---------- Fade-in on scroll ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Cards / misc shared ---------- */
.card {
  background: var(--color-surface);
  border-radius: 20px;
  box-shadow: 0 4px 16px 0 rgba(74, 74, 64, 0.08);
}

.rounded-photo {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.rounded-photo img,
.rounded-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-item {
  border: 1px solid var(--color-surface-accent);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 4px 16px 0 rgba(74, 74, 64, 0.08);
  overflow: hidden;
}
.accordion-item + .accordion-item {
  margin-top: 12px;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
}
@media (min-width: 768px) {
  .accordion-trigger {
    padding: 22px 26px;
  }
}

.accordion-trigger .q-mark {
  font-family: var(--font-shippori);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.accordion-trigger .q-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .accordion-trigger .q-text {
    font-size: 15px;
  }
}

.accordion-trigger .chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}
.accordion-item.is-open .chevron {
  transform: rotate(180deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
}
.accordion-panel-inner {
  overflow: hidden;
}
.accordion-panel p {
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-secondary);
}
@media (min-width: 768px) {
  .accordion-panel p {
    padding: 0 26px 24px;
  }
}

/* Instagram embed: neutralize the stray border/positioning it leaves
   behind if its own resize handshake never completes (see js/main.js). */
iframe.instagram-media {
  border: none !important;
  position: static !important;
}

/* ---------- Back-to-top button ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(74, 74, 64, 0.24);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
@media (min-width: 768px) {
  .back-to-top {
    right: 32px;
    bottom: 32px;
    width: 48px;
    height: 48px;
  }
}
.back-to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--color-primary-hover);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.25s ease;
  }
}

/* ---------- Mobile fixed footer nav (Reservation / Access shortcuts) ----------
   Always-on quick access to the two highest-intent pages while browsing on
   a phone; desktop already has both in the header. */
.mobile-footer-nav {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px 0 rgba(74, 74, 64, 0.1);
  /* Hidden until scrolled past the same threshold as .back-to-top (see
     main.js) — arriving at the top of a fresh page shouldn't immediately
     cover content with a bar the visitor hasn't earned by scrolling yet. */
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-footer-nav.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .mobile-footer-nav {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-footer-nav {
    transition: opacity 0.25s ease;
  }
}
.mobile-footer-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.mobile-footer-nav__item svg {
  width: 20px;
  height: 20px;
}
.mobile-footer-nav__item[aria-current="page"] {
  color: var(--color-primary);
}
.mobile-footer-nav__item + .mobile-footer-nav__item {
  border-left: 1px solid var(--color-divider);
}
/* Keep the fixed bar from covering the last section's content / footer. */
@media (max-width: 767px) {
  body {
    padding-bottom: 60px;
  }
}

/* ---------- Decorative edge branches ----------
   Leafy watercolor branches pinned to a section's true left/right edge
   (not the padded container) so they read as reaching into frame from
   just outside it — free to overlap content and to bleed off-screen
   entirely. The host section needs `position: relative`.

   Per instance: set `top` or `bottom`, and `left`/`right` (negative
   values push more of the branch past the edge, out of view), `width`,
   `--r` (resting tilt, signed deg) and `--delay` (stagger, seconds).
   Add `data-edge="left|right"` to anchor the sway's pivot to the edge
   the branch grows from. */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: clamp(120px, 13vw, 230px);
  animation: decor-sway 5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.decor[data-edge="left"] {
  left: 0;
  transform-origin: bottom left;
}
.decor[data-edge="right"] {
  right: 0;
  transform-origin: bottom right;
}
/* Every decoration (edge-growing leaf/branch and photo-corner camp-gear
   alike) is hand-tuned in pixels against the two-column desktop layout.
   Below 768px those columns stack into one, so the same fixed offsets
   land on top of the copy instead of beside it — hide decorations
   entirely on mobile rather than let them overlap the stacked content. */
@media (max-width: 767px) {
  .decor {
    display: none;
  }
}
.decor img {
  display: block;
  width: 100%;
  height: auto;
}
/* Camp-gear illustrations (lantern, table, firewood…) read as objects
   sitting in the scene, not living branches — pinned to the photo/card
   corner like a frame ornament, with no sway. */
.decor--still {
  animation: none;
  transform: rotate(var(--r, 0deg));
}
/* A still item positioned beside a short text block only has room once the
   window is wide enough that the fixed left offset clears the text without
   crowding the container's edge — hide it below that width rather than
   let it overlap the copy or hang off-screen. */
.decor--beside-text {
  display: none;
}
@media (min-width: 1100px) {
  .decor--beside-text {
    display: block;
  }
}
/* Keep a section's real content above the decoration without having to
   remember to add z-index everywhere content is authored. Excludes a
   sibling .decor itself — two decorations can sit back-to-back (a branch
   plus a still camp-gear item) and the second must stay absolutely
   positioned, not get pulled into flow by this rule. */
.decor + *:not(.decor) {
  position: relative;
  z-index: 1;
}

@keyframes decor-sway {
  0%,
  100% {
    transform: rotate(calc(var(--r, 0deg) - 2.5deg));
  }
  50% {
    transform: rotate(calc(var(--r, 0deg) + 2.5deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .decor {
    animation: none;
  }
}