@charset "utf-8";
/* 検索用：◆カバー画像◆ */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');
/*三点リーダー用*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&text=%E2%80%A6&display=swap');
/*ダーシ用*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&text=%E2%80%95&display=swap');
/*いいねボタン用*/
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');

/* CSS_custom_properties */

:root {
    --base-site-color: #4f85a6;
    --hamburger: 30px;
    --user-icon: 3rem;
    --main-font: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    --icon-font: 'remixicon';
    --icon-font2: 'Material Symbols Rounded';
    --white: #fff;
    --wn-pink: rgb(233, 30, 99);
    --wn-pink-rgb: 233, 30, 99;
    --wn-blue: #1da1f2;
    --theme-color1-default: #4682b4;
    --hero-height: 180px;
    --icon-size: 100px;
    --button-link-color: #fafafa;
    --scrollbar-width: 8px;
    --cont-width: 680px;
    --loading-z-index: 1000;
    --quickpost-z-index: 200;
    --hamburger-z-index: 100;
    --searchopen-z-index: 4;
    --sidebar-z-index: 10;
    --dropdownmenu-z-index: 5;

    --bg-color: #fafafa;
    --bg-color-rgb: 245, 245, 245;
    --bg-sidebar: #f5f5f5;
    --text-color: #2d2d2d;
    --text-color-rgb: 72, 70, 76;
    --input-area-bg: #eceff1;
    --input-area-bg-rgb: 236, 239, 241;
    --input-text-color: rgb(33, 33, 33);
    --input-text-color-rgb: 33, 33, 33;
    --onelogbox-border-color: #e0e0e0;
    --link-color: rgb(0, 30, 67);
    --link-color-rgb: 0, 30, 67;
    --link-article-color: #1565c0;
    --mode-color: #f9a825;
    --wn-red: #d50000;
    --color-bw: 0, 0, 0;
}

/* Utilities */

html,
body {
    min-height: 100%;
}

body {
    font-family: var(--main-font);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-weight: 400;
}

/* link */

a {
    color: var(--link-color);
    text-decoration: none;
}
section a:hover {
    text-decoration: underline;
}

.external-link-icon::after {
    font-family: var(--icon-font);
    content: "\ecaf";
    padding-left: 2px;
    padding-right: 2px;
}

/* line-height */

.lh-content {
    line-height: 1.5;
}

/* color theme */

#mode-icon.lightmode {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
    background-color: var(--mode-color);
}

#mode-icon.darkmode {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
    background-color: var(--mode-color);
}

/* custom scrollbar */

.no-scroll {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}

.invisible-scrollbar::-webkit-scrollbar {
    display: none;
}

.invisible-scrollbar {
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(150 150 150);
}

body::-webkit-scrollbar-track {
    background-color: transparent;
}

body::-webkit-scrollbar-corner {
    display: none;
}

/* what-input */

[data-whatinput="mouse"] *:focus {
    outline: none;
}

/* quickpost button */

.postopen {
    background-color: var(--wn-blue);
    color: var(--button-link-color);
    filter: drop-shadow(0 0 3px rgba(var(--color-bw), 0.3));
}

/* width, height */

.w1-quarter {
    width: 1.25rem;
}

.w1-half {
    width: 1.5rem;
}

.w2-quarter {
    width: 2.25rem;
}

.w2-half {
    width: 3rem;
}

.h1-quarter {
    height: 1.25rem;
}

.h1-half {
    height: 1.5rem;
}

.h2-quarter {
    height: 2.25rem;
}

.h2-half {
    height: 3rem;
}

