@charset "UTF-8";
/* ============================================================
   合同会社テト HP  A案「土と紙」テーマ
   既存ページの <style> の後ろに読み込んで色・書体・余白を上書きする。
   本番(teto-site-package-v5)には入れていない試作。2026-08-24
   ============================================================ */

/* ---------- 1. 配色と書体 ---------- */
:root {
  --paper:   #f5efe1;   /* 生成りの紙 */
  --paper-2: #efe7d4;   /* 交互セクション */
  --paper-3: #e7dcc3;
  --ink:     #2e2517;   /* 焦茶 */
  --body:    #54483a;
  --muted:   #8b7d68;
  --line:    #ded2b8;
  --line-2:  #c4b394;
  --green:      #7c5c22;  /* アクセント＝山吹の濃い方（リンク・見出し補助） */
  --green-deep: #3b2f1c;  /* 濃色パネル */
  --green-soft: #efe6d0;
  --ochre:   #a8813a;
  --serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --sans:  'Noto Sans JP', system-ui, sans-serif;
  --mono:  'Cormorant Garamond', 'Noto Serif JP', serif;
}

html { font-size: 17px; }
@media (max-width: 600px) { html { font-size: 16.5px; } }

body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  line-height: 2.0;
}

.label, .num, .news-date, .news-tag, .step .st, .info-row .k, .spec-row .k,
.as-card .n, .stance .n, .copy, .quals li .n {
  font-family: var(--mono);
  letter-spacing: 0.2em;
}
.label, .num { font-size: 0.8rem; font-weight: 600; }

/* ---------- 2. ヘッダー（上段＝社名中央・電話右／下段＝罫線メニュー） ---------- */
header { background: transparent !important; border-bottom: none !important; box-shadow: none; }
.hd-top {
  background: rgba(241, 234, 217, 0.96);
  border-bottom: none;
  backdrop-filter: blur(12px);
}
/* 900px未満はメニュー帯が出ないので、上段に細い罫線を残す */
@media (max-width: 899px) { .hd-top { border-bottom: 1px solid var(--line-2); } }
.header-inner { height: 72px; gap: 16px; flex-wrap: nowrap; position: relative; }
@media (min-width: 900px) { .header-inner { height: 88px; } }

.brand-logo { flex: 0 0 auto; }
.brand-logo img { height: 42px; }
.brand-logo .name {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.14em;
  white-space: nowrap; font-size: 1.1rem;
}
@media (min-width: 900px) {
  /* 社名を中央に置く */
  .brand-logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .brand-logo img { height: 48px; }
  .brand-logo .name { font-size: 1.3rem; letter-spacing: 0.2em; }
}

/* 電話（明朝の数字・右） */
.hd-tel {
  display: none; margin-left: auto; text-align: right;
  font-family: var(--serif); font-size: 1.42rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap;
}
.hd-tel::before {
  content: "電 話"; font-family: var(--serif); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.3em; color: var(--ink); margin-right: 10px; vertical-align: 0.22em;
}
.hd-tel small {
  display: block; font-family: var(--serif); font-size: 0.72rem; color: var(--body);
  letter-spacing: 0.08em; margin-top: 2px; font-weight: 500;
}
@media (min-width: 900px) { .hd-tel { display: block; } }
/* お問い合わせは下段メニューに置いたので、上段のボタン（と空の入れ物）は出さない */
#hbtn { display: none !important; }
@media (min-width: 900px) { .header-inner > div { display: none !important; } }

