@charset "UTF-8";
/*
Theme Name: YUMESAKI ORGANIC STAND
Theme URI: 
Author: 
Author URI: 
Description: 
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yumesaki-organic-stand
*/

/* =========================================================
   1. Base Styles (Variables & Resets)
   ========================================================= */
:root {
  /* Colors */
  --color-primary: #506449; /* top h2, top button, top icon, menu h1, card h4 */
  --color-primary-light: #e2ead3; /* top approach bg, menu button bg, card tab */
  --color-secondary: #59614f; /* menu h2, menu button selected bg, card h3 */

  --color-bg-main: #f9f9f9;
  --color-bg-footer: #eeeeee;

  --color-text-main: #1a1c1c; /* top h3 */
  --color-text-body: #454840; /* top p, card text */
  --color-text-body-alt: #45483e; /* menu p */
  --color-text-muted: #626a57; /* menu button text, card tab text */
  --color-white: #ffffff;

  --color-banner-text-1: #dae8bc;
  --color-banner-text-2: #ffe174;

  --color-accent-yellow: #fde955; /* price bg */
  --color-text-yellow: #746800; /* price text */
  --color-primary-lighter: #d2e9c7; /* access divider, contact separator */
  --color-accent-red: #9b2335; /* access map link */
  --color-social-green: #566340; /* social section heading */

  /* Typography */
  --font-main: "Zen Kaku Gothic New", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-size-xs: 12px; /* card tab */
  --font-size-sm: 14px; /* top button, menu button, card h4 */
  --font-size-md: 16px; /* top p, card text, price */
  --font-size-lg: 18px; /* menu p */
  --font-size-xl: 24px; /* top h3, banner p, card h3 */
  --font-size-xxl: 32px; /* top h2, menu h2 */
  --font-size-huge: 48px; /* banner h2, menu h1 */

  /* Layout & Animation */
  --container-width: 1200px;
  --header-height: 80px;

  --transition-fast: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Borders & Neutrals */
  --color-border: #e2e2e2;
  --color-bg-neutral: #e2e2e2; /* social gallery item bg */
  --color-bg-image: #f5f5f5; /* menu card image placeholder */
}

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

/* フォーム要素はフォントを継承しない（UA既定の Arial 等になる）ので明示的に継承させる */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   2. Layout & Utilities
   ========================================================= */
/* Spacing split (site-wide rule):
   - .container owns the HORIZONTAL inset (left/right gutters) only.
   - .section  owns the VERTICAL rhythm (top/bottom) only.
   Never put vertical padding on .container, or horizontal padding on .section.
   Adjacent sections' vertical padding is allowed to stack — each section is
   self-contained, so section spacing is tuned per section without caring what
   sits next to it. Use the .section--flush* modifiers to drop it where two
   sections must butt together. */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 80px;
}

.section {
  padding: 80px 0;
}

.section--flush {
  padding-block: 0;
}
.section--flush-top {
  padding-top: 0;
}
.section--flush-bottom {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .container {
    padding: 0 40px;
  }
  .section {
    padding: 60px 0;
  }
}

.section-title {
  text-align: center;
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
  color: var(--color-primary);
}

.section-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 50px;
}

/* =========================================================
   3. Animations & Interactions
   ========================================================= */
/* 出現は transition ではなく animation で動かす。
   カード側の transition / :hover の transform と干渉しないようにするため
   （fill-mode: backwards なので、終了後は通常のスタイルに戻りホバーが効く） */
.fade-in {
  opacity: 0;
}

.fade-in.is-visible {
  opacity: 1;
  animation: fade-in-up 0.8s ease-out backwards;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in.is-visible {
    animation: none;
  }
}

.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-lift {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 15px 40px;
  border-radius: 30px;
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast);
  cursor: pointer;
  border: none;
}

.btn:hover {
  background-color: var(--color-text-body);
}

.btn .arrow {
  margin-left: 10px;
  transition: transform var(--transition-fast);
}

.btn:hover .arrow {
  transform: translateX(5px);
}

/* =========================================================
   4. Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(249, 249, 249, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition:
    background var(--transition-fast),
    padding var(--transition-fast),
    transform var(--transition-fast);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Hidden while scrolling down; restored on scroll up */
.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
}

.site-logo img {
  height: 40px;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px;
}

.main-navigation a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 5px;
}

.main-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  transition: width var(--transition-fast);
}

.main-navigation a:hover::after {
  width: 100%;
}

/* Hamburger Menu (Mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 0;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-secondary);
  transition: var(--transition-fast);
}

@media (max-width: 768px) {
  /* PC nav is replaced by the full-screen .mobile-drawer below */
  .main-navigation {
    display: none;
  }

  .menu-toggle {
    display: flex;
    /* content-box so the 8px padding doesn't eat into the 30x20 bar area
       (global reset sets border-box, which would collapse the 3 spans) */
    box-sizing: content-box;
    padding: 8px;
    border-radius: 9999px;
  }

  .header-inner {
    padding: 15px 20px;
  }

  .site-logo {
    gap: 25px;
    font-size: var(--font-size-xl);
    letter-spacing: normal;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------
   Mobile Drawer (full-screen menu, <= 768px)
   --------------------------------------------------------- */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px;
  overflow-y: auto;
  /* "Frosted glass": mostly opaque so text stays legible over any section */
  background-color: rgba(249, 249, 249, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--color-social-green);
  /* Hidden until opened. visibility flips instantly on open (delay 0s) so the
     close button is focusable right away, but is held for the fade-out on close */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear 0.3s;
}

