/* ============================================
   DEFACTO corporate site
   design: aligned with parent company UPTY (upty.jp)
   white base / cyan #00A0C2 accent / gothic type / pill buttons
   ============================================ */

:root {
  --white: #ffffff;
  --ink: #111417;          /* main text */
  --gray: #6b7378;         /* secondary text */
  --line: #e3e7e9;         /* hairlines */
  --alt-bg: #f5f7f8;       /* alternate section background */
  --cyan: #00a0c2;         /* UPTY brand cyan */
  --dark: #0d1b26;         /* hero / footer dark navy */
  --dark-2: #143044;
  --font-body: Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* アンカーで飛んだとき、見出しが sticky ヘッダーの下に隠れないようにする */
[id] { scroll-margin-top: 84px; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.9;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.02em; }

a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

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

.header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* DFマーク。ロゴ規定に従い等比のまま、周囲に余白を確保する
   ※ 盗難対策ページの .brand-mark(HORNET/FORCEバッジ)とは別物 */
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}

.brand-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-en {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.brand-ja {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.1em;
}

.site-nav { display: flex; gap: 24px; }

.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--cyan);
}

/* ---- hero ----
   背景写真は ::before に置いてぼかす(文字までぼけないようにするため)。
   写真の指定は各タブの .hero::before / .hero.is-xxx::before 側で行う。 */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
  text-align: center;
  padding: 96px 24px 88px;
}

.hero::before {
  content: "";
  position: absolute;
  /* blur で端がにじむぶん、少し外側まで広げる */
  inset: -5%;
  background: var(--dark);
  filter: blur(11px);
}

.hero-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }

.hero-eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 22px;
}

.hero-title {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hero-lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 56px;
}

.fact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}

.fact-card {
  background: var(--white);
  color: var(--ink);
  border-radius: 14px;
  padding: 26px 20px 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.fact-card h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.fact-value {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.3;
  margin-bottom: 8px;
}

.fact-note { font-size: 12px; color: var(--gray); line-height: 1.6; }

/* ---- sections ---- */
.section {
  padding: 80px 24px;
}

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

.section > * { max-width: 840px; margin-left: auto; margin-right: auto; }

.section-head {
  text-align: center;
  margin-bottom: 36px;
}

.section-head h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.section-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin-top: 4px;
}

.section-lead {
  margin-bottom: 44px;
}

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

/* section photo */
.section-photo {
  display: block;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 44px;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 44px;
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* timeline */
.timeline {
  list-style: none;
  border-left: 2px solid var(--line);
  margin-left: 6px;
  max-width: 720px;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 0 0 32px 28px;
}

.timeline-item:last-child { padding-bottom: 4px; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--cyan);
}

.timeline-date {
  font-weight: 700;
  font-size: 15px;
  color: var(--cyan);
  width: 84px;
  flex-shrink: 0;
}

.timeline-item h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline-item p { color: var(--gray); font-size: 14px; max-width: 560px; }

/* staff */
.staff-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 760px;
}

.staff-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.staff-card img {
  display: block;
  width: 100%;
  height: auto;   /* HTML の height 属性を打ち消す(aspect-ratio に任せる) */
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.staff-body {
  padding: 12px 14px 14px;
  text-align: center;
}

.staff-card h3 {
  font-size: 15.5px;
  font-weight: 700;
}

.staff-role {
  margin-top: 3px;
  font-size: 12px;
  color: var(--gray);
  font-weight: 600;
}

/* 写真がまだ用意できていない枠。写真ができたら通常の staff-card に差し替える */
.staff-card.is-coming {
  background: var(--alt-bg);
  border-style: dashed;
  /* 写真カードは「画像 + 名前(55px)」の高さになる。同じ高さにしないと
     COMING SOON だけの行が一段低くなるので、名前ぶんの余白を下に足す */
  display: grid;
  place-items: center;
  padding-bottom: 55px;
}

.staff-coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* 人物のシルエット。写真の代わりに置く。
   透過PNG(#0D1B26)なので色はCSSで変えられない。濃色カードにするなら
   staff-coming-white.png(白版)に差し替えること */
.staff-sil {
  display: block;
  width: 52%;
  height: auto;
  opacity: 0.22;
}

.staff-coming-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #9aa4ab;
}


/* services */
.service-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 30px 26px;
}

/* 2列グリッドで奇数枚になったとき、最後の1枚を横幅いっぱいにする */
.service-card.is-wide { grid-column: 1 / -1; }

/* 作業報告書の写真。カード内に4枚並べる */
.report-grid {
  list-style: none;
  display: grid;
  /* 4列だと1枚184pxになり、ひび割れなど肝心の部分が見えなくなる。2列で大きく見せる */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.report-grid img {
  display: block;
  width: 100%;
  /* height を auto にしないと HTML の height 属性が勝って aspect-ratio が効かない */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.report-grid span {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--gray);
}

.service-card .report-grid + .note { margin-top: 16px; text-align: left; }

@media (max-width: 720px) {
  /* 2列だと1枚131pxになり写真の中身が判別できないため、モバイルは1列 */
  .report-grid { grid-template-columns: 1fr; gap: 14px; }
}

.service-mark {
  display: block;
  width: 36px;
  height: 6px;
  border-radius: 3px;
  background: var(--cyan);
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.service-card p { font-size: 13.5px; color: var(--gray); }

.note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--gray);
}

.note.center { text-align: center; }

/* news */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.news-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 28px;
}

.news-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}

.placeholder-box {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--alt-bg);
  padding: 36px 20px;
  text-align: center;
}

.placeholder-box p { font-size: 13px; color: var(--gray); }

