/* ==========================================================================
   site.css — shared header / footer first, page-specific blocks after.
   Page-specific CSS is appended at the end of this file, one marker comment
   per page. Values come from tokens.css only.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--h-header);
}

/* ---- logo ----------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--s-2);
  color: var(--c-ink);
  text-decoration: none;
  flex: none;
}

.logo__mark {
  width: 26px;
  height: 26px;
  color: var(--c-ink);
  transition: color var(--d-base) var(--e-out);
}

.logo__text {
  font-family: var(--f-head);
  font-size: var(--t-lg);
  font-weight: var(--w-head);
  letter-spacing: .04em;
  line-height: 1;
}

.logo:hover { color: var(--c-ink); }
.logo:hover .logo__mark { color: var(--c-ink); }

/* ---- desktop navigation ---------------------------------------------------- */

.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-block;
  padding-block: var(--s-2);
  color: var(--c-ink-2);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover { color: var(--c-ink); }

.site-nav__link[aria-current="page"] {
  color: var(--c-ink);
  border-bottom-color: var(--c-ink);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: var(--s-5);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--r-full);
  transition: transform var(--d-base) var(--e-out),
              opacity var(--d-fast) var(--e-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }

.is-nav-open .nav-toggle__bars { background: transparent; }
.is-nav-open .nav-toggle__bars::before { transform: rotate(45deg); }
.is-nav-open .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ---- mobile: fold the four links away, keep the CTA ------------------------ */

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d-base) var(--e-out),
                transform var(--d-base) var(--e-out),
                visibility var(--d-base);
  }

  .is-nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 2026-10-08。**セレクタを `.site-nav .site-nav__list` にしてあります。**
     base.css の `ul[class], ol[class] { padding: 0 }` は (0,1,1) で、
     `.site-nav__list`（0,1,0）より強いため、ここの padding が丸ごと負けて
     いました。開いたメニューの文字が画面の左端から始まっていたのはこれです。
     左右の余白は、ヘッダーや本文と同じ --pad-x です（新しい値は足していません）。 */
  .site-nav .site-nav__list {
    display: block;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-block: var(--s-2) var(--s-5);
    padding-inline: var(--pad-x);
  }

  .site-nav__list li + li { border-top: 1px solid var(--c-line); }

  .site-nav__link {
    display: block;
    padding: var(--s-4) 0;
    font-size: var(--t-md);
    border-bottom: none;
  }

  .site-nav__link[aria-current="page"] { color: var(--c-ink); }

  .site-header__actions { margin-left: auto; }
}

@media (max-width: 420px) {
  .site-header__cta { padding-inline: var(--s-4); letter-spacing: 0; }
  .logo__text { font-size: var(--t-md); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-9) var(--s-7);
}

.site-footer__brand { margin-bottom: var(--s-7); }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}

.site-footer__heading {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  color: var(--c-mut);
  margin-bottom: var(--s-4);
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-ink-2);
  font-size: var(--t-base);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--c-ink);
  text-decoration: underline;
}

.site-footer__copy {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--c-mut);
}

@media (max-width: 640px) {
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* ==========================================================================
   Shared page pieces
   ========================================================================== */

.block-title { margin-bottom: var(--s-6); }

/* ---- page head: the h1 and its lead, on every page but the top ----------- */

.page-head {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) var(--s-8);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}

.page-head h1 {
  font-size: var(--t-3xl);
  max-width: var(--w-narrow);
}

.page-head__lead {
  max-width: var(--w-text);
  margin-top: var(--s-5);
  font-size: var(--t-md);
  color: var(--c-ink-2);
}

/* ---- prose: running legal text, held to a readable measure --------------- */

.prose { max-width: var(--w-text); }

.prose h2 {
  font-size: var(--t-xl);
  margin-top: var(--s-9);
  margin-bottom: var(--s-4);
}

.prose > h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: var(--t-md);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}

.prose p { color: var(--c-ink-2); }

.prose ol,
.prose ul {
  margin: var(--s-4) 0 0;
  padding-left: 0;
  list-style: none;
  color: var(--c-ink-2);
}