.h100vh {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* padding */

.pt5-half {
    padding-top: 6rem;
}

/* centering */

.top-half {
    top: 50%;
    transform: translateY(-50%);
}

/* image */

.object-fit-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

/* svg */

svg.fill-cc {
    fill: currentColor;
}

svg.fill-none {
    fill: none;
}

svg.stroke-cc {
    stroke: currentColor;
}

svg.stroke-1-half {
    stroke-width: 1.5;
}

svg.stroke-2 {
    stroke-width: 2;
}

svg.stroke-2-half {
    stroke-width: 2;
}

svg.stroke-3 {
    stroke-width: 2.5;
}

/* flexbox-gap */

.gap-q {
    gap: 0.25rem;
}

.row-gap-q {
    row-gap: 0.25rem;
}

.column-gap-q {
    -moz-column-gap: 0.25rem;
    column-gap: 0.25rem;
}

.gap-half {
    gap: 0.5rem;
}

.row-gap-half {
    row-gap: 0.5rem;
}

.column-gap-half {
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
}

/* color */

.same-text-color {
    color: var(--text-color);
}

.text-90 {
    color: rgba(var(--text-color-rgb), 0.9);
}

.text-80 {
    color: rgba(var(--text-color-rgb), 0.8);
}

.text-70 {
    color: rgba(var(--text-color-rgb), 0.7);
}

.text-60 {
    color: rgba(var(--text-color-rgb), 0.6);
}

.text-50 {
    color: rgba(var(--text-color-rgb), 0.5);
}

.text-40 {
    color: rgba(var(--text-color-rgb), 0.4);
}

.text-30 {
    color: rgba(var(--text-color-rgb), 0.3);
}

.text-20 {
    color: rgba(var(--text-color-rgb), 0.2);
}

.text-10 {
    color: rgba(var(--text-color-rgb), 0.1);
}

/* border */

.b--btm {
    border-bottom: 1px solid var(--onelogbox-border-color);
}

.b--top {
    border-top: 1px solid var(--onelogbox-border-color);
}

.b--color-50 {
    border-color: rgba(var(--text-color-rgb), 0.5);
}

/* bg-color */

.bg-social-list {
    background-color: var(--input-area-bg);
}

/* position */

.right-3 {
    right: 3rem;
}

.right-4 {
    right: 4rem;
}

.bottom-3 {
    bottom: 3rem;
}

.bottom-4 {
    bottom: 4rem;
}

.bottom-5 {
    bottom: 5rem;
}

.bottom-6 {
    bottom: 6rem;
}

/* Layout */

.container {
    width: 100%;
    opacity: 1;
    transition: opacity 0.45s ease;
}

.section,
.footer,
.header .header__inner {
    max-width: var(--cont-width);
}

/* Separator */

.dateseparator {
    display: none;
}

/* no data */

.nodata {
    padding: 2rem 0.5rem;
    border-top: 1px solid var(--onelogbox-border-color);
}

@media screen and (min-width: 30em) {

    .container,
    .header__container {
        width: calc(100vw - var(--scrollbar-width));
    }

    .no-scroll.container {
        padding-right: var(--scrollbar-width);
    }
}

/* Situation */

.info::before {
    content: "\ef14";
    font-size: 1rem;
    font-family: var(--icon-font);
    vertical-align: middle;
    margin-right: 0.25rem;
}

body.home .info,
body.onelog .info,
body.nofiltering .info {
    display: none;
    padding: 0;
}

/* header */

.header {
    background-color: rgba(var(--bg-color-rgb), 0.75);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

.header .logo {
    font-size: 1rem;
    max-width: calc(100% - ((var(--hamburger) + 1.5rem) * 2));
    margin-right: calc((var(--hamburger) + 1.5rem) * 2);
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ◆カバー画像◆ */
.hero {
    height: var(--hero-height);
    background-position: center top;
    margin-bottom: calc((var(--icon-size) / 2) + 0.5rem);
    background-image: url("../img/cover_260110.jpg");
}

.covericon {
    width: var(--icon-size);
    height: var(--icon-size);
    top: calc((var(--hero-height) - (var(--icon-size) / 2)));
    left: 0.5rem;
    box-sizing: border-box;
    border: 4px solid var(--bg-color);
    background-image: url("../img/icon.jpg");
    background-position: center center;
    background-size: cover;
}

/* hero > social-area */

.hero .social-area {
    top: calc((var(--hero-height) + 0.5rem));
    right: 1rem;
}

/* dropdown menu */

.hero .social-area .dropdown__body {
    display: none;
}

.hero .social-area .dropdown__item a {
    color: var(--text-color);
}

.hero .social-area .dropdown__btn.is-open+.dropdown__body {
    display: block;
    z-index: var(--dropdownmenu-z-index);
    background-color: var(--bg-color);
    box-shadow: 0 0 8px 2px rgba(var(--text-color-rgb), 0.1);
}

.hero .social-area .dropdown__btn.is-open::after {
    content: "";
    width: 100%;
    height: 100%;
    cursor: default;
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--dropdownmenu-z-index) - 1);
}

/* Onelog User Icon */

img.usericon {
    width: var(--user-icon);
    height: var(--user-icon);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 100%;
}

.w-usericon {
    width: calc(var(--user-icon) + 0.5rem);
}

/* onelog */

.onelogbox {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--onelogbox-border-color);
}

.onelogbox:first-of-type {
    border-top: 1px solid var(--onelogbox-border-color);
}

.onelogside a:hover {
    opacity: 1;
}

.onelogbody .comment a {
    color: var(--link-article-color);
}

.onelogbody .comment a:hover {
    text-decoration: underline;
}

.onelogbody img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.onelogbody .comment a img {
    cursor: zoom-in;
}

body.onelog .onelogside .postdate,
body.onelog .onelogside .editlink {
    display: none;
}

body:not(.onelog) .onelogside .postdate::before,
body:not(.onelog) .onelogside .editlink::before {
    content: "・";
}

body:not(.onelog) .oneloginfo {
    display: none;
}

/* Onelog Utility Links ( You can change Setting ) */

.utilitylinks {
    font-size: 0.875rem;
    margin: 2rem 0.5rem;
}