/* 下段：罫線で区切ったメニュー（細め・軽い字） */
.hd-nav {
  display: none;
  background-color: var(--paper-3);
  /* 参考HPと同じ罫：上は3pxの実線、下は 1px + 2px空き + 1px の細い二重線 */
  background-image: linear-gradient(to top,
    #3d2b1c 0, #3d2b1c 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px,
    #3d2b1c 3px, #3d2b1c 4px,
    rgba(0,0,0,0) 4px);
  border-top: 3px solid #3d2b1c;
  border-bottom: none;
}
@media (min-width: 900px) { .hd-nav { display: block; } }
.hd-nav nav.main { display: flex; justify-content: center; gap: 0; margin: 0; padding-bottom: 5px; }
.hd-nav nav.main a {
  position: relative; display: block; padding: 6px 30px 7px; text-align: center; white-space: nowrap;
  font-family: var(--serif); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.12em;
  color: #241b0f; border: none; transition: background .3s, color .3s;
}
.hd-nav nav.main a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 62%; background: var(--line-2);
}
.hd-nav nav.main a:last-child::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 62%; background: var(--line-2);
}
.hd-nav nav.main a:hover { background: rgba(168,129,58,0.1); color: var(--green); }
.hd-nav nav.main a small {
  display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; color: #6b5f49; margin-top: 0; line-height: 1.35;
}
@media (max-width: 1120px) { .hd-nav nav.main a { padding: 7px 20px 8px; font-size: 0.9rem; letter-spacing: 0.06em; } }
@media (max-width: 1000px) {
  .hd-nav nav.main a { padding: 7px 12px 8px; font-size: 0.85rem; letter-spacing: 0.02em; }
  .hd-nav nav.main a small { font-size: 0.6rem; letter-spacing: 0.08em; }
}

@media (min-width: 900px) {
  #services, #assurance, #news, #contact, #process, #about, #compare, #story { scroll-margin-top: 152px; }
}
.mobile-nav { background: var(--paper); inset: 72px 0 0; }
.mobile-nav a { font-family: var(--serif); }

/* ---------- 3. セクションの土台 ---------- */
.sec { padding: 100px 0; }
.sec.alt { background: var(--paper-2); }
.sec-head { margin-bottom: 64px; }
.sec-head h2 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; line-height: 1.6; }
.sec-head .num { color: var(--green); }
.sec-head .lead { font-size: 1rem; line-height: 2.15; max-width: 620px; }
.list-label { font-family: var(--serif); letter-spacing: 0.12em; color: var(--ink); }

/* 本文まわりを一段大きく・行間を広く（「下の方が見づらい」対策） */
.svc p, .as-card p, .step p, .stance p, .band-inner p, .tb .s,
.doc-col p, .why-card p, .lead, .info-row .v { line-height: 2.1; }
.svc p, .as-card p, .stance p { font-size: 0.98rem; }
.step p { font-size: 0.94rem; }

/* ---------- 4. サービス一覧を「札」に ---------- */
.svc-list { border-top: none; display: grid; gap: 16px; }
.svc {
  background: var(--paper); border: 1px solid var(--line); padding: 30px 30px 28px;
  position: relative; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.sec.alt .svc { background: rgba(255,253,246,0.72); }
a.svc:hover { border-color: var(--ochre); transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(46,37,23,0.45); }
.svc h3 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.03em; }
.svc .idx { font-family: var(--mono); color: var(--ochre); font-size: 1.1rem; letter-spacing: 0.16em; }
.svc-more { color: var(--green); }

/* ---------- 5. 選ばれる理由・約束カード ---------- */
.assure { background: transparent; border: none; gap: 18px; }
.as-card {
  background: var(--paper) !important; border: 1px solid var(--line); padding: 34px 32px 32px;
  position: relative;
}
.as-card::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); opacity: .5; pointer-events: none; }
.as-card h3 { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; line-height: 1.7; }
.as-card .n { color: var(--ochre); font-size: 0.95rem; }