.prose li + li { margin-top: var(--s-3); }

/* numbered clauses: 1. 2. 3. */
.prose ol {
  counter-reset: clause;
}

.prose ol > li {
  position: relative;
  padding-left: var(--s-6);
  counter-increment: clause;
}

.prose ol > li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  font-weight: var(--w-num);
  color: var(--c-ink);
}

/* bullets */
.prose ul > li {
  position: relative;
  padding-left: var(--s-5);
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--c-ink);
}

/* a bullet list nested inside a numbered clause */
.prose ol ul {
  margin-top: var(--s-3);
}

.prose .dated {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-mut);
}

.prose .dated span { display: block; }

/* ---- data table: company facts, statutory notices ------------------------ */

.data-table {
  width: 100%;
  max-width: var(--w-narrow);
  border-top: 1px solid var(--c-line);
}

.data-table th,
.data-table td {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  width: 200px;
  padding-right: var(--s-5);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  white-space: nowrap;
}

.data-table td { color: var(--c-ink-2); }

.data-table td p + p { margin-top: var(--s-2); }

@media (max-width: 640px) {
  .data-table th,
  .data-table td { display: block; width: auto; white-space: normal; }
  .data-table th { padding: var(--s-4) 0 var(--s-2); border-bottom: 0; }
  .data-table td { padding-top: 0; }
}

/* ---- titled list: a heading and one line of explanation, repeated -------- */

.titled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-narrow);
}

.titled-list > li {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.titled-list > li:first-child { border-top: 1px solid var(--c-line); }

.titled-list dt,
.titled-list__title {
  font-size: var(--t-md);
  font-weight: var(--w-head);
  color: var(--c-ink);
}

.titled-list dd,
.titled-list__body {
  margin: var(--s-2) 0 0;
  font-size: var(--t-base);
  color: var(--c-ink-2);
  line-height: var(--lh-head);
}

/* ---- plain marked list: the "we do not do this" kind --------------------- */

.mark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-narrow);
}

.mark-list > li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-md);
  color: var(--c-ink-2);
  line-height: var(--lh-head);
}

.mark-list > li + li { margin-top: var(--s-4); }

.mark-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-ink);
}

/* Diagrams and line drawings sit on a card that stays white in both themes.
   See CLAUDE.md 共通のきまり — no dark variant of the image is made. */
.figure-card {
  padding: var(--s-6);
  background: var(--c-figure-card);
  border: 1px solid var(--c-figure-card-line);
  border-radius: var(--r-lg);
}

/* on a narrow screen a 32px inset leaves the drawing too small to read */
@media (max-width: 400px) {
  .figure-card { padding: var(--s-4); }
}

/* ---- the customer's screen: a mock-up held to 520px ---------------------- */

.screens-section { background: var(--c-bg-2); }

.screens-section .block-title { margin-bottom: var(--s-3); }

.screens-figure {
  max-width: 520px;
  margin: var(--s-7) auto 0;
}

.screens-figure img {
  width: 100%;
  height: auto;
}

/* ---- a single figure at full scale --------------------------------------- */

.stat-band {
  background: var(--c-bg-2);
  padding-block: var(--s-section);
}

.stat-huge {
  display: block;
  font-weight: var(--w-head);
  font-size: clamp(4rem, 1rem + 16vw, 11rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--c-ink);
  margin-block: var(--s-6) var(--s-7);
}

.stat-huge__unit {
  font-size: .34em;
  letter-spacing: -.01em;
}

.stat-band__text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  max-width: var(--w-page);
}

.stat-band__text p + p { margin-top: 0; }

@media (max-width: 760px) {
  .stat-band__text { grid-template-columns: minmax(0, 1fr); }
}

/* ---- price card: one card, centred and large ------------------------------ */

.price-section { text-align: center; }

.price-section .measure { margin-inline: auto; }

.price-card {
  max-width: 560px;
  margin: var(--s-8) auto 0;
  padding: var(--s-8) var(--s-7);
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

.price-card__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: clamp(3rem, 1.4rem + 6vw, 5rem);
  font-weight: var(--w-num);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

.price-card__unit {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  letter-spacing: 0;
  color: var(--c-ink-2);
}

.price-card__list {
  display: inline-block;
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  text-align: left;
}

.price-card__list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-base);
  color: var(--c-ink-2);
  line-height: var(--lh-head);
}

