/* ==============================
   フォント・変数定義
============================== */

@import url('https://fonts.bunny.net/css?family=noto-sans-jp:400,700&display=swap');

body {
  /* フォント */
  --font-default: 'Noto Sans JP',
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Helvetica,
    Arial,
    "Segoe UI",
    Inter,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Microsoft YaHei Light",
    sans-serif;

    font-family:  var(--font-default) ;

  /* アクセントカラー */
  --accent-h: 217;
  --accent-s: 68%;
  --accent-l: 37%;

  /* 背景色 */
  background-color: #fffffe;
}

  /* プレビュー側にも適用 */
    .markdown-preview-view,
    .published-container  {
      font-family:  var(--font-default) ;
}


/* ==============================
   全体テキスト
============================== */

.markdown-preview-view {
  color: #3f3f3f;
}


/* ==============================
   本文
============================== */

p {
  font-size: 0.945em;
  letter-spacing: 0.03em;
  line-height: 1.68;
}

/* 小さな補足テキスト */
.small-text {
  font-size: 0.9em;
}

.markdown-preview-view table td,
.markdown-preview-view table th {
  font-size: 0.95em;
  letter-spacing: 0.055em;
  line-height: 1.68;
  color: #3f3f3f;
  font-family: var(--font-default);
}


/* ==============================
   引用
============================== */

blockquote {
  background-color: #f7f7f7 !important;
  border-left: 4px solid #cccccc !important;
  padding: 10px 15px !important;
  margin: 17px 7px !important;
}

blockquote p {
  font-size: 0.9em;
  letter-spacing: 0.055em;
  line-height: 1.75;
}


/* ==============================
   脚注
============================== */

.footnotes {
  font-size: 0.93em;
  color: #4d5156;
}


/* ==============================
   画像
============================== */

.markdown-preview-view img,
.published-container img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;

  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}


/* ==============================
   ファイルツリー
============================== */

.tree-item-inner {
  font-size: 1.05em;
}


/* ==============================
   スマホ（〜640px）
============================== */

@media (max-width: 640px) {
  p {
    font-size: 1.01em;
    line-height: 1.72;
  }

  blockquote p {
    font-size: 0.95em;
    line-height: 1.68;
  }

  h1 { font-size: 1.4em !important; }
  h2 { font-size: 1.5em !important; }
  h3 { font-size: 1.3em !important; }
  h4 { font-size: 1.2em !important; }
}


/* ==============================
   タブレット（768px〜1024px）
============================== */

@media (min-width: 768px) and (max-width: 1024px) {
  p {
    line-height: 1.66;
  }

  blockquote p {
    font-size: 0.9em;
    line-height: 1.64;
  }

  .tree-item-inner {
    font-size: 1.25em;
  }
}