@charset "UTF-8";
/* …………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- 標準スタイルシート for Ver 4.1.0＋ */
/* …………………………………………………………………………………………… */
/* ※装飾面のカスタマイズ方法については、配布サイト内にある「カスタマイズ方法」ページ https://www.nishishi.com/cgi/tegalog/custom/ の『装飾のカスタマイズ方法』区画にある解説や記述例もご参照下さい。 */
/* Table of Contents：
   -------------------
  ■全体共通装飾
    ▼リンクの装飾
    ▼URLが書かれた場合の装飾
    ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字
    ▼自由装飾用の装飾の例
    ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
    ▼埋め込み画像
    ▼埋め込み動画
    ▼埋め込みTweet
    ▼検索語のハイライト

  ■ページ最上部(ヘッダ)領域
    ▼タイトル区画
    ▼管理・投稿ボタン区画
    ▼ヘッダ領域：画面の横幅が800px以上の場合
    ▼ヘッダ領域：画面の横幅が480px以下の場合

  ■入力フォームの表示領域
    ▼本文入力欄
    ▼投稿コントロール部分(ボタンや字数カウンタなど)
    ▼投稿ボタン
    ▼文字装飾ボタン群
    ▼カテゴリ選択チェックボックス群

  ■段組構成（画面の幅が800px以上ある広い場合限定）
    ▼大外枠の装飾
    ▼メイン段の装飾
    ▼サブ段の装飾

  ■メイン(ログ掲載)領域
    ▼表示対象の限定時などの「限定条件」表示行
    ▼日付境界バー

  ■投稿ボックス(一発言)ごとの表示
    ▼投稿情報カラム
      ▼ユーザアイコン＆ユーザ名リンク
    ▼投稿本文カラム
      ▼投稿本文
      ▼続きを読むリンク（ボタン）
      ▼投稿日時やカテゴリ名などの情報表示
    ▼画面幅が狭い場合の上書き装飾

  ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾
    ▼鍵違いエラーの表示
    ▼入力フォーム枠
      ▼入力欄前のガイド文
      ▼鍵入力欄
      ▼送信ボタン

  ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾

  ■ページナビゲーション領域
    ▼ページ前後移動リンク群ボックス全体
    ▼ページ番号リンク群ボックス全体
    ▼限定解除リンク(＝HOMEに戻るリンク)

  ■サブ領域
    ▼サブ領域の見出し(DASHBOARD)部分
    ▼検索窓区画
    ▼画像一覧リスト区画
      ▼各画像の装飾
      ▼総数・総サイズの情報
    ▼日付一覧リスト・日付検索区画
      ▼日付リンクリスト区画
      ▼日付プルダウンメニュー区画
    ▼ハッシュタグリスト区画
    ▼カテゴリツリー区画
      ▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等）
    ▼新着投稿リスト区画
    ▼カレンダー区画
    ▼フリースペース区画

  ■ページ最下部(フッタ)領域
*/
/* ！！！！！！！！！！！！！！！！！！！！！！！！！めも ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！*/
/* class="Login-Required" */
/* ============== */
/* ■全体共通装飾 */
/* ============== */
.url {
  word-break: break-all;
  /* 自動リンクのはみ出しを防ぐ */ }

/* ---------------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
/* ---------------------------------------------------- */
/* B:太字(Bold) */
.decorationB {
  font-weight: bold; }

/* D:削除(Delete) */
.decorationD {
  color: #888;
  text-decoration-line: line-through;
  text-decoration-color: red; }

/* E:強調(Emphasis) */
.decorationE {
  color: #050;
  font-style: normal;
  font-weight: bold; }

/* I:斜体(Italic) */
.decorationI {
  font-style: italic; }

/* Q:引用(Quote) */
.decorationQ {
  margin: 1em 0.3em 1em 1em;
  padding: 0.75em 0.5em;
  border-left: 5px double #5c5;
  background-color: #efe;
  font-size: 0.95em;
  display: block;
  /* ※Ver 2.2.0以降必須の記述 */ }

.decorationQ::before,
.decorationQ::after {
  content: '';
  /* 標準で付加されてしまう引用符を無効にする */ }

.decorationQ + br {
  display: none;
  /* 引用直後の改行を無効化する */ }

/* S:小文字(Small) */
.decorationS {
  font-size: 0.8em; }

/* T:極小文字(Tiny) */
.decorationT {
  font-size: 0.6em; }

/* U:下線(Underline) */
.decorationU {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: lime; }

/* ---------------------- */
/* ▼自由装飾用の装飾の例 */
/* 自由装飾は [F:myclass:対象文字] の記法で <span class="deco-myclass">対象文字</span> のようにマークアップされる機能です。あらかじめclassを用意しておくことで自由な装飾を個数制限なく使い分けられます。 */
/* ---------------------- */
/* 投稿者の自由な記述によって意図せずページが崩れてしまうのを防ぐために、適用されるclass名の先頭には必ず deco- が付加されます。 */
.deco-scream {
  font-size: 1.67em;
  /* 文字サイズ(1.67倍) */ }

