@charset "utf-8";
/* ………………………………………………… */
/* CMSkin CSSひな形 https://10prs.com/    */
/* Ver.2023/04/09 17:28                    */
/* ………………………………………………… */

/* フォント・配色カスタマイズ用 ================================
てがろぐ管理画面からフォントや配色を変更したい場合は以下の部分を
管理画面＞設定＞フリースペース＞「上書きスタイルシート」欄に
カット＆ペーストし、「外側スキンに [[FREE:EXTRACSS]] の記述が
ある箇所にのみ出力する」にチェックを入れ保存してください
※その場合このskin-cms.cssの以下の部分は削除してください
============================================================= */
/* ウェブフォント用外部CSS読み込み */
@import url('https://fonts.googleapis.com/css2?family=Secular+One&family=Klee+One:wght@600&family=Kaisei+Decol:wght@700&family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');

/* CSS変数設定 */
:root {
  --main-text-color: #4a4a4a; /* 基本の文字色 */
  --dark-text-color: #000; /* 暗めの文字色 */
  --light-text-color: #808080; /* 薄めの文字色 */
  --main-bg-color: #efefef; /* 全体の背景色 */
  --dark-bg-color: #a0a0a0; /* 暗めの背景色 */
  --light-bg-color: #fafafa; /* 薄めのの背景色 */
  --post-bg-color: #fff; /* 記事表示部分の背景色 */
  --a-color: #006fbf; /* リンク文字色 */
  --visited-color: #999; /* 訪問済みリンク文字色 */
  --hover-color: #333; /* マウスホバー時リンク文字色 */
  --base-font-size: 1.6rem; /* 基本文字サイズ */
  --small-font-size: 1.1rem; /* 小さい文字サイズ */
  /* --main-font: 'Zen Kaku Gothic New', sans-serif; */
  /* 基本フォント名 */
  /* --midashi-font: 'Kaisei Decol', serif; */
  /* サイト・記事タイトルフォント名 */
  --icon-font:
    'Line Awesome Free', 'Line Awesome Brands'; /* アイコンフォント名 */
  --novel-font: 'Klee One', serif; /* 小説フォント名 */
  --contents-width: 900px; /* 表示大枠幅 */
  --box-border-color: #333; /* 記事表示ボックスの線色 */
  --box-bg-color: #fff; /* 記事表示ボックスの背景色 */
  --box-radius: 0px; /* 記事表示ボックスの角丸 */
  --btn-border-color: #aaa; /* ボタンの線色 */
  --btn-bg-color: #eee; /* ボタンの背景色 */
  --btn-radius: 3px; /* ボタンの角丸 */
}
/* ======== フォント・配色・表示非表示カスタマイズ用 ここまで */

/* パーツ表示非表示用 =================================
※スキンHTMLから該当箇所を削除する方を推奨※
てがろぐの管理画面から変更したい場合は以下の部分を
管理画面＞設定＞フリースペースにカット＆ペーストし
header.html16行目付の近skin-cms.css呼び出しタグより下に
[[FREESPACE:数字]]と追記してください
===================================================== */
.sub_title,/* 副タイトル */
.descprition,/* 一行概要文 */
.breadcrumb,/* パンくずリスト */
.reverse_link,/* 表示順切り替えリンク */
.yomiage,/* 読上リンク */
#utility_links,/* 下記ボックス群丸ごと全部 */
	.subarea.search,/* 検索フォーム */
	.subarea.hashtags,/* ハッシュタグ一覧 */
	.subarea.categories,/* カテゴリ一覧 */
	.subarea.images,/* 新着画像一覧 */
	.subarea.latestpost,/* 新着投稿一覧 */
	.subarea.archives,/* 日付別ログ一覧 */
	.subarea.freespace,/* フリースペース */
	.subarea.viewmode,/* モード別表示一覧 */
	.subarea.calender/* カレンダー */ {
  /* display:none!important */
}
/* ======== 表示非表示カスタマイズ用 ここまで */

