@charset "utf-8";

/* Table of Contents：
   -------------------
    ■事前設定部分
        ▼カスタムプロパティ
        ▼Webフォント
        ▼隠れハッシュタグ

    ■全体共通装飾
        ▼twemojiの装飾
        ▼リンクの装飾
        ▼チェックボックス、ラジオボタンの装飾 
        ▼自由装飾
        ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 
        ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
        ▼埋め込み画像
        ▼埋め込み動画
	    ▼埋め込みTweet
	    ▼検索語のハイライト
        ▼カード型リンクの装飾 
    
	■ページ最上部(ヘッダ)領域
            ▼メディアクエリ設定（画面サイズが600px以下）

    ■入力フォームの表示領域
            ▼メディアクエリ設定（画面サイズが600px以下）
		▼本文入力欄
            ▼メディアクエリ設定（画面サイズが600px以下）
		▼投稿コントロール部分(ボタンや字数カウンタなど)
		▼投稿ボタン
            ▼メディアクエリ設定（画面サイズが600px以下）
		▼文字装飾ボタン群
        ▼ハッシュタグプルダウンメニュー
		▼カテゴリ選択チェックボックス群

    ■段組構成
        ▼メディアクエリ設定（画面サイズが600px以下）
        ▼大外枠の装飾 
        ▼メイン段の装飾
        ▼サブ段の装飾
        
    ■メイン(ログ掲載)領域
        ▼表示対象の限定時などの「限定条件」表示行 

    ■投稿ボックス(一発言)ごとの表示 
        ▼投稿本文カラム
        ▼投稿日時、カテゴリ
            ▼新着表示
            ▼先頭固定時の表示
        ▼投稿本文
        ▼メディアクエリ設定（画面サイズが600px以下）
        ▼続きを読むリンク（ボタン）
        ▼投稿下部の情報
            ▼編集リンク
    
    ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾
        ▼鍵違いエラーの表示
        ▼入力フォーム枠
            ▼入力欄前のガイド文
			▼鍵入力欄
			▼送信ボタン
    
    ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾

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

    ■サブ領域
        ▼ログイン、新規投稿ボタンの設定
        ▼ハンバーガーメニューの設定
        ▼メインメニュー
        ▼カテゴリ、ハッシュタグリスト
            ▽リスト名
            ▽該当件数
            ▽カテゴリツリー
        ▼カテゴリツリー内の各要素
            ▽カテゴリアイコン
            ▽カテゴリ名
            ▽カテゴリ概要文
        ▼ハッシュタグリスト区画
            ▽ハッシュタグリスト
        ▼日付一覧、検索の装飾
        ▼日付一覧リスト・日付検索区画
        ▼検索窓区画
            ▽検索フォーム
            ▽表示、検索ボタンの装飾
            ▽検索フォーム形式の切り替えリンク 
            ▽検索オプションリスト

    ■ページ最下部(フッタ)領域 

    ■小説カテゴリ限定表示時の設定 
        ▼小説カテゴリ限定表示時 main 部分
        ▼小説サブメニュー
        ▼小説限定表示時 comment 部分
        ▼日付部分の設定



*/

/* ============== */
/* ■事前設定部分 */
/* ============== */

/* ▼カスタムプロパティ */
:root {
    --base-color: #c0e1d7;
    /* ベースカラー */
    --main-color: #01a976;
    /* メインカラー */
    --sub-color-one: #ff817b;
    /* サブカラー 1 */
    --sub-color-two: #eeeae0;
    /* サブカラー 2 */
    --white: #f7f7f7;
    /* 白 */
    --black: #303030;
    /* 黒 */
    --gray: #B0B0B0;
}

/* ▼Webフォント */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.1/dist/css/yakuhanjp.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");


/* inputボタンのリセットCSS */
input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
}

/* ▼隠れハッシュタグ */
/* すべての隠れハッシュタグを非表示にする */
.taglink[title^="-"] {
    display: none;
}


/* ============== */
/* ■全体共通装飾 */
/* ============== */

html {
    font-size: 100%;
}

body {
    font-family: "YakuHanJP", "Noto Sans JP", "メイリオ", Meiryo,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    margin: 0;
    height: 100vh;
    line-height: 1.7;
    background-color: var(--base-color);
    color: var(--black);
    position: relative;
    -webkit-text-size-adjust: 100%;
    /* 自動フォントサイズ調整を解除 */
}

/* -------------- */
/* ▼twemojiの装飾 */
/* -------------- */
img.emoji {
    height: 1rem;
    width: 1rem;
    margin: 0 .1rem 0 .1rem;
    vertical-align: -0.2rem;
}