.deco-code {
  display: inline-block;
  /* インラインブロック化 */
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  /* 等幅フォント */
  background-color: snow;
  /* 背景色 */
  color: black;
  /* 文字色 */
  border: 1px solid #eee;
  /* 枠線 */
  border-radius: 3px;
  /* 角丸 */
  padding: 0px 3px;
  /* 内側の余白量 */ }

.deco-separator {
  display: block;
  /* ブロック化 */
  border-bottom: 1px dotted gray;
  /* 下線 */ }

/* ---------------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */
/* この部分は、文字装飾領域内に含まれた画像を装飾するための記述です。 */
/* ---------------------------------------------------- */
/* B:太字(Bold)に含まれる画像に対する装飾 */
.decorationB img {
  box-shadow: 5px 5px 5px yellowgreen;
  /* 右下に黄緑色の影を付ける */ }

/* D:削除(Delete)に含まれる画像に対する装飾 */
.decorationD img {
  opacity: 0.5;
  /* 半透明にする */ }

/* E:強調(Emphasis)に含まれる画像に対する装飾 */
.decorationE img {
  outline: 8px ridge rgba(50, 236, 70, 0.6);
  /* 浮き上がる淡緑色の枠線を付加 */ }

/* I:斜体(Italic)に含まれる画像に対する装飾 */
.decorationI img {
  box-shadow: -5px 5px 5px pink;
  /* 左下に黄緑色の影を付ける */ }

/* Q:引用(Quote)に含まれる画像に対する装飾 */
.decorationQ img {
  vertical-align: middle;
  /* 行の上下方向で真ん中に寄せる */ }

/* S:小文字(Small)に含まれる画像に対する装飾 */
.decorationS img {
  border-radius: 15px;
  /* 半径15pxで角丸にする */
  vertical-align: middle;
  /* 行の上下方向で真ん中に寄せる */ }

/* T:極小文字(Tiny)に含まれる画像に対する装飾 */
.decorationT img {
  max-height: 75px;
  /* 高さを最大75pxに抑える */
  width: auto;
  /* 横幅は縦横比を維持する */
  vertical-align: middle;
  /* 行の上下方向で真ん中に寄せる */ }

/* U:下線(Underline)に含まれる画像に対する装飾 */
.decorationU img {
  box-shadow: 5px 5px 5px skyblue;
  /* 右下に空色の影を付ける */ }

/* ▽画像リンク */
.imagelink {
  display: inline-block;
  vertical-align: middle;
  max-width: max-content; }
  .imagelink img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%; }

.comment.imagelink-01 a.imagelink {
  margin: 10px 0 0; }

.comment.imagelink-02 a.imagelink {
  margin: 10px 0 0;
  width: calc(50% - 5px);
  aspect-ratio: 1 / 0.8; }

.comment.imagelink-03 a.imagelink {
  width: calc(50% - 5px);
  aspect-ratio: 1.8 / 1; }
.comment.imagelink-03 a.imagelink:first-of-type {
  aspect-ratio: 1 / 1.135;
  float: left;
  margin: 10px 5px 0 0; }
.comment.imagelink-03 a.imagelink:nth-of-type(2) {
  margin: 10px 0 5px; }

.comment.imagelink-04 a.imagelink {
  width: calc(50% - 5px);
  aspect-ratio: 1.8 / 1; }
.comment.imagelink-04 a.imagelink:nth-of-type(-n+2) {
  margin-top: 10px; }
.comment.imagelink-04 a.imagelink:nth-last-of-type(-n+2) {
  margin-top: 5px; }
.comment.imagelink-04 a.imagelink:nth-of-type(odd) {
  margin-right: 3px; }

.comment.imagelink-05 a.imagelink {
  width: calc(33% - 5px);
  aspect-ratio: 1.5 / 1;
  margin-top: 5px; }
.comment.imagelink-05 a.imagelink:nth-of-type(-n+3) {
  margin-top: 10px; }

/* ▽画像そのもの */
.embeddedimage {
  max-width: 100%;
  /* 横方向にはみ出ないようにする */
  width: auto;
  /* 画像サイズを固定したい場合はここに具体的なpx値を指定するのがお勧め */
  height: auto;
  /* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
  border-radius: 10px; }

/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
figure.nsfw {
  overflow: hidden;
  /* ぼかし領域がfigureのボックスからはみ出ないようにする */ }

.imagelink.nsfw {
  overflow: hidden;
  /* ぼかし領域がfigureのボックスからはみ出ないようにする */ }

img.nsfw {
  filter: blur(9px);
  /* ぼかす */ }

/* -------------- */
/* ▼埋め込み動画 */
/* -------------- */
@media all and (max-width: 600px) {
  .embeddedmovie {
    display: inline-block;
    max-width: 100%;
    /* はみ出ないようにする */
    width: auto;
    height: auto; } }
