/* 骨組み（4案で共通）。色や書体は a.css 〜 d.css 側で指定します。 */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;font-feature-settings:"palt";word-break:auto-phrase;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;padding-bottom:96px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;backdrop-filter:blur(14px)}
.hd .logo{font-weight:900;letter-spacing:-.02em;font-size:17px}
.hd nav{display:flex;gap:22px;align-items:center;font-size:13px;font-weight:700}
.hd nav .navSep{width:1px;height:13px;background:currentColor;opacity:.25;flex:none}
/* まだ出していない製品 */
.hd nav .soon{display:flex;align-items:baseline;gap:5px;cursor:default;opacity:.55}
.hd nav .soon em{font-style:normal;font-size:10px;letter-spacing:.06em}
.sideNav .soonRow{display:block;padding:11px 12px;font-size:11px;letter-spacing:.04em;opacity:.45;cursor:default}
.sideNav .soonRow span{display:block;font-size:13px;letter-spacing:-.01em;margin-top:3px}
.sideNav .soonRow em{font-style:normal;font-size:10px;letter-spacing:.06em;display:block;margin-top:4px}
/* 狭い画面では、上のナビは「無料ダウンロード」だけ残す（他は左の列にある） */
@media(max-width:720px){.hd nav a:not(.cta),.hd nav .soon,.hd nav .navSep{display:none}}

