@charset "utf-8";

/*--------------------*/
/*フォント*/
/*--------------------*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");

/*--------------------*/
/*色*/
/*--------------------*/

:root {
    --color__main: #f9f9f9;
    --color__sabu: #edeff1;
    --color__sabu2: #c8ccd0;
    --color__sabu3: #899199;
    --color__sabu4: #4b535b;
    --color__text: #2c3238;
}


/*--------------------*/
/*他変数*/
/*--------------------*/

:root {
    /*基本文字サイズ*/
    /*このサイズを基準に多くのサイズが決まる*/
    --text: 12px;
    /*ページ横幅*/
    --page_width: 50rem;
    /*余白サイズ*/
    --space_xs: 0.25rem;
    --space_s: 0.5rem;
    --space_m: 1rem;
    --space_l: 2rem;
    --space_xl: 4rem;
    /*角丸サイズ*/
    --rounded: 0.25rem;
    /*フォント*/
    --font-family: "Montserrat", "Noto Sans JP", YuGothic, "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;

}


/*--------------------*/
/*ベタ打ち*/
/*--------------------*/

* {
    /*簡易リセットCSS*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*その他CSS*/
    line-height: 2em;
}

html {
    font-family: var(--font_family);
    font-size: var(--text);
    color: var(--color__text);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color__main);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1em;
    margin: 0 0 0.5em;
    font-weight: bold;
}

h1 {
    text-align: center;
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.15rem;
}

h6 {
    font-size: 1.10rem;
}

small {
    font-size: 0.75rem;
}

a {

    color: var(--color__sabu3);
    text-decoration: underline dotted;

    &:visited {
        color: var(--color__sabu3);
    }

    &:hover {
        filter: brightness(0.9);
    }

}

img {
    /*画像下の空白が無くなる*/
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

ul, ol {
    /*リストがボックス内に収まる*/
    list-style-position: inside;
    /*改行したとき、行頭が「・」の右側で揃う*/
    padding-left: 1em;
    text-indent: -1em;
}

audio {
    /*line-heightの代用*/
    margin: 1rem 0;
}

strong {
    /*てがろぐ本体で生成される注意書きのデザインを変更*/
    color: var(--color__text);
    line-height: 2em;
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__sabu);
}

input[type=text], input[type=button], input[type=submit], input[type="file"], textarea, select {
    font-family: var(--font_family);
    color: var(--color__text);
}

input[type=button], input[type=submit], input[type="file"], select {
    padding: calc(var(--space_xs) / 2) var(--space_xs);
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);

    &:hover {
        filter: brightness(0.95);
    }

}

input[type=text] {
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);
}

input[type=button], input[type=submit] {

    &:hover {
        cursor: pointer;
    }
}

input[type="file"] {

    &:hover {
        cursor: pointer;
    }
}

textarea {
    padding: var(--space_m);
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);
}

hr {
    margin: var(--space_l) 0;
    border: none;
    border-top: var(--color__sabu2) 1px solid;
}

/*--------------------*/
/*ページサイズ*/
/*--------------------*/

header, main, nav.tools, footer {
    width: min(var(--page_width), calc(100% - 1rem));
}

/*--------------------*/
/*ヘッダー*/
/*--------------------*/

header {
    padding: var(--space_l);
    text-align: center;

    .site_title {
        color: var(--color__sabu4);

        * {
            color: var(--color__sabu4);
            text-decoration: none;
        }

    }

    .sub_title {
        font-size: 1rem;
        color: var(--color__sabu2);
    }

}

/*--------------------*/
/*メイン*/
/*--------------------*/

/*簡易投稿エリア*/

.postarea {
    width: 100%;
}

.tegalogpost {
    width: 100%;
    min-height: 10rem;
}

.line-control {
    margin-top: var(--space_s);
    margin-bottom: var(--space_xl);
}

.line-control span {
    margin-top: var(--space_xs);
}

input[type=submit].postbutton {
    padding: var(--space_s) var(--space_m);
    border-radius: calc(var(--space_s) * 3) / 50%;
}

.hashtagEasyInput {
    margin-right: var(--space_xs);
}

.changelink {
    display: none;
}

.decoBtns input[type=button] {
    margin-right: var(--space_xs);
}

.catChecks label {
    margin-right: var(--space_xs);
    font-size: 0.75rem;
}

/*データセパレータ*/

.dateseparator {
    display: none;
}

/*記事*/

article.post {
    position: relative;
    margin: calc(var(--space_xl) * 2) 0;

    &:first-of-type {
        margin-top: 0;
    }

    &:last-of-type {
        margin-bottom: 0;
    }

    .header {
        display: flex;
        justify-content: right;
        gap: var(--space_m);
    }

    .footer {
        display: flex;
        justify-content: right;
        gap: var(--space_m);
    }

    .postdate {
        font-weight: bold;
    }

}