.decorationE img.emoji {
    outline: none;
}

/* -------------- */
/* ▼リンクの装飾 */
/* -------------- */
a:link,
a:visited {
    text-decoration: none;
    color: var(--sub-color-one);
}

/* 未訪問リンク、既訪問リンク */
a:hover {
    color: var(--main-color);
}

/* ----------------------------------- */
/* ▼チェックボックス、ラジオボタンの装飾 */
/* ----------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sub-color-one);
    transform: scale(1.2);
}

/* --------- */
/* ▼自由装飾 */
/* -------- */
.decorationF {
    padding: 0.03rem 0.3rem;
    border: solid 0.05rem;
    border-radius: 0.2rem;
    vertical-align: middle;
    margin-right: 0.5rem;
    font-size: 0.7rem;
}

.deco-genre {
    border-color: var(--main-color);
    color: var(--main-color);
    background-color: var(--white);
}

.deco-horror {
    border-color: var(--black);
    color: var(--white);
    background-color: var(--black);
}

.deco-romance {
    border-color: var(--sub-color-one);
    color: var(--white);
    background-color: var(--sub-color-one);
}

.deco-wordcount {
    color: var(--gray);
    vertical-align: middle;
    border: 0;
    padding: 0;
}

.deco-wordcount::after {
    content: "文字";
}

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

/* D:削除(Delete) */
.decorationD {
    color: #888;
    /* 文字色 */
    text-decoration-line: line-through;
    /* 取り消し線 */
    text-decoration-color: var(--sub-color-one);
    /* 線の色 */
    text-decoration-style: double;
    /* 二重線にする */
}

/* E:強調(Emphasis) */
.decorationE {
    background: linear-gradient(transparent 60%, var(--base-color) 60%);
    /* 文字の下半分くらいにマーカーっぽい線を引く */
}

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

/* Q:引用(Quote) */
.decorationQ {
    margin: 1rem 0.3rem;
    /* 外側の余白(上→右→下→左) */
    padding: 0.1rem 0.7rem 0.7rem;
    /* 内側の余白(上下→左右) */
    border-left: 1rem double var(--base-color);
    /* 左端の枠線 */
    background-color: var(--sub-color-two);
    /* 背景色 */

    display: block;
    /* ※Ver 2.2.0以降必須の記述 */
}

.decorationQ::before {
    font-family: "Material Icons";
    content: "\e244";
    font-size: 1.5rem;
}

.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: var(--sub-color-one);
    /* 線配色 */
}

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

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

/* E:強調(Emphasis)に含まれる画像に対する装飾 */
.decorationE img {
    outline: 8px ridge var(--base-color);
    /* 浮き上がる枠線を付加 */
}

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

/* 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 var(--base-color);
    /* 右下に影を付ける */
}

/* -------------- */
/* ▼埋め込み画像 */
/* -------------- */
/* ▽画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
    margin: 0;
    /* 外側の余白を消す */
    padding: 0;
    /* 内側の余白を消す */
    display: inline-table;
    /* 横方向に並べる */
    border-collapse: collapse;
    /* displayをinline-tableにする場合に必要 */
    border: 1px solid var(--sub-color-two);
    /* 枠線 */
    vertical-align: top;
    /* 行内では上に寄せる */
}

/* キャプション */
.embeddedpictbox figcaption {
    display: table-caption;
    /* キャプションが画像幅から外に出ないようにする */
    caption-side: bottom;
    /* キャプションの位置(上にしたければtop) */
    font-size: 0.8em;
    /* 文字サイズ */
    text-align: center;
    /* センタリング */
    background-color: var(--sub-color-two);
    /* 背景色 */
}

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

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

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

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

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

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

/* -------------- */
/* ▼埋め込み動画 */
/* -------------- */
.embeddedmovie {
    display: inline-block;
    max-width: 100%;
    /* はみ出ないようにする */
}

/* --------------- */
/* ▼埋め込み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%, var(--sub-color-one) 60%);
    /* 文字の下半分くらいにマーカーっぽい線を引く */
}

/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
    padding: 0 0.25em 0.5em 0;
    /* 内側の余白量 */
    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-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: 0.75rem;
    /* 文字サイズ(小さめ) */
}

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
header {
    width: 100%;
    /* 横幅 */
    padding: 0.2rem 0 0.2rem;
    /* 内側の余白量 */
    background-color: var(--sub-color-two);
    /* 背景色 */
    color: var(--main-color);
    /* 文字色 */
    text-align: center;
    /* テキスト中央寄せ */
    border-bottom: 0.1rem solid var(--white);
    /* ボックス下線 */
}