/* instagram */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  max-width: 840px;
}

.insta-tile {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--alt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--gray);
}

.btn-row { text-align: center; margin-top: 32px; }

.btn-pill {
  display: inline-block;
  background: var(--cyan);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 44px;
  transition: opacity 0.2s;
}

.btn-pill:hover, .btn-pill:focus-visible { opacity: 0.85; }

.btn-pill.is-disabled {
  background: #9aa6ad;
  cursor: default;
}

/* company table */
.company-table {
  max-width: 720px;
  border-top: 1px solid var(--line);
}

.company-table > div {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.company-table dt {
  width: 160px;
  flex-shrink: 0;
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.company-table dd { padding: 16px 20px; font-size: 14px; }

/* access */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.access-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px;
}

.access-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--white);
  background: var(--cyan);
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 14px;
}

.access-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.access-card p { font-size: 14px; color: var(--gray); }

/* map */
.map {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 16px;
  margin-top: 24px;
}

/* contact band */
.contact-band {
  background:
    radial-gradient(ellipse 70% 80% at 30% 100%, rgba(0, 160, 194, 0.2), transparent 60%),
    var(--dark);
  color: var(--white);
  text-align: center;
  padding: 72px 24px;
}

.contact-band h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.contact-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.contact-band p { color: rgba(255, 255, 255, 0.85); font-size: 14px; }

.contact-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* footer */
.site-footer {
  background: #0a141d;
  color: #eceef0;
}

.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

/* 濃色背景なので白文字版のロゴを使う(規定どおり) */
.footer-logo {
  display: block;
  height: 72px;
  width: auto;
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  .brand-logo { height: 30px; }
  .footer-logo { height: 60px; }
}

.site-footer .brand-en { color: var(--white); }

.site-footer p {
  font-size: 12px;
  color: #8b959e;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- responsive ---- */
.sp-only { display: none; }

@media (max-width: 720px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }

  .header-inner { flex-direction: column; gap: 6px; padding: 12px 20px; }
  .site-nav { gap: 16px; flex-wrap: wrap; }

  .hero { padding: 64px 20px 56px; }
  .hero-lead { margin-bottom: 40px; }

  .fact-cards { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .fact-card { padding: 22px 20px 18px; }

  .section { padding: 56px 20px; }

  .service-grid { grid-template-columns: 1fr; }
  .access-grid { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
  .news-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .photo-grid { grid-template-columns: 1fr; }
  .map { height: 280px; }

  .company-table > div { flex-direction: column; }
  .company-table dt { width: auto; padding: 10px 14px 0; }
  .company-table dd { padding: 2px 14px 12px; }

  .footer-inner { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ============================================
   車検サイト用の追記(旧 shaken/ 由来)
   ============================================ */

/* hero with factory photo */
.hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(0, 160, 194, 0.14), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)),
    linear-gradient(rgba(13, 27, 38, 0.70), rgba(13, 27, 38, 0.80)),
    url("img/hero-shaken.jpg") center 55% / cover no-repeat,
    var(--dark);
}

/* tab nav */
.tab-nav { display: flex; gap: 8px; }

.tab {
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: color 0.2s, background 0.2s;
}

.tab:hover, .tab:focus-visible { color: var(--cyan); }

.tab.is-active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--white);
}

/* hero badges & cta */
.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  border: 2px solid var(--cyan);
  border-radius: 999px;
  padding: 6px 22px;
}

.hero-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* price cards */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px 22px;
  text-align: center;
}

.price-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.price-class { font-size: 12px; color: var(--gray); font-weight: 400; }

.price-example {
  font-size: 11px;
  color: var(--gray);
  margin-bottom: 14px;
  min-height: 2.6em;
}

.price-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--cyan);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 14px;
}

.price-detail div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 2px;
}

.price-detail dt { color: var(--gray); }
.price-detail dd { font-weight: 600; }