/* --------------- */
/* ▼埋め込みTweet */
/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。(ただし横幅を制限することはできます。→後述) */
/* --------------- */
blockquote.twitter-tweet {
  background-color: #f8f8f8;
  border: 1px dashed #ddd;
  border-radius: 9px;
  margin: 0.3em 0;
  padding: 1em;
  font-size: 0.95em;
  color: #999;
  text-shadow: 1px 1px 1px #fff; }

/* ▼埋め込みツイートの横幅を強制的に制限 */
div.twitter-tweet {
  max-width: 350px !important; }

/* -------------------- */
/* ▼検索語のハイライト */
/* -------------------- */
.searchword {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #FCFCC7 60%);
  /* 文字の下半分くらいにマーカーっぽい線を引く */ }

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
/* ======================== */
/* ■入力フォームの表示領域 */
/* ※これはQUICKPOST用です。新規投稿専用画面や編集画面ではCGI内蔵のCSSが使われるため、ここの記述は適用されません。 */
/* ======================== */
.postarea {
  width: 100%;
  margin-bottom: 30px; }

.postform {
  background-color: #98C0C6;
  /* 背景色 */
  padding: 15px;
  border-radius: 10px; }
  .postform input[type="text"][name="datetime"] {
    background: #fff;
    border-radius: 10px;
    padding: 5px 10px;
    margin-bottom: 5px; }

/* ------------ */
/* ▼本文入力欄 */
/* ------------ */
textarea.tegalogpost {
  border-radius: 10px;
  background-color: white;
  font-size: 15px;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;
  height: 4.3em;
  overflow-wrap: break-word;
  overflow: auto;
  resize: vertical; }

textarea.tegalogpost::placeholder {
  color: #c7c7c7; }

/* 横幅800px以下の環境の場合 */
@media all and (max-width: 800px) {
  textarea.tegalogpost {
    font-size: 16px; } }
/* ------------------------------------------------ */
/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
/* ------------------------------------------------ */
.postbutton {
  display: block;
  background: #432C29;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 7px 35px;
  border-radius: 20px;
  transition: 0.3s; }
  .postbutton:hover {
    background-color: #FCFCC7;
    color: #432C29; }

@media all and (min-width: 768px) {
  .line-control {
    padding-left: 150px;
    position: relative;
    display: flex;
    flex-wrap: wrap; }

  .postarea .submitcover {
    position: absolute;
    left: 0;
    top: 0;
    border-right: 1px dashed #fff;
    height: 100%;
    padding-right: 10px; }

  .decoBtns:nth-of-type(n+4) {
    border-left: solid 1px #b8d0d3;
    padding-left: 10px;
    margin-left: 10px; } }
@media all and (max-width: 767px) {
  .line-control {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 10px; }

  .postarea .submitcover {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #fff;
    width: 100%; }

  .decoBtns:has(.catChecks) {
    display: none; }
  .decoBtns:has(.hashtagEasyInput) {
    flex: auto !important;
    border-top: solid 1px #b8d0d3;
    padding-top: 5px;
    margin-top: 5px;
    width: 100%; } }
/* ------------------ */
/* ▼文字装飾ボタン群 */
/* ★Ver 1.4.0以降で使用 */
/* ------------------ */
/* 掲載領域全体 */
.decoBtns {
  display: inline-block;
  order: 2; }
  .decoBtns input[type="button"],
  .decoBtns input[type="file"] {
    text-align: center;
    min-width: 80px;
    min-height: 30px;
    padding: 0 10px;
    background-color: #F2F0E3;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    transition: 0.3s; }
    .decoBtns input[type="button"]:hover,
    .decoBtns input[type="file"]:hover {
      opacity: 0.7; }
    .decoBtns input[type="button"] + input,
    .decoBtns input[type="file"] + input {
      margin-left: 10px; }
  .decoBtns:has([id^="newImgUp"]) {
    display: flex;
    width: 100%;
    border-bottom: solid 1px #b8d0d3;
    padding-bottom: 5px;
    margin-bottom: 5px;
    order: 0; }
  .decoBtns:has(button[value="日時"]) {
    order: 1; }
  .decoBtns:has(.hashtagEasyInput) {
    flex: 1;
    display: flex;
    position: relative; }
    .decoBtns:has(.hashtagEasyInput)::after {
      content: "";
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 58px;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 10px solid #98C0C6;
      border-bottom: 0;
      pointer-events: none; }
    .decoBtns:has(.hashtagEasyInput) select {
      max-width: 100% !important;
      width: 100%;
      border: solid 1px #fff;
      height: 30px;
      border-radius: 5px 0 0 5px;
      padding: 0 5px;
      font-size: 12px;
      background: #fff; }
    .decoBtns:has(.hashtagEasyInput) input[type="button"] {
      border-radius: 0 5px 5px 0;
      min-width: 50px !important; }

[id^="newImgUp"] {
  width: 100% !important;
  max-width: 100% !important; }
  [id^="newImgUp"]::file-selector-button {
    background-color: #98C0C6;
    color: #fff;
    border: 0;
    height: 24px;
    margin: 4px 4px 4px -3px;
    padding: 0 5px;
    border-radius: 20px; }
  [id^="newImgUp"] + input {
    flex-shrink: 0; }

/* -------------------------------- */
/* ▼カテゴリ選択チェックボックス群 */
/* ★Ver 3.0.0以降で使用 */
/* -------------------------------- */
/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
.funcUIs .catChecks {
  font-size: 12px; }
  .funcUIs .catChecks label {
    margin-right: 10px;
    color: #fff; }
  .funcUIs .catChecks input[type="checkbox"] {
    margin-right: 5px; }

/* 太字  :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 */
/* 小さめ:S */
/* 極小  :T */
.decoBtnT {
  font-size: 11px !important; }

/* 下線  :U */
.decoBtnU {
  text-decoration: underline;
  text-decoration-color: red; }

/* 文字色:C */
.decoBtnC {
  color: red; }

/* 背景色:M */
.decoBtnM {
  color: blue; }

.box-wrapper {
  max-width: 800px !important; }

/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
.mainarea {
  width: calc(100% - 270px); }

/* ------------------------------------------ */
/* ▼表示対象の限定時などの「限定条件」表示行 */
/* ------------------------------------------ */
.situation {
  width: 100%;
  margin-bottom: 15px;
  font-size: 14px;
  display: flex;
  align-items: center; }
  .situation::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #98C0C6;
    margin-right: 5px;
    display: inline-block; }
  .situation .situation-hits {
    background: #98C0C6;
    color: #fff;
    margin-left: 5px;
    border-radius: 10px;
    padding: 5px;
    font-size: 10px; }

.situation:empty {
  display: none; }

/* 限定表示がない場合は存在自体を消す */
/* -------------- */
/* ▼日付境界バー */
/* -------------- */
.dateseparator {
  color: #98c0c6;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  border-radius: 100px;
  margin-bottom: 15px;
  border: #98c0c6 solid 1px;
  text-align: center;
  width: 100%;
  display: none; }

/* ▼日付境界バーの表示文字列の先頭に付加する記号 */
.dateseparator::before {
  content: '▼';
  font-size: 10px;
  margin-right: 3px; }

/* ▼日付境界バー内のリンク(ボタン) */
.dateseparator a {
  display: inline-block;
  /* インラインブロック化 */
  margin-left: 1.5em;
  /* 外側左の余白量 */
  color: #ffc;
  /* 文字色 */
  font-size: 0.75em;
  /* 文字サイズ */
  font-weight: normal;
  /* 太字を解除 */
  border: 1px solid #ffc;
  /* 枠線 */
  border-radius: 1em;
  /* 枠の角丸 */
  padding: 0px 1em;
  /* 内側の余白量 */
  text-decoration: none;
  /* 下線を消す */
  vertical-align: middle;
  /* 上下の中心寄せ */ }

/* ▼日付境界バー内のリンク(ボタン)にマウスが載ったとき */
.dateseparator a:hover {
  background-color: #cec;
  /* 背景色 */
  color: green;
  /* 文字色 */
  border-color: skyblue;
  /* 枠線の色 */ }

/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */
/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */
.onelogbox {
  width: 100%;
  background: #fff;
  margin-bottom: 2px;
  padding: 20px 15px;
  display: flex;
  gap: 10px; }
  .onelogbox:first-of-type {
    border-radius: 10px 10px 0 0; }
  .onelogbox:last-of-type {
    border-radius: 0 0 10px 10px; }
  .onelogbox:only-of-type {
    border-radius: 10px; }
  .onelogbox .iconarea {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: -5px; }
    .onelogbox .iconarea img {
      border-radius: 100%;
      height: 100%;
      width: 100%; }
  .onelogbox .onelogbody {
    width: 100%;
    word-break: break-word; }
    .onelogbox .onelogbody .comment {
      line-height: 1.55;
      font-size: 13px;
      word-break: break-all; }
      .onelogbox .onelogbody .comment .taglink {
        display: inline-block;
        word-break: break-all;
        /* 自動リンクのはみ出しを防ぐ */
        color: #98C0C6;
        transition: 0.3s; }
        .onelogbox .onelogbody .comment .taglink:hover {
          opacity: 0.5; }
  .onelogbox .onelogdata {
    display: flex;
    align-items: center;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: solid 1px #eef6f7; }
    .onelogbox .onelogdata .username {
      font-size: 13px;
      margin-right: 5px;
      font-weight: bold; }
    .onelogbox .onelogdata .memonum {
      margin-right: 7px; }
      .onelogbox .onelogdata .memonum a {
        font-size: 10px;
        display: block;
        color: #98C0C6;
        transition: 0.3s; }
        .onelogbox .onelogdata .memonum a:hover {
          opacity: 0.5; }
    .onelogbox .onelogdata .postdate a {
      display: flex;
      align-items: center;
      color: #89706d; }
      .onelogbox .onelogdata .postdate a .date {
        font-size: 10px; }
      .onelogbox .onelogdata .postdate a .time {
        font-size: 10px;
        margin-left: 2px; }
    .onelogbox .onelogdata .editlink {
      margin-left: auto; }
      .onelogbox .onelogdata .editlink a {
        display: block;
        font-size: 12px;
        color: #98C0C6;
        transition: 0.3s; }
        .onelogbox .onelogdata .editlink a:hover {
          opacity: 0.5; }

.onelog .onelogbox {
  width: 100%; }

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼続きを読むリンク（ボタン） */
.readmorebutton {
  display: inline-block;
  padding: 1px 0.5em;
  border: 1px solid #bbb;
  border-radius: 0.5em; }

/* ============================================================ */
/* ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
/* ============================================================ */
.passkeyform {
  display: block;
  margin: 10px 0;
  padding: 10px;
  background-color: #F2F0E3;
  border-radius: 10px;
  max-width: 345px;
  /* ▼鍵入力欄 */ }
  .passkeyform .passkeyerror {
    display: block;
    color: #fff;
    background-color: #fd5778;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 12px;
    padding: 3px; }
  .passkeyform .passkeybox {
    display: block; }
  .passkeyform .passkeyinput {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center; }
    .passkeyform .passkeyinput::placeholder {
      color: #eee; }
  .passkeyform .submitcover {
    display: block; }
    .passkeyform .submitcover .passkeysubmit {
      display: block;
      background-color: #432C29;
      color: #fff;
      border-radius: 20px;
      margin: 10px auto 0;
      padding: 5px 20px;
      transition: 0.3s; }
      .passkeyform .submitcover .passkeysubmit:hover {
        opacity: 0.5; }

.nodata {
  text-align: center;
  margin: 50px 0;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  width: 100%; }

/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */
/* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。表示項目の取捨選択や詳細な装飾方法は https://www.nishishi.com/cgi/tegalog/custom/#customizecss-utilitylinkbox をご覧下さい。 */
/* ====================================================================== */
.utilitylinks {
  margin: 2em 1em 1em 1em;
  /* 外側の余白量 */
  padding: 0.5em;
  /* 内側の余白量 */
  border: 1px solid #7a7;
  /* 枠線 */
  border-radius: 1em;
  /* 枠の角丸 */
  background-color: #efd;
  /* 背景色 */
  font-size: 0.9em;
  /* 文字サイズ */ }

/* ▼ナビのリンクリスト */
.utilitylinks ul {
  color: darkgreen;
  /* 文字色 */ }

/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
  width: 100%;
  margin: 10px 0 50px;
  padding: 0.5em 0px;
  /* 内側の余白 */
  text-align: center;
  /* 中央寄せ */ }

/* ------------------------------------ */
/* ▼ページ前後移動リンク群ボックス全体 */
/* ------------------------------------ */
.pagelinks a {
  font-weight: bold;
  font-size: 16px;
  transition: 0.3s; }
  .pagelinks a:hover {
    opacity: 0.5; }

/* -------------------------------- */
/* ▼ページ番号リンク群ボックス全体 */
/* -------------------------------- */
p.pagenums {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  p.pagenums a.pagenumlink {
    width: 30px;
    margin: 0 5px;
    border-bottom: solid #432C29 3px;
    padding: 0 0 5px;
    text-align: center;
    transition: 0.3s; }
    p.pagenums a.pagenumlink:hover {
      opacity: 0.5; }
  p.pagenums .omitmark {
    width: 30px;
    margin: 0 5px;
    border-bottom: solid #432C29 3px;
    padding: 0 0 5px;
    text-align: center; }
  p.pagenums a.pagenumhere {
    color: #98C0C6;
    border-bottom: solid #98C0C6 3px; }

/* ------------------------------------ */
/* ▼限定解除リンク(＝HOMEに戻るリンク) */
/* ------------------------------------ */
.pagehome {
  font-weight: bold; }
  .pagehome a {
    display: block;
    width: 200px;
    background: #98C0C6;
    color: #fff;
    border-radius: 20px;
    padding: 10px;
    margin: 20px auto 0;
    transition: 0.3s; }
    .pagehome a:hover {
      background-color: #432C29; }

.onelog .pagelinks {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center; }
  .onelog .pagelinks .linkseparator {
    margin: 0 10px; }

.subarea {
  width: 250px; }
  @media screen and (min-width: 799px) {
    .subarea .sticky {
      position: sticky;
      top: 15px; } }

.admin-edit-link {
  display: flex;
  gap: 10px;
  margin-bottom: 20px; }
  .admin-edit-link a {
    display: flex;
    flex: 1;
    background-color: #432C29;
    color: #fff;
    border-radius: 10px;
    justify-content: center;
    padding: 10px;
    transition: 0.3s; }
    .admin-edit-link a:hover {
      opacity: 0.7; }

.sidebar-container {
  margin-bottom: 40px; }

.cornertitle {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px; }
  .cornertitle::before, .cornertitle::after {
    border-top: 1px dashed #98C0C6;
    content: "";
    display: inline;
    flex-grow: 1; }
  .cornertitle::before {
    margin-right: 0.5em; }
  .cornertitle::after {
    margin-left: 0.5em; }

/* ------------ */
/* ▼検索窓区画 */
/* ------------ */
.searcharea {
  /* ▽検索フォーム */
  /* 検索語(テキスト)入力欄 */
  /* 検索(送信)ボタン */
  /* ▽検索対象を限定するチェックボックス */
  /* ▽検索フォーム形式の切り替えリンク */
  /* ▽複合検索フォーム */
  /* 検索オプションリスト */
  /* 項目名 */
  /* セレクトボックス */ }
  .searcharea .searchinputs {
    display: flex;
    align-items: center; }
  .searcharea .queryinput {
    width: calc(100% - 75px);
    background-color: #fff;
    border-radius: 5px 0 0 5px;
    height: 40px;
    padding: 10px; }
  .searcharea .searchbox .submitbutton {
    width: 75px;
    height: 40px;
    padding: 10px;
    border-radius: 0 5px 5px 0;
    background-color: #98C0C6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.3s; }
    .searcharea .searchbox .submitbutton:hover {
      opacity: 0.5; }
  .searcharea .searchtarget {
    text-align: center;
    font-size: 12px;
    margin-top: 10px; }
    .searcharea .searchtarget span {
      margin-left: 5px; }
  .searcharea .siwtchsearchbox {
    font-size: 0.8em; }
  .searcharea #complexsearch {
    display: none;
    /* 複合検索窓は、最初は非表示にしておく */ }
  .searcharea .searchoptions {
    font-size: 0.9em;
    margin: 0.75em 0 1em 1em;
    padding: 0 0 0 0.5em; }
  .searcharea .solabel {
    display: inline-block;
    min-width: 5em; }
  .searcharea .searchoptions select {
    max-width: 175px; }

/* ------------------------ */
/* ▼新着画像一覧リスト区画 */
/* ------------------------ */
.imagelistarea {
  /* ………………………………………… */
  /* ▼新着画像リスト内の各画像の装飾 */
  /* ここで画像の縦横サイズを制限しておかないと、原寸で表示されてしまいますので注意して下さい！ */
  /* ………………………………………… */
  /* ▽画像リストの1項目枠 */
  /* ▽画像リストの1項目内の画像そのもの */
  /* ▼総数・総サイズの情報 */ }
  .imagelistarea .imagelistbox {
    margin: 0;
    /* 外側の余白量 */
    text-align: center;
    /* センタリング */
    display: flex;
    flex-wrap: wrap;
    gap: 5px; }
  .imagelistarea .imagelistitem {
    max-width: calc((100% - 10px) / 3);
    /* 横幅最大値 */ }
  .imagelistarea .imagelistbox .oneimage {
    width: 100%;
    height: auto;
    /* 画像の高さは自動調整 */
    aspect-ratio: 1/1;
    /* 画像を正方形にする */
    object-fit: cover;
    /* 縦横比が合わなければトリミング */
    vertical-align: middle;
    /* 画像下部に余計な空白ができるのを防ぐ */ }
  .imagelistarea .imagesinfo {
    margin: 0.25em 0;
    /* 外側の余白量(上下→左右) */
    text-align: right;
    /* 右寄せ */ }
  .imagelistarea .totalimgfiles {
    font-size: 0.9em;
    /* 文字サイズ */ }
  .imagelistarea .totalimgsizes {
    font-size: 0.8em;
    /* 文字サイズ */ }

/* ------------------------------ */
/* ▼日付一覧リスト・日付検索区画 */
/* ------------------------------ */
/* …………………………… */
/* ▼日付リンクリスト区画 */
/* …………………………… */
/* ▽日付リスト(年単位) */
.datelimitlist {
  margin: 0.5em 0;
  /* 外側の余白量 */
  padding: 0 0 0 20px;
  /* 内側の余白量 */
  padding: 0.5em 0.5em 0.5em 1.5em;
  /* 内側の余白量 */
  background-color: #efe;
  /* 背景色 */
  border-radius: 0.5em;
  /* 角丸 */ }

/* ▽日付リスト(月単位) */
.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: #66a;
  /* 文字色 */
  margin-left: 0.3em;
  /* 外側左の余白量 */ }

/* …………………………………… */
/* ▼日付プルダウンメニュー区画 */
/* …………………………………… */
.datelimitbox {
  display: flex;
  flex-wrap: wrap;
  position: relative; }
  .datelimitbox::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 85px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 10px solid #98C0C6;
    border-bottom: 0;
    pointer-events: none; }
  .datelimitbox .datelimitpull {
    width: calc(100% - 75px);
    border: solid 1px #fff;
    height: 40px;
    border-radius: 5px 0 0 5px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff; }
  .datelimitbox .submitcover {
    width: 75px;
    border-radius: 0 5px 5px 0;
    background-color: #98C0C6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s; }
    .datelimitbox .submitcover:hover {
      opacity: 0.5; }

/* ▽昇順/降順選択ラジオボタン区画 */
.datelimitboxoptions {
  display: none; }

/* ------------------------ */
/* ▼ハッシュタグリスト区画 */
/* ------------------------ */
.hashtaglistarea .hashtaglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }
  .hashtaglistarea .hashtaglist li {
    position: relative; }
    .hashtaglistarea .hashtaglist li a {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 5px;
      padding: 10px 25px 10px 5px;
      font-size: 14px;
      transition: 0.3s; }
    .hashtaglistarea .hashtaglist li .num {
      font-size: 12px;
      position: absolute;
      right: 5px;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 16px;
      width: 20px;
      text-align: center;
      pointer-events: none;
      transition: 0.3s; }
    .hashtaglistarea .hashtaglist li:hover a {
      background-color: #432C29;
      color: #fff; }
    .hashtaglistarea .hashtaglist li:hover .num {
      color: #fff; }

/* プルダウンメニュー版ハッシュタグ一覧の装飾 */
.hashtagpullbox {
  display: flex;
  flex-wrap: wrap;
  position: relative; }
  .hashtagpullbox::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 85px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 10px solid #98C0C6;
    border-bottom: 0;
    pointer-events: none; }
  .hashtagpullbox .hashtagpull {
    width: calc(100% - 75px);
    border: solid 1px #fff;
    height: 40px;
    border-radius: 5px 0 0 5px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff; }
  .hashtagpullbox .submitcover {
    width: 75px;
    border-radius: 0 5px 5px 0;
    background-color: #98C0C6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s; }
    .hashtagpullbox .submitcover:hover {
      opacity: 0.5; }

/* -------------------- */
/* ▼カテゴリツリー区画 */
/* -------------------- */
.categoryarea {
  margin: 0 0 1em 0;
  /* 外側の余白量 */
  padding: 0 0 1em 0;
  /* 内側の余白量 */
  border-bottom: 1px dashed green;
  /* 下線 */ }

.categoryTree {
  background-color: #efe;
  /* 背景色 */
  border-radius: 0.5em;
  /* 角丸 */
  border: 1px solid #eee;
  /* 枠線 */
  margin: 1em 0;
  /* 外側の余白量 */
  padding: 0.25em;
  /* 内側の余白量 */ }

/* ▽カテゴリツリー */
.categoryTree ul {
  padding-left: 30px;
  /* 左側の余白量 */
  list-style-type: disc;
  /* 箇条書き記号(何も付けたくなければ none に) */
  line-height: 1.2;
  /* 行の高さ */ }

/* カテゴリ1項目 */
.categoryTree li {
  margin-top: 0.25em;
  /* 上側の余白量 */ }

/* ………………………………………………………………………………………… */
/* ▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等） */
/* ………………………………………………………………………………………… */
/* ▽カテゴリアイコン */
.categoryTree .caticon img {
  height: 1.2em;
  /* アイコンの高さを1.2文字分に制限する */
  width: auto;
  /* アイコンの横幅は自動調整する */
  vertical-align: text-top;
  /* アイコンの上端位置をテキストの上端に合わせる */ }

/* ▽カテゴリ名 */
/* 間隔調整：カテゴリアイコンとカテゴリ名が並ぶ際には間隔を空ける */
.categoryTree .caticon + .cattext,
.categoryTree .cattext + .caticon {
  margin-left: 3px; }

/* ▽該当件数 */
.categoryTree .num {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.9em;
  color: #aaa; }

/* ▽カテゴリ概要文 */
.categoryTree .catdescription {
  font-size: smaller;
  color: #555; }

/* プルダウンメニュー版カテゴリ一覧の装飾 */
.catpull {
  max-width: 200px; }

/* -------------------- */
/* ▼新着投稿リスト区画 */
/* -------------------- */
.latestpostarea {
  margin: 0 0 1em 0;
  /* 外側の余白量 */
  padding: 0 0 1em 0;
  /* 内側の余白量 */
  border-bottom: 1px dashed green;
  /* 下線 */ }

/* ▽新着投稿グリスト */
.latestpostlist {
  margin: 0.5em 0;
  /* 外側の余白量 */
  padding: 0.6em 0.5em 0.3em 1.7em;
  /* 内側の余白量 */
  background-color: #efe;
  /* 背景色 */
  border-radius: 0.5em;
  /* 角丸 */
  line-height: 1.25;
  /* 行の高さ */ }

/* 各項目 */
.latestpostlist li {
  margin: 0.75em 0; }

/* タイトルリンク以外の項目 */
.latestpostlist span {
  display: inline-block;
  font-size: 0.8em; }

.latestpostlist .postdate {
  color: gray; }

/* 投稿日付 */
.latestpostlist .posttime {
  color: gray; }

/* 投稿時刻 */
.latestpostlist .username {
  color: #558855; }

/* 投稿者名 */
.latestpostlist .userid {
  color: #555588; }

/* 投稿者ID */
.latestpostlist .postid {
  color: gray; }

/* 投稿番号 */
.latestpostlist .length {
  color: gray; }

/* 本文文字数 */
/* ---------------- */
/* ▼カレンダー区画 */
/* ---------------- */
.calendararea {
  position: relative; }

/* ▽カレンダーテーブル */
.calendar {
  width: 100%;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  /* 日付数値の装飾（リンクになる場合も、ならない場合も共通） */
  /* 日付数値のリンク（※リンクになる場合だけの装飾） */
  /* 今日の枠（カレンダー内での「今日」のセルだけの装飾） */ }
  .calendar caption {
    padding-bottom: 5px; }
  .calendar .daysofweek th {
    background-color: #98C0C6;
    color: #fff;
    padding: 10px 0; }
    .calendar .daysofweek th:first-child {
      border-radius: 10px 0 0 0; }
    .calendar .daysofweek th:last-child {
      border-radius: 0 10px 0 0; }
  .calendar th,
  .calendar td {
    background-color: #fff;
    border: 1px solid #F2F0E3;
    padding: 2px;
    text-align: center;
    font-size: 12px; }
  .calendar a,
  .calendar .nolink {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: transparent; }
  .calendar td a {
    background-color: #cee6e9;
    transition: 0.3s; }
    .calendar td a:hover {
      background-color: #98C0C6;
      color: #fff; }
  .calendar td.today {
    background-color: #FCFCC7; }

.calendarlinks {
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 10px; }
  .calendarlinks a {
    color: #98C0C6;
    transition: 0.3s; }
    .calendarlinks a:hover {
      opacity: 0.7; }

/* -------------------- */
/* ▼フリースペース区画 */
/* -------------------- */
.freespacearea {
  margin: 0 0 1em 0;
  /* 外側の余白量 */
  padding: 0 0 1em 0;
  /* 内側の余白量 */
  border-bottom: 1px dashed green;
  /* 下線 */ }

/* ▽フリースペースの本文 */
.freespacebody {
  margin: 0.5em 0;
  /* 外側の余白量 */
  padding: 0.75em;
  /* 内側の余白量 */
  background-color: #efe;
  /* 背景色 */
  border-radius: 0.5em;
  /* 角丸 */
  line-height: 1.5;
  /* 行の高さ */ }

/* ▽フリースペースの編集リンク */
.freespaceedit {
  margin: 0;
  text-align: right;
  font-size: 0.75em; }

/* ▼その他の情報表示 */
.infotitle {
  margin: 1em 0 0 0;
  border-bottom: 1px dotted #ccc;
  font-size: 0.95em; }

.infobody {
  margin: 0 0 1em 0;
  padding-top: 0.25em;
  text-align: right; }

@media all and (max-width: 800px) {
  .box-wrapper {
    display: block; }

  .mainarea,
  .subarea {
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 0 auto; } }
/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
/* Powered-by表記のデザイン */
.poweredby {
  opacity: 0.8;
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-bottom: 20px; }
  .poweredby a {
    color: #98C0C6;
    transition: 0.3s; }
    .poweredby a:hover {
      opacity: 0.5; }

.media-more-link a {
  display: block;
  width: max-content;
  background: #98C0C6;
  color: #fff;
  padding: 5px 20px;
  border-radius: 25px;
  margin: 10px auto 0;
  font-size: 12px;
  transition: 0.3s; }
  .media-more-link a:hover {
    opacity: 0.5; }

.footer-nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: #432C29;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05); }
  .footer-nav ul {
    display: flex;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 3px; }
  .footer-nav li {
    flex: 1;
    border-left: 1px solid #654945; }
    .footer-nav li:last-child {
      border-right: 1px solid #654945; }
  .footer-nav a {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.3s; }
    .footer-nav a.active, .footer-nav a:hover {
      color: #98C0C6; }

main.skin-picts .mainarea {
  width: 100%;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important; }
main.skin-picts .list-imagewrap {
  width: calc(33.33% - 7px);
  position: relative; }
  main.skin-picts .list-imagewrap .imagebox {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; }
    main.skin-picts .list-imagewrap .imagebox img {
      object-fit: cover;
      aspect-ratio: 1 / 1; }
  main.skin-picts .list-imagewrap .pictCtrlBox {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 7px; }
    main.skin-picts .list-imagewrap .pictCtrlBox a {
      color: #fff;
      text-shadow: 0 0 10px #636363;
      font-size: 10px;
      margin-left: 3px; }
@media all and (max-width: 800px) {
  main.skin-picts .mainarea {
    gap: 2px !important; }
    main.skin-picts .mainarea .list-imagewrap {
      width: calc(33.3333333% - 1.3333333px); }
      main.skin-picts .mainarea .list-imagewrap .embeddedimage {
        border-radius: 0; }
    main.skin-picts .mainarea:has(.list-imagewrap) {
      margin: 0 -2.5%;
      width: 105% !important;
      max-width: 105% !important; } }
main.skin-picts .forOnePict {
  margin: 0 auto; }
main.skin-picts .onePictSearch a {
  display: block;
  width: max-content;
  background: #98C0C6;
  color: #fff;
  padding: 5px 20px;
  border-radius: 25px;
  margin: 10px auto 0;
  font-size: 12px;
  transition: 0.3s; }
  main.skin-picts .onePictSearch a:hover {
    opacity: 0.5; }

/*# sourceMappingURL=tegalog.css.map */