@charset "utf-8";
:root {
  --text-color: #0f1419;
  --sub-color: #f2698e;
  --accent-color: #f7a4b9;
  --link-back-color:#efe;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.6rem;
  overflow-y: scroll;
  background: #eaeaec;
}

a {
  color: var(--sub-color);
  text-decoration: none;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.ramune {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: solid 25px white;
}

#header-wrap {
  text-align: center;
  font-size: 0.9rem;
  padding-top: min(4vw, 40px);
}

#container-wrap {
  width: min(100%, 700px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 0;
}

h1 {
  margin:0;
  font-size: 1.2rem;
}

.title-sub {
  color: var(--accent-color);
}


  .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 {
font-style: normal;
font-weight: bold;
color: #c00;
}
/* I:斜体(Italic) */
  .decorationI {
font-style: italic;  /* 斜体 */
}
/* Q:引用(Quote) */
  .decorationQ {
border-left: 5px double pink;
margin: 1em 0.3em 1em 1em;
padding: 0.75em 0.5em;
background-color: #fff8f8;
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: orange;  /* 線配色 */
}

/* ---------------------- */
/* ▼自由装飾用の装飾の例 *//* 自由装飾は [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 #e88;  /* 右下に濃赤色の影を付ける */
}
/* D:削除(Delete)に含まれる画像に対する装飾 */
  .decorationD img {
opacity: 0.5;/* 半透明にする */
}
/* E:強調(Emphasis)に含まれる画像に対する装飾 */
  .decorationE img {
outline: 8px ridge rgba(255, 70, 50, 0.6);  /* 浮き上がる紅色の枠線を付加 */
}
/* I:斜体(Italic)に含まれる画像に対する装飾 */
  .decorationI img {
box-shadow: -5px 5px 5px #ee5;/* 左下に黄色の影を付ける */
}
/* 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 pink;/* 右下にピンク色の影を付ける */
}

/* -------------- */
/* ▼埋め込み画像 */
/* -------------- */
/* ▽画像ボックス(FIGオプション指定時) */
  .embeddedpictbox {
margin: 0;/* 外側の余白を消す */
padding: 0;/* 内側の余白を消す */
display: inline-table;  /* 横方向に並べる */
border-collapse: collapse;/* displayをinline-tableにする場合に必要 */
border: 1px solid #feeff4;/* 枠線 */
vertical-align: top;  /* 行内では上に寄せる */
}
  /* キャプション */
.embeddedpictbox figcaption {
  display: table-caption;  /* キャプションが画像幅から外に出ないようにする */
  caption-side: bottom;  /* キャプションの位置(上にしたければtop) */
  font-size: 0.8em;/* 文字サイズ */
  text-align: center;/* センタリング */
  background-color: #feeff4;/* 背景色 */
  }

  /* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
  vertical-align: middle;
  }

/* ▽画像リンク */
  .imagelink {
display: inline-block;
line-height: 1;  /* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
vertical-align: inherit;/* 同上 */
}

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

/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを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;
}

/* ------------------------------------------ */
/* ▼表示対象の限定時などの「限定条件」表示行 */
/* ------------------------------------------ */
  .situation {
margin: 1em;
font-weight: bold;
color: var(--sub-color);
}
  .situation:empty { display: none; }/* 限定表示がない場合はボックス自体を非表示にする。 */

/* ■投稿ボックス(一発言)ごとの表示 */
.onelogbox {
  margin: 0 0 1.5rem 0;
  background-color: #fff;
  padding: 1rem;
}

/* ▼投稿日時領域 */
.postdate {
    color: var(--sub-color);
    font-size: 1.5rem;
    display: inline-block;
    margin-bottom: 1rem;
}

/* ▼カテゴリ名 */
.categories {
  font-size: 0.9em;
  margin-right: 0.25em;
  text-align: right;
  color: #aaa;
}

/* ▽カテゴリリンク1つ */
  .categorylink {
display: inline-block;
text-decoration: none;  /* リンクの下線を消す */
}