header p {
    margin: 0.1rem;
    /* 外側の余白量 */
    font-size: 0.8rem;
    /* フォントサイズ */
}

header img {
    width: 20%;
    /* 画像サイズ */
    margin-top: 0.5rem;
    /* 上側余白の設定*/
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    header img {
        width: 40%;
        /* 画像サイズ */
        margin-top: 0.5rem;
        /* 上側余白の設定*/
    }
}


/* メニュー関連のリセットCSS */
button {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    border: 0;
    outline: 0;
    background: transparent;
    border-radius: 0;
    text-align: inherit;
}

/* デフォルトでは非表示 */
.btn {
    display: none;
    /* 通常時は非表示 */
}

@media screen and (max-width: 600px) {

    /**************** 以下、ハンバーガーボタンのスタイリング ****************/

    .btn {
        /* 600px以下では表示 */
        display: block;
        /* ボタンの配置位置  */
        position: fixed;
        top: 0.8rem;
        right: 1rem;
        /* ボタンの大きさ  */
        width: 3.5rem;
        height: 3.2rem;
        /* バーガーの線をボタン範囲の中心に配置 */
        display: flex;
        justify-content: center;
        align-items: center;
        /* 最前面に */
        z-index: 1000;
        /* ボタン背景設定 */
        background-color: var(--sub-color-two);
        border-radius: 10%;
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
        /* 線の長さと高さ */
        width: 70%;
        height: 0.18rem;
        /* バーガー線の色 */
        background-color: var(--main-color);
        /* バーガー線の位置基準として設定 */
        position: relative;
        transition: .2s;
        display: block;
        /* ブロック要素にすることで幅を親要素にフィット */
    }

    /***** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
        content: "";
        /* 基準線と同じ大きさと色 */
        position: absolute;
        left: 0;
        /* 左端を基準に配置 */
        width: 100%;
        height: 100%;
        background-color: var(--main-color);
        transition: .2s;
    }

    .btn-line::before {
        /* 上の線の位置 */
        transform: translateY(-0.6rem);
    }


    .btn-line::after {
        /* 下の線の位置 */
        transform: translateY(0.6rem);
    }

    /***** メニューオープン時 *****/
    .btn-line.open {
        /* 真ん中の線を透明に */
        background-color: transparent;
    }

    .btn-line.open::before,
    .btn-line.open::after {
        content: "";
        transition: .2s;
    }

    .btn-line.open::before {
        /* 上の線を傾ける */
        transform: rotate(45deg);
    }

    .btn-line.open::after {
        /* 上の線を傾ける */
        transform: rotate(-45deg);
    }
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/* ======================== */
/* ■入力フォームの表示領域 */
/* ※これはQUICKPOST用です。新規投稿専用画面や編集画面ではCGI内蔵のCSSが使われるため、ここの記述は適用されません。 */
/* ======================== */

div.postarea {
    width: 80%;
    /* 横幅 */
    margin: 0 auto;
    /* 外側の余白量 */
}

.postform {
    background-color: var(--base-color);
    /* 背景色 */
    border: solid 3px var(--sub-color-two);
    /* 枠線の色 */
    margin: 1em;
    /* 外側の余白量 */
    padding: 1em;
    /* 内側の余白量 */
}

