/* 紹介ページ（base.css の上に重ねる） */

.top-band { border-bottom: 1px solid var(--rule-soft); }
.top { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-md); text-decoration: none; }
.brand small { font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); margin-left: var(--s1); }
.top nav { display: flex; gap: var(--s4); margin-left: auto; font-size: var(--t-sm); }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
.login-error { max-width: var(--wrap); margin: var(--s4) auto 0; padding-block: var(--s3); border: 1px solid var(--shu); background: var(--shu-soft); }

.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; padding-block: var(--s7); }
.hero h1 { font-family: var(--f-title); font-weight: 700; font-size: var(--t-xl); line-height: 1.4; overflow-wrap: break-word; min-width: 0; }
.hero-text > p { margin-top: var(--s4); color: var(--ink-2); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); }
/* 見本の伝票は列が少ないので、幅いっぱいに収める */
#lp-slip table.lines { min-width: 0; }
#lp-slip .lines th, #lp-slip .lines td { padding-inline: var(--s2); }

.block { padding-block: var(--s7); border-top: 1px solid var(--rule-soft); }
.block h2 { font-family: var(--f-title); font-size: var(--t-lg); font-weight: 700; }
.block-lead { color: var(--ink-2); margin-top: var(--s2); max-width: 42em; }

.steps { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); counter-reset: step; }
.steps li { border-top: 1.5px solid var(--rule); padding-top: var(--s3); counter-increment: step; }
.steps h3 { font-size: var(--t-md); }
.steps h3::before { content: counter(step) "．"; font-family: var(--f-num); color: var(--ink-2); }
.steps p { color: var(--ink-2); margin-top: var(--s1); }

.feature-list { margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--rule); }
.feature-list > div { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }
.feature-list > div:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
.feature-list > div:nth-child(even) { padding-left: var(--s4); }
.feature-list dt { font-weight: 700; }
.feature-list dd { margin: var(--s1) 0 0; color: var(--ink-2); }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.plain-list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--rule); }
.plain-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }


.faq { margin-top: var(--s4); border-top: 1.5px solid var(--rule); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--rule-soft); padding: var(--s3) 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin-top: var(--s2); color: var(--ink-2); }

.foot { border-top: 1.5px solid var(--rule); padding-block: var(--s6) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.foot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero, .two { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .feature-list { grid-template-columns: minmax(0, 1fr); }
  .feature-list > div:nth-child(odd) { border-right: 0; }
  .feature-list > div:nth-child(even) { padding-left: 0; }
}
@media (max-width: 600px) {
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
}
.price { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1.5px solid var(--rule); background: var(--paper); display: inline-grid; gap: var(--s1); max-width: 100%; }
.price-main { margin: 0; font-weight: 700; font-size: var(--t-lg, 1.5rem); }
.price-main .num { font-size: 2em; letter-spacing: .02em; }
.price-main small { font-size: var(--t-sm); font-weight: 400; color: var(--ink-2); margin-left: var(--s1); }
.price-sub { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.price-list { margin-top: var(--s4); }