:root{
      --bg:#04060e; --bg2:#070b18; --ink:#f5f0e8; --muted:#b9b3a6;
      --gold:#f0b869; --gold-soft:#f5d9a0; --line:rgba(240,184,105,.22);
      --maxw:1120px; --serif:Georgia,"Times New Roman",serif;
      --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .wrap{width:min(100%,var(--maxw));margin:0 auto;padding:0 24px}
    .eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.02em;transition:transform .15s ease,box-shadow .15s ease;min-height:48px}
    .btn-primary{background:linear-gradient(120deg,#f0b869,#e8923a);color:#1a0e02;box-shadow:0 10px 30px rgba(232,146,58,.35)}
    .btn-primary:hover{transform:translateY(-2px)}
    .btn-ghost{border:1px solid var(--line);color:var(--ink)}
    .btn-ghost:hover{border-color:var(--gold);background:rgba(240,184,105,.08)}

    /* Header */
    header{position:sticky;top:0;z-index:30;background:rgba(4,6,14,.78);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
    .brand{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:var(--gold-soft)}
    .nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
    .nav-links a:hover{color:var(--ink)}
    .nav .btn{padding:10px 18px;min-height:40px;font-size:13px}
    @media(max-width:760px){.nav-links{display:none}}

    /* Hero */
    .hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
    .hero-bg{position:absolute;inset:0;background:url('/assets/hero-portrait.jpg') center 18%/cover no-repeat;filter:saturate(.92) contrast(1.06) brightness(.94) sepia(.12)}
    .hero-bg::after{content:"";position:absolute;inset:0;background:
      radial-gradient(120% 95% at 16% 100%, rgba(240,140,50,.24) 0%, rgba(240,140,50,.05) 38%, transparent 56%),
      radial-gradient(90% 70% at 92% 8%, rgba(8,12,24,.55), transparent 55%),
      linear-gradient(90deg,rgba(4,6,14,.96) 0%,rgba(4,6,14,.82) 38%,rgba(4,6,14,.30) 70%,rgba(4,6,14,.55) 100%),
      linear-gradient(0deg,rgba(4,6,14,.96) 2%,transparent 44%)}
    .hero-inner{position:relative;z-index:2;padding:80px 24px;min-width:0}
    .hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,8.5vw,78px);line-height:1.02;margin:18px 0 10px;letter-spacing:.01em}
    .hero h1 .glow{color:var(--gold-soft);text-shadow:0 0 40px rgba(240,184,105,.35)}
    .tagline{font-size:clamp(18px,2.4vw,24px);color:var(--gold);font-weight:600;margin-bottom:18px}
    .lead{max-width:540px;color:#e7e2d8;font-size:clamp(15px,1.7vw,18px);margin-bottom:30px}
    .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
    .hero-stats{margin-top:22px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);opacity:.85}
    .hero-gift{display:inline-block;margin-top:14px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px}
    .hero-gift:hover{color:var(--gold-soft);border-color:var(--gold)}
    @media(max-width:560px){
      .hero h1{font-size:clamp(30px,8vw,40px);letter-spacing:0;overflow-wrap:break-word}
      .brand{font-size:15px;letter-spacing:.08em}
      .nav{height:58px}
      .nav .btn{padding:9px 13px;font-size:12px}
    }

    section{padding:88px 0}
    .sec-head{max-width:640px;margin-bottom:40px}
    .sec-head h2{font-family:var(--serif);font-size:clamp(28px,4vw,42px);margin:12px 0 8px;line-height:1.1}
    .sec-head p{color:var(--muted)}

    /* Music */
    .tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    @media(max-width:820px){.tracks{grid-template-columns:1fr}}
    .track{background:linear-gradient(180deg,var(--bg2),#05080f);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,transform .2s}
    .track:hover{border-color:var(--line);transform:translateY(-3px)}
    .track .num{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:.2em}
    .track h3{font-family:var(--serif);font-size:23px;line-height:1.1}
    .track .sub{color:var(--muted);font-size:13px;margin-top:-6px}
    .wave{height:36px;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(240,184,105,.7) 0 2px,transparent 2px 6px);clip-path:polygon(0 68%,4% 48%,8% 72%,12% 35%,16% 67%,20% 22%,24% 77%,28% 43%,32% 65%,36% 28%,40% 80%,44% 35%,48% 70%,52% 18%,56% 72%,60% 40%,64% 64%,68% 30%,72% 78%,76% 46%,80% 68%,84% 26%,88% 75%,92% 44%,96% 66%,100% 54%,100% 100%,0 100%)}
    .track-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
    .play{display:inline-flex;align-items:center;gap:9px;background:rgba(240,184,105,.12);border:1px solid var(--line);color:var(--gold-soft);border-radius:999px;padding:9px 16px;font-weight:700;font-size:13px;letter-spacing:.12em;cursor:pointer;min-height:42px}
    .play:hover{background:rgba(240,184,105,.2)}
    .play .ico{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
    .track.is-playing .play .ico{border:0;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
    .track .time{color:var(--muted);font-size:12px}

    /* Discography */
    .disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
    .disc-card{background:linear-gradient(180deg,var(--bg2),#05080f);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px;transition:border-color .2s,transform .2s}
    .disc-card:hover{border-color:var(--line);transform:translateY(-3px)}
    .disc-card img{width:100%;height:auto;border-radius:10px;margin-bottom:10px}
    .disc-card h3{font-family:var(--serif);font-size:16px;line-height:1.25}
    .disc-meta{color:var(--muted);font-size:12px;margin:4px 0 6px}
    .disc-links{font-size:12px;color:var(--muted)}
    .disc-links a{color:var(--gold-soft)}
    .disc-links a:hover{text-decoration:underline}
    @media(max-width:560px){.disc-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

    /* About */
    .about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    @media(max-width:820px){.about{grid-template-columns:1fr;gap:28px}}
    .about-img{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.5)}
    .about-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
    .about p{color:#e0dccf;margin-bottom:14px}
    .pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    .pill{border:1px solid var(--line);color:var(--gold-soft);border-radius:999px;padding:7px 14px;font-size:13px}

    /* Belief / Creed */
    .belief{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 50% 0%,rgba(240,140,50,.07),transparent 60%)}
    .creed{max-width:760px;margin:0 auto;text-align:center}
    .creed h2{font-family:var(--serif);font-size:clamp(28px,4vw,42px);margin:12px 0 26px;line-height:1.1}
    .creed p{color:#e7e2d8;font-size:clamp(16px,1.9vw,20px);margin-bottom:18px;line-height:1.75}
    .creed .close{color:var(--gold-soft)}

    /* Latest EP */
    .ep{padding-top:64px;padding-bottom:64px}
    .ep-card{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;background:linear-gradient(135deg,rgba(240,140,50,.10),rgba(7,11,24,.6));border:1px solid var(--line);border-radius:22px;padding:40px}
    @media(max-width:820px){.ep-card{grid-template-columns:1fr;gap:24px;padding:26px}}
    .ep-info h2{font-family:var(--serif);font-size:clamp(34px,5vw,56px);line-height:1;margin:10px 0 12px;color:var(--gold-soft);text-shadow:0 0 36px rgba(240,184,105,.3)}
    .ep-sub{color:#e7e2d8;font-size:clamp(15px,1.7vw,18px);margin-bottom:22px;max-width:420px}
    .ep-cta{display:flex;gap:12px;flex-wrap:wrap}
    .ep-player iframe{width:100%;border:0;border-radius:12px;display:block}

    /* Newsletter */
    .news{background:radial-gradient(circle at 50% 0%,rgba(240,184,105,.10),transparent 60%),var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:56px 32px;text-align:center}
    .news h2{font-family:var(--serif);font-size:clamp(26px,4vw,38px);margin-bottom:12px}
    .news p{color:var(--muted);max-width:480px;margin:0 auto 26px}
    .news-embed{max-width:480px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
    .news-embed iframe{width:100%;height:320px;border:0;display:block}
    .news-note{font-size:13px;color:#6f6a5f;margin-top:14px}
    .news-note a{color:var(--gold-soft);text-decoration:underline}

    footer{border-top:1px solid rgba(255,255,255,.06);padding:46px 0 60px}
    .foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
    .socials{display:flex;gap:12px}
    .socials a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.04em}
    .socials a:hover{border-color:var(--gold);color:var(--gold-soft)}
    .socials svg{width:20px;height:20px;fill:currentColor;display:block}
    .copy{color:#6f6a5f;font-size:13px}

    /* ===== Multi-page additions (2026-07-04) ===== */
    .nav-links a.active{color:var(--gold-soft)}
    .page-hero{position:relative;overflow:hidden;padding:130px 0 64px;background:
      radial-gradient(90% 120% at 80% 0%,rgba(240,140,50,.10),transparent 60%),
      linear-gradient(180deg,#05070f,var(--bg))}
    /* 女性がうっすら透けて浮かぶ演出(ホームのヒーローと統一・2026-07-04 Tomoya指定) */
    .page-hero::before{content:"";position:absolute;inset:0;
      background:url('/assets/hero-portrait.jpg') right 22%/cover no-repeat;
      opacity:.26;filter:saturate(.85) brightness(.95);
      -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.55) 42%,#000 78%);
      mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.55) 42%,#000 78%)}
    .page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 46%)}
    .page-hero.alt::before{background-image:url('/assets/about-portrait.jpg');background-position:right 30%}
    .page-hero .wrap{position:relative;z-index:2}
    .page-hero h1{font-family:var(--serif);font-size:clamp(32px,5.5vw,54px);line-height:1.05;margin:14px 0 10px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
    .page-hero p{color:var(--muted);max-width:560px}
    @media(max-width:760px){.page-hero::before{opacity:.18;background-position:70% 20%}}

    .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    @media(max-width:820px){.cards3{grid-template-columns:1fr}}
    .ecard{background:linear-gradient(180deg,var(--bg2),#05080f);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:26px}
    .ecard h3{font-family:var(--serif);font-size:20px;line-height:1.3;margin-bottom:10px;color:var(--gold-soft)}
    .ecard p{color:var(--muted);font-size:14px}

    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
    @media(max-width:820px){.steps{grid-template-columns:1fr}}
    .step{position:relative;background:linear-gradient(180deg,var(--bg2),#05080f);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px 24px 24px}
    .stepnum{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:.3em}
    .step h3{font-family:var(--serif);font-size:21px;margin:8px 0 8px}
    .step p{color:var(--muted);font-size:14px;margin-bottom:16px}
    .step .btn{padding:10px 18px;min-height:40px;font-size:13px}

    .numbers{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;text-align:center}
    .num-item{flex:1 1 200px;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:22px 12px;background:linear-gradient(180deg,var(--bg2),#05080f)}
    .num-item strong{display:block;font-family:var(--serif);font-size:clamp(24px,3vw,34px);color:var(--gold-soft);margin-bottom:4px}
    .num-item span{color:var(--muted);font-size:13px}

    .cta-strip{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 50% 0%,rgba(240,140,50,.08),transparent 60%);text-align:center;padding:64px 0}
    .cta-strip h2{font-family:var(--serif);font-size:clamp(24px,3.6vw,36px);margin-bottom:10px}
    .cta-strip p{color:var(--muted);max-width:520px;margin:0 auto 24px}

    .faq{max-width:760px;margin:0 auto}
    .faq details{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 22px;margin-bottom:12px;background:linear-gradient(180deg,var(--bg2),#05080f)}
    .faq summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
    .faq summary::after{content:"+";color:var(--gold);font-size:20px;flex-shrink:0}
    .faq details[open] summary::after{content:"–"}
    .faq details p{color:var(--muted);margin-top:12px;font-size:15px}
    .faq details a{color:var(--gold-soft);text-decoration:underline}

    .gift-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}
    @media(max-width:820px){.gift-list{grid-template-columns:1fr}}
    .gift-item{border:1px solid var(--line);border-radius:16px;padding:26px;background:linear-gradient(180deg,rgba(240,140,50,.06),#05080f);text-align:center}
    .gift-item .big{font-size:34px;display:block;margin-bottom:10px}
    .gift-item h3{font-family:var(--serif);font-size:19px;margin-bottom:8px;color:var(--gold-soft)}
    .gift-item p{color:var(--muted);font-size:14px}

    .foot-nav{display:flex;gap:20px;font-size:13px;color:var(--muted);flex-wrap:wrap}
    .foot-nav a:hover{color:var(--ink)}

    .playlist-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    @media(max-width:820px){.playlist-row{grid-template-columns:1fr}}
    .pl-card{border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;background:linear-gradient(180deg,var(--bg2),#05080f)}
    .pl-card h3{font-family:var(--serif);font-size:18px;margin-bottom:6px;color:var(--gold-soft)}
    .pl-card p{color:var(--muted);font-size:13px;margin-bottom:14px}


    /* ===== ホーム強化(2026-07-04): 透明ポートレート+音楽サイト明示 ===== */
    .ghost-bg{position:relative;overflow:hidden}
    .ghost-bg::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:url('/assets/about-portrait.jpg') right 24%/cover no-repeat;
      opacity:.12;filter:saturate(.8);
      -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.6) 60%,#000 92%);
      mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.6) 60%,#000 92%)}
    /* button要素で使うときのUAデフォルト打ち消し */
    button.btn{background:transparent;cursor:pointer;font-family:inherit;font-size:15px;color:var(--ink)}
    .ghost-bg>.wrap{position:relative;z-index:2}
    .cta-strip.ghost-bg::before{background:url('/assets/hero-portrait.jpg') right 20%/cover no-repeat;opacity:.15}
    @media(max-width:760px){.ghost-bg::before{opacity:.08}}

    /* イコライザー(再生中だけ動く) */
    .eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px;width:22px}
    .eq span{flex:1;background:currentColor;height:4px;border-radius:1px}
    .quick.playing .eq span{animation:eqb 1s ease-in-out infinite}
    .quick.playing .eq span:nth-child(2){animation-delay:.25s}
    .quick.playing .eq span:nth-child(3){animation-delay:.5s}
    .quick.playing .eq span:nth-child(4){animation-delay:.12s}
    @keyframes eqb{0%,100%{height:4px}50%{height:16px}}


    /* ===== 音楽サイト・ベンチマーク反映(2026-07-04) ===== */
    .announce{background:linear-gradient(90deg,rgba(240,140,50,.16),rgba(240,184,105,.08));border-bottom:1px solid rgba(240,184,105,.18);text-align:center;padding:9px 14px;font-size:13.5px;color:var(--gold-soft)}
    .announce a{color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
    .announce a:hover{color:var(--gold-soft)}
    .watch-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.5);background:#000}
    .watch-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .nav-socials{display:flex;gap:10px;align-items:center;margin-right:14px}
    .nav .nav-links{margin:0 auto}
    .nav-socials a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--muted)}
    .nav-socials a:hover{border-color:var(--gold);color:var(--gold-soft)}
    .nav-socials svg{width:16px;height:16px;fill:currentColor}
    @media(max-width:560px){.nav-socials{display:none}}
    .ecard .pl-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--gold-soft);border-bottom:1px solid var(--line)}
    .ecard .pl-link:hover{color:var(--ink)}