:root{
  --accent:#3e6b4f;
  --accent-dark:#2c4f39;
  --bg:#faf9f6;
  --bg-alt:#f1efe9;
  --ink:#23261f;
  --ink-soft:#4a4d45;
  --muted:#6b6e66;
  --faint:#9a9d94;
}

html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP','Hiragino Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
::selection{background:#dbe7dd}
img{max-width:100%}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:72px;background:rgba(250,249,246,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(35,38,31,.07)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand img{height:30px;width:auto;display:block}
.site-nav{display:flex;gap:34px;font-family:'Josefin Sans',sans-serif;font-size:14px;letter-spacing:.12em}
.site-nav a{color:var(--ink);padding-top:3px}
.site-nav a:hover{color:var(--accent)}

/* ============ Hero ============ */
.hero{position:relative;height:78vh;min-height:420px;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,18,.55) 0%,rgba(20,24,18,0) 45%)}
.hero-copy{position:absolute;left:48px;bottom:44px;color:var(--bg)}
.hero-copy h1{margin:0;font-family:'Josefin Sans',sans-serif;font-size:56px;font-weight:600;letter-spacing:.1em;line-height:1}
.hero-copy p{margin:14px 0 0;font-size:15px;font-weight:300;letter-spacing:.22em}

/* ============ SNS ============ */
.sns{display:flex;justify-content:center;gap:26px;padding:36px 0 8px}
.sns a{display:block;padding:6px;transition:transform .2s,opacity .2s;opacity:.85}
.sns a:hover{transform:translateY(-3px);opacity:1}
.sns img{width:26px;height:26px;display:block}

