@charset "UTF-8";

/* =========================================================
   まもりとにできること ページ専用スタイル
   ../styles.css の後に読み込む。既存トークン
   （--c-brown / --c-body / --c-accent）をそのまま使用し、
   このページでしか使わないクラスだけを定義する。
   → 共有の styles.css には手を加えていない。
   見た目は privacy / company / contact の本文まわりと同じ設計。
   ========================================================= */

.ab {
  width: 79.426%;                    /* 332 / 418 ＝ 既存セクションと同じ左右余白 */
  padding: 100px 0 8px;              /* 上は固定ヘッダー（64px）分を確保 */
  color: var(--c-body);
}

/* ---------- 見出し部 ---------- */
.ab__head {
  padding-bottom: 8px;
}

.ab__title {
  font-size: clamp(20.5px, 5.74vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.26px;
  text-align: center;
  color: var(--c-brown);
}

.ab__lead {
  margin-top: 28px;
  font-size: clamp(14px, 3.59vw, 15px);
  line-height: 1.95;
}

/* ---------- 各ブロック（囲み枠なし・余白だけで区切る） ---------- */
.ab__block {
  margin-top: 46px;
}

.ab__block-title {
  font-size: clamp(15.5px, 4.2vw, 17.5px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--c-brown);
}

.ab__body {
  margin-top: 20px;
  font-size: clamp(14px, 3.59vw, 15px);
  line-height: 1.95;
}

/* 箇条書きのあとに続く補足文は、少し詰めてひとかたまりに見せる */
.ab-list + .ab__body {
  margin-top: 18px;
}

/* ---------- 「・」の箇条書き ---------- */
.ab-list {
  margin-top: 18px;
  font-size: clamp(14px, 3.59vw, 15px);
}

.ab-list > li {
  position: relative;
  padding-left: 1.2em;               /* ぶら下げインデント */
  line-height: 1.95;
}

.ab-list > li + li {
  margin-top: 8px;
}

.ab-list > li::before {
  content: "・";
  position: absolute;
  left: -0.1em;
  top: 0;
  color: var(--c-accent);
}

/* ---------- 締めの一文 ---------- */
.ab__closing {
  margin-top: 46px;
  font-size: clamp(14px, 3.59vw, 15px);
  line-height: 1.95;
}

/* ---------- 狭い端末 ---------- */
@media (max-width: 360px) {
  .ab { padding-top: 92px; }
  .ab-list > li { padding-left: 1.1em; }
}

/* ---------- PC（styles.css の .pp / .cp / .ct と同じ扱い） ---------- */
@media (min-width: 768px) {
  .ab {
    width: 92%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 132px;
  }
}