.mobile-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear 0s;
}

.mobile-drawer__close {
  position: absolute;
  top: 32px;
  right: 24px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(86, 99, 64, 0.05);
  color: var(--color-social-green);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-drawer__close:hover {
  background-color: rgba(86, 99, 64, 0.12);
}

.mobile-drawer__wordmark {
  /* auto top margin centers the block; collapses to 0 if content overflows */
  margin: auto 0 56px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--color-social-green);
  /* letter-spacing adds trailing space; nudge back for optical centering */
  text-indent: 0.2em;
}

.mobile-drawer__nav {
  margin-bottom: auto;
}

.mobile-drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.mobile-drawer__nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 4px 8px;
  text-decoration: none;
  color: var(--color-social-green);
}

.mobile-drawer__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 24px;
}

.mobile-drawer__icon svg {
  display: block;
}

.mobile-drawer__label {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.mobile-drawer__nav a:hover .mobile-drawer__label,
.mobile-drawer__nav a:focus-visible .mobile-drawer__label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 768px) {
  .mobile-drawer {
    display: flex;
  }

  body.drawer-open {
    overflow: hidden;
  }
}

/* Solid fallback where translucency/blur is unsupported or unwanted */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .mobile-drawer {
    background-color: var(--color-bg-main);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-drawer {
    background-color: var(--color-bg-main);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer {
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast);
    transform: none;
  }
}

/* =========================================================
   5. Home - Hero Section
   ========================================================= */
.home-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 0 5%;
  margin-top: 0;
}

.hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay-mobile {
  display: none;
}

.hero-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  padding: 50px;
  border-radius: 20px;
  max-width: 500px;
  margin-top: 80px;
}

.hero-tag {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background-color: var(--color-primary-light);
  padding: 5px 15px;
  border-radius: 15px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.hero-title-part h2 {
  font-size: var(--font-size-huge);
  line-height: 1.4;
  margin: 0 0 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  color: var(--color-text-main);
}

.hero-text-part p {
  font-size: var(--font-size-md);
  color: var(--color-text-body);
  font-weight: var(--font-weight-regular);
  margin-bottom: 30px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .home-hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: auto;
    padding: 0;
    margin-bottom: 50px;
  }
  .hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 618px;
    min-height: 618px;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
    z-index: 1;
  }
  .hero-overlay-mobile {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 40px 30px;
    background: transparent;
    backdrop-filter: none;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }
  .hero-title-part {
    padding: 0;
    z-index: 3;
    position: relative;
    margin-top: -150px;
    margin-bottom: 60px;
  }
  .hero-text-part {
    padding: 0;
  }
  .hero-text-part p {
    font-size: 18px;
    line-height: 1.55;
  }
  .hero-tag {
    color: var(--color-primary-lighter);
    background-color: rgba(89, 97, 79, 0.2);
    border: 1px solid rgba(222, 230, 207, 0.3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    padding: 0 16px;
    margin-bottom: 13px;
  }
  .hero-title-part h2 {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: 5px;
  }
}

/* =========================================================
   6. Home - Our Approach
   ========================================================= */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.approach-card {
  background: var(--color-white);
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
}

.approach-icon {
  width: 60px;
  height: 60px;
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.approach-icon .material-symbols-outlined {
  font-size: 32px;
  color: var(--color-primary);
}

.approach-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-main);
  margin: 0 0 15px;
}

.approach-card p {
  font-size: var(--font-size-md);
  color: var(--color-text-body);
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.approach-blur {
  display: none;
}

@media (max-width: 768px) {
  .home-approach {
    background-color: var(--color-primary-light);
    position: relative;
    overflow: hidden;
  }

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

  .approach-blur {
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
  }

  .approach-blur-top {
    width: 269px;
    height: 269px;
    top: -50px;
    right: -50px;
  }

  .approach-blur-bottom {
    width: 242px;
    height: 242px;
    bottom: -50px;
    left: -50px;
  }

  .home-approach .section-title {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 16px;
	margin-top: 0;
  }

  .home-approach .section-subtitle {
    font-size: 14px;
    line-height: 1.6;
  }

  .approach-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .approach-card {
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(193, 202, 180, 0.2);
    box-shadow: 0px 4px 24px rgba(45, 64, 40, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .approach-icon {
    width: 64px;
    height: 64px;
    margin: 0;
  }

  .approach-card h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.4;
    margin: 0;
  }

  .approach-card p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
  }
}

/* =========================================================
   7. Home - Banners
   ========================================================= */
/* Banners butt straight up against the hero on desktop — the flush-top is set
   with the .section--flush-top modifier in the markup. Mobile re-adds a small
   gap (below). */
.home-banners .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.banner-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 500px;
  display: flex;
  align-items: flex-end;
  padding: 30px;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform var(--transition-slow);
}

