/*
Theme Name: astock.jp
Author: Yoshi
Theme URI: https://chinamini.jp
Author URI: https://xxxx.yyyy.zzzz
Version: 1.07
Description: This theme is private only for us.
License: No Uauthorized Reproduction
License URI: https://chinamini.jp
*/

@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Gamja+Flower&family=Kaisei+Decol:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=UoqMunThenKhung&family=Yomogi&display=swap');


/* =============================================================
    0 Reset
============================================================= */

*{
    margin: 0;
    padding: 0;
    line-height: 2;
    color: #333;
    font-family: "Helvetica Neue", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Arial", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .2px;
    text-decoration: none;
    text-underline-offset: .25em;
    text-shadow: none;
    box-shadow: none;
    border-collapse: collapse;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

@media screen and (min-width: 321px){
    *{
        font-size: 13px;
    }
}

@media screen and (min-width: 767px){
    *{
        font-size: 15px;
        letter-spacing: .05em;
    }
}

p.site-name a,
p.copyright a span{
    font-family: "UoqMunThenKhung", system-ui;
}

/* =============================================================
    1 Frameset
============================================================= */

html{
    -webkit-text-size-adjust: 100%;
}

body{
    width: 100%;
    margin: 0 auto;
    background-color: rgba(245, 245, 245, .9);
}

/* background canvas */
#backgroundCanvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none; /* 背景なのでクリックを通す */
    display: block;
}

div.flex{
    padding: 0 .5em;
}

main, aside{
    padding: .5em;
}

main{
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .9);
}

footer.footer{
    padding: .5em 1em;
}

@media screen and (min-width: 767px){
    div.flex{
        padding: 0 1.5em;
    }

    main, aside, footer.footer{
        width: 100%;
        max-width: 100%;
    }

    main{
        padding: 2em 1.5em;
    }

    aside{
        padding: 2em .5em 0 .5em;
    }

    footer.footer{
        padding: 0 2em 2em 2em;
    }
}

@media screen and (min-width: 1201px){
    body{
        max-width: 1300px;
    }

    div.flex{
        columns: 2;
        display: flex;
        flex-direction: row;
        column-gap: .5em;
    }

    main{
        width: calc(100% - 420px);
        min-width: calc(100% - 420px);
        padding: 1em 2em 2em;
        flex-grow: 1;
    }

    aside{
        width: 420px;
        min-width: 420px;
        padding: 0 1em 1em .5em;
    }

    footer.footer{
        padding: 1em;
    }
}

p#page-top{
    position: fixed;
    bottom: 1em;
    right: 1em;
    line-height: 1;
    z-index: 99;
}

p#page-top a{
    background-color: rgba(0, 0, 0, .5);
    padding: 1em;
    line-height: 1;
    display: block;
    border-radius: 50%;
    z-index: 20;
    transition: .2s;
}

p#page-top a i{
    color: #fff;
}

/* =============================================================
    3 Basis
============================================================= */

div.core > p,
div.core > ul,
div.core > ol,
figure,
table{
    margin-top: 1em;
}

div.core > p{
    padding: 0 .5em;
}

@media screen and (min-width: 767px){
    div.core > p:not([class]){
        margin-top: 2em;
        padding: 0 1em;
    }

    div.core > p:not([class]) + p{
        margin-top: 1em;
    }

    div.core > ul,
    div.core > ol,
    figure,
    table{
        margin-top: 2em;
    }
}

div.core ruby rt{
    font-size: .5em;
}

br{
    display: none;
}

@media screen and (min-width: 767px){
    .smp{
        display: none;
    }
}

div.core > p a,
figcaption a,
table caption a{
    color: rgba(240, 0, 90, 1);
    text-decoration: underline;
}

input{
    outline: none;
    padding: .25em .5em;
    border: 2px #ccc solid;
    border-radius: 2px;
    transition: .2s;
}

img{
    max-width: 100%;
    height: auto;
    pointer-events: none;
    line-height: 1;
}

figure{
    line-height: 1;
    position: relative;
}

figure.gray img{
    border: 1px #ddd solid;
}

figcaption{
    margin-top: .5em;
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    display: block;
    font-size: 12px;
}

figcaption a{
    font-size: 1em;
}

@media screen and (min-width: 767px){
    figcaption{
        font-size: .9em;
    }
}

.right{
    text-align: right;
}

.center{
    text-align: center;
}

mark{
    position: relative;
    color: rgba(240, 0, 90, 1);
    background: none; /* JSでアニメ的に描くため最初はなし */
    transition: background-size 1s ease-out;
    background-image: linear-gradient(transparent 70%, rgba(240, 0, 90, .25) 70%);
    background-repeat: no-repeat;
    background-size: 0% 100%; /* 初期状態は左から0% */
}

mark ruby{
    color: inherit;
}

mark.is-visible{
    background-size: 100% 100%;
}

mark.green{
    color: rgba(40, 120, 90, 1);
    background: linear-gradient(transparent 70%, rgba(40, 120, 90, .25) 70%);
}

mark.blue{
    color: rgba(20, 155, 200, 1);
    background: linear-gradient(transparent 70%, rgba(20, 155, 200, .1) 70%);
}

div.core iframe{
    width: 100%;
    padding: 0 .5em;
    margin-top: 1em;
}