.utilitylinks ul {
    padding: 0;
}

.utilitylinks ul li {
    list-style-type: none;
}

.utilitylinks .datelinks {
    margin: 0 1rem;
}

.utilitylinks .datelinks li {
    margin-left: 1rem;
    list-style-type: circle;
}

/* youtube */

.embeddedmovie {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.embeddedmovie iframe {
    width: 100%;
    height: 100%;
}
	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合の外側要素 */
	figure.embeddedvideo {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column-reverse;
	}
		/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合のキャプション部分 */
		.videotitle {
			text-align: center;
			background-color: #dcf3dc;
		}

	/* ▽[VIDEO]URL記法（または [VIDEO:キャプション]URL記法）で掲載されるvideo要素部分 */
	video.embeddedvideo {
		display: inline-block;
		max-width: 100%;
		width: auto;
		height: auto;
	}

/* onelog password post form */

.passkeyform .passkeyerror {
    display: block;
    font-weight: 700;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    color: var(--wn-red);
}

.passkeyform .passkeyerror::before {
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    content: "\eca1";
    font-family: var(--icon-font);
    font-size: 2rem;
    font-weight: 400;
}

.passkeybox {
    padding: 1.25rem 1.5rem;
    display: block;
    box-sizing: border-box;
    background-color: var(--input-area-bg);
    border-radius: 2px;
}

.passkeybox .passkeyguide {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.passkeyform input {
    color: var(--input-text-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
}

.passkeyform input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.passkeyform input[type="text"] {
    display: block;
    width: 100%;
    padding: 0.25rem;
    margin: 0.5rem 0;
    color: var(--input-text-color);
    font-weight: 700;
    background-color: rgba(var(--bg-color-rgb), 0.6);
    border: 1px solid var(--text-color);
}

.passkeyform input[type="submit"] {
    display: block;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    margin: 0.5rem 0;
    color: var(--input-area-bg);
    background-color: var(--input-text-color);
    border: 1px solid var(--input-text-color);
    border-radius: 9999px;
}

.onelogbox .poststatus {
    display: none;
}

.onelogbox.logstatus-fixed .poststatus {
    display: inline-block;
    font-weight: 700;
    padding-left: calc(var(--user-icon) - 0.875rem);
    color: rgba(var(--text-color-rgb), 0.6);
    vertical-align: middle;
}

.onelogbox.logstatus-fixed .poststatus::before {
    content: "\f036";
    font-family: var(--icon-font);
    padding-right: 0.5rem;
    vertical-align: middle;
    font-size: 0.875rem;
}

.onelogbox.logstatus-fixed .poststatus::after {
    content: "Pinned Post";
    vertical-align: middle;
    font-size: 0.75rem;
}

/* categories */

.categories .cattree {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

.categories .cattree ul {
    margin: 0;
    padding: 0;
}

.categories .cattree li a {
    display: inline-block;
    padding: 0.25rem;
    font-weight: 600;
}

.categories .cattree li span.num {
    font-size: 0.75rem;
    display: block;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
}

.categories .cattree li span.num::after {
    content: "件の投稿";
    padding-left: 0.25rem;
}

/* hashtags */

.tags {
    color: var(--link-color);
}

.tags .hashtaglist {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.tags .hashtaglist li {
    list-style-type: none;
}

.tags .hashtaglist li a {
    color: var(--link-color);
    text-decoration: none;
    display: inline-block;
    transition: color .15s ease-in;
}

.tags .hashtaglist li a:hover {
    color: var(--link-article-color);
    transition: color .15s ease-in;
}

.tags .hashtaglist li a::before {
    content: "#";
    margin-right: 0.1rem;
}

.tags .hashtaglist li span.num {
    font-size: 0.75rem;
    display: inline;
}

/* DATEBOX:LIST */

.datelimitlist,
.datelimitlist * {
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

.datelimitlist li {
    list-style-type: none;
}

/* 年階層非出力時 */

.datelimitlist .datelimit-month {
    display: inline-flex;
    width: 25%;
    min-width: 5rem;
    justify-content: center;
    text-align: center;
    padding: 0.25rem 0;
}

/* 年階層出力時 */

.datelimitlist .datelimit-year {
    text-align: left;
    font-size: 1.25rem;
    font-weight: 700;
    width: 100%;
}

.datelimitlist .datelimit-year .datelimitsublist {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    font-size: 1rem;
    font-weight: 400;
}

.datelimitlist .datelimit-month a.datelistlink:hover {
    color: var(--link-article-color);
    transition: color .15s ease-in;
}

.datelimitlist .num {
    display: none;
}

/* Searchbox */

.searchbox {
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
}

.searchbox .queryinput {
    border: 1px solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 2rem;
    font-weight: 700;
    padding: 0.5rem;
    color: var(--input-text-color);
    background-color: var(--input-area-bg);
    box-sizing: border-box;
    border-radius: 0.2rem;
    width: 80%;
}

.searchbox .queryinput:focus {
    border: 1px solid var(--link-color);
}

.searchbox .submitbutton {
    font-size: 2rem;
    font-weight: 400;
    margin-left: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--link-color);
    border-radius: 0.2rem;
}

.searchbox .searchtarget {
    font-size: 0.875rem;
    color: var(--text-color);
}

.searchbox .searchtarget input {
    margin-right: 0.25rem;
    vertical-align: middle;
}

.searchopen {
    z-index: var(--searchopen-z-index);
}

.searchopen::before {
    content: '\e8b6';
    font-family: var(--icon-font2);
    font-size: 24px;
    font-weight: 600;
}

/* ------------------
  検索オプション
-------------------- */
ul.searchoptions{
    padding: 0.5em 1em 0.2em 2.3em;
    position: relative;
}

ul.searchoptions li {
    line-height: 1.5;
    padding: 0.5em 0;
}
/* selectbox */
.select-date,
.select-tag,
.select-cat,
.select-order {
    appearance: none;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

/* ------------------
  onelogfoot, newiine_btn
-------------------- */
button.newiine_btn span.material-symbols-rounded {
    font-size: 0.875rem;
    vertical-align: sub;
    font-variation-settings:
        'FILL'0,
        'wght'200,
        'GRAD'0,
        'opsz'48;
}

.onelogfoot a,
button.newiine_btn {
    color: rgba(var(--text-color-rgb), 0.8);
    background-color: var(--bg-color);
}

.onelogfoot svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    width: 1.25rem;
    height: 1.25rem;
}

span.newiine_count {
    color: var(--bg-color);
    font-size: 0.75rem;
}

button.newiine_btn.newiine_clickedtoday,
button.newiine_btn.newiine_clicked {
    color: var(--wn-pink);
}

button.newiine_btn.newiine_clickedtoday svg,
button.newiine_btn.newiine_clicked svg {
    fill: currentColor;
    stroke: var(--bg-color);
}

.onelogfoot a:hover,
button.newiine_btn:hover,
button.newiine_btn.newiine_clickedtoday:hover,
button.newiine_btn.newiine_clicked:hover {
    color: rgba(var(--wn-pink-rgb), 0.7);
}

button.newiine_btn::before {
    position: absolute;
    content: "";
    display: block;
    margin: auto;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    z-index: -1;
    transition: all ease-out 0.5s;
    transform: scale(0.5);
    background: rgba(var(--wn-pink-rgb), 0.7);
}

button.newiine_btn:active {
    transform: scale(0.92);
    color: var(--wn-pink);
    background-color: transparent;
}

button.newiine_btn:focus {
    color: var(--wn-pink);
}

button.newiine_btn.newiine_animate:before {
    z-index: 1;
    -webkit-animation: newiine-animation ease-out 0.5s forwards;
    animation: newiine-animation ease-out 0.5s forwards;
}

@-webkit-keyframes newiine-animation {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
        visibility: hidden;
    }
}

@keyframes newiine-animation {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scale(0.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
        visibility: hidden;
    }
}

/* end newiine_btn */

/* hamburger menu design */

.hamburger,
.hamburger span {
    transition: all 0.4s;
}

.hamburger {
    width: 30px;
    height: 30px;
    color: var(--text-color);
    z-index: var(--hamburger-z-index);
}

.hamburger span {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    background: var(--text-color);
    border-radius: 4px;
}

.hamburger span:nth-child(1) {
    top: 4px;
}

.hamburger span:nth-child(2) {
    top: 14px;
}

.hamburger span:nth-child(3) {
    bottom: 4px;
}

.hamburger.is-active {
    color: var(--text-color);
}

.hamburger.is-active span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
}

.hamburger.is-active span:nth-of-type(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-of-type(3) {
    transform: translateY(-10px) rotate(45deg);
}

/* sidebar アニメーション前のメニューの状態 */

.side {
    z-index: var(--sidebar-z-index);
    transform: translateX(100%);
    transition: all 0.3s linear;
    background-color: var(--bg-sidebar);
    width: 22rem;
    max-width: 80%;
    opacity: 0;
}

/* sidebar アニメーション後のメニューの状態 */

.side.is-active {
    transform: translateX(0);
    opacity: 1;
    box-shadow: -10px 0 35px -20px rgb(0 0 0 / 25%);
}

body.no-scroll .container {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
    opacity: 0.25;
}

/* quick post */

/* css initialize */

#quickpost input[type="button"],
#quickpost input[type="submit"],
#quickpost input[type="text"],
#quickpost select,
#quickpost textarea {
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* flexbox */

#quickpost .line-control {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: start;
    align-items: center;
}

#quickpost small.changelink {
    padding-right: 0.75rem;
}

#quickpost span[id^="tpostcount"] {
    /* セレクタ名の部分一致 */
    padding-right: 0.75rem;
}

#quickpost span:empty {
    display: none;
}

