/* ============================================================
   LACUP ブランドサイト  style.css
   配色やサイズはこのファイルの :root を編集してください
   ============================================================ */
:root{
  --cream:#faf7f0;
  --cream-2:#f3ede0;
  --coffee:#3a2c1e;
  --coffee-light:#6b5741;
  --gold:#c09232;
  --gold-light:#e3c67a;
  --white:#ffffff;
  --line:#e5dcc9;
  --radius:14px;
  --shadow:0 10px 30px rgba(58,44,30,.10);
  --font-serif:"Shippori Mincho","Noto Serif JP",serif;
  --font-sans:"Noto Sans JP",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-sans);color:var(--coffee);background:var(--cream);line-height:1.9;font-size:15.5px;letter-spacing:.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.inner{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,247,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-in{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:44px;width:auto}
.brand-name{font-family:var(--font-serif);font-weight:700;font-size:1.25rem;letter-spacing:.12em}
.brand-name small{display:block;font-size:.6rem;letter-spacing:.3em;color:var(--coffee-light);font-family:var(--font-sans)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-size:.86rem;letter-spacing:.08em;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav a:hover::after{width:100%}
.nav .btn-contact{background:var(--coffee);color:#fff;padding:9px 20px;border-radius:999px;font-size:.84rem}
.nav .btn-contact:hover{background:var(--gold)}
.nav .btn-contact::after{display:none}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--coffee);cursor:pointer}

/* ---------- hero ---------- */
.hero{padding:150px 0 90px;background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);overflow:hidden}
.hero-in{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero h1{font-family:var(--font-serif);font-size:clamp(1.9rem,4.2vw,3rem);font-weight:700;line-height:1.5;letter-spacing:.08em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{margin-top:24px;color:var(--coffee-light);font-size:1rem}
.hero-tags{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.hero-tags span{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 16px;font-size:.8rem;letter-spacing:.06em;background:#fff}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 34px;border-radius:999px;font-size:.92rem;letter-spacing:.1em;transition:.25s;text-align:center}
.btn-primary{background:var(--coffee);color:#fff}
.btn-primary:hover{background:var(--gold)}
.btn-ghost{border:1.5px solid var(--coffee);color:var(--coffee)}
.btn-ghost:hover{background:var(--coffee);color:#fff}
.hero-img{position:relative}
.hero-img .main{border-radius:50%;box-shadow:var(--shadow);aspect-ratio:1/1;object-fit:cover;width:100%}
.hero-img .sub{position:absolute;width:42%;border-radius:50%;aspect-ratio:1/1;object-fit:cover;border:6px solid var(--cream);box-shadow:var(--shadow);bottom:-8%;left:-10%}

/* ---------- section base ---------- */
section{padding:90px 0}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head .en{font-size:.78rem;letter-spacing:.35em;color:var(--gold);font-weight:700}
.sec-head h2{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:.12em;margin-top:8px}
.sec-head p{margin-top:14px;color:var(--coffee-light);font-size:.92rem}

/* ---------- about ---------- */
.about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.about-card{background:var(--cream);border-radius:var(--radius);padding:38px 30px;text-align:center;border:1px solid var(--line)}
.about-card .num{font-family:var(--font-serif);font-size:2rem;color:var(--gold);font-weight:700}
.about-card h3{font-size:1.05rem;margin:10px 0 12px;letter-spacing:.08em}
.about-card p{font-size:.88rem;color:var(--coffee-light);text-align:left}

/* ---------- lineup ---------- */
.lineup{background:var(--cream-2)}
.lineup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.card:hover{transform:translateY(-6px)}
.card .thumb{height:250px;background:#f7f4ec;display:flex;align-items:center;justify-content:center;padding:18px}
.card .thumb img{max-height:100%;width:auto;object-fit:contain}
.card .body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card .cat{font-size:.72rem;letter-spacing:.2em;color:var(--gold);font-weight:700}
.card h3{font-family:var(--font-serif);font-size:1.3rem;margin:6px 0 10px;letter-spacing:.06em}
.card p{font-size:.86rem;color:var(--coffee-light);flex:1}
.card .more{margin-top:18px;color:var(--gold);font-size:.86rem;letter-spacing:.08em}

/* ---------- product detail ---------- */
.product{border-top:1px solid var(--line)}
.product:nth-of-type(even){background:var(--white)}
.prod-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.prod-grid.rev{grid-template-columns:1.1fr .9fr}
.prod-photo{position:sticky;top:100px}
.prod-photo .main{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;justify-content:center;box-shadow:var(--shadow)}
.prod-photo .main img{max-height:430px;width:auto;object-fit:contain}
.prod-photo .sub{margin-top:16px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.prod-label{display:inline-block;background:var(--gold);color:#fff;font-size:.72rem;letter-spacing:.2em;padding:4px 14px;border-radius:4px;font-weight:700}
.prod h3{font-family:var(--font-serif);font-size:1.9rem;margin:14px 0 4px;letter-spacing:.08em}
.prod .sub-name{color:var(--coffee-light);font-size:.9rem;letter-spacing:.06em}
.prod .copy{font-family:var(--font-serif);font-size:1.15rem;color:var(--gold);margin:22px 0 12px;font-weight:700;letter-spacing:.06em}
.prod .desc{font-size:.92rem;color:var(--coffee-light)}
.feature-list{margin:26px 0;display:grid;gap:12px}
.feature-list li{list-style:none;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-size:.88rem;display:flex;gap:12px;align-items:baseline}
.feature-list li::before{content:"◆";color:var(--gold);font-size:.7rem;flex-shrink:0}
.spec{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:8px}
.spec caption{text-align:left;font-weight:700;letter-spacing:.15em;font-size:.8rem;color:var(--gold);margin-bottom:10px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.spec th{width:34%;color:var(--coffee-light);font-weight:500;white-space:nowrap}
.spec .note{font-size:.76rem;color:var(--coffee-light)}
.dl-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:var(--coffee);color:#fff;padding:13px 30px;border-radius:999px;font-size:.88rem;letter-spacing:.08em;transition:.25s}
.dl-btn:hover{background:var(--gold)}
.dl-btn svg{width:16px;height:16px;fill:#fff}

/* ---------- gallery ---------- */
.gallery{background:var(--cream-2)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery-grid figure{border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:1/1;box-shadow:var(--shadow)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-grid figure:hover img{transform:scale(1.06)}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(35,25,15,.75));color:#fff;font-size:.76rem;padding:26px 12px 10px;letter-spacing:.05em}
.gallery-note{text-align:center;margin-top:22px;font-size:.78rem;color:var(--coffee-light)}

/* ---------- scenes ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.scene{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.scene img{height:210px;width:100%;object-fit:cover}
.scene .body{padding:22px 24px 26px}
.scene h3{font-size:1rem;letter-spacing:.08em;margin-bottom:8px;font-family:var(--font-serif)}
.scene p{font-size:.85rem;color:var(--coffee-light)}

/* ---------- works ---------- */
.works{background:var(--cream-2);border-top:1px solid var(--line)}
.works-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto}
.works-list span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 22px;font-size:.86rem;letter-spacing:.04em;box-shadow:0 3px 10px rgba(58,44,30,.06)}
.works-note{text-align:center;margin-top:26px;font-size:.76rem;color:var(--coffee-light)}

/* ---------- downloads ---------- */
.downloads{background:var(--white)}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.dl-card{border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;text-align:center;background:var(--cream);transition:.25s}
.dl-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.dl-card .icon{font-size:2rem;color:var(--gold)}
.dl-card h3{font-family:var(--font-serif);font-size:1.1rem;margin:12px 0 6px;letter-spacing:.08em}
.dl-card p{font-size:.8rem;color:var(--coffee-light);margin-bottom:20px}

/* ---------- company ---------- */
.company table{width:100%;max-width:720px;margin:0 auto;border-collapse:collapse;font-size:.92rem}
.company th,.company td{border-bottom:1px solid var(--line);padding:16px 12px;text-align:left}
.company th{width:30%;color:var(--coffee-light);font-weight:500;letter-spacing:.1em}

/* ---------- contact ---------- */
.contact{background:var(--coffee);color:var(--cream)}
.contact .sec-head h2,.contact .sec-head p{color:var(--cream)}
.contact-lead{text-align:center;font-size:.92rem;margin-bottom:40px;color:#d8cdbd}
.form{max-width:680px;margin:0 auto;display:grid;gap:20px}
.form label{display:block;font-size:.84rem;letter-spacing:.1em;margin-bottom:8px}
.form label .req{color:var(--gold-light);font-size:.72rem;margin-left:8px}
.form input,.form select,.form textarea{width:100%;padding:13px 16px;border-radius:8px;border:1px solid #5d4a35;background:#4a392a;color:#fff;font-size:.95rem;font-family:var(--font-sans)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.form textarea{min-height:150px;resize:vertical}
.form .submit{margin-top:10px;text-align:center}
.form button{background:var(--gold);color:#fff;border:none;padding:16px 60px;border-radius:999px;font-size:1rem;letter-spacing:.15em;cursor:pointer;transition:.25s;font-family:var(--font-sans)}
.form button:hover{background:var(--gold-light);color:var(--coffee)}
.contact-tel{text-align:center;margin-top:44px;font-size:.9rem;color:#d8cdbd}
.contact-tel strong{font-size:1.5rem;color:#fff;font-family:var(--font-serif);letter-spacing:.08em}

/* ---------- footer ---------- */
.footer{background:#2b2114;color:#b9ab97;padding:46px 0 30px;font-size:.8rem}
.footer-in{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer .brand img{height:36px}
.footer .brand-name{color:#f0e8da;font-size:1rem}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a:hover{color:#fff}
.copyright{text-align:center;margin-top:26px;font-size:.72rem;color:#8a7c66}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-in,.prod-grid,.prod-grid.rev{grid-template-columns:1fr}
  .prod-photo{position:static}
  .about-grid,.lineup-grid,.scene-grid,.dl-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .nav{position:fixed;top:68px;right:0;background:var(--cream);flex-direction:column;width:220px;padding:24px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(100%);transition:.3s;z-index:99}
  .nav.open{transform:none}
  .menu-toggle{display:block}
  .hero{padding-top:110px}
  .hero-img .sub{display:none}
}