/* =========================================
   株式会社HANABI 公式サイト ver0.2
   "Color the moment." — Editorial × Mono × Rainbow
   ========================================= */

:root{
  --black:#0A0A0A;
  --ink:#141414;
  --white:#FFFFFF;
  --paper:#F8F7F4;
  --paper-2:#EFEDE7;
  --mute:#7E7B78;
  --mute-2:#A8A39E;
  --rule:#E5E3DE;
  --rule-dark:#1F1F1F;
  --accent:#9A8E94;
  --rainbow:linear-gradient(90deg,#FF6B6B 0%,#FFA951 18%,#FFD93D 36%,#6BCB77 54%,#4D96FF 72%,#C46BE0 90%,#FF6B6B 100%);
  --serif:"Playfair Display","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Cormorant Garamond","Hiragino Mincho ProN","Yu Mincho",serif;
  --jp-serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --maxw:1280px;
  --header-h:72px;
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --shadow-lg:0 24px 64px rgba(0,0,0,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background-color:#0A0A0A}
body{font-family:var(--sans);background:var(--white);color:var(--ink);line-height:1.75;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);overflow:hidden}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.02em;color:var(--ink)}
.logo-img{height:56px;width:auto;display:block;max-width:200px;object-fit:contain}
.logo-text{margin-left:-4px}
.logo-text{display:flex;flex-direction:column;line-height:1.1;justify-content:center}
.logo-text small{font-family:var(--display);font-size:10px;letter-spacing:.3em;color:var(--mute);font-weight:600;margin-top:3px;text-transform:uppercase}
.nav{display:flex;gap:28px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-family:var(--display)}
.nav a{position:relative;padding:6px 2px;color:var(--ink);font-weight:600}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--rainbow);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.menu-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--ink)}
.menu-toggle svg{width:22px;height:22px}

/* ---------- Hero (top page) ---------- */
.hero{min-height:100vh;background:var(--black);color:var(--white);position:relative;overflow:hidden;display:flex;align-items:center;padding:120px 32px 80px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.04) 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,rgba(255,255,255,.03) 0%,transparent 50%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rainbow)}
.hero-grid{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.hero .meta{font-family:var(--display);font-size:14px;letter-spacing:.4em;color:var(--mute-2);font-weight:600;margin-bottom:32px;text-transform:uppercase}
.hero .meta::before{content:"";display:inline-block;width:48px;height:1px;background:var(--rainbow);margin-right:16px;vertical-align:middle}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(56px,8vw,128px);line-height:.95;letter-spacing:-.01em;margin-bottom:36px;color:var(--white)}
.hero h1 .small{display:block;font-family:var(--jp-serif);font-size:.26em;font-weight:400;letter-spacing:.04em;margin-top:18px;color:rgba(255,255,255,.85);line-height:1.55}
.hero h1 .word{display:inline-block;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:700;padding:0 .05em;line-height:.95;vertical-align:baseline;transform:translateY(11px)}
.hero p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:2;max-width:380px;margin-bottom:36px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap}