.price-card__list li + li { margin-top: var(--s-3); }

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-ink);
}

.price-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
  font-size: var(--t-lg);
  font-weight: var(--w-num);
  color: var(--c-ink);
}

.price-ladder__sep { color: var(--c-ink); }

/* ---- faq accordion --------------------------------------------------------- */

.faq-list {
  max-width: var(--w-narrow);
  border-top: 1px solid var(--c-line);
}

/* ---- the owner: photo left, text right ------------------------------------ */

/* the column is wider than the 180px photo so that the job title below it
   does not break in the middle of 代表取締役 */
.person {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

.person__media { margin: 0; }

.person__media img {
  width: 180px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-mid);
}

.person__id { display: block; margin-top: var(--s-3); }

.person__name {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.person__role {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-mut);
}

@media (max-width: 960px) {
  .person { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .person__media { max-width: 220px; }
}

/* ---- closing cta ----------------------------------------------------------- */

.final-cta {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-section);
  text-align: center;
}

.final-cta .measure { margin-inline: auto; }

.final-cta .btn-row { justify-content: center; margin-top: var(--s-7); }

/* ---- numbered run-down: a vertical list, not cards ------------------------ */

.numbered {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-narrow);
  counter-reset: step;
}

.numbered > li {
  position: relative;
  padding: var(--s-6) 0 var(--s-6) var(--s-9);
  border-bottom: 1px solid var(--c-line);
  counter-increment: step;
}

.numbered > li:first-child { border-top: 1px solid var(--c-line); }

.numbered > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s-6);
  font-size: var(--t-xl);
  font-weight: var(--w-head);
  line-height: 1;
  color: var(--c-ink);
}

.numbered__title {
  display: block;
  font-size: var(--t-lg);
  font-weight: var(--w-head);
  color: var(--c-ink);
}

.numbered__body {
  margin: var(--s-3) 0 0;
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink-2);
}

@media (max-width: 520px) {
  .numbered > li { padding-left: var(--s-7); }
}

/* ---- term list: a short label and its explanation, side by side ----------- */

.term-list {
  margin: 0;
  max-width: var(--w-narrow);
  border-top: 1px solid var(--c-line);
}

.term-list__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.term-list dt {
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

.term-list dd {
  margin: 0;
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink-2);
}

@media (max-width: 640px) {
  .term-list__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* ---- two columns of plain items, stacking on a narrow screen -------------- */

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
}

.two-col__head {
  font-size: var(--t-md);
  font-weight: var(--w-head);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
}

@media (max-width: 960px) {
  .two-col { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}

/* ---- three figures side by side ------------------------------------------ */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  list-style: none;
  padding: 0;
}

.fact {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: var(--s-4) var(--s-3);
  text-align: center;
}

.fact__num {
  display: block;
  font-size: var(--t-xl);
  font-weight: var(--w-head);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.fact__unit {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--c-ink);
}

.fact__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--c-mut);
}

/* ========================================================================== */
/* ===== top ===== */
/* ========================================================================== */

/* ---- 01 first view: the photo is the ground, the words sit on its white --- */

