:root{
  --kasumi:#EEF2F6; --washi:#FFFFFF; --koai:#3D709C; --koai-deep:#2D5677;
  --mizu:#A7BDD2; --mizu-soft:#D2DDE9;
  --wakaba:#79988E; --asahi:#D8A98F; --shu:#C6876E; --shu-deep:#B5755C;
  --sakura:#E6ECF3; --sumi:#333A49; --sumi-soft:#6F7A87; --line:#D8E0E9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--kasumi); color:var(--sumi);
  font-family:"Zen Kaku Gothic New",sans-serif; line-height:1.9; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.mincho{font-family:"Noto Serif JP",serif;}
.latin{font-family:"Cormorant Garamond",serif;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.tategaki{writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.18em;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; border-radius:999px; cursor:pointer; transition:.2s;}
.btn-lg{padding:14px 30px; font-size:15px;}
.btn-primary{background:var(--shu); color:#fff; border:0;}
.btn-primary:hover{background:var(--shu-deep);}
.btn-ghost{border:1px solid var(--koai); color:var(--koai-deep); background:transparent;}
.btn-ghost:hover{background:rgba(94,154,156,.08);}

/* type */
.eyebrow{font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.05em; color:var(--koai-deep); font-size:21px;}
.kicker{font-size:12px; letter-spacing:.3em; color:var(--sumi-soft); font-weight:500;}
h2.sec{font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(26px,3.4vw,34px); letter-spacing:.04em; margin:8px 0 8px;}
.lead{color:var(--sumi-soft); max-width:620px; font-size:15px;}
.more{color:var(--koai-deep); font-size:14px; font-weight:500;}
.more:hover{color:var(--shu-deep);}

section{padding:82px 0;}
.sec-head{margin-bottom:36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}

.card{background:var(--washi); border:1px solid var(--line); border-radius:22px;}
.soft{}
.wave{height:2px; background:linear-gradient(90deg,transparent,var(--koai),transparent); opacity:.4;}

.tag{display:inline-block; font-size:12px; padding:4px 12px; border-radius:999px; background:rgba(121,152,142,.18); color:#5d7a6f;}
.tag-koai{background:rgba(94,154,156,.15); color:var(--koai-deep);}
.shiori-tab{display:inline-block; background:var(--shu); color:#fff; font-size:12px; font-weight:700; padding:5px 14px 10px; border-radius:0 0 9px 9px;}

/* hero */
.hero{position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 88% 4%, rgba(235,116,74,.14), transparent 52%),
             linear-gradient(180deg,#EAF4FA 0%,#E6F2F9 50%,#CFE6F2 100%);}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:74px 0 86px;}
.hero-h{font-family:"Noto Serif JP",serif; font-weight:800; font-size:clamp(38px,5vw,58px); line-height:1.34; letter-spacing:.05em; margin:8px 0 14px;}
.hero-figure{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/4.4;}
.hero-figure img{width:100%; height:100%; object-fit:cover;}
.hero-figure-wrap{position:relative;}
.scene{width:100%; height:auto; display:block; border-radius:24px; box-shadow:0 30px 60px -34px rgba(45,86,119,.55);}
.kotonoha{display:inline-flex; gap:7px; padding:18px 13px; background:var(--washi); margin-bottom:18px; border-radius:42% 58% 56% 44% / 62% 42% 58% 38%; box-shadow:0 14px 30px -16px rgba(45,86,119,.5); transform:rotate(-2deg);}
.kotonoha span{writing-mode:vertical-rl; font-family:"Noto Serif JP",serif; font-weight:600; letter-spacing:.2em; font-size:14px; color:var(--sumi);}
.hero-poem{position:absolute; top:24px; right:22px; color:#fff; font-size:18px; text-shadow:0 1px 8px rgba(0,0,0,.4);}
.figtag{position:absolute; left:16px; bottom:16px; font-size:11px; background:rgba(252,250,244,.85); color:var(--koai-deep); padding:5px 12px; border-radius:999px;}
.hero-wave{position:absolute; left:0; right:0; bottom:-1px; height:60px;}
.brand-logo{height:36px; width:auto; display:block;}
.fv-grid{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:stretch; padding:40px 0 56px;}
.fv-left{display:flex; flex-direction:column;}
.fv-illust-s{width:100%; height:auto; border-radius:14px; display:block;}
.fv-logo-block{margin-top:auto; padding-top:42px;}
.fv-logo{width:min(100%,452px); height:auto; display:block;}
.fv-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
.fv-right{display:flex;}
.fv-illust-l{width:100%; height:auto; border-radius:16px; object-fit:cover; display:block;}
.sns-btn.on-dark{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); color:#fff;}
.sns-btn.on-dark:hover{background:rgba(255,255,255,.2); border-color:#fff;}

/* 特集 grid */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feat{overflow:hidden; display:flex; flex-direction:column; transition:.2s;}
.feat:hover{transform:translateY(-3px);}
.flyer{position:relative; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;}
ruby rt{font-size:.38em; color:var(--koai-deep); font-weight:500; letter-spacing:.12em;}
.flyer .lbl{font-size:12px; color:var(--koai-deep); background:rgba(252,250,244,.8); padding:5px 12px; border-radius:999px;}
.feat-body{padding:10px 20px 20px;}
.feat-date{font-family:"Cormorant Garamond",serif; color:var(--sumi-soft); font-size:16px; letter-spacing:.03em; margin:6px 0;}
.feat-title{font-family:"Noto Serif JP",serif; font-weight:700; font-size:18px; margin:3px 0 10px;}

/* upcoming list */
.up-row{display:grid; grid-template-columns:88px 1fr auto; gap:18px; align-items:center; padding:18px 4px;}
.up-thumb{width:88px; height:64px; border-radius:12px;}
.up-date{font-family:"Cormorant Garamond",serif; font-size:17px; color:var(--koai-deep);}

/* news */
.news-row{display:grid; grid-template-columns:120px 90px 1fr; gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line);}
.news-cat{font-size:11px; padding:4px 10px; border-radius:999px; text-align:center;}
.cat-info{background:rgba(94,154,156,.15); color:var(--koai-deep);}
.cat-report{background:rgba(121,152,142,.18); color:#5d7a6f;}
.cat-lit{background:rgba(235,116,74,.16); color:var(--shu-deep);}
.news-date{font-family:"Cormorant Garamond",serif; color:var(--sumi-soft); font-size:16px;}

/* about band */
.about{background:linear-gradient(180deg,var(--sora),#ffffff);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:18px;}
.about-switch{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-bottom:12px; flex-wrap:wrap;}
.as-label{font-size:11px; color:var(--sumi-soft);}
.as-tabs{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--washi);}
.as-tab{padding:6px 16px; border:0; background:transparent; font-size:12.5px; color:var(--sumi-soft); cursor:pointer; font-family:inherit;}
.as-tab.active{background:var(--koai); color:#fff;}
.g-stage{position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--kasumi);}
.g-slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; background-size:cover; background-position:center;}
.g-slide.active{opacity:1;}
.g-slide.flyer{background:#DCEFF8; display:flex; align-items:center; justify-content:center;}
.g-slide.flyer .fl{color:var(--sumi-soft); font-size:13px; letter-spacing:.1em;}
.g-cap{position:absolute; left:0; right:0; bottom:0; padding:34px 16px 13px; font-size:13px; color:#fff; background:linear-gradient(transparent, rgba(45,86,119,.82));}
.g-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.85); border:0; cursor:pointer; font-size:19px; color:var(--sumi); display:flex; align-items:center; justify-content:center;}
.g-arrow:hover{background:#fff;} .g-arrow.prev{left:10px;} .g-arrow.next{right:10px;}
.g-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.g-dots button{width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0;}
.g-dots button.active{background:var(--koai);}
.theme{font-family:"Noto Serif JP",serif; font-weight:800; font-size:clamp(26px,3.6vw,38px); letter-spacing:.06em;}
.writers{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px;}
.writer{text-align:center; width:96px;}
.w-ava{width:76px; height:76px; border-radius:50%; margin:0 auto 8px;
  background:radial-gradient(120% 120% at 30% 25%, #E4F1F8, #DCEAF4); border:1px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; color:var(--koai-deep); font-family:"Noto Serif JP",serif;}
.w-name{font-size:13px; font-weight:700;}
.w-tie{font-size:11px; color:var(--sumi-soft);}

/* sns */
.sns-btn{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--washi);
  padding:12px 22px; border-radius:999px; font-size:14px;}
.sns-btn:hover{border-color:var(--koai);}


.ktag{display:inline-block; font-size:14px; padding:9px 18px; border-radius:999px; background:var(--washi); border:1px solid var(--line); color:var(--koai-deep); transition:.18s;}
.ktag:hover{background:var(--koai); color:#fff; border-color:var(--koai);}

.evlist-grid{display:grid; grid-template-columns:1fr 280px; gap:34px; align-items:start;}
.evlist-side .side-box{background:var(--washi); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:18px;}
.side-h{font-family:"Noto Serif JP",serif; font-weight:700; font-size:16px; margin:0 0 14px;}
.cat-list{display:flex; flex-direction:column; gap:9px;}
.cat{font-size:14px; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background:var(--washi); display:block;}
.cat.active{background:var(--koai); color:#fff; border-color:var(--koai);}
.tag-list{display:flex; flex-wrap:wrap; gap:9px 15px;}
.etag{font-size:13px; color:var(--koai-deep);} .etag:hover{color:var(--shu-deep);}
.tag-group{margin-bottom:16px;} .tag-group:last-child{margin-bottom:0;}
.tag-sub{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--sumi-soft); margin:0 0 9px; padding-left:9px; border-left:3px solid var(--koai);}
.morelink{font-size:13px; color:var(--koai-deep); font-weight:500;} .morelink:hover{color:var(--shu-deep);}
.ev-item{display:grid; grid-template-columns:118px 1fr; gap:22px; align-items:stretch; padding:22px 14px; border-bottom:1px solid var(--line); color:inherit; border-radius:14px; transition:.2s;}
.ev-item:last-child{border-bottom:0;}
.ev-more .arw{display:inline-block; transition:transform .2s ease;}
.ev-thumb{width:118px; aspect-ratio:3/4; height:auto; border-radius:10px; align-self:start;}
.ev-body{display:flex; flex-direction:column; min-width:0;}
.ev-top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px;}
.ev-held{font-size:13px; color:var(--sumi);}
.ev-held b{font-size:11px; color:var(--koai-deep); font-weight:700; margin-right:7px; letter-spacing:.04em;}
.ev-held .d{font-family:"Cormorant Garamond",serif; font-size:18px; letter-spacing:.03em;}
.ev-upd{font-size:11px; color:var(--sumi-soft); white-space:nowrap;}
.ev-upd .d{font-family:"Cormorant Garamond",serif; font-size:14px; margin-left:5px;}
.ev-title{font-family:"Noto Serif JP",serif; font-weight:700; font-size:19px; margin:0 0 8px;}
.ev-tags{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 11px;}
.ev-desc{font-size:13.5px; color:var(--sumi-soft); line-height:1.8; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ev-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-top:auto;}
.ev-place{font-size:13px; color:var(--sumi-soft);}
.ev-more{font-size:14px; color:var(--koai-deep); font-weight:500; white-space:nowrap;}
.ev-item:hover .ev-more{color:var(--shu);}
.ev-item:hover .arw{transform:translateX(5px);}
.annot{position:fixed; right:14px; bottom:14px; z-index:80; background:var(--sumi); color:#fff; font-size:11px; padding:7px 13px; border-radius:999px; opacity:.78;}

@media(max-width:880px){
  .nav .link, .nav .contact{display:none;}
  .hamburger{display:block;}
  #mnav.open{display:block; padding:10px 0 18px; border-top:1px solid var(--line);}
  #mnav .link{display:block; padding:11px 4px; font-size:15px; border-bottom:1px solid var(--line);}
  .hero-grid{grid-template-columns:1fr; gap:30px; padding:48px 0 60px;}
  .hero-figure{aspect-ratio:4/3.4; max-height:380px; order:-1;}
  .fv-grid{grid-template-columns:1fr; gap:26px; padding:30px 0 44px;}
  .fv-logo-block{padding-top:24px;}
  .feat-grid{grid-template-columns:1fr;}
  .evlist-grid{grid-template-columns:1fr; gap:24px;}
  .evlist-grid>.card{padding-left:12px !important; padding-right:12px !important;}
  .about-grid{grid-template-columns:1fr; gap:26px;}
  .ev-item{grid-template-columns:1fr; gap:14px; padding:18px 14px;}
  .ev-thumb{width:60%; max-width:300px; margin:0 auto;}
  .ev-top{flex-direction:row; flex-wrap:wrap; gap:4px 14px;}
  .ev-title{font-size:18px;}
  .up-row{grid-template-columns:72px 1fr; }
  .up-row .btn{display:none;}
  .news-row{grid-template-columns:84px 1fr; }
  .news-row .news-date{display:none;}
  section{padding:58px 0;}
}