/* サイト共通のフォントは Noto Sans JP（head.js で Google Fonts から読み込む）。
   各ページのCSSも同じ並びで指定している */
body {
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  max-width: 900px;
  margin: auto;
  padding: 20px;
  line-height: 1.7;
}

h1 {
  margin-top: 40px;
}

/* ボタンや入力欄はブラウザ既定のフォントになるので、本文に合わせる。
   textarea は等幅のままのほうが読みやすいページがあるので含めない */
button, input, select {
  font-family: inherit;
}

a {
  color: blue;
}

textarea {
  width: 100%;
}

button {
  padding: 8px 16px;
}

footer {
  margin-top: 50px;
  opacity: 0.7;
}

.related-tools-section {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #ddd;
}

.related-tools-section h2 {
  margin-bottom: 16px;
}

.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.related-tool-card {
  display: block;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
}

.related-tool-card:hover {
  transform: translateY(-2px);
}

.related-tool-card h3 {
  margin-top: 0;
}

.retro-counter {
    margin: 24px 0;
    padding: 12px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #f8f8f8;

    font-size: 14px;
    line-height: 1.8;

    text-align: center;
}

/* =========================
   ツール解説セクション
   各ツールページ下部の読み物部分で共通して使う。
   背景が暗いページ（seiza など）は各ページ側で上書きする
========================= */

.tool-article {
  box-sizing: border-box;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 28px;

  background: #ffffff;
  color: #222;

  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  text-align: left;
  line-height: 1.8;
}

.tool-article h2 {
  margin-top: 32px;
  font-size: 1.3rem;

  border-left: 5px solid #2563eb;
  padding-left: 12px;
}

.tool-article h2:first-child {
  margin-top: 0;
}

.tool-article h3 {
  margin-top: 24px;
  font-size: 1.05rem;
}

/* * { margin:0 } を敷いているページでも余白が潰れないようにする */

.tool-article p {
  margin: 0 0 1em;
}

.tool-article ul,
.tool-article ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.tool-article li {
  margin-bottom: 0.4em;
}

.tool-article > :last-child {
  margin-bottom: 0;
}

.tool-article table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.tool-article th,
.tool-article td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.tool-article th {
  background: #f8fafc;
  white-space: nowrap;
}

.tool-article .table-scroll {
  overflow-x: auto;
}

/* 記事中のコードブロックは、長い行があってもページを横にはみ出させず、ブロックの中で横スクロールする */
.tool-article pre {
  overflow-x: auto;
}

.tool-article .note {
  margin-top: 20px;
  padding: 14px;

  background: #f8fafc;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;

  font-size: 0.92rem;
  color: #475569;
}

/* 公開後に誤りが見つかった箇所。もとの文は取り消し線で残し、
   訂正はこの赤い箱に書く。読者がどちらを読んだかで話が食い違わないようにするため */
.tool-article s,
.tool-article del {
  color: #8a8a8a;
  text-decoration-color: #d64545;
}

.tool-article .correction {
  margin: 18px 0;
  padding: 14px 18px;

  background: #fff1f1;
  border: 1px solid #f3bcbc;
  border-left: 5px solid #d64545;
  border-radius: 8px;

  font-size: 0.95rem;
  line-height: 1.75;
}

.tool-article .correction p {
  margin: 0 0 8px;
}

.tool-article .correction ul,
.tool-article .correction ol {
  margin: 0 0 8px;
}

.tool-article .correction > :last-child {
  margin-bottom: 0;
}

.tool-article .correction__title {
  font-weight: 700;
  color: #b02525;
}

/* .breadcrumb 系のスタイルは js/head.js が注入する */