.hero {
  position: relative;
  min-height: 380px;
  /* one column: the words, then the photo below on a narrow screen.
     minmax(0,1fr) stops the wide photo forcing the section open. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-block: clamp(2.5rem, 1.4rem + 5vw, 4.5rem);
  background-color: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.hero__photo {
  width: 100%;
  height: auto;
}

.hero__body { max-width: 560px; }

/* ★ — one of the two things gold is for */
.hero__stars {
  color: var(--c-gold);
  font-size: var(--t-lg);
  letter-spacing: .12em;
  line-height: 1;
  margin-bottom: var(--s-4);
}

.hero__title {
  font-size: var(--t-3xl);
  color: var(--c-ink);
  margin-bottom: var(--s-5);
}

.hero__lead {
  font-size: var(--t-md);
  color: var(--c-ink-2);
  margin-bottom: var(--s-6);
}

.hero__note { margin-top: var(--s-5); }

/* wide: the photo becomes the background, right-anchored so its white
   left third sits under the words. No overlay — it stays bright.
   The switch happens at 1100px, not 960px: below that the 560px column
   would reach past the white part of the photo and sit on the pop. */
@media (min-width: 1100px) {
  .hero {
    background-image: url("/assets/img/hero.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
  }

  .hero__photo { display: none; }
}

/* narrow: the photo drops below the words so nothing overlaps */
@media (max-width: 1099px) {
  .hero__photo { margin-top: var(--s-7); }

  .hero__body { max-width: none; }
}

/* ---- 03 three steps: line drawing above the cards, white ground ----------- */

.steps-section { background: var(--c-bg); }

.steps-figure {
  max-width: 900px;
  margin: 0 auto var(--s-7);
}

.steps-figure img {
  width: 100%;
  height: auto;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.step {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.step__num {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: var(--w-num);
  letter-spacing: .18em;
  color: var(--c-mut);
  margin-bottom: var(--s-4);
}

.step__title {
  font-size: var(--t-lg);
  margin-bottom: var(--s-3);
}

.step__body {
  font-size: var(--t-base);
  color: var(--c-ink-2);
  line-height: var(--lh-head);
}

.steps-close {
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  margin-bottom: var(--s-5);
}

@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 07 industries: eight cards, two columns by four rows ----------------- */

.industry-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.industry-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 132px;
  padding: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.industry-card__name {
  font-size: var(--t-lg);
  font-weight: var(--w-head);
  line-height: var(--lh-head);
}

.industry-card__go {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--c-ink);
}

.industry-card__go::after {
  content: "→";
  margin-left: var(--s-2);
  display: inline-block;
  transition: transform var(--d-base) var(--e-out);
}

.industry-card:hover {
  border-color: var(--c-ink);
  box-shadow: var(--sh-md);
  color: var(--c-ink);
  transform: translateY(-2px);
}

.industry-card:hover .industry-card__go::after { transform: translateX(3px); }

@media (max-width: 520px) {
  .industry-card { min-height: 0; padding: var(--s-5); gap: var(--s-3); }
  .industry-card__name { font-size: var(--t-base); }
}

/* at 375px a 24px inset leaves 106px, one pixel short of「美容室・サロン」 */
@media (max-width: 400px) {
  .industry-card { padding: var(--s-4); }
}

/* ========================================================================== */
/* ===== policy ===== */
/* ========================================================================== */

/* an extract from someone else's published document */
.quote {
  max-width: var(--w-text);
  margin: var(--s-6) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid var(--c-line);
}

.quote p {
  font-size: var(--t-md);
  line-height: var(--lh-head);
  color: var(--c-ink);
}

.quote cite {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  font-style: normal;
  line-height: 1.6;
  color: var(--c-mut);
}

/* 05: the same figure, and the same treatment, as block 04 on the top page */
.policy-stat { background: var(--c-bg-2); }

/* ========================================================================== */
/* ===== contact ===== */
/* ========================================================================== */

.form-card {
  max-width: var(--w-text);
  padding: var(--s-7);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.form-card .choice { margin-top: var(--s-6); }

.form-card .btn { margin-top: var(--s-7); }

@media (max-width: 520px) {
  .form-card { padding: var(--s-5); }
}

/* ========================================================================== */
/* ===== company ===== */
/* ========================================================================== */

.company-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========================================================================== */
/* ===== terms / privacy / law ===== */
/* ========================================================================== */

/* the legal pages hold their text to the same 680px measure as .prose */
.data-table--text { max-width: var(--w-text); }

/* ========================================================================== */
/* ===== flow ===== */
/* ========================================================================== */

.flow-step {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.flow-step__label {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: .18em;
  line-height: 1.2;
  color: var(--c-mut);
  padding-top: var(--s-2);
}

.flow-step__body { max-width: var(--w-text); }

.flow-step__note {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-mut);
}

.q-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
}

.q-list > li {
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink);
}

.q-list > li + li { margin-top: var(--s-3); }

.q-list b {
  margin-right: var(--s-3);
  font-weight: var(--w-head);
}

@media (max-width: 760px) {
  .flow-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .flow-step__label { padding-top: 0; }
}

/* ========================================================================== */
/* ===== pop ===== */
/* ========================================================================== */

.copy-block {
  max-width: var(--w-narrow);
  margin-top: var(--s-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.copy-block__bar {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-2);
}

.copy-block__text {
  margin: 0;
  padding: var(--s-6);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink);
  white-space: pre-wrap;
  overflow-x: auto;
}

@media (max-width: 520px) {
  .copy-block__text { padding: var(--s-5) var(--s-4); }
}

/* ========================================================================== */
/* ===== price ===== */
/* ========================================================================== */

.price-section .price-card { margin-top: var(--s-7); }

.price-section .btn-row { justify-content: center; margin-top: var(--s-7); }

/* ========================================================================== */
/* ===== industries ===== */
/* ========================================================================== */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

@media (min-width: 768px) {
  .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.industry-grid__item {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  line-height: var(--lh-head);
  text-decoration: none;
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}

.industry-grid__item:hover {
  border-color: var(--c-ink);
  box-shadow: var(--sh-sm);
  opacity: 1;
}

/* ========================================================================== */
/* ===== faq ===== */
/* ========================================================================== */

.faq-group + .faq-group { margin-top: var(--s-9); }

.faq-group__head {
  font-size: var(--t-xl);
  margin-bottom: var(--s-5);
}

/* ========================================================================== */
/* ===== signup ===== */
/* ========================================================================== */

.signup-links {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: var(--w-narrow);
}

/* ========================================================================== */
/* ===== industry ===== */
/* ========================================================================== */
/* One stylesheet block shared by all 22 industry pages. */

.industry-head .facts { max-width: var(--w-narrow); margin-top: var(--s-7); }

.industry-head .btn-row { margin-top: var(--s-6); }

/* 03: the three questions and their options */
.choice-set + .choice-set { margin-top: var(--s-7); }

.choice-set__head {
  font-size: var(--t-md);
  font-weight: var(--w-head);
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips > li {
  padding: var(--s-2) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink);
}

/* 04: where to put the pop, and when */
.place-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--w-narrow);
}

.place-list > li {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: var(--lh-head);
  color: var(--c-ink-2);
}

.place-list > li:first-child { border-top: 1px solid var(--c-line); }

.place-list b {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-md);
  font-weight: var(--w-head);
  color: var(--c-ink);
}

