/* =========================================================
   プライバシーポリシー（ページスラッグ privacy で自動読込）
   ---------------------------------------------------------
   2026-08-24 クライアント指示（検収シート PRIV-02「本文の体裁」）
   「段落、改行、項目などがちゃんと処理されていない。ただのテキストを
     貼り付けただけになっているので、ちゃんと設定してください。」

   原因は2つあった。
     1) 本文が支給元CMS由来の .title/.text/.cmp-text というクラスで
        組まれていて、テーマ側に該当するCSSが1行も無かった。
     2) common.css の初期化で * { margin:0; padding:0 } と
        ol,ul { list-style:none } が効いており、
        段落の間隔も、箇条書きの番号・中黒・字下げも全部消えていた。
     結果、第1条〜第17条の見出し・段落・箇条がすべて同じ字面で
     べったり並び、条文として読めない状態になっていた。

   pages/privacy.php を条文の構造（条＝article／見出し／段落／号）に
   組み直したうえで、その見た目をここで与える。文言は一字一句そのまま。

   ※ CSSはこのファイルの末尾に追記すること。
     途中に挿すとメディアクエリが素の指定に負ける。
   ========================================================= */


/* ---------------------------------------------------------
   本文の器
   共通の .main_contents .section は画面いっぱいまで広がるため、
   ワイドな画面では条文の1行が100文字近くなって読めない。
   法令文なので1行45文字前後に収まる幅まで絞って中央に置く。
   --------------------------------------------------------- */

.privacy {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* 導入文（タイトル直下の説明文）。
   中央寄せの扱いは共通側（.title_txt）に任せ、ここでは間隔だけ整える。 */
.privacy .privacy-lead {
  margin-bottom: var(--sp-md);
}

.privacy .privacy-lead p {
  margin: 0;
}


/* ---------------------------------------------------------
   条（第1条〜第17条）
   条と条の間をはっきり空け、上に細い罫を引いて切れ目を作る。
   --------------------------------------------------------- */

.privacy-article {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}

.privacy-article:first-of-type {
  border-top: 0;
}


/* 条見出し。左のゴールドの縦罫で「ここから次の条」と分かるようにする */
.privacy-article__title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  letter-spacing: .04em;
  text-align: left;
  border-left: 3px solid var(--c-gold);
  padding-left: var(--sp-sm);
  margin: 0 0 var(--sp-sm);
}


/* ---------------------------------------------------------
   段落
   1文＝1段落で流し込まれているので、段落間を空けて読ませる。
   --------------------------------------------------------- */

.privacy-article p {
  font-size: var(--fs-md);
  line-height: 2;
  color: var(--c-ink-soft);
  text-align: left;
  margin: 0 0 1em;
}

.privacy-article p:last-child {
  margin-bottom: 0;
}

.privacy-article b {
  font-weight: 700;
}


/* ---------------------------------------------------------
   箇条書き（号）
   ol,ul{list-style:none} が効いているので、番号も中黒も自前で出す。
   番号はぶら下げ（字下げした本文の左に番号を置く）にして、
   2行目以降が番号の下に潜り込まないようにする。
   --------------------------------------------------------- */

.privacy-list,
.privacy-list--bullet {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  text-align: left;
}

.privacy-list > li,
.privacy-list--bullet > li {
  position: relative;
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--c-ink-soft);
  margin-bottom: .5em;
}

.privacy-list > li:last-child,
.privacy-list--bullet > li:last-child {
  margin-bottom: 0;
}

/* 号：(1)(2)(3)… */
.privacy-list {
  counter-reset: privacy-item;
}

.privacy-list > li {
  counter-increment: privacy-item;
  padding-left: 3.2em;
}

.privacy-list > li::before {
  content: "(" counter(privacy-item) ")";
  position: absolute;
  left: 0;
  top: 0;
  width: 3.2em;
  padding-right: .6em;
  box-sizing: border-box;
  text-align: right;
  color: var(--c-gold-on-light, #8A6B1E);
  font-feature-settings: "palt";
}

/* 中黒の箇条書き。号（(1)…）の本文の頭とだいたい同じ位置から始めて、
   本文の段落より一段下がって見えるようにする */
.privacy-list--bullet {
  padding-left: 1.6em;
}

.privacy-list--bullet > li {
  padding-left: 1.4em;
}

.privacy-list--bullet > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-gold-on-light, #8A6B1E);
}


