@charset "UTF-8";
/*
Theme Name: MofMof2026
Author: FOLORO
Description: もふもふ.jp用テーマです（MofMof2021 をブロックテーマ / フルサイト編集に移行したもの）
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: mofmof2026
*/

/*
  フォントの @font-face と色・フォントファミリーは theme.json で定義しています。
  ここではブロックのマークアップに合わせた見た目のみを扱います。
 */

:root {
    --mofmof-color-blue: var(--wp--preset--color--blue);
    --mofmof-color-lightblue: var(--wp--preset--color--lightblue);
    /* 好きな時間ダイヤル（夕日・黄金の時間をイメージした琥珀系） */
    --time-dial-accent: var(--wp--preset--color--amber);         /* 発光ドット */
    --time-dial-accent-ink: var(--wp--preset--color--amber-ink); /* 白い文字盤上のラベル文字 */
    --time-dial-glow: rgba(245,158,11,0.75);
}

/* 好きな時間ダイヤルの発光アニメーション */
@keyframes dialPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 8px 2px var(--time-dial-glow);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 18px 7px var(--time-dial-glow);
    }
}
@media (prefers-reduced-motion: reduce) {
    .time-dial__tick.is-favorite {
        animation: none;
        box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 12px 4px var(--time-dial-glow);
    }
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

/*
  58 bytes of CSS to look great nearly everywhere
  https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
 */
html {
    max-width: 70ch;
    padding: 0 1em;
    margin: auto;
    line-height: 1;
    font-size: 1em;
}

main {
    max-width: 46rem;
    margin: auto;
}

h1,h2,h3,h4,h5,h6 {
    margin: 1rem 0;
}

p,ul,ol {
    margin-bottom: 1rem;
}

/*
  もふもふ.jp
 */
a {
    text-shadow: 1px 1px 2px var(--mofmof-color-lightblue);
}

/* ヘッダー（parts/header.html） */
.site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-style: normal;
    font-weight: 200;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    line-height: 1em;
    > .wp-block-navigation {
        justify-content: flex-end;
        padding-right: 0.5rem;
        color: rgba(146,146,146,1.00);
        a {
            vertical-align: middle;
        }
    }
    .site-logo {
        padding-left: 0.5rem;
        box-sizing: content-box;
        border: none;
        text-overflow: clip;
        .wp-block-site-title {
            margin: 0;
            font-size: inherit;
        }
        a {
            font-weight: bold;
            color: #f1f1f1;
            letter-spacing: 0.05em;
            transition: letter-spacing 2s;
            display: inline-block;
            vertical-align: middle;
            text-shadow: 2px 2px 6px rgba(46,46,46,0.46), -2px -2px 5px rgba(246,246,246,0.46), 0 0 20px rgba(254,252,201,1.0), -5px -5px 10px rgba(255,255,255,0.9), 5px 5px 10px rgba(255,255,255,0.9), 1px 1px 1px rgba(46,46,46, 0.8);
            &:hover {
                letter-spacing: 0.1em;
                transition: letter-spacing .8s;
            }
        }
    }
}