@media screen and (min-width: 767px){
    div.core iframe{
        margin-top: 2em;
        padding: 0;
    }
}

blockquote,
div.core > p:is([class]){
    padding: 1em;
}

blockquote{
    margin-top: 1em;
    position: relative;
    background-color: rgba(230, 230, 230, .5);
    border-radius: 2px;
}

blockquote::before,
blockquote::after{
    position: absolute;
    font-size: 1em;
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    color: #666;
}

blockquote::before{
    content: "\f10d";
    top: -1em;
    left: 0;
}

blockquote::after{
    content: "\f10e";
    bottom: -1em;
    right: 0;
}

blockquote > span > a{
    font-size: 12px;
    text-align: right;
    display: block;
}

blockquote > span > a::before{
    content: " - ";
}

blockquote > span > a::after{
    content: "より引用";
}

@media screen and (min-width: 767px){
    blockquote,
    div.core > p:is([class]){
    padding: 2em;
    }

    blockquote{
        margin-top: 2em;
    }

    blockquote::before,
    blockquote::after{
        font-size: 1.5em;
    }

    blockquote > span > a{
        font-size: .9em;
    }
}

blockquote ul{
    margin-left: 1.5em;
    margin-right: 1em;
}

p.red{
    color: rgb(210, 150, 180, 1);
    background-color: rgb(210, 150, 180, .1);
}

p.green{
    color: rgba(40, 120, 90, 1);
    background-color: rgba(40, 120, 90, .1);
}

p.blue{
    color: rgba(20, 155, 200, 1);
    background-color: rgba(20, 155, 200, .1);
}

/* =============================================================
    0 List
============================================================= */

div.core > ul,
div.core > ol{
    padding: 1em 1em 1em 2em;
}

div.core > ul{
    background-color: rgba(20, 155, 200, .1);
    box-shadow: 1px 1px 2px rgba(20, 155, 200, 1);
}

div.core > ol{
    background-color: rgb(210, 150, 180, .1);
    box-shadow: 1px 1px 2px rgb(210, 150, 180, 1);
}

div.core > ul li::marker{
    color: rgba(20, 155, 200, 1);
}

div.core > ol li::marker{
    color: rgb(210, 150, 180, 1);
}

div.core > ul li mark,
div.core > ol li mark{
    background: none;
}

div.core > ul li a,
div.core > ol li a{
    text-decoration: underline;
}

div.core > ul li mark,
div.core > ul li a{
    color: rgba(20, 155, 200, 1);
}

div.core > ol li mark,
div.core > ol li a{
    color: rgb(210, 150, 180, 1);
}

@media screen and (min-width: 767px){
    div.core > ul,
    div.core > ol{
        padding: 2em 2em 2em 3em;
        margin-bottom: 3em;
    }
}

/* =============================================================
    0 Table
============================================================= */

table{
    width: calc(100% + 4px);
    margin-left: -2px;
    table-layout: fixed;
    border-collapse: separate;
}

table caption{
    caption-side: bottom;
    font-size: 12px;
}

table caption a{
    font-size: 1em;
}

@media screen and (min-width: 767px){
    table caption{
        font-size: .9em;
    }
}

th, td{
    border: 2px transparent solid;
}

th, td{
    padding: .5em 4px;
    border-radius: 2px;
}

th{
    background-color: #eee;
}

td{
    background-color: aliceblue;
}

table.center td,
td.center{
    text-align: center;
}

td.right{
    text-align: right;
}

td.left{
    text-align: left;
}

@media screen and (min-width: 767px){
    th, td{
        padding: .75em 1em;
    }
}

/* =============================================================
    0 Headlines
============================================================= */

h1{
    margin: auto .5em;
    position: relative;
    font-size: 1.25em;
}

div.index h1{
    margin: .5em 0 0 .5em;
}

@media screen and (min-width: 767px){
    h1{
        margin-top: .5em;
        font-size: 1.5em;
    }
}

/* =============================================================
    2 Header
============================================================= */

@media screen and (min-width: 767px){
    header{
        margin: 1em;
    }
}

p.site-name{
    text-align: center;
}

p.site-name a{
    font-size: 2em;
    color: rgba(240, 0, 90, 1);
    display: inline-block;
    padding: .25em .5em;
}

@media screen and (min-width: 767px){
    p.site-name a{
        padding: 0 .5em;
    }
}

/* =============================================================
    2 index.php
============================================================= */

@media screen and (min-width: 767px){
    div.post-roop{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 1em;
    }
}

div.post-card{
    margin-top: 1em;
    background-color: rgba(250, 250, 250, .8);
    border: 2px #ccc solid;
    box-shadow: 1px 1px 2px #aaa;
    padding: 1em 1em .5em;
    border-radius: 4px;
}

div.post-card > a{
    display: block;
}

p.post-excerpt{
    color: #666;
    font-size: 12px;
}

p.card-meta span{
    display: block;
}

p.card-meta > span
p.card-meta > span > a,
p.card-meta > span > i{
    font-size: 12px;
}

p.card-meta span.category a{
    background-color: rgba(240, 0, 90, 1);
    color: #fff;
    padding: 0 .5em;
    margin: .5em 0;
    display: inline-block;
}

p.card-meta span.category i{
    color: rgba(240, 0, 90, 1);
}

p.card-meta span.updated{
    text-align: right;
    color: #666;
}