/* flow */
.flow-list {
  list-style: none;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.flow-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.flow-item:last-child { border-bottom: none; }

.flow-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.flow-item p { font-size: 13.5px; color: var(--gray); }

/* faq */
.faq-list { max-width: 760px; margin-left: auto; margin-right: auto; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 26px;
  margin-bottom: 16px;
}

.faq-item dt {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  padding-left: 30px;
  position: relative;
}

.faq-item dt::before {
  content: "Q";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 700;
}

.faq-item dd {
  font-size: 13.5px;
  color: var(--gray);
  padding-left: 30px;
  position: relative;
}

.faq-item dd::before {
  content: "A";
  position: absolute;
  left: 0;
  color: var(--dark);
  font-weight: 700;
}

@media (max-width: 960px) {
  .price-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .tab-nav { flex-wrap: wrap; justify-content: center; }
  .price-grid { grid-template-columns: 1fr; }
  .price-example { min-height: auto; }
}

/* ============================================
   added: notice bar / sticky CTA / sub pages / form
   ============================================ */

/* notice bar */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 20px;
  background: var(--alt-bg);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.notice-bar:hover { background: #eef2f4; }

/* 夏季休業など、期間限定のお知らせ用 */
.notice-bar.is-holiday {
  background: #e9f6fa;
  border-bottom-color: #cde8f1;
}

.notice-bar.is-holiday:hover { background: #ddf0f7; }

/* 災害のお見舞いなど。色は付けず、落ち着いた濃色で示す */
.notice-bar.is-alert {
  background: #eceff1;
  border-bottom-color: #d5dade;
}

.notice-bar.is-alert:hover { background: #e3e7ea; }
.notice-bar.is-alert .notice-tag { background: #55636d; }
.notice-bar.is-alert .notice-text strong { color: var(--ink); }
.notice-bar.is-alert .notice-more { color: #55636d; }

.notice-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--cyan);
  border-radius: 999px;
  padding: 3px 12px;
}

.notice-text { font-size: 13px; }
.notice-text strong { color: var(--cyan-d, #007a94); }

.notice-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
}

/* sticky cta (mobile) */
.sticky-cta { display: none; }

/* footer nav */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}

.footer-nav a {
  font-size: 12px;
  color: #a8b3bb;
  text-decoration: none;
}

.footer-nav a:hover { color: var(--white); }

/* sub page head */
.page-head {
  background:
    radial-gradient(ellipse 70% 70% at 70% 10%, rgba(0, 160, 194, 0.18), transparent 60%),
    linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 60%, var(--dark) 100%);
  color: var(--white);
  text-align: center;
  padding: 62px 24px 56px;
}

.page-eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 16px;
}

.page-head h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.page-lead { font-size: 14px; color: rgba(255, 255, 255, 0.85); line-height: 1.9; }

/* form */
.form-wrap { max-width: 680px; margin: 0 auto; }

.form-note {
  background: var(--alt-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 32px;
  line-height: 1.9;
}

.field { margin-bottom: 24px; }

.field label,
.field .label-like {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.req {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--cyan);
  border-radius: 3px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.radio-row { display: flex; flex-wrap: wrap; gap: 20px; }

.radio { font-size: 14px; font-weight: 400 !important; display: flex; align-items: center; gap: 7px; }

.form-submit { text-align: center; margin-top: 36px; }
.form-submit .note { margin-top: 14px; }

.alt-contact {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: center;
  background: var(--alt-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
}

.alt-contact h2 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.alt-contact p { font-size: 13px; color: var(--gray); margin-bottom: 18px; }

/* document page */
.doc-wrap { max-width: 720px; margin: 0 auto; }

.doc-date { font-size: 13px; color: var(--gray); text-align: right; margin-bottom: 24px; }

.doc-body { font-size: 14px; line-height: 2.1; }

.doc-h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--cyan);
  margin: 44px 0 18px;
}

.change-table { border-top: 1px solid var(--line); }

.change-table > div {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.change-table dt {
  width: 170px;
  flex-shrink: 0;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

.change-table dd { padding: 14px 16px; font-size: 14px; }

.change-table .old { color: var(--gray); text-decoration: line-through; }

.doc-cta {
  text-align: center;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.doc-cta p { font-size: 14px; margin-bottom: 18px; }

/* review page */
.review-wrap { max-width: 680px; margin: 0 auto; }

.review-cta {
  text-align: center;
  background: var(--white);
  border: 2px solid var(--cyan);
  border-radius: 16px;
  padding: 34px 24px 28px;
}

.stars {
  display: block;
  font-size: 30px;
  color: #f5b301;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.btn-lg { font-size: 16px; padding: 16px 52px; }

.hint-list { list-style: none; }

.hint-item {
  background: var(--alt-bg);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.hint-q { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.hint-a { display: block; font-size: 12.5px; color: var(--gray); }

.review-message {
  background: var(--dark);
  color: var(--white);
  border-radius: 16px;
  padding: 28px 30px;
  margin-top: 40px;
}

.review-message h3 { font-size: 15px; font-weight: 600; color: var(--cyan-l, #4fc2db); margin-bottom: 10px; }
.review-message p { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 2; }

@media (max-width: 720px) {
  .notice-text { font-size: 12px; }
  .notice-more { display: none; }

  .change-table > div { flex-direction: column; }
  .change-table dt { width: auto; padding: 10px 12px 0; }
  .change-table dd { padding: 2px 12px 12px; }

  /* sticky cta */
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--line);
  }

  .sticky-btn {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    padding: 13px 8px;
    background: #9aa6ad;
    color: var(--white);
  }

  .sticky-btn.is-primary { background: var(--cyan); }

  .site-footer { padding-bottom: 72px; }
}

/* LINE button
   ※ リンク先は href="#line" のまま。LINE公式アカウントのURLが決まったら
      全HTMLの href="#line" を一括置換すること */
.btn-line {
  background: #06c755;
  color: var(--white);
  border: 2px solid #06c755;
}

.btn-line:hover, .btn-line:focus-visible { background: #05b34c; border-color: #05b34c; opacity: 1; }

@media (max-width: 720px) {
  .sticky-btn.is-line { background: #06c755; color: var(--white); }
}

/* tel button */
.btn-tel {
  background: var(--white);
  color: var(--cyan-d, #007a94);
  border: 2px solid var(--cyan);
}

.btn-tel:hover { background: #f0fafc; opacity: 1; }

.tel-link { color: var(--cyan); font-weight: 700; text-decoration: none; }

@media (max-width: 720px) {
  .sticky-btn.is-tel { background: var(--white); color: var(--cyan); border: 2px solid var(--cyan); }
}

/* document figure */
.doc-figure { max-width: 620px; margin: 36px auto 8px; }

/* ===== 代表あいさつ ===== */
.greeting {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}

/* 代表の直筆サイン。本文の末尾・右寄せに置く。
   本文に重ねない(重ねると読みにくくなるため、流し込みで下に配置する) */
.greeting-mark {
  display: block;
  width: min(300px, 62%);
  height: auto;
  margin: 24px 0 0 auto;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

.ceo-photo { margin: 0; }

.ceo-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.greeting-body p {
  font-size: 15px;
  line-height: 2;
  color: var(--gray);
}

.greeting-body p + p { margin-top: 18px; }

.greeting-body strong { color: var(--ink); font-weight: 700; }

.greeting-sign {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--gray);
}

.greeting-sign strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .greeting { grid-template-columns: 1fr; gap: 24px; }
  .greeting-mark { width: 68%; margin-top: 20px; }
  .greeting-side { max-width: 240px; }
}

@media (max-width: 720px) {
  .greeting-body p { font-size: 14.5px; line-height: 1.95; }
}

/* ===== 出張メンテナンス ===== */
.mobile-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  max-width: 920px;
  margin: 36px auto 0;
}

.mobile-photo { margin: 0; }

.mobile-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-photo figcaption {
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 8px;
}

.mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.mobile-list li {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 3px solid var(--cyan);
}

.mobile-list strong { font-size: 15px; font-weight: 700; }

.mobile-list span {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gray);
}

.mobile-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gray);
}

.mobile-contact {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .mobile-block { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== 沿革（1964年から） ===== */
.history {
  list-style: none;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 0;
}

.history-item {
  display: grid;
  grid-template-columns: 78px 22px 1fr;
  gap: 0 16px;
  padding-bottom: 30px;
}

.history-item:last-child { padding-bottom: 0; }

.history-year {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--cyan);
  text-align: right;
  padding-top: 1px;
}

.history-mark { position: relative; }

.history-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--cyan);
}

.history-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  bottom: -8px;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
}

.history-item:last-child .history-mark::after { display: none; }

.history-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}

.history-body p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gray);
}

/* 「60年以上」の行は経過を示す中継点なので、控えめに */
.history-item.is-span .history-year {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray);
  padding-top: 3px;
}

.history-item.is-span .history-mark::before {
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  top: 8px;
  background: var(--white);
  border: 2px solid var(--line);
}

@media (max-width: 720px) {
  .history-item { grid-template-columns: 62px 20px 1fr; gap: 0 12px; }
  .history-year { font-size: 18px; }
  .history-item.is-span .history-year { font-size: 13px; }
}

.doc-figure img {
  display: block;
  width: 100%;
  height: auto;   /* HTML の height 属性を打ち消す(元の縦横比を保つ) */
  border-radius: 16px;
}

.doc-figure figcaption {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: 10px;
}

/* ============================================
   company / service page additions (会社案内・その他サービス)
   ============================================ */

/* hero variants per tab */
.hero.is-company::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(0, 160, 194, 0.15), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)),
    linear-gradient(rgba(13, 27, 38, 0.72), rgba(13, 27, 38, 0.82)),
    url("img/hero-company.jpg") center 50% / cover no-repeat,
    var(--dark);
}

