@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&display=swap');.site-header[data-astro-cid-3ef6ksr2]{background-color:var(--color-white);box-shadow:0 2px 8px rgba(0,0,0,0.1)}.main-nav[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) 0}.logo[data-astro-cid-3ef6ksr2]{display:flex;flex-direction:column;text-decoration:none;transition:opacity var(--transition-speed)}.logo[data-astro-cid-3ef6ksr2]:hover{opacity:0.8}.logo-text[data-astro-cid-3ef6ksr2]{font-family:var(--font-heading);font-size:24px;font-weight:600;color:var(--color-primary);line-height:1.2}.logo-japanese[data-astro-cid-3ef6ksr2]{font-size:14px;color:var(--color-text-light)}.mobile-menu-toggle[data-astro-cid-3ef6ksr2]{display:none;flex-direction:column;justify-content:space-around;width:30px;height:24px;background:transparent;border:none;cursor:pointer;padding:0}.mobile-menu-toggle[data-astro-cid-3ef6ksr2] span[data-astro-cid-3ef6ksr2]{width:100%;height:3px;background-color:var(--color-primary);transition:all 0.3s ease}.nav-menu[data-astro-cid-3ef6ksr2]{display:flex;list-style:none;gap:var(--spacing-md);align-items:center}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]{position:relative}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]>a[data-astro-cid-3ef6ksr2]{font-size:var(--font-size-body);font-weight:400;color:var(--color-text);padding:8px 12px;display:block;transition:color var(--transition-speed)}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]>a[data-astro-cid-3ef6ksr2]:hover,.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]>a[data-astro-cid-3ef6ksr2].active{color:var(--color-accent)}.has-submenu[data-astro-cid-3ef6ksr2]{position:relative}.submenu[data-astro-cid-3ef6ksr2]{position:absolute;top:100%;left:0;background-color:var(--color-white);box-shadow:0 4px 12px rgba(0,0,0,0.1);border-radius:var(--border-radius);padding:var(--spacing-sm);list-style:none;min-width:180px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-speed)}.has-submenu[data-astro-cid-3ef6ksr2]:hover .submenu[data-astro-cid-3ef6ksr2]{opacity:1;visibility:visible;transform:translateY(0)}.submenu[data-astro-cid-3ef6ksr2] li[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{display:block;padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-text);transition:all var(--transition-speed);border-radius:var(--border-radius)}.submenu[data-astro-cid-3ef6ksr2] li[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{background-color:var(--color-background);color:var(--color-accent)}@media (max-width: 768px){.mobile-menu-toggle[data-astro-cid-3ef6ksr2]{display:flex}.nav-menu[data-astro-cid-3ef6ksr2]{position:fixed;top:70px;left:0;right:0;flex-direction:column;background-color:var(--color-white);padding:var(--spacing-md);box-shadow:0 4px 12px rgba(0,0,0,0.1);transform:translateX(-100%);transition:transform 0.3s ease;gap:0}.nav-menu[data-astro-cid-3ef6ksr2].active{transform:translateX(0)}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]{width:100%;border-bottom:1px solid var(--color-background)}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]:last-child{border-bottom:none}.nav-menu[data-astro-cid-3ef6ksr2]>li[data-astro-cid-3ef6ksr2]>a[data-astro-cid-3ef6ksr2]{padding:var(--spacing-sm)}.submenu[data-astro-cid-3ef6ksr2]{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding-left:var(--spacing-md);display:none}.has-submenu[data-astro-cid-3ef6ksr2].active .submenu[data-astro-cid-3ef6ksr2]{display:block}}.site-footer[data-astro-cid-sz7xmlte]{background-color:var(--color-primary);color:var(--color-white);padding:var(--spacing-xl) 0 var(--spacing-md)}.footer-content[data-astro-cid-sz7xmlte]{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-xxl)}.footer-column[data-astro-cid-sz7xmlte] h3[data-astro-cid-sz7xmlte]{font-size:var(--font-size-h3);color:var(--color-white);margin-bottom:var(--spacing-sm)}.footer-column[data-astro-cid-sz7xmlte] h4[data-astro-cid-sz7xmlte]{font-size:20px;color:var(--color-secondary);margin-bottom:var(--spacing-sm);font-family:var(--font-heading)}.footer-tagline[data-astro-cid-sz7xmlte]{font-size:var(--font-size-small);line-height:1.6;margin-bottom:var(--spacing-md);opacity:0.9}.footer-contact[data-astro-cid-sz7xmlte] p[data-astro-cid-sz7xmlte]{font-size:var(--font-size-small);margin-bottom:var(--spacing-xs)}.footer-contact[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{color:var(--color-secondary);text-decoration:none;transition:color var(--transition-speed)}.footer-contact[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:var(--color-white)}.footer-contact[data-astro-cid-sz7xmlte] .note[data-astro-cid-sz7xmlte]{font-size:var(--font-size-xs);color:var(--color-secondary);opacity:0.8}.footer-links[data-astro-cid-sz7xmlte]{list-style:none;padding:0}.footer-links[data-astro-cid-sz7xmlte] li[data-astro-cid-sz7xmlte]{margin-bottom:var(--spacing-xs)}.footer-links[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{color:var(--color-white);font-size:var(--font-size-small);text-decoration:none;transition:color var(--transition-speed);opacity:0.9}.footer-links[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:var(--color-secondary);opacity:1}@media (max-width: 1024px){.footer-content[data-astro-cid-sz7xmlte]{grid-template-columns:1fr 1fr}}@media (max-width: 768px){.footer-content[data-astro-cid-sz7xmlte]{grid-template-columns:1fr;gap:var(--spacing-md)}.site-footer[data-astro-cid-sz7xmlte]{padding:var(--spacing-lg) 0 var(--spacing-md)}}