/* ====================== 基本スタイル */
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  background-color: var(--main-bg-color);
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  line-height: 1.6;
  color: var(--main-text-color);
  font-size: var(--base-font-size);
  font-family: var(--main-font);
  letter-spacing: 0.05rem;
  animation: fadein 1.2s ease;
  -webkit-text-stroke-width: 0.14px !important;
}
@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
a {
  text-decoration: none;
  transition: 0.3s;
}
a:link {
  color: var(--a-color);
}
a:visited {
  color: var(--visited-color);
}
a:hover {
  color: var(--hover-color);
}
img,
video,
iframe,
audio {
  width: auto;
  max-width: 100%;
}
input,
select {
  padding: 2px;
  border: 1px solid var(--btn-border-color);
  background-color: #fff;
  border-radius: var(--btn-radius);
}
button,
input[type='submit'],
input[type='button'] {
  padding: 2px 0.5em;
  border: 1px solid var(--btn-border-color);
  background-color: var(--btn-bg-color);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
select {
  background: #fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23999" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>')
    no-repeat right 4px center / 10px auto;
}
table {
  border-collapse: collapse;
}
details summary {
  list-style: none;
  cursor: pointer;
}

:is(.global_nav, .admin_link) label {
  cursor: pointer;
}
:is(.main_title, .global_nav, .post_title, .admin_link) a {
  color: var(--main-text-color);
}
[class$='title'] {
  font-family: var(--midashi-font);
  font-weight: 900;
}
img.emoji {
  /* Twemoji用 */
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

/* ====================== header */
body > header {
  padding: 1em;
}
body > header hgroup {
}
.main_title,
.sub_title,
.descprition {
  line-height: 1.1;
  text-align: center;
}
.main_title {
}
.sub_title {
}
.descprition {
  font-family: var(--midashi-font);
  font-size: var(--small-font-size);
}

/* ====================== global_nav */
@media (width < 800px) {
  body > header {
    padding-top: 48px;
  }
}
.global_nav {
  width: 100%;
  height: 10px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #fff;
}
#for_global_nav,
#close_nav_btn,
#close_nav_btn span {
  display: none;
}
#open_nav_btn {
  display: block;
  position: absolute;
  right: calc(50% - 24px);
  bottom: -26px;
  width: 48px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  font-size: var(--small-font-size);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
#open_nav_btn::after {
  display: block;
  position: absolute;
  bottom: -12px;
  width: 100%;
  content: '\f107';
  font-family: var(--icon-font);
  font-weight: 900;
  text-align: center;
}
.global_nav_content {
  position: fixed;
  z-index: 999;
  top: -120%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  transition: all 0.6s;
}
#for_global_nav:checked ~ .global_nav_content {
  padding-top: 2em;
  top: 0;
}
.global_nav .cattree {
  line-height: 2;
  list-style: none;
}
.global_nav .cattree a {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.global_nav .cattree.depth1 > li {
  border-bottom: 1px solid;
}
.global_nav .cattree.depth1 > li > a {
  font-weight: 900;
}
.global_nav .cattree.depth2 > li {
  border-top: 1px dashed;
}
.global_nav .cattree.depth3 {
  display: none;
}
.global_nav .utility_links {
  display: none;
}
#for_global_nav:checked ~ .global_nav_content #close_nav_btn {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#close_nav_btn::before,
#close_nav_btn::after {
  content: '';
  display: block;
  width: 4px;
  height: 26px;
  position: absolute;
  top: 5px;
  left: 50%;
  background: #ccc;
  border-radius: 3px;
}
#close_nav_btn::before {
  transform: rotate(45deg);
}
#close_nav_btn::after {
  transform: rotate(-45deg);
}
#close_nav_btn:hover::before,
#close_nav_btn:hover::after {
  background-color: #555;
}
.rss_link a::before {
  content: '\f09e';
  font-family: var(--icon-font);
  font-size: 24px;
}
@media (width >= 800px) {
  #open_nav_btn,
  #close_nav_btn {
    display: none;
  }
  .global_nav {
    position: relative;
    height: 40px;
    overflow: visible;
  }
  .global_nav_content {
    position: static;
    height: 40px;
  }
  .global_nav .cattree {
    line-height: 40px;
  }
  .global_nav .cattree.depth1 {
    display: flex;
    width: 90%;
    height: 40px;
  }
  .global_nav .cattree.depth1 li {
    width: 100%;
  }
  .global_nav .cattree.depth1 > li,
  .global_nav .cattree.depth2 > li {
    border-width: 0;
  }
  .global_nav .cattree.depth2 {
    position: relative;
    z-index: 0;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    border-radius: 0 0 3px 3px;
    transition: all 0.2s ease;
  }
  .global_nav .cattree.depth1 li:hover .cattree.depth2 {
    z-index: 1;
    visibility: visible;
    opacity: 1;
  }
  .global_nav .cattree.depth1 li.rss_link {
    width: fit-content;
  }
  .rss_link a {
    padding: 0 10px;
  }
  .rss_link span {
    display: none;
  }
  .global_nav .utility_links {
    padding: 20px 0 6px;
    width: 3em;
    display: block;
    position: absolute;
    right: 10px;
    bottom: -16px;
    background-color: #fff;
    font-weight: 900;
    transition: all 0.2s ease;
  }
  .global_nav .utility_links a {
    display: block;
    line-height: 1;
    font-size: var(--small-font-size);
    text-align: center;
  }
  .global_nav .utility_links span {
    display: block;
    text-transform: uppercase;
  }
  .global_nav .utility_links a::before {
    content: '\f107';
    font-family: var(--icon-font);
    height: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
  }
  .global_nav .utility_links:hover {
    bottom: -22px;
  }
  .global_nav .utility_links:hover a::before {
    height: initial;
    visibility: visible;
    opacity: 1;
  }
}
/* ====================== breadcrumb */
.breadcrumb:has(.situation:empty) {
  display: none;
}
.breadcrumb {
  padding: 2px 1em;
  width: 100%;
  line-height: 1.2;
  font-size: 0.8em;
}
.breadcrumb > *:not(:last-child)::after,
.breadcrumb .situation-onecatname-cover:not(:last-child)::after {
  content: '\f105';
  color: var(--main-text-color);
  font-family: var(--icon-font);
  font-weight: 900;
}
.breadcrumb .situation {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.breadcrumb .situation span:last-child {
  font-weight: 900;
}
.breadcrumb > *:empty {
  display: none;
}
@media (width >= 600px) {
  .breadcrumb {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .breadcrumb .situation {
    display: inline;
  }
}
/* ====================== contents */
.contents {
  margin-inline: 1em;
}
main {
  margin: 0 auto 20px;
  max-width: var(--contents-width);
}
@media (width >= 900px) {
  /* 画面幅901px以上の時に2カラムにするとか */
  .contents {
    display: flex;
    gap: 20px;
  }
  main {
    max-width: calc(100% - 300px);
    flex: 1;
  }
  #utility_links {
    margin-top: 1.25em;
    width: 300px;
    display: block;
  }
  #utility_links > .subarea {
    width: 100%;
  }
}
/* 新着画像スライダー */
.latest_img_slider {
  overflow-x: hidden;
}
.latest_img_slider div {
  display: flex;
  min-width: 100%;
  width: 100vw;
  width: min-content;
  /* 枚数が多いほど流れが速くなるので下記の行の数値を調整してください */
  animation: 30s linear infinite sliderAnimation;
}
.latest_img_slider .imagelistitem {
  margin: 10px;
  display: inline-block;
  width: 400px;
  height: 209px;
  overflow: hidden;
}
.latest_img_slider .imagelistitem img {
  width: 400px;
  height: 209px;
  position: relative;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/*.latest_img_slider .oneimage.nsfw { filter:blur(10px) grayscale(1); }*/
@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}
/* カテゴリID「update」のみ新着リスト */
body:not(.home) .updatelist,
.updatelist :is(.posttime, .username) {
  display: none;
}
.updatelist {
  margin: 1.25em 0;
}
.update_title {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--box-border-color);
  font-size: 1.5em;
}
.updatelist .latestpostlist {
  padding: 0.5em 1em 1em 1em;
}
.updatelist li {
  border-bottom: 1px dotted;
  display: flex;
  width: 100%;
  align-items: center;
}
.updatelist .postlink {
  flex: 1;
  order: 2;
}
.updatelist .postdate {
  margin-right: 1em;
  order: 1;
}
/* 表示順切り替えリンク */
.reverse_link {
  margin: 1.25em 0;
  font-size: 0.8em;
  text-align: center;
}
.onelog .reverse_link {
  display: none;
}
/* 「限定条件」表示行 */
.situation:empty {
  display: none;
}
/* 日付境界バー */
.dateseparator {
  text-align: center;
}
.dateseparator a {
  font-size: 0.8em;
}
.home .dateseparator,
.dateseparator.fixedseparator {
  display: none;
}