.hero.is-service::before {
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, rgba(0, 160, 194, 0.14), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)),
    linear-gradient(rgba(13, 27, 38, 0.74), rgba(13, 27, 38, 0.84)),
    url("img/hero-service.jpg") center 50% / cover no-repeat,
    var(--dark);
}

/* roots figure (旧サイト写真) — 横長のため他の図版より広めに取る */
.roots-figure {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  max-width: 980px;
  margin: 0 auto 36px;
}

/* 他の写真(ヒーロー・サービスカード)がぼかしてあるので、ここも合わせる。
   scale はぼかしで端が透けるのを防ぐため。 */
.roots-figure img {
  filter: blur(2px);
  transform: scale(1.03);
}

/* キャプションは写真の下ではなく、右下の透かしを覆う細い帯として重ねる。
   透かしは下端から 13.8%〜21.7% の位置・高さ約8%。帯はそこにぴったり重ねる。 */
.roots-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  min-height: 10.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 16px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================
   price section (金額確定までの暫定表示)
   ※ クラス別料金が決まったら .price-grid に戻す
   ============================================ */
.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto 36px;
}

.cost-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 24px;
}

.cost-tag {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.cost-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cost-card p { font-size: 13.5px; color: var(--gray); }
.cost-card strong { color: var(--ink); }

.cost-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cost-cta p {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 22px;
}

.cost-cta strong { color: var(--ink); }

@media (max-width: 720px) {
  .cost-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================
   security page additions (盗難対策)
   ============================================ */

/* 自社ヤードの解体中の車両を背景に(旧サイト「廃車代行」の写真を転用) */
.hero.is-security::before {
  background:
    radial-gradient(ellipse 70% 60% at 72% 18%, rgba(0, 160, 194, 0.15), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.10)),
    linear-gradient(rgba(10, 20, 28, 0.62), rgba(7, 15, 22, 0.74)),
    url("img/hero-security.jpg") center 50% / cover no-repeat,
    var(--dark);
}

/* ヒーロー内の注記 */
.hero-note {
  margin-top: 28px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
}

/* 手口の図解(写真の代わりに自作の流れ図で見せる) */
.attack-flow {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.af-step {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}

.af-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.af-step p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--gray);
}

.af-step strong { color: var(--ink); display: block; }

.af-arrow {
  align-self: center;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--cyan);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .attack-flow { flex-direction: column; gap: 6px; }
  .af-arrow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--cyan);
    border-bottom: 0;
  }
}

/* 取扱ブランド */
.brand-list {
  list-style: none;
  display: grid;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto 24px;
}

.brand-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px 26px;
}

.brand-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.brand-mark {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--white);
  background: var(--dark);
  border-radius: 4px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.brand-item h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.brand-note { font-size: 13px; color: var(--cyan); font-weight: 600; }

.brand-item .svc-points li { font-size: 13.5px; color: var(--gray); }
.brand-item .svc-points strong { color: var(--ink); }

/* 物理ロック・ドラレコの補助カード */
.brand-sub {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

.sub-photo-wrap { margin: 0; }

.sub-text h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }

.sub-text > p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--gray);
}

.sub-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 16px;
}

.sub-list li {
  display: grid;
  gap: 3px;
  padding-left: 16px;
  border-left: 3px solid var(--cyan);
}

.sub-list strong { font-size: 15px; font-weight: 700; }

.sub-model {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.sub-list span:last-child {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--gray);
}

.sub-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--gray);
}

@media (max-width: 860px) {
  .brand-sub { grid-template-columns: 1fr; gap: 24px; }
}

.sub-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 24px;
}

/* 物理ロック・カーセキュリティの製品写真 */
.sub-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--white);
  border-radius: 10px;
  margin-bottom: 16px;
}

.sub-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.sub-card p { font-size: 13.5px; color: var(--gray); }

@media (max-width: 720px) {
  .risk-figure { margin-top: 32px; }
  .risk-figure img { aspect-ratio: 16 / 9; }
  .brand-item { padding: 24px 22px 22px; }
  .brand-sub { grid-template-columns: 1fr; }
}

/* 統計カード */
/* ===== 狙われる車のタイプ（シルエット） ===== */
.cat-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto 40px;
}

.cat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 20px;
  text-align: center;
}

.car-sil {
  width: 100%;
  max-width: 168px;
  height: auto;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 12px;
}

.cat-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.cat-models { font-size: 12.5px; line-height: 1.7; color: var(--gray); }

@media (max-width: 720px) {
  .cat-grid { grid-template-columns: 1fr; gap: 14px; max-width: 420px; }
  .cat-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 16px 18px;
  }
  .cat-card .car-sil { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  .cat-card h3 { grid-column: 2; align-self: end; }
  .cat-card .cat-models { grid-column: 2; align-self: start; }
}

.stat-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 620px;
  margin: 0 auto 36px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px 24px;
  text-align: center;
}

.stat-value {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cyan);
  margin-bottom: 10px;
}

.stat-unit { font-size: 20px; margin-left: 2px; }

.stat-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.stat-card p { font-size: 13px; color: var(--gray); }

/* 手口の解説カード */
.threat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 920px;
  margin: 48px auto 0;
}

.threat-card {
  background: var(--alt-bg);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  padding: 24px 26px 22px;
}

.threat-tag {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.threat-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.threat-card p { font-size: 13.5px; color: var(--gray); }

@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .stat-value { font-size: 40px; }
  .threat-grid { grid-template-columns: 1fr; margin-top: 32px; }

  /* タブ4本ぶんを収める */
  .tab-nav { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .tab { padding: 7px 14px; font-size: 12.5px; letter-spacing: 0.02em; }
}

/* access card links (地図・カレンダーへの導線) */
.access-link { margin-top: 12px; font-size: 13px; }

/* service card with photo
   写真を薄くぼかして敷き、その上に説明文を置く */
.service-card.has-bg {
  position: relative;
  overflow: hidden;
}

.service-card.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(3px) saturate(0.9);
  opacity: 0.28;
  transform: scale(1.08);   /* ぼかしで端が透けるのを防ぐ */
}

/* 本文を背景より前面に */
.service-card.has-bg > * { position: relative; z-index: 1; }

.service-card.is-paint::before { background-image: url("img/svc-paint.jpg"); }
.service-card.is-tire::before  { background-image: url("img/svc-tire.jpg"); }
.service-card.is-oil::before   { background-image: url("img/svc-oil.jpg"); }
.service-card.is-parts::before { background-image: url("img/svc-parts.jpg"); }

/* 薄い写真の上でも文字が沈まないよう、わずかに濃くする */
.service-card.has-bg h3 { color: var(--ink); }
.service-card.has-bg p { color: #5a6367; }

/* press release list */
.news-list { list-style: none; }

.news-list li {
  border-top: 1px solid var(--line);
  padding: 16px 0 4px;
}

.news-list li:first-child { border-top: 0; padding-top: 0; }

.news-date {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 2px;
}

.news-list a {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s;
}

.news-list a:hover, .news-list a:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* リンク先のない見出し(掲載ページがこのページ自身のもの) */
.news-title {
  font-size: 14.5px;
  font-weight: 600;
}

.news-list p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray);
}

/* opening calendar */
.cal-week {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}

.cal-day {
  display: block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 0;
  background: var(--alt-bg);
}

.cal-day.is-sat { color: #2f7fa8; }
.cal-day.is-sun { color: #c0504d; }

.cal-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 2px;
  color: var(--gray);
}

.cal-mark.is-open { color: var(--cyan); font-weight: 700; }
.cal-mark.is-partial { color: var(--ink); font-weight: 700; }
.cal-mark.is-closed { color: #c0504d; font-weight: 700; }

.cal-hours {
  margin-top: 16px;
  font-size: 13.5px;
  text-align: center;
}

.cal-hours strong { font-size: 16px; color: var(--cyan); }

.cal-hours-sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--gray);
}

/* 夏季休業など、期間限定の休業表示 */
.cal-holiday {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: #e9f6fa;
  border: 1px solid #cde8f1;
  border-radius: 12px;
  text-align: center;
}

.cal-holiday-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--cyan);
  border-radius: 999px;
  padding: 3px 12px;
}

.cal-holiday-date { font-size: 14px; font-weight: 700; }

.cal-holiday-note {
  font-size: 12px;
  color: var(--gray);
  width: 100%;
}

@media (max-width: 720px) {
  .cal-week { gap: 4px; }
  .cal-day { font-size: 12px; }
  .cal-mark { font-size: 9.5px; padding: 8px 1px; }
}