.hero .right{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.hero .frame{width:100%;aspect-ratio:3/4;position:relative;display:flex;align-items:center;justify-content:center}
.hero .frame::before{content:"";position:absolute;inset:-12%;background:
    radial-gradient(circle at 38% 42%,rgba(255,107,107,.55) 0%,rgba(255,107,107,0) 38%),
    radial-gradient(circle at 62% 38%,rgba(255,217,61,.45) 0%,rgba(255,217,61,0) 36%),
    radial-gradient(circle at 30% 60%,rgba(107,203,119,.40) 0%,rgba(107,203,119,0) 40%),
    radial-gradient(circle at 70% 65%,rgba(77,150,255,.45) 0%,rgba(77,150,255,0) 38%),
    radial-gradient(circle at 50% 50%,rgba(196,107,224,.40) 0%,rgba(196,107,224,0) 50%);
  filter:blur(48px);pointer-events:none;mix-blend-mode:screen}
.hero .frame .cover-logo{position:relative;z-index:2;width:88%;height:auto;filter:drop-shadow(0 20px 48px rgba(0,0,0,.6))}
.hero .ticker{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:space-between;padding:0 32px;font-family:var(--display);font-size:11px;letter-spacing:.3em;color:var(--mute-2);text-transform:uppercase;font-weight:600;z-index:2}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 36px;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;transition:all .25s ease;font-family:var(--sans);border:none}
.btn-rainbow{background:var(--rainbow);color:#fff;background-size:200% 100%}
.btn-rainbow:hover{background-position:100% 0;transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
.btn-line-light{background:transparent;color:var(--white);border:1px solid var(--white)}
.btn-line-light:hover{background:var(--white);color:var(--ink)}
.btn-fill-light{background:var(--white);color:var(--ink)}
.btn-fill-light:hover{transform:translateY(-2px)}

/* ---------- Page Hero (sub pages) ---------- */
.page-hero{background:var(--black);color:var(--white);padding:140px 32px 100px;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rainbow)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rainbow)}
.page-hero .glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(255,107,107,.18) 0%,transparent 55%),radial-gradient(ellipse at 25% 70%,rgba(196,107,224,.16) 0%,transparent 55%),radial-gradient(ellipse at 90% 90%,rgba(77,150,255,.12) 0%,transparent 60%);filter:blur(40px);pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.page-hero .meta{font-family:var(--display);font-size:13px;letter-spacing:.4em;color:var(--mute-2);text-transform:uppercase;font-weight:600;margin-bottom:18px}
.page-hero .meta::before{content:"";display:inline-block;width:36px;height:1px;background:var(--rainbow);margin-right:14px;vertical-align:middle}
.page-hero h1{font-family:var(--serif);font-size:clamp(44px,6vw,84px);font-weight:500;letter-spacing:-.01em;line-height:1.18;margin-bottom:18px;padding-bottom:.05em}
.page-hero h1 em{font-style:italic;font-weight:600;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block;padding:.05em .2em .14em .04em;line-height:1.18;margin-right:-.12em}
.page-hero p{font-family:var(--jp-serif);color:rgba(255,255,255,.78);font-size:15px;letter-spacing:.04em;max-width:640px;margin:0 auto;line-height:1.85}

/* ---------- Section base ---------- */
section{position:relative}
.section{padding:140px 32px}
.section.bg-paper{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section.bg-black{background:var(--black);color:var(--white)}
.section-head{max-width:var(--maxw);margin:0 auto 64px}
.section-head.center{text-align:center}
.section-head .num{font-family:var(--display);font-size:13px;letter-spacing:.4em;color:var(--mute);font-weight:600;margin-bottom:24px;text-transform:uppercase}
.section-head .num::before{content:"";display:inline-block;width:48px;height:1px;background:var(--rainbow);margin-right:16px;vertical-align:middle}
.section-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.18;color:var(--ink);letter-spacing:-.01em;max-width:880px;padding-bottom:.05em}
.section-head h2 em{font-style:italic;font-weight:700;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block;padding:.05em .18em .14em .04em;line-height:1.18;margin-right:-.1em}
.section.bg-black .section-head h2{color:var(--white)}
.section.bg-black .section-head .num{color:var(--mute-2)}
.section-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.section-head.split h2{margin:0}