p.card-meta span.updated i{
    color: #666;
    margin-right: .2em;
}

@media screen and (min-width: 767px){
    div.post-card{
        padding-bottom: .5em;
    }

    p.card-meta{
        margin-top: .25em;
    }

    p.card-meta > span{
        font-size: .9em;
    }

    p.card-meta > span > a,
    p.card-meta > span > i{
        font-size: 1em;
    }
}

div.nav-links{
    margin-top: 1.5em;
    text-align: center;
}

div.nav-links a.page-numbers,
div.nav-links span.current{
    padding: .5em .75em;
}

div.nav-links a.page-numbers{
    background-color: rgba(240, 0, 90, .8);
    color: #fff;
}

/* =============================================================
    0 single.php post-meta
============================================================= */

div.post-meta{
    padding-bottom: .5em;
    margin-bottom: .5em;
    border-bottom: 1px #ccc solid;
    text-align: right;
}

@media screen and (min-width: 767px){
    div.post-meta{
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 1200px){
    div.post-meta{
        margin-top: 1em;
    }
}

div.post-meta span,
div.post-meta i,
div.breadcrumb a,
div.breadcrumb i{
    font-size: 12px;
    color: #666;
}

@media screen and (min-width: 767px){
    div.post-meta span,
    div.breadcrumb a,
    div.breadcrumb > i{
        font-size: .9em;
    }
}

div.breadcrumb{
    margin-bottom: 1em;
}

@media screen and (min-width: 767px){
    div.breadcrumb{
        margin-bottom: 2em;
    }
}

div.post-meta p span > i{
    margin-right: .25em;
}

div.breadcrumb p > i.fa-caret-right{
    margin: 0 .25em;
}

div.breadcrumb p > a{
    border-bottom: 1px #666 solid;
    padding-bottom: .25em;
}

div.post-description{
    margin-top: 1em;
}

p.post-description{
    margin-top: 1.25em;
    padding: 1em;
    background-color: rgba(40, 120, 90, .1);
    box-shadow: 1px 1px 2px rgba(40, 120, 90, 1);
    color: rgba(40, 120, 90, 1);
}

@media screen and (min-width: 767px){
    div.post-description > p:not([class]){
        padding: 0 1em;
    }

    p.post-description{
        padding: 2em;
    }
}

p.tags{
    margin-top: 1em;
}

p.tags::before{
    font-weight: bold;
    font-family: "Font Awesome 6 Free";
    content: "\f02b";
    color: rgb(210, 150, 180);
    word-break: keep-all;
    margin-right: .5em;
}

p.tags a{
    font-size: 12px;
    color: rgba(20, 155, 200, 1);
    border: 1px rgba(20, 155, 200, 1) solid;
    margin-right: .25em;
    margin-top: .5em;
    padding: 0 .5em;
    word-break: keep-all;
    border-radius: 2px;
    display: inline-block;
}

p.tags a::before{
    content: '#';
    margin-right: .1em;
    color: rgba(20, 155, 200, 1);
}

p.tags a:nth-child(2n),
p.tags a:nth-child(2n)::before{
    color: rgb(210, 150, 180, 1);
}

p.tags a:nth-child(2n){
    border: 1px rgb(210, 150, 180, 1) solid;
}

/* =============================================================
    0 single.php core
============================================================= */

body:not(.page) h1{
    position: relative;
}

@media screen and (min-width: 767px){
    body:not(.page) h1::after{
        height: 12px;
        bottom: -12px;
    }
}

body.single main h2,
body.single main h3{
    margin-top: 2em;
}

@media screen and (min-width: 767px){
    body.single main h2,
    body.single main h3{
        margin-top: 3em;
    }

    body.single main h2 + h3{
        margin-top: 1.5em;
    }
}

h2 span{
    display: block;
    padding: .5em;
    font-size: 1.25em;
    background-color: rgba(20, 155, 200, 1);
    color: #fff;
}

h3 span{
    font-weight: bold;
    display: block;
    font-size: 1.1em;
    position: relative;
    padding: 0 .5em .5em;
    border-bottom: .5em rgb(210, 150, 180) solid;
}

@media screen and (min-width: 767px){
    h2 span{
        padding: .5em;
        font-size: 1.4em;
    }

    h3 span{
        padding: .25em .5em .5em;
        font-size: 1.4em;
    }

}

div.core h4{
    margin-top: 1.5em;
    margin-left: .5em;
    padding-left: 1em;
    border-left: .5em #333 solid;
}

div.core > ul + h4,
div.core > ol + h4{
    margin-top: 2em;
}

@media screen and (min-width: 767px){
    div.core h4{
        font-size: 1.25em;
        margin-top: 2em;
        margin-bottom: -.5em;
    }
}

div.blog-card{
    margin-top: 1em;
    background-color: rgba(250, 250, 250, .8);
    border: 2px #ccc solid;
    box-shadow: 1px 1px 2px #aaa;
    padding: 1em;
    border-radius: 4px;
}

div.blog-card div p.blog-title span{
    color: rgb(210, 150, 180, 1);
}

div.blog-card div p.blog-excerpt{
    color: #666;
    font-size: 12px;
}

div.blog-card div p.blog-excerpt::after{
    content: "続きを読む";
    padding: .25em.5em;
    background-color: #ddd;
    border-radius: 1em;
    word-break: keep-all;
    font-size: 12px;
}

@media screen and (min-width: 767px){
    div.blog-card div p.blog-excerpt::after{
        font-size: .9em;
    }
}

div.blog-card > a{
    display: block;
    position: relative;
    z-index: 5;
}

div.blog-card > a::before{
    position: absolute;
    display: inline-block;
    font-family: 'Kaisei Decol';
    font-size: 12px;
    content: "ニッポンイズ";
    background-color: rgb(210, 150, 180, .5);
    color: #fff;
    padding: .25em .5em;
    top: 0;
    left: 0;
    z-index: 10;
}

@media screen and (min-width: 767px){
    div.blog-card{
        margin-top: 2em;
    }

    div.blog-card a.thumb{
        display: flex;
        columns: 2;
        flex-direction: row;
        align-items: flex-start;
    }

    div.blog-card div.thumb-img{
        width: calc(40% - .5em);
        margin-right: 1em;
        flex-direction: 1;
        flex-wrap: wrap;
        line-height: 1;
    }

    div.blog-card > a::after{
        display: block;
        content: '';
        clear: both;
    }

    div.blog-card div p.blog-excerpt{
        font-size: .9em;
    }

    div.blog-card div.blog-title{
        width: 60%;
        flex-direction: 1;
    }
}

/* =============================================================
    5 TOC
============================================================= */

div.core > div#toc_container{
    margin-top: 1.5em;
    border: none;
    width: 100%;
    background-color: inherit;
}

