@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Noto+Sans+JP:wght@100..900&display=swap');

/* --------------------------------------------------
normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:100%}sub,sup{position:relative;font-size:100%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;margin: 0;padding: 0;font-style: normal;}

/* --------------------------------------------------
common
--------------------------------------------------- */
:root {
    --red: #BC0707;
    --white: #ffffff;
    --off-white: rgba(255, 255, 255, .72);
    --dim: rgba(255, 255, 255, .38);
}
html {
    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    background: #000;
    color: var(--white);
    letter-spacing: .1em;
    font-weight: 500;
    font-style: normal;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    line-height: 1.6;

    font-optical-sizing: auto;
}
.tab{ display: none;}
.sp{ display: none;}
a{ color: var(--white); text-decoration: none;}

@media (max-width: 1024px) {
    .pc{ display: none;}
    .tab{ display: block;}
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
    .tab{ display: none;}
}
@media (max-width: 440px) {
    .sp{ display: block;}
}


/* --------------------------------------------------
header
--------------------------------------------------- */
.header { position: fixed; top: 0; right: 0; left: 0; z-index: 200; display: flex; padding: 0 3rem; height: 68px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .65); line-height: 1; align-items: center; justify-content: space-between; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}
.nav-logo { display: flex; align-items: center; gap: 10px;}
.nav-logo img { width: auto; height: 25px; vertical-align: bottom;}
.nav-logo-text { color: var(--white); font-weight: 600; font-size: 1rem;}
.header nav{ display: flex; gap: 2rem;}
.nav-links { display: flex; list-style: none; align-items: center; gap: 2rem;}
.nav-links a { color: var(--off-white); font-weight: 500; font-size: .8rem; transition: color .2s;}
.nav-links a:hover { color: var(--white);}
.nav-cta a { padding: 9px 20px; border-radius: 3px; background: var(--red); color: var(--white); white-space: nowrap; font-weight: 600; font-size: .8rem; transition: opacity .2s;}
.nav-cta a:hover { opacity: .85;}
.nav-back { display: flex; color: var(--off-white); font-size: .8rem; transition: color .2s; align-items: center; gap: 6px;}
.nav-back:hover { color: var(--white);}

@media (max-width: 1024px) {
    .nav-links { display: none;}
}
@media (max-width: 820px) {
    .header { padding: 0 2rem;}
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    .header{ justify-content: center;}
    .nav-logo img { height: 20px;}
    .header nav{ display: none;}
}

/* --------------------------------------------------
main
--------------------------------------------------- */
section { position: relative; padding: 130px 3rem;}
.container { margin: 0 auto; max-width: 1140px;}
.rule { width: 100%; height: 1px; background: rgba(255, 255, 255, .07);}
.eyebrow { display: block; margin-bottom: 1.2rem; color: var(--red); text-transform: uppercase; font-weight: 600; font-size: .7rem;}
h2 { margin-bottom: 1.2rem; font-weight: 600; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.15;}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
    section { padding: 90px 2rem;}
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    h2 { line-height: 1.25;}
}

/* top
--------------------------------------------------- */

/* hero */
#hero { display: flex; padding-top: 68px; min-height: 100dvh; background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .7) 60%, #000 100%), url("/lp/allkpop_mediakit/assets/img/hero.jpg") center / cover no-repeat; text-align: center; align-items: center; justify-content: center;}
.hero-inner { max-width: 900px;}
.hero-eyebrow { display: inline-flex; margin-bottom: 2rem; color: var(--red); font-weight: 600; font-size: .78rem; align-items: center; gap: 10px;}
.hero-eyebrow::before,
.hero-eyebrow::after { display: block; width: 28px; height: 1px; background: var(--red); content: '';}
#hero h1 { margin-bottom: 1.8rem; white-space: nowrap; letter-spacing: normal; font-weight: 600; font-size: clamp(1.8rem, 6vw, 4rem); line-height: 1.2;}
#hero h1 em { color: var(--red); font-style: italic; font-size: 120%;}
.hero-sub { margin-bottom: 3.5rem; color: var(--off-white); font-weight: 700; font-size: 1.2rem; line-height: 1.7;}
.hero-stats { display: flex; margin-bottom: 4rem; justify-content: center; gap: 3.5rem; flex-wrap: wrap;}
.hstat { display: flex; flex-direction: column; align-items: center;}
.hstat .n { display: flex; color: var(--white); font-weight: 600; font-size: 2.8rem; line-height: 1; align-items: flex-end;}
.hstat .n sup { margin: 0 0 0 .1em; padding: 0 0 .25em; color: var(--red); font-weight: 600; font-size: 50%;}
.hstat .l { display: block; margin-top: 7px; color: var(--dim); font-weight: 700; font-size: .7rem; line-height: 1.4;}
.hero-divider { width: 1px; height: 54px; background: rgba(255, 255, 255, .15); align-self: center;}
.btn-primary { display: inline-block; padding: 17px 44px; border-radius: 3px; background: var(--red); color: var(--white); font-weight: 600; font-size: .95rem; transition: opacity .2s, transform .15s;}
.btn-primary:hover { opacity: .88; transform: translateY(-2px);}
.scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; display: flex; flex-direction: column; color: var(--dim); font-weight: 700; font-size: .7rem; transform: translateX(-50%); animation: bob 2.2s ease-in-out infinite; align-items: center; gap: 8px;}
.scroll-hint::after { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(255, 255, 255, .3), transparent); content: '';}

