@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');

.music_x_sweets {
  font-family: 'Curlz', sans-serif !important;
  font-weight: 500;
}
.music_x_sweets > span {
    font-size: 0.5em;
    letter-spacing: 0.03em;
}

.bold{
  font-weight:500;
}

.Kalam {
  font-family: "Kalam", cursive;
  font-weight: 300;
}

#subscriptions i:before{
  font-size: 24px;
}

.about{
  display:flex;
}

a.btn.disco, a.btn.disco:visited{
  color:var(--secondary);;
}

.header__inner  a.btn:hover,
#music a:hover{
  color: var(--primary);
}

.album-card{
  text-decoration:none;
}

.card__body a.card-link:hover{
  text-decoration:none;
}
.card__body a.card-link i{
  color: var(--dark);
  font-size:20px;
}


body {
  /*font-family: 'Noto Sans JP', sans-serif; */
  font-family: "Zen Kaku Gothic New", sans-serif;
  overflow-x: hidden;
}

/* Shared styles for Music & Sweets (plain CSS, no Tailwind) */
:root{
  --primary:#54C2F0;
  --secondary:#8A2BE2;
  --dark:#2A0044;
  --text:#111827;
  --muted:#6b7280;
  --white:#ffffff;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 10px 25px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.hidden{display:none !important}
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.mt-0{margin-top:0}
.mt-8{margin-top:32px}
.mt-12{margin-top:48px}
.mb-12{margin-bottom:48px}
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.grid-3{grid-template-columns:1fr}}

@media (max-width: 720px){
.about {
display: block;}
}

@media (min-width: 721px){
#mas-introduction p{
margin:0 20px;}
}

#song-title{
color:#FFF;
font-size:1.8rem;
}
#song-lead{
color:#FFF;
}

.song-detail{
display:flex;
margin-top:20px;
}

.song-detail2{
padding-bottom:20px;}

@media (max-width: 841px){
.song-detail2{
margin-left:0;
padding-bottom:0;}
}

@media (max-width: 840px){
.song-detail{
display:block;}

.inline-style-17 {
width: 480px !important;}

.inline-style-17{width:100%; }

}

h1.song-detail-title{
  font-size:clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
}

.title-song-name{
  font-family: "sicprintemps", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: 0.08em;
}

.subtitle-lyric{
  display:block;
  font-size:clamp(2.25rem, 1.614rem + 3.18vw, 4rem);
  margin-bottom:1em;
  margin:0 0 1em 0;
  text-align:center;
}

.section-lyric{
  font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  margin:0 auto;
  max-width:480px;
  padding:0;
}

.tag{
  background:var(--dark);
  border-radius:4px;
  color:#FFF !important;
  display:block;
  font-size:12px;
  position:absolute;
  top:26px;
  right:16px;
  padding:4px 12px;
  text-align:center;
}