div.core > div#toc_container > ul.toc_list{
    margin-top: 0;
}

@media screen and (max-width: 1200px){
    div.toc-aside,
    div.inside h3.toc{
        display: none;
    }
}

div#toc_container span.toc_toggle{
    display: none;
}

div.core > div#toc_container > p.toc_title{
    margin-bottom: 2em;
    letter-spacing: 0;
    border-radius: 2px;
    padding: .5em;
    position: relative;
    font-size: 1em;
}

div.core > div#toc_container > p.toc_title::after{
    content: "";
    background-color: rgb(210, 150, 180);
    width: 5em;
    height: 0.5em;
    text-align: center;
    position: absolute;
    bottom: -1em;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1em; /* ← お好みで角丸にできる */
}

@media screen and (min-width: 767px){
    div.core > div#toc_container > p.toc_title{
        font-size: 1.1em;
    }

}

div#toc_container ul li a:hover{
    text-decoration: none;

}

div#toc_container > ul ul ul > li > a{
    display: none;
}

div#toc_container > ul ul{
    margin-left: 0;
}

aside div.toc-aside > ul.toc_widget_list{
    background-color: rgba(255, 255, 255, .9);
    padding: 1em .5em 1em 1em;
}

aside div.toc-aside > ul.toc_widget_list li a{
    padding: .5em 0;
    font-size: .9em;
}

div.no_bullets ul li,
ul.toc_widget_list li{
    list-style: none;
}

div.no_bullets ul li a,
ul.toc_widget_list li a{
    color: #333;
    width: 100%;
    display: inline-block;
    padding: .25em 0;
    margin-top: 1px;
    border-bottom: 1px #ccc dashed;
    vertical-align: bottom;
    line-height: 2.75;
}

ul.toc_list li a span.toc_number,
ul.toc_widget_list li a span.toc_number{
    background-color: rgb(210, 150, 180);
    color: #fff;
    border-radius: 2px;
    padding: .25em 1px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2;
    text-align: center;
    display: inline-block;
    margin-right: .5em;
}

ul.toc_list > li > a span.toc_number,
ul.toc_widget_list > li > a span.toc_number{
    background-color: rgba(20, 155, 200, 1);
}

/* =============================================================
    5 AddToAny
============================================================= */

div.addtoany_shortcode{
    margin-top: 1.5em;
    text-align: center;
    max-width: 100%;
}

/* 幅320px以下のデバイスのためだけの補正 */
div.addtoany_shortcode div.a2a_kit > a{
    line-height: 1;
    padding: 0 2px;
    margin: 0;
    width: 32px;
    height: auto;
}

body div.addtoany_shortcode div.a2a_kit a{
    padding: 0;
}

@media screen and (min-width: 767px){
    div.addtoany_shortcode div.a2a_kit > a{
        width: 32px;
        margin: 0 2.5px;
    }

    body.index div.addtoany_shortcode div.a2a_kit a{
        margin: 0 2.5px;
    }
}

div.a2a_kit.a2a_floating_style > a{
    padding: 3px 0;
}

div.addtoany_shortcode div.a2a_kit a span.a2a_svg,
div.a2a_kit.a2a_floating_style > a span.a2a_svg{
    border-radius: 0;
    opacity: 1;
    padding: 0;
}

@media screen and (min-width: 767px){
    div.addtoany_shortcode div.a2a_kit a span.a2a_svg,
    div.a2a_kit.a2a_floating_style > a span.a2a_svg{
        width: 2.5em;
        height: 2.5em;
        padding: .2em;
    }
}

div.a2a_modal_body{
    border-radius: 0;
    max-width: 100%;
}

div.a2a_modal_body label svg{
    width: 24px;
    margin-top: 12px;
}

div#a2a_modal div.a2a_modal_body input#a2a_copy_link_text{
    font-family: "Arial";
    font-size: 15px;
}

