*{box-sizing:border-box}
:root{
  --cream:#fffdf8;
  --sand:#fff8ed;
  --coral:#df6f53;
  --sunset:#ef9363;
  --ocean:#2e777b;
  --deep:#173d42;
  --line:#eadbc9;
  --muted:#6f8185;
}
html{background:var(--sand)}
body{
  margin:0;
  min-height:100vh;
  color:var(--deep);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  background:linear-gradient(180deg,#fffaf2,#f8efe3);
}
.site-header{
  padding:16px 20px;
  background:rgba(255,253,248,.95);
  border-bottom:1px solid var(--line);
}
.brand{
  width:min(1100px,100%);
  margin:auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}
.brand-mark{
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:14px;
  color:white;
  background:linear-gradient(135deg,var(--ocean),var(--deep));
  font-weight:900;
}
.brand strong{display:block;font-size:21px}
.brand small{display:block;color:var(--coral);font-weight:900;letter-spacing:.2em}
.page-shell{width:min(1100px,calc(100% - 24px));margin:28px auto 60px}
.card{
  background:rgba(255,253,248,.97);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 18px 55px rgba(76,52,29,.08);
}
.site-footer{padding:24px;text-align:center;color:#849395;font-size:12px}

.brand-mark-logo {
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.site-header .brand {
    gap: 0px;
}