/* ヒーロー */
.hero{padding-top:76px;padding-bottom:56px}
.hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:clamp(36px,6.4vw,74px);font-weight:900;letter-spacing:-.04em;line-height:1.06}
.hero p.lead{margin-top:22px;max-width:40em;line-height:1.9;font-size:15px}
.hero .btns{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 30px;font-weight:700;font-size:14px}
.stats{margin-top:48px;display:flex;gap:40px;flex-wrap:wrap}
.stats div b{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1}
.stats div span{font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* セクション見出し */
.sec{padding-top:64px;padding-bottom:64px}
.sec h2{font-size:clamp(24px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.sec .note{margin-top:14px;font-size:14px;line-height:1.85;max-width:46em}

/* ジャンルカード */
#cards{margin-top:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:980px){#cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){#cards{grid-template-columns:repeat(2,1fr)}}
.gcard{text-align:left;padding:20px 18px;min-height:132px;display:flex;flex-direction:column;gap:4px;
  transition:transform .25s,background .25s,border-color .25s}
.gcard:hover{transform:translateY(-3px)}
.g-en{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.g-ja{font-size:16px;font-weight:900;letter-spacing:-.01em}
.g-desc{font-size:11px;line-height:1.6;opacity:.7;flex:1}
.g-n{font-size:10px;font-weight:700;letter-spacing:.1em;opacity:.55}

/* アルバム */
#albums{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){#albums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#albums{grid-template-columns:1fr}}
.acard{text-align:left;display:flex;flex-direction:column;gap:14px;transition:transform .25s}
.acard:hover{transform:translateY(-3px)}
.a-art{width:100%;aspect-ratio:1/1;overflow:hidden;background:rgba(128,128,128,.14)}
.a-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.acard:hover .a-art img{transform:scale(1.04)}
.a-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.a-ja{font-size:12.5px;opacity:.65;margin-top:3px}
.a-n{font-size:11px;letter-spacing:.08em;opacity:.55;margin-top:8px}

/* 並び順 */
#sort{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:18px 0 10px}
.sortLabel{font-size:11px;letter-spacing:.1em;opacity:.5;margin-right:6px}
.sortBtn{font-size:12.5px;padding:6px 11px;transition:.15s;white-space:nowrap}

/* 新しい曲の目印 */
.new{font-size:9px;font-weight:700;letter-spacing:.1em;padding:2px 6px;margin-left:8px;
  vertical-align:middle;display:inline-block}

/* いま何で絞り込んでいるか */
.nowBar{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-height:22px}
#nowFilter{font-size:13px;font-weight:700}
#nowFilter[hidden]{display:none}
#clearFilter{font-size:12px;opacity:.6;text-decoration:underline;text-underline-offset:3px}
#clearFilter:hover{opacity:1}
#clearFilter[hidden]{display:none}

/* 2カラム（左：しぼりこみ ／ 右：曲） */
.cols{display:grid;grid-template-columns:252px 1fr;gap:52px;align-items:start;
  max-width:1760px;margin:0 auto;padding:64px 32px}
@media(max-width:1100px){.cols{padding:56px 24px;gap:36px;grid-template-columns:230px 1fr}}
#side{position:sticky;top:72px;max-height:calc(100vh - 92px);overflow-y:auto;
  scrollbar-width:thin;padding-bottom:20px}
#side::-webkit-scrollbar{width:4px}
#side::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:4px}
@media(max-width:900px){
  .cols{grid-template-columns:1fr;gap:0}
  #side{position:static;max-height:none;overflow:visible;margin-bottom:34px}
}

/* 左の小見出し */
.sideCap{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:12px}

/* 製品の並び */
.sideNav{display:flex;flex-direction:column;margin-bottom:34px}
.sideNav a{display:block;padding:11px 12px;font-size:11px;letter-spacing:.04em;
  text-decoration:none;transition:.18s;opacity:.75}
.sideNav a span{display:block;font-size:13px;letter-spacing:-.01em;margin-top:3px}
.sideNav a:hover{opacity:1}
.sideNav a.on{opacity:1}

/* しぼりこみの各ブロック */
.fGroup{margin-bottom:2px}
.fHead{width:100%;display:flex;align-items:center;gap:8px;padding:11px 12px;
  font-size:13px;font-weight:700;text-align:left;transition:.18s}
.fHead span{flex:1}
.fHead i{font-style:normal;font-size:10px;min-width:16px;height:16px;display:grid;
  place-items:center;border-radius:16px;padding:0 5px}
.fHead em{width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s;flex:none;opacity:.6}
.fGroup.open .fHead em{transform:rotate(225deg) translate(-2px,-2px)}
.fBody{display:none;flex-wrap:wrap;gap:6px;padding:4px 12px 16px}
.fGroup.open .fBody{display:flex}
.chip{padding:7px 13px;font-size:12px;font-weight:400;white-space:nowrap;transition:.2s}

/* 曲リスト */
#list{display:flex;flex-direction:column}
.trk{display:grid;align-items:center;gap:12px;padding:12px 10px;
  grid-template-columns:44px 38px minmax(150px,1.1fr) minmax(220px,1.25fr) 62px minmax(150px,1.5fr) 88px 32px}
@media(max-width:1240px){.trk .wave{display:none}
  .trk{grid-template-columns:44px 38px minmax(128px,1fr) minmax(220px,2fr) 60px 88px 32px}}
@media(max-width:900px){
  .trk{grid-template-columns:40px 38px 1fr 56px 34px;gap:10px}
  .trk .t-tags,.trk .t-bpm,.trk .wave{display:none}
}
/* 曲のジャケット */
.art{width:44px;height:44px;overflow:hidden;flex:none;background:rgba(128,128,128,.14)}
.art img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.art{width:40px;height:40px}}
.play{width:36px;height:36px;display:grid;place-items:center;flex:none;transition:.2s}
/* アイコンはすべて SVG。大きさはここで揃える */
.i{display:block;width:100%;height:100%}
.ico-play,.ico-pause{display:block;width:15px;height:15px}
.ico-pause{display:none}
.trk.playing .ico-play{display:none}
.trk.playing .ico-pause{display:block}
.t-title{font-weight:700;font-size:14.5px;line-height:1.35}
.t-sub{font-size:11.5px;opacity:.6;margin-top:2px}
.t-tags{display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  max-height:22px;overflow:hidden}
.tag{font-size:10.5px;padding:3px 9px;white-space:nowrap;cursor:pointer;transition:.15s}
.tag-inst{padding:3px 2px}
.t-bpm{font-size:11px;opacity:.6;letter-spacing:.04em}
.wave{width:100%;height:36px;display:block;cursor:pointer}
#barWave{cursor:pointer}
.t-time{font-size:12px;opacity:.6;text-align:right;font-variant-numeric:tabular-nums}
.dl{width:34px;height:34px;display:grid;place-items:center;transition:.2s}
/* MP3 / WAV を選ぶ */
.dlWrap{position:relative}
.dlMenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:128px;
  display:flex;flex-direction:column;overflow:hidden}
.dlMenu[hidden]{display:none}
.dlMenu a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 14px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.15s}
.dlMenu a span{font-size:10px;font-weight:400;opacity:.6}
.dl .i{width:17px;height:17px}