/*  ============================================================
    Related posts
    ============================================================ */

main > div.related-posts *,
aside > div > div.related-posts *{
    font-size: 1em;
}

div.related-posts p{
    margin-top: .5em;
}

main div.related-posts h3 span{
    color: rgba(20, 100, 50, 1);
    border-bottom-color: rgba(20, 100, 50, .5);
    font-size: 1.1em;
}

@media screen and (min-width: 767px){
    main div.related-posts h3 span{
        font-size: 1.4em;
    }
}

aside div.related-posts h3{
    padding: 0;
}

aside div.related-posts h3 span{
    border-bottom: none;
    padding: .5em;
    color: rgba(20, 100, 50, 1);
}

div.related-posts h3 span::after{
    content: 'RELATED';
    color: rgba(20, 100, 50, .25);
}

aside div.related-posts h3 span::after{
    top: -.25em;
}

div.related-posts div.yarpp-thumbnails-horizontal{
    margin-top: .5em;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: flex-start;
    columns: 2;
    flex-wrap: wrap;
    flex-direction: row;
}

div.related-posts div.yarpp-thumbnails-horizontal > a.yarpp-thumbnail{
    padding: .25em;
    display: block;
    width: 50%;
    height: 100%;
    overflow: hidden;
    flex-direction: 1;
    border: none;
    margin: .5em 0 0;
}

div.related-posts div.yarpp-thumbnails-horizontal > a.yarpp-thumbnail img{
    width: 100%;
    margin: 0;
    height: auto;
}

div.related-posts div.yarpp-thumbnails-horizontal > a.yarpp-thumbnail span.yarpp-thumbnail-title{
    font-size: 12px;
    width: 100%;
    min-height: 2.5em;
    overflow: hidden;
    display: block;
    margin: .5em 0 0 0;
    font-weight: normal;
}

@media screen and (min-width: 767px){
    div.related-posts div.yarpp-thumbnails-horizontal > a.yarpp-thumbnail span.yarpp-thumbnail-title{
        font-size: .9em;
        min-height: 4em;
    }
}

@media screen and (min-width: 1200px){
    main div.related-posts{
        display: none;
    }
}

@media screen and (max-width: 1200px){
    aside div.related-posts{
        display: none;
    }
}

/*  ============================================================
    comments.php
    ============================================================ */

div.comments h2{
    margin-bottom: 1.5em;
}

div.comments h2 span{
    background-color: #333;
    color: #fff;
    position: relative;
}

div.comments h2 span::before{
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    content: '\f086';
    margin-right: 4px;
}

div.comments h3 span{
    font-size: 1em;
    font-weight: normal;
    border-radius: 1.5em;
    border: 2px #ccc solid;
    background-color: #eee;
    display: inline;
    padding: .5em .75em;
}

div.comments ul li{
    margin-top: 1em;
    list-style: none;
    margin-left: 0;
    position: relative;
    border: 2px #ccc solid;
    border-radius: .25em;
    padding: 1em;
}

footer div.comment-author.vcard img,
/* xxとしてログインしています〜 */ p.logged-in-as,
/* コメント* */ p.comment-form-comment label,
div.comment-author span.says /* より: */{
    display: none;
}

div.comment-author b.fn{
    margin-left: 20px;
}

div.comment-author b.fn a{
    color: rgb(210, 150, 180, 1);
}

div.comment-author b.fn:has(:not([a]))::after{
    content: none;
}

div.comment-meta time{
    font-size: 12px;
    color: #aaa;
}

div.comment-content{
    margin-top: .5em;
}

div.comment-content div.comment-content p br{
    display: block;
}

div.wpulike{
    padding-bottom: 0;
    text-align: right;
}

a.open-delete-modal{
    padding: .25em .5em;
    background-color: crimson;
    color: #fff;
    margin-top: .5em;
    font-size: 12px;
}

@media screen and (min-width: 767px){
    div.comments ul li{
        padding: 1.5em;
    }

    div.comments ul li::before{
        top: -1em;
        left: 1em;
    }

    footer.comment-meta{
        display: flex;
        columns: 2;
        flex-direction: row;
    }

    div.comment-author,
    div.comment-metadata{
        width: 50%;
        flex-grow: 1;
    }

    div.comment-author b.fn,
    div.comment-metadata a time{
        margin: 0;
    }

    div.comment-author,
    div.commrent-metadata{
        margin: 0 .5em;
    }

}

textarea#comment{
    margin-top: 1em;
    background-color: #fff;
    width: 100%;
    height: 10em;
    display: block;
    border: 2px #ccc solid;
    border-radius: 2px;
    outline: none;
    padding: .5em;
    resize: none;
}

p.comment-notes{
    margin-top: .5em;
}

span#email-notes{
    display: block;
    margin-top: 1.5em;
    font-size: 12px;
    color: crimson;
}

span#email-notes a{
    font-size: inherit;
    color: rgba(240, 0, 90, 1);
    border-bottom: 1px rgba(240, 0, 90, 1) solid;
    padding-bottom: .25em;
}

@media screen and (min-width: 767px){
    span#email-notes{
        font-size: .9em;
    }
}

p.comment-form-author,
p.comment-form-password{
    display: flex;
    columns: 2;
    flex-direction: row;
    margin-top: .5em;
}