.postform p {
    margin: 0;
    /* テキスト入力エリア外側の余白 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    div.postarea {
        width: 100%;
    }

    .postform {
        margin: 0.5em;
        padding: 0.5em;
    }
}

/* ------------ */
/* ▼本文入力欄 */
/* ------------ */
textarea.tegalogpost {
    border: solid var(--main-color) 0.1rem;
    /* 枠線 */
    border-radius: 0.2em;
    /* 枠の角丸 */
    background-color: var(--white);
    /* 背景色 */
    font-size: 0.9rem;
    /* 文字サイズ */
    padding: 0.5rem;
    /* 内側の余白量 */
    margin-bottom: 0.25rem;
    /* 外側下の余白量 */
    box-sizing: border-box;
    /* サイズ解釈方法 */
    width: 100%;
    /* 横幅 */
    height: 4.3rem;
    /* 高さ */
    overflow-wrap: break-word;
    /* 折り返し方法 */
    overflow: auto;
    /* はみ出した場合の処理 */
}

/* ▽プレースホルダ(※入力文字数がゼロの際にだけ見える薄文字)の装飾 */
textarea.tegalogpost:placeholder-shown {
    color: #777;
    /* 通常時 */
}

textarea.tegalogpost:focus:placeholder-shown {
    color: #bbb;
    /* カーソルが入ったとき */
}

textarea.tegalogpost:-ms-input-placeholder {
    color: #aaa;
    /* for IE */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    textarea.tegalogpost {
        font-size: 1rem;
        padding: 0.4rem;
    }
}

/* ------------------------------------------------ */
/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
/* ------------------------------------------------ */
@media screen and (min-width: 601px) {
    .line-control {
        margin: 0.25rem 0;
        /* 外側の余白量 */
    }
}


/* ------------ */
/* ▼投稿ボタン */
/* ------------ */
.postbutton {
    display: inline-block;
    /* インラインブロック化 */
    background: var(--main-color);
    /* 背景色 */
    color: var(--white);
    /* 文字色 */
    font-size: 0.9rem;
    /* 文字サイズ */
    font-weight: bold;
    /* 太字 */
    text-decoration: none;
    /* 下線を消す */
    padding: 0.25rem 0.75rem;

    /* 内側の余白量 */
    border: 0.1rem solid var(--main-color);
    /* 枠線 */
    border-radius: 0.2rem;
    /* 枠の角丸 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    .postbutton {
        font-size: 0.85rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ▼投稿ボタンにマウスが載ったとき */
.postbutton:hover {
    background-color: var(--white);
    /* 背景色 */
    color: var(--main-color);
}

/* ------------------ */
/* ▼文字装飾ボタン群 */
/* ------------------ */
/* 掲載領域全体 */
.decoBtns {
    display: inline-block;
    /* インラインブロック化 */
    margin-top: 0.5rem;
    /* 外側の余白量 */
}

/* 全ボタン装飾 */
.decoBtns input {
    min-width: 1.7rem;
    min-height: 1.7rem;
    background-color: var(--white);
    border: 0.1rem solid var(--main-color);
    cursor: pointer;
    border-radius: 0.2rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

/* マウス載る際 */
.decoBtns input:hover {
    border: 0.1rem solid var(--main-color);
    background-color: var(--main-color);
    color: var(--white);
}

/* 太字  :B */
.decoBtnB {
    font-weight: bold;
}

/* 取消線:D */
.decoBtnD {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-style: double;
}

/* 強調  :E */
.decoBtnE {
    background: linear-gradient(transparent 60%, var(--base-color) 60%);
    /* 文字の下半分くらいにマーカーっぽい線を引く */
}

/* 斜体  :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;
}

/* -------------------------------- */
/* ▼ハッシュタグプルダウンメニュー */
/* -------------------------------- */
select.hashtagEasyInput {
    border: solid 0.1rem var(--main-color);
    background-color: var(--sub-color-two);
    border-radius: 0.2rem 0 0 0.2rem;
    font-size: 0.9rem;
    height: 1.7rem;
    /* 明示的に高さを設定 */
    box-sizing: border-box;
    /* パディングとボーダーを含めてサイズを計算 */
    vertical-align: middle;
    /* 垂直方向の位置合わせ */
}

input.hashIns {
    background-color: var(--main-color);
    border: solid 0.1rem var(--main-color);
    color: var(--sub-color-two);
    border-radius: 0 0.3rem 0.3rem 0;
    display: inline-block;
    height: 1.7rem;
    /* 明示的に高さを設定 */
    box-sizing: border-box;
    /* パディングとボーダーを含めてサイズを計算 */
    vertical-align: middle;
    /* 垂直方向の位置合わせ */
}

input.hashIns:hover {
    background-color: var(--sub-color-two);
    color: var(--main-color);
}

/* -------------------------------- */
/* ▼カテゴリ選択チェックボックス群 */
/* ★Ver 3.0.0以降で使用 */
/* -------------------------------- */
.catChecks {
    font-size: 0.9rem;
    padding-top: 0.5rem;
}

.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.2rem;
}

/* 投稿欄下部：「鍵付き」チェックボックスと「個別鍵」ボタンの間を詰める一時的なスタイル */
.funcUIs .catChecks {
    margin: 0 0.75rem 0 0;
}

.funcUIs .catChecks label {
    margin: 0;
}



/* ================================================= */
/* ■段組構成（画面の幅が800px以上ある広い場合限定） */
/* ※段組(2カラム構成)にしたくない場合は、この区画を全削除して下さい。 */
/* ================================================= */



/* -------------- */
/* ▼大外枠の装飾 */
/* -------------- */
.contents {
    display: flex;
    /* フレックスボックスの指定 */
    justify-content: space-between;
    /* 水平方向のレイアウト*/
    width: 80%;
    /* 横幅 */
    margin: 1.2rem auto 0;
    /* 外側の余白量 */
    padding: 0;
    /* 内側の余白量 */
}

/* ---------------- */
/* ▼メイン段の装飾 */
/* ---------------- */
.contents main {
    width: 68%;
    /* 横幅 */
    margin-bottom: 0;
}

/* -------------- */
/* ▼サブ段の装飾 */
/* -------------- */
.contents aside {
    width: 26%;
    /* 横幅 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {

    /* ---------------- */
    /* ▼メイン段の装飾 */
    /* ---------------- */
    .contents {
        width: 100%;
    }

    .contents main {
        width: 95%;
        margin: 0 auto;
    }

    .contents aside {
        width: 80%;
    }
}

/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
main {
    margin: 0 1rem;
    /* 外側の余白量 */
    padding: 0;
    /* 内側の余白量 */
}

/* 見出し */
main h2 {
    margin: 0 1.5rem 1rem;
    padding: 0.5rem 0 0 1rem;
    background: linear-gradient(transparent 60%, var(--base-color) 60%);
}

main div.cat-novel {
    background-color: var(--white);
    border-radius: 0.5rem;
}

/* ------------------------------------------ */
/* ▼表示対象の限定時などの「限定条件」表示行 */
/* ------------------------------------------ */
.situation {
    margin: 0 0 1rem 0;
    /* 外側の余白量 */
    font-weight: bold;
    /* 太字 */
    color: var(--main-color);
    /* 文字色 */
    text-align: center;
    /* 文字の中央寄せ */
}

.situation:empty {
    display: none;
}

/* 限定表示がない場合は存在自体を消す */

/* ================================ */
/* ■投稿ボックス(一発言)ごとの表示 */
/* ※この領域は、内側スキンで生成しているHTMLに対する装飾です。 */
/* ================================ */

/* ---------------- */
/* ▼投稿本文カラム */
/* ---------------- */
.onelogbody {
    width: 100%;
    /* 横幅 */
    text-align: justify;
    /* 最終行以外を均等割り当て */
    overflow-wrap: break-word;
    /* 単語が要素の横幅より大きい場合にのみ、単語の途中で改行。禁則処理もできる限り守る */
    border-radius: 0 0 0.5rem 0.5rem;
    /* 角丸の設定 */
    margin: 0;
    /* 外側の余白の設定 */
    background-color: transparent;
    /* 背景色 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    .onelogbody {
        margin-bottom: 0.5rem;
    }
}

/* ……………………… */
/* ▼投稿日時、カテゴリ */
/* ……………………… */
.oneloginfo {
    display: flex;
    /* flexboxの設定 */
    align-items: stretch;
    /* 子要素を親要素の高さに合わせて伸ばす */
}

a.date {
    background-color: transparent;
    /* 背景色 */
    color: var(--black);
    /* 文字の色 */
    text-align: left;
    /* 文章左寄せ */
    flex: 1;
    /* 残りのスペースを占有 */
    border: 0;
    /* 枠線なし*/
    font-size: 0.8rem;
    /* 文字サイズ */
    margin-right: 0.2rem;
    /* 外側右の余白 */
}

a.date:hover {
    color: var(--gray);
    /* 文字の色 */
}

/* ▼新着表示 */
span.new {
    color: var(--sub-color-one);
    font-weight: bold;
    margin-left: 0.3rem;
}

/* ▼先頭固定時の表示 */
.fixed {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    margin-left: -0.3rem;
}

a.categorylink {
    background-color: var(--main-color);
    /* 背景色 */
    color: var(--white);
    /* 文字の色 */
    text-align: center;
    /* 文章中央寄せ */
    flex: 0 0 auto;
    /* 幅を自動で調整 */
    border-color: var(--main-color);
    /* 枠線の色 */
}

a.categorylink:hover {
    background-color: var(--white);
    /* 背景色 */
    color: var(--main-color);
    /* 文字の色 */
}

/* ………………………… */
/* ▼投稿本文 */
/* ……………………… */

.comment {
    line-height: 1.5;
    /* 行の高さ */
    margin: 0 1.5rem;
    /* 外側の余白 */
    padding: 0 0 0.2rem 0;
    /* 内側の余白 */
    font-size: 0.9rem;
    /* 文字サイズの設定 */
    letter-spacing: 0.1rem;
    /* 文字の隙間の指定 */
    border-bottom: solid 0.05rem var(--gray);
    display: block;
    border-radius: 0;
}

.comment h4:first-of-type {
    font-size: 0.9rem;
    margin: 0 0 0.2rem 0;
}

.comment h4 {
    font-size: 1rem;
    margin: 0 0 0.2rem 0;
}

.comment p {
    margin: 0 0 0.5rem 0;
}


/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    .onelogfooter {
        margin-top: 0.3rem;
    }
}


/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼続きを読むリンク（ボタン） */
/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▽ボタン枠の装飾(共通) */
.readmorebutton {
    display: inline-block;
    /* インラインブロック化 */
    padding: 0.1rem;
    /* 内側の余白 */
    margin: 0.2rem auto;
    /* 外側の余白 */
    border-radius: 0.3rem;
    /* 枠線の角丸 */
    text-align: center;
    width: 70%;
    position: relative;
    left: 15%;
}

/* ▽ボタン表面の装飾(共通) */
.readmorebutton:link,
.readmorebutton:visited {
    border: solid 2px var(--base-color);
    background-color: var(--base-color);
    /* 背景色 */
    text-decoration: none;
    /* リンク装飾を消す */
}

/* ▽ボタンにマウスが載った際の装飾(共通) */
.readmorebutton:hover {
    background-image: none;
    /* グラデーションなし */
    background-color: var(--white);
    /* 背景色 */
    color: var(--sub-color-one);
    /* 文字色 */
    text-decoration: none;
}

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

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


/* ‥‥‥‥‥‥‥‥ */
/* ▼投稿下部の情報 */
/* ‥‥‥‥‥‥‥‥ */
div .onelogfooter {
    text-align: right;
    /* 右寄せ */
    margin: 0 1rem;
    /* 外側の余白 */
    padding: 0 0 1rem 0;
    /* 内側の余白 */
    line-height: 0.2;

}

/* ‥‥‥‥‥‥ */
/* ▼編集リンク */
/* ‥‥‥‥‥‥ */
.editlink a {
    color: var(--gray);
    text-decoration: none;
    /* リンクの下線を消す */
}

.editlink a::before {
    font-family: "Material Icons Round";
    content: "\e745";
    font-size: 1.8rem;
    position: relative;
    top: 0.65rem
}

/* ▽編集リンクにマウスが載ったとき */
.editlink a:hover {
    color: var(--black);
    /* 文字色 */
}

/* ============================================================ */
/* ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
/* ============================================================ */
.passkeyform {
    display: inline-block;
    /* インラインブロック化 */
    margin: 0;
    padding: 0.6rem;
    background-color: var(--white);
    border: 0.1rem solid var(--base-color);
    border-radius: 0.25rem;
}

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

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

/* ▼入力欄前のガイド文 */
.passkeyguide {
    margin-right: 0.1rem;
}

/* ▼鍵入力欄 */
.passkeyinput {
    width: 10em;
    margin: 0 0.25rem 0.5rem 0;
}

/* ▼送信ボタン */
/* .passkeysubmit {
		} */

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

/* ▼ナビのリンクリスト */
.utilitylinks ul {
    color: var(--black);
    /* 文字色 */
    list-style: square;
    /* リストアイコンの指定 */
    padding-left: 1.5rem;
    /* 内側左の余白 */
}

/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
    text-align: center;
    /* 中央寄せ */
    color: var(--main-color);
    /* 文字の色 */
}

.pagenavi a {
    color: var(--main-color);
}

.pagenavi a:hover {
    color: var(--sub-color-one);
}

/* ------------------------------------ */
/* ▼ページ前後移動リンク群ボックス全体 */
/* ------------------------------------ */
.pagelinks {
    display: flex;
    /* フレックスボックスの設定 */
    justify-content: center;
    /* フレックスアイテムの中央揃え */
}

/* ▼ページ移動リンクの文字 */
.prevlink,
.nextlink {
    display: inline-block;
    /* インラインブロック化 */
    background-color: var(--sub-color-two);
    /* 背景色 */
    border: solid 0.1rem var(--sub-color-two);
    /* 枠線 */
}

.prevlink {
    padding: 0.1rem 0.7rem 0.1rem 1rem;
    /* 内側の余白 */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
    /* 多角形の作成 */
    margin-right: 0.2rem;
    /* ページ前後移動リンクの間の隙間 */
}

.nextlink {
    padding: 0.1rem 1rem 0.1rem 0.7rem;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
}

.pagenumlink {
    display: inline-block;
    background-color: var(--sub-color-two);
    width: 1.5rem;
    height: 1.5rem;
    border: solid 0.1rem var(--sub-color-two);
}

/* ▽現在のページ番号の装飾 */
a.pagenumhere {
    text-decoration: none;
    /* リンク装飾を消す */
    background-color: var(--main-color);
    /* 背景色 */
    color: var(--sub-color-two);
    /* 文字色 */
}

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

/* ========== */
/* ■サブ領域 */
/* ========== */

aside ul {
    list-style: none;
    /* リストスタイルの設定 */
    padding: 0 0.5rem 0.5rem 0.5rem;
    /* 内側の余白 */
}

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼ログイン、新規投稿ボタンの設定 */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥*/
a.newpost::before,
a.admin::before {
    font-family: "Material Icons Round";
    vertical-align: middle;
}

a.newpost::before {
    content: "\e3c9";
}

a.admin::before {
    content: "\e8b8";
}


/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    div.sidebtn {
        /*サブ領域に表示されるログイン、新規投稿ボタンの位置*/
        margin: 0rem 0 0.5rem 1.5rem;
    }

    /**************** 以下、メニューのスタイリング ****************/
    /* メニュー初期状態（画面外に移動させる） */
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        height: 100%;
        background-color: var(--sub-color-two);
        transform: translateX(130%);
        /* 画面外へ移動 */
        transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
        /* スライドのアニメーション */
        visibility: hidden;
        /* 見えなくする */
        opacity: 0;
        overflow: auto;
        /* メニュー内のスクロールを可能にする */
    }

    /* メニューオープン時（画面内に表示） */
    .menu.open {
        transform: translateX(0);
        /* 画面内へ移動 */
        visibility: visible;
        /* 表示 */
        opacity: 1;
        /* メニュー上部に余白を作るため */
        padding-top: 4rem;
    }

    /* 背景のスクロールを無効にする */
    body.no-scroll {
        overflow: hidden;
        /* スクロールを無効にする */
    }
}

