@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;600&family=Zen+Old+Mincho:wght@400;500&display=swap");

:root{
  --paper:#F2F1EE;
  --ink:#16161A;
  --mute:#86847E;
  --vermilion:#D93A18;
  --ochre:#E3A526;
  --cobalt:#2B3C9B;
  --line:rgba(22,22,26,.14);
  --rail:0px;
  --head:116px;
  --pad:clamp(24px,6vw,88px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Montserrat",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  padding-left:var(--rail);
  padding-top:var(--head);
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.jp{font-family:"Zen Old Mincho",serif;font-weight:400;letter-spacing:.04em}

.label{
  font-size:11px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--vermilion);margin-bottom:2.2em;
}

.btn{
  display:inline-block;margin-top:2.2em;padding:.9em 2.5em;
  border:1px solid var(--ink);
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;transition:background .35s,color .35s;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}

/* ============ ヘッダー ============ */
.site-head{
  position:fixed;top:0;left:var(--rail);right:0;height:var(--head);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;padding:0 var(--pad);z-index:200;
  background:rgba(242,241,238,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head__logo{display:block;line-height:0}
/* ロゴを黒く表示（白抜き画像のまま使えます） */
.site-head__logo img{height:30px;width:auto;filter:brightness(0)}

.nav ul{display:flex;gap:clamp(20px,2.8vw,40px);list-style:none}
.nav a{
  font-size:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;color:#4A4A47;transition:color .3s;
}
.nav a:hover,.nav a:focus-visible{color:var(--vermilion)}
.nav a.is-current{color:var(--ink)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;width:44px;height:44px;
  position:absolute;right:calc(var(--pad) - 10px);top:50%;transform:translateY(-50%)}
.burger span{display:block;height:1px;background:var(--ink);margin:6px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ ヒーロー ============ */
.hero{padding:clamp(20px,3vw,36px) 0 clamp(52px,7vw,88px)}
.hero__photo{width:100%;height:auto;display:block;background:#E4E2DD}
.hero__copy{margin-top:clamp(28px,4vw,46px)}
.hero__tag{font-size:clamp(15px,2.3vw,25px);font-weight:300;letter-spacing:.16em}
.hero__tag-jp{font-size:clamp(12px,1.5vw,14.5px);color:var(--mute);margin-top:.9em}

/* ============ セクション ============ */
section{padding:clamp(64px,9vw,130px) 0;border-top:1px solid var(--line)}
.hero+section{border-top:none;padding-top:0}

.page-title{font-size:clamp(34px,6vw,64px);font-weight:200;letter-spacing:.04em;line-height:1.1}
.page-title+.page-rule{width:64px;height:2px;background:var(--ochre);margin-top:1.1em}
.page-lead{margin-top:1.4em;font-size:13.5px;color:var(--mute);letter-spacing:.08em}

/* ============ NEWS ============ */
.news{list-style:none;border-top:1px solid var(--line)}
.news li{
  display:grid;grid-template-columns:130px 1fr auto;gap:1.5em;align-items:baseline;
  padding:1.5em 0;border-bottom:1px solid var(--line);
}
.news .date{font-size:12px;letter-spacing:.18em;color:var(--cobalt)}
.news .body{font-size:15.5px;font-weight:300;letter-spacing:.03em;line-height:1.65}
.news .body small{display:block;font-size:12.5px;color:var(--mute);margin-top:.5em;letter-spacing:.06em}
.news .go{
  font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:.2em;
  transition:color .3s,border-color .3s;
}
.news .go:hover{color:var(--vermilion);border-color:var(--vermilion)}

/* ============ LIVE ============ */
.gig{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:start;
  padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line)}
/* NEXT は1公演だけなので区切り線を出さない */
.ev:only-of-type .gig{border-bottom:none;padding-bottom:0}
.gig__date{font-size:clamp(26px,4.2vw,46px);font-weight:200;line-height:1.1}
.gig__day{font-size:10.5px;letter-spacing:.3em;color:var(--mute);margin-top:.6em}
.gig__venue{font-size:18px;letter-spacing:.05em}
.gig__bill{font-size:13.5px;color:var(--cobalt);margin-top:.5em;letter-spacing:.08em}
.gig__info{margin-top:1.3em;font-size:13px;color:var(--mute);line-height:2.05}

/* ライブ写真ストリップ */
.shots{display:grid;gap:clamp(10px,1.4vw,16px);
  margin:0 0 clamp(22px,3vw,32px)}
/* 2枚並びも、1枚あたりの大きさを3枚並びと揃える */
.shots--2{max-width:calc(66.666% - (clamp(10px,1.4vw,16px) / 3))}
.shots--1{max-width:calc(33.333% - (clamp(10px,1.4vw,16px) * 2 / 3))}
.ev + .ev{margin-top:clamp(40px,5vw,64px)}
.shots--3{grid-template-columns:repeat(3,1fr)}
.shots--2{grid-template-columns:repeat(2,1fr)}
.shots img{width:100%;height:auto;display:block;background:#E4E2DD}

.dots{display:none}

.arch{list-style:none;border-top:1px solid var(--line)}
.arch li{display:grid;grid-template-columns:130px 1fr;gap:1.5em;
  padding:1.25em 0;border-bottom:1px solid var(--line)}
.arch .date{font-size:12px;letter-spacing:.18em;color:var(--mute)}
.arch .body{font-size:14.5px;letter-spacing:.03em}
.arch .body small{display:block;font-size:12px;color:var(--mute);margin-top:.4em}

/* ============ BIOGRAPHY ============ */
.bio-photo{width:100%;height:auto;display:block;background:#E4E2DD}
.bio-credit{margin:1.3em 0 clamp(40px,6vw,72px);text-align:center;
  font-size:12.5px;letter-spacing:.1em;color:var(--mute);line-height:1.9}
.bio{max-width:860px}
.bio__en{margin-top:clamp(40px,5vw,64px);padding-top:clamp(36px,4.5vw,56px);
  border-top:1px solid var(--line)}
.bio p+p{margin-top:1.5em}
.bio__jp{font-size:15px;line-height:2.3;line-break:strict;word-break:auto-phrase}
/* 途中で折り返したくない語のまとまり */
.nb{display:inline-block}
/* スマホでのみ改行する箇所 */
.br-sp{display:none}
.bio__en{font-size:14px;color:var(--mute);line-height:2.15}
.bio__members{margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line);
  font-size:12.5px;letter-spacing:.1em;color:var(--mute)}

/* ============ DISCOGRAPHY ============ */
.discs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);list-style:none}
.discs .art{aspect-ratio:1/1;background:#E4E2DD center/cover no-repeat}
.discs h3{margin-top:1.1em;font-size:16px;font-weight:300;letter-spacing:.04em}
.discs .meta{font-size:10.5px;letter-spacing:.16em;color:var(--mute);margin-top:.5em}
.discs .go{display:inline-block;margin-top:.9em;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:.2em;transition:color .3s,border-color .3s}
.discs .go:hover{color:var(--vermilion);border-color:var(--vermilion)}

/* ============ GOODS ============ */
.goods-ev{padding-bottom:clamp(34px,4.5vw,56px);border-bottom:1px solid var(--line)}
.goods-info{margin-bottom:clamp(18px,2.4vw,28px)}
.goods__name{font-size:18px;letter-spacing:.05em}
.goods__price{color:var(--mute);white-space:nowrap}
.goods__variant{margin-top:.55em;font-size:13.5px;letter-spacing:.06em;color:var(--cobalt)}

/* ============ VIDEO ============ */
.video{aspect-ratio:16/9;background:#E4E2DD;border:1px solid var(--line)}
.video iframe{width:100%;height:100%;border:0;display:block}
.video__cap{margin-top:1em;font-size:12px;letter-spacing:.2em;color:var(--mute)}
.video-list{display:grid;gap:clamp(40px,6vw,72px);margin-top:clamp(40px,6vw,72px)}

/* ============ CONTACT ============ */
.form{max-width:620px;margin-top:1em}
.field{margin-bottom:1.9em}
.field label{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.8em}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:300;
  padding:.6em 0;transition:border-color .3s;
}
.field select option{background:var(--paper)}
.field textarea{resize:vertical;min-height:150px;line-height:1.9}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--vermilion)}
.form button{
  margin-top:.8em;padding:.95em 3.2em;background:transparent;color:var(--ink);
  border:1px solid var(--ink);font-family:inherit;
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .35s,color .35s;
}
.form button:hover{background:var(--ink);color:var(--paper)}
.form__note{margin-top:2.4em;font-size:12.5px;color:var(--mute);line-height:2}
.form__note a,.form-err a{border-bottom:1px solid var(--line)}
.form-err{margin:0 0 1.6em;font-size:13px;color:var(--vermilion);line-height:1.9}
.form-done{max-width:620px;padding:clamp(28px,4vw,44px) 0}
.form-done__t{font-size:clamp(30px,5vw,48px);font-weight:200;letter-spacing:.03em}
.form-done__s{margin-top:1.2em;font-size:14px;color:var(--mute);line-height:2}

/* ============ フッター ============ */
.site-foot{padding:clamp(48px,7vw,80px) 0 56px;border-top:1px solid var(--line)}
.sns{display:flex;gap:clamp(20px,3vw,34px);list-style:none;margin-bottom:2.6em}
.sns a{display:block;color:var(--mute);transition:color .3s}
.sns a:hover,.sns a:focus-visible{color:var(--vermilion)}
.sns svg{width:21px;height:21px;display:block;fill:currentColor}
.copy{font-size:10.5px;letter-spacing:.2em;color:var(--mute)}

/* ============ 登場アニメーション ============ */
.rise{opacity:0;transform:translateY(16px);transition:opacity .85s ease,transform .85s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ============ モバイル ============ */
@media (max-width:900px){
  :root{--head:64px}
  .site-head{flex-direction:row;justify-content:center;gap:0}
  .site-head__logo img{height:22px}
  .burger{display:block}
  .nav{
    position:fixed;top:var(--head);left:var(--rail);right:0;
    background:rgba(242,241,238,.97);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .4s ease;
  }
  .nav.is-open{max-height:340px}
  .nav ul{flex-direction:column;gap:0;padding:6px var(--pad) 26px}
  .nav li{border-bottom:1px solid var(--line)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:1.15em 0;font-size:12px}

  .discs{grid-template-columns:repeat(2,1fr)}
  .shots--1{max-width:none}
  .news li{grid-template-columns:1fr;gap:.7em}
  .news .go{justify-self:start;margin-top:.4em}
  .arch li{grid-template-columns:1fr;gap:.4em}
  .shots{display:flex;align-items:flex-start;gap:10px;max-width:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;
    margin-bottom:12px}
  .shots::-webkit-scrollbar{display:none}
  .shots img{flex:0 0 74%;width:auto;scroll-snap-align:start}

  .dots{display:flex;gap:7px;justify-content:center;margin:0 0 24px}
  .dots span{width:5px;height:5px;border-radius:50%;
    background:rgba(22,22,26,.2);transition:background .3s}
  .dots span.on{background:var(--vermilion)}

  .discs .meta{white-space:nowrap;font-size:9.5px;letter-spacing:.1em}

  /* BIOGRAPHY：指定の改行位置で収まるよう文字を詰める */
  .bio__jp{font-size:13.5px;line-height:2.15}
  .bio__en{font-size:13px;line-height:2.05}
  .bio-credit{font-size:11.5px;letter-spacing:.06em;line-height:2}
  /* ルーツの一覧は「と、」まで1行に収める */
  .roots{font-size:12.5px;letter-spacing:0}
  .br-sp{display:inline}
  .gig{grid-template-columns:1fr;gap:16px}
}