.banner-card:hover .banner-bg {
  transform: scale(1.05);
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 75%
  );
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 1;
  color: var(--color-white);
}

.banner-subtitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.banner-subtitle::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
}

.subtitle-discover {
  color: var(--color-banner-text-1);
}
.subtitle-discover::before {
  background-color: var(--color-banner-text-1);
}

.subtitle-roots {
  color: var(--color-banner-text-2);
}
.subtitle-roots::before {
  background-color: var(--color-banner-text-2);
}

.banner-title {
  font-size: var(--font-size-huge);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin: 0;
}

.banner-arrow {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 96px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  color: var(--color-white);
  font-size: 1.2rem;
  transition: var(--transition-fast);
}

.banner-card:hover .banner-arrow {
  background: var(--color-white);
  color: var(--color-text-main);
}

@media (max-width: 768px) {
  .home-banners.section--flush-top {
    padding-top: 50px;
  }
  .home-banners .container {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .banner-card {
    height: 400px;
    padding: 32px;
    border-radius: 32px;
    box-shadow: 0px 8px 30px rgba(45, 64, 40, 0.06);
  }
  .banner-subtitle {
    font-size: 12px;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
  }
  .banner-subtitle::before {
    width: 32px;
  }
  .banner-title {
    font-size: 32px;
    line-height: 1.3;
  }
  .banner-arrow {
    right: 20px;
    bottom: 20px;
    width: 32.86px;
    border-radius: 9999px;
  }
}

/* =========================================================
   8. Home - Latest News
   ========================================================= */
.home-news {
  background: var(--color-bg-main);
  border-top: 1px solid var(--color-border);
}

.home-news .news-deco-frame {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.news-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.news-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.news-icon {
  display: none;
  font-size: 28px;
  color: var(--color-primary);
  margin-top: 2px;
  line-height: 1.45;
}

.news-header .section-title {
  margin: 0;
  text-align: left;
}

.news-header .section-subtitle {
  margin: 0;
  text-align: left;
}

.view-all-pc {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-all-pc:hover .view-all-label {
  text-decoration: underline;
}

.view-all-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.view-all-pc:hover .view-all-arrow {
  transform: translateX(4px);
}

.news-footer-mobile {
  display: none;
}

.view-all-mobile {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-all-mobile .view-all-label {
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

/* Touch devices don't have a persistent :hover, so :active (tap-and-hold)
   drives the same arrow-shift feedback as the PC hover state. */
.view-all-mobile:hover .view-all-arrow,
.view-all-mobile:active .view-all-arrow {
  transform: translateX(4px);
}

.view-all-mobile:active .view-all-label {
  border-bottom-color: currentColor;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  display: block;
  height: 100%; /* 同じ行のカードの高さをそろえる（グリッドセルいっぱいに伸ばす） */
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
  /* 影・ホバーは NEWS ページのカード（.news-card-item）に合わせる */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(45, 64, 40, 0.1);
}

.news-thumb {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card:hover .news-thumb {
  transform: scale(1.05);
}

.news-thumb-wrapper {
  overflow: hidden;
  position: relative;
}

.news-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--color-white);
  /* NEWS ページのバッジ（.news-card-badge）に合わせる */
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 日付・タイトルは NEWS ページのカード（.news-card-date / .news-card-title）に合わせる */
.news-content {
  padding: 24px;
}

.news-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: block;
}

.news-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .home-news {
    background: transparent;
    border: none;
    padding-top: 0;
  }
  .news-deco-frame {
    background: var(--color-white);
    border-radius: 24px;
    padding: 30px 20px 40px 20px;
    box-shadow: 0 8px 30px rgba(45, 64, 40, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--color-border);
  }
  .news-inner {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .news-icon {
    display: inline-block;
  }
  .news-header .section-title {
    font-size: 24px;
    line-height: 1.45;
  }
  .news-header .section-subtitle {
    font-size: 16px;
    line-height: 1.5;
  }
  .view-all-pc {
    display: none;
  }
  .news-footer-mobile {
    display: flex;
    justify-content: center;
  }
  .view-all-mobile {
    font-size: 14px;
    letter-spacing: 0.7px;
  }
  .news-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .news-card-wrapper {
    border-bottom: 1px solid rgba(226, 226, 226, 0.37);
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .news-card-wrapper:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 15px;
  }
  .news-card {
    background: transparent;
    border-radius: 10px;
    padding: 16px 13px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .news-thumb-wrapper {
    display: none;
  }
  .news-content {
    padding: 0;
  }
  .news-date {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.7px;
  }
  .news-title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-secondary);
    /* will-change: 動き出しでレイヤーが切り替わる際の再描画によるカクつきを防ぐ */
    will-change: transform;
    transition: color 0.3s ease-out,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Mobile swaps the PC hover-lift (raised card + shadow) for a small
     slide of the title instead — a raised/shadowed card reads oddly on touch.
     :active gives tap feedback; :hover is limited to real hover devices so
     the state doesn't stick after a tap. */
  .news-card:hover {
    transform: none;
    box-shadow: none;
  }
  .news-card:active .news-title {
    color: var(--color-primary);
    transform: translateX(4px);
  }
  @media (hover: hover) {
    .news-card:hover .news-title {
      color: var(--color-primary);
      transform: translateX(4px);
    }
  }
}

/* =========================================================
   9. Footer
   ========================================================= */
.site-footer {
  background-color: var(--color-bg-footer);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 15px;
  color: var(--color-secondary);
}

.footer-brand .footer-logo img {
  height: 30px;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 300px;
  font-weight: var(--font-weight-medium);
}

/* SNS見出し（リーフアイコン＋SNS）はモバイルのみ表示 */
.footer-sns-title {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin: 0 0 15px;
  color: var(--color-text-body);
}

.footer-sns-icon {
  flex-shrink: 0;
  color: var(--color-secondary);
}

.footer-nav ul,
.footer-sns ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-nav a,
.footer-sns a {
  font-size: 0.95rem;
  color: var(--color-text-body);
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  /* Zen Kaku Gothic New は可変フォントではなく font-weight を補間できないため、
     文字の輪郭線（text-stroke）の太さをアニメーションさせて連続的に太くする。
     文字幅は変わらないのでレイアウトのガタつきも起きない */
  -webkit-text-stroke: 0 currentColor;
  transition: -webkit-text-stroke-width var(--transition-fast);
}

.footer-nav a:hover,
.footer-sns a:hover {
  -webkit-text-stroke-width: 0.6px;
}

.site-info {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  padding-top: 30px;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-brand p {
    max-width: 100%;
    margin-bottom: 0;
  }
  .footer-sns-title {
    display: flex;
    font-weight: var(--font-weight-medium);
  }
}

/* =========================================================
   10. Menu Page
   ========================================================= */
.page-menu {
  /* ページラッパーが上下方向の余白を担当（.container は左右のみ）。
     上部は固定ヘッダー（--header-height 80px）ぶん＋余白。PC では下の
     @media で 80px に詰める。 */
  padding: 120px 0 60px;
}

.menu-header {
  margin-bottom: 40px;
}

.menu-page-title {
  font-size: 35px;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: 15px;
  letter-spacing: 0.05em;
  text-align: center;
}

.menu-page-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-body-alt);
  font-weight: var(--font-weight-medium);
}

.menu-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  /* Gap before the first menu/news section (PC overrides to 80px below). */
  margin-bottom: 50px;
}

.filter-btn {
  background-color: var(--color-primary-light);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 8px 16px;
  border-radius: 20px;
  /* ホバー時に枠線が付いてもサイズが変わらないよう、透明の枠線を確保 */
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.filter-btn.is-active {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* 選択中以外のタブのみ。タップ後にホバー状態が残らないようホバー可能な端末に限定 */
@media (hover: hover) {
  .filter-btn:not(.is-active):hover {
    border: var(--color-secondary) 1px solid;
    background-color: #fff;
  }
}

.menu-sections-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.menu-section {
  display: block;
  width: 100%;
  transition: opacity 0.4s ease;
}

.menu-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 15px;
  margin-bottom: 24px;
}

.menu-section-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.menu-section-icon--leaf {
  margin-top: 3px;
}

.menu-section-title {
  font-size: 26px;
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin: 0;
  line-height: 1;
}

.menu-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.menu-card {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.menu-card-img-wrapper {
  position: relative;
  width: 100%;
}

.menu-card-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background-color: var(--color-bg-image);
}

.salad-grid .menu-card-img {
  aspect-ratio: 4/3;
}

.price-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--color-accent-yellow);
  color: var(--color-text-yellow);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  padding: 4px 12px;
  border-radius: 50px;
}

