/* styleの上書き */
/* NotoSansJP Regular400 */
@font-face {
  font-family: "NotoSansJP";
  src: url("/assets/fonts/NotoSansJP-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

/* NotoSansJP Bold700 */
@font-face {
  font-family: "NotoSansJP";
  src: url("/assets/fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}

/* てぶろぐ記事編集アイコン */
.te-edit::before {
  margin-right: 2px;
  content: "";
  display: inline-block;
  /* アイコンを表示するため */
  width: 16px;
  height: 16px;
  vertical-align: sub;
  -webkit-mask: url("/assets/icons/edit.svg") no-repeat center;
  mask: url("/assets/icons/edit.svg") no-repeat center;
  mask-size: contain;
  background-color: #c1b7a3;
}

/* てぶろぐ返信アイコン */
.te-reply::before {
  content: "";
  display: inline-block;
  /* アイコンを表示するため */
  width: 16px;
  height: 16px;
  vertical-align: sub;
  -webkit-mask: url("/assets/icons/reply.svg") no-repeat center;
  mask: url("/assets/icons/reply.svg") no-repeat center;
  mask-size: contain;
  background-color: #c1b7a3;
}

/* てぶろぐカタログアイコン */
a.categorylink::before {
  margin-right: 2px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: sub;
  -webkit-mask: url("/assets/icons/folder.svg") no-repeat center;
  mask: url("/assets/icons/folder.svg") no-repeat center;
  mask-size: contain;
  background-color: #c1b7a3;
}

/* てぶろぐRSSアイコン＆管理画面アイコンを囲むdiv */
.te-control {
  margin: 21px 0 0;

  & a {
    text-decoration: none;
  }
}

/* てぶろぐRSSアイコン */
.te-rss::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-mask: url("/assets/icons/rss_feed.svg");
  mask: url("/assets/icons/rss_feed.svg");
  background-color: #767164;
}

/* リサイズプログラム用アイコン */
.te-program::before {
  margin-left: 4px;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-mask: url("/assets/icons/terminal.svg");
  mask: url("/assets/icons/terminal.svg");
  background-color: #767164;
}

/* データベース同期用アイコン */
.te-sync::before {
  margin-left: 4px;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-mask: url("/assets/icons/cloud_sync.svg");
  mask: url("/assets/icons/cloud_sync.svg");
  background-color: #767164;
}

/* てぶろぐ日時変更アイコン */
.te-redate::before {
  margin-left: 4px;
  content: "";
  display: inline-block;
  /* アイコンを表示するため */
  width: 24px;
  height: 24px;
  -webkit-mask: url("/assets/icons/redate.svg");
  mask: url("/assets/icons/redate.svg");
  background-color: #767164;
}

/* てぶろぐ管理画面アイコン */
.te-settings::before {
  margin-left: 6px;
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-mask: url("/assets/icons/settings.svg");
  mask: url("/assets/icons/settings.svg");
  background-color: #767164;
}

/* ページ前後移動リンク群ボックス全体 */
.pagenavi {
  margin: 21px 14px;
}

.pagelinks {
  margin: 0.15em;

  & a {
    /* ページ移動リンクの文字 */
    font-weight: bold;
  }
}

/* ページ番号リンク群ボックス全体 */
/* 現在のページ番号の装飾 */
a.pagenumhere {
  text-decoration: none;
  background-color: #747474;
  color: white;
  border-radius: 1em;
}

/* ページ番号リンクにマウスが載った際の装飾 */
a.pagenumlink:hover {
  text-decoration: none;
  background-color: #747474;
  color: white;
  border-radius: 0.3em;
}

a.pagenumlink {
  padding: 0 3px;
}

.searchbox {
  margin: 0px 10px;
}

.tegalogpost {
  width: 100%;
}

.line-control {
  margin: 7px 0 0;
}

/* 投稿ボタン */
.postbutton {
  display: inline-block;
  background: #363636;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border: none;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    /* 投稿ボタンにマウスが載ったとき */
    background-color: #747474;
  }
}

/* 日付リンクリスト区画 */
/* 日付リスト(年単位) */
.datelimitlist {
  margin: 21px 0;
}

/* 日付リスト(月単位) */
.datelimitsublist {
  margin: 0;
  padding: 0 0 0 5px;
  list-style-type: none;
  font-size: 0.9em;
}

/* ――――――――――――――――――――――――― */
/* 年表記が単独で存在する場合に、月表示を横に並べる */
/* 縦に並べたい場合は、この区画を削除して下さい。 */
/* ――――――――――――――――――――――――― */
.datelimitlist .datelimitsublist .datelimit-month {
  display: inline-block;
  margin-right: 0.9em;
}

/* ―――――――――――――――――――――――――――――――――――― */
/* 年表記が単独で存在する場合に、月リンク内に含まれる年表記を非表示にする */
/* 年表記も表示したい場合は、この区画を削除して下さい。(詳細解説→ https://www.nishishi.com/cgi/tegalog/custom/#customizecss-datelist ) */
/* ―――――――――――――――――――――――――――――――――――― */
.datelimitlist .datelimitsublist .year {
  display: none;
}

/* 日付リスト内の該当件数 */
.datelimitlist .num {
  font-size: 0.85em;
  color: #c1b7a3;
  margin-left: 0.3em;
}

/* ------------------------------------ */

/* 自作クラス */
.onelog_datebox {
  margin: 0 0 7px 0;
  text-align: right;
}

.onelog_datebox * {
  text-decoration: none;
  color: #c1b7a3;
  font-size: 1.2rem;
}

.onelog_date {
  margin: 0 0 0 7px;
  padding: 0 14px 0 0;
}

.onelog_commentbox {
  margin: 7px 0 0;
  padding: 0 14px;
  line-height: 1.4;
}

.onelog_commentbox .taglink {
  /* padding-left: 5px; */
  font-size: 0.8em;
}

.list_emoji {
  margin-top: 0;
  padding: 0 5px;
}

.list_emoji img {
  max-width: 24px;
}

/* てぐろぐ固有のクラス */

.cemoji img {
  margin: 0 2px 2px 0;
  max-width: 18px;
}

.onelogbox {
  margin: 14px 0 0;
  border-bottom: 1px solid #767164;
}

.onelogbox .onelog_datebox .categories a.categorylink {
  margin: 0 0 0 5px;
}

.passkeyform {
  margin: 0;
}

.mainguide {
  margin: 21px 0 0;
  padding: 0 0 7px 7px;
  border-bottom: 1px solid #767164;
}

ul.hashtaglist {
  display: flex;
  flex-wrap: wrap;
  margin: 7px 0;
  padding: 0 14px;
}

ul.hashtaglist * {
  list-style: none;
  padding: 0;
  color: #b3d39b;
}

ul.hashtaglist li {
  font-size: 1.4rem;
  margin: 0 5px 5px 0;
  padding: 4px 0;
  line-height: 1;
}

ul.hashtaglist li a,
a.taglink {
  color: #b3d39b;
}

/* ハッシュタグ一覧用アイコン */
ul.hashtaglist li::before {
  content: "#";
  display: inline-block;
  margin-right: -5px;
  width: 14px;
  height: 14px;
  /*   -webkit-mask: url("/assets/icons/tag.svg");
  mask: url('/assets/icons/tag.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: bottom;
  background-color: #b3d39b; */
}

.situation {
  clear: both;
  background: #fff;
  line-height: 2;
  font-weight: bold;
  font-size: 1.7rem;
}

.dateseparator {
  clear: both;
  margin: 21px 0 0;
  padding: 3px 20px;
  background: #fff;
  border-bottom: 2px solid #767164;
  line-height: 2;
  font-weight: bold;
  font-size: 1.7rem;
}

.datefunclinks * {
  text-decoration: none;
  color: #c1b7a3;
  font-size: 1.2rem;
  font-weight: normal;
}

.datefunclinks a {
  color: #c1b7a3;
}

span.embeddedmovie {
  padding-top: 5px;
  display: inline-block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 560px;
  max-height: 315px;

  & iframe {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* ミニウィンドウ（ポップアップ）のスタイル */
#popup {
  display: none;
  position: absolute;
  /* 動的に位置を設定 */
  padding: 10px 0;
  background-color: white;
  border: 2px solid #ccc;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 300px;
  font-size: 1.4rem;
  transform: translateY(-100%);
  /* ポップアップをリンクの上に表示 */
}

#popupContent {
  max-height: 400px;
  overflow: auto;
}


/* ---------------------------------- */
/* 画像グリッドのコンテナ */
.image-grid {
  display: grid;
  gap: 5px;
  /* 画像と画像の間の隙間 */
  margin-top: 5px;
  /* 本文との間隔 */
  width: 100%;
  /* 4列で折り返していく設定 */
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row;
  /* 折り返し有効 */
}

/* 個別の画像リンク */
.image-grid .imagelink {
  display: block;
  width: 100%;
  height: auto;

  /* 画像本体 */
  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #ccc;
    aspect-ratio: 1/1;
  }
}


/* ------------------------------------ */
/* ▼限定解除リンク(＝HOMEに戻るリンク) */
/* ------------------------------------ */
.pagehome {
  margin: 0.15em;
  /* 外側の余白 */
  font-weight: bold;
  /* 太字 */
}


/* ================================================================ */
/* てがろぐVer 4.5.5β以降で使える、カード型リンク用CSSの抜粋です。 */
/* お使いのスキンのCSSに追記するなどしてご活用下さい。              */
/* ================================================================ */

/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
  display: inline-block;
  width: 100%;
  max-width: 500px;
  /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
  /* padding: 0 0.25em 0.5em 0;      内側の余白量 */
  margin-top: 7px;
  font-size: 0.9rem;
  /* 文字サイズ */
  text-decoration: none;
  /* リンク文字の下線を消す */
  vertical-align: middle;
  /* 行内の上下方向では中央配置 */
}