/* ---------- Concept ---------- */
.concept-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.9fr 1.3fr;gap:96px;align-items:start}
.concept-grid p{font-size:15px;line-height:2.1;color:var(--ink);margin-bottom:18px}
.concept-grid em{font-style:italic;font-weight:600;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block;padding:0 .12em .12em .04em;line-height:1.2;margin-right:-.06em}
.concept-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.concept-pillars .pillar{padding:20px 0;border-top:1px solid var(--ink)}
.concept-pillars .pillar .dot{width:10px;height:10px;border-radius:50%;margin-bottom:14px}
.concept-pillars .pillar h4{font-family:var(--display);font-size:11px;letter-spacing:.3em;font-weight:700;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.concept-pillars .pillar p{font-size:13px;line-height:1.85;color:var(--mute);margin:0}
.concept-pillars .pillar:nth-child(1) .dot{background:#FF6B6B}
.concept-pillars .pillar:nth-child(2) .dot{background:#FFD93D}
.concept-pillars .pillar:nth-child(3) .dot{background:#6BCB77}

/* ---------- Brand list (editorial) ---------- */
.brand-list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--ink)}
.brand-row{display:grid;grid-template-columns:80px 1.2fr 2fr 220px 80px;gap:32px;align-items:center;padding:36px 0;border-bottom:1px solid var(--ink);transition:background .25s ease,padding .25s ease;position:relative;text-decoration:none}
.brand-row::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;background:transparent;transition:background .35s ease}
.brand-row:hover{background:var(--white);padding-left:20px}
.brand-row.b1:hover::before{background:#FF6B6B}
.brand-row.b2:hover::before{background:#FFD93D}
.brand-row.b3:hover::before{background:#6BCB77}
.brand-row.b4:hover::before{background:#C46BE0}
.brand-row .num{font-family:var(--display);font-size:24px;font-weight:600;color:var(--mute);font-style:italic}
.brand-row .name{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1}
.brand-row .name .it{font-style:italic;font-weight:500}
.brand-row .desc{font-size:14px;color:var(--ink);line-height:1.85}
.brand-row .moment{font-family:var(--display);font-size:11px;letter-spacing:.25em;color:var(--mute);text-transform:uppercase;font-weight:600;display:block;margin-top:6px}
.brand-row .place{font-family:var(--display);font-size:14px;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;font-weight:600}
.brand-row .place small{display:block;font-size:11px;color:var(--mute);font-weight:500;margin-top:4px;letter-spacing:.15em}
.brand-row .arrow{justify-self:end;width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:all .35s ease}
.brand-row:hover .arrow{background:var(--ink);color:var(--white)}
.brand-row .arrow svg{width:18px;height:18px}

/* ---------- Brand detail (4 sections on /brand) ---------- */
.brand-detail{padding:120px 32px;display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;max-width:var(--maxw);margin:0 auto}
.brand-detail.reverse{grid-template-columns:1.1fr 1fr}
.brand-detail.reverse .visual{order:2}
.brand-detail .visual{aspect-ratio:4/5;position:relative;display:flex;flex-direction:column;background:var(--paper-2);overflow:hidden}
.brand-detail .visual::before{content:"";position:absolute;inset:-8%;background:radial-gradient(circle at 50% 50%,var(--brand-color,#FF6B6B) 0%,transparent 60%);filter:blur(72px);opacity:.4;pointer-events:none;z-index:0}
.brand-detail .visual .photo-box{flex:1.6;position:relative;z-index:1;overflow:hidden;background:#000}
.brand-detail .visual .photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.brand-detail .visual .logo-box{flex:1;position:relative;z-index:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:20px 32px;border-top:1px solid var(--rule)}
.brand-detail .visual .logo-box img{max-width:62%;max-height:80%;width:auto;height:auto;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.08))}
.brand-detail .label{font-family:var(--display);font-size:13px;letter-spacing:.3em;color:var(--mute);font-weight:700;margin-bottom:18px;text-transform:uppercase}
.brand-detail .label::before{content:"";display:inline-block;width:32px;height:1px;background:var(--brand-color,#FF6B6B);margin-right:12px;vertical-align:middle}
.brand-detail h3{font-family:var(--serif);font-size:clamp(32px,4vw,56px);font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink);margin-bottom:14px}
.brand-detail h3 em{font-style:italic;font-weight:500}
.brand-detail .moment{font-family:var(--display);font-size:14px;letter-spacing:.25em;text-transform:uppercase;color:var(--brand-color,#FF6B6B);font-weight:700;margin-bottom:20px}
.brand-detail p{font-size:15px;line-height:2.05;color:var(--ink);margin-bottom:14px}
.brand-detail .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.brand-detail .tags span{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);padding:6px 14px;border-radius:0;font-weight:600}

/* ---------- Stores ---------- */
.stores-list{max-width:var(--maxw);margin:0 auto;display:grid;gap:32px}
.store-row{background:var(--white);border:1px solid var(--rule);padding:48px;display:grid;grid-template-columns:60px 1.5fr 2fr;gap:40px;align-items:start;position:relative;overflow:hidden;transition:border-color .25s ease}
.store-row:hover{border-color:var(--ink)}
.store-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-color,#FF6B6B)}
.store-row .num{font-family:var(--display);font-size:32px;font-style:italic;font-weight:600;color:var(--mute)}
.store-row h3{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.store-row .label{font-family:var(--display);font-size:12px;letter-spacing:.3em;color:var(--brand-color,#FF6B6B);font-weight:700;text-transform:uppercase;margin-bottom:14px;display:block}
.store-row .moment{font-family:var(--display);font-size:11px;letter-spacing:.25em;color:var(--mute);text-transform:uppercase;font-weight:600;margin-top:10px;display:block}
.store-row dl{display:grid;grid-template-columns:90px 1fr;gap:8px 18px;font-size:13.5px;color:var(--ink);line-height:1.85}
.store-row dt{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700;padding-top:2px}
.store-row dd a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule)}
.store-row dd a:hover{color:var(--brand-color,#FF6B6B);border-bottom-color:var(--brand-color,#FF6B6B)}

/* ---------- Menu ---------- */
.menu-cat{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:500;color:var(--ink);letter-spacing:-.01em;margin:64px 0 24px;padding-bottom:14px;border-bottom:1px solid var(--ink);max-width:var(--maxw);margin-left:auto;margin-right:auto}
.menu-cat:first-of-type{margin-top:0}
.menu-cat .cat-mark{font-family:var(--display);font-style:italic;font-size:.5em;color:var(--mute);font-weight:600;letter-spacing:.2em;margin-right:14px;text-transform:uppercase}
.menu-list{max-width:var(--maxw);margin:0 auto;display:grid;gap:0}
.menu-row{display:grid;grid-template-columns:60px 1fr 220px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule);transition:padding .25s ease}
.menu-row:hover{padding-left:14px}
.menu-row .mnum{font-family:var(--display);font-size:14px;font-style:italic;color:var(--mute);font-weight:600}
.menu-row h4{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-.005em}
.menu-row .meta{font-family:var(--sans);font-size:12.5px;color:var(--mute);letter-spacing:.04em}
.menu-row .price-block{text-align:right}
.menu-row .price{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);font-style:italic;line-height:1}
.menu-row .duration{display:block;font-family:var(--display);font-size:11px;letter-spacing:.25em;color:var(--mute);font-weight:600;margin-top:8px;text-transform:uppercase}

/* ---------- Recruit ---------- */
.recruit-cards{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.recruit-cards .card{background:var(--white);border:1px solid var(--rule);padding:40px 32px;text-align:left;transition:border-color .25s ease,transform .25s ease}
.recruit-cards .card:hover{border-color:var(--ink);transform:translateY(-4px)}
.recruit-cards .num{font-family:var(--display);font-size:14px;font-style:italic;color:var(--mute);font-weight:600;margin-bottom:18px}
.recruit-cards h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.005em;margin-bottom:12px}
.recruit-cards p{color:var(--ink);font-size:14px;line-height:1.95}

.position-list{max-width:var(--maxw);margin:0 auto;display:grid;gap:0}
.position-row{padding:36px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start}
.position-row:first-child{border-top:1px solid var(--ink)}
.position-row h4{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-.005em;display:flex;align-items:center;gap:12px}
.position-row h4 .tag{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;color:#fff;background:var(--ink);padding:4px 12px;text-transform:uppercase}
.position-row .moment{font-family:var(--display);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:6px}
.position-row p{color:var(--ink);font-size:14px;line-height:1.95;margin-bottom:14px}
.position-row dl{display:grid;grid-template-columns:90px 1fr;gap:8px 18px;font-size:13.5px;color:var(--ink);line-height:1.85}
.position-row dt{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700;padding-top:2px}

/* ---------- Company ---------- */
.company-table{max-width:920px;margin:0 auto;border-top:1px solid var(--ink)}
.company-table dl{display:grid;grid-template-columns:220px 1fr}
.company-table dt,.company-table dd{padding:24px 24px;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.85}
.company-table dt{font-family:var(--display);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);font-weight:700;padding-top:28px}
.company-table dd{color:var(--ink)}
.company-table dd a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule)}
.company-table dd a:hover{border-bottom-color:var(--ink)}

/* ---------- Quote / Editorial ---------- */
.quote{padding:140px 32px;background:var(--paper);text-align:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote-inner{max-width:880px;margin:0 auto}
.quote .mark{font-family:var(--serif);font-size:120px;font-weight:700;line-height:.5;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;margin-bottom:24px;display:inline-block}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,3.6vw,42px);line-height:1.4;color:var(--ink);margin-bottom:24px;letter-spacing:-.01em}
.quote blockquote em{font-style:italic;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:600;display:inline-block;padding:0 .15em .14em .04em;line-height:1.2;margin-right:-.08em}
.quote cite{font-family:var(--display);font-size:13px;letter-spacing:.3em;color:var(--mute);font-style:normal;font-weight:600;text-transform:uppercase}

/* ---------- CTA ---------- */
.cta-section{padding:140px 32px;background:var(--black);color:var(--white);text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rainbow)}
.cta-section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rainbow)}
.cta-section .meta{font-family:var(--display);font-size:13px;letter-spacing:.4em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:24px;font-weight:600}
.cta-section h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.2vw,72px);color:var(--white);margin-bottom:24px;line-height:1.1;letter-spacing:-.01em}
.cta-section h2 em{font-style:italic;font-weight:600;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block;padding:.05em .18em .14em .04em;line-height:1.18;margin-right:-.1em}
.cta-section p{color:rgba(255,255,255,.65);max-width:560px;margin:0 auto 36px;font-size:14.5px;line-height:1.95}
.cta-section .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--black);color:rgba(255,255,255,.78);padding:80px 32px 40px;font-size:13px;border-top:1px solid var(--rule-dark)}
.footer-grid{max-width:var(--maxw);margin:0 auto 48px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.footer h4{font-family:var(--display);font-size:11px;letter-spacing:.3em;color:#fff;font-weight:700;margin-bottom:18px;text-transform:uppercase}
.footer .logo{color:#fff;margin-bottom:18px}
.footer .logo small{color:rgba(255,255,255,.6)}
.footer p,.footer li{line-height:1.95;color:rgba(255,255,255,.65)}
.footer ul{list-style:none}
.footer ul li{margin-bottom:8px}
.footer ul li a{color:rgba(255,255,255,.78);transition:color .2s ease}
.footer ul li a:hover{color:#fff}
.footer-bottom{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--rule-dark);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--display);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.5);text-transform:uppercase}
.footer-bottom .tag{color:transparent;background:var(--rainbow);background-clip:text;-webkit-background-clip:text;font-weight:700}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Marquee ---------- */
.marquee{background:var(--ink);color:#fff;padding:18px 0;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
.marquee-track{display:flex;gap:48px;animation:slide 50s linear infinite;white-space:nowrap;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.marquee-track span{display:inline-flex;align-items:center;gap:48px}
.marquee-track .star{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rainbow)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ---------- HANABI Standard (8 values) ---------- */
.standard-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.standard-card{
  background:var(--white);border:1px solid var(--rule);padding:36px 28px 32px;
  position:relative;overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
  display:flex;flex-direction:column;gap:14px;
}
.standard-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--card-c,#FF6B6B);transition:height .35s ease}
.standard-card.rainbow::before{background:var(--rainbow)}
.standard-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow-md)}
.standard-card:hover::before{height:5px}
.standard-card .num{font-family:var(--display);font-size:13px;letter-spacing:.3em;color:var(--mute);font-weight:600;font-style:italic;text-transform:uppercase}
.standard-card h3{font-family:var(--jp-serif);font-size:30px;color:var(--ink);letter-spacing:.04em;line-height:1.15;font-weight:600;margin:0}
.standard-card h3 .en{display:block;font-family:var(--display);font-size:12px;letter-spacing:.32em;color:var(--card-c,#FF6B6B);text-transform:uppercase;font-weight:700;margin-top:8px;font-style:normal}
.standard-card.rainbow h3 .en{background:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent}
.standard-card p{font-size:13.5px;line-height:1.9;color:var(--ink-2);margin:0;flex:1}
@media (max-width:1080px){.standard-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.standard-grid{grid-template-columns:1fr}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:var(--white);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}
  .nav a{padding:14px 24px;border-bottom:1px solid var(--rule)}
  .nav a:last-child{border-bottom:none}
  .nav a::after{display:none}
  .menu-toggle{display:flex}
  .container{padding:0 24px}
  .section{padding:80px 24px}
  .hero{padding:100px 24px 60px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero .ticker{display:none}
  .concept-grid{grid-template-columns:1fr;gap:32px}
  .concept-pillars{grid-template-columns:1fr}
  .brand-row{grid-template-columns:40px 1fr 60px;gap:14px}
  .brand-row .desc,.brand-row .place{display:none}
  .brand-row .name{font-size:24px}
  .brand-detail,.brand-detail.reverse{grid-template-columns:1fr;gap:32px;padding:80px 24px}
  .brand-detail.reverse .visual{order:0}
  .store-row{grid-template-columns:1fr;gap:18px;padding:32px}
  .menu-row{grid-template-columns:36px 1fr;gap:14px}
  .menu-row .price-block{grid-column:2;text-align:left;margin-top:8px}
  .position-row{grid-template-columns:1fr;gap:14px}
  .recruit-cards{grid-template-columns:1fr;gap:14px}
  .company-table dl{grid-template-columns:1fr}
  .company-table dt{padding:18px 18px 6px;border-bottom:none}
  .company-table dd{padding:0 18px 18px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;justify-content:center}
  .page-hero{padding:100px 24px 60px}
  .quote{padding:80px 24px}
  .cta-section{padding:80px 24px}
}


/* ---------- SHOP nav highlight (HP→EC連携) ---------- */
.nav a.nav-shop{
  background:var(--rainbow);
  background-size:200% 100%;
  color:#fff!important;
  padding:8px 16px;
  border-radius:0;
  letter-spacing:.15em;
  font-weight:700;
  transition:background-position .35s ease,transform .25s ease;
  margin-left:8px;
}
.nav a.nav-shop:hover{
  background-position:100% 0;
  transform:translateY(-1px);
}
.nav a.nav-shop::after{display:none}
@media (max-width:960px){
  .nav a.nav-shop{margin:8px 24px;display:inline-block}
}