/*
Theme Name: ETUDE WP Theme
Theme URI: https://example.com/
Author: ETUDE JAPAN
Author URI: https://example.com/
Description: Custom theme to mirror existing HTML and provide a GUI via WordPress.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Text Domain: etude
*/

:root {
    --brand-pink: #FFB6C1;
    --rose-pink: #FF5C8A;
    --pure-white: #FFFFFF;
    --off-white: #FFF8F9;
    --dark-gray: #333333;
    --medium-gray: #666666;
    --light-gray: #999999;
    --pale-pink: #FFE6EB;
    --light-border: #E5E5E5;
    --soft-shadow: rgba(0, 0, 0, 0.08);
    --pink-shadow: rgba(255, 182, 193, 0.3);
    --gradient-pink: linear-gradient(135deg, #FFB6C1 0%, #FF5C8A 100%);
    --gradient-soft: linear-gradient(135deg, #FFF8F9 0%, #FFE6EB 100%);
}

/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; overflow-x:hidden; }
body { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
       background-color: var(--pure-white); color: var(--dark-gray); line-height:1.6; font-size:16px; letter-spacing:0.3px; }

a { text-decoration:none; }
a:hover { text-decoration:none; }

/* Header */
.wa-header { background:var(--pure-white); box-shadow:0 2px 8px var(--soft-shadow); position:fixed; width:100%; top:0; z-index:1000; transition:all .3s ease; }
.header-main { display:flex; justify-content:space-between; align-items:center; padding:16px 40px; max-width:1400px; margin:0 auto; }
.logo img { height:64px; width:auto; max-width:240px; object-fit:contain; }

.main-nav { display:flex; gap:30px; align-items:center; }
.nav-item { position:relative; cursor:pointer; font-size:15px; font-weight:500; color:var(--dark-gray); padding:6px 0; }
.nav-item:hover { color:var(--rose-pink); }
.nav-item::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; background:var(--rose-pink); transition:all .3s ease; transform:translateX(-50%); }
.nav-item:hover::after { width:100%; }

/* Hero */
.hero-section { margin-top:96px; position:relative; height:min(60vh, 600px); background:var(--gradient-soft); overflow:hidden; }
.slider-container, .slides-wrapper { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.slide { position:absolute; width:100%; height:100%; opacity:0; transition:opacity 1s ease-in-out; display:flex; align-items:center; justify-content:center; }
.slide.active { opacity:1; }
.slide-image { width:auto; height:100%; max-width:100%; object-fit:contain; display:block; }

.slide-controls { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:3; padding:10px 20px; background:rgba(255,255,255,.9); border-radius:20px; backdrop-filter:blur(10px); }
.slide-dot { width:10px; height:10px; border-radius:50%; background:var(--light-gray); border:none; }
.slide-dot.active { background:var(--rose-pink); transform:scale(1.3); }

/* Grids */
.products-container, .news-container, .footer-main { max-width:1400px; margin:0 auto; padding:0 clamp(16px, 4vw, 40px); }
.ranking-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(clamp(160px, 20vw, 200px), 1fr)); gap:clamp(16px, 3vw, 20px); }
.ranking-card { position:relative; background:var(--pure-white); border-radius:12px; text-align:center; transition:.3s; border:1px solid var(--light-border); overflow:hidden; }
.ranking-number { position:absolute; top:8px; left:8px; width:clamp(28px, 5vw, 32px); height:clamp(28px, 5vw, 32px); background:var(--gradient-pink); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:clamp(12px, 2.2vw, 14px); box-shadow:0 2px 8px var(--pink-shadow); z-index:2; }
.product-image-wrapper { position:relative; width:100%; padding-bottom:100%; overflow:hidden; background:var(--off-white); }
.product-image { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.ranking-card:hover .product-image { transform:scale(1.05); }
.product-info { padding:clamp(12px, 2.5vw, 16px) clamp(10px, 2vw, 14px); }
.product-name { font-size:clamp(11px, 2.2vw, 13px); margin-bottom:6px; color:var(--dark-gray); font-weight:500; line-height:1.4; }
.product-price { font-size:clamp(14px, 2.8vw, 18px); font-weight:700; color:var(--rose-pink); }

/* Footer */
#g-footer { background:var(--gradient-soft); margin-top:clamp(60px, 10vw, 100px); padding-top:clamp(40px, 6vw, 60px); }
.footer-sections { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:clamp(30px, 5vw, 40px); margin-bottom:clamp(40px, 6vw, 60px); }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:10px; }
.footer-links a { color:var(--medium-gray); font-size:14px; }
.footer-bottom { background:#fff; padding:clamp(20px, 3vw, 30px); text-align:center; }
.footer-legal { display:flex; justify-content:center; gap:clamp(10px, 2vw, 20px); flex-wrap:wrap; margin-bottom:16px; }

/* Utilities */
.section-title { text-align:center; margin: clamp(60px, 10vw, 80px) 0 clamp(40px, 6vw, 50px); }
.section-title h2 { font-size: clamp(24px, 5vw, 32px); font-weight:600; margin-bottom:8px; }
.section-subtitle { font-size: clamp(12px, 2vw, 14px); color: var(--medium-gray); letter-spacing: 1px; }

@keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
.fade-in { animation: fadeIn .6s ease forwards; }