/* ------------------------------------- */
/* リンクカードの装飾(サイズS/L共通部分) */
/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
/* ------------------------------------- */
/* カード外枠 */
.cardlinkbox {
  border: 1px solid #ccc;
  /* 枠線 */
  border-radius: 7px;
  /* 角丸 */
  background-color: white;
  /* 背景色 */
  display: flex;
  /* 内部レイアウトのFlexbox化 */
}

/* (マウスが載ったとき) */
.cardlinkbox:hover {
  background-color: #f5fff5;
  /* 背景色 */
  border-color: #8c8;
  /* 枠線色 */
}

/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
.cardlinkimage {
  background-image: linear-gradient(-30deg, #8a8, #e0f0e0);
  /* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
  background-size: cover;
  /* 背景画像で枠を埋める */
  background-position: center center;
  /* 背景画像を中央に寄せる */
  background-repeat: no-repeat;
  /* 背景画像を繰り返さない */
}

/* ▽リンクカード内のテキスト枠 */
.cardlinktextbox {
  display: flex;
  /* Flexbox化 */
  flex-direction: column;
  /* 子要素を縦方向に並べる */
  padding: 0.5em 1em;
  /* 内側の余白量 */
}

/* ▽リンクカードのテキスト枠内の3要素共通 */
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
  /* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
  display: -webkit-box;
  /* -webkit-line-clampを使うために必要な記述1 ※A */
  -webkit-box-orient: vertical;
  /* -webkit-line-clampを使うために必要な記述2 ※A */
  overflow: hidden;
  /* 表示量を制限する場合に必須の記述 */
  /* ↓制限の仕様 */
  line-clamp: 1;
  /* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
  -webkit-line-clamp: 1;
  /* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
  text-overflow: ellipsis;
  /* 省略記号(三点リーダー) */
}