@keyframes bob {
    0%,100% { transform: translateX(-50%) translateY(0);}
    50% { transform: translateX(-50%) translateY(7px);}
}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
    .hero-stats { gap: 1.5rem;}
    .hero-divider { display: none;}
}
@media (max-width: 440px) {
    .hero-sub { margin:0 calc(50% - 50vw) 3.5rem; font-size: 1rem; line-height: 1.7;}
    .scroll-hint { bottom: -1rem;}
}

/* about */
#about .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;}
.about-text h2 { margin-bottom: 1.4rem;}
.about-body { margin-bottom: 2rem; color: var(--off-white); font-size: 1.1rem; line-height: 1.9;}
.about-body strong { color: var(--white);}
.about-images { display: grid; overflow: hidden; border-radius: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; gap: 8px;}
.about-images img { display: block; width: 100%; height: 100%; filter: brightness(0.85) saturate(1.1); transition: filter .3s, transform .4s; object-fit: cover;}
.about-images img:hover { filter: brightness(1) saturate(1.2); transform: scale(1.03);}
.about-images .tall { grid-row: span 2;}

@media (max-width: 1024px) {
}

@media (max-width: 820px) {
}

@media (max-width: 768px) {
    .about-images { grid-template-columns: 1fr; grid-template-rows: auto;}
    .about-images .tall { height: 200px; grid-row: span 1;}
}
@media (max-width: 440px) {
    .about-body{ font-size: 1rem;}
}

/* audience */
#audience { background: #000;}
.audience-layout { display: grid; margin-bottom: 3rem; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;}
.audience-img { position: relative; overflow: hidden; height: 420px; border-radius: 10px;}
.audience-img img { width: 100%; height: 100%; filter: brightness(0.75) saturate(1.1); object-fit: cover;}
.audience-img-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 2rem; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); color: var(--dim); font-size: .8rem;}
.stat-grid { display: grid; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .08); grid-template-columns: 1fr 1fr; gap: 1px;}
.stat-block { padding: 2.8rem 2rem; background: #0a0a0a; text-align: center; transition: background .2s;}
.stat-block:hover { background: rgba(188, 7, 7, .09);}
.stat-block .big { display: block; color: var(--white); font-weight: 600; font-size: 3.4rem; line-height: 1;}
.stat-block .big span { color: var(--red); font-size: 50%;}
.stat-block .label { display: block; margin-top: 10px; color: var(--dim); white-space: nowrap; letter-spacing: normal;font-size: .75rem; line-height: 1.4; }
.bars-grid { display: grid; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .08); grid-template-columns: repeat(3, 1fr); gap: 1px;}
.bar-group { padding: 2.2rem; background: #0a0a0a;}
.bar-group h4 { margin-bottom: 1.5rem; color: var(--dim); font-weight: 600; font-size: .72rem;}
.bar-item { margin-bottom: 1.1rem;}
.bar-item:last-child { margin-bottom: 0;}
.bar-meta { display: flex; margin-bottom: 6px; color: var(--off-white); font-size: .88rem; justify-content: space-between;}
.bar-meta strong { color: var(--white); font-weight: 600;}
.bar-track { overflow: hidden; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08);}
.bar-fill { height: 100%; border-radius: 99px; background: var(--red);}

@media (max-width: 1024px) {
    .stat-grid { grid-template-columns: 1fr 1fr;}
    .bars-grid { grid-template-columns: 1fr;}
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    .stat-block { padding: 2rem 0;}
    .stat-block .big { font-size: 2.8rem;}
    .stat-block .label { font-size: .7rem;}
    .bar-item { letter-spacing: normal;}
}

