@charset "UTF-8";
/* ==========================================================
   内野屋不動産有限会社  共通スタイル
   レイアウト方針：白い紙に紺の暖簾と朱の角印。左揃え・明朝の見出し・
   読みやすいUDゴシックの本文。装飾は暖簾（トップ）に集中させ、ほかは静かに。
   ========================================================== */
:root {
  /* 色 */
  --kon: #1f2f63;          /* 紺：暖簾・見出し・フッター */
  --kon-deep: #152049;     /* 濃紺：押下・帯 */
  --sumi: #1e2338;         /* 墨：本文 */
  --sumi-soft: #4a5070;    /* 薄墨：補足文 */
  --shu: #d9480f;          /* 朱：角印・アクセント（大きい要素） */
  --shu-deep: #b33a08;     /* 濃い朱：ボタン・リンク（白文字 4.5:1 以上） */
  --shu-wash: #fdf0e8;     /* 朱の薄色：注意書き */
  --kami: #ffffff;         /* 紙 */
  --gofun: #f3f4f8;        /* 胡粉：帯の背景 */
  --line: #d8dbe6;         /* 罫 */
  --wood: #5b3f26;         /* 暖簾の竿 */
  --on-kon: #ffffff;
  --on-kon-soft: #c9cfe4;

  /* 書体 */
  --f-min: "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --f-sans: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* 文字サイズ（約1.25倍刻み） */
  --fs-s: 0.875rem;
  --fs-b: 1.0625rem;
  --fs-m: 1.25rem;
  --fs-l: 1.5625rem;
  --fs-xl: 1.9375rem;
  --fs-xxl: 2.4375rem;

  --wrap: 1120px;
  --text: 40em;
  --r: 6px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--kami);
  color: var(--sumi);
  font-family: var(--f-sans);
  font-size: var(--fs-b);
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 0;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--kami);
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--shu-deep); text-underline-offset: 0.2em; }
a:hover { color: var(--kon); }
:focus-visible { outline: 3px solid var(--shu); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { word-break: auto-phrase; font-family: var(--f-min); font-weight: 700; color: var(--kon); line-height: 1.5; letter-spacing: 0.04em; text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--kon); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 32px); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.flow > * + * { margin-top: 1em; }
.num { font-variant-numeric: tabular-nums; }
.note { font-size: var(--fs-s); color: var(--sumi-soft); line-height: 1.8; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0.6em 1.4em; border-radius: var(--r);
  font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-b); line-height: 1.4;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--shu-deep); color: #fff; }