.site-content {
    .main-content {
        h1,
        h2,
        h3,
        h4 {
            letter-spacing: -0.02rem;
            margin-bottom: 0.5rem;
            line-height: 1.86rem;
        }
        h1 { font-size: 1.5rem; }
        h2 { font-size: 1.4rem; }
        h3 { font-size: 1.3rem; }
        h4 { font-size: 1.2rem; }
        img {
            width: 100%;
            height: auto;
            margin-bottom: 2em;
        }
        p {
            color: #464646;
            font-style: normal;
            font-weight: 200;
            line-height: 1.46rem;
        }
        /* 本文中のリスト
           Safari は項目が複数行になるとマーカーを上下中央に置いてしまうため、
           マーカーは ::before で描画して常に一行目へ固定する */
        ul,
        ol {
            --mofmof-list-indent: 1.4em;
            margin-top: 1.5em;
            margin-bottom: 1.5em;
            padding-left: var(--mofmof-list-indent);
            list-style: none;
        }
        ol {
            --mofmof-list-indent: 1.8em;
            counter-reset: mofmof-list;
        }
        li {
            --mofmof-list-line: 1.86rem;
            --mofmof-list-marker: 0.35em;
            position: relative;
            margin-left: 0;
            padding-left: 0.25em;
            font-weight: 200;
            line-height: var(--mofmof-list-line);
            overflow-wrap: break-word;
            + li {
                margin-top: 0.4em;
            }
            /* 入れ子のリスト */
            > ul,
            > ol {
                margin-top: 0.4em;
                margin-bottom: 0;
            }
        }
        /* 黒丸（一行目の中央に配置） */
        ul > li::before {
            content: "";
            position: absolute;
            top: calc((var(--mofmof-list-line) - var(--mofmof-list-marker)) / 2);
            right: 100%;
            margin-right: calc(var(--mofmof-list-marker));
            width: var(--mofmof-list-marker);
            height: var(--mofmof-list-marker);
            border-radius: 50%;
            background-color: currentColor;
        }
        /* 入れ子は 白丸 → 四角 */
        ul ul > li::before {
            background-color: transparent;
            box-shadow: inset 0 0 0 1px currentColor;
        }
        ul ul ul > li::before {
            border-radius: 0;
            background-color: currentColor;
            box-shadow: none;
        }
        /* 連番（一行目のベースラインに揃える） */
        ol > li {
            counter-increment: mofmof-list;
        }
        ol > li::before {
            content: counter(mofmof-list) ".";
            position: absolute;
            top: 0;
            right: 100%;
            margin-right: 0.35em;
            font-family: var(--wp--preset--font-family--lato);
            font-size: 0.9em;
            line-height: var(--mofmof-list-line);
        }
        pre {
            line-height: 1rem;
            background-color: rgba(46, 46, 46, 0.046);
            padding: 1rem;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        table {
            width: auto;
            margin-bottom: 2em;
            th {
                padding: 8px 15px;
                background: #eee;
                font-weight: bold;
                border-bottom:1px solid #aaa;
                line-height: 1.2em;
                text-align: center;
            }
            tr {
                background: rgba(255,255,255,0.46);
                &:nth-child(2n+1) {
                    background: rgba(255,255,255,0.46);
                }
                &:hover {
                    background: #eee;
                }
                td {
                    padding: 8px 15px;
                    text-align: center;
                }
            }
            td ul li{
                text-align: left;
            }
        }
        .page-header {
            border-radius: 2.4px;
            background-color: rgba(255,255,255,0.46);
            margin-bottom: 1rem;
        }
        .page-title {
            padding: 1rem;
            margin: 0;
        }

        /* About me */
        .aboutme_content {
            margin-bottom: 0;
            ul {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25em 1.25em;
                padding-left: 0;
                margin-bottom: 2rem;
                &:last-child {
                    margin-bottom: 0;
                }
                li{
                    list-style: none;
                    padding: 0.5em 0;
                    margin-top: 0;
                    text-shadow: 0 0 2px #ffffff;
                    &::before {
                        content: none;
                    }
                }
            }
        }
        .about{
            background-image: url(assets/images/me.webp);
            background-repeat: no-repeat;
            background-position: right 86%;
            background-size: contain;
        }

        /* Hardware */
        .hardware_content {
            margin-bottom: 2rem;
            &:last-child {
                margin-bottom: 0;
            }
        }

        /* Device */
        .device_content {
            .device-thumbnail {
                img {
                    display: block;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    max-width: 100%;
                }
            }
        }

        /* Software */
        .software_content {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            clear: both;
            float: none;
            ul {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25em 1.25em;
                padding-left: 0;
                li{
                    list-style: none;
                    padding: 0.5em 0;
                    margin-top: 0;
                    &::before {
                        content: none;
                    }
                }
            }
            a img,
            &:last-child {
                margin-bottom: 0;
            }
        }
        .appDescription {
            display: inline-block;
            vertical-align: top;
            margin-right: 4rem;
        }
        .appDescription:last-child {
            margin-right: 0;
        }
    }
    .page-description {
        min-width:100%;
        height: 4rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 8px 32px 0 rgba(253,228,196,1.00);

        h2 {
            margin: 0;
            color: rgba(0, 0, 0, 0.2);
            font-size: 2rem;
            letter-spacing: -0.18em;
        }
    }

    /* サイドバー（parts/sidebar.html） */
    .site-sidebar {
        background-color: rgba(246,246,246,0.46);
        padding-bottom: 1rem;
        &:hover {
            background-color: rgba(255,255,255,0.86);
            box-shadow: 0 0 30px rgba(253,228,196,1.00);
            transition: all .46s;
        }
        /* 画面幅が広いときは検索と月別アーカイブを横並びにする */
        @media screen and (min-width: 770px) {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem 1rem;
            .searchArea {
                flex: 1 1 auto;
            }
            .archiveArea {
                flex: 0 0 auto;
            }
            .blog_sidebar {
                flex: 0 0 100%;
            }
        }
        .blog_sidebar {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            flex-direction: row;
        }
        ul {
            padding: 0;
        }

        .widget_categories {
            flex: 1;
            li {
                display: inline-block;
                line-height: 1.86rem;
                margin-right: 0.5rem;
            }
        }
        .widget_tagcloud {
            flex: 100%;
            .wp-block-tag-cloud {
                margin-bottom: 0;
            }
            a {
                display: inline-block;
                line-height: 1.86rem;
                margin-right: 1rem;
            }
        }
        /* Archives */
        .archiveArea {
            text-align: right;
            /* 検索ボックスと同じピル型（右端の丸ボタンは矢印） */
            select {
                height: 44px;
                max-width: 100%;
                padding: 0 52px 0 1.1rem;
                border: 0;
                border-radius: 999px;
                appearance: none;
                -webkit-appearance: none;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='rgb(46,140,236)'/%3E%3Cpath d='M13 16l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 36px 36px, rgba(255,255,255,0.72);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 4px 18px rgba(253,228,196,0.9);
                color: var(--wp--preset--color--text);
                font-family: var(--wp--preset--font-family--noto-serif-jp);
                font-size: 0.9rem;
                letter-spacing: 0.04em;
                cursor: pointer;
                outline: none;
                transition: background-color .3s, box-shadow .3s;
                &:hover {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='rgb(26,117,193)'/%3E%3Cpath d='M13 16l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 36px 36px, rgba(255,255,255,0.86);
                }
                &:focus {
                    background-color: #fff;
                    box-shadow: inset 0 0 0 1px var(--mofmof-color-lightblue), 0 0 0 4px rgba(135,187,241,0.25), 0 6px 24px rgba(253,228,196,1.00);
                }
            }
            optgroup {
                option{
                    padding-right: 1.5em;
                }
                &.archiveYear::after {
                    content:" ";
                }
            }
        }
    }
    .page-content,
    .home_blog_news {
        margin-top: 0;
    }
}

.main-content .content_card {
    padding: 1rem;
    border-radius: 24px;
    background-color: rgba(255,255,255,0.86);
    box-shadow: 0 0 30px rgba(253,228,196,1.00);
    margin-bottom: 5rem;
}

.content_box {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 12px;
    background-color: rgba(246,246,246,0.86);
    overflow:hidden;
    transition: background-color .4s, box-shadow .4s, margin .3s;
    margin-top: 100px;
    padding-top: 32px;
}

/* Hardware / Device のカード */
.deviceCards,
.device-pagination {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.deviceCards {
    margin-top: 1rem;
}
.device-pagination {
    margin: 1.5rem 0;
}
.main-content .deviceDescription,
.main-content .device-pagination__card {
    border-top: 3px solid var(--mofmof-color-blue);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    img {
        display: block;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        width: calc(100% + 2.5rem);
        max-width: none;
        margin: -1rem -1.25rem 0;
        flex-shrink: 0;
    }
    h3 {
        margin: 0;
        font-size: 1.05rem;
        color: var(--mofmof-color-blue);
    }
    p {
        margin: 0;
    }
}
.main-content .deviceDescription .deviceParts {
    margin-top: auto;
    font-size: 0.85rem;
    opacity: 0.7;
}
.main-content .device-pagination__card p {
    font-size: 0.9rem;
}

/* 好きな時間 — 24時間ダイヤル（blocks/time-dial） */
.time-dial {
    display: flex;
    justify-content: center;
    margin: 1rem 0 2.5rem;
}
.time-dial__ring {
    position: relative;
    width: min(320px, 78vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* 上=0時(夜) → 右=6時(夜明け) → 下=12時(昼) → 左=18時(夕暮れ) */
    background: conic-gradient(from 0deg,
        #1b2450 0%,
        #3b4a86 12%,
        #ff9e6d 25%,
        #cfe6ff 35%,
        #cfe6ff 50%,
        #cfe6ff 65%,
        #ff9e6d 75%,
        #3b4a86 88%,
        #1b2450 100%);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.25), 0 6px 18px rgba(0,0,0,0.18);
    &::before {
        /* 内側の文字盤 */
        content: "";
        position: absolute;
        inset: 12%;
        border-radius: 50%;
        background: rgba(255,255,255,0.92);
        box-shadow: inset 0 0 12px rgba(0,0,0,0.08);
    }
}
.time-dial__tick {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.75);
    transform: translate(-50%, -50%);
    z-index: 2;
}
.time-dial__tick.is-favorite {
    width: 16px;
    height: 16px;
    background: var(--time-dial-accent);
    animation: dialPulse 2.4s ease-in-out infinite;
    animation-delay: calc(var(--h) * -0.13s);
}
.time-dial__label {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--time-dial-accent-ink);
    text-shadow: 0 0 4px #fff, 0 0 4px #fff;
    small {
        font-size: 0.7em;
        font-weight: 400;
    }
}
.time-dial__icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 1.2rem;
    line-height: 1;
}
.time-dial__icon--night { top: 3%; }
.time-dial__icon--day   { bottom: 3%; }
.time-dial__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    font-family: var(--wp--preset--font-family--lato);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: rgba(0,0,0,0.32);
    pointer-events: none;
}

