@import url("open-house-bar.css");

:root {
  --paper: #f6f8fa;
  --white: #fff;
  --ink: #16243d;
  --muted: #4e5a70;
  --navy: #16243d;
  --wine: #7b2233;
  --gold: #9c7c3c;
  --brass: #a6844e;
  --line: rgba(22, 36, 61, .14);
  --line-strong: rgba(22, 36, 61, .3);
  --serif: Newsreader, 'Noto Serif SC', Georgia, serif;
  --sans: Karla, 'Noto Sans SC', Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.72 var(--sans); }
a { color: var(--wine); }
.wrap { width: min(100% - 40px, 960px); margin: auto; }
.site-head-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: clamp(24px, 5vw, 56px); padding-right: clamp(24px, 5vw, 56px); }
.util { background: var(--navy); color: #fff; font-size: .8125rem; letter-spacing: .04em; }
.util .site-head-wrap { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.util-info a { color: #fff; text-decoration: none; font-weight: 600; }
.lang { display: flex; align-items: center; }
.lang button { border: 0; background: transparent; color: rgba(255, 255, 255, .66); padding: 6px 8px; cursor: pointer; font: 600 .75rem/1 var(--sans); letter-spacing: .08em; }
.lang button.on { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.head .site-head-wrap { min-height: 94px; padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { min-width: 0; display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.brand svg { width: 54px; height: 54px; flex: 0 0 auto; }
.brand > span { min-width: 0; }
.nm { font: 400 1.5rem/1 var(--serif); letter-spacing: -.015em; }
.sb { color: var(--wine); font: 600 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.service-line { display: block; margin-top: 5px; color: var(--muted); font: 500 .75rem/1.2 var(--sans); letter-spacing: .025em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border: 1px solid var(--wine); text-decoration: none; font: 600 .875rem/1 var(--sans); white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.btn--wine { background: var(--wine); color: #fff; }
.btn--wine:hover { background: #651a2a; }
.hero { padding: 68px 0 52px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--wine); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(2.7rem, 7vw, 4.8rem); line-height: 1; margin: 15px 0 18px; letter-spacing: -.03em; }
h2 { font-size: 1.65rem; line-height: 1.2; margin: 42px 0 12px; }
.lede, .updated { color: var(--muted); }
main .wrap { background: var(--white); margin-block: 42px; padding: clamp(28px, 6vw, 64px); border: 1px solid var(--line); }
p, li { color: var(--muted); }
li + li { margin-top: 8px; }
.notice { border-left: 3px solid var(--gold); background: #f3f0e9; padding: 16px 20px; margin: 28px 0; }
.notice p { margin: 0; }
.download { display: inline-block; margin-top: 22px; background: var(--wine); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px; }
.square-list { list-style: none; padding: 0; }
.square-list li { position: relative; padding-left: 24px; }
.square-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; background: #128291; }
.procedure { display: grid; gap: 14px; margin: 26px 0; }
.procedure div { border: 1px solid var(--line); background: #f8fafb; padding: 18px 20px; }
.procedure strong { display: block; color: var(--ink); font-size: 1.05rem; }
.procedure span { color: var(--muted); }
footer { background: var(--navy); color: #c7ced9; padding: 30px 0; font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: #fff; margin-right: 16px; }

@media (max-width: 720px) {
  .head .site-head-wrap { min-height: 78px; padding-top: 16px; padding-bottom: 16px; gap: 18px; }
  .brand svg { width: 42px; height: 42px; }
  .nm { font-size: 1.25rem; }
}

@media (max-width: 620px) {
  .hero { padding: 50px 0 38px; }
  main .wrap { width: 100%; margin: 0; border-width: 0; padding: 30px 20px 50px; }
}

@media (max-width: 560px) {
  .brand { gap: 10px; }
  .service-line { max-width: 135px; font-size: .6875rem; }
  .legal-home { min-height: 38px; padding: 9px 12px; font-size: .8125rem; }
}

@media (max-width: 400px) {
  .brand .sb { display: none; }
}