/* ====================== main */
.post_content ul {
  padding-left: 2em;
}

/* コンテンツ表示ボックス共通 onelogbox */
:where(.onelogbox) {
  border: 2px solid var(--box-border-color);
  background-color: var(--box-bg-color);
}
.home article.logstatus-fixed {
  display: block;
}
article {
  margin: 1.25em 0;
  position: relative;
}
/* post_header */
.post_header {
  padding: 0.5em 1em;
  line-height: 1.2;
  border-bottom: 1px solid var(--box-border-color);
  width: 100%;
}
.post_header .post_title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.logstatus-lock .post_title a::before {
  content: '\f023';
  font-family: var(--icon-font);
  font-weight: 900;
}
.post_header .user {
}
.iconarea img {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  vertical-align: middle;
}
.username {
  color: var(--main-text-color);
  font-size: var(--small-font-size);
  font-weight: bold;
}
/* 新着・先頭固定フラグ */
.newsign {
  position: absolute;
  top: 0;
  right: 0;
}
article:not(.logstatus-fixed) .newsign {
  padding: 3px 8px;
  width: fit-content;
  line-height: 1;
  top: 10px;
  right: -12px;
  color: var(--main-bg-color);
  background-color: var(--main-text-color);
  font-weight: 900;
}
article:not(.logstatus-fixed) .newsign::after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 5px transparent;
  border-left: solid 10px rgb(149, 158, 155);
}
.newsign:empty,
.newsign .fixed {
  display: none;
}
.logstatus-fixed .newsign::before {
  content: '\f08d';
  color: var(--light-text-color);
  font-family: var(--icon-font);
  font-weight: 900;
}
/* post_footer */
.post_footer {
  padding: 0 1em;
  line-height: 1.3;
  font-size: 0.9em;
  text-align: right;
}
/* アイコンフォント共通設定 */
.post_footer .categories::before,
.yomiage a::before,
a.edit::before,
a.delete::before {
  font-family: var(--icon-font);
  font-size: 1.6rem;
}
/* 投稿時間・相対時間 */
.post_footer time {
  display: block;
  text-align: right;
}
.post_year {
}
.post_month {
}
.post_date {
}
.post_week {
}
.post_time {
}
.relativetime::before {
  content: '・';
}
.relativetime::after {
}
.post_footer .categories:empty {
  display: none;
}
.post_footer .categories::before {
  content: '\f518';
  font-weight: 900;
}
/* 読上リンク */
.yomiage {
}
.yomiage a::before {
  content: '\f028';
  font-weight: 900;
}
/* 編集・削除リンク（※フリースペース編集リンクと共通） */
:is(a.edit, a.delete) span {
  display: none;
}
a.edit::before {
  content: '\f044';
}
a.delete::before {
  content: '\f1f8';
  font-weight: 900;
}
/* 投稿本文 */
.post_content {
  padding: 1em;
}
@media (width >= 800px) {
  .post_content {
    padding-inline: 1.6em;
  }
}
/* url */
.url {
  word-break: break-all;
}
/* 続きを読む */
.readmorebutton {
  padding: 2px 4px;
  border: 1px solid;
  font-size: 0.8em;
}
/* 埋め込み画像・動画・Tweet */
.post_content img {
  height: auto;
  max-height: 500px;
  object-fit: cover;
}
.embeddedpictbox {
  display: inline-table;
  border-collapse: collapse;
  position: relative;
}
.embeddedpictbox img {
  border-radius: 5px;
}
.embeddedpictbox figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: 0.8em;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  padding: 3px;
  border-radius: 5px 5px 0 0;
}
.imagelink {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
}
.imagelink img {
  vertical-align: middle;
  transition: 0.5s;
}
.imagelink:hover img {
  transform: scale(1.1);
}
/* NSFWフラグ画像 */
.imagelink.nsfw img {
  filter: blur(7px);
}
.imagelink.nsfw::after {
  content: '\f071';
  font-family: var(--icon-font);
  font-weight: 900;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 2em;
}
.imagesearch:has(.nsfw)::after,
.latest_img_slider .imagelistitem:has(.nsfw)::after {
  content: '\f071';
  font-family: var(--icon-font);
  font-weight: 900;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  display: grid;
  place-content: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2em;
  height: 100%;
  text-decoration: none;
}
/* 新着画像一覧NSFWフラグ */
.imagesearch {
  margin: 2px;
  display: inline-block;
  width: 30%;
  overflow: hidden;
}
.imagesearch .oneimage {
  margin: 0;
  width: 100%;
}
.oneimage.nsfw {
  filter: blur(7px) grayscale(0.8);
}
.imagesearch .oneimage.nsfw {
  filter: blur(3px) grayscale(0.8);
}
.imagesearch:has(.nsfw),
.latest_img_slider .imagelistitem:has(.nsfw) {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
}
.embeddedmovie {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
}
blockquote.twitter-tweet,
blockquote.instagram-media {
  background-color: #f8f8f8;
  border-radius: var(--btn-radius);
  margin: 0.3em 0;
  padding: 1em;
  font-size: 0.8em;
  color: #999;
}
/* 記事リンク埋め込み引用 */
.inQ {
  display: block;
  color: var(--main-text-color);
}
/* 記事内ページリンク用区切り */
.deco-hr {
  margin: 1.5em 0;
  display: block;
  text-align: center;
}
.deco-hr + br {
  display: none;
}
/* B:太字 */
.decorationB {
  font-weight: bold;
}
/* D:削除 */
.decorationD {
  color: #888;
  text-decoration-line: line-through;
  text-decoration-color: var(--main-text-color);
}
.decorationD .decorationD {
  display: inline-block;
  position: relative;
}
.decorationD .decorationD {
  text-decoration: none;
}
.decorationD .decorationD::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0.5em;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0.6em;
  left: 0;
}
/* E:強調 */
.decorationE {
  text-decoration: underline wavy #900;
  font-style: normal;
  font-weight: bold;
}
/* I:斜体 */
.decorationI {
  font-style: italic;
}
.decorationI .decorationI {
  transform: skewX(-30deg);
  font-style: normal;
  display: inline-block;
  font-size: 0.94em;
}
/* Q:引用 */
.decorationQ {
  padding: 1em;
  border: 1px solid #ccc;
  background-color: #eee;
  font-size: 0.95em;
  display: block;
  position: relative;
}
.decorationQ::before {
  content: '';
}
.decorationQ::after {
  content: '"';
  font-family: 'Secular One', sans-serif;
  position: absolute;
  top: -0.55em;
  right: 0;
  color: #ccc;
  font-size: 6em;
}
.decorationQ + br {
  display: none;
}
/* S:小文字 */
.decorationS {
  font-size: 0.8em;
}
/* T:極小文字 */
.decorationT {
  font-size: 0.6em;
}
/* U:下線 */
.decorationU {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
/* リスト */
.decorationL + br {
  display: none;
}

/* code */
code {
  line-height: 1;
  font-family:
    Consolas,
    Menlo,
    Monaco,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Meiryo,
    monospace;
}

.deco-code {
  margin-top: 1em;
  display: block;
  background-color: #2e2e2e;
  color: #eee;
  padding: 1em;
  font-family: monospace;
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ルビ */
ruby {
  position: relative;
}
ruby rt {
  position: relative;
  top: 1.4ex;
}
/* 鍵付き投稿 */
.passkeyform {
  display: inline-block;
  margin: 0;
  padding: 0.6em;
}
.passkeybox,
.passkeyguide {
  display: block;
}
.passkeyinput {
  width: 10em;
  margin: 0 0.25em 3px 0;
}
.passkeyerror,
.nodata,
.nolist {
  margin: 0 0 0.2em;
  padding: 3px 3px 3px 13px;
  border: 1px solid #eab2b2;
  display: block;
  color: #900;
  background-color: #fbf0f0;
}
/* ▼検索語のハイライト */
.searchword {
  font-weight: bold;
  color: var(--dark-text-color);
  background: linear-gradient(transparent 70%, #ffafdc 30%);
}
/* 文字装飾領域内に含まれた画像を装飾 */
.decorationB img {
}
.decorationD img {
}
.decorationE img {
}
.decorationI img {
}
.decorationQ img {
}
.decorationS img {
}
.decorationT img {
}
.decorationU img {
}
/* いいねボタン・シェアリンク */
.response {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center;
}
article:not(.res_memo) .response {
  background-color: var(--light-bg-color);
}
.response li {
  flex: 1;
  text-align: center;
}
details.sharelinks > summary::before {
  content: '\f1e0';
  font-weight: 900;
}

details.sharelinks > summary span {
  display: none;
}

details.sharelinks > summary::before {
  font-family: var(--icon-font);
  font-size: 24px;
  color: var(--light-text-color);
}
details.sharelinks {
  position: relative;
}

details.sharelinks > summary span {
  font-size: 1.2rem;
  color: var(--light-text-color);
}
details.sharelinks ul.sharelinks {
  padding: 0.6em;
  width: max-content;
  position: absolute;
  z-index: 1;
  right: 0;
  text-align: start;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.8em;
}
details.sharelinks[open] ul.sharelinks {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(0, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
ul.sharelinks li {
  display: inline-block;
}
ul.sharelinks li:not(:last-child) {
  margin-right: 2px;
}
ul.sharelinks li a {
  padding: 2px 4px;
  color: #fff;
  border-radius: 3px;
}
a.Twitter {
  background-color: #1da1f2;
}
a.Facebook {
  background-color: #1877f2;
}
a.Hatena {
  background-color: #008fde;
}
a.LINE {
  background-color: #00b900;
}
a.Pocket {
  background-color: #ee4056;
}
a.copy {
  background-color: #555;
}
.url-copied {
  display: none;
}
.url-copied span {
  background: #0009;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 2px 4px;
  box-sizing: border-box;
  line-height: 14px;
}
/* 記事単体表示時のページ移動リンクをユーティリテイリンクの上に */
.onelog main {
  display: flex;
  flex-direction: column;
}
.onelog article {
  order: 1;
}
.onelog .utilitylinks {
  order: 3;
}
.onelog .pagenavi {
  order: 2;
}
/* 記事単体表示ページのユーティリティリンク群 */
.utilitylinks {
  margin: 2em auto 1em;
  padding: 0.5em;
  display: table;
  font-size: 0.8em;
}
.utilitylinks ul {
  list-style: none;
}
.utilitylinks ul ul {
  margin-left: 1em;
}
/* ページ移動リンク */
.pagenavi {
  margin: 1.5em 0px;
  padding: 0.5em 0px;
  text-align: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
.pagehome a,
.prevlink,
.nextlink {
  margin: 0 0.7em 0.2em 0.7em;
  padding: 0 0.7em;
}
.pagehome a {
  display: inline-block;
}
.prevlink {
  order: 1;
}
.linkseparator {
  display: none;
}
.nextlink {
  order: 3;
}
.pagenavi a {
  color: var(--main-text-color) !important;
  text-decoration: none;
  font-size: 1em;
  border-radius: 1em;
  transition: 0.5s;
  background-color: rgba(255, 255, 255, 0.3);
}
.pagenums {
  font-weight: bold;
  order: 2;
}
.pagenumlink {
  padding: 0.2em 0.5em;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-weight: bold;
}
.pagenavi a:hover {
  background-color: #333;
  color: #fff !important;
  border-radius: 0.3em;
}
.pagenavi .pagenumhere {
  background-color: var(--main-text-color);
  color: var(--main-bg-color) !important;
}
/* 記事単体 */
.onelog .pagenavi {
  flex-wrap: wrap;
}
.onelog .pagehome {
  margin-bottom: 1em;
  width: 100%;
  text-align: center;
}
.onelog .prevlink,
.onelog .nextlink {
  width: calc(50% - 1.4em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.onelog .prevlink {
  padding-left: 16px;
}
.onelog .prevlink::before,
.onelog .nextlink::before {
  display: block;
  content: '\f106';
  font-family: var(--icon-font);
  font-weight: 900;
}
.onelog .prevlink::before {
  margin-right: auto;
  transform: rotate(-90deg);
}
.onelog .nextlink {
  padding-right: 16px;
}
.onelog .nextlink::before {
  margin-left: auto;
  content: '\f106';
  transform: rotate(90deg);
}
@media (width <= 490px) {
  .onelogbox {
    font-size: 0.9em;
  }
  .onelog .prevlink,
  .onelog .nextlink {
    width: 100%;
    -webkit-line-clamp: 2;
  }
  .onelog .nextlink {
    margin-top: 1em;
  }
  details.sharelinks ul.sharelinks {
    max-width: 150%;
  }
}

/* カテゴリIDに「novel」を含む記事 */
body:not(.home) .novel {
  border: 0;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
body:not(.home) .novel .post_content {
  margin: 0 auto;
  max-width: 40em;
  font-family: var(--novel-font);
}
body:not(.onelog) .novel .post_content {
  margin-bottom: 1em;
  padding-bottom: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
body:not(.home) article.novel:not(.logstatus-lock) .post_content::first-line {
  font-size: var(--small-font-size);
}
body:not(.home) .novel .post_header {
  order: 1;
}
body:not(.home) .novel .post_footer {
  order: 3;
}
body:not(.home) .novel .post_content {
  order: 2;
}
body:not(.home) .novel .response {
  order: 4;
  background-color: transparent;
}
/* 記事内ページリンク */
.sep_link {
  padding: 0.5em;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  transition: 0.5s;
}
.sep_link a {
  display: inline-block;
  color: #555;
  background: #e7e7eb;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  line-height: 30px;
}
.sep_link a:hover {
  background: #fdeff2;
}
.sep_link a + a {
  margin-left: 0.5em;
}
.sep_link .active {
  background: #e4d2d8;
}

/* カテゴリIDに「memo」を含む記事 */
body:not(.home) .memo {
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 600px;
  font-size: 0.9em;
}
body:not(.home) .memo .post_header {
  padding-right: 0;
  border-bottom: 0 none;
  width: min-content;
}
body:not(.home) .memo .post_header .user {
  width: 64px;
  display: block;
  line-height: 1;
  text-align: center;
}
body:not(.home) .memo .post_header .iconarea img {
  width: 50px;
  height: 50px;
}
body:not(.home) .memo .post_header .username {
  display: inline-block;
}
body:not(.home) .memo .post_title {
  display: none;
}
body:not(.home) .memo .post_footer {
  padding: 0;
  flex: 1;
}
body:not(.home) .memo .post_footer,
body:not(.home) .memo .post_footer time {
  text-align: left;
}
body:not(.home) .memo .post_content {
  padding-top: 0;
  width: 100%;
}
body:not(.home) .memo .response {
}
/* カテゴリID「res_memo」 */
body:not(.home) article.res_memo {
  justify-content: flex-end;
  align-items: flex-start;
  border: 0 none;
  background: transparent;
}
body:not(.home) article.res_memo .post_header {
  order: 1;
  margin-right: auto;
  padding-left: 0;
  width: fit-content;
}
body:not(.home) article.res_memo .post_footer {
  order: 3;
  margin-left: 75px;
  padding: 0 0.5em 0.5em;
  background: var(--box-bg-color);
  text-align: right !important;
  border-radius: 0 0 6px 6px;
}
body:not(.home) article.res_memo .post_footer > * {
  text-align: right !important;
}
body:not(.home) article.res_memo .post_content {
  order: 2;
  padding-top: 1em;
  width: calc(100% - 75px);
  position: relative;
  background: var(--box-bg-color);
  border-radius: 6px 6px 0 0;
}
body:not(.home) article.res_memo .post_content::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 17.3px 10px 0;
  border-color: transparent var(--box-bg-color) transparent transparent;
  content: '';
  display: block;
  position: absolute;
  left: -17px;
}
body:not(.home) article.res_memo .response {
  order: 4;
  margin-left: 75px;
  border: 0 none;
}

/* ====================== utility_links */
aside {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.5em;
}
.subarea {
  width: calc((100% / 3) - 16px);
  padding: 0 1em;
}
@media (width <= 480px) {
  .subarea {
    width: 100%;
  }
}
.cornertitle {
  font-size: 1.8rem;
}
.cornertitle + div {
  margin: 0.5em 0;
  padding: 0.5em;
}
.subarea ul {
  padding-left: 1em;
  line-height: 1.2;
}
.subarea .num {
  color: var(--light-text-color);
  margin-left: 0.3em;
}
/* 検索フォーム */
.siwtchsearchbox,
.searchtarget,
.latestpostlist span,
.datelimitsublist,
.datelimitboxoptions,
.subarea .num,
.totalimgsizes {
  font-size: 0.8em;
}
.subarea form {
  margin: 0.5em 0;
  padding: 0.9em 0.6em;
}
.subarea select {
  width: calc(100% - 50px);
  color: var(--light-text-color);
}
.subarea select option {
  color: var(--main-text-color);
}
.subarea .searchbox,
.subarea .complexsearch {
  margin: 0;
  padding: 0;
}
.queryinput {
  width: calc(100% - 50px);
}
.searchtarget {
  margin: 0;
}
.siwtchsearchbox a:last-child {
  display: none;
}
#complexsearch[style$='block;'] + .siwtchsearchbox a:first-child {
  display: none;
}
#complexsearch[style$='block;'] + .siwtchsearchbox a:last-child {
  display: inline;
}
#complexsearch {
  display: none;
}
.searchoptions {
  margin-top: 0.75em;
  padding-left: 1em;
  font-size: var(--small-font-size);
}
.solabel {
  display: inline-block;
  min-width: 5.5em;
}
.searchoptions select {
  max-width: 175px;
}
/* ハッシュタグ一覧 */
ul.hashtaglist {
  list-style: none;
  padding-left: 0;
  line-height: 1;
}
.hashtaglist li {
  display: inline;
}
/* カテゴリ一覧 */
.cattext {
}
.caticon + .cattext,
cattext + .caticon {
  margin-left: 3px;
}
.catdescription {
  font-size: smaller;
  color: #555;
}
/* 新着画像一覧 */
.imagelistbox {
  margin: 0;
  text-align: center;
}
.imagelistbox .oneimage {
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 1%;
  vertical-align: middle;
}
.imagesinfo {
  margin: 0.25em 0;
  text-align: right;
}
.totalimgfiles {
  font-size: 0.9em;
}
/* 新着投稿一覧 */
.latestpostlist :is(.postdate, .posttime, .postid, .length) {
  color: var(--light-text-color);
}
.latestpostlist .username {
  color: #555;
}
.latestpostlist .userid {
  color: #555588;
}
.datelimitlist .datelimitsublist .datelimit-month {
  display: inline-block;
  margin-right: 0.5em;
}
.datelimitsublist .year {
  display: none;
}
.datelimitboxoptions {
  display: block;
}
.datelimitboxoptions label {
  display: inline-block;
  margin-right: 0.5em;
}
/* フリースペース */
.freespaceedit {
  text-align: right;
}
/* カレンダー */
.calendar {
  border: 1px solid var(--light-text-color);
  width: 100%;
}
.calendar :is(th, td) {
  border: 1px solid var(--light-text-color);
  padding: 2px;
  text-align: center;
  font-size: 0.9em;
  line-height: 1;
}
.calendar :is(caption, th) {
  font-weight: 900;
}
.daysofweek th {
  background-color: var(--light-bg-color);
  font-weight: normal;
  padding: 6px 0;
  font-size: 0.8em;
  line-height: 1;
}
.calendar :is(a, .nolink) {
  display: inline-block;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  line-height: 2;
}
.calendar td a {
  background-color: #d7e2ee;
  color: black;
}
tr[class^='week'] td:first-child {
  background-color: #ffebef;
}
tr[class^='week'] td:last-child {
  background-color: #e0f6ff;
}
.calendar td a:hover {
  background-color: var(--main-text-color);
  color: #fff;
}
.calendar .today {
  background-color: #ffffcc;
  font-weight: 900;
}
.calendarlinks {
  text-align: center;
  line-height: 1;
}
.calendarlinks a {
  font-size: 0.9em;
}

/* ====================== footer */
body > footer {
  margin-top: 2em;
  padding: 1em 0.5em;
  line-height: 1.2;
  color: var(--main-bg-color);
  background-color: var(--main-text-color);
}
body > footer :is(a, a:visited, a:hover) {
  color: var(--main-bg-color);
}
.copyright,
.modified,
.material {
  text-align: center;
}
.material li {
  display: inline-block;
  font-size: var(--small-font-size);
}
.material li:not(:last-child)::after {
  content: ' /';
}
.material a {
  font-weight: 900;
}

/* ====================== 認証モーダル */
dialog:modal {
  width: 100%;
  height: 100vh;
  max-width: 100vw;
  max-height: 100%;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  display: grid;
  place-content: center;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(30px);
}
/* 認証メッセージボックス */
#gate .gate_content {
  margin: 0 1em;
  padding: 2em;
  width: fit-content;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 0 20px rgba(150, 150, 150, 0.4);
}
.gate_btns {
  margin-top: 1em;
}
/* for js off user */
noscript p {
  width: 100%;
  height: 100vh;
  max-width: 100vw;
  max-height: 100%;
  display: grid;
  place-content: center;
  position: fixed;
  z-index: 99;
  background-color: #fff;
  text-align: center;
}
noscript p small {
  color: red;
}
/* ====================== 記事Noリンクポップアップ */
#popupContent {
  padding: 1em;
  max-width: 600px;
  line-height: 1.2;
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
}
/* ====================== クイックポスト・管理用リンク */
.admin_link {
  position: fixed;
  z-index: 11;
  right: 20px;
  top: 20px;
}
#open_quickpost,
:is(#open_form, #close_form) span,
#quickpost {
  display: none;
}
#open_form,
.to_adminpage {
  display: grid;
  place-content: center;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
}
#open_form::before {
  content: '\f305';
  font-family: var(--icon-font);
  font-size: 36px;
  font-weight: 900;
}
.to_adminpage {
  margin-top: 0.5em;
  margin-left: auto;
  width: 36px;
  height: 36px;
}
.to_adminpage span {
  display: none;
}
.to_adminpage::before {
  content: '\f013';
  font-family: var(--icon-font);
  font-size: 24px;
  font-weight: 900;
}
#open_quickpost:checked ~ #quickpost {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.6);
}
.postarea {
  margin: 3em auto 0;
  padding: 1em;
  max-width: var(--contents-width);
  background-color: #fff;
}
.postform {
  padding: 0.5em 0;
}
.postform p {
  margin: 0;
}
#close_form {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
}
#close_form:hover {
  background-color: #555;
}
#close_form::before,
#close_form::after {
  content: '';
  display: block;
  width: 4px;
  height: 26px;
  position: absolute;
  top: 5px;
  left: 16px;
  background: #ccc;
  border-radius: 3px;
}
#close_form::before {
  transform: rotate(45deg);
}
#close_form::after {
  transform: rotate(-45deg);
}
/* ====================== ページ上部に戻る */
.go_page_top a {
  width: calc(1.4em + 10px);
  height: calc(1.4em + 10px);
  display: grid;
  place-content: center;
  position: fixed;
  z-index: 10;
  bottom: 15px;
  right: 15px;
  color: #000;
  background-color: #fff;
  font-size: 1.4em;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.go_page_top span {
  display: none;
}
.go_page_top a:hover {
  bottom: 20px;
}
.go_page_top a::before {
  content: '\f102';
  font-family: var(--icon-font);
  font-weight: 900;
}

/* ------------------------------------ */
/* サイトマップモード                   */
/* ------------------------------------ */
.onelogbox.sitemap {
}
.sitemap div {
  padding: 0.5em 1em;
  position: relative;
}
.sitemap .logtitle a {
  color: var(--main-text-color);
}
.sitemap .post_footer {
  padding: 0;
}
.sitemap .post_footer {
  padding: 0;
}
.sitemap div:not(:last-child) {
  border-bottom: 1px dashed var(--box-border-color);
}
.selected-cat .sitemap .post_footer time {
}

/* ------------------------------------ */
/* ギャラリーモード                     */
/* ------------------------------------ */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  place-content: space-around start;
}
.gallery > div {
  background: #fff;
  position: relative;
  border-radius: 5px;
}
.gellery_header {
  position: relative;
}
.gallery_title a {
  display: block;
  color: var(--main-text-color);
}
.gallery > div > :is(.embeddedpictbox, .imagelink) {
  margin: 0 6px;
}
.gallery .embeddedimage {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  vertical-align: middle;
}
.one_pictbox {
  width: calc(25% - 10px);
}
.one_pictbox .gellery_header {
  min-height: calc(100% - 3.6em);
}
.one_pictbox .gallery_title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.one_pictbox .gallery_title a {
  height: 100%;
}
.one_pictbox.logstatus-lock .gallery_title a::after {
  content: '\f023';
  display: grid;
  place-content: center;
  height: 100%;
  font-family: var(--icon-font);
  font-size: 3em;
  font-weight: 900;
}
.one_pictbox .gallery_title a span {
  padding: 1px 3px;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 0.8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.one_pictbox .imagelink {
  pointer-events: none;
  vertical-align: middle;
}
.one_pictbox .post_footer {
  padding: 0 6px 6px;
  line-height: 1;
}
.gallery_tags:not(:empty)::before {
  content: '\f02c';
  font-family: var(--icon-font);
  font-weight: 900;
}
.pictcount {
  font-size: 1.2rem;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2px;
  background: #fff;
  border-radius: 0 5px;
  z-index: 1;
}
.gallery .newsign {
  padding: 0 5px;
  width: fit-content;
  top: -10px;
  left: -10px;
  color: var(--main-bg-color);
  background-color: #f32626;
  font-weight: 900;
  transform: rotate(-15deg);
  border-radius: 3px;
}
.pictcount::before {
  margin-right: 2px;
  content: '\f302';
  font-family: var(--icon-font);
}
.pictcount span {
  display: none;
}
.all_pictbox {
  width: 100%;
}
.all_pictbox .gallery_title a {
  padding-left: 6px;
}
.all_pictbox .post_content {
  padding: 0 6px 6px;
  line-height: 1.3;
  font-size: 0.8em;
}
.all_pictbox > :is(.embeddedpictbox, .imagelink) {
  max-width: calc(25% - 12px);
}
.all_pictbox {
}
.all_pictbox .newsign {
  right: -10px;
  left: auto;
  transform: rotate(15deg);
}
@media (width <= 480px) {
  .one_pictbox {
    width: calc(100% - 10px);
  }
  .all_pictbox > :is(.embeddedpictbox, .imagelink) {
    max-width: calc(50% - 12px);
  }
}
/* ---------------------------------------------------- */
/* ▼クイックポストフォーム周りはほぼ公式デフォルトです */
/* ---------------------------------------------------- */
textarea.tegalogpost {
  margin-bottom: 0.25em;
  padding: 0.5em;
  border: 2px solid;
  width: 100%;
  line-height: 1.3;
  background-color: #fff;
  border-radius: 6px;
}
.line-control {
  margin: 0.25em 0;
}
.postbutton[type='submit'] {
  font-weight: bold;
  padding: 0.25em 1em;
}
.postbutton[type='submit']:hover {
  border: 1px solid green !important;
  color: #fff;
  background-color: #00cc00;
}
/* 掲載領域全体 */
.decoBtns {
  display: inline-block;
  margin-top: 0.5em;
}
/* 全ボタン装飾 */
.decoBtns input {
  min-width: 32px;
  min-height: 28px;
  margin: 1px;
  font-size: 14px;
  vertical-align: middle;
}
/* マウス載る際 */
.decoBtns input:hover {
  background-color: #e5f1fb;
  border-color: #0078d7;
}
/* 太字  :B */
.decoBtnB {
  font-weight: bold;
}
/* 取消線:D */
.decoBtnD {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-style: double;
}
/* 強調  :E */
.decoBtnE {
  font-weight: bold;
  color: blue;
}
/* 斜体  :I */
.decoBtnI {
  font-style: italic;
}
/* 引用  :Q */
.decoBtnQ {
}
/* 小さめ:S */
.decoBtnS {
}
/* 極小  :T */
.decoBtnT {
  font-size: 11px !important;
}
/* 下線  :U */
.decoBtnU {
  text-decoration: underline;
  text-decoration-color: red;
}
/* 文字色:C */
.decoBtnC {
  color: red;
}
/* 背景色:M */
.decoBtnM {
  color: blue;
}
.catChecks {
  font-size: 0.9em;
  padding-top: 0.5em;
}
.catChecks label {
  display: inline-block;
  cursor: pointer;
  margin: 0 0.75em 0 0;
}
.catChecks label:hover {
  text-decoration: underline;
}
.catChecks input {
  min-width: 0;
  min-height: 0;
  margin-right: 0.2em;
}
#imglistButton,
#closeimglistButton {
  margin: 2px;
  position: relative;
  z-index: 4;
}
table.images th,
table.images td {
  border: 1px solid;
  font-size: 0.7em;
}
table.images img {
  width: 100px;
  height: auto;
}

/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
  display: inline-block;
  width: 100%;
  max-width: 500px; /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
  padding: 0 0.25em 0.5em 0; /* 内側の余白量 */
  font-size: 1rem; /* 文字サイズ */
  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-S {
  flex-direction: row; /* 画像とテキストは横に並べる(Flexbox) */
}
/* ▽リンクカード内の画像枠 */
.cardsize-S .cardlinkimage {
  min-width: 100px; /* 最小の横幅 */
  min-height: 100px; /* 最小の高さ */
  border-radius: 6px 0 0 6px; /* 左側だけ角丸 */
  flex-shrink: 0; /* 枠サイズを自動縮小させない */
}
/* ▽リンクカード内のテキスト枠 */
.cardsize-S .cardlinktextbox {
  border-left: 1px solid #ccc; /* 左側の枠線 */
  justify-content: center; /* Flexboxの上下方向での中央寄せ */
}
/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-S .cardlinktitle {
  order: 2;
} /* タイトルは、2番目に表示 */
.cardsize-S .cardlinkdescription {
  order: 3;
} /* 概要文　は、3番目に表示 */
.cardsize-S .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: 1rem;
}

.cat-desc {
  margin: 1em 0;
}