p.comment-form-author label,
p.comment-form-password label{
    width: 50%;
    display: inline;
    font-size: .9em;
    text-align: center;
    margin-right: .5em;
    padding-top: .375em;
    vertical-align: baseline;
}

p.comment-form-author label{
    background-color: rgb(210, 150, 180, .1);
    color: rgb(210, 150, 180, 1);
}

p.comment-form-password label{
    background-color: rgba(20, 100, 50, .1);
    color: rgba(20, 100, 50, 1);
}

p.comment-form-author input,
p.comment-form-password input{
    display: inline-block;
    width: calc(50% - .5em);
}

p.comment-form-cookies-consent{
    display: none;
}

p.form-submit input{
    margin-top: 1em;
    width: 100%;
    color: #fff;
    background-color: #333;
    padding: .5em;
    border: 2px #333 solid;
}

@media screen and (min-width: 767px){
    p.form-submit{
        text-align: right;
    }

    p.form-submit input{
        width: 10em;
        padding: .5em;
        transition: .2s;
    }

    p.form-submit input:hover{
        box-shadow: 0 .2em 4px #ccc;
        background-color: #fff;
        color: #333;
        border: 2px #333 solid;
    }
}

/* コメント削除ボタン */
.delete-comment-btn {
    background: #d9534f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 8px;
    transition: background 0.2s;
}

.delete-comment-btn:hover {
    background: #c9302c;
}

/* モーダルの基本 */
.delete-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* モーダル内コンテンツ */
.delete-modal-content {
    background: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.delete-modal-content h3 {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.delete-modal-content input[type="password"] {
    width: 80%;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.delete-modal-content button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.delete-modal-content button[type="submit"] {
    background: #d9534f;
    color: #fff;
    margin-right: 8px;
}

.delete-modal-content button#cancel-delete {
    background: #ccc;
}

/*  ============================================================
    contact-form7
    ============================================================ */

div.wpcf7 form div.name p,
div.wpcf7 form div.e-mail p,
div.wpcf7 form div.subject p{
    margin-top: 0;
    display: flex;
    flex-direction: row;
    columns: 2;
    margin-bottom: .5em;
}

div.wpcf7 form p br{
    display: none;
}

div.wpcf7 form p label span.name,
div.wpcf7 form p label span.e-mail,
div.wpcf7 form p label span.subject{
    padding: .4em .5em;
    width: 5em;
    min-width: 5em;
    max-width: 5em;
    flex-grow: 1;
    display: inline-block;
    text-align: center;
}

div.wpcf7 form p label span.name,
div.wpcf7 form p label span.e-mail,
div.wpcf7 form p label span.subject,
div.wpcf7 form p label span.textarea{
    background-color: rgba(230, 230, 230, 1);
    color: #333;
}

div.wpcf7 p span.wpcf7-spinner{
    display: none;
}

div.wpcf7 form div.textarea p label span.textarea{
    padding: .4em 1em;
    display: inline-block;
}

div.wpcf7 form div.textarea p label span textarea{
    margin-top: 1em;
    width: 100%;
    height: 12em;
    border: 2px #ccc solid;
    border-radius: 2px;
    outline: none;
    padding: .5em;
    resize: none;
}

div.wpcf7 form div.textarea p label span textarea + span.wpcf7-not-valid-tip{
    margin-top: -.5em;
}

div.wpcf7 form p input.wpcf7-submit{
    width: 100%;
    color: #fff;
    background-color: #333;
    padding: .5em;
    border: 2px #333 solid;
}

span.wpcf7-not-valid-tip{
    margin-top: .25em;
    color: crimson !important;
}

div.wpcf7 form > p{
    padding: 0 .25em;
    margin-top: 0;
}

div.wpcf7 form > p > a{
    color: rgba(240, 0, 90, 1);
}

@media screen and (min-width: 767px){
    div.wpcf7 form div.name p,
    div.wpcf7 form div.e-mail p,
    div.wpcf7 form div.subject p{
        display: block;
        columns: 1;
    }

    div.wpcf7 form div.textarea{
        padding: 0;
    }

    div.wpcf7 form div.submit p{
        text-align: right;
    }

    div.wpcf7 form div.submit p input{
        width: 10em;
        padding: .5em;
        transition: .2s;
    }

    div.wpcf7 form div.submit p input:hover{
        box-shadow: 0 .2em 4px #ccc;
        background-color: #fff;
        color: #333;
        border: 2px #333 solid;
    }
}

div.wpcf7 form p label span.wpcf7-form-control-wrap input{
    width: calc(100% - 5.5em);
}

div.accept > p:first-child{
    margin-top: 1em;
}

div.accept p > span{
    display: block;
}

div.accept p > span > span > span{
    margin-left: .25em;
}

/* =============================================================
    5 page.php
============================================================= */

div.page p{
    margin-top: 1em;
    padding: 0 .5em;
}

div.page a{
    text-decoration: underline;
}

body.page h1{
    margin-top: 1em;
    margin-bottom: 1em;
}

div.page h2{
    padding: .5em;
    font-size: 1.25em;
    background-color: #333;
    color: #fff;
}

div.page h3{
    font-size: 1.1em;
    font-weight: bold;
    padding: 0 .5em .5em;
    border-bottom: .5em #333 solid;
}

@media screen and (min-width: 767px){
    div.page h2,
    div.page h3{
        font-size: 1.4em;
    }

    div.page h3{
        padding: .25em .5em .5em;
    }
}

div.page h2, div.page h3{
    margin-top: 1em;
}

div.page h4{
    margin-top: 1.5em;
    margin-left: .5em;
    padding-left: 1em;
    border-left: .5em #333 solid;
}

div.page > ul + h4,
div.page > ol + h4{
    margin-top: 2em;
}

@media screen and (min-width: 767px){
    div.page h4{
        font-size: 1.25em;
        margin-top: 2em;
        margin-bottom: -.5em;
    }
}
div.page ul,
div.page ol{
    margin: 1em 1em 0 2em;
}

@media screen and (min-width: 767px){
    div.page p{
        margin: 2em 1em 0;
    }

    div.page p + h3{
        margin-top: 2em;
    }

    div.page h3 + p{
        margin-top: 2em;
    }

    div.page p + p{
        margin-top: 1em;
    }

    div.page ul,
    div.page ol{
        margin: 2em 1em 2em 2.5em;
    }

    div.page h3 + ul,
    div.page h3 + ol{
        margin-top: 2em;
    }

    div.page h2{
        margin-top: 2em;
        padding: .5em;
    }

    body.page h1 + div h3:first-child{
        margin-top: 2em;
    }

}

/*  ============================================================
    aside.php
    ============================================================ */

div.sticky{
    top: 1.5em;
    position: sticky;
}

aside h2#aside-menu{
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 0;
    margin: 2em auto;
    width: 90%;
    position: relative;
    padding: .5em;
    border-radius: 2em;
    text-align: center;
    background-color: rgb(210, 150, 180);
    color: #fff;
}

aside h2#aside-menu::after{
    content: "◆";
    font-size: 2em;
    position: absolute;
    left: 50%;             /* 親の中央を基準に */
    bottom: -.9em;        /* 下方向の位置は微調整 */
    transform: translateX(-50%); /* 自分の幅の半分だけ左へ */
    color: rgb(210, 150, 180);
}