/* textarea */

#quickpost p {
    padding: 0;
    margin: 0.5rem 0;
}

#quickpost span {
    color: var(--text-color);
}

#quickpost .postform textarea.tegalogpost {
    font-size: 1rem;
    color: var(--text-color);
    padding: 0.25rem;
    resize: vertical;
    width: 100%;
    background-color: var(--input-area-bg);
    border: 1px solid var(--onelogbox-border-color);
}

#quickpost input[name="datetime"] {
    padding: 0.25rem;
}

/* input base */

#quickpost input[type="button"],
#quickpost input[type="submit"],
#quickpost input[type="file"],
#quickpost select {
    cursor: pointer;
    font-size: 1rem;
}

#quickpost input {
    border-radius: 0.1rem;
}

#quickpost input[type="button"] {
    background-color: var(--link-article-color);
    color: var(--button-link-color);
}

#quickpost input[type="submit"] {
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 0 1rem;
    margin-right: 0.75rem;
    border-radius: 4px;
    height: 2rem;
    font-weight: 700;
}

#quickpost input[type="text"] {
    background-color: var(--input-area-bg);
    color: var(--text-color);
    border: 1px solid var(--onelogbox-border-color);
    width: 100%;
}

#quickpost input[type="file"] {
    background-color: var(--input-area-bg);
    color: var(--text-color);
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    height: auto;
}

