@charset "UTF-8";
/* 個人情報保護方針（privacy.aspx・privacy_event.aspx）専用のスタイル
 * ・すべて #privacy の中だけに効かせる。クラス名は pv- で始める（ショップの .btn などと衝突させない）
 * ・本文HTMLは PC・スマホ共通。PC テンプレート（最小幅1220px）とスマホテンプレート（sb_*.css）の両方で表示される
 * ・ショップ共通CSS（reset.css / base.css / sb_base.css）が見出し・th・リンクに付けている指定は、冒頭で打ち消す
 * ・content に記号を書くときは "\203A" のようにエスケープする（ecbeing は CP932 で扱えない文字を受け付けない）
 * ・番号（1・1)）、箇条の「・」、注記の「※」は元ページ（itoki.jp）でも CSS で付いている。意味を持つ印なので消さない */

#privacy {
  --pv-ink: #2b2a28;
  --pv-ink-2: #5d5a55;
  --pv-navy: #003349;
  --pv-link: #0d4a66;
  --pv-red: #e63d30;
  --pv-line: #e3dfd8;
  --pv-bg: #f2f4f6;
  --pv-wrap: 1080px;

  color: var(--pv-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;   /* ショップの本文と同じ。ヒラギノを先にすると iPhone・Mac でヘッダー・フッターと書体が変わる */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  text-align: left;
  overflow-x: clip; /* hidden にすると、中の position: sticky が効かなくなる */
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

/* ---------- ショップ共通CSSの打ち消し ---------- */
#privacy *, #privacy *::before, #privacy *::after { box-sizing: border-box; }
#privacy :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, figcaption, table, th, td, details, summary, nav) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
#privacy :where(h1, h2, h3, h4, th, b, strong) { font-weight: 700; } /* reset.css は th・strong を太字にしない */
#privacy :where(h1, h2, h3, h4) { background: none; border: 0; color: inherit; } /* sb_base.css の h2 は灰色の帯と余白が付く */
#privacy :where(ul, ol, li) { list-style: none; }
#privacy img { display: block; max-width: 100%; height: auto; border: 0; }
#privacy a { color: inherit; text-decoration: none; }
#privacy a:hover, #privacy a:focus { text-decoration: none; } /* base.css は a:hover に下線を付ける */
#privacy a:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
#privacy [hidden] { display: none !important; }
#privacy [id] { scroll-margin-top: var(--pv-anchor, 120px); } /* privacy.js がヘッダーの高さを入れる */

#privacy .pv-wrap { max-width: var(--pv-wrap); margin: 0 auto; padding: 16px 16px 64px; }
@media (min-width: 768px) {
  #privacy { font-size: 16px; }
  #privacy .pv-wrap { padding: 24px 24px 96px; }
}

/* ---------- パンくず・タイトル・目次 ---------- */
#privacy .pv-bread { color: var(--pv-ink-2); font-size: 12px; line-height: 1.6; }
#privacy .pv-bread a { color: var(--pv-link); }
#privacy .pv-bread a:hover { text-decoration: underline; }
#privacy .pv-bread-sep { margin: 0 .6em; }
#privacy .pv-title { margin-top: 24px; font-size: 26px; line-height: 1.4; }
#privacy .pv-toc { display: flex; flex-direction: column; gap: 4px 32px; margin-top: 24px; padding: 16px 20px; border: 1px solid var(--pv-line); }
#privacy .pv-toc a { display: inline-flex; align-items: center; gap: 8px; color: var(--pv-link); font-weight: 700; line-height: 1.6; padding: 6px 0; }
#privacy .pv-toc a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--pv-red); border-bottom: 2px solid var(--pv-red); transform: rotate(45deg); flex: none; }
#privacy .pv-toc a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  #privacy .pv-title { margin-top: 32px; font-size: 34px; }
  #privacy .pv-toc { flex-direction: row; flex-wrap: wrap; margin-top: 40px; padding: 20px 32px; }
}