/*固定投稿*/

.fixed {
    display: none;
}

.logstatus-fixed {

    .fixed {
        display: block;
        position: absolute;
        top: -1.25rem;
        right: 0;
        color: var(--color__sabu2);
    }

    & .material-symbols-outlined {
        font-size: 1.25rem;
        color: var(--color__sabu2);
    }

}

/*鍵付き投稿*/

.passkeybox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space_s);
    margin-bottom: var(--space_s);

    .passkeyguide, .passkeyinput, .submitcover {
        display: block;
        line-height: 1em;
    }

    .passkeyguide {
        width: 100%;
    }

    .passkeyinput {
        width: min(18rem ,100%);
        padding: var(--space_s);
        font-size: 1rem;
    }

    .passkeysubmit {
        padding: calc(var(--space_xs) / 2) var(--space_m);
    }

}

.locked {
    display: none;
}

.logstatus-lock {

    .locked {
        display: block;
        position: absolute;
        top: -1.25rem;
        right: 0;
        color: var(--color__sabu2);
    }

    & .material-symbols-outlined {
        font-size: 1.25rem;
        color: var(--color__sabu2);
    }
}

/*ページリスト*/

.pagenavi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: var(--space_m);
    margin: var(--space_xl) 0;

    .prev {
        text-align: right;
    }

    .pagelist {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space_s);

        a {
            display: block;
            width: 3rem;
            aspect-ratio: 1 / 1;
            padding: 1rem 0;
            box-sizing: border-box;
            overflow-x: visible;
            line-height: 1em;
            text-align: center;
            text-decoration: none;
            border-radius: 50%;
            border: var(--color__main) 1px solid;
        }

        a:hover {
            border: var(--color__sabu2) 1px solid;
        }

        .pagenumhere {
            background-color: var(--color__sabu);
        }

        .omitted {
            color: var(--color__sabu2);
        }

    }

    .next {
        text-align: left;
    }

}

/*個別投稿ページ*/

.utilitylinks {
    display: none;

    & ul {
        list-style: none;
    }

}

/*--------------------*/
/*ナビゲーション*/
/*--------------------*/

/*てがろぐの各種機能をナビゲーションとしてまとめている*/

nav.tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space_xl);
    margin-bottom: var(--space_xl);

    .title {
        .site_title {
            font-size: 1.25rem;
            font-weight: bold;
            text-decoration: none;
            color: var(--color__text);

        }

        .sub_title {
            font-size: 0.75rem;
        }

    }

    .other {
        display: flex;
        flex-direction: column;
        gap: var(--space_l);
    }

    & h2 {
        font-size: 1rem;
    }

    & ul {
        list-style: none;

        .num {
            display: none;
        }
    }
}

/*検索*/

.search {

    .searchbox {
        line-height: 1em;
    }

    & span.searchinputs {
        display: flex;
        gap: var(--space_s);

        > * {
            display: block;
            flex-grow: 1;

            > * {
                display: block;
                width: 100%;
            }

        }

    }

}

/*複合検索*/

.complexsearch {
    
    & p.searchbox {
        display: flex;
        gap: var(--space_s);
        margin-bottom: var(--space_s);

        > * {
            display: block;
            flex-grow: 1;

            > * {
                display: block;
                width: 100%;
            }

        }
    }

    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--space_s);
        list-style: none;
    }

}

/*カレンダー*/

div.calendar {
    & table.calendar {
        width: 100%;
        text-align: center;
    }

}

/*新着画像*/

.imagelist {

    .list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space_s);
    }

    .imagelistitem {
        display: block;
        width: calc((100% - var(--space_s))/2);
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 0.25rem;

        & a {
            display: block;
            width: 100%;
            height: 100%;
        }

        & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}

/*カテゴリー*/

.categoryarea {
    column-count: 2;

    ul {
        padding-left: 0;
        text-indent: 0;
        list-style: none;
    }

}

/*ハッシュタグ*/
.hashtag {
    ul {
        padding-left: 0;
        text-indent: 0;
        list-style: none;
    }

    ul.hashtaglist {
        li {
            display: inline-block;
            margin-right: var(--space_m);
        }

        li:last-child {
            margin-right: 0;
        }

    }

    .taglink {

        &::before {
            /*ハッシュタグ表示*/
            content: "#";
        }

    }
}

/*最近の投稿*/

.latestpostlist {
    padding-left: 0;
    text-indent: 0;

    .username {
        display: none;
    }

}

/*--------------------*/
/*フッター*/
/*--------------------*/

footer {
    display: flex;
    justify-content: center;
    padding-top: var(--space_m);

    .settings {
        font-size: 1rem;
        
        a {
            text-decoration: none;
        }
    }

}