/* ---------------------------------------------------------
   第9条の号（見出し語＋説明の入れ子）
   「1.組織的安全管理措置／個人データの取扱責任者および…」のように
   号の中がさらに2段になっている。見出し語を立てて階層を見せる。
   --------------------------------------------------------- */

.privacy-list--def > li {
  margin-bottom: 1.1em;
}

.privacy-def__term {
  display: block;
  font-weight: 700;
  color: var(--c-ink);
}

.privacy-def__desc {
  display: block;
  line-height: 1.9;
}


/* ---------------------------------------------------------
   第17条 お問い合わせ窓口（会社名・住所・連絡先）
   締めのブロックとして、囲み枠で本文と区別する。
   --------------------------------------------------------- */

.privacy-contact {
  font-style: normal;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  margin: var(--sp-md) auto 0;
  padding: var(--sp-md);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-top: 2px solid var(--c-gold);
  text-align: left;
}

/* 上の .privacy-article p を打ち消して、枠の中は行間を詰める */
html body .privacy-contact p {
  font-size: var(--fs-md);
  line-height: 1.9;
  margin: 0;
}

/* 社名は枠の見出しとして立て、下に細い罫を引く。
   詳細度は上の html body .privacy-contact p（クラス1・要素3）に
   勝つ必要があるので、クラス2つで受ける。 */
.privacy-contact .privacy-contact__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-ink);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-xs);
  border-bottom: 1px solid var(--c-border);
}

/* 住所のかたまりと、担当者・電話・メールのかたまりの間を空ける */
.privacy-contact .privacy-contact__line--gap {
  margin-top: .8em;
}

/* common.css の a{display:block} だと「TEL：」と番号が行で分かれてしまう */
html body .privacy-contact a {
  display: inline;
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--c-border-strong);
}

html body .privacy-contact a:hover {
  color: var(--c-link-hover);
  text-decoration-color: currentColor;
}


/* ---------------------------------------------------------
   最終改定日。条文の外に置き、右下に小さく添える
   --------------------------------------------------------- */

.privacy-revised {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  text-align: right;
  margin: var(--sp-lg) 0 0;
}


/* ---------------------------------------------------------
   スマートフォン
   --------------------------------------------------------- */

@media screen and (max-width: 768px) {

  .privacy-article {
    margin-top: var(--sp-sm);
    padding-top: var(--sp-sm);
  }

  .privacy-article__title {
    font-size: 1.125rem;
    border-left-width: 2px;
    padding-left: 12px;
  }

  .privacy-article p,
  .privacy-list > li,
  .privacy-list--bullet > li {
    font-size: 3.7vw;
    line-height: 1.9;
  }

  /* 画面が狭いので番号のぶら下げ幅を詰める */
  .privacy-list > li {
    padding-left: 2.6em;
  }

  .privacy-list > li::before {
    width: 2.6em;
    padding-right: .4em;
  }

  .privacy-list--bullet {
    padding-left: .8em;
  }

  .privacy-contact {
    width: auto;
    padding: var(--sp-sm);
  }

  html body .privacy-contact p {
    font-size: 3.7vw;
  }

  /* 住所や社名の英字が枠からはみ出さないようにする */
  .privacy-contact__name,
  .privacy-contact__line {
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------
   2026-08-24 追記（自己点検で見つかった取りこぼし）
   --------------------------------------------------------- */

/* 1) 3.7vw は 768px の画面で 28.4px になってしまう（本文が異常に大きい）。
      狭い端末では小さく、768px 付近では本文相当で止まるようにする。 */
@media screen and (max-width: 768px) {

	html body .privacy-article p,
	html body .privacy-list > li,
	html body .privacy-list--bullet > li,
	html body .privacy-contact p {
		font-size: clamp(13.5px, 3.7vw, 17px);
	}

	/* 2) 社名は .privacy-contact .privacy-contact__name（クラス2つ）で
	      受けているため、上の p 指定より詳細度が高く、スマホでも
	      1.0625rem のまま取り残されていた。同じ強さで受け直す。 */
	html body .privacy-contact .privacy-contact__name {
		font-size: clamp(14.5px, 4vw, 18px);
	}

	/* 3) 最終改訂日だけ --fs-sm（16px）固定で、本文より大きくなっていた。 */
	html body .privacy-revised {
		font-size: clamp(12px, 3.3vw, 15px);
	}
}