@charset "UTF-8";
/* 安全点検のページ（/security）。下層ページ共通の style.css・article.css に、このページで足す分だけ。
   重要度の判子（.sv）は報告書の見本（/sample/security/report.css）と同じ見た目にしてある */

.sec h1 { font-size: 29px; }
.nb { display: inline-block; }
.sec .nb { text-indent: 0; } /* 見出しの判子の text-indent が inline-block に引き継がれてずれるのを防ぐ */

/* 申込みボタン（記事末尾の .endcta .cta と同じ見た目を、本文の途中でも使う） */
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 26px 0 10px; }
.btn-main {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--accent); color: #fff; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 0 var(--accent-shadow); transition: background .15s;
}
.btn-main:hover { background: var(--accent-hover); }
.link-sub { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 15px; font-weight: 700; text-underline-offset: 3px; }
.art .sec-note { margin: 0; font-size: 13px; color: var(--fg-mute); }

/* 冒頭の図：罫線の紙の上に描く */
.sec-art {
  margin: 30px 0 6px; padding: 12px 6px 4px; border: 1px solid var(--border); border-radius: 10px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, #e3eee9 31px 32px), var(--bg-sub);
}
.sec-art svg { display: block; width: 100%; height: auto; }
.sec-art .hand { font-family: var(--hand); font-weight: 600; }

/* 重要度の判子 */
.sv {
  display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 7px;
  border: 2px solid currentColor; border-radius: 4px; background: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .04em; white-space: nowrap; transform: rotate(-4deg);
}
.sv-u { color: #fff; background: var(--shu); border-color: var(--shu); }
.sv-h { color: var(--shu); }

/* よくある穴：帳簿の行として並べる */
.holes { list-style: none; margin: 6px 0 0; padding: 0; border-top: 2px solid var(--fg); }
.holes li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 2px 14px;
  padding: 16px 2px 15px; border-bottom: 1px solid var(--rule);
}
.hole-ic { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--fg); border-radius: 8px; background: #fff; }
.hole-ic svg { width: 24px; height: 24px; }
.art .holes h3 { margin: 0; font-size: 16px; line-height: 1.55; }
.holes .sv { margin-top: 1px; }
.art .holes p { grid-column: 2 / 4; margin: 0; font-size: 14px; line-height: 1.8; }

/* 進め方：判子の番号つき */
.steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.steps li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px;
  padding: 16px 16px 15px; background: #fff; border: 1.5px solid var(--fg); border-radius: 6px; counter-increment: st;
}
.steps li::before {
  content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px;
  border: 2.5px solid var(--shu); border-radius: 8px; color: var(--shu);
  font-family: var(--hand); font-size: 22px; font-weight: 600; line-height: 1; transform: rotate(-6deg);
}
.art .steps h3 { margin: 2px 0 0; font-size: 16px; line-height: 1.55; }
.steps h3 span { margin-left: 8px; font-family: var(--hand); font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.art .steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.8; }