@media screen and (min-width: 1200px){
    aside h2#aside-menu{
        margin-top: 0;
    }
}

aside h3,
aside p.toc_title{
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 0;
    margin-top: 2em;
    position: relative;
    padding: .5em;
    margin-bottom: 3em;
    text-align: center;
}

aside h3::after,
aside p.toc_title::after{
    content: "";
    background-color: rgb(210, 150, 180);
    width: 5em;
    height: 0.5em;
    text-align: center;
    position: absolute;
    bottom: -1em;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1em; /* ← お好みで角丸にできる */
}

aside ul.categories{
    display: block;
    column-count: 2;
    column-gap: 1em;
    list-style: none;
    border-radius: .25em;
    background-color: rgba(255, 255, 255, .9);
    padding: 1em;
}

@media screen and (min-width: 767px){
    aside ul.categories{
        column-count: 3;
    }
}

@media screen and (min-width: 1200px){
    aside ul.categories{
        column-count: 2;
    }
}

aside ul.categories li{
    break-inside: avoid;
    margin-bottom: 1em;
    list-style: none;
}

aside ul.categories li a{
    padding: 1em .25em;
    display: block;
    text-align: center;
    background-color: rgba(135, 179, 135, .9);
    color: #fff;
}

div.popular-post{
    padding: .5em 1em;
    border-radius: .25em;
    background-color: rgba(255, 255, 255, .9);
}

aside div.popular-post ul{
    margin: 1.5em 0;
}

aside div.popular-post ul li{
    position: relative;
}

aside div.popular-post ul li a img{
    margin-right: .5em;
}

aside div.popular-post ul li a.wpp-post-title{
    margin-top: -.25em;
    font-size: 12px;
    display: block;
    overflow: hidden;
    padding-right: 1em;
}

@media screen and (min-width: 767px){
    aside div.popular-post ul li a.wpp-post-title{
        font-size: .9em;
    }

    aside div.popular-post ul{
        columns: 2;
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
    }

    aside div.popular-post ul li{
        width: 50%;
        flex-direction: 1;
    }
}

@media screen and (min-width: 1201px){
    aside div.popular-post ul li a.wpp-post-title{
        margin-top: -.5em;
    }

    aside div.popular-post ul{
        columns: 1;
        display: block;
        flex-direction: column;
    }

    aside div.popular-post ul li{
        width: 100%;
    }
}

aside div.popular-post ul li::before{
    position: absolute;
    display: inline-block;
    background-color: rgba(50, 50, 50, .8);
    color: #fff;
    content: "5";
    left: 0;
    min-width: 2em;
    min-height: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    z-index: 20000;
}

aside div.popular-post ul li:nth-child(1)::before{
    background-color: rgba(255, 200, 0, .8);
    content: "1";
}

aside div.popular-post ul li:nth-child(2)::before{
    background-color: rgba(200, 200, 200, .8);
    content: "2";
}

aside div.popular-post ul li:nth-child(3)::before{
    background-color: rgba(210, 90, 10, .8);
    content: "3";
}

aside div.popular-post ul li:nth-child(4)::before{
    content: "4";
}

/*  ============================================================
    footer.php
    ============================================================ */

