/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
  --color-primary: #009B7D;
  --color-primary-light: #00B8B8;
  --color-primary-gradient: linear-gradient(135deg, #009B7D 0%, #00B8B8 100%);
  --color-text: #333333;
  --color-text-secondary: #5A5A5A;
  --color-border: #D0D0D0;
  --color-border-focus: #009B7D;
  --color-bg: #FFFFFF;
  --color-bg-section: #F7F9F8;
  --color-bg-page: #FAFAFA;
  --color-required: #E25C5C;
  --color-error: #D32F2F;
  --color-error-bg: #FFF5F5;
  --color-error-border: #FFCDD2;
  --color-white: #FFFFFF;
  --font-en: 'Poppins', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --content-max-width: 720px;
  --page-max-width: 1080px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-jp); color: var(--color-text); background: var(--color-bg-page); line-height: 1.8; min-height: 100vh; }
a { color: var(--color-primary); text-decoration: underline; }
a:hover { opacity: 0.8; }

/* ==========================================================================
   Header
   ========================================================================== */
.l-header { background: var(--color-white); border-bottom: 1px solid #E8E8E8; padding: 16px 24px; position: sticky; top: 0; z-index: 100; }
.l-header__inner { max-width: var(--page-max-width); margin: 0 auto; display: flex; align-items: center; }
.l-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); }
.l-header__logo-mark { height: 28px; width: auto; }

/* ==========================================================================
   Page Hero
   ========================================================================== */
.p-hero { background: var(--color-primary-gradient); padding: 56px 24px; text-align: center; color: var(--color-white); }
.p-hero__en { font-family: var(--font-en); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.p-hero__title { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.l-footer { background: #333; color: var(--color-white); padding: 32px 24px; text-align: center; }
.l-footer__copyright { font-family: var(--font-en); font-size: 12px; opacity: 0.6; letter-spacing: 0.04em; }

/* ==========================================================================
   Responsive (Common)
   ========================================================================== */
@media (max-width: 768px) {
  .p-hero { padding: 40px 20px; }
  .p-hero__title { font-size: 22px; }
}