/* ============ Sections ============ */
.section-title{margin:0;text-align:center;font-family:'Josefin Sans',sans-serif;font-size:15px;font-weight:400;letter-spacing:.42em;color:var(--accent)}
.section-title--light{color:#c8d3c5}

/* ============ About ============ */
#about{max-width:640px;margin:0 auto;padding:72px 32px;text-align:center}
.about-lead{margin:30px 0 0;font-family:'Josefin Sans',sans-serif;font-size:24px;font-weight:300;letter-spacing:.08em;line-height:1.5}
.about-en{margin:22px 0 0;font-size:14.5px;font-weight:300;line-height:2.1;color:var(--ink-soft)}
.about-ja{margin:14px 0 0;font-size:13.5px;font-weight:300;line-height:2.2;color:var(--muted)}

/* ============ Music ============ */
#music{background:var(--bg-alt);padding:76px 32px}
.music-inner{max-width:860px;margin:0 auto}
.music-note{margin:14px 0 0;text-align:center;font-size:13px;font-weight:300;color:var(--muted)}
.embed-card{margin-top:36px;border-radius:14px;overflow:hidden;box-shadow:0 6px 28px rgba(35,38,31,.1)}
.embed-card iframe{display:block;border:0;width:100%;height:420px}
.music-links{display:flex;justify-content:center;gap:28px;margin-top:26px;font-family:'Josefin Sans',sans-serif;font-size:13px;letter-spacing:.1em}
.music-links a{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.music-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ============ Merch ============ */
#merch{padding:76px 0}
.merch-strip{display:flex;gap:18px;overflow-x:auto;padding:36px 48px 18px;scroll-snap-type:x mandatory}
.merch-strip img{height:300px;width:auto;max-width:none;border-radius:8px;flex:none;scroll-snap-align:start;object-fit:cover}
.merch-hint{margin:6px 0 0;text-align:center;font-size:11.5px;font-weight:300;letter-spacing:.14em;color:var(--faint)}

/* ============ Movie ============ */
#movie{background:var(--ink);padding:76px 40px}
.movie-grid{max-width:1080px;margin:40px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.movie-grid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;display:block;background:#181a15}

/* ============ Works ============ */
#works{background:var(--bg-alt);padding:76px 0}
.works-note{margin:14px 0 0;text-align:center;font-size:13px;font-weight:300;color:var(--muted)}
.works-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
/* margin:auto: 画面に収まる時は中央寄せ、あふれる時は通常の横スクロールになる */
.works-row{display:flex;gap:22px;margin:0 auto;padding:36px 48px 8px}
.work-card{margin:0;flex:none;width:280px;scroll-snap-align:start}
.work-card a{display:block;transition:transform .2s}
.work-card a:hover{transform:translateY(-4px)}
.work-card img{width:280px;height:280px;object-fit:cover;border-radius:8px;display:block;box-shadow:0 4px 18px rgba(35,38,31,.08);transition:box-shadow .2s}
.work-card a:hover img{box-shadow:0 10px 26px rgba(35,38,31,.16)}
.work-card figcaption{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.work-type{font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:.24em;color:var(--accent)}
.work-artist{font-size:13.5px;font-weight:500}
.work-title{font-size:12.5px;font-weight:300;color:var(--muted)}

/* ============ News ============ */
#news{max-width:640px;margin:0 auto;padding:76px 32px}
.news-list{margin-top:34px;display:flex;flex-direction:column}
.news-item{display:flex;gap:24px;align-items:baseline;padding:16px 4px;border-bottom:1px solid rgba(35,38,31,.1)}
.news-date{flex:none;font-family:'Josefin Sans',sans-serif;font-size:12.5px;letter-spacing:.08em;color:var(--faint)}
.news-title{font-size:14px;font-weight:300}

/* ============ Contact ============ */
#contact{background:var(--bg-alt);padding:76px 32px}
.contact-inner{max-width:520px;margin:0 auto}
.contact-note{margin:16px 0 0;text-align:center;font-size:13px;font-weight:300;color:var(--muted)}
.contact-form{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.contact-form label{display:flex;flex-direction:column;gap:7px;font-family:'Josefin Sans',sans-serif;font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft)}
.contact-form input,.contact-form textarea{border:1px solid rgba(35,38,31,.18);border-radius:6px;background:var(--bg);padding:11px 14px;font-family:'Noto Sans JP',sans-serif;font-size:14px;color:var(--ink);outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}
.contact-form textarea{resize:vertical}
.contact-form input.invalid,.contact-form textarea.invalid{border-color:#b3502e}
.field-error{min-height:1em;font-family:'Noto Sans JP',sans-serif;font-size:12px;letter-spacing:.02em;color:#b3502e}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:14px 0 0;text-align:center;font-size:13px;font-weight:300;min-height:1.4em}
.form-status.success{color:var(--accent)}
.form-status.error{color:#b3502e}
.send-btn:disabled{opacity:.55;cursor:default}
/* interaction-only: 通常は非表示なので余白を相殺し、チャレンジ表示時だけ自然に広がる */
.cf-turnstile{display:flex;justify-content:center;margin:-9px 0}
.contact-submit{display:flex;justify-content:center;margin-top:8px}
.send-btn{font-family:'Josefin Sans',sans-serif;font-size:14px;letter-spacing:.2em;padding:13px 52px 11px;border:none;border-radius:999px;background:var(--accent);color:var(--bg);cursor:pointer;transition:opacity .2s}
.send-btn:hover{opacity:.85}

/* ============ Footer ============ */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 0 36px}
.site-footer img{height:26px;width:auto}
.site-footer p{margin:0;font-family:'Josefin Sans',sans-serif;font-size:11.5px;letter-spacing:.16em;color:var(--faint)}

/* ============ Mobile ============ */
@media (max-width:760px){
  html{scroll-padding-top:124px}
  .site-header{flex-direction:column;height:auto;padding:14px 16px 12px;gap:10px}
  .site-nav{flex-wrap:wrap;justify-content:center;gap:12px 22px;font-size:13px}
  .hero{height:64vh}
  .hero-copy{left:24px;right:24px;bottom:30px}
  .hero-copy h1{font-size:38px}
  #about,#news{padding:60px 24px}
  #music,#contact,#movie{padding:60px 20px}
  .merch-strip{padding:28px 20px 14px}
  .merch-strip img{height:240px}
  #works{padding:60px 0}
  .works-row{padding:28px 20px 8px;gap:16px}
  .work-card{width:230px}
  .work-card img{width:230px;height:230px}
}