/*--------------------*/
/*汎用装飾*/
/*--------------------*/

/* B:太字(Bold) */
.decorationB {
    font-weight: bold;
}

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

/* E:強調(Emphasis) */
.decorationE {
    background:linear-gradient(transparent 60%, var(--color__sabu2) 40%);
}

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

/* Q:引用(Quote) */
.decorationQ {
    margin: var(--space_m) 0;
    padding: var(--space_m);
    border: var(--color__sabu2) 1px solid;
    border-radius: var(--rounded);
    background-color: var(--color__sabu);
}

.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: underline var(--color__text);
}

/*続きを読む*/
.readmorebutton {
    display: block;
    width: fit-content;
    padding: var(--space_xs) var(--space_m);
    text-decoration: none;
    font-size: 1rem;
    border: var(--color__sabu2) 1px solid;
    border-radius: calc(1rem + var(--space_xs));
}

/*続きを読む（閉じるボタン）*/
/*
.readmoreclose {

}
*/

/*リスト*/

.decorationL {
    & + br {
        display: none;
    }
}

dl.decorationL {
    & dd {
        padding-left: 2rem;
    }
}

/*--------------------*/
/* 埋め込み画像 */
/*--------------------*/

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

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

img.nsfw {
    filter: blur(15px); /* ぼかす */
}
  
.imagelink {
    display: inline-block;
    overflow: hidden;
}

.embeddedpictbox {

    margin-bottom: var(--space_s);
    line-height: 1em;

    &:last-child {
        margin-bottom: 0;
    }

    /*
    .imagelink  {
    }
    */

    & figcaption{
        font-size: 0.75rem;
    }

    & + br {
        display: none;
    }
}

/*--------------------*/
/*レスポンシブ*/
/*--------------------*/

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

    .pagenavi {
        .prev > *, .next > * {
            display: none;
        }
    }

    nav.tools {
        grid-template-columns: none;
        grid-template-rows: auto;
    }

}

/*--------------------*/
/*自由装飾（画像複数カラム化）*/
/*--------------------*/

.deco-2column, .deco-3column, .deco-2column_m, .deco-3column_m {
    .imagelink {
        display: block;
    
        & + br {
            display: none;
        }
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*画像の二カラム化*/

.deco-2column {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_m) var(--space_s);
    margin-top: var(--space_s);

    & .imagelink {
        max-width: calc((100% - var(--space_s))/2);
        margin: 0;
        height: fit-content;
    }

    & .embeddedpictbox {
        max-width: calc((100% - var(--space_s))/2);
        margin: 0;
        height: fit-content;
        
        & .imagelink {
            max-width: 100%;
        }
    }
}

/*画像の三カラム化*/

.deco-3column {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_m) var(--space_s);
    margin-top: var(--space_s);

    & .imagelink {
        max-width: calc((100% - 1rem)/3);
        margin: 0;
        height: fit-content;
    }

    & .embeddedpictbox {
        max-width: calc((100% - 1rem)/3);
        margin: 0;
        height: fit-content;

        & .imagelink {
            max-width: 100%;
        }
    }
    
}

/*二カラムmasonry版（敷き詰めるようなデザイン）*/
/*異なる画像幅の画像を並べるときはこちらを推奨*/

.deco-2column_m {
    display: block;
    column-count: 2;
    margin-top: var(--space_s);

    & .imagelink {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);
    }

    & .embeddedpictbox {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);

        .imagelink  {
            margin: 0;
        }
    }
}

/*三カラムmasonry版*/

.deco-3column_m {
    display: block;
    column-count: 3;
    margin-top: var(--space_s);

    & .imagelink {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);
    }

    & .embeddedpictbox {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);

        .imagelink  {
            margin: 0;
        }
    }
}

/*--------------------*/
/*その他*/
/*--------------------*/

.url {
    /*ＵＲＬがボックスから食み出ないように設定。*/
    /*ＵＲＬがボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    word-break: break-all;
}

.embeddedmovie{
    /*動画がボックスから食み出ないように設定。*/
    /*動画がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    display: block;
    max-width:100%;
}

.embeddedmovie iframe{
    /*埋め込みコンテンツ（動画）がボックスから食み出ないように設定。*/
    /*埋め込みコンテンツ（動画）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    display: block;
    max-width:100%;
}

iframe.instagram-media {
    /*埋め込みコンテンツ（インスタ）がボックスから食み出ないように設定*/
    /*埋め込みコンテンツ（インスタ）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    max-width: 100% !important;
    min-width: initial !important;
}

.embeddedmusic iframe {
    /*埋め込みコンテンツ（音声）がボックスから食み出ないように設定。*/
    /*埋め込みコンテンツ（音声）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    max-width: 100% !important;
    min-width: initial !important;
}