/* リンクタイトル */
.cardlinktitle {
  padding-bottom: 0.25em;
  /* 内側下端の余白量 */
}

/* リンク概要文 */
.cardlinkdescription {
  line-height: 1.3;
  /* 行の高さ */
  color: #555;
  /* 文字色 */
  line-clamp: 2;
  /* (既存指定の上書き) 最大2行まで見せる */
  -webkit-line-clamp: 2;
  /* (既存指定の上書き) 最大2行まで見せる */
}

/* リンクドメイン */
.cardlinkurl {
  color: #999;
  /* 文字色 */
}

/* ----------------------------------- */
/* リンクカードの装飾(サイズS用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-L,
.cardsize-S {
  flex-direction: row;

  /* 画像とテキストは横に並べる(Flexbox) */
  /* ▽リンクカード内の画像枠 */
  .cardlinkimage {
    min-width: 100px;
    /* 最小の横幅 */
    min-height: 100px;
    /* 最小の高さ */
    border-radius: 6px 0 0 6px;
    /* 左側だけ角丸 */
    flex-shrink: 0;
    /* 枠サイズを自動縮小させない */
  }

  /* ▽リンクカード内のテキスト枠 */
  .cardlinktextbox {
    border-left: 1px solid #ccc;
    /* 左側の枠線 */
    justify-content: center;
    /* Flexboxの上下方向での中央寄せ */
  }

  /* ▽リンクカードのテキスト枠内の3要素 */
  .cardlinktitle {
    order: 2;
  }

  /* タイトルは、2番目に表示 */
  .cardlinkdescription {
    order: 3;
  }

  /* 概要文　は、3番目に表示 */
  .cardlinkurl {
    order: 1;
  }

  /* ドメインは、1番上に表示 */
}

/* ----------------------------------- */
/* リンクカードの装飾(サイズL用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
/*		.cardsize-L {
/*			flex-direction: column;             /* 画像とテキストは縦に並べる(Flexbox) */
/*		}
/*			/* ▽リンクカード内の画像枠 */
/*			.cardsize-L .cardlinkimage {
/*				aspect-ratio: 1.91 / 1;     /* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
/*				width: 100%;                /* 横幅は枠最大に拡げる */
/*				height: auto;               /* 高さは自動計算 */
/*				border-radius: 6px 6px 0 0; /* 上側だけ角丸 */
/*			}
/*			/* ▽リンクカード内のテキスト枠 */
/*			.cardsize-L .cardlinktextbox {
/*				border-top: 1px solid #ccc; /* 上側の枠線 */
/*			}
/*				/* ▽リンクカードのテキスト枠内の3要素 */
/*				.cardsize-L .cardlinktitle { font-weight: bold; }        /* 太字 */
/*				.cardsize-L .cardlinkdescription { min-height: 2.5em; }  /* 内容量が少ない場合でも一定の高さを確保 */
/*				.cardsize-L .cardlinkurl {
/*					border-top: 1px solid #ddd;  /* 上側の枠線 */
/*					margin-top:0.5em;            /* 上側の枠線より上の余白量 */
/*					padding-top:0.5em;           /* 上側の枠線より下の余白量 */
/*					font-size:0.75rem;           /* 文字サイズ(小さめ) */
/*				}