:root{
  --bg:#E5E2E0;        /* page base */
  --surface:#825D4D; /* header/footer surface */
  --card:#FFFFFF;                    /* content cards on light base */
  --text:#443B1C;     /* primary text */
  --muted:#62593A; /* lighter text */
  --line:rgba(0,0,0,0.12);           /* separators on light */
  --shadow:rgba(0,0,0,0.08);         /* soft shadow */
  --shadow-strong:rgba(0,0,0,0.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:1120px;margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;background:var(--surface);border-bottom:1px solid rgba(255,255,255,.25);z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.2), 0 6px 10px var(--shadow);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  text-decoration:none;
  color:var(--text);
}
.brand-logo{
  width:32px;
  height:32px;
  display:block;
}
.brand-text{
  white-space:nowrap;
}

.nav{display:flex;gap:20px}
.nav a{color:#FFF;text-decoration:none;padding:8px 12px;border-radius:10px;transition:background .15s ease, opacity .15s ease}
.nav a:hover{background:rgba(255,255,255,.08);opacity:1}
.nav a.active{
  background:rgba(255,255,255,.18);
  font-weight:700;
}
.nav a.active.rent{
  border-color:rgba(255,255,255,.8);
  color:#FFF;
}

.rent{border:1px solid var(--line);padding:6px 10px;border-radius:10px;color:var(--text)}
.hamburger{display:none;background:transparent;border:0;font-size:24px}

@media (max-width: 900px){
  .nav{display:none;position:absolute;top:64px;right:0;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px;flex-direction:column;min-width:220px}
  .nav.open{display:flex}
  .hamburger{display:block}
}

.content{padding:32px 0}

.hero{border-bottom:1px solid rgba(0,0,0,.05);background:var(--bg);}
.hero-inner{padding:56px 0 40px}
.hero h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 10px}
.lead{color:var(--muted);max-width:720px;margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border:1px solid var(--text);border-radius:12px;text-decoration:none;color:var(--text);font-weight:600;transition:transform .12s ease, background .12s ease;background:transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px var(--shadow)}
.btn.ghost{background:transparent;border-color:var(--line);}

.features h2{margin-top:32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 3px 10px var(--shadow);}
.card h3{margin:4px 0 6px}
.text-link{color:var(--text);text-decoration:none;border-bottom:1px solid var(--text);padding-bottom:2px}
.text-link:hover{opacity:.8}

@media (max-width: 900px){
  .cards{grid-template-columns:1fr}
}

.band{border-top:1px solid rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.04);background:var(--bg)}
.band-inner{padding:16px 0}
.muted{color:var(--muted)}

.page-head h1{margin:0}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;margin:28px 0;align-items:start}
.aside .note{font-size:14px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.bullets{padding-left:18px}
.bullets li{margin:6px 0}
.table-wrap{margin:16px 0}
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{margin:10px 0;padding-left:28px;position:relative}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:22px;height:22px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info dl{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.info dt{color:var(--muted)}
.map.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}
.map-embed{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.map-embed iframe{width:100%;height:100%;border:0}

@media (max-width: 900px){
  .two-col, .info-grid{grid-template-columns:1fr}
}

.form label{display:block;margin-bottom:10px;font-weight:600}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;background:#FFFFFF;color:var(--text)}
.form button{margin-top:6px}

.site-footer{border-top:1px solid rgba(255,255,255,.25);padding:22px 0;background:var(--surface);box-shadow:0 -1px 0 rgba(255,255,255,.2), 0 -6px 12px var(--shadow);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;align-items:start}
.brand-mini{font-weight:700}
.links a{display:block;color:var(--text);text-decoration:none;margin:6px 0}
.links a:hover{text-decoration:underline}

@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
}

/* spacing rhythm */
.page-head{margin:10px 0 8px}
.container + .container{margin-top:0}
.two-col + .two-col{margin-top:24px}

/* Link normalization to avoid default blue/purple */
a{color:var(--text);text-decoration:none}
a:visited{color:var(--text)}
a:hover{opacity:.85;text-decoration:underline}
a:focus{outline:2px solid var(--focus);outline-offset:2px}

/* Dark warm theme link styles */
a{color:var(--text);text-decoration:none}
a:visited{color:var(--text)}
a:hover{opacity:.9;text-decoration:underline}

/* Center align the main body horizontally */
.content{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.content > .container{
  width:100%;
  max-width:960px;
}

.section-raise{box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.05) inset}
.container.section-raise{background:#FFF;border-radius:18px;padding:18px}
hr.div{border:0;height:1px;background:linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,.02));margin:20px 0}


.site-header, .site-header a, header a, footer, footer a, .site-footer, .site-footer a {
  color: #ffffff !important;
}



/* ===== Kono Kana v2.0 Brand Color Palette ===== */
:root {
  --kk-primary: #5A7183;
  --kk-dark: #2F3A42;
  --kk-secondary: #7D8F9C;
  --kk-accent: #D8C7A0;
  --kk-bg: #F4F4F4;
  --kk-text: #222222;
}

/* Global background & text */
body {
  background: var(--kk-bg);
  color: var(--kk-text);
}

/* Header */
.site-header, header.site-header {
  background: var(--kk-dark);
}
.site-header,
.site-header a,
.site-header nav a {
  color: #ffffff !important;
}

/* Hero: light background + text */
.hero,
.hero-section {
  background: var(--kk-bg);
  color: var(--kk-text);
}

/* Hero buttons */
.hero .btn-primary,
.hero .button-primary,
.hero-section .btn-primary,
.hero-section .button-primary {
  background: var(--kk-primary);
  color: #ffffff;
}
.hero .btn-secondary,
.hero .button-secondary,
.hero-section .btn-secondary,
.hero-section .button-secondary {
  background: var(--kk-accent);
  color: var(--kk-dark);
}

/* Generic buttons */
.btn-primary,
.button-primary {
  background: var(--kk-primary);
  color: #ffffff;
}
.btn-secondary,
.button-secondary {
  background: var(--kk-accent);
  color: var(--kk-dark);
}

/* Footer */
.site-footer,
footer.site-footer,
footer {
  background: var(--kk-dark);
  color: #ffffff;
}
.site-footer a,
footer a {
  color: #ffffff;
}

/* Card & section styling */
.section,
.section-light,
.card {
  background: #ffffff;
}

/* Links */
a {
  color: var(--kk-primary);
}
a:hover {
  color: var(--kk-secondary);
}


/* Footer text color override */
.site-footer, .site-footer a, .site-footer * {
    color: #f5f2e8 !important;
}


/* Mini FAQ on contact page */
.mini-faq {
  margin: 0;
  padding: 0;
}
.mini-faq dt {
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}
.mini-faq dd {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.6;
}


/* Mobile nav override to ensure visible links */
@media (max-width: 900px){
  .nav{
    background: var(--surface);
    border-radius: 0 0 0 16px;
    box-shadow: 0 8px 18px var(--shadow-strong);
  }
  .nav a{
    color: #FFF;
    padding: 10px 14px;
  }
}