@media (min-width: 761px) {
  .place-list b {
    display: inline;
    margin-bottom: 0;
    margin-right: var(--s-4);
  }
}

/* 06: the three neighbouring industries */
.related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
}

@media (max-width: 760px) {
  .related-list { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 業種ページのヘッダー写真（22枚） ===== */
/* トップの .hero と同じ仕掛けです。1100px以上で写真を背景（右寄せ）にし、
   1099px以下では <img> として文章の下に落とします。1100 はトップで実測して
   決めた値で、下げると 560px の文章が写真の白い部分をはみ出して重なります。

   白地にするのは .industry-head だけです。.page-head を共有している12ページ
   （/policy/ /privacy/ /faq/ など）は写真を持たないので、帯（--c-bg-2）の
   ままにします。白にする理由は写真の左3分の1が白いことなので、写真の無い
   ページには理由がありません。 */
.industry-head {
  position: relative;
  background: var(--c-bg);
}

.industry-head__photo {
  width: 100%;
  height: auto;
  margin-top: var(--s-7);
}

@media (min-width: 1100px) {
  .industry-head {
    min-height: 380px;
    display: grid;
    align-content: center;
    background-image: url("/assets/img/hero.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
  }

  /* トップの .hero__body と同じ 560px。写真の白い部分の中に収めます */
  .industry-head h1,
  .industry-head .page-head__lead,
  .industry-head .facts,
  .industry-head .btn-row { max-width: 560px; }

  .industry-head__photo { display: none; }
}

/* 写真が明るいので、暗い地に置くと文字が白くなって読めなくなります。
   トップの .hero と同じく、ダークモードでもライトの変数を再指定します。 */
:root:not([data-theme="light"]) .industry-head,
:root[data-theme="dark"] .industry-head {
  --c-bg:      #ffffff;
  --c-bg-2:    #f4f6f8;
  --c-ink:     #14181d;
  --c-ink-2:   #414852;
  --c-mut:     #68717b;
  --c-line:    #e2e6ea;
  --c-deep:    #142230;
  --c-on-deep: #ffffff;

  --sh-sm: 0 1px 2px rgba(20, 24, 29, .05);
  --sh-md: 0 2px 6px rgba(20, 24, 29, .06), 0 8px 20px rgba(20, 24, 29, .05);
  --sh-press: 0 6px 18px rgba(20, 34, 48, .20);
}

/* ===== /signup/ 店舗数 ===== */
/* モック（mock/signup-shops-mock.html）の案A-1から。値は tokens.css のみ。 */
.shops-step { display: flex; align-items: center; gap: var(--s-3); }
.shops-step__btn {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--f-body); font-size: var(--t-lg); font-weight: var(--w-bold);
  cursor: pointer;
}
.shops-step__btn:disabled { opacity: .35; cursor: default; }
.shops-step__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.shops-step .input { width: 88px; min-height: 48px; text-align: center; font-size: var(--t-md); }
.shops-step__unit { font-size: var(--t-md); }

.shops-total {
  margin-top: var(--s-4); padding: var(--s-4);
  background: var(--c-bg-2); border-radius: var(--r-md);
}
.shops-total__calc { font-size: var(--t-sm); color: var(--c-mut); }
.shops-total__sum { font-size: var(--t-xl); font-weight: var(--w-head); line-height: var(--lh-tight); }
.shops-total__sum small { font-size: var(--t-sm); font-weight: var(--w-normal); }
/* 101以上を100に直したことの知らせ。黙って変えると気づかれません。 */
.shops-over { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--c-ink); }
.shops-max { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--c-mut); }