.menu-card-content {
  padding: 24px;
}

.menu-card-title {
  font-size: var(--font-size-xl);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  margin-bottom: 12px;
  margin-top: 0;
  line-height: 1.2;
}

.menu-card-text {
  font-size: var(--font-size-md);
  color: var(--color-text-body);
  font-weight: var(--font-weight-regular);
  margin-bottom: 20px;
  line-height: 1.5;
}

.ingredients-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--color-primary);
}

.ingredients-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ingredients-list li {
  background-color: color-mix(
    in srgb,
    var(--color-primary-light) 50%,
    transparent
  );
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 4px 8px;
  border-radius: 5px;
}

/* Menu Page PC */
@media (min-width: 768px) {
  .page-menu {
    padding: 80px 0;
  }

  .menu-hero {
    padding: 10px 0;
  }

  .menu-header {
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .menu-page-title {
    font-size: var(--font-size-huge);
    line-height: 53px;
    margin-bottom: 22px;
  }

  .menu-page-desc {
    font-size: var(--font-size-lg);
    line-height: 29px;
    max-width: 800px;
    margin: 0 auto;
  }

  .menu-filters {
    gap: 20px;
    margin-bottom: 64px;
  }

  .filter-btn {
    font-size: 14px;
    padding: 8px 24px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menu-sections-container {
    gap: 80px;
  }

  .menu-section-header {
    margin-bottom: 32px;
  }

  .menu-section-icon {
    width: 29px;
    height: 29px;
  }

  .menu-section-icon--leaf {
    margin-top: 5px;
  }

  .menu-section-title {
    font-size: var(--font-size-xxl);
  }

  .menu-grid.juice-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  .juice-grid .menu-card {
    width: calc((100% - 48px) / 3);
    min-height: 555px;
    border: 1px solid rgba(226, 234, 211, 0.5);
    box-shadow: none;
  }

  .juice-grid .menu-card-img-wrapper {
    height: 256px;
  }

  .juice-grid .menu-card-img {
    height: 100%;
    aspect-ratio: auto;
  }

  .menu-grid.salad-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  .salad-grid .menu-card {
    width: calc((100% - 24px) / 2);
    min-height: 338px;
    display: flex;
    flex-direction: row;
    border: none;
    box-shadow: 0px 4px 24px rgba(45, 64, 40, 0.05);
  }

  .salad-grid .menu-card-img-wrapper {
    width: 50%;
    flex-shrink: 0;
  }

  .salad-grid .menu-card-img {
    height: 100%;
    border-radius: 12px 0 0 12px;
    aspect-ratio: auto;
  }

  .salad-grid .menu-card-content {
    width: 50%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .salad-grid .menu-card-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: 12px;
  }

  .salad-grid .menu-card-text {
    margin-bottom: 25px;
  }
}

/* =========================================================
   11. Story & Access Page
   ========================================================= */

/* Main Container */
.page-access-story {
  background-color: var(--color-bg-main);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 60px 0 0;
}

/* ---------------------------------------------------------
   Story Section (Hero)
   --------------------------------------------------------- */
/* Story + Access share this green (#506449) surface so the large glow orb
   can bleed across the seam between the two sections. */
.story-access-green {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
}

.story-hero-section {
  /* Horizontal inset comes from the shared .container child (left/right
     padding unified with the rest of the site) — this only owns vertical
     spacing + the overflow:hidden clip for the glow orbs. */
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.story-hero-inner {
  display: flex;
  flex-direction: row;
  gap: 30px;
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Decorative blurred glow orbs (Story + Access sections)
   Warm light = --color-accent-yellow, soft green = --color-primary-light.
   Orbs sit behind the (transparent) sections against .story-access-green
   and are clipped to it via overflow:hidden — never bleeding onto the
   white Social section. story-glow-b is a child of .story-access-green so
   it can span the seam between Story and Access.
   --------------------------------------------------------- */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

/* Story hero — PC: soft-green orb, top-right (Figma "Decorative organic shapes") */
.story-glow-a {
  width: 384px;
  height: 384px;
  top: -137px;
  right: -145px;
  background-color: var(--color-primary-light);
  opacity: 0.2;
}

/* Large soft-green orb straddling the Story / Access seam.
   Anchored to .story-access-green (top === Story section top). */
.story-glow-b {
  width: 464px;
  height: 464px;
  top: 320px;
  left: -192px;
  background-color: var(--color-primary-light);
  opacity: 0.1;
}

/* Warm-light orb, bottom-left of Story hero — mobile only (Figma "Background+Blur") */
.story-glow-m {
  display: none;
}

/* Access — PC: two warm-light orbs (Figma "Background+Blur") */
.access-glow-a {
  width: 256px;
  height: 256px;
  top: 274px;
  right: -64px;
  background-color: var(--color-accent-yellow);
  opacity: 0.1;
}

.access-glow-b {
  width: 256px;
  height: 256px;
  bottom: -166px;
  left: -64px;
  background-color: var(--color-accent-yellow);
  opacity: 0.1;
}

.story-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.story-label {
  color: var(--color-primary-lighter);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.story-heading {
  color: var(--color-white);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  margin: 0;
}

.story-content {
  padding-top: 17px;
}

.story-content p {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  margin: 0;
}

.story-hero-image {
  flex: 1;
  padding-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.story-hero-img-dummy {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.story-hero-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  padding: 30px;
  border-radius: 0 0 16px 16px;
}

.overlay-text-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overlay-title {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0;
}

.overlay-subtitle {
  color: var(--color-white);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  /* Structure: stack text and image vertically */
  .story-hero-inner {
    flex-direction: column;
    gap: 24px;
  }

  /* Figma spacing values (mobile) */
  .story-hero-section {
    padding: 80px 0 60px;
  }

  /* Mobile glow orbs: one soft-green top (a), one warm-light bottom-left (m),
     both inside the Story hero. The seam orb (b) and Access orbs are PC-only. */
  .story-glow-a {
    width: 384px;
    height: 384px;
    top: -192px;
    right: -128px;
    left: auto;
    opacity: 0.2;
  }

  .story-glow-m {
    display: block;
    width: 256px;
    height: 256px;
    bottom: -85px;
    left: -64px;
    background-color: var(--color-accent-yellow);
    opacity: 0.1;
  }

  .story-glow-b,
  .access-glow-a,
  .access-glow-b {
    display: none;
  }

  .story-hero-text {
    gap: 15px;
  }

  /* Mobile-specific design diffs */
  .story-label {
    letter-spacing: 1.4px;
  }

  .story-content p {
    color: rgba(255, 255, 255, 0.9);
  }
}

/* ---------------------------------------------------------
   Access Section
   --------------------------------------------------------- */
.access-section {
  /* Horizontal inset comes from the shared .container child (left/right
     padding unified with the rest of the site) — this only owns vertical
     spacing + the overflow:hidden clip for the glow orbs. */
  padding: 0 0 80px;
  position: relative;
  overflow: hidden;
}

.access-section .container {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.access-text,
.access-layout {
  position: relative;
  z-index: 1;
}

.access-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  /* Divider between Story and Access — the top edge of the Access "frame"
     from Figma. Content-width (not full-bleed), 80px of breathing room
     above the heading. */
  padding-top: 80px;
  border-top: 1px solid rgba(226, 234, 211, 0.3);
}

.access-heading {
  color: var(--color-white);
  font-size: 36px;
  font-weight: var(--font-weight-medium);
  line-height: 1.06;
  margin: 0;
}

.access-lead {
  color: var(--color-bg-main);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  line-height: 1.85;
  margin: 0;
  padding-top: 10px;
}

.access-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Grid so all 3 cards (map, address & hours, contact) stretch to a
   consistent, predictable width regardless of their own content length
   - top row: map | info, bottom row: contact spanning both columns */
.access-frame-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "map info"
    "contact contact";
  gap: 20px;
}

/* Cards */
.access-card {
  background-color: var(--color-bg-main);
  border-radius: 20px;
  display: flex;
}

.access-map-card {
  grid-area: map;
  flex-direction: column;
  padding: 32px;
}

.access-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.access-map-link {
  display: none;
}

.access-info-card {
  grid-area: info;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 35px;
}

.access-contact-card {
  grid-area: contact;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 30px;
}

.access-contact-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.access-contact-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Icon sits beside the text (row) at every size. Both rows (住所 / 営業時間)
   share one width so their icons line up on a single left edge while the
   card (align-items: center) keeps the block itself centered. */
.access-info-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 15px;
  width: min(100%, 300px);
}

/* Decorative divider between the map card and the info card.
   Only makes sense once they're stacked, so it's mobile-only. */
.access-info-divider {
  display: none;
}

/* Common Inner Elements */
.access-info-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.access-icon-bg {
  background-color: var(--color-primary-light);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.access-contact-icon {
  display: none;
}

.access-subheading {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0;
}

.access-text-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: var(--color-text-main);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.access-text-body p {
  margin: 0;
}

.access-link-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-accent-red);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
}

/* Underline sits on the text only, so it doesn't run under the icon */
.access-link-map-text {
  border-bottom: 1px solid #4D506449;
  transition: border-color var(--transition-fast);
}

/* External-link icon: signals the map opens in a new tab.
   Hover grows the SVG's own width/height instead of using transform: scale(),
   because a scaled layer is rasterized mid-transition and the strokes look
   thicker for a moment. Negative margins cancel the growth so the layout box
   stays 14x14 and the icon expands toward the top-right. */
.access-link-map-icon {
  flex-shrink: 0;
  display: block;
  width: 14px;
  height: 14px;
  transition:
    width var(--transition-fast),
    height var(--transition-fast),
    margin var(--transition-fast);
}

.access-link-map:hover .access-link-map-text {
  border-bottom-color: var(--color-accent-red);
}

.access-link-map:hover .access-link-map-icon {
  width: 17px;
  height: 17px;
  margin: -3px -3px 0 0;
}

.access-text-body .access-holiday {
  color: var(--color-text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

.access-note {
  color: #454840cc;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  margin: 0;
}

.access-contact-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.access-contact-separator {
  color: var(--color-primary-lighter);
  font-weight: 100;
}

.access-contact-info p {
  color: var(--color-text-main);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  margin: 0;
}

.access-contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.access-btn {
  background-color: var(--color-primary-light);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  padding: 15px 24px;
  border-radius: 50px;
  display: inline-block;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.access-btn:hover {
  opacity: 0.8;
  background-color: var(--color-primary);
  color: var(--color-bg-main);
}

.access-note-form {
  color: var(--color-text-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 768px) {
  /* Structure: single column, so map/info/contact stack in that order,
     each stretching to the same full width (matches PC's 2-col grid) */
  .access-frame-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "divider"
      "info"
      "contact";
  }

  .access-info-divider {
    display: block;
    grid-area: divider;
    width: 80%;
    height: 1px;
    margin: 0 auto;
    background-color: var(--color-primary-lighter);
    opacity: 0.5;
  }

  /* 住所 / 営業時間 use the PC row layout as-is; the contact row below
     shares the same 300px cap so all three icons line up on mobile. */
  .access-info-content {
    gap: 4px;
  }

  .access-contact-card {
    align-items: center;
    text-align: left;
    padding: 0;
  }

  .access-contact-block {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: min(100%, 300px);
  }

  .access-contact-icon {
    display: flex;
  }

  .access-contact-details {
    align-items: flex-start;
    text-align: left;
    gap: 4px;
  }

  .access-contact-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .access-contact-separator {
    display: none;
  }

  /* Mobile-specific design diff: section switches from dark green to light background */
  .access-section {
    background-color: var(--color-bg-main);
    padding: 60px 0 30px;
  }

  .access-section .container {
    gap: 30px;
  }

  .access-heading {
    color: var(--color-primary);
    font-size: var(--font-size-xxl);
  }

  .access-lead {
    color: var(--color-text-body);
    font-size: var(--font-size-lg);
    text-align: left;
  }

  /* Figma spacing values (mobile) */
  .access-text {
    /* Mobile switches Access to a light background, so the green/cream
       color change is the divider — drop the border. */
    border-top: none;
    padding-top: 0;
  }

  /* Border lives on its own frame (not on .access-layout) so the
     40px outer inset stays padding-based and never overflows. */
  .access-frame {
    border: 1px solid var(--color-primary-light);
    border-radius: 16px;
  }

  /* Padding lives on a separate inner frame (not combined with the
     border above) so the border and the 30px content inset stay
     independent, matching the Figma structure. Every card (map,
     address, hours, contact) shares this one start line. */
  .access-frame-inner {
    padding: 20px 20px 40px;
  }

  /* Center the info/contact blocks within their card at every size below
     the PC breakpoint. The blocks keep their own left-aligned internal
     layout (icon + text); only their placement in the card is centered. */
  .access-info-card,
  .access-contact-card {
    background-color: transparent;
    align-items: center;
  }

  .access-info-card {
    padding: 20px 0;
  }

  .access-subheading {
    font-size: var(--font-size-md);
    line-height: 0.875;
    letter-spacing: 0.7px;
    color: var(--color-text-body);
	padding: 10px 0;
  }

  /* Mobile shows the Google Maps link as a button under the map image
     instead of as a text link inside the address block */
  .access-link-map {
    display: none;
  }

  /* Mobile: trim the map card's inset so the wider map image and the
     "Googleマップで開く" button (now carrying a leading icon) get room */
  .access-map-card {
    padding: 5px;
  }

  .access-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    text-align: center;
    background-color: var(--color-accent-red);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-decoration: none;
    letter-spacing: 0.7px;
    padding: 13px 19px;
    border: 1px solid var(--color-accent-red);
    border-radius: 8px;
    margin-top: 27px;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .access-map-link:hover {
    background-color: var(--color-white);
    color: var(--color-accent-red);
  }

  .access-map-link-icon {
    flex-shrink: 0;
    display: block;
  }

  .access-note {
    line-height: 1.43;
	padding-top: 10px;
  }

  .access-btn {
    letter-spacing: 2px;
	width: 100%;
    text-align: center;
	font-weight: var(--font-weight-bold);
  }

  .access-note-form {
    color: var(--color-text-body);
    font-size: var(--font-size-sm);
    line-height: 1.5;
	font-weight: var(--font-weight-regular);
  }
}

/* ---------------------------------------------------------
   Social Section
   --------------------------------------------------------- */
.social-section {
  /* Horizontal inset comes from the shared .container child (left/right
     padding unified with the rest of the site) — this only owns vertical
     spacing + the background color. */
  background-color: var(--color-bg-main);
  padding: 60px 0 90px;
}

.social-section .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.social-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.social-heading {
  color: var(--color-social-green);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0;
}

.social-subheading {
  color: var(--color-social-green);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  margin: 0;
}

.social-handle {
  color: var(--color-text-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  margin: 0;
}

.social-gallery {
  display: flex;
  flex-direction: row;
  /* Item size + gap sized to still fit 4-across within .container's
     interior (max-width 1200px minus its own 80px×2 padding = 1040px). */
  gap: 40px;
  padding: 30px 0 50px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-item {
  background-color: var(--color-bg-neutral);
  width: 200px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

.social-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-link-wrapper {
  display: flex;
  justify-content: center;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-decoration: none;
}

.social-link:hover {
  opacity: 0.8;
}

.social-link svg {
  transition: transform 0.2s ease;
}

/* :active gives touch devices the same arrow-shift feedback on tap. */
.social-link:hover svg,
.social-link:active svg {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  /* Figma mobile: tighter top padding, header left-aligned */
  .social-section {
    padding: 30px 0 70px;
  }

  .social-header {
    align-items: flex-start;
    text-align: left;
  }

  .social-handle {
    font-weight: var(--font-weight-medium);
  }

  /* 2-column grid: items stretch equally instead of PC's fixed 230px squares */
  .social-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
  }

  .social-item {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .social-link {
    font-weight: var(--font-weight-regular);
  }
}

/* =========================================================
   Back to Top
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(80, 100, 73, 0.25);
  /* Hidden until the user scrolls down */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  opacity: 0.8;
}

.back-to-top:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  opacity: 0.8;
}

.back-to-top svg {
  display: block;
}

@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* =========================================================
   12. News & Events Page
   （ヒーローはメニューページの .menu-hero / .menu-header /
   .menu-filters / .filter-btn を流用。ここでは一覧・カード・
   ページネーションのみ定義する）
   ========================================================= */
.page-news {
  /* ページラッパーが上下方向の余白を担当（.container は左右のみ）。
     上部は固定ヘッダー（--header-height 80px）ぶん＋余白。PC では下の
     @media で 80px に詰める。 */
  padding: 120px 0 60px;
}

/* タブをリンク（<a>）で使うための調整 */
.page-news .filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.news-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  padding: 40px 0 60px;
}

/* トップページの Latest News で投稿が0件のとき、グリッド全幅に表示 */
.news-grid .news-empty {
  grid-column: 1 / -1;
}

.news-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.news-card-item {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.news-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(45, 64, 40, 0.1);
}

.news-card-img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-bg-image);
}

.news-card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.news-card-item:hover .news-card-img-wrapper img {
  transform: scale(1.05);
}

.news-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.news-card-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.news-card-badge {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

.news-card-badge.badge-news,
.news-tag.badge-news {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.news-card-badge.badge-event,
.news-tag.badge-event {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-yellow);
}

.news-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.news-card-readmore {
  margin-top: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-card-readmore svg {
  display: block;
  transition: transform var(--transition-fast);
}

.news-card-item:hover .news-card-readmore svg {
  transform: translateX(3px);
}

/* タップ時のフィードバック（スマホでは hover が不安定なため :active で明示） */
@media (max-width: 768px) {
  .news-card-item:active {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(45, 64, 40, 0.1);
  }

  .news-card-item:active .news-card-img-wrapper img {
    transform: scale(1.05);
  }

  .news-card-item:active .news-card-readmore svg {
    transform: translateX(3px);
  }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

a.page-numbers:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.pagination .page-numbers.current {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination .page-numbers.dots {
  background-color: transparent;
}

/* News & Events Page - PC */
@media (min-width: 768px) {
  .page-news {
    padding: 80px 0;
  }

  .news-list-section {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
  }

  .news-page-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 80px;
  }

  .news-card-body {
    padding: 24px;
  }

  .news-card-title {
    font-size: var(--font-size-md);
  }
}

/* =========================================================
   13. Single News Post（個別記事ページ / single.php）
   ヒーロー画像に重ねたタイトル → 中央寄せ本文 →
   Related News（日付・タイトルのみのカード3枚）
   ========================================================= */
.single-news {
  /* 上部は固定ヘッダーぶんの余白（他ページに準拠） */
  padding-top: var(--header-height);
  padding-bottom: 80px;
}

/* --- ヒーロー --- */
.single-news__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 46vw, 520px);
  overflow: hidden;
  margin-bottom: 8px;
}

.single-news__hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg-image);
}

.single-news__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像下部を明るくフェードさせ、暗い写真でも文字を読めるようにする */
.single-news__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(249, 249, 249, 0) 40%,
    rgba(249, 249, 249, 0.55) 72%,
    rgba(249, 249, 249, 0.9) 100%
  );
}

.single-news__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px 28px;
}