/* service detail blocks (写真を外し、2枚並びのカードにした) */
.svc-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto 40px;
}

.svc-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 30px 28px;
}

.svc-body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.svc-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 14px;
}

.svc-body p { color: var(--gray); font-size: 14.5px; }

.svc-points {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 6px;
}

.svc-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
}

.svc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* cross-tab guide cards */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* カードが4枚のとき(404ページ)は 2×2 に組む。3枚のときと違い、
   auto-fit だと 3+1 になって最後の1枚が浮くため。 */
.guide-grid.is-quad {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

.guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  transition: border-color 0.2s, transform 0.2s;
}

.guide-card:hover, .guide-card:focus-visible {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.guide-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.guide-card p { color: var(--gray); font-size: 14px; }

.guide-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
}

@media (max-width: 720px) {
  .svc-list { grid-template-columns: 1fr; gap: 20px; }
  .svc-item { padding: 26px 22px 24px; }
  .guide-grid { grid-template-columns: 1fr; }
  /* 帯を1行に収めて細さを保つ */
  .roots-figure figcaption { font-size: 10.5px; padding: 3px 8px; }
  /* 表示サイズが小さいぶん、ぼかしも弱める(看板が読めなくなるため) */
  .roots-figure img { filter: blur(1px); }
}

/* ============================================
   画像プレースホルダ
   生成した画像に差し替えるときは .ph を <img> に置き換える
   ============================================ */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #eef2f4, #eef2f4 10px, #e7ecef 10px, #e7ecef 20px);
  border: 2px dashed #c3ced4;
  border-radius: 12px;
  color: #6f7c83;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px;
  width: 100%;
}

.ph .ph-size {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #98a3a9;
  margin-top: 4px;
}

.ph.is-wide     { aspect-ratio: 16 / 7; }
.ph.is-photo    { aspect-ratio: 16 / 9; }
.ph.is-fig      { aspect-ratio: 3 / 2; }
.ph.is-portrait { aspect-ratio: 3 / 4; border-radius: 0; border-width: 0 0 2px; }

.ph.is-icon {
  aspect-ratio: 1 / 1;
  max-width: 64px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.4;
  padding: 6px;
  margin-bottom: 14px;
}
.ph.is-icon .ph-size { display: none; }

.ph-wrap { max-width: 900px; margin: 0 auto 32px; }
.ph-wrap img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ph-wrap.is-narrow { max-width: 620px; }
.ph-wrap.is-full { max-width: 100%; }

.service-card .ph, .svc-item .ph, .sub-card .ph, .access-card .ph { margin-bottom: 16px; }
.flow-item .ph.is-icon { margin-bottom: 10px; }

/* ============================================
   盗難対策ページの追加パーツ
   ============================================ */

/* 車種ランキングの表 */
.rank-wrap {
  max-width: 720px;
  margin: 0 auto 36px;
  overflow-x: auto;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  white-space: nowrap;
}

.rank-table th {
  background: var(--alt-bg);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.rank-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.rank-table td.num { text-align: right; }
.rank-table tbody tr:first-child { font-weight: 700; }
.rank-table tbody tr:first-child td { color: var(--ink); }

/* 数字を大きく見せるカード */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 820px;
  margin: 0 auto 32px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}

.stat-label { font-size: 12.5px; color: var(--gray); margin-bottom: 6px; }
.stat-value { font-size: 34px; font-weight: 700; color: var(--cyan); line-height: 1.3; }
.stat-unit { font-size: 15px; margin-left: 2px; }

/* 盗まれた後の手続き */
.after-list {
  list-style: none;
  max-width: 720px;
  margin: 0 auto 32px;
  display: grid;
  gap: 0;
}

.after-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.after-item:last-child { border-bottom: 0; }

.after-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--alt-bg);
  color: var(--gray);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.after-item h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
.after-item p { font-size: 13.5px; color: var(--gray); }
.after-item .where { font-size: 12px; color: var(--cyan); font-weight: 700; }

/* 金額の話（強調ボックス） */
.money-box {
  max-width: 720px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 12px;
  padding: 24px 26px;
}

.money-box li {
  list-style: none;
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  margin-bottom: 10px;
}

.money-box li:last-child { margin-bottom: 0; }

.money-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.money-box strong { color: var(--ink); }

@media (max-width: 720px) {
  .stat-value { font-size: 28px; }
  .rank-table { font-size: 13px; }
  .rank-table th, .rank-table td { padding: 9px 10px; }
}

/* 体制の数字（会社案内） */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 820px;
  margin: 32px auto 24px;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
}

.team-role { font-size: 13px; color: var(--gray); font-weight: 700; }
.team-count { font-size: 32px; font-weight: 700; color: var(--cyan); line-height: 1.4; }
.team-unit { font-size: 15px; margin-left: 2px; }
.team-note { font-size: 12.5px; color: var(--gray); }

