/*
Theme Name: COC CAFE
Theme URI: 
Author: 
Description: COC CAFE（人形町・テイクアウト専門ドリンクスタンド）オープン準備中サイト用テーマ
Version: 1.2
*/

:root{
  --bg:#FAF6ED;
  --ink:#332619;
  --ink-soft:#6B5D4F;
  --amber:#A9702F;
  --amber-deep:#7C4E22;
  --clay:#C17F5B;
  --wood:#8B5E3C;
  --accent-red:#C1443B;
  --line:#E4DCCB;
  --white:#FFFFFF;
  --radius-blob: 62% 38% 55% 45% / 55% 45% 62% 38%;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Karla', sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.logo{font-family:'Fraunces', serif; font-weight:500; letter-spacing:0.01em;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.eyebrow{text-transform:uppercase; font-size:0.75rem; letter-spacing:0.18em; color:var(--amber-deep); font-weight:700; margin-bottom:12px; display:inline-block;}
.placeholder{background:#FFF3D6; border:1px dashed #C9A24B; color:#8A6A1F; padding:2px 8px; border-radius:6px; font-size:0.85em;}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(250,246,237,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1140px; margin:0 auto;}
.logo{font-size:1.4rem; color:var(--ink); display:flex; align-items:center; gap:8px;}
.logo-mark{width:34px; height:34px; border-radius:var(--radius-blob); background:var(--accent-red); flex-shrink:0;}
.logo-img{height:40px; width:auto; display:block;}
.nav-links{display:flex; gap:36px; list-style:none;}
.nav-links a{font-size:0.95rem; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{color:var(--ink); padding:6px 0; font-weight:700; font-size:0.9rem; white-space:nowrap; border-bottom:2px solid var(--accent-red);}
.nav-cta:hover{color:var(--accent-red);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2px; background:var(--ink);}
.mobile-menu{display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--bg);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:16px 24px; border-bottom:1px solid var(--line); font-weight:500;}

/* Hero */
.hero{padding:72px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.day-badge{display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--line); padding:8px 16px; border-radius:30px; font-size:0.82rem; font-weight:700; color:var(--amber-deep); margin-bottom:22px;}
.day-badge::before{content:"●"; color:var(--accent-red); font-size:0.6rem;}
.hero-copy p.lead{font-size:1.7rem; line-height:1.55; margin-bottom:20px;}
.hero-copy .desc{color:var(--ink-soft); max-width:460px; margin-bottom:32px; font-size:1.02rem;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-block; padding:12px 26px; border-radius:4px; font-weight:700; font-size:0.95rem; border:1.5px solid transparent; transition:all .2s ease;}
.btn-primary{background:none; color:var(--ink); border-color:var(--ink);}
.btn-primary:hover{background:var(--ink); color:var(--white);}
.btn-outline{border-color:var(--line); color:var(--ink-soft);}
.btn-outline:hover{border-color:var(--ink); color:var(--ink);}

/* Hero visual / slideshow */
.hero-visual{position:relative; aspect-ratio:1/1;}
.hero-visual img{
  border-radius:var(--radius-blob);
  aspect-ratio:1/1;
  object-fit:cover;
  box-shadow:0 20px 40px -24px rgba(51,38,28,0.3);
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero-slide.active{
  opacity:1;
  position:relative;
}
.wave{display:block; width:100%; height:auto; margin-top:40px;}

section{padding:80px 0;}
.section-head{max-width:600px; margin-bottom:48px;}
.section-head h2{font-size:2.1rem; font-weight:500;}

/* About */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.about-visual img{border-radius:24px 100px 24px 100px; aspect-ratio:4/5; object-fit:cover;}
.about-copy p{color:var(--ink-soft); margin-bottom:18px; font-size:1.02rem;}
.stat-row{display:flex; gap:36px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap;}
.stat-row div strong{display:block; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--amber-deep);}
.stat-row div span{font-size:0.85rem; color:var(--ink-soft);}

/* Menu */
.menu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.menu-card{background:none; border-top:1px solid var(--line); border-radius:0; overflow:hidden; transition:opacity .25s ease;}
.menu-card:hover{opacity:0.8;}
.menu-card img{aspect-ratio:4/3; object-fit:cover; border-radius:0;}
.menu-card-body{padding:18px 2px 0;}
.menu-tag{font-size:0.7rem; color:var(--clay); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.menu-card-body h3{font-size:1.08rem; margin:6px 0 6px; font-weight:500;}
.menu-price{color:var(--ink-soft); font-size:0.92rem;}
.menu-note{background:#F3EFE2; border-radius:4px; padding:22px 26px; margin-top:28px; font-size:0.92rem; color:var(--ink-soft);}
.menu-note strong{color:var(--ink);}

/* Access / Now */
.access{background:var(--white);}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; border-radius:0; overflow:visible; box-shadow:none;}
.info-map{background:var(--bg); min-height:300px; overflow:hidden;}
.info-panel{background:none; color:var(--ink); padding:0;}
.info-panel h3{font-size:1.4rem; margin-bottom:24px; font-weight:500; color:var(--amber-deep);}
.info-row{display:flex; gap:18px; padding:14px 0; border-bottom:1px solid var(--line);}
.info-row .label{width:96px; font-size:0.82rem; color:var(--ink-soft); flex-shrink:0;}
.info-row .val{font-size:0.95rem; color:var(--ink);}

/* Instagram */
.insta{text-align:center;}
.insta-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:36px;}
.insta-grid img{aspect-ratio:1/1; object-fit:cover; border-radius:4px;}

footer{background:var(--ink); color:#EAE3D6; padding:56px 0 28px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; margin-bottom:32px;}
footer .logo{color:var(--white);}
footer .logo-mark{background:var(--accent-red);}
.footer-desc{color:#B7AB99; font-size:0.88rem; max-width:360px;}
.footer-bottom{border-top:1px solid #4A3D30; padding-top:20px; font-size:0.82rem; color:#8C8071;}

@media (max-width:860px){
  .nav-links, .nav-cta{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-copy p.lead{font-size:1.35rem;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .about-grid .about-visual{order:-1;}
  .menu-grid{grid-template-columns:1fr 1fr;}
  .info-grid{grid-template-columns:1fr;}
  .insta-grid{grid-template-columns:repeat(3,1fr);}
  section{padding:56px 0;}
}
/* Scroll fade-in */
.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}