/* ▽カテゴリ間のセパレータ */
  .catseparator {
display: inline-block;
margin: 0 1px;/* 左右に1pxの余白 */
color: gray;/* 文字色 */
}

  /* ---------- */
  /* ▼投稿本文 */
  /* ---------- */
.onelogcontent {
  margin: 0;
  }
.comment {
  line-height: 1.3;
  }

  /* ▽投稿本文に含まれるURLリンク */
.comment .url {
  color: #f2698e;
  }
.comment .url:hover {
  text-decoration: underline;
  }

/* ▼続きを読むリンク（ボタン） */
.readmorebutton {
display: inline-block;/* インラインブロック化 */
padding: 1px 0.5em;  /* 内側の余白 */
margin: 0 1px;/* 外側の余白 */
border: 1px solid #ecc;/* 枠線の装飾 */
border-radius: 0.5em;/* 枠線の角丸 */
}
/* ▽ボタン表面の装飾(共通) */
  .readmorebutton:link,
  .readmorebutton:visited {
background-color: #eee;/* 背景色(グラデーション非対応の環境のみ) */
background-image: linear-gradient( 0deg, #dcc, #edd 55%, white );/* 背景グラデーション */
color: crimson;  /* 文字色 */
text-decoration: none;/* リンク装飾を消す */
}
/* ▽ボタンにマウスが載った際の装飾(共通) */
  .readmorebutton:hover {
background-image: none;  /* グラデーションなし */
background-color: #f88;  /* 背景色 */
color: white;  /* 文字色 */
text-decoration: underline;/* 下線を加える */
}

/* ▽開く（続きを読む）ボタン専用の装飾 */
  .readmorebutton.readmoreopen {
font-size: 0.95em;  /* 文字サイズ */
}

/* ▽閉じる（畳む）ボタン専用の装飾 */
  .readmorebutton.readmoreclose {
font-size: 0.75em;  /* 文字サイズ */
}

/* ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
.passkeyform {
  display: inline-block;
  margin: 0;
  padding: 0.6em;
  background-color: #feeff4;
  border: 1px solid #facad8;
  border-radius: 0.25em;
}

/* ▼鍵違いエラーの表示 */
  .passkeyerror {
display: block;
color: white;
background-color: #f37c9d;
font-weight: bold;
line-height: 1;
margin: 0 0 0.5em 0;
padding: 0.33em 0.25em;
}

/* ▼入力フォーム枠 */
  .passkeybox {
display: block;
}

  /* ▼入力欄前のガイド文 */
.passkeyguide {
  margin-right: 0.1em;
  }
  /* ▼鍵入力欄 */
.passkeyinput {
  width: 10em;
  margin: 0 0.25em 3px 0;
  }
  /* ▼送信ボタン */
.passkeysubmit {
  }

/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 *//* 各投稿の個別ページでのみ表示される囲みナビ用の装飾です。表示項目の取捨選択や詳細な装飾方法は https://www.nishishi.com/cgi/tegalog/custom/#customizecss-utilitylinkbox をご覧下さい。 */
/* ====================================================================== */
.utilitylinks {
  margin: 2em 1em 1em 1em;
  padding: 0.5em;
  border: 1px solid #fbbbd7;
  border-radius: 1em;
  background-color: #fef7fa;
  font-size: 0.9em;
}
.utilitylinks ul {
  color: darkred;
}


/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
  margin: 0;
  text-align: center;
}

/* ------------------------------------ */
/* ▼ページ前後移動リンク群ボックス全体 */
/* ------------------------------------ */
  .pagelinks {
margin: 0.75em;  /* 外側の余白 */
}

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

/* -------------------------------- */
/* ▼ページ番号リンク群ボックス全体 */
/* -------------------------------- */
  p.pagenums {
margin: 0.5em;  /* 外側の余白 */
}