.single-news__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.single-news__meta-sep {
  opacity: 0.6;
}

.single-news__title {
  margin: 0;
  font-size: clamp(24px, 5.2vw, 40px);
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  color: var(--color-text-main);
}

/* --- 本文 --- */
.single-news__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 40px 72px;
  color: var(--color-text-body);
  font-size: var(--font-size-lg);
}

.single-news__body > *:first-child {
  margin-top: 0;
}

.single-news__body p {
  margin: 0 0 1.75em;
}

.single-news__body h2 {
  margin: 56px 0 20px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  color: var(--color-text-main);
}

.single-news__body h3 {
  margin: 40px 0 16px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  color: var(--color-text-main);
}

.single-news__body img {
  border-radius: 12px;
  margin: 8px 0;
}

.single-news__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.single-news__body ul,
.single-news__body ol {
  margin: 0 0 1.75em;
  padding-left: 1.4em;
}

.single-news__body li {
  margin-bottom: 0.5em;
}

.single-news__body blockquote {
  margin: 0 0 1.75em;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-primary-light);
  color: var(--color-text-muted);
}

/* --- Related News --- */
.single-news__related {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

.single-news__related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.single-news__related-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-main);
}

.single-news__related-back {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.single-news__related-back:hover {
  color: var(--color-primary);
}

/* ホームの「View All →」と同じホバー挙動（ラベル下線＋矢印が右へ）。
   タッチ端末は :active で矢印を動かす。 */
.single-news__related-back:hover .view-all-label {
  text-decoration: underline;
}

.single-news__related-back:hover .view-all-arrow,
.single-news__related-back:active .view-all-arrow {
  transform: translateX(4px);
}

.single-news__related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.single-news__related-card a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px;
  background-color: var(--color-bg-image);
  border-radius: 12px;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.single-news__related-card a:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-3px);
}

.single-news__related-date {
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.single-news__related-card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--color-text-main);
}

/* Single News Post - PC */
@media (min-width: 768px) {
  .single-news__hero-inner {
    padding: 0 80px 25px;
  }

  .single-news__body {
    padding: 56px 24px 88px;
  }

  .single-news__related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}