/* 歌詞 */
.t-time{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.lyrBtn{font-size:11px;padding:4px 10px;white-space:nowrap;flex:none;transition:.15s}
.lyrics{padding:6px 10px 26px 98px}
.lyrics[hidden]{display:none}
.lyrHead{font-size:12px;font-weight:700;margin-bottom:12px;letter-spacing:.04em}
.lyrHead span{font-weight:400;opacity:.6;margin-left:10px}
.lyrics pre{font-family:inherit;font-size:13px;line-height:2;white-space:pre-wrap;margin:0;max-width:46em}
@media(max-width:900px){.lyrics{padding-left:18px}}

/* 無料の案内 */
.freeBox{margin-top:34px;padding:34px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:560px}
.freeTag{font-size:11px;font-weight:700;letter-spacing:.2em;padding:5px 12px}
.freeBox ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14px;line-height:1.6}
.freeBox li{padding-left:20px;position:relative}
.freeBox li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px}
.freeBox .btn{margin-top:6px}

/* 料金（いまは使っていない） */
.plans{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{padding:30px 26px;display:flex;flex-direction:column;gap:12px}
.plan .pn{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.plan .pp{font-size:38px;font-weight:900;letter-spacing:-.03em;line-height:1}
.plan .pp small{font-size:13px;font-weight:700;letter-spacing:0}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.6;flex:1;margin-top:6px}
.plan li{padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px}

/* よくある質問 */
.faq{margin-top:30px;display:flex;flex-direction:column}
.faq details{padding:18px 4px}
.faq summary{font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:900;flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:12px;font-size:13.5px;line-height:1.9;opacity:.8}

/* フッター */
footer{padding-top:46px;padding-bottom:60px;font-size:12px}
footer .fin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* 下の再生バー */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;align-items:center;gap:12px;
  padding:12px 24px;backdrop-filter:blur(18px);
  grid-template-columns:44px 26px 38px 26px minmax(130px,1fr) 1fr 94px 34px}
@media(max-width:820px){
  #bar{grid-template-columns:40px 38px 1fr 34px;gap:10px}
  #bar #barWave,#bar #barTime,#bar #barPrev,#bar #barNext{display:none}
}
#barArt{width:44px;height:44px;overflow:hidden;background:rgba(128,128,128,.14)}
#barArt img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){#barArt{width:40px;height:40px}}
#barPrev,#barNext{width:26px;height:30px;display:grid;place-items:center;opacity:.7}
#barPrev .i,#barNext .i{width:18px;height:18px}
#barPrev:hover,#barNext:hover{opacity:1}
#bar[hidden]{display:none}
#barPlay{width:38px;height:38px;display:grid;place-items:center}
#barPlay .ico-play,#barPlay .ico-pause{width:16px;height:16px}
#barPlay .ico-pause{display:none}
#barPlay.on .ico-play{display:none}
#barPlay.on .ico-pause{display:block}
#barDl .i{width:17px;height:17px}
#barInfo{text-align:left;min-width:0;cursor:pointer;padding:0}
#barInfo:hover #barTitle{text-decoration:underline;text-underline-offset:3px}
#barTitle{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 飛んだ先の行を一瞬光らせる */
@keyframes flashRow{0%{opacity:.35}100%{opacity:1}}
.trk.flash{animation:flashRow .7s ease 2}
#barSub{font-size:11px;opacity:.6;margin-top:2px}
#barWave{width:100%;height:34px}
#barTime{font-size:11.5px;opacity:.7;text-align:right;font-variant-numeric:tabular-nums}
#barRight{display:flex;gap:8px;align-items:center}
#barClose{width:30px;height:30px;display:grid;place-items:center;opacity:.6}
#barClose .i{width:15px;height:15px}
#barClose:hover{opacity:1}

/* サンプル表示の帯 */
.demo{padding:10px 24px;font-size:12px;font-weight:700;text-align:center;letter-spacing:.02em}
.demo a{text-decoration:underline}