/* 区分, 機能 */

#quickpost span>input {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-color: transparent;
    padding: 0 0.75rem;
    margin: 0.25rem 0.25rem 0.25rem 0;
    height: 2rem;
}

#quickpost select {
    height: 2rem;
    padding: 0 0.25rem;
    background-color: var(--input-area-bg);
    color: var(--text-color);
    border: 1px solid var(--onelogbox-border-color);
}

#quickpost select+input[type="button"] {
    background-color: var(--input-area-bg);
    color: var(--text-color);
    border: 1px solid var(--onelogbox-border-color);
}

#quickpost span>label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    padding: 0 1rem;
    margin: 0.25rem 0.25rem 0.25rem 0;
    height: 2rem;
    color: var(--text-color);
    background-color: var(--input-area-bg);
    border: 1px solid transparent;
    border-radius: 0.1rem;
}

#quickpost span label input[type="checkbox"] {
    margin-right: 0.25rem;
    vertical-align: middle;
}

#quickpost span label:hover {
    border: 1px solid var(--text-color);
}

#quickpost input[type="button"]:hover {
    opacity: 0.8;
    transition: 0.3s;
}

/* 装飾見分け用css */

#quickpost input.decoBtnE {
    -webkit-text-emphasis: inherit;
    text-emphasis: inherit;
}

/* 強調(Emphasis) */

#quickpost input.decoBtnB {
    font-weight: 700;
}

/* 太字(Bold) */

#quickpost input.decoBtnI {
    font-style: italic;
}

/* 斜体(Italic) */

#quickpost input.decoBtnU {
    text-decoration: underline;
}

/* 下線(Underline) */

#quickpost input.decoBtnD {
    text-decoration: line-through;
}

/* 取消線(Delete) */

/*
#quickpost input.decoBtnS {} 小さめ(Small)
#quickpost input.decoBtnT {} 極小(Tiny)
#quickpost input.decoBtnQ {} 引用(Quote)
#quickpost input.decoBtnR {} ルビ(Ruby)
#quickpost input.decoBtnC {} 文字色(Color)
#quickpost input.decoBtnM {} 背景色(Marker)
#quickpost input.decoBtnH {} 隠す(hide)
*/

/**************************\
  Basic Modal Styles
\**************************/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--quickpost-z-index);
}

.modal__container {
    background-color: var(--bg-color);
    padding: 4rem 1rem 2rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    color: var(--text-color);
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--text-color);
    box-sizing: border-box;
}

.modal__close,
.modalsearch__close {
    background: transparent;
    color: var(--text-color);
    border-color: var(--text-color);
}

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, .8);
}

.micromodal-quickpost.is-open,
.micromodal-search.is-open {
    display: block;
}

.micromodal-quickpost,
.micromodal-search {
    display: none;
}

span.linkseparator {
    display: none;
}

/* Tab panel */

.panel {
    display: none;
}

.tab {
    background-color: var(--bg-color);
}

.tab.is-active .tab__item {
    font-weight: 700;
    position: relative;
    margin-bottom: 0.5rem;
}

.tab.is-active .tab__item::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    width: 100%;
    height: 4px;
    transform: translateX(-50%);
    background-color: var(--wn-blue);
    border-radius: 0.5rem;
}

.panel.is-show {
    display: block;
}