/* ‥‥‥‥‥‥‥‥ */
/* ▼メインメニュー */
/* ‥‥‥‥‥‥‥ */
nav ul {
    background-color: var(--sub-color-two);
    /* 背景色 */
    border: double 0.3rem var(--base-color);
    /* 枠線 */
    margin-top: 0.5rem;
}

nav ul li {
    padding: 0.3rem 0.5rem 0 0.5rem;
    /* 内側の余白 */
    border-bottom: dotted 0.2rem var(--base-color);
    /* 下線 */
    font-size: 1.2rem;
    /* 文字サイズ */
}

nav a {
    display: block;
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    nav ul {
        margin: 0 auto;
        /* 中央寄せ */
        width: 80%;
    }
}

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼カテゴリ、ハッシュタグリスト */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */

/* ▽リスト名 */
p.side-cat,
p.side-tag {
    border-radius: 0.7rem 0.7rem 0 0;
    padding: 0.2rem 1rem;
    width: fit-content;
    margin-bottom: 0;
    text-align: center;
    color: var(--white);
}

p.side-cat {
    background-color: var(--sub-color-one);
}

p.side-tag {
    background-color: var(--main-color);
}

ul.cattree,
ul.hashtaglist {
    background-color: var(--white);
    padding: 0.8rem 0.7rem 0.4rem;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    margin-top: 0;
    font-size: 0.9rem;
}