/* ===== ブログ（/blog/） ===== */
/* 値は tokens.css の変数だけです。新しい色は足していません。 */

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }

/* カード全体が1つのリンクです。中に別のリンクを置かないでください。 */
.post-card__link {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
}

.post-card__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* 既定は縦積み（画像が上・文字が下）。760px未満は横長カードもこの形に戻します。 */
.post-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.post-card__body { display: block; padding: var(--s-5); }

.post-card__date { display: block; font-size: var(--t-sm); color: var(--c-mut); }

.post-card__title {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-lg);
  font-weight: var(--w-head);
  line-height: var(--lh-head);
  overflow-wrap: anywhere;
}

.post-card__lead { display: block; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-ink-2); line-height: var(--lh-body); }

/* 2026-10-06。一覧の帯だけ、内側の余白を詰めます（オーナー指示）。
   1280×800 で、先頭記事のタイトルの2行目が画面の下に出ていました。
   上 71.7px → 32px、下 48px → 24px の、合わせて 63.7px ぶんです。

   **詰めるのは帯の内側だけです。**帯と、その下の白い部分（先頭の記事カード）の
   あいだの余白は、オーナーの指示で広げたところなので動かしません。
   あれは次の section の padding-top で、ここでは触っていません。

   760px 未満には効かせません。スマホの見え方は今までどおりです。
   ほかのページの帯も変わりません（body[data-page="blog"] に閉じてあります）。 */
@media (min-width: 760px) {
  body[data-page="blog"] .page-head { padding-block: var(--s-6) var(--s-5); }
}

/* 「新着」の札。1本目のカードにだけ出ます。
   色は tokens.css にあるものだけです（面は --c-bg-2、字は --c-ink、縁は --c-line）。
   **金（--c-gold）は使いません。**★と、利用者が選んだものの色だからです。 */
.post-card__new {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 0.125rem var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-2);
  color: var(--c-ink);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  line-height: var(--lh-body);
}

/* 写真が無い記事。<img> を出していないので、横並びにしません。
   .post-card--lead / --row の grid より後ろに置いて打ち消します。 */