.panel.tab-archive,
.panel.tab-hashtag,
.panel.tab-search {
    border-top: 1px solid var(--onelogbox-border-color);
}

/* single */

.single .onelogbody input,
.single .onelogbody textarea {
    background-color: var(--input-area-bg);
    color: var(--input-text-color);
    border: 1px solid var(--input-area-bg);
}

.single .onelogbody textarea {
    resize: vertical;
}

.single .onelogbody button {
    background-color: var(--text-color);
    color: var(--bg-color);
    border: 1px solid var(--text-color);
}

/* single onelog.html > utilitylinks */

.single .utilitylinks {
    display: none;
}

/* 左右の余白追加 */
@media screen and (max-width:480px) {

    /*　画面サイズが480px以下の場合ここの記述が適用される　*/
    .onelogbox {
        padding-left: 20px;
        padding-right: 20px;
    }

    .comment {
        font-size: smaller;
    }
}

img.emoji {
    /* Twemoji用 */
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -.1em;
}
.onelogbody img.emoji {
    display: inline-block;
    border-radius: 0;
}

span.cemoji img {
    /* カスタム絵文字用 */
    border-radius: 0;
}
/* カスタム絵文字共通装飾 */
.cemoji img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 2em;
   vertical-align: middle;
   border-radius: 0;
}
/* 彰こは絵文字のための上書き装飾 */
.cemoji.ce-icon_kohane img,
.cemoji.ce-icon_akito img {
   max-height: 3em;
}

/* ====================== 記事Noリンクポップアップ */
#popupContent {
    padding: 1em;
    max-width: 600px;
    line-height: 1.2;
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, .9);
    font-size: 1.3rem;
}

/* ====================== クイックポスト・管理用リンク */
:is(.admin_link) label {
    cursor: pointer;
}

:is(.admin_link) a {
    color: var(--main-text-color);
}

.admin_link {
    position: fixed;
    z-index: 11;
    right: 20px;
    bottom: 120px;
}

#open_quickpost,
:is(#open_form, #close_form) span,
#quickpost {
    display: none;
}

#open_form,
.to_adminpage {
    display: grid;
    place-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--button-link-color);
    background-color: var(--wn-blue);
    filter: drop-shadow(0 0 3px rgba(var(--color-bw), 0.3));
}

#open_form::before {
    content: '\e745';
    font-family: var(--icon-font2);
    font-size: 36px;
    font-weight: 600;
}

.to_adminpage {
    margin-bottom: .5em;
    margin-left: auto;
    width: 36px;
    height: 36px;
    color: var(--button-link-color);
    background-color: var(--white);
}

.to_adminpage span {
    display: none;
}

.to_adminpage::before {
    font: 400 32px/1 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
    content: '\e8b8';
    font-size: 24px;
}

#open_quickpost:checked~#quickpost {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    background-color: rgba(0, 0, 0, .6);
}

.postarea {
    margin: 3em auto 0;
    padding: 1em;
    max-width: 100%;
    background-color: #fff;
}

.postform {
    padding: .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);
}

/* ------------------------------------ */
/* ギャラリーモード                     */
/* ------------------------------------ */
.gallery {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px;
    place-content: space-around start;
    border-top: 1px solid var(--onelogbox-border-color);
}

.gallery>div {
    background: #fff;
    position: relative;
    border-radius: 5px;
}

.gellery_header {
    position: relative;
}

.gallery_title a {
    display: block;
    color: var(--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: '\e897';
    display: grid;
    place-content: center;
    height: 100%;
    font-family: var(--icon-font2);
    font-size: 3em;
    font-weight: 700;
}

.one_pictbox .gallery_title a span {
    padding: 1px 3px;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, .7);
    font-size: .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: '\f05b';
    font-family: var(--icon-font2);
    font-weight: 700;
}

.pictcount {
    font-size: 0.8rem;
    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: #efefef;
    background-color: #f32626;
    font-weight: 900;
    transform: rotate(-15deg);
    border-radius: 3px;
}

.pictcount::before {
    margin-right: 2px;
    content: '\e413';
    font-family: var(--icon-font2);
}

.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: .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(30% - 10px);
    }

    .all_pictbox> :is(.embeddedpictbox, .imagelink) {
        max-width: calc(50% - 12px);
    }
}

/* ---------------------------------------------------- */
/* ▼クイックポストフォーム周りはほぼ公式デフォルトです */
/* ---------------------------------------------------- */
textarea.tegalogpost {
    margin-bottom: .25em;
    padding: .5em;
    border: 2px solid;
    width: 100%;
    line-height: 1.3;
    background-color: #fff;
    border-radius: 6px;
}

.line-control {
    margin: .25em 0;
}

.postbutton[type="submit"] {
    font-weight: bold;
    padding: .25em 1em;
}

.postbutton[type="submit"]:hover {
    border: 1px solid green !important;
    color: #fff;
    background-color: #00cc00;
}