/* 見るところと、対応している基盤 */
.scope-grid { display: grid; gap: 14px; margin-top: 6px; }
.scope-box { padding: 16px 18px; background: #fff; border: 1.5px solid var(--fg); border-radius: 6px; }
.art .scope-box h3 { margin: 0 0 6px; font-size: 15px; }
.art .scope-box ul { list-style: none; margin: 0; padding: 0; }
.art .scope-list li { position: relative; margin: 0; padding: 5px 0 5px 24px; font-size: 14px; line-height: 1.6; border-bottom: 1px dashed #d6e3de; }
.art .scope-list li:last-child { border-bottom: 0; }
.art .scope-list li::before {
  content: ''; position: absolute; left: 3px; top: 12px; width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.art .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.art .chips li { margin: 0; padding: 5px 12px; border: 1.5px solid var(--fg); border-radius: 999px; background: #fff; color: var(--fg); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.art .scope-box .scope-more { margin: 12px 0 0; font-size: 13px; line-height: 1.7; }

/* 報告書の見本 */
.sample-card { display: block; margin: 6px 0 0; color: inherit; text-decoration: none; }
.browser-frame { border: 1.5px solid var(--fg); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 8px 8px 0 #e5efeb; transition: transform .15s; }
.sample-card:hover .browser-frame { transform: translateY(-2px); }
.browser-frame .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1.5px solid var(--fg); background: var(--bg-sub); font-size: 12px; color: var(--fg-sub); }
.browser-frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9d8d2; }
.browser-frame .bar span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-frame img { display: block; width: 100%; height: auto; }
.sample-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 14px; }
.art .sample-foot p { margin: 0; font-size: 12.5px; color: var(--fg-mute); }

/* 料金：見積書の紙 */
.price-sheet {
  position: relative; margin-top: 6px; padding: 22px 20px 18px;
  background: #fff; border: 1.5px solid var(--fg); border-radius: 6px; box-shadow: 8px 8px 0 #e5efeb;
}
/* .art p より強くするため .art を付ける（付けないと本文の字の大きさで判子からはみ出す） */
.art .price-stamp {
  position: absolute; top: -24px; right: 14px; display: grid; place-items: center; width: 70px; height: 70px; margin: 0;
  border: 2.5px solid var(--shu); border-radius: 50%; background: #fff; color: var(--shu);
  font-size: 10.5px; font-weight: 700; line-height: 1.3; text-align: center; transform: rotate(10deg);
}
.price-stamp b { display: block; font-size: 12.5px; }
.art .price-name { margin: 0; padding-right: 64px; font-size: 18px; font-weight: 700; color: var(--fg); line-height: 1.5; }
.price-name small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--fg-sub); }
.price-rows { display: grid; margin: 12px 0 4px; }
.price-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #c9d8d2; }
.price-rows dt { font-size: 14px; color: var(--fg-sub); }
.price-rows dt small { display: block; font-size: 12px; }
.price-rows dd { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--fg); white-space: nowrap; }
.price-rows dd small { margin-left: 2px; font-size: 14px; }
.price-rows .is-monitor dd { color: var(--shu); }
.art .price-inc { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; padding: 0; }
.art .price-inc li { margin: 0; padding: 3px 10px; border-radius: 4px; background: var(--bg-sub); color: var(--fg); font-size: 13px; line-height: 1.6; }
.art .price-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; }
.price-opts { margin-top: 16px; border-top: 1.5px solid var(--fg); }
.price-opts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.price-opts dt { font-size: 14.5px; font-weight: 700; }
.price-opts dd { margin: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.price-opts .opt-desc { grid-column: 1 / -1; font-size: 13px; font-weight: 400; color: var(--fg-sub); white-space: normal; }

/* お約束 */
.promise { margin-top: 6px; padding: 18px 20px; background: #fffdf4; border: 2px solid var(--shu); border-radius: 6px; }
.promise ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: pr; }
.promise li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed #edd3c9; font-size: 14.5px; line-height: 1.7; color: var(--fg); counter-increment: pr; }
.promise li:last-child { border-bottom: 0; }
.promise li::before {
  content: counter(pr); display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border: 2px solid var(--shu); border-radius: 50%; color: var(--shu); font-size: 12.5px; font-weight: 700; line-height: 1;
}
.art .promise p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--fg); }
.promise li span { display: block; font-size: 13px; color: var(--fg-sub); }

/* よく聞かれること */
.qa { margin: 6px 0 0; border-top: 1px solid var(--border); }
.qa > div { padding: 14px 0; border-bottom: 1px solid var(--border); }
.qa dt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.qa dt::before { content: 'Q'; font-family: var(--hand); font-size: 17px; font-weight: 600; color: var(--shu); line-height: 1.45; }
.qa dd { margin: 6px 0 0 30px; font-size: 14px; line-height: 1.85; color: var(--fg-sub); }

@media (min-width: 641px) {
  .scope-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .price-sheet { padding: 26px 28px 22px; }
}
@media (max-width: 640px) {
  .sec h1 { font-size: 23px; }
  .btn-main { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .browser-frame, .btn-main { transition: none; }
  .sample-card:hover .browser-frame { transform: none; }
}