.post-card--noimg .post-card__link { display: block; }

/* 2026-10-06。1本目は左に写真、右に文字です（オーナーのモック）。
   2026-10-04 までは写真が幅いっぱいで、1280px では**開いた直後の画面に
   タイトルが入っていませんでした。**横に並べると、写真とタイトルが同時に見えます。
   min-height の 300px は、写真の列が縦に潰れないための下限です。 */
@media (min-width: 760px) {
  .post-card--lead .post-card__body { padding: var(--s-6) var(--s-7); }
  .post-card--lead .post-card__title { font-size: var(--t-xl); }
  .post-card--lead .post-card__lead  { font-size: var(--t-base); }

  .post-card--lead:not(.post-card--noimg) .post-card__link {
    display: grid;
    grid-template-columns: 56% minmax(0, 1fr);
    min-height: 300px;
  }
  .post-card--lead .post-card__img {
    height: 100%;
    aspect-ratio: auto;       /* 高さはカードに合わせ、比率は cover が保ちます */
  }
  .post-card--lead .post-card__body { align-self: center; }

  /* 2本目以降は横長。左に画像、右に文字です。
     画像はカードの高さいっぱいに出します（object-fit: cover）。
     min-height の 168px は 320 × 630/1200 で、画像の列が
     1200×630 より縦に潰れないための下限です。 */
  .post-card--row:not(.post-card--noimg) .post-card__link {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 168px;
  }
  .post-card--row .post-card__img {
    height: 100%;
    aspect-ratio: auto;       /* 高さはカードに合わせ、比率は cover が保ちます */
  }
  .post-card--row .post-card__body { align-self: center; }
}

@media (min-width: 1024px) {
  .post-card--row:not(.post-card--noimg) .post-card__link { grid-template-columns: 380px minmax(0, 1fr); min-height: 200px; }
}

.post__eyecatch { margin: var(--s-7) 0 0; }
.post__eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--c-bg-2);
}
.post__eyecatch img { aspect-ratio: 1200 / 630; }

/* 2026-10-04。本文の最後の行と、その下のグレーの帯が詰まって見えていました。
   帯は .section--tint の padding から始まるので、本文との間が 0px でした。
   上の余白（--s-7）と同じだけ下にも取ります。新しい値は作りません。 */
.post__body { margin-top: var(--s-7); margin-bottom: var(--s-7); }
.post__body h2 { margin-top: var(--s-8); font-size: var(--t-xl); font-weight: var(--w-head); line-height: var(--lh-head); }
.post__body h3 { margin-top: var(--s-6); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-head); }
.post__body p  { margin-top: var(--s-4); line-height: var(--lh-body); }
.post__body ul { margin-top: var(--s-4); padding-left: var(--s-5); }
.post__body li { margin-top: var(--s-2); line-height: var(--lh-body); }

/* 言い換えの対比。左の線だけで、色は付けません
   （CLAUDE.md：見出し・リンク・矢印・数字に色をつけない）。 */
.post__quote {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-line);
  background: var(--c-bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.post__quote p { margin-top: var(--s-2); line-height: var(--lh-body); }
.post__quote p:first-child { margin-top: 0; }

.post-cta p { margin-top: var(--s-4); line-height: var(--lh-body); }

/* ===== 言いかえ（記事の中で使い回します） =====
   悪い例と良い例を、1つの枠に上下で並べます。区別するのは**左の細い線
   だけ**です。記号（✕ 〇）にも文字にも色をつけません。66本すべてで同じ
   形にするので、記事側はクラスを付けるだけにしてあります。
   良い例だけ／悪い例だけの1行でも、そのまま使えます。 */
.say {
  margin: var(--s-5) 0 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;                 /* 角丸から左の線がはみ出さないように */
}
.say__row {
  display: grid;
  /* 2列目に minmax(0,1fr)。auto のままだと長い1文が枠を押し広げます
     （HANDOFF-S1.md の grid の項と同じ理由です）。 */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-3);
  margin: 0;
  padding: var(--s-4);
  border-left: 3px solid var(--c-line);
}
.post__body .say__row { margin-top: 0; }   /* .post__body p の余白を打ち消す */
.say__row + .say__row { border-top: 1px solid var(--c-line); }
.say__row--bad  { border-left-color: var(--c-line); }
.say__row--good { border-left-color: var(--c-deep); }
.say__mark { font-weight: var(--w-bold); line-height: var(--lh-body); }
.say__text { line-height: var(--lh-body); }

