/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  color: #222;
  line-height: 1.8;
  background: #fafaf8;
  -webkit-text-size-adjust: 100%;
}
/* iOS Safari does not honor position:sticky on descendants when html/body has overflow-x set,
   so the horizontal-scroll guard lives on this wrapper instead of html/body. */
.overflow-guard { overflow-x: hidden; width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: #163b66; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; margin: 0; padding: 0; }
.note-hanging { display: flex; }
.note-hanging .note-mark { flex: none; }
.note-hanging .note-text { flex: 1 1 auto; }
h1, h2, h3, h4 { line-height: 1.5; margin: 0 0 0.6em; font-weight: 700; }
/* 文節の切れ目（wbr_insert.pyが<wbr>を書き込む）でだけ折り返す。切れ目のない長い語は、はみ出さないよう途中で折り返す */
body { word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0 0 1em; text-align: left; }
.skip-link {
  position: absolute; left: -9999px; top: 0; background: #163b66; color: #fff;
  padding: 8px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

:root {
  --navy: #163b66;
  --navy-dark: #0e2645;
  --gold: #b8873b;
  --bg-alt: #f2f1ea;
  --max-width: 1080px;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ===== Header ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e3da;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-dark);
}
.logo:hover { text-decoration: none; }
.logo-img { height: 42px; width: auto; flex-shrink: 0; }
.site-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.site-nav .nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}
.site-nav .nav-more { display: none; }
.site-nav a {
  color: #333;
  font-size: 0.95rem;
  padding: 6px 2px;
  display: inline-block;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--gold); }
.nav-cta {
  background: var(--navy);
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 4px;
}
.nav-cta:hover { background: var(--navy-dark); border-bottom: none !important; }
.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-phone .phone-label { display: block; font-size: 0.7rem; color: #666; }
.header-phone .phone-number {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy-dark);
}
.header-line-btn { padding: 8px 18px; font-size: 0.92rem; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy-dark); }