/* ---------- 見出し ---------- */
#privacy .pv-sec { margin-top: 48px; }
#privacy .pv-h2 { padding-left: 14px; border-left: 4px solid var(--pv-red); font-size: 21px; line-height: 1.45; }
#privacy .pv-h3 { margin-top: 40px; padding-left: 12px; border-left: 3px solid var(--pv-red); font-size: 18px; line-height: 1.5; }
#privacy .pv-h4 { margin-top: 32px; font-size: inherit; line-height: 1.7; }
#privacy .pv-h2 + * { margin-top: 20px; }
#privacy .pv-h2 + .pv-h3 { margin-top: 28px; }
#privacy .pv-h3 + *, #privacy .pv-h4 + * { margin-top: 14px; }
@media (min-width: 768px) {
  #privacy .pv-sec { margin-top: 72px; }
  #privacy .pv-h2 { font-size: 26px; }
  #privacy .pv-h3 { font-size: 20px; }
}

/* ---------- 段落・リスト ---------- */
#privacy p + p, #privacy p + ul, #privacy p + ol, #privacy ul + p, #privacy ol + p,
#privacy ul + div, #privacy div + p, #privacy ol + .pv-sign { margin-top: 14px; }
#privacy .pv-right, #privacy .pv-sign { text-align: right; }
#privacy .pv-sign { margin-top: 40px; }
#privacy .pv-end { margin-top: 32px; }

/* 番号付き：1 2 3 … （元ページと同じく数字だけを太字で） */
#privacy .pv-ol { counter-reset: pv-ol; }
#privacy .pv-ol > li { position: relative; padding-left: 1.6em; counter-increment: pv-ol; }
#privacy .pv-ol > li + li { margin-top: 12px; }
#privacy .pv-ol > li::before { content: counter(pv-ol); position: absolute; left: 0; font-weight: 700; }
/* 入れ子の番号：1) 2) 3) … */
#privacy .pv-ol-sub { counter-reset: pv-sub; margin-top: 10px; }
#privacy .pv-ol-sub > li { position: relative; padding-left: 1.9em; counter-increment: pv-sub; }
#privacy .pv-ol-sub > li + li { margin-top: 6px; }
#privacy .pv-ol-sub > li::before { content: counter(pv-sub) ")"; position: absolute; left: 0; font-weight: 700; }
/* 箇条：・ */
#privacy .pv-ul > li { position: relative; padding-left: 1.2em; }
#privacy .pv-ul > li + li { margin-top: 6px; }
#privacy .pv-ul > li::before { content: "\30FB"; position: absolute; left: 0; }
/* 注記：※ */
#privacy .pv-notes { margin-top: 14px; color: var(--pv-ink-2); font-size: 13px; }
#privacy .pv-notes > li { position: relative; padding-left: 1.6em; }
#privacy .pv-notes > li::before { content: "\203B"; position: absolute; left: 0; }

/* ---------- リンク ---------- */
#privacy .pv-link { color: var(--pv-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#privacy .pv-link:hover { text-decoration: none; }
#privacy .pv-pdf::after {
  content: "PDF"; display: inline-block; margin-left: 6px; padding: 0 4px; border-radius: 2px;
  background: #c8102e; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 2px;
}

/* ---------- 囲み（プライバシーマーク・Adobe Reader） ---------- */
#privacy .pv-box { margin-top: 32px; padding: 20px; background: var(--pv-bg); }
#privacy .pv-pmark { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#privacy .pv-pmark img { width: 140px; flex: none; }
#privacy .pv-pmark > div { width: 100%; }
#privacy .pv-reader { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#privacy .pv-reader img { width: 158px; }
@media (min-width: 768px) {
  #privacy .pv-box { padding: 28px 32px; }
  #privacy .pv-pmark { flex-direction: row; gap: 40px; }
  #privacy .pv-pmark img { width: 200px; }
  #privacy .pv-reader { flex-direction: row; align-items: center; gap: 32px; }
}