/* 検索ボックス（core/search） */
.wp-block-search {
    max-width: 24rem;
}
.wp-block-search .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 4px 4px 1.1rem;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 4px 18px rgba(253,228,196,0.9);
    transition: background-color .3s, box-shadow .3s;
    &:hover {
        background-color: rgba(255,255,255,0.86);
    }
    &:focus-within {
        background-color: #fff;
        box-shadow: inset 0 0 0 1px var(--mofmof-color-lightblue), 0 0 0 4px rgba(135,187,241,0.25), 0 6px 24px rgba(253,228,196,1.00);
    }
}
.wp-block-search .wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--noto-serif-jp);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    outline: none;
    &::placeholder {
        color: var(--wp--preset--color--muted);
        font-family: var(--wp--preset--font-family--lato);
        letter-spacing: 0.12em;
    }
}
.wp-block-search .wp-block-search__button {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--mofmof-color-blue);
    /* ボタンの文字（検索）は読み上げ用に残してアイコンだけを見せる */
    color: transparent;
    font-size: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        background-color: #fff;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat center / contain;
    }
    &:hover {
        background-color: rgb(26,117,193);
        transform: scale(1.06);
    }
    &:focus-visible {
        outline: 2px solid var(--mofmof-color-blue);
        outline-offset: 2px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wp-block-search .wp-block-search__inside-wrapper,
    .wp-block-search .wp-block-search__button {
        transition: none;
    }
}