/* ========================================
   Zen Harmony Design System
   ======================================== */
/* Import Google Fonts */
/* ========================================
   CSS Variables - Zen Harmony Theme
   ======================================== */
:root {
  /* Colors */
  --color-primary: #2B4F3A;        /* Deep forest green */
  --color-secondary: #D9C8B0;      /* Warm beige */
  --color-accent: #B56D6D;         /* Soft red */
  --color-background: #F6F6F6;     /* Off-white */
  --color-text: #2B2B2B;           /* Dark gray for text */
  --color-text-light: #666666;     /* Light gray for secondary text */
  --color-white: #FFFFFF;
  
  /* Typography */
  --font-heading: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 15px;
  --font-size-quote: 16px;
  --font-size-button: 15px;
  --font-size-small: 14px;
  --font-size-xs: 12px;  /* Extra small text for notes and fine print */
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 72px;
  --spacing-xxl: 96px;
  
  /* Layout */
  --max-width: 1200px;
  --max-width-readable: 800px;  /* Optimal line length for reading (50-75 characters) */
  --max-width-form: 700px;  /* Forms are narrower than reading content - keeps inputs at comfortable width and creates focused, action-oriented feel. Common practice is 500-700px range - this is a suggestion, not a strict rule */
  --border-radius: 4px;
  
  /* Transitions */
  --transition-speed: 0.3s;
}
/* ========================================
   Reset & Base Styles
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}
h1 {
  font-size: var(--font-size-h1);
  font-weight: 600;
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
p {
  margin-bottom: var(--spacing-sm);
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}
a:hover {
  color: var(--color-accent);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
ul, ol {
  padding-left: var(--spacing-md);
}
li {
  margin-bottom: var(--spacing-xs);
}
/* ========================================
   Layout Utilities
   ======================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}
.section {
  padding: var(--spacing-xl) 0;
}
.section-alt {
  background-color: var(--color-white);
}
.text-center {
  text-align: center;
}
.text-accent {
  color: var(--color-accent);
}
/* ========================================
   Buttons
   ======================================== */
.btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: var(--font-size-button);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-speed);
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.text-link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-speed);
}
.text-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
/* ========================================
   Forms
   ======================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  border: 2px solid #E0E0E0;
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  transition: border-color var(--transition-speed);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--color-text);
}
textarea {
  min-height: 150px;
  resize: vertical;
}
/* ========================================
   Images
   ======================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 22px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;
  }
}
@media (max-width: 768px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 20px;
    --font-size-body: 16px;
    --font-size-quote: 18px;
    --font-size-button: 18px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
  }
  
  .btn {
    padding: 12px 24px;
  }
}
@media (max-width: 480px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 18px;
  }
}
/* ========================================
   Utility Classes
   ======================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Add extra padding-bottom to last section before footer */
main > section:last-child {
  padding-bottom: var(--spacing-xxl);
}