/* =====================================
   POHaru Common Layout CSS
   header / footer / container 共通化
   ===================================== */

:root{
  --bg:#ffffff;
  --accent:#2f8f7f;
  --muted:#6b7280;
  --text:#0f172a;
  --maxw:1000px;
}

*{ box-sizing:border-box; }

.site-logo{
  max-width:360px;
  height:auto;
}

body{
  margin:0;
  font-family:'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:none; }

/* ===== container ===== */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px; /* ← 横位置の基準はここに一本化 */
}

/* ===== header ===== */
header{
  background:linear-gradient(180deg, rgba(47,143,127,0.08), rgba(255,255,255,0));
  padding:clamp(32px,6vw,56px) 0 40px;
}

.brand img{
  max-width:360px;
}

/* ===== main (共通最低限) ===== */
main{
  flex:1;
}

/* ===== footer ===== */
footer{
  padding:24px 0;
  font-size:14px;
  color:var(--muted);
}

footer .container{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.site-header,
.site-footer,
main {
  padding-left: 0;
  padding-right: 0;
}