/* 車検の実績レンジ */
.actual {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 32px 30px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.actual-head {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.actual-lead {
  font-size: 14px;
  color: var(--gray);
  text-align: center;
  margin-bottom: 26px;
}

.actual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.actual-card {
  background: var(--alt-bg);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}

.actual-type {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.actual-range {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.actual-unit { font-size: 14px; margin-left: 1px; }

.actual-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 8px;
}

@media (max-width: 720px) {
  .actual { padding: 26px 20px 22px; }
  .actual-grid { grid-template-columns: 1fr; }
  .actual-range { font-size: 19px; }
}

/* 注意喚起の項目（正直に書くための行） */
.svc-points li.is-caution {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--gray);
}
.svc-points li.is-caution::before { background: #b9c4ca; }

/* ドラレコの選び方 */
.pick-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 36px;
}

.pick-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 20px;
}

.pick-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--cyan);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.pick-models {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.pick-item p:last-child { font-size: 13.5px; color: var(--gray); }

/* 仕様の比較表 */
@media (max-width: 720px) {
  .pick-list { grid-template-columns: 1fr; }
}

/* ===== おすすめ診断 ===== */
.finder {
  max-width: 760px;
  margin: 0 auto;
  background: var(--alt-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
}

.finder-steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 26px; }
.finder-dot { width: 28px; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.25s; }
.finder-dot.is-on { background: var(--cyan); }

.finder-q { display: none; }
.finder-q.is-on { display: block; }

.finder-num { font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: 0.18em; color: var(--cyan); font-weight: 700; }
.finder-title { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; margin: 6px 0 22px; }

.finder-opts { display: grid; gap: 12px; }

.finder-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.finder-opt:hover, .finder-opt:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 160, 194, 0.1);
  outline: none;
}

.finder-opt b { display: block; font-weight: 700; }
.finder-opt span { font-size: 13px; color: var(--gray); }

.finder-back, .finder-again {
  margin-top: 18px;
  background: none;
  border: 0;
  color: var(--gray);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.finder-back:hover, .finder-again:hover { color: var(--cyan); }

.finder-result { display: none; }
.finder-result.is-on { display: block; }

.finder-lead { font-size: 13px; color: var(--gray); margin-bottom: 4px; }
.finder-name { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
.finder-type { font-size: 13px; font-weight: 700; color: var(--cyan); margin-bottom: 18px; }

.finder-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  margin-bottom: 16px;
}
.finder-box .ph { margin-bottom: 18px; }
.finder-why { font-size: 14px; color: var(--gray); }
.finder-why strong { color: var(--ink); }

.finder-box .rspec {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.finder-box .rspec li { position: relative; padding-left: 16px; font-size: 13.5px; }
.finder-box .rspec li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
}

.finder-note {
  background: #e9f6fa;
  border: 1px solid #cde8f1;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.finder-note h4 { font-size: 14.5px; margin-bottom: 6px; }
.finder-note p { font-size: 13.5px; color: var(--gray); }

.finder .contact-btns { margin-top: 22px; }

@media (max-width: 720px) {
  .finder { padding: 24px 18px; }
  .finder-title { font-size: 17px; }
}

/* 診断結果の写真は控えめに */
.finder-box .ph { max-width: 320px; margin-left: auto; margin-right: auto; }

/* カードが1枚だけのときは中央に寄せる */
.service-grid.is-single {
  grid-template-columns: 1fr;
  max-width: 520px;
  margin: 0 auto;
}


/* アプティ取り扱い製品のリード部分 */
.brand-lead {
  max-width: 900px;
  margin: 0 auto 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 24px;
}
.brand-lead .ph { margin-bottom: 22px; }

@media (max-width: 720px) {
  .brand-lead { padding: 22px 20px 20px; }
}

/* ===== アイコン（SVGスプライト） ===== */
.svg-sprite { display: none; }

.ic {
  display: block;
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}

/* 流れの各ステップでは少し小さく */
.flow-item .ic { width: 34px; height: 34px; margin-bottom: 10px; }

/* ===== 図解（SVG） ===== */
.fig {
  max-width: 820px;
  margin: 0 auto 36px;
}

.fig svg { display: block; width: 100%; height: auto; }

.fig text { font-family: var(--font-body); fill: var(--ink); }
.fig .fig-cap { font-size: 15px; font-weight: 700; fill: var(--gray); }
.fig .fig-h   { font-size: 22px; font-weight: 700; }
.fig .fig-t   { font-size: 15px; fill: var(--gray); }
.fig .fig-s   { font-size: 14px; font-weight: 700; fill: var(--cyan); }
.fig .fig-n   { font-size: 12.5px; fill: #98a3a9; }

.fig .fig-line { stroke: var(--line); stroke-width: 2; fill: none; }
.fig .fig-box  { stroke-width: 2; }
.fig .fig-box.is-cyan { fill: #e9f6fa; stroke: #9fd6e6; }
.fig .fig-box.is-gray { fill: var(--alt-bg); stroke: var(--line); }
.fig .is-gray ~ .fig-s { fill: var(--gray); }

@media (max-width: 720px) {
  .fig .fig-h { font-size: 26px; }
  .fig .fig-t { font-size: 18px; }
  .fig .fig-s { font-size: 17px; }
  .fig .fig-cap { font-size: 18px; }
  .fig .fig-n { font-size: 15px; }
}

/* 手口の図解（現在は未使用。SVG図解を戻すときに使う） */
.fig-attack { max-width: 860px; margin: 0 auto 28px; }

.fig-attack .fg-l { fill: none; stroke: var(--dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-attack .fg-f { fill: var(--alt-bg); stroke: var(--dark); stroke-width: 2.4; }
.fig-attack .fg-k { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }
.fig-attack .fg-p { fill: none; stroke: var(--gray); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-attack .fg-d { fill: var(--white); stroke: var(--gray); stroke-width: 2.4; stroke-linecap: round; }
.fig-attack .fg-w { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }

.fig-attack text { font-family: var(--font-body); }
.fig-attack .fg-t { font-size: 15px; font-weight: 700; fill: var(--ink); }
.fig-attack .fg-s { font-size: 13px; fill: var(--gray); }
.fig-attack .fg-s.is-warn { fill: var(--cyan); font-weight: 700; }
.fig-attack .fg-n { font-size: 12.5px; fill: #98a3a9; }

@media (max-width: 720px) {
  .fig-attack .fg-t { font-size: 19px; }
  .fig-attack .fg-s { font-size: 17px; }
  .fig-attack .fg-n { font-size: 15px; }
}

/* 図解のうち、矢印と機器の線（現在は未使用） */
.fig-attack .fg-a  { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }
.fig-attack .fg-ar { fill: none; stroke: #c3ced4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 製品ラインナップ */
.model-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}

.model-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px 16px;
  text-align: center;
}

.model-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin-bottom: 10px;
}

.model-name { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.model-type { font-size: 11.5px; color: var(--gray); line-height: 1.6; margin-top: 2px; }

@media (max-width: 900px) { .model-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .model-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* 診断結果の機種写真 */
.finder-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 18px;
}

/* カード内の写真枠は本文の下に置く */
.service-card .ph.is-photo { margin-top: 16px; margin-bottom: 0; }

/* セクション内の説明写真 */
.svc-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 18px;
}

.flow-item .svc-photo { max-width: 400px; }

/* 手口カード内：写真を左、説明文を右に並べる */
.threat-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 14px;
}

.threat-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
}

@media (max-width: 720px) {
  .threat-body { grid-template-columns: 1fr; gap: 14px; }
}

/* セクション中央に置く説明写真（キャプション付き） */
.img-figure {
  max-width: 520px;
  margin: 0 auto 32px;
}

.img-figure.is-wide { max-width: 760px; margin-top: 36px; }

.img-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.img-figure figcaption {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .svc-photo, .flow-item .svc-photo { max-width: 100%; }
}

/* ===== 認証工場との比較表 ===== */
.cmp-wrap {
  max-width: 760px;
  margin: 0 auto 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cmp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.cmp-table thead th {
  background: var(--alt-bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  text-align: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}

.cmp-table thead th.is-us {
  background: var(--cyan);
  color: var(--white);
}

.cmp-table tbody th {
  width: 26%;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray);
  padding: 16px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--alt-bg);
}

.cmp-table tbody td {
  padding: 16px 14px;
  text-align: center;
  line-height: 1.7;
  border-bottom: 1px solid var(--line);
  color: var(--gray);
}

.cmp-table tbody td.is-us {
  background: #f2fbfd;
  color: var(--ink);
  font-weight: 700;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }

/* 「指定工場(当社)」の列を枠線で囲んで目立たせる。
   セルは行ごとに分かれているので、左右は全セル・上は thead・下は最終行に付けて1本の枠に見せる */
.cmp-table thead th.is-us,
.cmp-table tbody td.is-us {
  border-left: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

.cmp-table thead th.is-us { border-top: 2px solid var(--cyan); }

.cmp-table tbody tr:last-child td.is-us { border-bottom: 2px solid var(--cyan); }

/* 災害のお見舞い文。掲載を終えるときはこのブロックごと削除してよい。
   アクセント色は使わず、余白と行間だけで読ませる */
.omimai {
  background: var(--alt-bg);
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 6vw, 56px) 20px;
}

.omimai-inner { max-width: 720px; margin: 0 auto; }

.omimai h2 {
  font-size: clamp(17px, 3.6vw, 20px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.omimai p {
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink);
}

.omimai p + p { margin-top: 18px; }
.omimai strong { font-weight: 700; }

.omimai-sign {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--gray);
}

/* メディア掲載。表紙 + 記事情報を1枚のカードで見せる */
.media-list {
  list-style: none;
  display: grid;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.media-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.media-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.media-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.media-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 10px;
}

.media-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--cyan);
  border-radius: 999px;
  padding: 3px 12px;
}

.media-body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  margin-bottom: 8px;
}

.media-source {
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 14px;
}

.media-body > p:not(.media-source):not(.media-meta) {
  font-size: 14px;
  line-height: 1.9;
  color: var(--gray);
}

.media-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
}