ul.hashtaglist {
    padding-top: 0.2rem;
}

.depth2 {
    display: none;
}

/* ▽該当件数 */
li.catbranch span.num,
ul.hashtaglist span.num {
    margin-left: 0.3rem;
    font-size: 0.8rem;
}

/* ▽カテゴリツリー */
li.catbranch {
    margin-bottom: 0.5rem;
}

li.catbranch :last-of-type {
    margin-bottom: 0;
}

a.catlink {
    color: var(--white);
    border-radius: 0.3rem;
    border: solid 0.1rem var(--main-color);
    background-color: var(--main-color);
    padding: 0.1rem 1rem;
    display: inline-block;
}

a.catlink:hover {
    color: var(--main-color);
    background-color: var(--white)
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    div.cattag {
        margin: 0 auto;
        /* 中央寄せ */
        width: 85%;
    }

    ul.cattree,
    aside ul.hashtaglist {
        width: 90%;
    }
}

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

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

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

/* ▽カテゴリ概要文 */
.categoryTree .catdescription {
    font-size: smaller;
    color: var(--gray);
}

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

/* ------------------------ */
/* ▼ハッシュタグリスト区画 */
/* ------------------------ */

/* ▽ハッシュタグリスト */
.hashtaglist li {
    display: inline-block;
    /* インラインブロック化(横に並べる) */
    /* ※ハッシュタグ一覧を横に並べたくない場合は、この行を削除して下さい。 */
}