@media screen and (min-width: 767px){
    div.footer-items > div:nth-child(1){
        float: left;
        width: 49%;
    }

    div.footer-items > div:nth-child(2){
        float: right;
        width: 49%;
    }

    div.footer-items::after{
        content: '';
        display: block;
        clear: both;
    }
}

footer h3{
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 0;
    margin: 2em auto;
    width: 90%;
    position: relative;
    padding: .5em;
    border-radius: 2em;
    text-align: center;
    background-color: rgb(210, 150, 180);
    color: #fff;
}

@media screen and (min-width: 767px){
    footer h3{
        margin-top: 2em;
    }
}

footer h3::after{
    content: "◆";
    font-size: 2em;
    position: absolute;
    left: 50%;             /* 親の中央を基準に */
    bottom: -.9em;        /* 下方向の位置は微調整 */
    transform: translateX(-50%); /* 自分の幅の半分だけ左へ */
    color: rgb(210, 150, 180);
}

footer.footer li{
    list-style: none;
}

footer ul.archives{
    padding: .5em 1em;
    border-radius: .25em;
    background-color: rgba(255, 255, 255, .9);
}

footer ul.archives li a{
    display: block;
    padding: .15em 0;
}

@media screen and (min-width: 767px){
    footer ul.archives{
        margin-left: .5em;
        display: flex;
        columns: 2;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer ul.archives li{
        width: 50%;
        flex-direction: 1;
    }
}

footer ul.tags{
    padding: 0 1em 1em;
    border-radius: .25em;
    margin-bottom: 1.5em;
    background-color: rgba(255, 255, 255, .9);
}

footer ul.tags li{
    margin-top: 1em;
    padding: 0;
    margin-right: .5em;
    list-style: none;
    display: inline;
    float: left;
}

footer ul.tags li a{
    border: 1px rgba(20, 155, 200, 1) solid;
    color: rgba(20, 155, 200, 1);
    padding: .5em;
    font-size: 12px;
    word-break: break-all;
    transition: .2s;
    border-radius: 2px;
}

footer ul.tags li:nth-of-type(2n) a{
    color: rgb(210, 150, 180);
    border-color: rgb(210, 150, 180);
}

footer ul.tags li a::before{
    content: '#';
    margin-right: .125em;
}

@media screen and (min-width: 1201px){
    footer ul.tags li a{
        border-color: transparent;
        font-size: .9em;
    }

    footer ul.tags li:nth-child(2n) a{
        border-color: transparent;
    }

    footer ul.tags li a:hover{
        background-color: rgba(20, 155, 200, 1);
        color: #fff;
    }

    footer ul.tags li:nth-child(2n) a:hover{
        background-color: rgb(210, 150, 180);
        color: #fff;
    }
}

footer ul.tags li:first-child{
    margin-left: 0;
}

footer ul.tags::after{
    clear: both;
    content: '';
    display: block;
}

footer div.site-info{
    margin-top: 2em;
}

footer div.site-info ul{
    margin: .5em 0 1em;
    width: 100%;
}

footer div.site-info ul li{
    width: 50%;
    float: left;
    list-style: none;
    text-align: center;
    padding: 0 .25em;
}

footer div.site-info ul::after{
    display: block;
    content: '';
    clear: both;
}

footer div.site-info ul li a > ruby{
    font-size: 12px;
}

footer div.site-info ul li a > ruby rt{
    font-size: .8em;
    padding-bottom: .5em;
}

@media screen and (min-width: 767px){
    footer div.site-info ul li a > ruby{
        font-size: .9em;
    }

    footer div.site-info ul{
        display: flex;
        column-count: 2;
    }

    footer div.site-info ul li{
        width: calc(50% - .5em);
    }
}

footer div.site-info ul li:nth-child(1),
footer div.site-info ul li:nth-child(3){
    border-right: 1px #ccc solid;
}

div.site-info ruby rt{
    margin-bottom: .25em;
    text-align: center;
}

footer div.site-info ul li:nth-child(3),
footer div.site-info ul li:nth-child(4){
    margin-top: 1em;
}

@media screen and (min-width: 767px){
    footer div.site-info ul li:nth-child(1),
    footer div.site-info ul li:nth-child(3){
        padding-right: 1em;
        text-align: right;
    }

    footer div.site-info ul li:nth-child(2),
    footer div.site-info ul li:nth-child(4){
        padding-left: 1em;
        text-align: left;
    }

    footer div.site-info ul li:nth-child(3),
    footer div.site-info ul li:nth-child(4){
        margin-top: 0;
    }
}

p.okotowari{
    margin-top: 2em;
    font-size: 12px;
    text-align: center;
}

p.copyright{
    margin-top: 1em;
    text-align: center;
}

@media screen and (min-width: 767px){
    p.okotowari{
        font-size: .9em;
    }

}

p.site-description{
    margin: 2em auto 1em;
    width: fit-content;
    position: relative;
    padding: .5em 1em;
    border-radius: 2em;
    text-align: center;
    background-color: rgba(240, 0, 90, 1);
    color: #fff;
}

p.site-description::after{
    content: "◆";
    font-size: 2em;
    position: absolute;
    left: 50%;             /* 親の中央を基準に */
    top: -.9em;        /* 下方向の位置は微調整 */
    transform: translateX(-50%); /* 自分の幅の半分だけ左へ */
    color: rgba(240, 0, 90, 1);
}