/* 掲載領域全体 */
.decoBtns {
    display: inline-block;
    margin-top: .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: .9em;
    padding-top: .5em;
}

.catChecks label {
    display: inline-block;
    cursor: pointer;
    margin: 0 .75em 0 0;
}

.catChecks label:hover {
    text-decoration: underline;
}

.catChecks input {
    min-width: 0;
    min-height: 0;
    margin-right: .2em;
}

#imglistButton,
#closeimglistButton {
    margin: 2px;
    position: relative;
    z-index: 4;
}

table.images th,
table.images td {
    border: 1px solid;
    font-size: .7em;
}

table.images img {
    width: 100px;
    height: auto;
}


.material-symbols-rounded {
    font-size: initial;
    vertical-align: middle;
}


/* 埋め込み画像・動画・Tweet */
.embeddedpictbox {
    display: inline-table;
    border-collapse: collapse;
    position: relative;
}

.embeddedpictbox img {
    border-radius: 5px;
}

.embeddedpictbox figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: .8em;
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    padding: 3px;
    border-radius: 5px 5px 0 0;
}

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

.imagelink {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
}

.imagelink img {
    vertical-align: middle;
    transition: .5s;
}

.imagelink:hover img {
    transform: scale(1.1);
}

/* NSFWフラグ画像 */
.imagelink.nsfw img {
    filter: blur(7px);
}

.imagelink.nsfw::after {
    content: '\e002';
    font-family: var(--icon-font2);
    font-weight: 700;
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    font-size: 2em;
}

.imagesearch:has(.nsfw)::after,
.imagelistitem:has(.nsfw)::after {
    content: '\e002';
    font-family: var(--icon-font2);
    font-weight: 700;
    color: #fff;
    background-color: rgba(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(.8);
}

.imagesearch .oneimage.nsfw {
    filter: blur(3px) grayscale(.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: 3px;
    margin: .3em 0;
    padding: 1em;
    font-size: .8em;
    color: #999;
}

/* 記事リンク埋め込み引用 */
.inQ {
    display: block;
    color: var(--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(--text-color)
}

.decorationD .decorationD {
    display: inline-block;
    position: relative;
}

.decorationD .decorationD {
    text-decoration: none;
}

.decorationD .decorationD::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: .5em;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    top: .6em;
    left: 0;
}

/* E:強調 */
.decorationE {
    text-decoration: underline wavy #900;
    font-style: normal;
    font-weight: bold;
}

/* I:斜体 */
.decorationI {
    font-style: oblique;
}

.decorationI .decorationI {
    transform: skewX(-30deg);
    font-style: normal;
    display: inline-block;
    font-size: .94em;
}

/* Q:引用 */
.decorationQ {
    position: relative;
    margin: 10px auto;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    border: solid 1px var(--onelogbox-border-color);
    display: block;/* ※Ver 2.2.0以降必須の記述 */
}

.decorationQ:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 10px;
    content: "\e244";
    font: 400 32px/1 "Material Symbols Rounded";
    font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
    color: var(--onelogbox-border-color);
}
.decorationQ + br {
    display: none;	/* 引用直後の改行を無効化する */
}

/* S:小文字 */
.decorationS {
    font-size: .8em;
}

/* T:極小文字 */
.decorationT {
    font-size: .6em;
}

/* U:下線 */
/* .decorationU {
    text-decoration-line: underline;
    text-decoration-style: dashed;
} */
/* 画像を横に並べたいとき(横2枚まで) */
.decorationU {
    display: inline-block;
    width: 100%;
    text-align: left;
}
.decorationU .embeddedimage {
}
.decorationU .imagelink {
    position: static;
    max-width: calc(50% - 10px);
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
}

/* リスト */
.decorationL+br {
    display: none;
}

/* code */
.deco-code {
    padding: 0px 3px;
    display: inline-block;
    color: #2a2a2a;
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    font-size: 0.8rem;
    background-color: #eee;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0 3px;
    margin: 0 3px;
}

/* ルビ */


/* 鍵付き投稿 */
.passkeyform {
    display: inline-block;
    margin: 0;
    padding: .6em;
}

.passkeybox,
.passkeyguide {
    display: block;
}

.passkeyinput {
    width: 10em;
    margin: 0 0.25em 3px 0;
}

.passkeyerror,
.nodata,
.nolist {
    margin: 0 0 .2em;
    padding: 3px 3px 3px 13px;
    border: 1px solid #eab2b2;
    display: block;
    color: #900;
    background-color: #fbf0f0;
}

/* ▼検索語のハイライト */
.searchword {
    font-weight: bold;
    color: #000;
    background: linear-gradient(transparent 70%, #ffafdc 30%);
}

/* 文字装飾領域内に含まれた画像を装飾 */
.decorationB img {}

.decorationD img {}

.decorationE img {}

.decorationI img {}

.decorationQ img {}

.decorationS img {}

.decorationT img {}

.decorationU img {}


/* Powered-by表記のデザイン */
footer a {
    color: var(--text-color);
}

.poweredby {
    margin: 2em 1em 0px 1em;
    font-size: 0.75em;
}

/* 続きを読む */
.readmorebutton {
    padding: 2px 4px;
    border: 1px solid;
    font-size: .8em;
}

/* ページトップへ */
nav ul {
    list-style: none;
    padding: 0;
}

.fixed-menu {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 91;
}

.fixed-menu ul {
    margin: 0;
}

.fixed-menu a,
.fixed-menu button,
.fixed-menu span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--theme-color1-default);
}