.footerbar {
    height: 2rem;
    text-align: right;
    color: rgba(255,255,255,0.86);
    clear: both;
    font-size: 0.8rem;
    padding: 0.46rem 0;
    p {
        margin: 0;
    }
}

.notOnDesktop {
    display: none;
}

/* リンクの下線アニメーション */
.site-header .wp-block-navigation a {
    color: rgba(146,146,146,1.00);
    text-decoration: none;
    overflow: visible;
}
.site-header .wp-block-navigation a,
.main-content .content_card a,
.main-content .home_blog_news .news a {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    transform: translateZ(0px);
    display: inline-block;
}
.site-header .wp-block-navigation a::before,
.main-content .content_card a::before,
.main-content .home_blog_news .news a::before {
    background: var(--mofmof-color-lightblue) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 100%;
    transition-duration: 0.2s;
    transition-property: right;
    transition-timing-function: ease-out;
    z-index: -1;
}
.site-header .wp-block-navigation a:is(:hover, :focus, :active)::before,
.main-content .content_card a:is(:hover, :focus, :active)::before,
.main-content .home_blog_news .news a:is(:hover, :focus, :active)::before {
    right: 0;
}
/* カード型リンクには下線アニメーションを付けない */
.main-content .content_card a.deviceDescription::before,
.main-content a.device-pagination__card::before {
    content: none;
}
.main-content .entry-meta a {
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* ページナビ（core/query-pagination） */
.screen-reader-text{
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    width: 1px;
}
.wp-block-query-pagination {
    background-color: rgba(255,255,255,0.46);
    text-align: center;
    justify-content: center;
    position: relative;
    min-height: 64px;
    margin: 0;
    .current {
        font-size: 1.4em;
    }
    .page-numbers {
        display: inline-block;
        line-height: 64px;
        padding: 0 10px;
    }
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    width: 64px;
    height: 64px;
    line-height: 64px;
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 32px;
    padding: 0;
    margin: 0 !important;
    &::before {
        display: inline-block;
        position: relative;
        width: 64px;
        height: 64px;
        text-align: center;
    }
}
.wp-block-query-pagination-previous {
    left: 0;
    &::before {
        content: "<";
    }
}
.wp-block-query-pagination-next {
    right: 0;
    &::before {
        content: ">";
    }
}

/* 前後の記事（core/post-navigation-link） */
.post-navigation {
    background-color: rgba(255,255,255,0.46);
    .nav-next a,
    .nav-previous a {
        padding: 5% 10%;
        text-align: left;
        display: block;
        transition: background 0.2s ease-in-out 0s;
        &:hover {
            background-color: rgba(255,255,255,0.46);
        }
    }
    .nav-previous {
        border-bottom: solid 1px rgba(0,0,0,0.28);
    }
    .post-navigation-link__title {
        display: block;
    }
}

/* メタ情報 */
.entry-meta {
    line-height: 2em;
    font-size: 0.8rem;
    a {
        color: rgba(46,46,46,1.00);
    }
    > * {
        display: inline;
    }
}

.entry-date,
.cat-links,
.tag-links {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 400;
    color: rgba(146,146,146,1.00);
    padding: 0 5px;
    line-height: 1em;
}
.entry-date {
    padding: 0 0.4rem 0 0;
}

.wp-block-post-terms__prefix {
    vertical-align: middle;
}

.main-content {
    .cat-links a,
    .tag-links a {
        margin-right: 0.8rem;
    }
    .cat-links > a:last-of-type,
    .tag-links > a:last-of-type {
        margin-right: 0;
    }
}

/* TOPページの新着記事（templates/front-page.html） */
.site-content .main-content .home_blog_news {
    padding-bottom: 1rem;
    > header h1 {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 1rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        &::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, var(--mofmof-color-lightblue), transparent);
        }
    }
    .news {
        display: grid;
        grid-template-columns: 4.5rem 1fr;
        gap: 0 1.25rem;
        align-items: start;
        padding: 1.25rem 1rem;
        border-radius: 12px;
        transition: background-color .3s, box-shadow .3s;
        &:hover {
            background-color: rgba(255,255,255,0.86);
            box-shadow: 0 4px 24px rgba(253,228,196,1.00);
        }
    }
    .wp-block-post-template > li + li .news {
        /* 記事の区切り線（ホバー中のカードとは重ならないよう内側に引く） */
        background-image: linear-gradient(to right, transparent, rgba(46,46,46,0.12) 15%, rgba(46,46,46,0.12) 85%, transparent);
        background-size: 100% 1px;
        background-repeat: no-repeat;
        &:hover {
            background-image: none;
        }
    }
    .wp-block-post-template > li:hover + li .news {
        background-image: none;
    }

    /* 日付 */
    .news-date {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
        font-family: var(--wp--preset--font-family--lato);
        color: var(--wp--preset--color--muted);
        text-align: center;
        a {
            color: inherit;
            text-shadow: none;
        }
    }
    .news-date__monthday {
        font-size: 0.7rem;
        line-height: 1;
        letter-spacing: 0.02em;
    }
    .news-date__year {
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--mofmof-color-lightblue);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    /* タイトル・抜粋 */
    .news-body {
        min-width: 0;
    }
    .news-body h2 {
        margin: 0 0 0.4rem;
        font-size: 1.2rem;
        line-height: 1.6rem;
    }
    .news-excerpt {
        margin: 0 0 0.6rem;
        p {
            margin: 0;
            font-size: 0.85rem;
            line-height: 1.4rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .wp-block-post-excerpt__more-text {
            display: none;
        }
    }

    /* カテゴリー・タグ */
    .entry-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        line-height: 1;
    }
    .cat-links,
    .tag-links {
        display: contents;
        a {
            margin: 0;
            padding: 0.3rem 0.65rem;
            border-radius: 999px;
            font-size: 0.72rem;
            text-shadow: none;
            transition: background-color .2s, color .2s;
            &::before {
                content: none;
            }
        }
    }
    .cat-links a {
        background-color: var(--mofmof-color-blue);
        color: #fff;
        &:hover {
            background-color: rgb(26,117,193);
        }
    }
    .tag-links a {
        background-color: rgba(255,255,255,0.7);
        box-shadow: inset 0 0 0 1px var(--mofmof-color-lightblue);
        color: rgba(46,46,46,0.8);
        &:hover {
            background-color: var(--mofmof-color-lightblue);
            color: #fff;
        }
        &::before {
            content: "#";
            position: static;
            background: none;
            height: auto;
            margin-right: 0.1em;
            opacity: 0.6;
        }
    }
    .wp-block-post-terms__separator {
        display: none;
    }

    /* 記事一覧へ */
    .news-more {
        margin: 0.75rem 0 0;
        text-align: right;
        a {
            font-family: var(--wp--preset--font-family--lato);
            font-size: 0.85rem;
            letter-spacing: 0.08em;
            &::after {
                content: " →";
                display: inline-block;
                transition: transform .2s;
            }
            &:hover::after {
                transform: translateX(4px);
            }
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-content .main-content .home_blog_news .news,
    .site-content .main-content .home_blog_news .news-more a::after {
        transition: none;
    }
}

/* Tablet view */
@media screen and (max-width:769px){
    .notOnDesktop {
        /* Search box shown only in mobile view and Tablet view */
        display: block;
        padding-right: 0;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 100%;
    }
    .notOnDesktop .wp-block-search {
        max-width: none;
    }

    .main-content {
        padding-top: 0;
        .content_card {
            padding-top: 10px;
            margin-bottom: 2.5rem;
        }
        .aboutme_content {
            margin-bottom: 0;
        }
    }
    .site-content .main-content {
        ul,
        ol {
            --mofmof-list-indent: 1.25em;
            margin-top: 1.25em;
            margin-bottom: 1.25em;
        }
        ol {
            --mofmof-list-indent: 1.7em;
        }
    }

    .site-content .site-sidebar {
        margin-top: 2.5rem;
        .searchArea {
            display: none;
        }
        .blog_sidebar {
            flex-direction: column;
        }
    }
    .site-header {
        width: 100%;
    }
}

/* Mobile view */
@media screen and (max-width:480px){
    html {
        padding: 0 0.5em;
    }
    .site-header {
        .site-logo {
            margin-bottom: 0.5rem;
        }
        > .wp-block-navigation {
            justify-content: center;
            .wp-block-navigation__container {
                justify-content: center;
            }
            border-radius: 2.4px;
            background-color: rgba(255,255,255,0.46);
            width: 100%;
            padding: 0.75rem 0;
        }
    }

    .site-content .main-content .home_blog_news {
        .news {
            grid-template-columns: 3.4rem 1fr;
            gap: 0 0.9rem;
            padding: 1rem 0.75rem;
        }
        .news-excerpt {
            display: none;
        }
        .tag-links {
            display: none;
        }
    }

    .site-content .main-content {
        ul,
        ol {
            --mofmof-list-indent: 1.1em;
            margin-top: 1.25em;
            margin-bottom: 1.25em;
        }
        ol {
            --mofmof-list-indent: 1.6em;
        }
        li {
            --mofmof-list-line: 1.75rem;
            padding-left: 0.15em;
            + li {
                margin-top: 0.5em;
            }
        }
    }

    .site-content .notOnDesktop {
        padding-left: 0;
        padding-right: 0;
    }
    .appDescription {
        margin-right: 0;
    }
}

/* 記事一覧（core/post-template）は ul/li で出力されるため本文リストの装飾を打ち消す */
.site-content .main-content .wp-block-post-template {
    margin: 0;
    padding: 0;
    > li {
        padding: 0;
        font-weight: inherit;
        line-height: inherit;
        &::before {
            content: none;
        }
        + li {
            margin-top: 0;
        }
    }
}
/* 一覧内の記事本文のリストは入れ子ではなく一段目として扱う */
.site-content .main-content .wp-block-post-template > li {
    ul > li::before {
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: none;
    }
    ul ul > li::before {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px currentColor;
    }
    ul ul ul > li::before {
        border-radius: 0;
        background-color: currentColor;
        box-shadow: none;
    }
}