/* ▼ページ番号リンクの数字 */
  .pagenums a.pagenumlink {
margin: 0px 2px 0px 2px;/* 外側の余白 */
padding: 0.2em 0.5em;  /* 内側の余白 */
font-size: 1em;  /* 文字サイズ */
font-weight: bold;/* 太字 */
}
/* ▽現在のページ番号の装飾 */
  a.pagenumhere {
text-decoration: none;  /* リンク装飾を消す */
background-color: #fb5;  /* 背景色 */
color: white;  /* 文字色 */
border-radius: 1em;/* 角丸 */
}
/* ▽ページ番号リンクにマウスが載った際の装飾 */
  a.pagenumlink:hover {
text-decoration: none;  /* リンク装飾を消す */
background-color: #f7a4b9;  /* 背景色 */
color: white;  /* 文字色 */
border-radius: 0.3em;  /* 角丸 */
}

/* ------------------------------------ */
/* ▼限定解除リンク(＝HOMEに戻るリンク) */
/* ------------------------------------ */
  .pagehome {
font-weight: bold;
}

.subarea, .mainarea {
  margin: 1em 1em 0 1em;
  padding: 0;
}

/* -------------------- */
/* ▼カテゴリツリー区画 */
/* -------------------- */
  .categoryarea {
margin: 0 0 1em 0;/* 外側の余白量 */
padding: 1em;  /* 内側の余白量 */
background-color: white;/* 背景色 */
}
/* ▼見出し */
  .categoryarea .cornertitle {
font-weight: bold;
color: black;
text-shadow: 1px 1px 1px #eee;
margin: 0 0 0.5em 0;
border-bottom: 1px dashed #aaa;
}
  .categoryTree {
}
  /* ▽カテゴリツリー */
.categoryTree ul {
  padding-left: 30px;
  list-style-type: disc;
  }
  /* ▽カテゴリツリー内の該当件数 */
.categoryTree .num {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.9em;
  color: #aaa;
  }

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

  /* ▽カテゴリ名 */
.categoryTree .cattext {
  }

  /* 間隔調整：カテゴリアイコンとカテゴリ名が並ぶ際には間隔を空ける */
.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;
  }

/* ------------------ */
/* ▼日付別リスト区画 */
/* ------------------ */
  .datelistarea {
margin: 0 0 1em 0;/* 外側の余白量 */
padding: 1em;  /* 内側の余白量 */
background-color: white;/* 背景色 */
}
/* ▼見出し */
  .datelistarea .cornertitle {
font-weight: bold;
color: black;
text-shadow: 1px 1px 1px #eee;
margin: 0 0 0.5em 0;
border-bottom: 1px dashed #eaa;
}
  /* ▽日付リスト(年単位) */
.datelimitlist {
  margin: 0.5em 0;
  padding: 0 0 0 20px;
  }
  /* ▽日付リスト(月単位) */
.datelimitsublist {
  margin: 0;
  padding: 0 0 0 10px;
  list-style-type: none;
  font-size: 0.95em;
  }
/* ▽年表記が単独で存在する場合に、月表示を横に並べる */
  .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;
  }
  /* ▽日付リンク項目 */
.datelistlink:hover {
  color: white;
  background-color: green;
  border-radius: 3px;
  }

  /* ▽日付プルダウンメニュー区画 */
.datelimitbox {
  margin: 0.5em;
  }

  /* ▽昇順/降順選択ラジオボタン区画 */
.datelimitboxoptions {
  display: block;
  font-size: 0.9em;
  }
.datelimitboxoptions label {
  display: inline-block;
  margin-right: 0.5em;
  }

/* -------------- */
/* ▼汎用ボックス */
/* -------------- */
  .subbox {
margin: 0 0 1em 0;
padding: 1em;
font-size: 0.9em;
background-color: #fcfcfc;
}


/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
  margin: 0;  /* 外側の余白 */
  padding: 0;/* 内側の余白 */
  color: var(--sub-color);
}

footer p {
  margin: 0;
  padding: 5px 0;
}

/* ▼戻るリンク */
.backlink {
  text-align: center;
  padding: 1em;
}

/* Powered-by表記のデザイン */
.poweredby { margin: 0 1em; font-size: 0.8em; }


/* End of file */