.fixed-menu a::before,
.fixed-menu button::before,
.fixed-menu span::before {
    font: 400 24px/1 "Material Symbols Rounded";
}

.fixed-menu a::after,
.fixed-menu button::after,
.fixed-menu span::after {
    content: none;
}

.fixed-menu a:hover,
.fixed-menu button:hover {
    color: var(--text-color);
}

.fixed-menu li.pagetop a::before,
.fixed-menu li.pagetop button::before,
.fixed-menu li.pagetop span::before {
    content: "\eacf";
}
.fixed-menu li.pagedown a::before,
.fixed-menu li.pagedown button::before,
.fixed-menu li.pagedown span::before {
    content: "\ead0";
}

/* onelogfooter */
.post_footer {
    text-align: right;
    font-size: 0.8rem;
}

.post_footer .categories:empty {
    display: none;
}

.post_footer span.onelog-cat a {
    margin-right: 0.3em;
    padding: 1px 0.3em;
    background: #efefef;
    color: var(--text-color);
    font-size: 0.8em;
    border: solid 1px #aaa;
    border-radius: 0.3rem;
    line-height: 2.6rem;
    text-decoration: none;
}

.post_footer span.onelog-cat a:hover {
    background: #d3d7df;
    text-decoration-line: none;
}

/* page navigation */
.pagenavi {
    margin: 30px auto;
}

p.pagenums {
    display: flex;
    justify-content: center;
    align-items: center;
}

p.pagenums a.pagenumlink {
    display: block;
    color: #0f0f0f;
    font-family: var(--main-font);
    font-size: 14px;
    height: 45px;
    width: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 45px;
    margin: 0 3px;
}

p.pagenums a.pagenumlink.pagenumhere {
    color: #ccc;
}

p.pagenums a.pagenumlink:hover {
    background: #f1f5f6;
    color: #00A0DF;
}

.comment ul,
.comment ol { padding-left:2em; }

.title-icon{
    font-family: "Material Symbols Rounded";
    font-variation-settings: "FILL"1, "wght"300, "GRAD"0, "opsz"24;
    font-size: 0.8rem;
}

/* 画像を横に並べたいとき(横2枚まで) */
.deco-img{
    display: inline-block;
    width: 100%;
    text-align: left;
}
.deco-img .embeddedimage {
}
.deco-img .imagelink {
    position: static;
    max-width: calc(50% - 10px);
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
}

.deco-end {
    /* 完結マーク */
    margin-left: 0.1em;
    padding: 1px 0.3em;
    background: lightpink;
    color: white;
    border-radius: 2px;
}

/* スクロールボタン ここから */
html{
  scroll-behavior: smooth; // スムーススクロール
}
/* ▼配置 */
.scrollBtns {
    position: fixed; /* ボタンを画面内の指定位置に固定表示する */
    bottom: 1em;     /* 画面の下端から1文字分の距離 */
    right: 1em;      /* 画面の右端から1文字分の距離 */
    max-width: 3em;  /* 最大幅：3文字分 */
}
/* ▼ボタンの装飾 */
.scrollBtns a {
   display: block;         /* ブロック化(全体をクリック可能にするため) */
   margin: 3px 0;          /* 外側の余白：上下→左右 */
   padding: 0.4em 0.3em;   /* 内側の余白：上下→左右 */
   color: white;           /* 文字色：白色 */
   background-color: #aaa; /* 背景色 */
   border-radius: 12px;    /* 角を丸くする：半径12ピクセルで */
   opacity: 0.6;           /* 半透明にする(＝不透明度60％／つまり背後が40％透けて見える) */
   line-height: 1;         /* 行の高さを詰める */
   text-decoration: none;  /* リンクの下線を付けない */
   text-align: center;     /* 文字をセンタリングする */
}
/* ▼マウスが載ったときの装飾変更 */
.scrollBtns a:hover {
   background-color: #ff3366;  /* 背景色 */
}
/* ▼矢印記号 */
.arrow  { display:block; font-size:2em; }  /* 1.5文字分の大きさ */
/* ▼ラベル */
.label { display:block; font-size:0.67em; } /* 0.67文字分の大きさ */
/* スクロールボタン ここまで */