@charset "utf-8";
/* CSS Document */

    :root{
      --brand-red:#BF5354; /* 既存メニューの赤に近い */
      --navy:#1F2A44;      /* 本文メイン */
      --navy-soft:#2C3E66; /* 補助テキスト */
      --navy-accent:#213A7A; /* リンク・ボタン */
      --bg:#fff;
      --ink:#1a1a1a;
      --muted:#f6f7fb;
      --radius:0px;
      --shadow:0 6px 24px rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color:var(--navy); background:var(--bg)}
    a{color:var(--navy-accent); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Header */
    .nav{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eceff5}
    .nav-inner{max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--brand-red); letter-spacing:.04em}
    .brand img{height:36px; width:auto}
    .links{display:flex; gap:18px; font-weight:600}

    /* Hero */
    .hero{max-width:1000px; margin:0 auto; padding:48px 16px 28px; display:grid; grid-template-columns:1.15fr .85fr; gap:24px}
    .hero-card{background:#fff; padding:28px; border-radius:0; box-shadow:var(--shadow); border:2px solid var(--brand-red);} 
    .kicker{color:var(--brand-red); font-weight:700; letter-spacing:.1em; font-size:.9rem}
    .hero h1{margin:.3em 0 .4em; font-size:clamp(28px,4.5vw,42px); line-height:1.15; color:var(--navy)}
    .hero p{color:var(--navy-soft); margin:0 0 1rem}
    .pill{display:inline-block; background:var(--brand-red); color:#fff; padding:10px 14px; border-radius:999px; font-weight:700}
    .hero-visual{display:flex; align-items:center; justify-content:center}
    .logo{height:200px; width:200px; border-radius:100%; display:grid; place-items:center; font-weight:800}

    /* Sections */
    section{max-width:1000px; margin:0 auto; padding:36px 16px}
    .section-title{font-size:clamp(22px,3.2vw,30px); margin:0 0 14px; color:var(--navy)}
    .card{background:#fff; border:1px solid #eceff5; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}

    /* Beans */
    .beans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .bean h3{margin:.2em 0 .4em; font-size:1.1rem}
    .flags{font-size:1.1rem}
    .tag{display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px; background:#EEF3FF; color:var(--navy-accent); font-weight:700}
    .bean p{color:var(--navy-soft); margin:.4em 0 0}

    /* Menu */
    .menu-grid{display:grid; grid-template-columns:1fr 140px; gap:8px; align-items:center}
    .menu-grid div{padding:10px 12px}
    .menu-grid div:nth-child(odd){border-bottom:1px dashed #e7eaf2}
    .menu-price{justify-self:end; font-weight:800; color:var(--navy)}

    /* Menu (robust rows with dashed separators) */
    .menu-list{display:flex; flex-direction:column; gap:0}
    .menu-row{display:grid; grid-template-columns:1fr 140px; align-items:center; padding:10px 12px; border-bottom:1px dashed #e7eaf2}
    .menu-row:last-child{border-bottom:0}
    .menu-note{grid-column:1/-1; color:var(--navy-soft); font-size:.92rem; padding:8px 12px 12px 48px;}
    @media (max-width:640px){
      .menu-row{grid-template-columns:1fr auto}
    }

    /* Access */
    .access-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
    iframe{width:100%; height:260px; border:0; border-radius:var(--radius); } .map-wrap{position:relative} .map-tint{position:absolute; inset:0; background:linear-gradient(rgba(191,83,84,0.06), rgba(191,83,84,0.06)); pointer-events:none} @media (prefers-color-scheme:dark){ .map-tint{background:linear-gradient(rgba(191,83,84,0.10), rgba(191,83,84,0.10));} }

    /* CTA/Footer */
    .cta{background:var(--muted); border-radius:var(--radius); padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
    .btn{display:inline-block; background:var(--navy-accent); color:#fff; font-weight:700; padding:12px 16px; border-radius:0}
    .btn.alt{background:var(--brand-red)}
    footer{padding:28px 16px 48px; text-align:center; color:#6b7a97}

    /* Responsive */
    @media (max-width:900px){
      .hero{grid-template-columns:1fr; text-align:center}
      .hero-visual{order:-1}
      .beans{grid-template-columns:1fr}
      .access-grid{grid-template-columns:1fr}
    }
      /* Mobile-first tweaks */
    @media (max-width:640px){
      .nav-inner{padding:8px 12px; gap:8px; flex-wrap:wrap}
      .links{gap:12px; font-size:.92rem; width:100%; display:flex; justify-content:space-between}
      .hero{padding:28px 12px 16px}
      .hero h1{font-size:clamp(22px,8vw,30px)}
      .hero p{font-size:.95rem; line-height:1.7}
      .logo{height:120px; width:120px}
      section{padding:24px 12px}
      .beans{grid-template-columns:1fr}
      .menu-grid{grid-template-columns:1fr auto}
      .menu-grid div{padding:10px 8px}
      .menu-price{font-size:1rem}
      .cta{flex-direction:column; align-items:stretch}
      .btn{width:100%; text-align:center}
      iframe{height:220px}
    }
    @media (max-width:420px){
      .links{gap:10px; font-size:.88rem}
      .pill{padding:8px 12px; font-size:.9rem}
      .section-title{font-size:1.25rem}
    }
      /* Fixed bottom nav (mobile-friendly) */
    body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
    .bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid #e5e8f1; display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); box-shadow:0 -6px 18px rgba(0,0,0,.06)}
    .bn-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-weight:700; color:var(--navy); padding:8px 6px; border-radius:8px; text-decoration:none}
    .bn-item:hover{background:#f5f7fb}
    .bn-item span{font-size:.85rem}
      /* Hamburger menu */
    .hamburger{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
    .hamburger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.2s}
    @media (max-width:900px){
      .hamburger{display:block}
      .nav-inner{align-items:flex-start}
      .links{display:none; width:100%; padding:8px 0; border-top:1px solid #eceff5}
      .links.open{display:flex; flex-direction:column; gap:10px}
    }

/* Menu design */
.br {display: none;}
@media (max-width:640px){
	.br {display:initial;}
	.br-txt {padding-left:1em;} 
}

.atte {float: left;top:-20px;}
p.atte {padding-left:2em;font-size:clamp(14px,2.2vw,22px);}
.cl {clear: both;}