.media-card:hover .media-more { text-decoration: underline; }

/* 表紙画像のない記事(Web記事など) */
.media-card.is-text { grid-template-columns: 1fr; }
.media-tag.is-web { background: #55636d; }

@media (max-width: 720px) {
  .media-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 22px;
    text-align: center;
  }
  .media-cover { max-width: 170px; margin: 0 auto; }
  .media-meta { justify-content: center; }
  .media-body h3 { font-size: 17px; }
  .media-body > p:not(.media-source):not(.media-meta) { text-align: left; }
}

/* 補足の囲み */
.note-box {
  max-width: 760px;
  margin: 0 auto 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 12px;
  padding: 26px 28px;
}

.note-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.note-box p { font-size: 14.5px; color: var(--gray); }
.note-box p + p { margin-top: 12px; }
.note-box strong { color: var(--ink); }

@media (max-width: 720px) {
  .cmp-table { font-size: 13px; }
  .note-box { padding: 22px 20px; }
}

/* 集合写真 + 体制の説明 */
/* 直前の代表あいさつが「写真左」なので、ここは左右を入れ替える。
   HTML は写真が先のまま（スマホで写真→説明の順にするため）、
   PC でだけ order で写真を右に送る。 */
.team-block {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.team-photo { margin: 0; order: 2; }

.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.team-text h3 {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.team-list li {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 3px solid var(--cyan);
}

.team-list strong {
  font-size: 15px;
  font-weight: 700;
}

.team-list span {
  font-size: 14px;
  line-height: 1.85;
  color: var(--gray);
}

.team-list em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 860px) {
  .team-block {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .team-photo { max-width: 260px; margin: 0 auto; order: 0; }
  .team-text h3 { font-size: 18px; text-align: center; }
}