.hashtaglist a.taglink::before {
    content: "#";
}

/* プルダウンメニュー版ハッシュタグ一覧の装飾 */
.hashtagpull {
    max-width: 80%;
}

/* -------------------- */
/* ▼日付一覧、検索の装飾 */
/* -------------------- */
div.log-search {
    border: solid 0.1rem var(--sub-color-two);
    background-color: var(--base-color);
    width: 80%;
    padding: 1rem;
    margin-bottom: 1rem;
}

p.side-log,
p.cornertitle,
div#complexsearch>p {
    margin: 0 0 0.4rem 0;
    border-bottom: 0.2rem dotted var(--sub-color-two);
    color: var(--main-color);
    width: 80%;
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    div.log-search {
        margin: 0 auto 5rem auto;
    }
}

/* ------------------------------ */
/* ▼日付一覧リスト・日付検索区画 */
/* ------------------------------ */

/* 日付一覧リストのプルダウンメニューの装飾 */
/* 検索語(テキスト)入力欄とCSSまとめている */

/* 日付一覧リストのラジオボタンの装飾 */
span.datelimitboxoptions {
    display: flex;
    flex-direction: column;
    /* 子要素を縦に並べる */
}

span.datelimitboxoptions label {
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

span.datelimitboxoptions label:last-of-type {
    margin-right: 0;
}

span.datelimitboxoptions label input {
    transform: scale(1.2);
    margin-right: 0.3rem;
}

/* ------------ */
/* ▼検索窓区画 */
/* ------------ */

/* ▽検索フォーム */
/* 検索語(テキスト)入力欄 */
select.datelimitpull,
input.queryinput {
    border: solid 0.1rem var(--main-color);
    background-color: var(--sub-color-two);
    color: var(--black);
    border-radius: 0.3rem 0 0 0.3rem;
    padding-left: 0.4rem;
    margin-right: 0;
    font-size: 0.9rem;
    height: 1.8rem;
    /* 明示的に高さを設定 */
    box-sizing: border-box;
    /* パディングとボーダーを含めてサイズを計算 */
    vertical-align: middle;
    /* 垂直方向の位置合わせ */
}

input.queryinput {
    width: 70%;
}

/* ▽表示、検索ボタンの装飾 */

/* submitボタンのスタイル */
span.submitcover input.submitbutton {
    border: solid 0.1rem var(--main-color);
    background-color: var(--main-color);
    color: var(--sub-color-two);
    border-radius: 0 0.3rem 0.3rem 0;
    margin-left: 0;
    font-size: 0.9rem;
    height: 1.8rem;
    box-sizing: border-box;
    vertical-align: middle;
}

span.submitcover input.submitbutton:hover {
    background-color: var(--sub-color-two);
    color: var(--main-color);
}


/* ▽検索フォーム形式の切り替えリンク */
.siwtchsearchbox {
    font-size: 0.8rem;
    margin: 0.2rem;
}

.siwtchsearchbox::before {
    content: "+";
    margin-right: 0.1rem;
    color: var(--sub-color-one);
}

/* ▽複合検索フォーム */
#complexsearch {
    display: none;
    /* 複合検索窓は、最初は非表示にしておく */
}

/* 検索オプションリスト */
.searchoptions {
    font-size: 0.9em;
    margin-bottom: 0;
}

ul.searchoptions>li {
    display: flex;
    flex-direction: column;
    /* 子要素を縦に並べる */
}

/* 項目名 */
.solabel {
    display: inline-block;
    width: fit-content;
    padding: 0.1rem 1rem 0 1rem;
    background-color: var(--main-color);
    color: var(--sub-color-two);
    text-align: center;
    border-radius: 0.2rem 0.2rem 0 0;
}

/* セレクトボックス */
.searchoptions select {
    margin-bottom: 0.5rem;
    border-radius: 0 0.2rem 0.2rem 0.2rem;
    border: solid 0.1rem var(--main-color);
    background-color: var(--sub-color-two);
    color: var(--black);
    font-size: 0.9rem;
}

/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */
footer {
    padding: 0.1rem 1rem;
    /* 内側の余白 */
    background-color: var(--sub-color-two);
    /* 背景色 */
    color: var(--main-color);
    /* 文字色 */
    text-align: right;
    margin: 0;
}

footer p {
    margin: 0.1rem 0;
    font-size: 0.9rem;
}

/* End of file */