/* ============================================================
   図電ピッピ専用
   Webフォント：このページで使う字だけを抜き出したサブセット（-subset）を font/ に置く。
   ページ内の Webフォント部分に新しい字を足したときは、サブセットを作り直すこと
   （配布用の zudenpippi_web.zip は全文字入りのまま）
   ============================================================ */
@font-face {
  font-family: 'ZudenPippi';
  src: url('../font/Zu-Den-Pippi-Normal-subset.woff2?v=20261111b') format('woff2'),
    url('../font/Zu-Den-Pippi-Normal-subset.woff?v=20261111b') format('woff');
  font-style: normal;
  font-display: swap;
}

/* 斜体：font-style: oblique（または italic）を指定した箇所で使われる */
@font-face {
  font-family: 'ZudenPippi';
  src: url('../font/Zu-Den-Pippi-Oblique-subset.woff2?v=20261111b') format('woff2'),
    url('../font/Zu-Den-Pippi-Oblique-subset.woff?v=20261111b') format('woff');
  font-style: oblique;
  font-display: swap;
}

.zuden-block {
  margin: 0 0 32px;
}

/* 見出し */
.zuden-heading {
  margin: 0 0 24px;
  padding: 18px 16px 14px;
  color: #222;
  font-family: 'ZudenPippi', sans-serif;
  font-size: clamp(22px, 6vw, 56px);
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Normal と Oblique ---------- */
.zuden-heading .is-oblique {
  font-style: oblique;
}

/* 「Normal と Oblique」の見出しは枠付き */
.zuden-heading.is-boxed {
  border: 2px solid #222;
}

.zuden-style {
  margin: 0 0 48px;
}

.zuden-style.is-oblique .zuden-style__sample,
.zuden-style.is-oblique .zuden-palt dd {
  font-style: oblique;
}

/* 黒いラベル＋右へ伸びる細線 */
.zuden-style__label {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid #222;
  font-family: var(--font-gothic, sans-serif);
}

.zuden-style__label span {
  padding: 4px 16px 2px;
  background: #000;
  color: #fff;
  font-size: clamp(18px, 3.4vw, 30px);
  line-height: 1.3;
}

.zuden-style__label small {
  padding-bottom: 2px;
  font-size: clamp(13px, 2.4vw, 22px);
}

/* 大きな見本 */
.zuden-style__sample {
  margin: 0 0 4%;
  font-family: 'ZudenPippi', sans-serif;
  /* 10字で横幅いっぱい */
  font-size: clamp(28px, 9.6vw, 86px);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* 見え方の比較：左（説明）29 : 中（ラベル）26 : 右（見本）38 の比率 */
.zuden-compare {
  display: grid;
  grid-template-columns: 29fr 26fr 38fr;
  column-gap: 4%;
  row-gap: 28px;
  align-items: center;
}

.zuden-style__lead {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-left: 4%;
  font-family: var(--font-gothic, sans-serif);
  font-size: clamp(16px, 3.2vw, 28px);
  font-weight: bold;
  line-height: 1.25;
}

.zuden-palt {
  display: contents;
}

.zuden-palt dt {
  grid-column: 2;
  padding: 0.55em 0.8em 0.45em;
  color: #fff;
  font-family: var(--font-gothic, sans-serif);
  font-size: clamp(11px, 1.9vw, 17px);
  font-weight: normal;
  line-height: 1.4;
  white-space: nowrap;
}

.zuden-palt dt.is-off {
  background: #0a6cff;
}

/* 「ベタ打ち」：白い角丸の箱 */
.zuden-palt__tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.25em 0.9em 0.2em;
  border-radius: 1em;
  background: #fff;
  color: #0a6cff;
  font-size: 0.6em;
  line-height: 1.3;
  vertical-align: 0.15em;
}

.zuden-palt dt.is-on {
  background: #ff6b81;
}

.zuden-palt dd {
  grid-column: 3;
  margin: 0;
  font-family: 'ZudenPippi', sans-serif;
  font-size: clamp(18px, 6vw, 55px);
  line-height: 1.2;
  white-space: nowrap;
}

/* 文字詰め（プロポーショナル字幅） */
.zuden-palt dd.palt {
  font-feature-settings: 'palt' 1;
}

/* スマホ：説明を上に出し、ラベルと見本の2列に */
@media screen and (max-width: 600px) {
  .zuden-compare {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 12px;
  }
  .zuden-style__lead {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-left: 0;
  }
  .zuden-palt dt {
    grid-column: 1;
  }
  .zuden-palt dd {
    grid-column: 2;
    font-size: clamp(22px, 9vw, 40px);
  }
}

/* 品字様漢字の一覧 */
.zuden-grid {
  padding: 4px 2px;
  color: #000;
  font-family: 'ZudenPippi', sans-serif;
  font-style: oblique; /* Zu-Den-Pippi-Oblique を使う */
  /* 870px 幅で1行18字まで収まる大きさ */
  font-size: clamp(16px, 4.9vw, 46px);
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.zuden-grid p {
  margin: 0;
}

/* ダブルハピネス（画像） */
.zuden-happiness {
  margin: 0 0 32px;
  padding: 0;
  background: #fff;
}

.zuden-happiness img {
  display: block;
}

/* 黒帯の見出し */
.zuden-bar {
  margin: 0 0 24px;
  padding: 14px 16px 10px;
  background: #000;
  color: #fff;
  font-family: 'ZudenPippi', sans-serif;
  font-size: clamp(18px, 4.4vw, 38px);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
}

/* 大きな文字の行：グループの間に細い縦線 */
.zuden-chuuni {
  color: #000;
  font-family: 'ZudenPippi', sans-serif;
  font-size: clamp(26px, 7.6vw, 68px);
  line-height: 1.25;
  text-align: center;
}

.zuden-chuuni p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.35em;
  margin: 0;
}

.zuden-chuuni .sep {
  display: inline-block;
  width: 2px;
  height: 0.8em;
  background: #222;
}

/* 見出しのルビ（ずでん） */
.page-zudenpippi h2 rt {
  font-size: 0.5em;
  font-weight: normal;
}

/* hr の色・最後のDLボタンを黄色に（他ページと同じ扱い） */
.page-zudenpippi hr {
  border: 2px solid #000;
  margin: 20px 0;
}

.page-zudenpippi #dlButton a:last-child {
  background: #fff253;
  color: #222;
}

.page-zudenpippi #dlButton a:last-child:hover {
  background: #fff7a0;
  color: #7b7b7b;
}

/* DOWNLOAD ボタンの「otf」「ttf」：白い角丸の箱 */
#dlButton .dl-tag {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.15em 0.5em 0.1em;
  border-radius: 6px;
  background: #fff;
  color: #363636;
  font-size: 0.7em;
  line-height: 1.2;
  vertical-align: 0.15em;
}