:root {
      --header-h: 64px;
      --header-b: 1px;
      --max-w: 1100px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--header-b)); }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1f2937; background: #fffdf9; overflow-x: hidden; }

    .header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 1000; display:flex; align-items:center; background:#ffffffcc; backdrop-filter: blur(8px); border-bottom: var(--header-b) solid #0000001a; }
    .container { width: min(100% - 32px, var(--max-w)); margin-inline: auto; display:flex; align-items:center; justify-content:space-between; gap: 16px; }
    .brand { font-weight: 800; letter-spacing:.08em; text-transform: uppercase; color:#111827; text-decoration:none; }
    .brand img {width:50%;}

    .nav { display:none; gap:1px; }
    .nav a { color:#0f172a; text-decoration:none; padding:8px 12px; border-radius:12px; font-size:14px; }
    .nav a[aria-current="true"], .nav a:hover { background:#0f172a14; }

    .menu-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:0; background:transparent; color:#0f172a; }
    .menu-btn:hover { background:#0f172a10; }

    .drawer-backdrop { position: fixed; inset:0; background:#0008; opacity:0; pointer-events:none; transition:opacity .2s; z-index:1100; }
    .drawer { position: fixed; inset:0 0 0 auto; width:280px; background:#ffffff; color:#0f172a; border-left:1px solid #00000012; transform:translateX(100%); transition:transform .25s; padding:16px; display:grid; grid-template-rows:auto 1fr; gap:12px; z-index:1200; }
    .drawer .links { display:flex; flex-direction:column; gap:6px; }
    .drawer .links a { display:flex; align-items:center; padding:6px 10px; min-height:36px; border-radius:10px; color:#0f172a; text-decoration:none; font-size:14px; line-height:1.25; }
    .drawer .links a[aria-current="true"], .drawer .links a:hover { background:#0f172a10; }

    main { }
    section { min-height: 100dvh; width:100%; display:grid; place-items:center; position:relative; }
    /* 各セクションの配色（明るい平成ポップ） */
    #home { background-image: url("./images/bg.jpg"); background-size: cover; background-repeat: no-repeat;  }
    #about { background-image: url("./images/bg2.jpg"); background-size: cover; background-repeat: no-repeat;  }
    #circleguide { background-image: url("./images/bg3.jpg"); background-size: cover; background-repeat: no-repeat;  }    #notice { background-image: url("./images/bg4.jpg"); background-size: cover; background-repeat: no-repeat;  }
    #form { background-image: url("./images/bg5.jpg"); background-size: cover; background-repeat: no-repeat;  }

    .inner { width:min(100% - 32px, var(--max-w)); margin-inline:auto; text-align:left; color:#FFF;}
    h1 { font-size: clamp(28px, 6vw, 56px); margin: 0 0 10px; }
    h1 img { width:60%; }
    h2 { font-size: clamp(22px, 4.5vw, 36px); margin:0; line-height:1.2; font-weight:700;  text-align:left; }
    h3 { font-size: 20px; margin:20px 0 -10px 0; padding:0; font-weight:700;  text-align:left; }

    p{ text-align:left; max-width:100ch; margin-left:auto; margin-right:auto; margin-bottom:30px; line-height:1.9; font-size:clamp(15px,1.6vw,18px); }

    ul{ text-align:left; margin-left:auto; margin-right:auto; max-width:100ch; line-height:1.9; padding-left:1.25em; list-style:disc outside; margin-top:0; margin-bottom:0; font-size:clamp(15px,1.6vw,18px); }

    li{ margin-top:0; margin-bottom:0em; text-align:left; }

    .inner a{ color:#FFF; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }

    section::before{ display:none !important; height:0 !important; margin:0 !important; }

    @keyframes fadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
    :target .inner { animation: fadeUp .45s ease both; }
    @media (prefers-reduced-motion: reduce){ :target .inner { animation:none; } }

    @media (min-width: 768px){ .nav{ display:flex; } .menu-btn{ display:none; } }
    
    .spacious{ padding-block: clamp(32px, 8vh, 120px); 
    .spacious .inner{ max-width: var(--max-w); }
    @media (max-width: 480px){ .spacious{ padding-block: 56px; } }