/* WOOOLY 共通スタイル（トップページ以外） */
:root {
  --woooly-text: #3f3a35;
  --woooly-muted: #756f68;
  --woooly-accent: #d67f91;
  --woooly-accent-dark: #a95569;
  --woooly-cream: #fffaf2;
  --woooly-white: #fff;
  --woooly-border: rgba(92, 74, 62, .14);
  --woooly-shadow: 0 12px 32px rgba(76, 58, 46, .12);
  --woooly-radius: 22px;
  --woooly-content: 1200px;
  --woooly-ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
    scroll-behavior: smooth;
    touch-action: manipulation;
}

body {
    touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--woooly-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.8;
  background: var(--woooly-cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* マウス・タップ時の不要なフォーカス枠を抑える */
.side-menu a:focus:not(:focus-visible) {
    outline: none;
}

/* キーボード操作時はフォーカスを残す */
.side-menu a:focus-visible {
    outline: 3px solid rgba(214, 127, 145, 0.45);
    outline-offset: 3px;
    border-radius: 8px;
}
.skip-link {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  color: #fff;
  background: #3f3a35;
  border-radius: 8px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header,
.page-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 22px rgba(74,57,46,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner,
.site-header__inner {
  width: min(calc(100% - 40px), var(--woooly-content));
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo, .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo img, .logo img { width: auto; max-height: 52px; }

.breadcrumb,
.breadcrumbs {
  position: relative;
  z-index: 5;
  width: min(calc(100% - 40px), var(--woooly-content));
  margin: 18px auto 0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--woooly-muted);
  font-size: .875rem;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.breadcrumb ol, .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li:not(:last-child)::after,
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 7px; color: #aaa198; }
.breadcrumb a, .breadcrumbs a { text-decoration: none; }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--woooly-accent-dark); text-decoration: underline; }

main, .page-main { position: relative; z-index: 2; }
.container, .page-container, .content-inner {
  width: min(calc(100% - 40px), var(--woooly-content));
  margin-inline: auto;
}

.page-title { margin: 38px 0 26px; text-align: center; font-size: clamp(1.75rem, 4vw, 2.8rem); line-height: 1.35; letter-spacing: .08em; }
.page-lead { max-width: 760px; margin: 0 auto 38px; color: var(--woooly-muted); text-align: center; }

.card, .content-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--woooly-radius);
  box-shadow: var(--woooly-shadow);
}

/* 右側の開閉メニュー */
.menu-toggle,
.side-menu-toggle,
#menuToggle {
  position: fixed;
  z-index: 1100;
  top: 22px;
  right: 22px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--woooly-text);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--woooly-border);
  border-radius: 50%;
  box-shadow: var(--woooly-shadow);
  cursor: pointer;
  transition: transform .25s var(--woooly-ease), background .25s;
}
.menu-toggle:hover, .side-menu-toggle:hover, #menuToggle:hover { transform: scale(1.06); background: #fff; }
.menu-toggle:focus-visible, .side-menu-toggle:focus-visible, #menuToggle:focus-visible { outline: 3px solid rgba(214,127,145,.42); outline-offset: 3px; }

.side-menu,
.drawer-menu,
#sideMenu {
  position: fixed;
  z-index: 1050;
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  padding: 96px 28px 36px;
  color: var(--woooly-text);
  background: rgba(255,250,246,.98);
  box-shadow: -16px 0 42px rgba(63,48,38,.18);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .36s var(--woooly-ease), visibility .36s;
  overflow-y: auto;
}
.side-menu.is-open, .drawer-menu.is-open, #sideMenu.is-open,
body.menu-open .side-menu, body.menu-open .drawer-menu, body.menu-open #sideMenu {
  transform: translateX(0);
  visibility: visible;
}
.side-menu ul, .drawer-menu ul, #sideMenu ul { margin: 0; padding: 0; list-style: none; }
.side-menu a, .drawer-menu a, #sideMenu a {
  display: block;
  padding: 14px 12px;
  border-bottom: 1px solid var(--woooly-border);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s, padding-left .2s;
}
.side-menu a:hover, .drawer-menu a:hover, #sideMenu a:hover { padding-left: 18px; color: var(--woooly-accent-dark); }

.menu-overlay,
.drawer-overlay,
#menuOverlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(45,36,31,.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.menu-overlay.is-open, .drawer-overlay.is-open, #menuOverlay.is-open,
body.menu-open .menu-overlay, body.menu-open .drawer-overlay, body.menu-open #menuOverlay { opacity: 1; visibility: visible; }

.site-footer, footer {
  position: relative;
  z-index: 2;
  margin-top: 72px;
  padding: 36px 20px;
  color: #625a54;
  text-align: center;
  background: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.9);
}

@media (max-width: 767px) {
  .header-inner, .site-header__inner, .container, .page-container, .content-inner,
  .breadcrumb, .breadcrumbs { width: min(calc(100% - 28px), var(--woooly-content)); }
  .header-inner, .site-header__inner { min-height: 66px; }
  .site-logo img, .logo img { max-height: 44px; }
  .menu-toggle, .side-menu-toggle, #menuToggle { top: 14px; right: 14px; width: 48px; height: 48px; }
  .breadcrumb, .breadcrumbs { margin-top: 12px; padding: 8px 12px; font-size: .78rem; border-radius: 15px; }
  .page-title { margin-top: 28px; }
  .site-footer, footer { margin-top: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* メニューボタンの三本線 */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0;
  background-color: #3f3a35;
  border-radius: 999px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* メニューを開いたときに×印にする */
.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* 季節背景を隠さない */
.page-container,
.page-header,
main {
  background-color: transparent;
}

.page-container {
  position: relative;
  z-index: 1;
}