/*
Theme Name: Green Bell
Theme URI: https://green-b.co.jp/
Author: Green Bell Co., Ltd.
Description: 株式会社グリーンベル コーポレートサイト用テーマ
Version: 2.0
Text Domain: greenbell
*/

:root{
  --ink:#12241c; --paper:#f6f7f1;
  --brand:#2e7d4f; --brand-dark:#1b5c37; --brand-light:#cfe8d8;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
html,body{ background:var(--paper); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

/* ---- header ---- */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:1.4rem 5vw; transition:background .4s ease, padding .4s ease, box-shadow .4s ease; }
.site-header.solid{ background:rgba(246,247,241,.92); backdrop-filter:blur(6px); padding:.9rem 5vw; box-shadow:0 1px 0 rgba(0,0,0,.06); }
.logo-link{ position:relative; display:block; height:76px; transition:height .4s ease; }
.logo{ position:absolute; top:0; left:0; height:76px; width:auto; display:block; transition:opacity .4s ease, height .4s ease; }
.logo-light{ filter:drop-shadow(0 1px 4px rgba(0,0,0,.35)); opacity:1; }
.logo-dark{ opacity:0; }
.site-header.solid .logo-light{ opacity:0; }
.site-header.solid .logo-dark{ opacity:1; }

/* ---- menu button: black rounded-square -> cream circle with X (yuppa.co.jp style) ---- */
.menu-btn{ position:fixed; top:1.6rem; right:5vw; width:48px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:#181818; border:none; border-radius:14px; cursor:pointer; z-index:60; transition:border-radius .3s ease, background .3s ease; }
.menu-btn span{ display:block; width:20px; height:2px; background:#fff; transition:transform .35s ease, opacity .25s ease, background .3s ease; }
.menu-btn.open{ background:#f4ead9; border-radius:50%; }
.menu-btn.open span:nth-child(1){ background:#181818; transform:translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ background:#181818; transform:translateY(-7px) rotate(-45deg); }

/* ---- compact rounded dropdown panel, anchored top-right ---- */
.nav-overlay{ position:fixed; top:1.6rem; right:5vw; z-index:45; width:min(340px,84vw); background:#181818; border-radius:28px; padding:4.2rem 2.1rem 2rem; transform-origin:top right; transform:scale(.85); opacity:0; pointer-events:none; box-shadow:0 30px 70px rgba(0,0,0,.35); transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease; }
.nav-overlay.open{ transform:scale(1); opacity:1; pointer-events:auto; }
.nav-close{ position:absolute; top:1.2rem; right:1.2rem; width:34px; height:34px; border-radius:50%; background:#f4ead9; border:none; color:#181818; font-size:.95rem; font-weight:700; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-overlay nav{ display:flex; flex-direction:column; gap:.95rem; }
.nav-overlay nav a,
.nav-overlay .nav-sub a{ position:relative; display:inline-flex; align-items:center; width:fit-content; font-size:1.08rem; font-weight:800; color:#fff; opacity:.85; transition:opacity .2s ease, color .2s ease; }
.nav-overlay nav a::after,
.nav-overlay .nav-sub a::after{ content:''; position:absolute; left:1.1em; right:0; bottom:-.15em; height:1px; background:currentColor; opacity:.4; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.nav-overlay nav a:hover,
.nav-overlay .nav-sub a:hover{ opacity:1; color:var(--brand-light); }
.nav-overlay nav a:hover::after,
.nav-overlay .nav-sub a:hover::after{ transform:scaleX(1); }
.nav-overlay nav a .nav-arrow,
.nav-overlay .nav-sub a .nav-arrow{ display:inline-block; width:1.1em; opacity:.5; transform:translateX(0); transition:opacity .25s ease, transform .25s ease; }
.nav-overlay nav a:hover .nav-arrow,
.nav-overlay .nav-sub a:hover .nav-arrow{ opacity:1; transform:translateX(.2em); }
.nav-overlay .nav-sub{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.15); }
.nav-overlay .nav-sub a{ color:var(--brand-light); }

@media(max-width:900px){
  .logo{ height:44px; }
}