/* ===== ベース（白地・最小装飾） ===== */
:root{
  --ink:#0b1220;     /* 文字色 */
  --muted:#6b7280;   /* 補助文字色 */
  --fs-body:clamp(15px,1.6vw,16px);
  --lh:1.9;
  --maxw:min(1000px,92vw);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:#fff;          /* 背景色なし＝白地 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh);
  word-break:break-word;
}

/* ===== レイアウト（ペライチのラッパークラスに準拠） ===== */
.c-bg-img{ background:transparent; }  /* 画像背景は無効化 */
.c-wrapper{ width:var(--maxw); margin:0 auto; }
.c-wrapper--sm{ width:var(--maxw); }
.c-inner{ padding: 24px 0; }
.c-inner--lg{ padding: clamp(18px,2.4vw,28px) 0; }
.c-inner--vertical{ padding-top: clamp(18px,2.4vw,28px); padding-bottom: clamp(18px,2.4vw,28px); }

/* 規約本文ブロック：白地に枠も影も付けない */
.pera1-editable{
  color:var(--ink);
  /* 余白だけで読みやすさを確保 */
  padding: 0;
}

/* ===== タイトル・見出し ===== */
/* ページタイトル（テモトル 利用規約） */
span[data-custom-pc-fontsize="36px"]{
  display: flex;              /* 文字と疑似要素を横並び */
  align-items: center;
  justify-content: center;
  gap: 16px;                  /* タイトルと線の間隔 */
  text-align: center;
  width: var(--maxw);         /* 既存のmax幅トークンを使用 */
  margin: 24px auto 12px;     /* 上下の余白はお好みで */
  font-size: 36px;            /* 既存通り */
  font-weight: 800;
}

/* 左右のブルーの線（ブランド紺） */
span[data-custom-pc-fontsize="36px"]::before,
span[data-custom-pc-fontsize="36px"]::after{
  content: "";
  flex: 1 1 120px;            /* 線の伸び具合（最小120px） */
  height: 2px;                /* 線の太さ */
  background: #33a0c2;        /* ブルー（ネイビー） */              /* 少しだけ薄く */
  transform: translateY(2px); /* 文字ベースラインと微調整 */
}

/* 画面が狭い時は線を少し短く＆文字サイズ縮小 */
@media (max-width: 960px){
  span[data-custom-pc-fontsize="36px"]{ font-size: 28px; gap: 12px; }
  span[data-custom-pc-fontsize="36px"]::before,
  span[data-custom-pc-fontsize="36px"]::after{
    flex-basis: 60px;         /* モバイルで短め */
  }
}

/* 章・条タイトル（data-28px と strong） */
strong{
  display:block;
  margin: 12px 0 10px;
  font-size: clamp(18px,2.4vw,22px);
  line-height:1.35;
  font-weight:700;
}

.pera1-editable h1{
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  border-bottom: 1px solid rgba(0,0,0,.12); /* 薄いグレーの下線 */
  padding-bottom: 10px;   /* 文字と線の間隔 */
  margin: 24px 0 16px;    /* 上の章との間隔 / 線の下の余白 */
}



/* ===== モバイル最適化 ===== */
@media (max-width: 960px){
  span[data-custom-pc-fontsize="36px"]{ font-size:28px; }
  .c-inner, .c-inner--lg, .c-inner--vertical{ padding-left: 0; padding-right: 0; }
}

/* ===== 印刷最適化 ===== */
@media print{
  body{ background:#fff; color:#000; }
  span[data-custom-pc-fontsize="36px"]{ font-size: 28px; margin: 0 0 6px; }
  a{ color:#000; text-decoration:underline; }
}