/* trust bar（濃色帯） */
.trustbar { background: var(--ink); }
.tb { background: var(--ink); }
.tb .k { color: #e0bd7e; font-family: var(--mono); font-size: 0.86rem; }
.tb .v { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }

/* ---------- 6. 進め方 ---------- */
.step { border-top-color: var(--line-2); }
@media (min-width: 900px) { .step { border-top: 2px solid var(--ink); } }
.step .no { font-family: var(--mono); color: var(--ochre); font-size: 2.4rem; font-weight: 600; }
.step .st { color: var(--green); font-size: 0.8rem; }
.step h3 { font-family: var(--serif); font-weight: 700; }

/* ---------- 7. ニュース ---------- */
.news-list { border-top: 1px solid var(--line-2); }
.news-item:hover { background: #fffdf6; }
.news-thumb { background: var(--paper-3); border-color: var(--line); }
.news-ttl { font-family: var(--serif); font-weight: 600; }
.news-date { font-size: 0.95rem; }
.news-tag { font-size: 0.74rem; letter-spacing: 0.12em; }

/* ---------- 8. 会社情報・資格パネル ---------- */
.info { border-top: 2px solid var(--ink); }
.info-row .k { font-size: 0.8rem; }
.quals { background: var(--ink); }
.quals li { font-family: var(--serif); }
.quals li .n { color: #d7b478; font-size: 0.9rem; }

/* ---------- 9. 帯・表・CTA・フッター ---------- */
.band::before {
  background: linear-gradient(100deg, rgba(46,37,23,0.94) 0%, rgba(46,37,23,0.88) 52%, rgba(46,37,23,0.62) 100%) !important;
}
.band-inner h2 { font-family: var(--serif); font-weight: 700; }
.band-inner .label { color: #e0bd7e; }

.cmp-wrap { border-color: var(--line-2); background: var(--paper); }
table.cmp thead th { background: var(--paper-3); border-bottom: 2px solid var(--ink); }
table.cmp thead th.us { background: var(--ink); }
table.cmp tbody th { background: var(--paper-2); }
table.cmp td.us { background: #fffdf6; }
table.cmp td.us b { color: var(--green); }
table.cmp { font-size: 0.92rem; }

.cta { background: var(--ink); }
.cta h2 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; }
.cta .label { color: #e0bd7e; }
.btn-paper {
  background: #e8c98a; color: var(--ink); font-family: var(--serif); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.1em; padding: 18px 42px;
}
.btn-paper:hover { background: #f2d9a5; }
.btn-solid { background: var(--green); font-family: var(--serif); letter-spacing: 0.08em; font-size: 0.98rem; }
.btn-solid:hover { background: var(--green-deep); }
.link-arrow { border-bottom-color: var(--line-2); }
.link-arrow:hover { border-color: var(--ochre); }

footer { background: var(--paper-2); border-top: 1px solid var(--line-2); }
.foot-links a:hover { color: var(--green); }
.copy { font-size: 0.86rem; }

/* ---------- 10. 右下の常時CTA（電話・お問合せ・LINE） ---------- */
.sticky-cta {
  background: rgba(245, 239, 225, 0.96) !important;
  border-top: 1px solid var(--line-2);
}
.sticky-cta .cta-tel { background: var(--paper); border-color: var(--line-2); color: var(--ink); font-family: var(--mono); }
.sticky-cta .cta-form { background: var(--ink); color: #f5ecd8; font-family: var(--serif); letter-spacing: 0.06em; }
.sticky-cta .cta-line { background: #06C755; color: #fff; font-family: var(--serif); letter-spacing: 0.06em; }
@media (min-width: 900px) {
  .sticky-cta {
    border: 1px solid var(--line-2);
    box-shadow: 0 18px 44px -18px rgba(46,37,23,0.45);
  }
  .sticky-cta .cta-tel { pointer-events: auto; }
}

/* ---------- 11. その他の共通パーツ ---------- */
.crumbs a:hover { color: var(--green); }
.hero-kicker .rule { background: var(--ochre); }
h1.kv { font-family: var(--serif); font-weight: 700; }
h1.kv .em { color: var(--green); }
.cred-chips li { color: var(--green); background: var(--green-soft); border-color: var(--line-2); font-size: 0.8rem; }
.cred-chips li.hi { background: var(--ink); border-color: var(--ink); color: #f3e9d3; }
.hero-meta span::before { background: var(--ochre); }
.spec { border-top-color: var(--ink); }
.spec-row .v { font-family: var(--serif); }
.gx-node circle { fill: var(--paper-2); stroke: var(--ochre); }
.gx-key circle { fill: var(--ink); stroke: var(--ink); }
.gx-key .gx-lbl { fill: var(--green); }
.gx-box { stroke: var(--ochre); }
.gx-note { fill: var(--green); }
.why-card, .doc-col { border-color: var(--line); }

/* ---------- 12. A案ヒーロー（イラスト＋縦書き） ---------- */
.hero-a { border-bottom: 1px solid var(--line-2); }
.hero-art { position: relative; line-height: 0; }
.hero-art svg, .hero-art img { display: block; width: 100%; height: auto; }
/* 2枚のイラストをゆっくり入れ替える */
.hero-slides { position: relative; }
.hero-slides .hs { opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero-slides .hs.is-on { opacity: 1; }
.hero-slides .hs:not([data-slide="1"]) { position: absolute; inset: 0; }
.hero-slides .hs:not([data-slide="1"]) svg,
.hero-slides .hs:not([data-slide="1"]) img { height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-slides .hs { transition: none; } }
.hero-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(247,240,224,0.86) 0%, rgba(247,240,224,0.55) 24%, rgba(247,240,224,0) 46%);
}
.hero-vt {
  position: absolute; left: 5.5%; top: 7%; bottom: 7%; z-index: 2;
  display: flex; flex-direction: row-reverse; gap: 22px;
}
.hero-vt .kv-v {
  writing-mode: vertical-rl; font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.5rem, 2.5vw, 2.45rem); line-height: 1.62; letter-spacing: 0.14em;
  text-shadow: 0 1px 10px rgba(247,240,224,0.85);
}
.hero-vt .kv-v .em { color: #7c5c22; }
.hero-vt .kv-v b { font-weight: 700; }
.hero-vt .kv-vs {
  writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.2em; color: var(--body); line-height: 2; align-self: flex-start;
  margin-top: 10px; text-shadow: 0 1px 8px rgba(247,240,224,0.9);
}
.hero-a-body { display: grid; grid-template-columns: 1fr; gap: 34px; padding-top: 52px; padding-bottom: 60px; }
@media (min-width: 1000px) { .hero-a-body { grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: start; } }
.hero-a-body .hero-lead { margin-top: 20px; max-width: 720px; font-size: 1rem; line-height: 2.15; }
.hero-note {
  background: var(--paper-2); border-top: 3px solid var(--ochre); padding: 26px 26px 24px;
}
.hero-note .fc-k { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--green); }
.hero-note .fc-v { font-family: var(--serif); font-weight: 700; font-size: 1.06rem; color: var(--ink); line-height: 1.7; margin-top: 8px; }
.hero-note .fc-s { font-size: 0.88rem; line-height: 2; color: var(--body); margin-top: 8px; }
@media (max-width: 979px) {
  .hero-art svg, .hero-art img { height: 250px; object-fit: cover; object-position: 62% center; }
  .hero-art::after { display: none; }
  .hero-vt { position: static; flex-direction: column; gap: 12px; padding: 26px 24px 0; }
  .hero-vt .kv-v, .hero-vt .kv-vs { writing-mode: horizontal-tb; text-shadow: none; color: var(--ink); }
  .hero-vt .kv-v { font-size: 1.36rem; line-height: 1.85; }
  .hero-vt .kv-v .em { color: var(--green); }
  .hero-vt .kv-vs { color: var(--body); letter-spacing: 0.04em; margin-top: 0; }
  .hero-a-body { padding-top: 26px; }
}

/* ---------- 13. 数字は明朝（参考サイトの見え方に合わせる） ---------- */
.hd-tel, .sticky-cta .tel-pc, .cta .tel, .news-date, .step .no, .fg .v, .rg .v,
.info-row .v, .spec-row .v { font-family: var(--serif); }
.sticky-cta .tel-pc { font-weight: 700; letter-spacing: 0.02em; font-size: 0.98rem; }
.news-date { font-weight: 600; letter-spacing: 0.04em; color: var(--body); }
.step .no { font-weight: 700; letter-spacing: 0.02em; }

/* ---------- 14. トップページ：数字と「選ばれる理由」要約 ---------- */
.figures-sec { padding: 84px 0; }
.figures { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.fg { background: var(--paper); padding: 40px 28px; text-align: center; }
.fg .v { font-family: var(--serif); font-size: 3rem; font-weight: 700; color: var(--ochre); line-height: 1; letter-spacing: 0.02em; }
.fg .v small { font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-left: 8px; font-weight: 600; }
.fg .k { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-top: 14px; letter-spacing: 0.06em; }
.fg .s { font-size: 0.82rem; color: var(--muted); margin-top: 8px; line-height: 1.85; }

.reasons-3 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 880px) { .reasons-3 { grid-template-columns: repeat(3, 1fr); } }
.r3 { background: var(--paper); border: 1px solid var(--line); padding: 32px 30px 30px; position: relative; }
.r3::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); opacity: .5; pointer-events: none; }
.r3 .n { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ochre); letter-spacing: 0.12em; }
.r3 h3 { font-family: var(--serif); font-size: 1.14rem; font-weight: 700; color: var(--ink); line-height: 1.7; margin: 10px 0 12px; letter-spacing: 0.03em; }
.r3 p { font-size: 0.96rem; line-height: 2.05; color: var(--body); }
.more-wrap { margin-top: 44px; text-align: center; }
.more-note { margin-top: 16px; font-size: 0.88rem; color: var(--muted); }

/* ---------- 15. トップのお知らせ（参考サイト式の1行リスト） ---------- */
.news-lines { border-top: 1px solid var(--line-2); }
.nl-row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s;
}
@media (min-width: 760px) { .nl-row { grid-template-columns: 120px 92px 1fr; gap: 26px; align-items: baseline; } }
.nl-row:hover { background: #fffdf6; }
.nl-date { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; color: var(--body); letter-spacing: 0.04em; }
.nl-tag {
  font-size: 0.74rem; letter-spacing: 0.1em; color: var(--green);
  border: 1px solid var(--line-2); padding: 3px 10px; width: fit-content; line-height: 1.7;
}
.nl-ttl { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); line-height: 1.8; }
.nl-row:hover .nl-ttl { color: var(--green); }

/* ---------- 16. トップのサービス一覧（名前＋一行だけ） ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.sg {
  display: block; background: var(--paper); border: 1px solid var(--line);
  padding: 30px 26px 28px; text-align: center; position: relative;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.sg:hover { transform: translateY(-4px); border-color: var(--ochre); box-shadow: 0 14px 30px -14px rgba(46,37,23,0.4); }
.sg-ico { display: block; width: 64px; height: 64px; margin: 0 auto 16px; }
.sg-ico img { width: 100%; height: 100%; object-fit: contain; }
.sg h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.7; letter-spacing: 0.03em; }
.sg p { font-size: 0.9rem; line-height: 1.9; color: var(--muted); margin-top: 10px; }
.sg::after {
  content: "詳しく見る →"; display: block; margin-top: 14px;
  font-size: 0.84rem; color: var(--green); letter-spacing: 0.04em;
}

/* TOP / お問い合わせ のナビ表現 */
.hd-nav nav.main a.is-current { color: #5c410f; background: rgba(168,129,58,0.14); }
.hd-nav nav.main a.nav-cta { color: #5c410f; }
.hd-nav nav.main a.nav-cta small { color: #8a6a1f; }

/* ---------- 17. 各ページの帯（横長イラスト＋縦書きの題） ---------- */
.pg-band {
  position: relative; display: grid; place-items: center;
  height: auto; min-height: clamp(190px, 24vw, 300px); padding: 30px 0;
  background-color: #f7f0dd;
  background-image: url('band.jpg');
  background-image: -webkit-image-set(url('band.webp') type('image/webp'), url('band.jpg') type('image/jpeg'));
  background-image: image-set(url('band.webp') type('image/webp'), url('band.jpg') type('image/jpeg'));
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
  border-top: none; border-bottom: 1px solid var(--line-2);
}
.pg-plate {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; font-family: var(--serif); font-weight: 600;
  font-size: clamp(0.86rem, 1.3vw, 1.06rem); letter-spacing: 0.26em; color: var(--ink);
  padding: 24px 13px 20px; background: rgba(246, 240, 226, 0.88);
  border: 1px solid var(--ink); white-space: nowrap;
  box-shadow: inset 0 0 0 3px rgba(246,240,226,0.9), inset 0 0 0 4px var(--ink);
}
@media (max-width: 700px) {
  .pg-plate { writing-mode: horizontal-tb; padding: 13px 24px; letter-spacing: 0.18em; }
}
/* 帯の上に薄く紙の色をかぶせて、文字を読みやすく */
.pg-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(246,240,226,0.55) 0%, rgba(246,240,226,0.12) 55%, rgba(246,240,226,0) 100%);
}
.crumbs { padding: 22px 24px; font-size: 0.85rem; color: var(--body); }
@media (min-width: 768px) { .crumbs { padding: 22px 56px; } }

/* ---------- 18. 社名の看板ロゴ（参考HP式：文字ごとの区切り＋反転ブロック） ---------- */
.brand-logo .plate {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--ink); background: #f7f2e4;
  font-family: var(--serif); font-weight: 700; line-height: 1;
  letter-spacing: 0; white-space: nowrap; overflow: hidden;
}
.brand-logo .plate i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 5px 7px; font-size: 0.96rem; border-left: 1px solid rgba(46,37,23,0.35);
}
@media (min-width: 900px) { .brand-logo .plate i { font-size: 1.1rem; padding: 7px 7px 8px; } }
.brand-logo .plate .pl-a i:first-child { border-left: none; }
.brand-logo .plate .pl-a { display: inline-flex; color: var(--ink); }
.brand-logo .plate .pl-b { display: inline-flex; background: var(--ink); color: #f7f2e4; }
.brand-logo .plate .pl-b i { border-left: 1px solid rgba(247,242,228,0.35); }
.brand-logo .plate .pl-b i:first-child { border-left: 1px solid var(--ink); box-shadow: -1px 0 0 rgba(247,242,228,0.0); }

/* --- footer copyright ---------------------------------------------------
   英字ラベル用の letter-spacing:0.2em / Cormorant Garamond は、
   日本語混在の一文には過剰なので個別に上書きする。
   あわせて .foot-links が増えても潰れないように flex-shrink を止める。 */
.copy {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  line-height: 1.85;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}
@media (max-width: 767px) {
  .copy { white-space: normal; }
}


/* 電話番号の下の注記（営業・勧誘のお断り） 2026-09-02 追加 */
.hd-tel small .hd-tel-note {
  font-family: var(--sans);
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* 固定CTAバーの注記（営業・勧誘のお断り）2026-09-02 追加 */
.sticky-cta { flex-wrap: wrap; }
.sticky-cta .cta-note {
  flex: 1 0 100%;
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 0.64rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: left;      /* 中央でなく電話ボタンの真上に置く（2026-09-02 手塚さん指示） */
  padding-left: 2px;
}

/* PC（右下フローティング時）は注記を絶対配置にして、枠の幅をボタン3つ分に詰める
   （注記が flex: 1 0 100% のまま flex 行に居ると、枠の shrink-to-fit 幅が
     「注記＋ボタン3つを1行に並べた幅」で決まり、右側に空白が残る）2026-09-03 */
@media (min-width: 900px) {
  .sticky-cta { padding-top: 31px; }
  .sticky-cta .cta-note {
    position: absolute;
    left: 12px;
    top: 10px;
    flex: 0 0 auto;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
  }
}

/* --- footer grouping (2026-09-06・Codex試作から採用) --------------------
   フッター約50本のリンクを5分類（ご依頼について／業務・料金／実務資料・解説／
   地域別のご案内／会社・お問い合わせ）に分け、コピーライトを上に置いて縦積みにする。
   分類見出しは .foot-group-title。リンクの件数・順序・URLは従来どおり（Xリンクのみ撤去）。 */
.foot-inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-top: 40px; padding-bottom: 140px; }
.foot-links { display: flex; flex-direction: column; align-items: stretch; gap: 22px; width: 100%; }
.foot-group { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 24px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.foot-group-title { font-family: var(--sans); font-size: 0.88rem; color: var(--ink); font-weight: 700; margin: 0; line-height: 1.65; padding: 8px 0; }
.foot-group-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px 24px; }
.foot-links a { display: block; font-size: 0.85rem; line-height: 1.65; min-height: 44px; padding: 8px 0; letter-spacing: 0; overflow-wrap: anywhere; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .foot-group { grid-template-columns: 1fr; gap: 12px; }
  .foot-group-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 18px; }
  .foot-links a { font-size: 0.88rem; }
}