@charset "utf-8";

/* ------------------------------------------------------------------------------------------ */
/* 投稿ページ（single）（ブログ記事ページ） */

/* h1 */
.h1_single {
  margin-bottom: 1.2em;
  text-align: center;
  font-family: var(--font_serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  color: var(--color3);
}
@media only screen and (max-width: 750px) {
  .h1_single {
    font-size: 4.2vw;
  }
}

/* h2 */
.single-post section h2 {
  background-color: var(--color1);
  margin-bottom: 0.5em;
  padding-inline: 0.35em;
  padding-block: 0 0.1em;
  color: white;
  transform: skewX(-15deg);
  font-family: var(--font_serif);
  font-weight: 500;
  font-size: 2rem;
}
@media only screen and (max-width: 750px) {
  .single-post section h2 {
    font-size: 3.8vw;
  }
}

/* h3 */
.single-post section h3 {
  margin-bottom: 0.2em;
  font-family: var(--font_serif);
  font-size: var(--fs_m);
  font-weight: 700;
  color: var(--color3);
  letter-spacing: 0.1em;
  line-height: 1.5em;
}
.single-post section h3::before {
  content: "⚫︎";
}

/* 本文 */
.single-post section.box_01 p {
  line-height: 1.75em;
}

/* 文字リンク */
.single-post p > a {
  color: var(--color3);
}
.single-post p > a:hover {
  color: var(--color2);
}

/* キャプション */
.single-post :is(.wp-element-caption, .wp-block-image figcaption, figure figcaption) {
	font-size: var(--fs_xs);
	font-style: italic;
}

/* 引用 */
.single-post blockquote {
  padding: 15px;
  background-color: var(--color4);
}
@media only screen and (max-width: 750px) {
  /* SP */
  .single-post blockquote {
    padding: 2vw;
  }
}

/* 日付 */
.single-post .blog_box div {
  position: relative;
}
.single-post .blog_date {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: upright;
  left: -24px;
  top: 0px;
  font-size: 1.2rem;
}
@media only screen and (max-width: 750px) {
  /* SP */
  .single-post .blog_date {
    left: -3.45vw;
    font-size: 1.6vw;
  }
}

/* 区切り線 */
.single-post .wp-block-separator.has-alpha-channel-opacity {
	opacity: 1;
	border-top: 1px solid rgba(0, 0, 0, 1);
	font-size: var(--fs_s); /* margin em用 */
	margin-block: 1.5em;
}

/* コードブロック全体のスタイル変更 */
.wp-block-code {
	background-color: var(--color4);
	border: 1px solid #000;
	padding: 1em;
	margin-block: 1em;
	font-family: Consolas, Monaco, monospace;
	font-size: var(--fs_xs);
}

/* コードの中身（<code>タグ部分） */
.wp-block-code code {
	color: #333;
}