*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --orange:#F28B30;--orange-dark:#D97516;--yellow:#FFD93D;--yellow-light:#FFF3C4; --cream:#FFF8EE;--cream-dark:#FFF0D6;--brown:#8B6914;--brown-dark:#5C4A0E; --dark:#1A1A1A;--text:#3A3A3A;--text-light:#6B6B6B;--white:#FFFFFF; --card-bg:#FFFAF3;--shadow:0 4px 24px rgba(0,0,0,0.08); --shadow-lg:0 12px 48px rgba(0,0,0,0.12);--radius:16px;--radius-sm:8px; --font-body:'Noto Sans JP',sans-serif;--font-display:'Zen Maru Gothic',sans-serif; --font-en:'Poppins',sans-serif;--nav-h:72px; --transition:0.3s cubic-bezier(0.4,0,0.2,1); } html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden} body{font-family:var(--font-body);color:var(--text);background:var(--cream);line-height:1.8;overflow-x:hidden} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} button{border:none;cursor:pointer;font-family:inherit;font-size:inherit} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.4} .container{max-width:1100px;margin:0 auto;padding:0 24px} .section{padding:100px 0} .section-label{font-family:var(--font-en);font-size:0.85rem;font-weight:600;color:var(--orange);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px} .section-title{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--dark);margin-bottom:16px} .section-subtitle{font-size:1.05rem;color:var(--text-light);max-width:600px;margin:0 auto 48px} .text-center{text-align:center} .reveal{opacity:1;transform:none;transition:opacity 0.8s ease,transform 0.8s ease} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:0.15s} .reveal-delay-2{transition-delay:0.3s} .reveal-delay-3{transition-delay:0.45s} .nav{position:fixed;top:0;left:0;width:100%;height:var(--nav-h);z-index:1000;transition:var(--transition)} .nav.scrolled{background:rgba(255,248,238,0.95);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,0.06)} .nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:100%} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--dark)} .nav-logo .hash{color:var(--orange);font-size:1.3rem} .nav-logo .pop{color:var(--orange)} .nav-links{display:flex;align-items:center;gap:32px;list-style:none} .nav-links a{font-size:0.9rem;font-weight:500;color:var(--text);transition:var(--transition);position:relative} .nav-links a:hover{color:var(--orange)} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--orange);transition:var(--transition)} .nav-links a:hover::after{width:100%} .nav-cta{background:var(--orange);color:var(--white);padding:10px 24px;border-radius:50px;font-weight:700;font-size:0.9rem;transition:var(--transition);box-shadow:0 4px 16px rgba(242,139,48,0.3)} .nav-cta:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(242,139,48,0.4)} .nav-cta::after{display:none!important} .hamburger{display:none;flex-direction:column;gap:5px;background:none;padding:8px} .hamburger span{width:24px;height:2px;background:var(--dark);transition:var(--transition)} .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,248,238,0.92) 0%,rgba(255,240,214,0.92) 100%);padding-top:var(--nav-h)} .hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.15} .hero-content{text-align:center;position:relative;z-index:2} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--white);padding:8px 20px;border-radius:50px;font-size:0.85rem;font-weight:500;color:var(--text-light);box-shadow:var(--shadow);margin-bottom:32px} .hero-badge .dot{width:8px;height:8px;background:var(--orange);border-radius:50%;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}} .hero-title-wrapper{margin-bottom:24px} .hero-hash{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,4.5rem);font-weight:900;color:var(--dark);line-height:1.2} .hero-hash .hash-mark{color:var(--orange)} .hero-hash .pop-text{color:var(--orange);position:relative;display:inline-block} .hero-tagline{font-family:var(--font-en);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:600;color:var(--brown);letter-spacing:0.05em;margin-bottom:40px} .hero-cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:var(--white);padding:16px 40px;border-radius:50px;font-weight:700;font-size:1.05rem;transition:var(--transition);box-shadow:0 4px 24px rgba(242,139,48,0.3)} .btn-primary:hover{background:var(--orange-dark);transform:translateY(-3px);box-shadow:0 8px 32px rgba(242,139,48,0.4)} .btn-secondary{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--orange);padding:16px 40px;border-radius:50px;font-weight:700;font-size:1.05rem;border:2px solid var(--orange);transition:var(--transition)} .btn-secondary:hover{background:var(--orange);color:var(--white);transform:translateY(-3px)} .popcorn-float{position:absolute;z-index:1;opacity:0.15;font-size:2rem;animation:floatUp linear infinite} @keyframes floatUp{ 0%{transform:translateY(100vh) rotate(0deg);opacity:0} 10%{opacity:0.15} 90%{opacity:0.15} 100%{transform:translateY(-100px) rotate(360deg);opacity:0} } .popcorn-icon{width:120px;height:120px;margin:0 auto 24px} .stats-bar{background:var(--white);padding:40px 0;border-top:1px solid rgba(0,0,0,0.05);border-bottom:1px solid rgba(0,0,0,0.05)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center} .stat-item .stat-number{font-family:var(--font-en);font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--orange);line-height:1} .stat-item .stat-number span{font-size:0.5em;font-weight:600;color:var(--text-light)} .stat-item .stat-label{font-size:0.9rem;color:var(--text-light);margin-top:4px} .about{background:var(--white)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .about-visual{position:relative} .about-slideshow{width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--cream-dark)} .about-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out} .about-slide.active{opacity:1} .slideshow-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2} .slideshow-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:var(--transition);border:none;padding:0} .slideshow-dot.active{background:var(--orange);transform:scale(1.2)} .about-tag{position:absolute;bottom:-16px;right:-16px;background:var(--orange);color:var(--white);padding:12px 24px;border-radius:var(--radius-sm);font-weight:700;font-size:0.9rem;box-shadow:var(--shadow)} .about-text h2{font-size:clamp(1.4rem,2.8vw,1.85rem);margin-bottom:20px;color:var(--dark);white-space:nowrap} .about-text h2 em{font-style:normal;color:var(--orange)} .about-text p{margin-bottom:16px;color:var(--text);line-height:2} .appeal{background:var(--cream)} .appeal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .appeal-card{background:var(--white);border-radius:var(--radius);padding:40px 32px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);position:relative;overflow:hidden} .appeal-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)} .appeal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--orange);transform:scaleX(0);transition:var(--transition)} .appeal-card:hover::before{transform:scaleX(1)} .appeal-icon{width:80px;height:80px;margin:0 auto 20px;background:var(--yellow-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.2rem} .appeal-card h3{font-size:1.25rem;margin-bottom:12px;color:var(--dark)} .appeal-card p{font-size:0.95rem;color:var(--text-light);line-height:1.8} .issues{background:linear-gradient(135deg,var(--dark) 0%,#2D2D2D 100%);color:var(--white)} .issues .section-label{color:var(--yellow)} .issues .section-title{color:var(--white)} .issues .section-subtitle{color:rgba(255,255,255,0.7)} .issues-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px} .issue-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:48px 36px;text-align:center;backdrop-filter:blur(8px)} .issue-card .issue-label{font-size:0.95rem;color:rgba(255,255,255,0.6);margin-bottom:16px} .issue-card .issue-number{font-family:var(--font-en);font-size:clamp(3rem,8vw,5rem);font-weight:900;color:var(--yellow);line-height:1} .issue-card .issue-unit{font-size:1.2rem;color:var(--yellow);font-weight:600} .issue-card .issue-desc{margin-top:16px;font-size:0.9rem;color:rgba(255,255,255,0.5);line-height:1.8} .ecosystem{background:var(--white)} .eco-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:48px} .eco-step{text-align:center;padding:28px 24px;background:var(--cream);border-radius:var(--radius);min-width:180px;flex:1;transition:var(--transition)} .eco-step:hover{background:var(--yellow-light);transform:translateY(-4px)} .eco-step .eco-icon{font-size:2.5rem;margin-bottom:12px} .eco-step h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:4px} .eco-step p{font-size:0.8rem;color:var(--text-light)} .eco-arrow{font-size:1.5rem;color:var(--orange);font-weight:700} .eco-message{text-align:center;font-size:1.15rem;color:var(--text);max-width:700px;margin:0 auto;line-height:2} .eco-message strong{color:var(--orange)} .business{background:var(--cream)} .biz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .biz-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)} .biz-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .biz-card-header{padding:28px 28px 20px;border-bottom:1px solid rgba(0,0,0,0.05)} .biz-card-header .biz-icon{width:56px;height:56px;background:var(--yellow-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:16px} .biz-card-header h3{font-size:1.2rem;color:var(--dark);margin-bottom:4px} .biz-card-header .biz-en{font-family:var(--font-en);font-size:0.75rem;color:var(--text-light);letter-spacing:0.1em;text-transform:uppercase} .biz-card-body{padding:20px 28px 28px} .biz-card-body p{font-size:0.9rem;color:var(--text-light);line-height:1.9} .biz-card-body ul{list-style:none;margin-top:12px} .biz-card-body ul li{font-size:0.85rem;color:var(--text-light);padding:4px 0 4px 20px;position:relative} .biz-card-body ul li::before{content:'🌽';position:absolute;left:0;font-size:0.7rem} .president{background:var(--white)} .president-grid{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:start} .president-photo{position:relative} .president-photo-frame{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,var(--cream-dark),var(--yellow-light));border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center} .president-photo-frame .placeholder-text{font-size:6rem;opacity:0.3} .president-name-plate{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);background:var(--white);padding:12px 32px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);text-align:center;white-space:nowrap} .president-name-plate h3{font-size:1.4rem;font-weight:900;color:var(--dark)} .president-name-plate .name-en{font-family:var(--font-en);font-size:0.75rem;color:var(--text-light);letter-spacing:0.1em} .president-info{padding-top:8px} .president-titles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .president-titles span{background:var(--cream);padding:6px 14px;border-radius:50px;font-size:0.8rem;color:var(--text-light);font-weight:500} .president-bio{font-size:0.95rem;color:var(--text);line-height:2;margin-bottom:24px} .president-awards{display:flex;flex-wrap:wrap;gap:8px} .award-tag{background:var(--yellow-light);padding:6px 14px;border-radius:50px;font-size:0.78rem;color:var(--brown);font-weight:500} .partners{background:var(--cream);overflow:hidden} .partner-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:center} .partner-item{background:var(--white);padding:24px 36px;border-radius:var(--radius-sm);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;min-width:200px;min-height:80px;font-weight:700;color:var(--text-light);font-size:0.95rem;transition:var(--transition)} .partner-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .map-section{background:var(--white)} .map-container{position:relative;max-width:800px;margin:0 auto} .map-locations{display:flex;flex-wrap:wrap;gap:16px;justify-content:center} .map-pin{background:var(--cream);padding:12px 20px;border-radius:50px;font-size:0.9rem;font-weight:500;color:var(--text);display:flex;align-items:center;gap:8px;transition:var(--transition)} .map-pin:hover{background:var(--yellow-light);transform:translateY(-2px)} .map-pin::before{content:'📍';font-size:0.9rem} .cta-section{background:linear-gradient(135deg,var(--orange) 0%,#E8720A 50%,var(--orange-dark) 100%);color:var(--white);padding:100px 0;text-align:center;position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);animation:ctaGlow 8s ease-in-out infinite} @keyframes ctaGlow{0%,100%{transform:translate(0,0)}50%{transform:translate(5%,5%)}} .cta-content{position:relative;z-index:2} .cta-number{font-family:var(--font-en);font-size:clamp(3rem,8vw,5rem);font-weight:900;margin-bottom:8px;text-shadow:0 4px 20px rgba(0,0,0,0.2)} .cta-text{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;margin-bottom:8px;font-family:var(--font-display)} .cta-sub{font-size:1rem;opacity:0.85;margin-bottom:40px} .btn-white{background:var(--white);color:var(--orange);padding:18px 48px;border-radius:50px;font-weight:800;font-size:1.15rem;transition:var(--transition);box-shadow:0 4px 24px rgba(0,0,0,0.15);display:inline-flex;align-items:center;gap:10px} .btn-white:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 40px rgba(0,0,0,0.2)} .btn-white .arrow{transition:var(--transition)} .btn-white:hover .arrow{transform:translateX(4px)} .footer{background:var(--dark);color:rgba(255,255,255,0.8);padding:80px 0 40px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px} .footer-brand .footer-logo{font-family:var(--font-display);font-size:1.3rem;font-weight:900;color:var(--white);margin-bottom:12px} .footer-brand .footer-logo .hash{color:var(--orange)} .footer-brand .footer-tagline{font-family:var(--font-en);font-size:0.85rem;color:var(--orange);margin-bottom:16px} .footer-brand p{font-size:0.85rem;line-height:1.8;color:rgba(255,255,255,0.5)} .footer-col h3{font-size:0.9rem;font-weight:700;color:var(--white);margin-bottom:16px} .footer-col ul{list-style:none} .footer-col ul li{margin-bottom:10px} .footer-col ul li a{font-size:0.85rem;color:rgba(255,255,255,0.6);transition:var(--transition)} .footer-col ul li a:hover{color:var(--orange)} .footer-social{display:flex;gap:12px;margin-top:20px} .footer-social a{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:0.9rem} .footer-social a:hover{background:var(--orange);transform:translateY(-2px)} .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;color:rgba(255,255,255,0.4)} .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:2000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s ease} .modal-overlay.active{display:flex;opacity:1} .modal{background:var(--white);border-radius:20px;max-width:480px;width:90%;max-height:90vh;overflow-y:auto;position:relative;transform:translateY(30px) scale(0.95);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);padding:0} .modal-overlay.active .modal{transform:translateY(0) scale(1)} .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;background:rgba(0,0,0,0.05);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--text-light);transition:var(--transition);z-index:10} .modal-close:hover{background:rgba(0,0,0,0.1);color:var(--dark)} .modal-header{background:linear-gradient(135deg,var(--orange),var(--orange-dark));padding:36px 36px 28px;color:var(--white);text-align:center;border-radius:20px 20px 0 0} .modal-header h2{font-size:1.5rem;font-weight:900;margin-bottom:4px} .modal-header p{font-size:0.9rem;opacity:0.85} .modal-body{padding:32px 36px 36px} .form-group{margin-bottom:20px} .form-group label{display:block;font-size:0.85rem;font-weight:600;color:var(--dark);margin-bottom:6px} .form-group label .req{color:#E74C3C;font-size:0.75rem;margin-left:4px} .form-input{width:100%;padding:14px 16px;border:2px solid #E8E8E8;border-radius:var(--radius-sm);font-size:1rem;font-family:var(--font-body);transition:var(--transition);background:var(--cream)} .form-input:focus{outline:none;border-color:var(--orange);background:var(--white);box-shadow:0 0 0 4px rgba(242,139,48,0.1)} .form-input::placeholder{color:#BDBDBD} .form-hint{font-size:0.78rem;color:var(--text-light);margin-top:4px} .form-submit{width:100%;padding:16px;background:var(--orange);color:var(--white);border-radius:50px;font-size:1.1rem;font-weight:700;transition:var(--transition);margin-top:8px;box-shadow:0 4px 16px rgba(242,139,48,0.3)} .form-submit:hover{background:var(--orange-dark);transform:translateY(-2px)} .form-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none} .form-terms{font-size:0.78rem;color:var(--text-light);text-align:center;margin-top:16px} .form-terms a{color:var(--orange);text-decoration:underline} .card-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(26,26,26,0.92);z-index:3000;display:none;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity 0.5s ease;overflow-y:auto;padding:24px 16px} .card-overlay.active{display:flex;opacity:1} .popcorn-celebration{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1} .card-wrapper{position:relative;z-index:2;perspective:900px;margin-bottom:8px} .membership-card{width:520px;max-width:92vw;aspect-ratio:1.586/1;border-radius:20px;padding:0;text-align:left;position:relative;background:linear-gradient(135deg,#FFF3C4 0%,#FFFAF3 30%,#FFE8B0 60%,#FFF6D6 100%);transform:scale(0) rotateX(8deg);transition:transform 0.8s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden; box-shadow: 0 4px 0 0 #E8A020, 0 8px 0 0 #D4911A, 0 12px 0 0 #C08215, 0 14px 4px 0 rgba(0,0,0,0.15), 0 20px 40px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.7)} .card-overlay.active .membership-card{transform:scale(1) rotateX(0deg)} .membership-card::before{content:'';position:absolute;top:7px;left:7px;right:7px;bottom:7px;border:2.5px solid rgba(242,180,60,0.35);border-radius:14px;pointer-events:none} .membership-card::after{content:'🍿';position:absolute;top:12px;right:16px;font-size:2rem;opacity:0.15;pointer-events:none} .card-shine{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.2) 55%,transparent 60%);pointer-events:none;animation:cardShine 4s ease-in-out infinite} @keyframes cardShine{0%,100%{transform:translateX(-30%) translateY(-30%)}50%{transform:translateX(30%) translateY(30%)}} .card-deco-bl{position:absolute;bottom:40px;left:14px;font-size:1.6rem;opacity:0.12;pointer-events:none} .card-inner{display:flex;align-items:center;padding:28px 32px;height:calc(100% - 40px)} .card-left{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding-right:24px} .card-logo{margin-bottom:8px} .card-logo img{height:40px;width:auto;display:block} .card-subtitle{font-family:var(--font-en);font-size:0.6rem;color:var(--orange-dark);letter-spacing:0.2em;text-transform:uppercase;font-weight:700} .card-divider{width:2px;align-self:stretch;background:linear-gradient(to bottom,transparent,rgba(242,139,48,0.35),transparent);margin:0 24px 0 0;flex-shrink:0} .card-right{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px} .card-nickname{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--dark);line-height:1.2} .card-flavor{font-size:0.9rem;color:var(--orange-dark);font-weight:700;margin:2px 0} .card-meta{display:flex;gap:16px;align-items:center;margin-top:8px} .card-number{font-family:var(--font-en);font-size:1.1rem;font-weight:800;color:var(--brown);letter-spacing:0.05em} .card-date{font-family:var(--font-en);font-size:0.7rem;color:var(--text-light)} .card-bottom-tag{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(90deg,#F28B30,#E87020,#F28B30);color:var(--white);text-align:center;font-family:var(--font-display);font-size:0.72rem;font-weight:700;padding:10px 16px;letter-spacing:0.1em;text-shadow:0 1px 2px rgba(0,0,0,0.15)} .card-label{font-size:0.75rem;color:var(--text-light);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .card-share{display:flex;gap:12px;justify-content:center;margin-top:32px;position:relative;z-index:2} .share-btn{padding:12px 24px;border-radius:50px;font-size:0.85rem;font-weight:600;transition:var(--transition);display:flex;align-items:center;gap:6px} .share-btn:hover{transform:translateY(-2px)} .share-x{background:#000;color:#fff} .share-line{background:#06C755;color:#fff} .share-insta{background:linear-gradient(45deg,#F09433,#E6683C,#DC2743,#CC2366,#BC1888);color:#fff} .share-save{background:var(--white);color:var(--dark);border:2px solid #E8E8E8} .card-close{margin-top:20px;color:rgba(255,255,255,0.6);font-size:0.85rem;cursor:pointer;transition:var(--transition);position:relative;z-index:2;background:none} .card-close:hover{color:var(--white)} .contact-section{background:var(--cream);padding:100px 0} .contact-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:700px;margin:0 auto 40px} .contact-cat{background:var(--white);border:2px solid transparent;border-radius:var(--radius);padding:28px 24px;text-align:center;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow)} .contact-cat:hover{border-color:var(--orange);transform:translateY(-4px)} .contact-cat.selected{border-color:var(--orange);background:var(--yellow-light)} .contact-cat .cat-icon{font-size:2rem;margin-bottom:8px} .contact-cat h3{font-size:1.05rem;color:var(--dark);margin-bottom:4px} .contact-cat p{font-size:0.8rem;color:var(--text-light)} .contact-form-wrapper{max-width:600px;margin:0 auto;background:var(--white);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);display:none} .contact-form-wrapper.active{display:block;animation:slideUp 0.4s ease} @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .contact-form-wrapper h3{font-size:1.3rem;margin-bottom:24px;color:var(--dark);text-align:center} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} textarea.form-input{min-height:120px;resize:vertical} .mobile-menu{position:fixed;top:0;right:-100%;width:80%;max-width:360px;height:100vh;background:var(--white);z-index:1500;padding:100px 40px 40px;transition:right 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-lg)} .mobile-menu.open{right:0} .mobile-menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1400;display:none;opacity:0;transition:opacity 0.3s ease} .mobile-menu-overlay.open{display:block;opacity:1} .mobile-menu ul{list-style:none} .mobile-menu ul li{margin-bottom:24px} .mobile-menu ul li a{font-size:1.1rem;font-weight:500;color:var(--dark);transition:var(--transition)} .mobile-menu ul li a:hover{color:var(--orange)} .mobile-menu .mobile-cta{display:block;background:var(--orange);color:var(--white);padding:16px;border-radius:50px;text-align:center;font-weight:700;margin-top:32px;font-size:1.05rem} @media(max-width:968px){ .nav-links{display:none} .hamburger{display:flex} .about-grid{grid-template-columns:1fr;gap:40px} .about-text h2{white-space:normal;font-size:clamp(1.3rem,4vw,1.85rem)} .appeal-cards{grid-template-columns:1fr 1fr} .issues-grid{grid-template-columns:1fr 1fr} .biz-cards{grid-template-columns:1fr} .president-grid{grid-template-columns:1fr;gap:40px} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .stats-grid{grid-template-columns:repeat(4,1fr);gap:16px} .stat-item .stat-number{font-size:clamp(1.6rem,4vw,2.5rem)} .stat-item .stat-label{font-size:0.78rem} .eco-flow{flex-direction:column} .eco-arrow{transform:rotate(90deg)} .form-row{grid-template-columns:1fr} .contact-categories{grid-template-columns:1fr 1fr} .card-share{flex-wrap:wrap} .partner-item{min-width:150px;padding:16px 24px;font-size:0.85rem} } @media(max-width:768px){ .photo-grid-3{grid-template-columns:1fr 1fr !important;gap:12px !important} .photo-grid-3 img{height:180px !important} .section{padding:72px 0} .container{padding:0 20px} .hero{min-height:90vh;padding-top:calc(var(--nav-h) + 20px)} .hero-hash{font-size:clamp(1.8rem,8vw,3rem)} .hero-tagline{font-size:clamp(0.85rem,2.5vw,1.2rem);margin-bottom:28px} .hero-badge{font-size:0.78rem;padding:6px 16px;margin-bottom:24px} .hero-cta-group{flex-direction:column;align-items:center;gap:12px} .btn-primary,.btn-secondary{width:100%;max-width:320px;justify-content:center;padding:14px 32px;font-size:0.95rem} .stats-grid{grid-template-columns:1fr 1fr;gap:20px} .appeal-cards{grid-template-columns:1fr} .issues-grid{grid-template-columns:1fr} .issue-card{padding:32px 24px} .eco-step{min-width:140px;padding:20px 16px} .biz-cards{grid-template-columns:1fr} .president-grid{grid-template-columns:1fr;gap:32px} .president-photo-frame{max-width:280px;margin:0 auto} .president-name-plate{position:relative;bottom:auto;left:auto;transform:none;margin-top:16px;display:inline-block} .president-photo{text-align:center} .contact-categories{grid-template-columns:1fr;gap:16px} .contact-cat{padding:20px 16px} .contact-form-wrapper{padding:28px 20px} .footer-grid{grid-template-columns:1fr;gap:28px} .map-pin{font-size:0.82rem;padding:10px 16px} .section-title{font-size:clamp(1.5rem,5vw,2.2rem)} .section-subtitle{font-size:0.95rem} .membership-card{width:440px;box-shadow:0 3px 0 0 #E8A020,0 6px 0 0 #D4911A,0 9px 0 0 #C08215,0 11px 3px rgba(0,0,0,0.12),0 16px 32px rgba(0,0,0,0.25),inset 0 2px 0 rgba(255,255,255,0.7)} .card-inner{padding:22px 24px} .card-logo img{height:32px} .card-nickname{font-size:1.3rem} .card-number{font-size:1rem} .card-share{gap:8px} .share-btn{padding:10px 16px;font-size:0.78rem} } @media(max-width:480px){ .photo-grid-3{grid-template-columns:1fr !important} .photo-grid-3 img{height:200px !important} .section{padding:56px 0} .container{padding:0 16px} .hero{min-height:85vh} .hero-hash{font-size:clamp(1.6rem,9vw,2.5rem)} .hero-tagline{font-size:0.85rem;margin-bottom:24px} .hero-badge{font-size:0.72rem;padding:5px 14px;margin-bottom:20px} .btn-primary,.btn-secondary{padding:13px 28px;font-size:0.9rem} .stats-grid{grid-template-columns:1fr 1fr;gap:16px} .stat-item .stat-number{font-size:clamp(1.4rem,6vw,2rem)} .stat-item .stat-label{font-size:0.72rem} .about-text h2{font-size:1.15rem;white-space:normal} .about-text p{font-size:0.9rem;line-height:1.9} .about-tag{font-size:0.78rem;padding:8px 16px;bottom:-10px;right:-8px} .appeal-card{padding:28px 20px} .appeal-icon{width:64px;height:64px;font-size:1.8rem} .appeal-card h3{font-size:1.1rem} .appeal-card p{font-size:0.88rem} .issue-card{padding:28px 16px} .issue-card .issue-number{font-size:clamp(2.5rem,10vw,3.5rem)} .eco-step{min-width:100%;padding:20px 16px} .eco-step h3{font-size:1rem} .eco-message{font-size:1rem} .biz-card-header{padding:20px 20px 16px} .biz-card-body{padding:16px 20px 20px} .biz-card-header h3{font-size:1.05rem} .biz-card-body p{font-size:0.85rem} .president-bio{font-size:0.9rem} .cta-section{padding:72px 0} .cta-number{font-size:clamp(2.5rem,10vw,4rem)} .cta-text{font-size:clamp(1.1rem,4vw,1.5rem)} .cta-sub{font-size:0.88rem} .btn-white{padding:14px 32px;font-size:1rem} .modal{width:94%} .modal-header{padding:28px 24px 20px} .modal-header h2{font-size:1.25rem} .modal-body{padding:20px 16px 24px} .form-input{font-size:16px} .form-submit{font-size:0.95rem;padding:14px} .membership-card{width:100%;max-width:92vw;aspect-ratio:auto;box-shadow:0 3px 0 0 #E8A020,0 6px 0 0 #D4911A,0 8px 3px rgba(0,0,0,0.12),0 14px 28px rgba(0,0,0,0.2),inset 0 2px 0 rgba(255,255,255,0.7)} .card-inner{flex-direction:column;text-align:center;padding:20px 16px;height:auto} .card-left{padding-right:0;padding-bottom:12px} .card-divider{width:60%;height:2px;align-self:center;margin:0 auto 12px} .card-right{align-items:center} .card-logo img{height:28px} .card-nickname{font-size:1.2rem} .card-number{font-size:0.95rem} .card-meta{justify-content:center} .card-bottom-tag{font-size:0.6rem;padding:6px 12px} .card-share{flex-direction:column;gap:8px;align-items:stretch} .share-btn{justify-content:center;padding:12px 20px;font-size:0.82rem} .card-close{font-size:0.8rem} .card-deco-bl{bottom:44px} .contact-cat .cat-icon{font-size:1.6rem} .contact-cat h3{font-size:0.95rem} .footer{padding:60px 0 32px} .footer-grid{margin-bottom:40px} .section-label{font-size:0.78rem} .section-title{font-size:clamp(1.3rem,6vw,1.8rem)} .section-subtitle{font-size:0.88rem;margin-bottom:32px} .map-pin{font-size:0.78rem;padding:8px 14px} .mobile-menu{padding:80px 28px 28px;width:85%} .nav-logo{font-size:0.95rem} .nav-cta{padding:8px 16px;font-size:0.8rem} } @media(max-width:375px){ .container{padding:0 12px} .hero-hash{font-size:1.5rem} .hero-tagline{font-size:0.78rem} .stats-grid{gap:12px} .stat-item .stat-number{font-size:1.3rem} .stat-item .stat-label{font-size:0.68rem} .about-text h2{font-size:1.05rem} .about-text p{font-size:0.85rem;line-height:1.85} .section{padding:48px 0} .section-title{font-size:1.2rem} .section-subtitle{font-size:0.82rem;margin-bottom:28px} .appeal-card{padding:24px 16px} .appeal-card h3{font-size:1rem} .appeal-card p{font-size:0.82rem} .eco-step h3{font-size:0.92rem} .eco-step p{font-size:0.72rem} .issue-card{padding:24px 12px} .biz-card-header h3{font-size:0.95rem} .cta-number{font-size:2.2rem} .cta-text{font-size:1rem} .btn-white{padding:12px 24px;font-size:0.9rem} .membership-card{width:100%;max-width:92vw;box-shadow:0 2px 0 0 #E8A020,0 4px 0 0 #D4911A,0 6px 2px rgba(0,0,0,0.1),0 10px 20px rgba(0,0,0,0.18),inset 0 2px 0 rgba(255,255,255,0.7)} .card-logo img{height:22px} .card-number{font-size:0.85rem} .card-nickname{font-size:1rem} .modal-header{padding:24px 16px 16px} .modal-header h2{font-size:1.1rem} .modal-body{padding:16px 12px 20px} .form-group label{font-size:0.85rem} .president-name-plate h3{font-size:1.15rem} .president-bio{font-size:0.85rem;line-height:1.85} .contact-cat{padding:16px 12px} .contact-cat h3{font-size:0.88rem} .map-pin{font-size:0.72rem;padding:7px 12px} .footer{padding:48px 0 28px} .nav-logo{font-size:0.85rem} } .spinner{width:40px;height:40px;margin:20px auto;position:relative;display:none} .spinner.active{display:block} .spinner::after{content:'🍿';font-size:2rem;position:absolute;top:0;left:0;animation:spinPop 0.8s ease-in-out infinite} @keyframes spinPop{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}} .particle{position:absolute;pointer-events:none;font-size:1.5rem;z-index:1} .news-section{padding:48px 0;background:var(--white);scroll-margin-top:90px} .news-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;align-items:stretch} .news-item{padding:28px;border:1px solid #eadfcd;border-radius:16px;background:var(--cream)} .news-item h3{font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--dark);margin:12px 0} .news-tag{display:inline-block;padding:3px 12px;border-radius:30px;background:var(--yellow);font-size:.875rem;font-weight:700;color:var(--brown-dark)} .broadcast-times{list-style:none;margin-top:16px;font-weight:700;color:var(--brown-dark)} .broadcast-times li+li{margin-top:8px} .news-note{font-size:.875rem;color:var(--text-light);margin-top:12px} .hero-news-link{display:inline-block;margin-top:24px;color:var(--brown-dark);text-decoration:underline;text-underline-offset:4px;font-size:.875rem} #registerForm .form-group label{font-size:.875rem} #registerForm .form-hint{font-size:.875rem} #registerForm .form-input{min-height:52px} .form-error{color:#aa2424;font-size:.875rem;margin-bottom:12px} .card-nickname{overflow-wrap:anywhere} @media(max-width:700px){.news-grid{grid-template-columns:1fr}.news-section{padding:32px 0}.news-item{padding:24px 20px}} .skip-link{position:absolute;top:-100px;left:16px;padding:10px 18px;background:white;color:var(--text);z-index:2000}.skip-link:focus{top:12px}a:focus-visible,button:focus-visible,[role=button]:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.js .reveal{opacity:0;transform:translateY(40px)}.js .reveal.visible{opacity:1;transform:translateY(0)}.business-detail{display:inline-block;margin-top:20px;color:var(--orange-dark);text-decoration:underline;font-weight:700}.faq-section{background:var(--white)}.faq-section details{border-bottom:1px solid #e5daca;padding:20px 0}.faq-section summary{cursor:pointer;font-size:1.05rem;font-weight:700;color:var(--text)}.faq-section details p{margin:14px 0 0}.hero-bg{width:100%;height:100%}img[width][height]{max-width:100%}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.popcorn-float{display:none}}