/* reach */
#reach { background: #000;}
.reach-layout { display: grid; margin-bottom: 2rem; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;}
.reach-img { overflow: hidden; height: 460px; border-radius: 10px;}
.reach-img img { width: 100%; height: 100%; filter: brightness(0.7) saturate(1.1); object-fit: cover;}
.reach-platforms { display: grid; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .08); grid-template-columns: 1fr 1fr; gap: 1px;}
.platform-card { padding: 2rem 1.5rem; background: #0a0a0a; text-align: center; transition: background .2s;}
.platform-card:hover { background: rgba(188, 7, 7, .1);}
.platform-name { margin-bottom: .8rem; color: var(--dim); text-transform: uppercase; font-weight: 600; font-size: .65rem;}
.platform-num { color: var(--white); font-weight: 600; font-size: 1.7rem; line-height: 1;}
.platform-unit { margin-top: 5px; color: var(--dim); font-size: .68rem;}
.reach-platforms + .cap{ margin: 1em 0 0; color: var(--dim); text-align: right; font-size: .8rem;}
.reach-total-bar { display: flex; padding: 3rem; border-radius: 10px; background: var(--red); text-align: center; align-items: center; justify-content: center; gap: 2rem;}
.reach-total-bar .total-n { color: var(--white); font-weight: 600; font-size: 5rem; line-height: 1;}
.reach-total-bar .total-l { color: rgba(255, 255, 255, .8); font-size: .9rem; line-height: 1.5;}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
    .reach-platforms { grid-template-columns: 1fr 1fr;}
    .reach-total-bar { flex-direction: column;}
    .reach-total-bar .total-n { font-size: 4rem; line-height: 1;}
}
@media (max-width: 440px) {
    .platform-card { padding: 2rem 0;}
    .platform-num { display: flex; white-space: nowrap; font-size: 2.3rem; justify-content: center; align-items: baseline;}
    .platform-num span{ font-size: 50%;}
    .reach-total-bar { padding: 3rem 0; gap: 1rem;}
    .reach-total-bar .total-n { font-size: 2.4rem;}
}

/* products */
#products { background: #000;}
.products-layout { display: grid; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .08); grid-template-columns: 1fr 1fr 1fr; gap: 1px;}
.product-card { overflow: hidden; background: #0a0a0a; transition: background .2s;}
.product-card:hover { background: #0f0f0f;}
.product-img { display: block; width: 100%; height: 200px; filter: brightness(0.65) saturate(1.1); transition: filter .3s; object-fit: cover;}
.product-card:hover .product-img { filter: brightness(0.8) saturate(1.2);}
.product-body { padding: 2rem;}
.product-tag { display: inline-block; margin-bottom: 1rem; padding: 3px 9px; border: 1px solid var(--red); border-radius: 2px; color: var(--red); text-transform: uppercase; font-weight: 600; font-size: .62rem;}
.product-card h3 { margin-bottom: .7rem; font-weight: 600; font-size: 1.4rem;}
.product-card p { margin-bottom: 1.4rem; color: var(--dim); font-size: .9rem; line-height: 1.7;}
.product-items { display: flex; flex-direction: column; gap: .4rem;}
.product-item { position: relative; padding: 6px 0 6px 1em; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--off-white); font-size: .88rem; line-height: 1.5; gap: 8px;}
.product-item::before { position: absolute; top: 1em; left: .2em; width: 4px; height: 4px; border-radius: 50%; background: var(--red); content: ''; flex-shrink: 0;}
.products-btn{display: flex;  margin: 3rem 0 0; justify-content: center;}

@media (max-width: 1024px) {
    .products-layout { grid-template-columns: 1fr;}
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
}

/* cta */
#cta { padding: 160px 3rem; background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .7) 100%), url('/lp/allkpop_mediakit/assets/img/cta.jpg') center/cover no-repeat fixed; text-align: center;}
#cta h2 { margin: 0 calc(50% - 50vw) 1.5rem; font-size: clamp(1.8rem, 4.5vw, 4rem); line-height: 1.25;}
#cta h2 em{ display: inline-block; margin: 0 .2em 0 .1em; font-style: italic; font-size: 120%;}
#cta p { margin-bottom: 3rem; color: var(--off-white); font-size: 1.15rem;}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    #cta p { margin: 0 calc(50% - 50vw) 3rem; font-size: 1rem;}
}

/* common */
@media (max-width: 1024px) {
    #about .about-grid,
    .audience-layout,
    .reach-layout { grid-template-columns: 1fr; gap: 2.5rem;}
    .about-images { grid-template-rows: 180px 180px;}
    .audience-img,
    .reach-img { height: 280px;}
}
@media (max-width: 820px) {
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
}