.btn-primary:hover { background: #8f2e06; color: #fff; }
.btn-ghost { background: var(--kami); color: var(--kon); border-color: var(--kon); }
.btn-ghost:hover { background: var(--kon); color: #fff; }
.btn-light { background: #fff; color: var(--kon); }
.btn-light:hover { background: var(--gofun); color: var(--kon); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--kami); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kon); min-width: 0; }
.brand img { width: 46px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-sub { font-size: 0.6875rem; color: var(--sumi-soft); letter-spacing: 0.06em; }
.brand-main { font-family: var(--f-min); font-weight: 800; font-size: 1.3125rem; letter-spacing: 0.08em; color: var(--kon); white-space: nowrap; }
.brand-main small { font-size: 0.6em; font-weight: 700; margin-left: 0.3em; letter-spacing: 0.05em; }
.hd-contact { display: none; }
.menu-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 52px; height: 52px; border: 1px solid var(--line); border-radius: var(--r); background: var(--kami);
  color: var(--kon); font: 700 0.625rem/1 var(--f-sans); cursor: pointer; flex: none; white-space: nowrap; letter-spacing: 0;
}
.menu-btn .bars { position: relative; width: 22px; height: 14px; }
.menu-btn .bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu-btn .bars span:nth-child(1) { top: 0; }
.menu-btn .bars span:nth-child(2) { top: 6px; }
.menu-btn .bars span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.gnav { display: none; }
.gnav.is-open {
  display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  top: calc(81px + env(safe-area-inset-top, 0px)); background: var(--kami); overflow-y: auto;
  padding: 8px var(--gutter-r) calc(96px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
}
.gnav ul { list-style: none; }
.gnav.is-open ul.wrap { padding-left: 0; padding-right: 0; }
.gnav li a {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 4px;
  border-bottom: 1px solid var(--line); color: var(--kon); text-decoration: none; font-weight: 700; font-size: var(--fs-m);
}
.gnav li a[aria-current="page"] { color: var(--shu-deep); }
.gnav .gnav-tel { margin-top: 20px; padding: 16px; background: var(--gofun); border-radius: var(--r); }
.gnav .gnav-tel a { font-size: var(--fs-xl); font-weight: 700; color: var(--kon); text-decoration: none; }

@media (min-width: 1024px) {
  .site-header { position: static; }
  .hd-top { min-height: 88px; }
  .brand img { width: 58px; }
  .brand-main { font-size: 1.625rem; }
  .brand-sub { font-size: 0.75rem; }
  .menu-btn { display: none; }
  .hd-contact { display: flex; align-items: center; gap: 20px; }
  .hd-tel { display: grid; text-decoration: none; color: var(--kon); line-height: 1.3; text-align: right; }
  .hd-tel-label { font-size: 0.75rem; color: var(--sumi-soft); }
  .hd-tel-num { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
  .hd-tel-note { font-size: 0.75rem; color: var(--sumi-soft); }
  .gnav, .gnav.is-open {
    display: block; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; inset: auto;
    background: var(--kon); padding: 0; overflow: visible;
  }
  .gnav ul { display: flex; justify-content: space-between; }
  .gnav li { flex: 1 1 auto; }
  .gnav li a {
    justify-content: center; border: 0; padding: 14px 8px; font-size: 0.9375rem; color: var(--on-kon);
    font-weight: 700; letter-spacing: 0.06em; position: relative;
  }
  .gnav li a:hover { background: var(--kon-deep); color: #fff; }
  .gnav li a[aria-current="page"] { color: #fff; background: var(--kon-deep); }
  .gnav li a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 1.5em; height: 3px; margin-left: -0.75em; background: var(--shu); }
  .gnav .gnav-tel, .gnav .gnav-only-sp { display: none; }
}

/* ---------- スマホ下部固定バー ---------- */
.sp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px var(--gutter-r) calc(8px + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  background: rgba(255,255,255,0.96); border-top: 1px solid var(--line);
}
.sp-bar a { min-height: 52px; font-size: 0.9375rem; padding-inline: 0.5em; }
.sp-bar .sp-tel { display: grid; place-items: center; line-height: 1.2; text-align: center; }
.sp-bar .sp-tel small { display: block; font-size: 0.75rem; font-weight: 400; }
body.has-sp-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .sp-bar { display: none; } body.has-sp-bar { padding-bottom: 0; } }

/* ---------- パンくず ---------- */
.crumbs { font-size: var(--fs-s); color: var(--sumi-soft); padding-block: 12px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.4em; }
.crumbs li + li::before { content: "／"; margin-right: 0.4em; color: var(--line); }
.crumbs a { color: var(--sumi-soft); }

/* ---------- 下層ページの表題 ---------- */
.page-head { background: var(--kon); color: var(--on-kon); position: relative; overflow: hidden; }
.page-head .wrap { padding-block: 40px 44px; position: relative; }
.page-head h1 { color: #fff; font-size: var(--fs-xl); }
.page-head p { color: var(--on-kon-soft); margin-top: 0.6em; max-width: var(--text); }
.page-head::after {
  /* 暖簾の裾の切れ目 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), var(--kami) calc(25% - 3px) 25%);
}
@media (min-width: 768px) {
  .page-head .wrap { padding-block: 56px 64px; }
  .page-head h1 { font-size: var(--fs-xxl); }
  .page-head::after { height: 26px; }
}

/* ---------- セクション ---------- */
.sec { padding-block: 56px; }
.sec + .sec { padding-top: 0; }
.sec.band { background: var(--gofun); padding-block: 56px; }
.sec.band + .sec, .sec + .sec.band { padding-top: 56px; }
@media (min-width: 768px) {
  .sec, .sec.band { padding-block: 88px; }
  .sec.band + .sec, .sec + .sec.band { padding-top: 88px; }
}
.sec-head { max-width: var(--text); margin-bottom: 32px; }
.sec-head h2 { font-size: var(--fs-l); }
.sec-head p { margin-top: 0.8em; color: var(--sumi-soft); }
@media (min-width: 768px) { .sec-head h2 { font-size: var(--fs-xl); } .sec-head { margin-bottom: 44px; } }
.sec-more { margin-top: 28px; }
.prose { max-width: var(--text); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-l); margin-top: 2em; padding-bottom: 0.3em; border-bottom: 2px solid var(--kon); }
.prose h3 { font-size: var(--fs-m); margin-top: 1.8em; padding-left: 0.7em; border-left: 4px solid var(--shu); line-height: 1.5; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.35em; }
.prose strong { color: var(--kon); }
.prose .table-wrap { margin-top: 1.4em; }

/* ---------- トップ：暖簾のファーストビュー ---------- */
.hero { position: relative; background: var(--kami); overflow: hidden; }
.hero-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "noren catch" "seal seal";
  align-items: start; gap: 14px 14px; padding-block: 18px 0;
}
.catch-wrap { display: contents; }
.noren { grid-area: noren; position: relative; padding-top: 14px; }
.noren-rod {
  position: absolute; left: -3%; right: -3%; top: 0; height: 12px; border-radius: 6px;
  background: linear-gradient(var(--wood), #3f2b19); box-shadow: 0 2px 0 rgba(0,0,0,0.15); transform-origin: 50% 50%;
}
.noren-cloth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.noren-panel {
  position: relative; color: #fff; height: clamp(230px, 66vw, 300px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 22px 0 14px; transform-origin: 50% 0; border-radius: 0 0 2px 2px;
  box-shadow: inset 0 22px 0 -10px rgba(0,0,0,0.18); cursor: default; user-select: none; -webkit-user-select: none;
  background-color: var(--kon);
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 100%);
  background-size: 7px 100%;
}
.noren-panel .kanji {
  font-family: var(--f-min); font-weight: 800; line-height: 1; font-size: clamp(44px, 14vw, 132px);
  text-shadow: 0 0 1px rgba(255,255,255,0.4);
}
.noren-panel .foot { font-family: var(--f-min); font-size: clamp(10px, 2.6vw, 15px); letter-spacing: 0.3em; color: var(--on-kon-soft); white-space: nowrap; }
.noren-panel .loop { position: absolute; top: -14px; width: 14px; height: 18px; border: 3px solid var(--kon); border-bottom: 0; border-radius: 8px 8px 0 0; }
.noren-panel .loop.l { left: 18%; }
.noren-panel .loop.r { right: 18%; }

.catch {
  grid-area: catch; writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-min); font-weight: 700; color: var(--kon);
  font-size: clamp(19px, 5.4vw, 38px); line-height: 1.7; letter-spacing: 0.12em; margin-top: 10px;
}
.catch span { display: block; white-space: nowrap; }
.catch .l2 { color: var(--sumi); }
.seal-area { grid-area: seal; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.seal {
  writing-mode: vertical-rl; font-family: var(--f-min); font-weight: 800; color: var(--shu);
  border: 3px solid var(--shu); outline: 1px solid var(--shu); outline-offset: 3px;
  padding: 8px 6px; font-size: clamp(13px, 3.4vw, 20px); line-height: 1.35; letter-spacing: 0.12em;
  transform: rotate(-5deg); background: var(--kami); margin: 6px;
}
.seal b { font-weight: 800; }
.seal .s1 { display: block; font-size: 0.8em; letter-spacing: 0.4em; }
.seal b { display: block; }
.license-tag { font-size: 0.8125rem; color: var(--sumi-soft); letter-spacing: 0.08em; line-height: 1.5; }

.hero-body { padding-block: 20px 44px; }
.hero-body h1 { font-size: var(--fs-l); }
.nb { display: inline-block; }
.hero-body .lead { margin-top: 0.8em; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn { flex: 1 1 220px; min-height: 58px; }
.hero-tel { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; color: var(--kon); }
.hero-tel a { font-size: var(--fs-xl); font-weight: 700; color: var(--kon); text-decoration: none; letter-spacing: 0.03em; }
.hero-tel span { font-size: var(--fs-s); color: var(--sumi-soft); }

@media (min-width: 900px) {
  .hero-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "noren catch"; gap: 0 32px; align-items: center; padding-block: 36px 0; }
  .catch-wrap { grid-area: catch; display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: center; gap: 22px; }
  .noren-panel { height: 400px; padding-top: 40px; }
  .noren-panel .kanji { font-size: clamp(96px, 10vw, 150px); }
  .catch { font-size: clamp(30px, 2.9vw, 38px); margin-top: 0; }
  .seal-area { flex-direction: column-reverse; align-items: center; gap: 10px; }
  .license-tag { writing-mode: vertical-rl; }
  .license-tag .num { text-combine-upright: all; }
  .hero-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; padding-block: 36px 72px; }
  .hero-body h1 { font-size: var(--fs-xl); }
  .hero-actions { margin-top: 0; }
  .hero-side { display: grid; gap: 4px; }
}

/* 暖簾の動き（トップのみ） */
@media (prefers-reduced-motion: no-preference) {
  .js .noren-rod { animation: rod-in .5s ease-out both; }
  .js .noren-panel { animation: hang 1.1s cubic-bezier(.2,.9,.3,1.2) both, sway 6.5s ease-in-out 1.4s infinite; }
  .js .noren-panel:nth-child(2) { animation-delay: .12s, 1.9s; animation-duration: 1.1s, 7.3s; }
  .js .noren-panel:nth-child(3) { animation-delay: .24s, 1.6s; animation-duration: 1.1s, 6.1s; }
  .js .noren-panel.is-push { animation: push 1.2s cubic-bezier(.3,.6,.3,1) both; }
  .js .catch span { animation: ink 1s cubic-bezier(.6,.1,.3,1) both; }
  .js .catch .l1 { animation-delay: .9s; }
  .js .catch .l2 { animation-delay: 1.5s; }
  .js .catch .l3 { animation-delay: 2.1s; }
  .js .seal { animation: stamp .45s cubic-bezier(.3,1.6,.5,1) 2.9s both; }
  .js .license-tag { animation: fade .6s ease 3.2s both; }
}
@keyframes rod-in { from { transform: scaleX(.6); } to { transform: none; } }
@keyframes hang {
  0% { transform: translateY(-55%) scaleY(.4); }
  70% { transform: translateY(0) scaleY(1.03); }
  100% { transform: none; }
}
@keyframes sway {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  30% { transform: rotate(.45deg) skewX(-.7deg); }
  65% { transform: rotate(-.35deg) skewX(.5deg); }
}
@keyframes push {
  0% { transform: none; }
  22% { transform: rotate(-7deg) skewX(6deg) scaleY(.98); }
  48% { transform: rotate(4deg) skewX(-3deg); }
  72% { transform: rotate(-1.6deg) skewX(1deg); }
  100% { transform: none; }
}
@keyframes ink {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes stamp {
  0% { transform: rotate(-14deg) scale(1.9); opacity: 0; }
  60% { transform: rotate(-4deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- お知らせ ---------- */
.news-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.news-tabs button {
  min-height: 40px; padding: 0.3em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: var(--kami);
  font: 700 var(--fs-s)/1 var(--f-sans); color: var(--kon); cursor: pointer;
}
.news-tabs button[aria-pressed="true"] { background: var(--kon); color: #fff; border-color: var(--kon); }
.news-list { list-style: none; border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a {
  display: grid; grid-template-columns: auto auto 1fr; gap: 4px 16px; align-items: baseline; padding: 18px 4px;
  color: var(--sumi); text-decoration: none;
}
.news-list a:hover .t { color: var(--shu-deep); text-decoration: underline; }
.news-list time { font-variant-numeric: tabular-nums; color: var(--sumi-soft); font-size: var(--fs-s); }
.cat { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.15em 0.7em; border: 1px solid currentColor; border-radius: 3px; color: var(--kon); white-space: nowrap; }
.cat[data-cat="コラム"] { color: var(--shu-deep); }
.cat[data-cat="物件情報"] { color: #2c6a4f; }
.news-list .t { font-weight: 700; }
.news-list .cat { justify-self: start; }
@media (max-width: 599px) { .news-list a { grid-template-columns: auto 1fr; } .news-list .t { grid-column: 1 / -1; } }
.news-empty { padding: 24px 4px; color: var(--sumi-soft); }
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pager button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--kami); border-radius: var(--r); font: 700 var(--fs-b)/1 var(--f-sans); color: var(--kon); cursor: pointer; }
.pager button[aria-current="page"] { background: var(--kon); color: #fff; border-color: var(--kon); }
.pager button:disabled { opacity: .4; cursor: default; }

/* ---------- ご相談メニュー（屋号札） ---------- */
.menu-rows { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.menu-rows li { border-bottom: 1px solid var(--line); }
.menu-row { display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 22px 4px; text-decoration: none; color: var(--sumi); align-items: start; }
.menu-row:hover h3 { color: var(--shu-deep); }
.fuda {
  grid-row: span 3; width: 64px; height: 76px; display: grid; place-items: center; background: var(--kon); color: #fff;
  font: 800 2.125rem/1 var(--f-min); position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%, 54% 86%, 46% 86%, 46% 100%, 0 100%);
}
.menu-row h3 { font-size: var(--fs-m); }
.menu-row p { color: var(--sumi-soft); }
.menu-row .go { font-weight: 700; color: var(--shu-deep); font-size: var(--fs-s); }
@media (min-width: 768px) {
  .menu-rows { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .menu-rows li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .menu-row { grid-template-columns: 76px 1fr; padding: 28px 4px; }
  .fuda { width: 76px; height: 92px; font-size: 2.5rem; }
}

/* ---------- 強み ---------- */
.points { list-style: none; display: grid; gap: 28px; }
.points li { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 3px solid var(--kon); }
.points h3 { font-size: var(--fs-m); }
.points p { color: var(--sumi-soft); }
@media (min-width: 768px) { .points { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; } }

/* ---------- 実績 ---------- */
.works { list-style: none; display: grid; gap: 14px; }
.works li { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center; background: var(--kami); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.works .badge { grid-row: span 2; font: 800 0.9375rem/1.2 var(--f-min); color: var(--shu); border: 2px solid var(--shu); padding: 8px 6px; writing-mode: vertical-rl; letter-spacing: 0.2em; }
.works .place { font-weight: 700; color: var(--kon); font-size: var(--fs-m); }
.works .kind { color: var(--sumi-soft); font-size: var(--fs-s); }
@media (min-width: 768px) { .works { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 12px; }
.areas li { padding: 0.35em 1em; border-radius: 999px; background: var(--kami); border: 1px solid var(--line); font-weight: 700; color: var(--kon); font-size: var(--fs-s); }
.areas li.main { background: var(--kon); color: #fff; border-color: var(--kon); }
.works-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .works-grid { grid-template-columns: 3fr 2fr; gap: 56px; } }
.works-grid h3 { font-size: var(--fs-m); margin-bottom: 14px; }
.want { background: var(--kami); border: 2px solid var(--kon); border-radius: var(--r); padding: 22px 22px 24px; }
.want ul { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
.want li, .check-list li, .areas li { word-break: auto-phrase; }
.want li::before { content: "・"; color: var(--shu); font-weight: 700; }

/* ---------- 会社概要（簡略） ---------- */
.about-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.photo-frame { background: var(--kami); padding: 10px 10px 14px; border: 1px solid var(--line); display: inline-block; max-width: 340px; }
.photo-frame figcaption { font-size: var(--fs-s); color: var(--sumi-soft); margin-top: 8px; }
.map-box { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--gofun); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-link { display: grid; place-items: center; text-align: center; height: 100%; padding: 24px; gap: 12px; }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dl-table { width: 100%; border-top: 1px solid var(--line); }
.dl-table th, .dl-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.dl-table th { width: 9em; color: var(--kon); font-weight: 700; background: var(--gofun); white-space: nowrap; }
@media (max-width: 599px) {
  .dl-table.stack th, .dl-table.stack td { display: block; width: 100%; }
  .dl-table.stack th { border-bottom: 0; padding-bottom: 6px; }
  .dl-table.stack td { padding-top: 6px; }
}
.data-table { width: 100%; min-width: 520px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--kon); color: #fff; font-weight: 700; }
.data-table tbody th { background: var(--gofun); color: var(--kon); white-space: nowrap; }
.data-table td.r { text-align: right; white-space: nowrap; }
.data-table .good { color: #1f6b47; font-weight: 700; }
.data-table .bad { color: var(--shu-deep); font-weight: 700; }

/* ---------- 流れ（手順） ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding-bottom: 28px; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--kon); color: #fff; font: 700 1.25rem/1 var(--f-min); position: relative; z-index: 1;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--line); }
.steps h3 { font-size: var(--fs-m); padding-top: 8px; }
.steps p { color: var(--sumi-soft); }
@media (min-width: 900px) {
  .steps.h { grid-template-columns: repeat(var(--n, 5), 1fr); gap: 0 16px; }
  .steps.h li { grid-template-columns: 1fr; padding-bottom: 0; }
  .steps.h li::before { grid-row: auto; }
  .steps.h li:not(:last-child)::after { left: 56px; right: -16px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .steps.h h3 { padding-top: 6px; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 52em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 2em 1fr 1.5em; gap: 8px; align-items: start;
  padding: 18px 4px; font-weight: 700; color: var(--kon);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "問"; font-family: var(--f-min); color: var(--shu); font-size: 1.125rem; }
.faq summary::after { content: "＋"; color: var(--sumi-soft); transition: transform .2s; text-align: center; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { display: grid; grid-template-columns: 2em 1fr; gap: 8px; padding: 0 4px 20px; }
.faq .a::before { content: "答"; font-family: var(--f-min); color: var(--kon); font-size: 1.125rem; font-weight: 700; }
.faq .a > div > * + * { margin-top: 0.6em; }

/* ---------- 料金 ---------- */
.fee-box { display: grid; gap: 24px; }
@media (min-width: 900px) { .fee-box { grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; } }
.free-list { list-style: none; display: grid; gap: 10px; }
.free-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 14px 18px; background: var(--kami); border: 1px solid var(--line); border-radius: var(--r); font-weight: 700; color: var(--kon); }
.free-list li b { color: var(--shu-deep); font-size: var(--fs-m); white-space: nowrap; }
.callout { background: var(--shu-wash); border-left: 4px solid var(--shu); padding: 16px 18px; border-radius: 0 var(--r) var(--r) 0; }
.callout > * + * { margin-top: 0.5em; }

/* ---------- 二段組み（説明＋図） ---------- */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 56px; align-items: start; } }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 1.8em; }
.check-list li::before { content: ""; position: absolute; left: 0.2em; top: 0.55em; width: 0.9em; height: 0.5em; border-left: 3px solid var(--shu); border-bottom: 3px solid var(--shu); transform: rotate(-45deg); }
.panel { background: var(--kami); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 24px; }
.panel h3 { font-size: var(--fs-m); margin-bottom: 10px; }
.deadline { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.deadline li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.deadline b { color: var(--shu-deep); font-variant-numeric: tabular-nums; }

/* ---------- 会社案内 ---------- */
.greeting { display: grid; gap: 28px; }
@media (min-width: 900px) { .greeting { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; } }
.portrait {
  width: 180px; aspect-ratio: 3 / 4; max-width: 100%; background: var(--gofun); border: 1px dashed var(--line); display: grid; place-items: center;
  color: var(--sumi-soft); font-size: var(--fs-s); text-align: center; padding: 12px;
}
.sign { margin-top: 1.4em; font-family: var(--f-min); color: var(--kon); font-size: var(--fs-m); text-align: right; }
.sign small { font-size: 0.7em; margin-right: 1em; color: var(--sumi-soft); }
.motto { font-family: var(--f-min); color: var(--kon); font-size: var(--fs-l); line-height: 1.7; font-weight: 700; }
.mv { list-style: none; display: grid; gap: 18px; margin-top: 24px; }
.mv li { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.mv b { color: var(--kon); font-family: var(--f-min); }
.history { list-style: none; position: relative; display: grid; gap: 0; max-width: 46em; }
.history li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.history .y { font-family: var(--f-min); font-weight: 700; color: var(--kon); line-height: 1.5; }
.history .y small { display: block; font-family: var(--f-sans); font-weight: 400; color: var(--sumi-soft); font-size: 0.75rem; }
.license-explain { margin-top: 0.6em; }

/* ---------- 記事 ---------- */
.post-head { padding-block: 8px 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.post-head h1 { font-size: var(--fs-l); margin-top: 10px; }
@media (min-width: 768px) { .post-head h1 { font-size: var(--fs-xl); } }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-s); color: var(--sumi-soft); margin-top: 12px; }
.post-layout { display: grid; gap: 48px; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.share p { font-weight: 700; color: var(--kon); margin-right: 6px; }
.share a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1em; border-radius: var(--r); color: #fff; text-decoration: none; font-weight: 700; font-size: var(--fs-s); }
.share .x { background: #1e2338; }
.share .fb { background: #1f57c3; }
.share .line { background: #06803b; }
.share a:hover { filter: brightness(1.15); color: #fff; }
.prevnext { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 768px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--kon); font-weight: 700; }
.prevnext a span { font-size: 0.75rem; color: var(--sumi-soft); font-weight: 400; }
.prevnext .next { text-align: right; }
.side h2 { font-size: var(--fs-m); margin-bottom: 12px; }
.side .news-list a { grid-template-columns: 1fr; gap: 2px; padding: 14px 2px; }
.side .news-list .cat { display: none; }

/* ---------- お問い合わせ ---------- */
.contact-alt { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 768px) { .contact-alt { grid-template-columns: 1fr 1fr; } }
.contact-alt .panel p.big { font-size: var(--fs-xl); font-weight: 700; color: var(--kon); line-height: 1.3; }
.contact-alt .panel p.big a { color: var(--kon); text-decoration: none; }
.form { max-width: 46em; display: grid; gap: 26px; }
.field { display: grid; gap: 8px; }
.field > label, .field > .label, .field legend { font-weight: 700; color: var(--kon); display: flex; align-items: center; gap: 10px; padding: 0; }
.req, .opt { font-size: 0.75rem; font-weight: 700; padding: 0.15em 0.6em; border-radius: 3px; line-height: 1.5; }
.req { background: var(--shu-deep); color: #fff; }
.opt { background: var(--gofun); color: var(--sumi-soft); border: 1px solid var(--line); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.input, .textarea, .select {
  width: 100%; font: 400 var(--fs-b)/1.6 var(--f-sans); color: var(--sumi); padding: 12px 14px; min-height: 52px;
  border: 1px solid #a9afc6; border-radius: var(--r); background: #fff;
}
.textarea { min-height: 180px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid rgba(217,72,15,0.35); border-color: var(--shu-deep); }
.field.is-error .input, .field.is-error .textarea { border-color: var(--shu-deep); background: var(--shu-wash); }
.field.is-ok .input, .field.is-ok .textarea { border-color: #2c7a55; }
.err { color: var(--shu-deep); font-weight: 700; font-size: var(--fs-s); min-height: 0; }
.err:empty { display: none; }
.hint { font-size: var(--fs-s); color: var(--sumi-soft); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 0.4em 1.1em; border: 1px solid #a9afc6; border-radius: var(--r); background: #fff; font-weight: 700; color: var(--kon); }
.choice input:checked + span { background: var(--kon); color: #fff; border-color: var(--kon); }
.choice input:focus-visible + span { outline: 3px solid var(--shu); outline-offset: 2px; }
.agree { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--gofun); border-radius: var(--r); }
.agree input { width: 24px; height: 24px; margin-top: 4px; flex: none; accent-color: var(--kon); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-actions .btn { min-width: 260px; min-height: 60px; font-size: var(--fs-m); }
.form-summary { padding: 14px 18px; border: 2px solid var(--shu-deep); border-radius: var(--r); background: var(--shu-wash); color: var(--shu-deep); font-weight: 700; }

/* ---------- 文書（プライバシーポリシー） ---------- */
.legal { max-width: 46em; counter-reset: art; }
.legal h2 { counter-increment: art; font-size: var(--fs-m); margin-top: 2.2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); }
.legal h2::before { content: counter(art) ". "; color: var(--shu); }
.legal > * + * { margin-top: 1em; }
.legal ol, .legal ul { padding-left: 1.6em; }
.legal ol ol { list-style: lower-roman; }
.legal li + li { margin-top: 0.3em; }
.revised { text-align: right; color: var(--sumi-soft); font-size: var(--fs-s); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2.5em; }

/* ---------- 相談を促す帯 ---------- */
.cta-band { background: var(--kon); color: var(--on-kon); }
.cta-band .wrap { padding-block: 56px; display: grid; gap: 28px; }
.cta-band h2 { color: #fff; font-size: var(--fs-l); }
.cta-band p { color: var(--on-kon-soft); }
.cta-band .wrap > div:first-child > * + * { margin-top: 0.8em; }
.cta-band .tel { font-size: var(--fs-xxl); font-weight: 700; color: #fff; text-decoration: none; line-height: 1.2; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.cta-band .tel-note { font-size: var(--fs-s); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-band .cta-actions .btn { min-height: 60px; min-width: 240px; }
@media (min-width: 900px) {
  .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 72px; gap: 48px; }
  .cta-band h2 { font-size: var(--fs-xl); }
}

/* ---------- フッター ---------- */
.site-footer { background: var(--kon-deep); color: var(--on-kon-soft); font-size: var(--fs-s); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.ft-grid { display: grid; gap: 36px; padding-block: 48px 32px; }
@media (min-width: 900px) { .ft-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding-block: 64px 40px; } }
.ft-brand { display: flex; align-items: center; gap: 12px; }
.ft-brand .mark { background: #fff; border-radius: 4px; padding: 6px 7px; width: 56px; flex: none; }
.ft-name { font-family: var(--f-min); font-weight: 800; color: #fff; font-size: 1.25rem; letter-spacing: 0.06em; line-height: 1.4; }
.ft-name small { display: block; font-size: 0.625rem; font-weight: 400; letter-spacing: 0.1em; color: var(--on-kon-soft); }
.site-footer address { font-style: normal; margin-top: 16px; line-height: 1.9; }
.ft-license { margin-top: 10px; }
.ft-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ft-h { color: #fff; font-weight: 700; margin-bottom: 8px; font-family: var(--f-min); font-size: 1rem; }
.ft-nav ul { list-style: none; display: grid; gap: 6px; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,0.18); padding: 18px 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* ---------- 404・送信完了 ---------- */
.done { text-align: left; max-width: 40em; }
.done .stamp-ok { display: inline-block; writing-mode: vertical-rl; font: 800 1.25rem/1.3 var(--f-min); color: var(--shu); border: 3px solid var(--shu); outline: 1px solid var(--shu); outline-offset: 3px; padding: 10px 8px; transform: rotate(-5deg); margin: 6px 6px 24px; letter-spacing: 0.2em; }
.done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  .site-header, .gnav, .sp-bar, .cta-band, .site-footer nav { display: none !important; }
  body { padding: 0 !important; }
}

/* ---------- 追加の部品 ---------- */
.mt { margin-top: 32px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.about-media { display: grid; gap: 20px; align-content: start; }
.news-top-grid { display: grid; gap: 0; }
.news-top-grid .sec-head { margin-bottom: 20px; }
.news-top-grid .sec-more { margin-top: 10px; }
@media (min-width: 900px) {
  .news-top-grid { grid-template-columns: 15em minmax(0, 1fr); gap: 48px; }
}
.news-top .news-list li, .news-top .news-list { border-color: var(--line); }
.news-top .news-list a { background: transparent; }
.table-title { font-size: var(--fs-b); margin-bottom: 10px; }
.points.three { grid-template-columns: 1fr; }
@media (min-width: 900px) { .points.three { grid-template-columns: repeat(3, 1fr); } }
.rank { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.rank li { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; }
.rank b { color: var(--kon); }
.kinds { list-style: none; display: grid; gap: 16px; }
@media (min-width: 900px) { .kinds { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.kinds .area { font-weight: 700; color: var(--shu-deep); margin-bottom: 6px; }
.land { display: grid; grid-template-columns: 5em 1fr; gap: 6px 10px; margin: 0; }
.land dt { font-weight: 700; color: var(--kon); }
.land dd { margin: 0; }
.kv { display: grid; grid-template-columns: 7em 1fr; gap: 4px 12px; margin: 12px 0 16px; }
.kv dt { font-weight: 700; color: var(--kon); }
.kv dd { margin: 0; }
.kv a { color: var(--kon); font-weight: 700; font-size: var(--fs-m); }
.rent-callout { max-width: 52em; padding: 22px 24px; }
.callout-h { font-size: var(--fs-m); margin-bottom: 6px; }
.panel-h { font-size: var(--fs-m); margin-bottom: 8px; }
.prose h2.plain { border: 0; margin-top: 0; padding: 0; font-size: var(--fs-l); }
@media (min-width: 768px) { .prose h2.plain { font-size: var(--fs-xl); } }
.motto-v {
  font-family: var(--f-min); font-weight: 800; color: var(--kon); font-size: var(--fs-l); line-height: 1.6; letter-spacing: 0.12em;
}
@media (min-width: 900px) {
  .motto-v span { display: block; white-space: nowrap; }
  .motto-v { writing-mode: vertical-rl; font-size: 2.25rem; justify-self: center; align-self: start; padding-top: 6px; border-right: 3px solid var(--shu); padding-right: 14px; }
}
.photos { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.photos .photo-frame { flex: 1 1 240px; max-width: 340px; }
.post-head .cat { margin-bottom: 4px; }
.post-layout { padding-bottom: 64px; }
.done h1 { font-size: var(--fs-l); }
@media (min-width: 768px) { .done h1 { font-size: var(--fs-xl); } }
.split > *, .fee-box > *, .post-layout > *, .about-grid > *, .works-grid > *, .greeting > *, .news-top-grid > *, .hero-body > * { min-width: 0; }

/* ==========================================================
   トップ：店先の写真（暖簾）＋白壁の縦書き
   写真の原寸 2022×778。スマホは暖簾の部分（左262〜幅1230）を切り出す
   ========================================================== */
.sf { position: relative; container-type: inline-size; background: #ebe6de; }
.sf-crop { position: relative; overflow: hidden; aspect-ratio: 1230 / 778; max-width: 100%; }
.sf-frame { position: absolute; top: 0; left: -21.301%; width: 164.39%; aspect-ratio: 2022 / 778; transform-origin: 50% 40%; }
.sf-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.sf-noren { position: absolute; inset: 0; }
.sf-panel { position: absolute; top: 16.067%; height: auto; max-width: none; transform-origin: 50% 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sf-wall {
  display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: center; gap: 20px;
  padding: 22px var(--gutter-r) 22px var(--gutter-l);
  background: #efebe4 url(../img/wall.jpg) center / cover no-repeat;
}
.sf-wall .catch { grid-area: auto; margin: 0; font-size: clamp(19px, 5.6vw, 30px); letter-spacing: 0.08em; line-height: 1.65; text-shadow: 0 0 6px rgba(255,255,255,0.7); }
.sf-wall .seal-area { display: block; padding-bottom: 4px; }
.sf-wall .seal { font-size: clamp(13px, 3.6vw, 18px); background: rgba(255,255,255,0.72); }
.tcy { text-combine-upright: all; }
.hero-license { margin-top: 6px; font-size: var(--fs-s); color: var(--sumi-soft); }

@media (min-width: 900px) {
  .sf-crop { aspect-ratio: auto; height: 38.477vw; height: max(36cqw, min(38.477cqw, 600px)); }
  .sf-frame { left: 0; width: 100%; }
  .sf-wall { position: absolute; inset: 0; display: block; padding: 0; background: none; pointer-events: none; }
  .sf-wall .catch {
    position: absolute; right: 7vw; right: 7cqw; top: 3.1vw; top: 3.1cqw;
    font-size: 2.55vw; font-size: 2.55cqw; letter-spacing: 0.06em; line-height: 1.62;
    text-shadow: 0 0 0.4cqw rgba(255,255,255,0.8);
  }
  .sf-wall .seal-area { position: absolute; left: 80.3vw; left: 80.3cqw; top: 28.1vw; top: 28.1cqw; padding: 0; }
  .sf-wall .seal { font-size: 1.2vw; font-size: 1.2cqw; padding: 0.5cqw 0.4cqw; border-width: 0.16cqw; outline-offset: 0.17cqw; margin: 0; }
  .hero .hero-body { padding-top: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .sf-frame { animation: settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
  .js .sf-panel { animation: sway2 7s ease-in-out 1.2s infinite; }
  .js .sf-panel:nth-child(2) { animation-duration: 8.3s; animation-delay: 1.7s; }
  .js .sf-panel:nth-child(3) { animation-duration: 6.4s; animation-delay: 1.4s; }
  .js .sf-panel.is-push { animation: push2 1.4s cubic-bezier(.3,.6,.3,1) both; }
}
@keyframes settle { from { transform: scale(1.045); } to { transform: none; } }
@keyframes sway2 {
  0%, 100% { transform: skewX(0deg); }
  30% { transform: skewX(-0.9deg); }
  65% { transform: skewX(0.7deg); }
}
@keyframes push2 {
  0% { transform: none; }
  20% { transform: skewX(3deg) scaleY(0.995); }
  45% { transform: skewX(-1.8deg); }
  70% { transform: skewX(0.8deg); }
  100% { transform: none; }
}