/* Font Override - Berkeley Mono Variable */
@font-face {
   font-family: "Berkeley Mono";
   src: url("https://blog.yostos.org/uploads/2025/berkeley-mono-variable.woff2") format("woff2-variations");
   font-weight: 100 900; /* 仕様通りの範囲: Thin(100)からBlack(900)まで */
   font-style: oblique -16deg 0deg; /* 仕様通りの範囲: Regular(0deg)からOblique(-16deg)まで */
   font-stretch: 60% 100%; /* 仕様通りの範囲: UltraCondensed(60%)からNormal(100%)まで */
   font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&family=M+PLUS+1:wght@100..900&display=swap');

:root {
  --page-background: #1a1b26;
  --main-text: #a9b1d6;
  --main-link: #7aa2f7;
  --main-link-hover: #89ddff;
  --main-link-border: #292e42;
  --main-link-border-hover: #89ddff;
  --profile-border: #292e42;
  --navigation-button-border: #292e42;
  --navigation-button-background: #24283b;
  --navigation-button-border-hover: #7aa2f7;
  --navigation-button-background-hover: #2ac3de;
  --navigation-text: #a9b1d6;
  --navigation-text-hover: #c0caf5;
  --heading-color: #bb9af7;
  --button-border: #292e42;
  --button-background: #24283b;
  --button-border-hover: #7aa2f7;
  --button-background-hover: #2ac3de;
  --button-text: #a9b1d6;
  --button-text-hover: #c0caf5;
  --hr: #292e42;
  --blockquote-border: #7aa2f7;
  --blockquote-background: #24283b;
  --blockquote-text: #a9b1d6;
  --code-border: #292e42;
  --code-background: #24283b;
  --pre-border: #292e42;
  --pre-background: #24283b;
  --note: #565f89;
  --alert: #f7768e;
  --aside: #24283b;
  --callout: #7aa2f7;
  --conversation-background: #24283b;
  --comment-border: #292e42;
  --footnotes: #787c99;
  --footnote-super: #bb9af7;
  --page-fold: #24283b;
  --video-placeholder: #24283b;
  --comment-form-background-color: #24283b;
  --comment-form-border-color: #292e42;
  --shared-note: #565f89;
  --red-text: #f7768e;
  --highlight: #e0af68;
  --table-border: #a9b1d6;
 /* アーカイブページ専用の変数を追加 */
  --archive-year-border: #bb9af7;  /* heading-colorと同じ */
  --archive-month-border: #7aa2f7; /* main-linkと同じ */
  --archive-month-background: #363B54;  /* 月の背景色 */
}
:root {
  --font_system_ui:  "Berkeley Mono","M PLUS 1 Code" , sans-serif;
  --font_monospace_code: "Berkeley Mono", monospace;
}

:root {
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
}

body {
	font-family: var(--font_system_ui);
    font-weight: 400;
    font-optical-sizing: auto;
    font-size: var(--size-step-0);
    font-style: normal;
    background: var(--page-background);
	color: var(--main-text);
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
	margin: 0;

}

strong {
   font-weight: 800;
   color: #c0c7f4;
}

/* 画像の引き伸ばしを小さな画像ではオフにする */
.page-content .small-image {
  width: auto;
  margin: 0;
   justify-content: center; 
}

/* 画面サイズを80文字に変更 */
.site-header p, .page, .post-content, .post-preview, .post, .archive, .comments, .content-meta, .page-fold-content, footer,  .post-group {
    max-width: 80ch;
    font-size: var(--size-step-0);
    margin: 0 auto;
}

. posts {
  width: 100%;
  margin:  0 auto;
}

/* font for codes */
pre code {
  font-family: var(--font_monospace_code);
  font-weight: medium;
  font-feature-settings: "liga" 1, "calt" 1;  /* リガチャを有効化 */
}


p code, li code, span.tinylytics_hits, span.tinylytics_uptime {
	background-color: var(--code-background);
	border: 1px solid var(--code-border);
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 0.85em;
	border-radius: 1em;
    font-family: var(--font_monospace_code);
     font-feature-settings: "liga" 1, "calt" 1;  /* リガチャを有効化 */
}


article.post-preview {
    width: 95%;
    max-width: 80ch;
    margin: initial;
  }

article.post-preview h2.post-title {
   font-size: var(--size-step-1);
   margin-bottom: 0rem;
    margin-left: -1.4rem;
}

.title-area {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.title-area .date {
    padding: initial;
    width: initial;
    margin: initial;
    position: initial;
    display: flex;
  }

.title-area .date {
  font-size: var(--size-step-0);
  font-weight: bold;
  margin-bottom: 0px;
  margin-left: -12rem;  /* 左に12remの余白を作る */
  position: absolute;   /* 絶対位置指定 */
  width: 150px;
  display: block;
  padding-left: 0.5rem;
  text-align: right;   /* 日付を右寄せ */
}

.date:has(+ .post-title) {
  margin-top: var(--size-step-4);
}

.date-header{
  display: flex;
  align-items: baseline;
  padding-top: 1rem;
  justify-content: space-between;
}
.date-header .date {
    padding: initial;
    width: initial;
    margin: initial;
    position: initial;
    display: flex;
    white-space: nowrap;  /* 改行を防ぐ */
  }


.date-header .date {
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.9;
  margin-left: -8.5rem;  /* 左に12remの余白を作る */
   
  width: 940px;
   padding-left: 0.5rem;
  text-align: right;   /* 日付を右寄せ */
   white-space: nowrap;
}

.date-header .date::before {
  content: "░░░║";
  white-space: nowrap;
}
.date-header .date::after {
 content: "║░░░";
  white-space: nowrap;
}


@media only screen and (max-width: 1000px) {
  
  .title-area {
    display: flex;
    flex-direction: column;
  }
  
  .title-area .date {
    padding: initial;
    width: initial;
    margin: initial;
    position: initial;
    display: flex;
  }


  .date-header .date {
     padding: initial;
    width: initial;
    margin: initial;
    position: initial;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    white-space: nowrap;
  }

}

a.post-date, .post-date-wrapper > time, .microblog_time a {
	opacity: 0.6;
	transition: opacity 0.1s ease-in;
	text-transform: uppercase;
    font-family: var(--font_monospace_code);
	font-weight: bold;
	border: none;
}
a.post-date:hover::after {
	content: "";
}

.posts {
    margin-left: var(--size-step-0);
}

/* read moreの行間が間抜けなので */
a.read-more {
    border: none;
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding: 0;
}
article.post-preview {
    width: 95%;
    max-width: 80ch;
    margin: initial;
    font-size: var(--size-step-0);
  }

.page-content img, .page-content video {
    max-width: 80ch;  /* 現在は710px */
}
.page-content ul, .page-content ol, .page-content dl {
    max-width: 80ch;  /* 現在は680px */
}

/* Archiveページのレイアウト */
/* メインタイトル（"Articles"など） */
.archive h2.post-title {
  font-size: var(--size-step-3);
  color: var(--heading-color);
  border: none;
  margin-bottom: 1em;
}

/* 年の区切り */
.archive h2 {
  font-size: var(--size-step-2);
  color: var(--heading-color);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding: 0.2em;
  background-color: var(--page-background);
  border-bottom: 2px solid var(--archive-year-border);
}

/* 月の区切り */
.archive h3 {
  font-size: var(--size-step-1);
  color: var(--main-text);
  margin-top: 1em;
  margin-bottom: 0.5em;
  padding: 0.5em;
  background-color: var(--archive-month-background);
  opacity: 0.8;
}

/* 記事アイテムのコンテナ */
.archive-item {
  display: flex;
  gap: 0.5em;
  margin: 0.25em 0;
  align-items: flex-start;
}

/* 日付部分 */
.archive-date {
  flex: 0 0 80px;
  color: var(--navigation-text);
  font-feature-settings: "tnum";  /* 数字を等幅に */
}

/* タイトルリンク */
.archive-title {
  flex: 1;
  text-decoration: none !important;  /* 強制的に下線を消す */
  padding-left: 0.5em;
  position: relative;
  color: var(--main-link);
}

/* タイトルリンクのホバー状態 */
.archive-title:hover {
  text-decoration: none;
  color: var(--main-link-hover);
}


/* カテゴリー一覧部分 */
.archive-categories {
  margin: 2em 0;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
}

table {
  border-collapse: collapse;
  border: 1px solid var(--table-border);
}

th, td {
  border: 1px solid var(--table-border);
  padding: 8px;
}

/* Archive ページのレイアウト end */

iframe {
    max-width: 80ch;  /* 現在は700px */
    width: 100%;
}
/* レスポンシブ設定 */
@media only screen and (max-width: 1000px) {
  .title-area {
    display: flex;
    flex-direction: column;
  }

  .title-area .date {
    padding: initial;
    width: initial;
    margin: initial;
    position: initial;
    display: flex;
  }
  
  article {
    width: 95%;
    max-width: 80ch;
    margin: initial;
  }
}
/* 画面サイズの変更に伴い、Padding指定の変更 */
.page-content p, .page-content h1, ... {
    padding-left: 2rem;
    padding-right: 2rem;
}





.page-content {
  max-width: 80ch;
  margin: 0 auto;
}

hr.article-break {
	width: auto;
	max-width: 100%;
	height: 1px;
	background-color: var(--hr);
	margin-top: 2em;
	margin-bottom: 2em;
	display: block;
	border: none;
}

/* Color */
:root {
  --pre-background: #333333;
  --pre-text: #e0e0e0;
}

/* iframeの補正 */
iframe {
    max-width: none; /* max-widthをリセット */
    width: 700px;     /* widthをリセット */
    height: auto;    /* heightをリセット */
    aspect-ratio: auto; /* aspect-ratioをリセット */
}

iframe.youtube {
	max-width: 100%;
	width: 700px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* 画像 */
p img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* 必要に応じて以下の幅設定を変更 */
    max-width: 100%; /* 親要素の幅に応じて画像を縮小する場合 */
    height: auto; /* 画像の縦横比を保つために高さを自動調整 */
}




/* Adjust Site Nav style */
.site-nav {
  font-size: 16px;
}

.site-header nav.site-nav .submenu {
  position: relative;
  display: inline-block;
}

.site-header nav.site-nav .submenu-items {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* プルダウンメニュー内のリンクに適用するスタイル */
.site-header nav.site-nav .submenu-items a {
  color: black;
  padding: 6px 6px;
  text-decoration: none;
  display: block;
  border: none; /* ボーダーを削除 */
  border-radius: 0; /* 角を丸くしない */
  background-color: transparent; /* 背景色を透明に */
  padding: 6px 12px; /* パディングを適切に設定 */
  color: black; /* テキストの色を黒に */
  text-decoration: none; /* 下線を削除 */
  display: block; /* ブロック要素に設定 */
  font-weight: normal; /* フォントの太さを通常に設定 */
}

/* Blockquote のスタイル */

blockquote {
  max-width: 640px;
  font-size: 1.0em;
  font-style: oblique;
  position: relative;
  padding: 2.5em 2.5em 2em 3em;
  color: #707070;
  border: none;
  margin-left: 2.5em; /* 左側の余白を追加 */
  box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
}

blockquote cite {
  font-style: normal;
}

blockquote::before,
blockquote::after {
  display: inline-block;
  position: absolute;
  width: 4em;
  height: 4em;
  content: "";
}

blockquote::before {
  top: 0;
  left: -1.5em; /* 擬似要素を左に配置 */
  border-top: 3px solid #d6d6d6;
  border-left: 3px solid #d6d6d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z' fill='%23d6d6d6'%3E%3C/path%3E%3C/svg%3E");
  background-position: top 35% left 35%;
  background-size: 2em;
  background-repeat: no-repeat;
}

blockquote::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #d6d6d6;
  border-right: 3px solid #d6d6d6;
}

blcokquote p {
  margin-top: 0;
}

blockquote footer {
  display: flex;
  align-items: cetner;
  justify-content: flex-end;
  text-align: right;
  margin-top: 1em;
  margin-bottom: 1em;
  opacity: 1.0
  color: #b0b0b0;
  font-size: 0.8em;
  padding: 10px 30px;
}

blockquote footer cite {
  margin: 0;
  padding: 0;
  display: inline;
}
blockquote footer cite::before {
  content: "Source: ";
  font-weight: bold; /* 太字で表示 */
}

figure {
	margin: 0;
    padding: 0;
}

figcaption {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    color: gray;
    margin-top: -18px;
}