/* ==== common.css (base & shared components) ==== */

/* 1. Root & Reset */
:root{
  --color-bg:#fafafa; --color-primary:#800000; --color-primary-light:#a52a2a;
  --color-text:#2f4f4f; --color-muted:#666; --color-white:#fff;
  --font-main:'Nunito',sans-serif;
  --transition:.3s ease; --transition-fast:.18s ease; --transition-slow:.45s ease;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.05);
  --shadow-lg:0 16px 36px rgba(0,0,0,.08);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{font-family:var(--font-main);color:var(--color-text);background:var(--color-bg);line-height:1.6}

/* 2. Utilities & a11y */
.container{width:min(90%,1200px);margin-inline:auto}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,.faq-q:focus-visible{outline:3px solid rgba(128,0,0,.35);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* 3. Buttons */
.btn{display:inline-block;padding:.8rem 1.6rem;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:background var(--transition),color var(--transition),border-color var(--transition);transition-duration:var(--transition-fast);box-shadow:var(--shadow-sm)}
.btn:hover{box-shadow:var(--shadow-md)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-light)}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--color-primary)}
.btn-large{padding:14px 22px;font-size:16px;border-radius:999px}

/* 4. Header & Nav */
.site-header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{font-size:1.5rem;font-weight:700;color:var(--color-text);text-decoration:none}
.nav-menu{list-style:none;display:flex;gap:1.5rem}
.nav-menu a{position:relative;color:var(--color-text);text-decoration:none;font-weight:600;padding:.3rem 0;transition:color var(--transition)}
.nav-menu a.active,.nav-menu a:hover{color:var(--color-primary)}
.nav-menu a.active::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:var(--color-primary)}

/* 5. Hero (base)  */
.hero{position:relative;height:72vh;display:grid;place-items:center;text-align:center;color:#fff;background:var(--hero-bg,none) center/cover no-repeat}
.hero::before{content:'';position:absolute;inset:0;background:var(--hero-overlay,rgba(0,0,0,.3))}
.hero-inner{position:relative;z-index:1;max-width:800px;padding:0 1rem}
.hero-inner h1{font-size:clamp(2.4rem,5.6vw,3.4rem);margin-bottom:.5rem;letter-spacing:.02em}
.hero-inner .sub{font-size:clamp(1rem,1.5vw,1.1rem);margin-bottom:1.5rem;opacity:.95}
.hero-buttons .btn{margin:0 .5rem}

/* 6. Sections */
section{padding:4rem 0}
h2{font-size:2rem;color:var(--color-primary);text-align:center;margin-bottom:2rem}

/* 7. Shared cards & chips */
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cta-card{text-align:center;padding:2rem 1.25rem;border:1px solid #eee;border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#fafafa);box-shadow:var(--shadow-md)}
.badge{display:inline-block;font-size:.85rem;letter-spacing:.03em;padding:6px 12px;border-radius:999px;background:rgba(128,0,0,.08);color:var(--color-primary);border:1px solid rgba(128,0,0,.15)}
.faq-tag{display:inline-block;font-size:.85rem;letter-spacing:.03em;padding:6px 12px;border-radius:999px;border:1px solid #eee;background:#fff;color:var(--color-text);cursor:pointer;transition:transform .15s ease,background var(--transition),border-color var(--transition)}
.faq-tag:hover{transform:translateY(-1px);background:#fafafa;border-color:#e2e2e2}

/* 8. Footer */
.site-footer{background:#fff;text-align:center;padding:1.5rem 0;color:var(--color-muted);font-size:.9rem}

/* 9. Responsive (nav) */
@media (max-width: 768px) {
  .representative { flex-direction: column; }

  .navbar { position: relative; }
  .hamburger { display: block; background: none; border: 1px solid transparent; cursor: pointer; position: relative; z-index: 1001; }
  .hamburger span { display: block; width: 25px; height: 3px; background: var(--color-text); margin-bottom: 4px; }

  /* ここを変更：右上ポップオーバー化 */
  .nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(78vw, 320px);
    margin: 0;
    padding: 8px;
    list-style: none;

    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;

    /* 閉じた状態 */
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .nav-menu li a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
  }
  .nav-menu li a:hover,
  .nav-menu li a.active { background: #fafafa; color: var(--color-primary); }

  /* 背景クリック用オーバーレイ（JSで付け外し） */
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 900;
  }
  .nav-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; }
}
/* ===== Share CTA ===== */
.share-cta { padding: 2.5rem 0 3rem; }
.share-card { max-width: 820px; margin: 0 auto; }
.share-eyebrow {
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: var(--color-primary); color:#fff; font-size:.8rem; letter-spacing:.08em;
}
.share-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top: .5rem; }
.share-note { display:block; text-align:center; margin-top:.5rem; color: var(--color-muted); }