/* ===== Hero ===== */
.hero {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: #fff;
  padding: 56px 0;
}
.hero .container { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.hero-text { flex: 1 1 380px; }
.hero-text p.eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 8px; }
.hero-text h1 { font-size: 1.8rem; margin-bottom: 16px; }
.hero-text h1 span { display: inline-block; }
.hero-text .lead { font-size: 1.02rem; color: #e7ecf3; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero-photo { flex: 0 1 240px; }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 3px solid rgba(184,135,59,0.6);
}
@media (max-width: 640px) {
  .hero-photo { flex-basis: 160px; margin: 0 auto; }
}
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--gold); color: #1a1a1a; }
.btn-primary:hover { background: #a3752c; }
.btn-outline { border: 1px solid #fff; color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ===== Sections ===== */
section { padding: 56px 0; }
section.alt { background: var(--bg-alt); }
.section-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.section-lead {
  text-align: center;
  color: #555;
  margin-bottom: 36px;
}
.page-h1 {
  font-size: 1.6rem;
  padding: 32px 0 8px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  border-left: 6px solid var(--gold);
}

/* ===== Grid cards ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.grid-3col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) {
  .grid-3col { grid-template-columns: 1fr; }
}
.card {
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 6px;
  padding: 24px;
}
.card h3 { color: var(--navy-dark); font-size: 1.05rem; margin-bottom: 10px; }
.card.card-fit-title h3 { font-size: 0.92rem; }
.step-num { display: block; color: var(--gold); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: 4px; }
.grid-steps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-steps .card { padding: 18px 16px; }
.grid-steps h3 { font-size: 0.98rem; }
.card ul { margin-top: 8px; }
.card li { position: relative; padding-left: 1.1em; margin-bottom: 4px; color: #444; font-size: 0.94rem; }
.card li::before { content: "・"; position: absolute; left: 0; color: var(--gold); }

.grid-single { grid-template-columns: 1fr; }
.card-wide { padding: 32px; }
.card-wide h3 { font-size: 1.2rem; text-align: center; margin-bottom: 16px; }
.service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 28px;
  margin-top: 8px;
}
.service-list li { font-size: 1.05rem; margin-bottom: 0; }
@media (max-width: 640px) {
  .service-list { grid-template-columns: repeat(2, 1fr); }
}

/* ===== News list ===== */
.news-list { border-top: 1px solid #e5e3da; }
.news-item {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #e5e3da;
  flex-wrap: wrap;
}
.news-item time { color: #888; flex-shrink: 0; width: 100px; }
.news-item a { color: #222; }

/* ===== FAQ ===== */
.faq-item {
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--navy-dark);
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 1.3rem;
  color: var(--gold);
}
.faq-item[open] summary::after { content: "－"; }
.faq-item .faq-answer { padding: 0 20px 18px; color: #444; }

/* ===== Contact box ===== */
.contact-box {
  background: var(--navy-dark);
  color: #fff;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
}
.contact-box p { text-align: center; }
.big-phone::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}
.contact-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.contact-box .section-title { margin-bottom: 16px; }
.contact-badge-row .free-consult-badge { margin-bottom: 0; }
.big-phone:hover { text-decoration: none; background: #a3752c; }
.contact-box .hours { color: #cdd8e6; margin-top: 16px; text-align: center; }

.line-btn, .mail-btn, .big-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 22px;
  border-radius: 6px;
  white-space: nowrap;
}
.big-phone { background: var(--gold); color: #1a1a1a; }
.mail-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}
.line-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #06C755;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3C6.48 3 2 6.58 2 11c0 2.5 1.44 4.74 3.7 6.22-.12.9-.45 2.02-1.2 3.28-.14.23.06.5.32.44 1.94-.44 3.4-1.2 4.36-1.8.9.18 1.85.28 2.82.28 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/%3E%3C/svg%3E");
  background-size: 62%;
  background-position: center;
  background-repeat: no-repeat;
}
.line-btn:hover, .mail-btn:hover { text-decoration: none; background: var(--navy-dark); }
.free-consult-badge {
  display: inline-block;
  background: var(--bg-alt);
  color: var(--navy-dark);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.phone-badge {
  display: block;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

table.info-table { width: 100%; max-width: 960px; margin: 0 auto; border-collapse: collapse; }
table.info-table th, table.info-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e3da;
  vertical-align: top;
}
table.info-table th { width: 140px; color: #555; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.row-label { display: inline-block; width: 4em; text-align: justify; text-align-last: justify; }

.row-stack-mobile { display: none; }
@media (max-width: 780px) {
  table.info-table tr.row-stack-desktop { display: none; }
  .row-stack-mobile { display: table-row; }
  .row-stack-mobile td { padding: 12px 16px; border-bottom: 1px solid #e5e3da; }
  .row-stack-mobile .row-label { text-align: left; text-align-last: left; width: auto; display: block; }
}

.bullet-item { padding-left: 1em; text-indent: -1em; margin-top: 8px; }
.bullet-item:first-child { margin-top: 0; }
.bullet-sub { padding-left: 1em; }

@media (max-width: 780px) {
  .row-stack-mobile .bullet-item,
  .row-stack-mobile .bullet-sub {
    font-size: 16px;
    white-space: nowrap;
  }
}

/* ===== Price page ===== */
.price-notice {
  background: #fff;
  border: 1px solid #e5e3da;
  border-left: 6px solid var(--gold);
  border-radius: 4px;
  padding: 16px 20px;
  margin-top: 20px;
}
.price-notice p { font-size: 0.95rem; color: #444; margin: 0; }
.price-notice p + p { margin-top: 6px; }
.price-notice strong { color: var(--navy-dark); }

.price-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.price-nav-compact { flex-wrap: nowrap; gap: 6px; }
.price-nav-compact a { padding: 7px 10px; font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 780px) {
  .price-nav-compact { flex-wrap: wrap; }
}
.price-nav a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.price-nav a:hover { background: var(--navy); color: #fff; text-decoration: none; }

.price-cat,
#shiho, #shakiho, #souzoku, #nenkin-seikyu, #igon, #souzoku-houki, #koken,
#debt, #saiban, #fudousan-touki, #kaisha-touki, #josei, #shogai-nenkin,
#rorei-nenkin, #shugyokisoku, #roumukanri, #mail-form { scroll-margin-top: calc(var(--header-h, 180px) + 8px); }
.price-cat + .price-cat { margin-top: 48px; }
.price-cat-title {
  font-size: 1.35rem;
  color: var(--navy-dark);
  padding-left: 14px;
  border-left: 6px solid var(--gold);
  margin-bottom: 20px;
}

.price-list { display: grid; gap: 14px; }
.price-list-compact { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.price-list-compact .price-item { grid-template-columns: 1fr auto; gap: 10px 20px; }
.price-list-compact .price-item-grouped { grid-column: 1 / -1; }
.price-item {
  background: #fff;
  border: 1px solid #e5e3da;
  border-radius: 8px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1.05fr);
  gap: 10px 32px;
  align-items: center;
  min-width: 0;
}
.price-item > * { min-width: 0; }
.price-item-grouped { min-width: 0; }
.price-subgroup { min-width: 0; }
.price-item-name {
  font-size: 1.05rem;
  color: var(--navy-dark);
  margin: 0;
  line-height: 1.6;
}
.price-item-note {
  display: block;
  font-weight: 400;
  font-size: 0.86rem;
  color: #666;
  line-height: 1.7;
  margin-top: 6px;
}

.price-single {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy-dark);
  text-align: right;
}
.price-single .unit { font-size: 0.95rem; margin-left: 2px; }
.price-ask { font-size: 1.05rem; color: #7a6a4f; }

.price-tiers { margin: 0; }
.price-tiers > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}
.price-tiers > div:last-child { border-bottom: none; padding-bottom: 0; }
.price-tiers > div:first-child { padding-top: 0; }
.price-tiers dt { color: #555; font-size: 0.94rem; }
.price-tiers dd { margin: 0; font-weight: 700; color: var(--navy-dark); text-align: right; }

.price-tiers-nowrap { flex-wrap: nowrap; }
.price-tiers-nowrap dt, .price-tiers-nowrap dd { white-space: nowrap; font-size: clamp(0.62rem, 2.6vw, 0.94rem); }

.price-item-grouped { display: block; }
.price-item-grouped .price-item-name { margin-bottom: 14px; }

.price-matrix-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
table.price-matrix { width: 100%; border-collapse: collapse; min-width: 480px; }
table.price-matrix th, table.price-matrix td {
  padding: 10px 14px;
  border: 1px solid #e5e3da;
  text-align: center;
  font-size: 0.92rem;
}
table.price-matrix thead th { background: #f7f4ec; color: var(--navy-dark); font-weight: 700; }
table.price-matrix tbody th, table.price-matrix tbody td:first-child {
  text-align: left;
  color: #555;
  font-weight: 700;
  background: #fafaf7;
}
table.price-matrix tbody td:not(:first-child) { font-weight: 700; color: var(--navy-dark); text-align: left; }
.price-subgroup { margin-top: 18px; }
.price-subgroup:first-of-type { margin-top: 0; }
.price-subgroup-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold, #a8863c);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid #e5e3da;
}
.price-subgroup .price-tiers > div { padding: 5px 0; }

@media (max-width: 720px) {
  .price-item { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  .price-item-name { font-size: 1rem; }
  .price-single { text-align: left; font-size: 1.35rem; }
  .price-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .price-nav a { padding: 7px 16px; font-size: 0.88rem; text-align: center; }
}

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
.required-badge { background: #c0392b; color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }

/* ===== Footer ===== */
.site-footer { background: var(--navy-dark); color: #cdd8e6; padding: 40px 0 90px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.footer-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
.footer-divider { width: 64px; height: 2px; background: var(--gold); margin: 16px 0; }
.footer-info p { margin-bottom: 6px; font-size: 0.92rem; line-height: 1.9; text-align: center; }
.footer-info a { color: #fff; }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.footer-nav a { color: #cdd8e6; font-size: 0.92rem; }
.copyright { text-align: center; font-size: 0.8rem; color: #8ea3bd; margin-top: 24px; }

/* ===== Fixed mobile CTA ===== */
.fixed-cta-row {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.fixed-cta-btn {
  flex: 1 1 33.333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  padding: 8px 6px 10px;
  font-weight: 700;
  min-height: 56px;
}
.fixed-cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.fixed-cta-btn span { font-size: 0.72rem; }
.fixed-cta-btn:hover { text-decoration: none; }
.fixed-cta-phone { background: var(--gold); color: #1a1a1a; }
.fixed-cta-mail { background: var(--navy); color: #fff; }
.fixed-cta-line { background: var(--navy); color: #fff; }

/* ===== Responsive ===== */
@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e5e3da;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  }
  /* メニューを開いたら、ヘッダーの下から画面の一番下までをメニューにする（2026-11-06。先生のご指示：メニューを下にスクロールしたら違うページに飛んでしまう。メニューの下に後ろのページのリンクが見えていて、そこに指が触れると飛ぶのを防ぐ） */
  .site-nav.is-open { display: block; position: fixed; top: var(--header-h, 76px); left: 0; right: 0; bottom: 0; max-height: none; padding: 8px 0 40px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: none; }
  body.nav-locked { position: fixed; left: 0; right: 0; width: 100%; }
  .site-nav .nav-row { flex-direction: column; align-items: stretch; padding: 0 20px; gap: 0; }
  .site-nav .nav-more { display: flex; }
  .site-nav a { display: block; padding: 12px 0; border-bottom: 1px solid #f0efe8; font-size: 0.88rem; }
  .header-actions { display: none; }
  .fixed-cta-row { display: flex; }
  body.nav-locked .fixed-cta-row { display: none; }
  .site-footer { padding-bottom: 100px; }
  .footer-contact-cta { display: none; }
  section:has(> .container > .footer-contact-cta) { display: none; }
  .hero-text h1 { font-size: 1.4rem; }
  .hero-cta { display: none; }

  table.info-table, table.info-table tbody, table.info-table tr,
  table.info-table th, table.info-table td {
    display: block;
    width: 100%;
  }
  table.info-table tr { margin-bottom: 18px; }
  table.info-table tr:last-child { margin-bottom: 0; }
  table.info-table th {
    white-space: normal;
    border-bottom: none;
    padding: 12px 16px 4px;
  }
  table.info-table td {
    padding-top: 0;
    text-align: left;
  }
}

.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; border-radius: 6px; overflow: hidden; margin: 24px 0; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.audio-link { margin: 16px 0 4px; }
.audio-link a { font-weight: 700; color: var(--navy-dark); text-decoration: none; }
.audio-link a:hover { text-decoration: underline; }
.audio-link a::before { content: "\25B6  "; color: var(--gold); }
.audio-link-note { font-size: 0.82rem; color: #888; margin: 0 0 16px; }

.video-search { max-width: 480px; margin: 20px auto 0; }
.video-search input {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 999px;
  font-size: 1rem;
}
.video-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.nowrap { white-space: nowrap; }
.label-fixed { display: inline-block; width: 2.6em; }
.x-apple-data-detectors,
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: inherit !important;
}
br.mobile-break { display: none; }
@media (max-width: 480px) {
  br.mobile-break { display: inline; }
  .mobile-text-left { text-align: left; }
  .nowrap-title { font-size: 1.25rem; }
  .fit-line-small { font-size: 0.8rem; white-space: nowrap; }
}

/* ===== スマホ表示の改善（令和8年11月5日。先生のご指示：iPhoneで見やすく） ===== */
.header-tel-sp { display: none; }
.hero-hours { display: none; }
@media (max-width: 720px) {
  /* 料金表：金額を、横スクロールなしで見せる（項目の下に金額を縦に並べる） */
  .price-matrix-wrap { overflow-x: visible; }
  table.price-matrix { min-width: 0; }
  table.price-matrix thead { display: none; }
  table.price-matrix, table.price-matrix tbody, table.price-matrix tr, table.price-matrix td { display: block; width: 100%; box-sizing: border-box; }
  table.price-matrix tr { border-bottom: 1px solid #e5e3da; padding: 10px 0; }
  table.price-matrix tbody tr:last-child { border-bottom: none; }
  table.price-matrix td { border: none; padding: 3px 12px; background: transparent; }
  table.price-matrix tbody td:first-child { background: transparent; color: #444; font-weight: 400; }
  table.price-matrix tbody td:not(:first-child) { font-size: 1.05rem; }
  table.price-matrix-labeled tbody td:first-child { font-weight: 700; color: #0e2645; }
  table.price-matrix-labeled td[data-label]::before { content: attr(data-label) "　"; font-weight: 400; font-size: 0.85rem; color: #666; }
}
@media (max-width: 780px) {
  /* ヘッダーに、押せる電話ボタン */
  .header-inner { gap: 8px; padding: 10px 14px; }
  .logo { font-size: 0.95rem; }
  .header-tel-sp { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; background: var(--gold); color: #1a1a1a; flex-shrink: 0; }
  .header-tel-sp svg { width: 22px; height: 22px; }
  .nav-toggle { padding: 12px 10px; }
  /* 最初の1画面：電話ボタンと受付時間を出し、写真を小さくして入口を早く出す */
  .hero { padding: 28px 0 24px; }
  .hero .container { gap: 18px; }
  .hero-text .lead { font-size: 0.98rem; }
  .hero-cta { display: flex; margin-top: 16px; }
  .hero-cta .mail-btn, .hero-cta .line-btn { display: none; }
  .hero-cta .btn-primary { width: 100%; text-align: center; font-size: 1.1rem; padding: 16px 12px; }
  .hero-hours { display: block; margin: 10px 0 0; font-size: 0.95rem; color: #e7ecf3; text-align: center; }
  .hero-photo { flex-basis: 120px; }
  /* 小さい文字・押しにくいリンク */
  .fixed-cta-btn span { font-size: 0.8rem; }
  .required-badge { font-size: 0.78rem; }
  .audio-link-note { font-size: 0.875rem; }
  nav.breadcrumb { font-size: 0.9rem !important; line-height: 2.2; }
  nav.breadcrumb a { display: inline-block; padding: 6px 2px; }
  .footer-nav a { display: inline-block; padding: 8px 2px; }
}

/* ===== 見出しの改行（2026-11-05）：見出しの（　）を二行目へ。1〜2文字だけの行ができにくくする ===== */
h1, h2, h3 { text-wrap: balance; }
.page-h1 .h-sub { display: block; font-size: 0.78em; line-height: 1.5; margin-top: 0.35em; }
h2 .h-sub, h3 .h-sub { display: inline-block; }

/* ===== 料金の注意書きを中央に・料金の細かい項目を箇条書きに（2026-11-05） ===== */
p.price-note { max-width: 720px; margin: 0 auto; text-align: center; text-wrap: balance; }
ul.price-sub { margin: 6px 0 6px; padding-left: 0; }
ul.price-sub li { margin-bottom: 4px; padding-left: 1em; text-indent: -1em; }
ul.price-sub li::before { content: "・"; }
span.nw { white-space: nowrap; }
ul.price-sub li { text-wrap: balance; }

/* 印のない箇条書きに「・」を付ける（2026-11-06。先生のご指示：箇条書きを見やすく）。文字は足さず、CSSだけで出す */
ul.dot-list { margin-bottom: 12px; }
ul.dot-list li { position: relative; padding-left: 1em; }
ul.dot-list li::before { content: "・"; position: absolute; left: 0; }

/* よくある質問の質問文が「＋」に重ならないようにする（2026-11-05） */
.faq-item summary { padding-right: 48px; text-wrap: balance; }

/* 本文の右端をそろえる（2026-11-05。先生のご指示：右端がバラバラで見づらい）。
   スマホ幅では、文字の間が大きく空いて逆に読みにくいので、パソコン・タブレット幅（781px以上）だけ */
@media (min-width: 781px) {
  ul[style*="max-width:960px"], ol[style*="max-width:960px"], p[style*="max-width:960px"],
  section .container > p:not([class]):not([style]) { text-align: justify; text-justify: inter-character; }
}
/* 2026-11-06：iPhoneでも右端をそろえる（先生のご指示）。折り返し位置を増やした（wbr_insert.pyの、ひらがなのあと語の頭）ので、
   スマホ幅でも字間が空きすぎない。中央・右寄せの指定がある部品（クラスや行内のtext-align）はそちらが優先される */
main p, main li, main dd { text-align: justify; text-justify: inter-character; }

/* ===== 読みやすさの試作（2026-11-06）：要点ボックス・目次チップ・時系列・「くわしく見る」。文字は増減させず、HTMLにそのまま残す（検索エンジンが読む文字は変わらない） ===== */
section[id] { scroll-margin-top: 90px; }
.keypoints { max-width: 960px; margin: 0 auto 20px; background: #fff; border: 1px solid #e5e3da; border-left: 6px solid var(--gold); border-radius: 6px; padding: 16px 18px; }
.kp-title { font-weight: 700; color: var(--navy-dark); margin: 0 0 10px; text-align: left; }
.kp-list { list-style: none; margin: 0; padding: 0; }
.kp-list li { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid #eee; }
.kp-list li:first-child { border-top: none; padding-top: 0; }
.kp-tag { align-self: flex-start; background: var(--navy); color: #fff; font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.toc { max-width: 960px; margin: 0 auto 20px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { display: block; padding: 8px 14px; border: 1px solid var(--navy); border-radius: 999px; font-size: 0.88rem; color: var(--navy); background: #fff; text-decoration: none; }
ol.flow { list-style: none; counter-reset: f; max-width: 960px; margin: 0 auto; padding: 0; }
ol.flow li { position: relative; counter-increment: f; padding: 0 0 22px 52px; text-align: left; }
ol.flow li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
ol.flow li::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: 6px; width: 2px; background: #d9d4c3; }
ol.flow li:last-child { padding-bottom: 0; }
ol.flow li:last-child::after { display: none; }
.flow-when { display: block; font-weight: 700; color: var(--navy-dark); margin-bottom: 4px; }
ol.flow p { margin: 0; }
.cell-lead { margin: 0 0 4px; }
details.cell-more summary { cursor: pointer; color: var(--navy); font-weight: 700; font-size: 0.9rem; padding: 8px 0; }
details.cell-more p { margin: 4px 0 0; }
@media (min-width: 781px) {
  .kp-list li { flex-direction: row; align-items: baseline; gap: 14px; }
  .kp-tag { min-width: 8.5em; text-align: center; }
}
.kp-list li span, ol.flow p, .cell-lead, details.cell-more p { text-align: left; text-justify: auto; }
/* 2026-11-06：幅の狭いカード（入口カード・手順カード）は左そろえ。両端そろえにすると、1行が短くて字間が大きく開く（先生のご指摘） */
.grid:not(.grid-single) .card p, .grid:not(.grid-single) .card li, .grid:not(.grid-single) .card dd { text-align: left; text-justify: auto; }

/* ===== パネル化（2026-11-06。先生のご指示「全体的に文字が多すぎる。パネルなどで見やすく」「トップページはパネルがあったほうが見やすかった」）=====
   本文の節を、白い枠つきの面（パネル）にして、節ごとに区切って見えるようにする。文字・HTMLは変えない（検索エンジンが読む文字は同じ）。
   除く：トップのヒーロー、問い合わせの帯（.contact-box）、入口カードの節（.entry-group。すでにカード） */
main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) { padding: 14px 20px; background: transparent; }
main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) > .container { background: #fff; border: 1px solid #e5e3da; border-top: 4px solid #163b66; border-radius: 10px; padding: 26px 28px; box-shadow: 0 2px 8px rgba(14,38,69,0.06); }
@media (max-width: 780px) {
  main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) { padding: 10px 8px; }
  main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) > .container { padding: 18px 14px; }
}

/* ===== ページの背景色（2026-11-06。先生のご指摘「背景も白でパネルも白で、区別が付かず見づらい」）=====
   本文の背景を、紺色（--navy）になじむ薄い青灰色にして、白いパネル・カードをはっきり浮かせる。
   ヘッダー・フッター・ヒーロー・問い合わせの帯の色は変えない。.alt の節（入口カードの節など）も同じ背景に溶け込ませる */
main { background: #e4eaf2; }
main > section.alt:not(.hero) { background: transparent; }

/* スマホ幅：パネルと要点ボックスの余白が二重になり、文字の行が細くなるので、余白を詰める（2026-11-06。見る方の読みやすさ） */
@media (max-width: 780px) {
  main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) { padding: 8px 6px; }
  main > section:not(.hero):not(:has(.contact-box)):not(:has(.entry-group)) > .container { padding: 16px 10px; }
  .keypoints { padding: 14px 12px; border-left-width: 4px; }
}

/* 要点ボックスの見出しラベル（紺色に白抜き）の文字は中央に（2026-11-06。先生のご指示）。
   `.kp-list li span`の左そろえが、`.kp-tag`の中央そろえを打ち消していたので、より強い指定で中央に戻す */
.kp-list li span.kp-tag { text-align: center; }

/* 右端そろえで字間が開きすぎる段落だけ左そろえにする（2026-11-06。先生のご指摘：iPhoneで字間が空きすぎて見づらい）。
   印（nj-m：スマホ幅／nj-d：PC幅）は mark_nj.py が、全ページを実際の幅で測って付ける */
@media (max-width: 780px) { main p.nj-m, main li.nj-m, main dd.nj-m { text-align: left; text-justify: auto; } }
@media (min-width: 781px) { main p.nj-d, main li.nj-d, main dd.nj-d { text-align: left; text-justify: auto; } }

/* 「①」などの番号で始まる見出し・表の見出し・カードの題：2行目を、番号の次の文字の頭にそろえる（2026-11-06。先生のご指示）。
   HTMLは <i class="hg"><i class="cn">①</i><i class="ct">題</i></i> の形（hang_num.py が作る） */
.hg { display: flex; align-items: baseline; font-style: normal; text-align: left; }
.hg > .cn { flex: none; width: 1.5em; font-style: normal; }
.hg > .ct { flex: 1 1 0; min-width: 0; font-style: normal; }