/* contact
--------------------------------------------------- */
.contact-hero { display: flex; padding: 68px 3rem 4rem 3rem; min-height: 38vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 70%, #000 100%), url('/lp/allkpop_mediakit/assets/img/cta.jpg') center 40%/cover no-repeat; align-items: flex-end;}
.contact-hero h1 { white-space: nowrap; letter-spacing: normal; font-weight: 600; font-size: clamp(1.8rem, 6vw, 4rem); line-height: 1.25;}
.contact-hero h1 em { color: var(--red); font-style: normal;}
.contact-hero p { margin-top: 1rem; color: var(--off-white); font-size: 1.1rem;}

/* FORM SECTION */
.contact-body { display: grid; margin: 0 auto; padding: 6rem 3rem; max-width: 1100px; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: start;}
.contact-info h2 { margin-bottom: 1.2rem; font-size: 1.7rem;}
.contact-info p { margin-bottom: 2.5rem; color: var(--off-white); font-size: .95rem; line-height: 1.8;}

/* FORM */
.contact-form { padding: 3rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: #0a0a0a;}
.form-grid { display: grid; margin-bottom: 1.2rem; grid-template-columns: 1fr 1fr; gap: 1.2rem;}
.form-group { display: flex; flex-direction: column; gap: 7px;}
.form-group.full { grid-column: span 2;}
form label { color: var(--dim); text-transform: uppercase; font-weight: 600; font-size: .72rem;}
form input,
form select,
form textarea { padding: 13px 16px; width: 100%; outline: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; background: rgba(255, 255, 255, 0.04); color: var(--white); font-size: .95rem; font-family: inherit; transition: border-color 0.2s, background 0.2s;}
form input:focus,
form select:focus,
form textarea:focus { border-color: var(--red); background: rgba(188, 7, 7, 0.05);}
form select { cursor: pointer; appearance: none;}
form select option { background: #111;}
form textarea { min-height: 140px; line-height: 1.5;resize: vertical; }
.submit{display: flex;  margin-top: 1.4rem; text-align: center; justify-content: center;}
.submit button { margin: 0 .5rem; padding: 16px 0; width: 46%; border: none; border-radius: 5px; background: var(--red); color: var(--white); letter-spacing: .5px; font-weight: 700; font-size: 1rem; font-family: inherit; cursor: pointer; transition: opacity .2s, transform 0.15s;}
.submit button:hover { opacity: .88; transform: translateY(-1px);}

/* SUCCESS STATE */
.success-state { padding: 4rem 2rem; text-align: center;}
.success-icon { display: flex; margin: 0 auto 2rem; width: 64px; height: 64px; border-radius: 50%; background: var(--red); font-size: 1.8rem; align-items: center; justify-content: center;}
.success-state h3 { margin-bottom: .8rem; font-size: 1.7rem;}
.success-state p { color: var(--off-white); font-size: 1rem; line-height: 1.7;}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
    .contact-hero { padding: 6rem 2rem 3rem;}
    .contact-body { padding: 3rem 2rem; grid-template-columns: 1fr; gap: 3rem;}
    .form-grid { grid-template-columns: 1fr;}
    .form-group.full { grid-column: span 1;}
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    .contact-info h2 { font-size: 1.2rem;}
    .contact-hero p { font-size: 1rem;}
    .contact-form { padding: 1.5rem;}
    .success-state { padding: 4rem 2rem; text-align: left;}
    .success-state h3 { font-size: 1.1rem;}
    .success-state p{ font-size: .8rem;}
}

/* --------------------------------------------------
footer
--------------------------------------------------- */
.footer { display: flex; padding: 2.5rem 3rem; border-top: 1px solid rgba(255, 255, 255, .08); background: #000; letter-spacing: normal; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;}
.footer a{ color: var(--dim);}
.footer > small { width: 100%; color: var(--dim); text-align: right; font-size: .8rem;}
.footer > aside ul { display: flex; list-style: none; gap: 1.5rem; flex-wrap: wrap;}
.footer > aside ul a { color: var(--dim); font-size: .8rem; transition: color .2s;}
.footer > aside ul a:hover { color: var(--white);}
.footer > nav ul { display: flex; list-style: none; gap: 1.5rem; flex-wrap: wrap;}
.footer > nav ul a { color: var(--dim); font-size: .8rem; transition: color .2s;}
.footer > nav ul a:hover { color: var(--white);}

@media (max-width: 1024px) {
}
@media (max-width: 820px) {
    .footer { padding: 1rem 2rem;}
}
@media (max-width: 768px) {
}
@media (max-width: 440px) {
    .footer > small{ text-align: center;}
}