.btn{
  display:inline-block; border:0; cursor:pointer;
  padding:12px 20px; border-radius:var(--radius-sm); font-weight:600;
  transition:transform .2s ease,opacity .2s ease, background-color .2s ease, color .2s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:#fff}
.btn-secondary{background:var(--secondary); color:#fff}
.btn-light{background:#fff; }
.btn-outline{background:transparent; color:#fff; border:2px solid #fff}
.btn-dark{background:#000; color:#fff}
.btn-chip{border-radius:9999px; padding:5px 10px; font-size:12px;font-weight:normal;margin-top:6px;color: rgba(42, 0, 68, .8);}
.btn[disabled], .btn.disabled{opacity:.6; pointer-events:none}

/* Header */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; transition:background .2s ease, box-shadow .2s ease;
}
.header--solid{background:rgba(42,0,68,.8); box-shadow:0 2px 8px rgba(0,0,0,.2)}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:16px 16px}
.brand{ font-size: clamp(1.875rem, 1.466rem + 2.05vw, 3rem); color:#fff; text-decoration:none}

/* Hamburger & overlay menu */
.icon-btn{width:40px;height:40px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; color:#fff; cursor:pointer}
.menu{position: fixed; top: 0; right: 0; bottom: 0; left: auto; width:min(360px,100%); background:#000; color:#fff; transform:translateX(100%); transition:transform .3s ease; z-index:60}
.menu.is-active{transform:translateX(0)}
.menu__close{position:absolute; top:16px; right:16px; color:#fff; background:transparent; border:0; width:40px; height:40px; cursor:pointer}
.menu__nav{padding:80px 48px}
.menu__nav a{display:block; color:#fff; font-size:28px; text-decoration:none; padding:12px 0; opacity:.9}
.menu__nav a:hover{color:var(--primary)}
.menu__social{position:absolute; left:0; right:0; bottom:32px; display:flex; gap:16px; justify-content:center}
.menu__social a{width:40px;height:40px; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; opacity:.9}
.menu__social a:hover{color:var(--primary)}

/* Hero */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; background:#000}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('https://static.readdy.ai/image/bd7a6e843cf29cc64ef414f2b3139f8e/f41258280679af8af003459038cc66b6.jpeg') center/cover no-repeat;
  filter:brightness(.65);
}
.hero__content{position:relative; z-index:1; padding:0 24px}
.hero h1{font-size: clamp(3.75rem, 1.841rem + 9.55vw, 9rem); margin:0 0 16px;line-height:1.2;}
.hero p{font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem); margin:0 0 32px}
.scroll-down{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); animation:bounce 2s infinite; z-index:1}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translate(-50%,0)}40%{transform:translate(-50%,-16px)}60%{transform:translate(-50%,-8px)}}

/* Sections */
.section{padding:80px 0}
.section--purple{background:var(--secondary)}
.section--dark{background:var(--dark); color:#fff}
.section h2{font-size:clamp(2rem, 1.455rem + 2.73vw, 3.5rem); margin:0 0 1.5em; text-align:center}
.section p.lead{text-align:center; opacity:.9; max-width:720px; margin:0 auto 24px}

/* Cards & media */
.card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.08)}
.card img{display:block; width:100%; max-width:100%; object-position:center top;}
.card__body{padding:30px 20px 20px 20px}
.card__title{font-size:20px; font-weight:700; margin:0 0 8px}
.meta{font-size:0.875rem; color: #767676 !important;}
.badge{display:inline-block; padding:6px 10px; border-radius:9999px; font-size:12px; font-weight:700}
.badge--primary{background:var(--primary); color:#fff}

/* Video embeds */
.ratio{position:relative; width:100%; padding-bottom:56.25%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.ratio > iframe, .ratio > .ratio__fill{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Live rows */
.row{display:flex; gap:16px; justify-content:space-between; align-items:flex-start; background:rgba(255,255,255,.05); border-radius:var(--radius); padding:16px; margin-bottom:16px}
.row__actions{display:flex; gap:8px; align-items:center}
@media (max-width: 760px){
  .row{flex-direction:column; align-items:stretch}
  .row__actions{justify-content:flex-start}
}

/* About */
.about img{width:100%; height:400px; object-fit:cover; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.2)}

/* Forms */
.form{background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.label{display:block; font-weight:600; margin-bottom:6px}
.input, .textarea{
  width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:8px; outline:none;
}
.input:focus,.textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(84,194,240,.25)}
.error{color:#ef4444; font-size:13px; margin-top:6px; display:none}

/* Footer */
.footer{padding:48px 0; background:var(--dark); color:#fff}
.footer__top{display:flex; gap:24px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:24px}
.footer .brand{color:#fff;font-size: 1.3rem;}
.footer a{color:#fff; opacity:.85; text-decoration:none}
.footer a:hover{opacity:1}
.footer__social{display:flex; gap:16px}

/* Gradient banner (detail & list) */
.gradient{background:linear-gradient(135deg,var(--secondary) 0%, var(--primary) 100%); color:#fff}
.banner{padding:120px 0 48px}

/* Tabs */
.tabs{display:flex; border-bottom:1px solid #e5e7eb}
.tab{padding:12px 16px; border:0; background:transparent; font-weight:700; cursor:pointer}
.tab.is-active{background:var(--primary); color:#fff; border-radius:8px 8px 0 0}
.tabpanels{padding:20px}
.prose p{margin:0 0 12px}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:80}
.modal.is-active{opacity:1; visibility:visible}
.modal__dialog{background:#fff; border-radius:12px; max-height:80vh; overflow:auto; width:min(800px,100%)}
.modal__header{display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid #e5e7eb}
.modal__body{padding:16px}

/* Discography cards (list.html) */
/*.mini-player{cursor:pointer}*/
.play-overlay{
  position:absolute; inset:auto; width:60px; height:60px; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); color:#fff; opacity:0; transition:opacity .2s ease;
}

/*
.mini-player:hover .play-overlay{opacity:1}
*/
.mini-player{border-radius: 8px 8px 0 0; }


/* Hero CTA button coloring */
.hero .btn-outline{border:2px solid #fff;color:#fff;background:transparent}
.hero .btn-outline:hover{background:rgba(255,255,255,.12)}

/* Equal-height cards in grids */
.grid .card{display:flex;flex-direction:column;height:100%}
.grid .card .card__body{flex:1}

.card__body p{margin:0 0 12px}


/* --- Cards: look & spacing to match reference --- */
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* primary link inside cards */
.card__body a{color:var(--primary);text-decoration:none;font-weight:700}
.card__body a:hover{text-decoration:underline}


/* ensure tabs don't inherit default bottom border */
.tabs{border-bottom:0}

/* --- Hero CTA button must be white outline --- */
.hero .btn-outline{border:2px solid #fff;color:#fff;background:transparent}
.hero .btn-outline:hover{background:rgba(255,255,255,.12)}

/* Gradient CTA identical to Tailwind from-primary to-secondary */
.btn-gradient{
  background-image: linear-gradient(to right, var(--primary), var(--secondary));
  color:#fff; border:0;
}
.btn-gradient:hover{opacity:.9}
.rounded-button{border-radius:8px}

.form .label{color:#374151; font-weight:600; margin-bottom:8px; display:block}

/* card text colors */
.card__title{color:#111827; font-size: 1.25rem; line-height: 2rem;}
.card__body p{color:#374151}

/* --- Discography filter pill: border + glow under active tab --- */
.filter-pill::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 56px;
  background: radial-gradient(ellipse at left, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
  border-radius:9999px;
}

/* --- Platform icon chips (white round, centered) --- */
.icon-chip{
  width:52px; height:52px;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#000;
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.icon-chip:hover{opacity:.9}

/* ===== Pixel tuning ===== */

/* New Release: white round icon chips with brand purple icons */
.icon-chip{
  width:42px; height:42px;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
  color: var(--secondary);       /* purple icons */
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}


/* New Release: center group spacing */
.icon-chip + .icon-chip{ margin-left:20px; }

/* Discography button (white bg, purple text) */
.btn-white-purple{
  background:#fff;
  color: var(--secondary);
  border-radius:12px;
  font-weight:700;
  padding:12px 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.btn-white-purple:hover{ opacity:.95 }

/* Discography filter pill */
.filter-pill{
  position:relative;
  background-color: #401A57;
  padding: 8px;
  border-radius: 9999px;
  display: inline-flex;
  opacity:0.9;
  gap: 16px;
}
.filter-pill .tab{
  color:#fff; opacity:.95;
  padding: 10px 18px;
  border-radius: 9999px;
  background: transparent;
  border:0;
  font-weight:700;
}
.filter-pill .tab.is-active{
  background:#59C8F3; /* 水色 */
  color:#fff; opacity:1;
}

.subpage-title{
  font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  margin-top:40px;
  font-weight:normal;
}


.inline-style-1{color:#fff}
.inline-style-2{max-width:900px;margin: 0 auto;}
.inline-style-3{margin-top:0}
.inline-style-4{margin-top:24px; color:#fff}
.inline-style-5{font-size:28px}
.inline-style-6{display:flex; gap:16px; justify-content:center; margin-top:8px}
.inline-style-7{background:#000; color:#fff}
.inline-style-8{opacity:.85}
.inline-style-9{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.inline-style-10{flex:1 1 420px}
.inline-style-11{border-top:1px solid rgba(255,255,255,.2); padding-top:16px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.inline-style-12{opacity:.7;font-size:0.9em;}
.inline-style-13{justify-content:center; position:relative}
.inline-style-14{position:absolute; left:0}
.inline-style-15{position:absolute; right:0}
.inline-style-16{display:flex; gap:32px; align-items:center; flex-wrap:wrap}
.inline-style-17{width:320px; }
.inline-style-18{width:100%; object-fit:cover; object-position:top;border-radius: 6px;}
.inline-style-19{color:#fff; flex:1 1 420px; text-align:left;padding-left:6px;}
.inline-style-20{font-size:44px; margin:0 0 8px}
.inline-style-21{font-size:20px}
.inline-style-22{display:flex; gap:12px; flex-wrap:wrap}
.inline-style-23{background:#f9fafb}
.inline-style-24{padding:20px}
.inline-style-25{margin:16px 0}
.inline-style-26{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.inline-style-27{grid-template-columns:1fr 1fr}
.inline-style-28{max-height:calc(80vh - 120px); overflow:auto}
.inline-style-29{white-space:pre-wrap}
.inline-style-30{margin:0 0 12px; font-size:44px}
.inline-style-31{background:var(--dark)}
.inline-style-32{background:var(--dark); padding-top:24px}
.inline-style-33{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.inline-style-34{display:flex; gap:12px}
.inline-style-35{background:#000; width:min(1100px,100%); aspect-ratio:16/9; padding:0; overflow:hidden}
.inline-style-36{position:absolute; right:16px; top:16px; z-index:2}
.inline-style-37{position:absolute; inset:0}
.inline-style-38{position:absolute; inset:0; width:100%; height:100%; border:0}