@media (max-width: 420px) {
  .say__row { padding: var(--s-3); column-gap: var(--s-2); }
}

/* ===== トップのブログ帯（2026-10-04） =====
   /blog/ のカードをそのまま使い、3列に並べるだけです。
   .post-card__* の見た目は1か所（上のブログ節）で決まります。 */
.home-blog {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.home-blog .post-card__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.home-blog .post-card__title { font-size: var(--t-base); }

@media (min-width: 760px) {
  .home-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-blog__more { margin-top: var(--s-6); }

/* ===== 業種ページ「増えない3つの理由」（2026-10-04） =====
   箇条書きの直後に結びの1文が続きます。p + p には余白が付きますが、
   ul + p には付かないので、ここだけ同じ余白を足します。
   .reasons に閉じてあるのは、ほかのページの ul のあとを動かさないためです。 */
.reasons ul + p { margin-top: var(--s-5); }

/* ===== 申し込みの、送信ボタンの上の案内（2026-10-04） =====
   カードを登録するのは次の画面であることを、押す直前に伝えます。
   色は足していません。面と縁は tokens.css の既存のものです。 */
.signup-before {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
}
.signup-before p { line-height: var(--lh-body); }
.signup-before p + p { margin-top: var(--s-3); }

/* ===== 見出しを言葉の切れ目で折る（2026-10-05） =====
   日本語は、どの文字と文字の間でも折り返します。「…増やし方ブ／ログ」のように
   語の途中で折れていたので、折ってよい位置を印で示します。
   display: inline-block にすると、その固まりごと次の行へ送られます。
   **white-space: nowrap は付けません。**画面がその固まりより狭いときに
   横スクロールが出るためです。入らなければ、中で折れて元の見え方に戻ります。
   文言・文字の大きさ・色は変えていません。 */
.phrase { display: inline-block; }

/* ===== 業種ページ「この業種の、くわしい記事」（2026-10-08） =====
   ブログ一覧のカード（.post-card）をそのまま使い回しています。
   足したのは「記事を読む →」の1行と、760px以上での横並びだけです。
   **新しい色は足していません。**札は .post-card__new（面は --c-bg-2）、
   文字は --c-ink です。 */
.post-card__more {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--c-ink);
}

@media (min-width: 760px) {
  /* 写真は240px。min-height の 126px は 240 × 630/1200 で、
     写真の列が 1200×630 より縦に潰れないための下限です。 */
  .post-card--industry .post-card__link {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 126px;
  }
  .post-card--industry .post-card__img {
    height: 100%;
    aspect-ratio: auto;       /* 高さはカードに合わせ、比率は cover が保ちます */
  }
  .post-card--industry .post-card__body { align-self: center; }
}

/* ========================================================================== */
/* ===== contact（送信の結果） ===== */
/* ========================================================================== */

/* 見えない欄（ハニーポット）。display:none にしないのは、入れない機械が
   いるためです。画面にも読み上げにも出さず、タブでも止まりません。 */
[data-page="contact"] .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* フォームを止めているあいだの「送信する」。**押せないことが見て分かる形**に
   します。見た目が変わらないと、お客様は押して、何も起きないと思います。
   色は足しません（薄くするだけ）。/contact/ の中だけに効かせます。 */
[data-page="contact"] .btn:disabled {
  opacity: .35;
  cursor: default;
}

/* フォームの上に出る1行です。送れたときと、送れなかったときの両方で使います。
   色は分けません。**文で分かるようにします。**赤は tokens.css にありませんし、
   足さない決まりです（CLAUDE.md）。 */
.form-note {
  max-width: var(--w-text);
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  color: var(--c-ink);
  font-weight: var(--w-medium);
}