@charset "UTF-8";

/*
 * MonoDeck typography
 * Noto Sans JPのまま、本文とタイトル・見出しの濃淡・サイズ・字間で階層感を作る。
 * H2は濃い短線と淡い全幅線を重ねたエディトリアルルールで章の始まりを示す。
 */

@font-face {
  font-family: "MonoDeck Noto Sans JP";
  src: url("../fonts/NotoSans_Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MonoDeck Noto Sans JP";
  src: url("../fonts/NotoSans_Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --monodeck-font-sans: "MonoDeck Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  --monodeck-body-color: #333333;
  --monodeck-heading-primary-color: #111111;
  --monodeck-heading-secondary-color: #1a1a1a;
  --monodeck-heading-rule-color: #d7dce0;
}

/* 公開画面 */
body:not(.wp-admin) {
  font-family: var(--monodeck-font-sans);
}

/* 記事一覧: タイトルとの階層を保つため、説明文だけを少し小さく固定する。 */
body.home .p-postList__excerpt,
body.blog .p-postList__excerpt,
body.archive .p-postList__excerpt,
body.search .p-postList__excerpt {
  font-size: 14px;
  line-height: 1.65;
}

/* 記事ページ: パンくずと記事タイトルの間隔をスマホ24pxにする。 */
body.single-post .l-content__body {
  margin-top: 24px;
}

/* 記事本文: 17px・1.7を維持し、本文色を少し明るくする */
.c-postContent,
.post-content,
.editor-styles-wrapper {
  color: var(--monodeck-body-color);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.c-postContent p,
.c-postContent li,
.post-content p,
.post-content li,
.editor-styles-wrapper p,
.editor-styles-wrapper li {
  color: var(--monodeck-body-color);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* ブロックエディター本文 */
.editor-styles-wrapper,
.editor-styles-wrapper p,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper li {
  font-family: var(--monodeck-font-sans) !important;
}

/* H1: スマホ。大きさを少し抑え、濃い色で本文と区別する。 */
.c-pageTitle__main,
.editor-styles-wrapper h1 {
  color: var(--monodeck-heading-primary-color);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* H2: スマホ */
.c-postContent h2,
.editor-styles-wrapper h2 {
  position: relative;
  margin: 72px 0 16px;
  padding: 0;
  border: none;
  color: var(--monodeck-heading-primary-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* H2: 淡い全幅線に濃い短線を重ね、余白と罫線で章の切り替わりを作る。 */
.c-postContent h2::before,
.editor-styles-wrapper h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 0 18px;
  background: var(--monodeck-heading-rule-color);
  pointer-events: none;
}

.c-postContent h2::after,
.editor-styles-wrapper h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--monodeck-heading-primary-color);
  pointer-events: none;
}

/* H3: スマホ */
.c-postContent h3,
.editor-styles-wrapper h3 {
  margin: 56px 0 16px;
  padding: 0;
  border: none;
  color: var(--monodeck-heading-secondary-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* H4: スマホ */
.c-postContent h4,
.editor-styles-wrapper h4 {
  margin: 40px 0 16px;
  padding: 0;
  border: none;
  color: var(--monodeck-heading-secondary-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* PC: 記事上部32px。タイトルだけ40pxへ抑え、H2〜H4は前試験のサイズを維持する。 */
@media (min-width: 1000px) {
  body.single-post .l-content__body {
    margin-top: 32px;
  }

  .c-pageTitle__main,
  .editor-styles-wrapper h1 {
    font-size: 40px;
    line-height: 1.4;
  }

  /* 投稿タイトルだけをアイキャッチと同じ110%幅へ広げる。本文幅は680pxのまま維持する。 */
  body.single-post .p-entry__title .c-pageTitle__main {
    width: 110%;
    max-width: none;
    margin-left: -5%;
    margin-right: -5%;
  }

  .c-postContent h2,
  .editor-styles-wrapper h2 {
    margin: 96px 0 24px;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .c-postContent h2::before,
  .editor-styles-wrapper h2::before {
    margin-bottom: 20px;
  }

  .c-postContent h2::after,
  .editor-styles-wrapper h2::after {
    width: 64px;
  }

  .c-postContent h3,
  .editor-styles-wrapper h3 {
    margin: 72px 0 24px;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .c-postContent h4,
  .editor-styles-wrapper h4 {
    margin: 56px 0 24px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
}