@charset "utf-8";

/*----------------------------------------
I / post formats universal
----------------------------------------*/
main h1, main h2, main h3, main h4, main h5, main h6,
main p, main figure, main .wp-block-quote,
main ul, main ol, main table, main iframe {
    margin: .2rem 0;
    font-size: .15rem; line-height: 2;
}

main input,
main textarea {
    margin: 0; padding: 0;
    border: 0; outline: 0; 
    border-radius: 0;
    font-size: .14rem; line-height: 1.6;
    color: var(--color-dark);
    -webkit-appearance: none;
    appearance: none;
}

main strong { font-weight: 800; }
main em     { font-style: italic; }
main iframe { width: 100%; height: 4rem; }
main hr {
    display: block;
    height: .5rem;
    margin: .4rem auto;
    background: url(img/post-hrline.png) no-repeat 50% 50% / cover;
    border: 0;
    opacity: .4;
}
main .align-center { text-align: center; }
main .color-red    { color: var(--color-dnred); }
main .color-light  { color: var(--color-brown); }
main .size-large   { font-size: .17rem; }
main .credits {
    margin-top: .4rem;
    font-size: .13rem; line-height: 1.8;
    text-align: right; color: var(--color-brown);
}

/*---------- title ----------*/
main h1, main h2, main h3, 
main h4, main h5, main h6 { 
    text-align: center; 
    color: var(--color-dnred); 
}
main h1 { 
    margin: .3rem 0 .4rem; 
    font-size: .32rem; 
    line-height: 1;
    color: var(--color-gold); 
}
main h1:before { content: "—· "; color: var(--color-beige); }
main h1:after  { content: " ·—"; color: var(--color-beige); }

main h2 {
    font-size: .2rem; 
    line-height: 1.6; 
    font-weight: 800; 
}
main h2 em {
    font-size: .8em;
    font-style: normal;
}
main h3 {
    font-size: .16rem; 
    line-height: 1.8; 
    font-weight: 800; 
}
main h4 {
    color: var(--color-dark);
}
main h5, 
main h6 {
    font-size: .15rem; 
    text-align: left; 
    font-weight: 800;
}
main h6 {
    margin-bottom: -.2rem;
}

main * + h2 {
    margin-top: .4rem;
}
    main .m-tab      + h2,
    main .m-identify + h2,
    main .m-crumb    + h2 {
        margin-top: .2rem;
    }
    .single main h2 { 
        margin-bottom: .4rem; 
    }
main h2 + h4,
main h3 + h4 {
    margin-top: -.16rem;
}
main h6 a {
    color: var(--color-gold);
}
main h6 a:hover {
    color: var(--color-gold-trans);
}

/*---------- list ----------*/
main .list {
    padding-left: 2em;
}
main .list.tall li {
    margin: .2rem 0;
}
main ul.list {
    list-style: disc;
}
main ol.list {
    list-style: decimal-leading-zero;
}

main .nlist li {
    padding-left: 4em;
}
main .nlist li strong {
    display: inline-block;
    width: 4em; margin-left: -4em;
}
main .nlist.large li {
    padding-left: 8em;
}
main .nlist.large li strong {
    width: 8em;
    margin-left: -8em;
}
main .nlist.tall li { 
    margin: .2rem 0; 
}

/*---------- quote ----------*/
main .wp-block-quote {
    position: relative;
    max-width: 6.4rem;
    margin: .64rem auto; padding: .15rem .2rem;
    background-color: var(--color-beige-trans-alt);
    color: var(--color-brown);
}
main .wp-block-quote:before, 
main .wp-block-quote:after {
    content: "";
    position: absolute; 
    left: 0; top: -.38rem;
    display: block;
    width: 100%; height: .3rem;
    background: url(img/post-quote-tp.png) no-repeat 50% 50% / cover;
    opacity: .4;
}
main .wp-block-quote:after {
    top: auto; bottom: -.38rem;
    background-image: url(img/post-quote-bt.png);
}
main .wp-block-quote + .wp-block-quote,
main .m-tab + .wp-block-quote {
    margin-top: .96rem;
}
main .wp-block-quote p { 
    margin: 0; 
}
main .wp-block-quote p + p { 
    margin-top: .2rem; 
}

/*---------- image ----------*/
main .wp-block-image { 
    line-height: 1; 
    text-align: center; 
}
main .wp-block-image img {
    max-width: 4.8rem; max-height: 3.6rem;
    padding: .05rem;
    border: 1px solid var(--color-beige);
}
@media (hover: hover) and (pointer: fine) {
    main .wp-block-image a:hover img {
        background-color: var(--color-beige-trans-alt);
    }
}
.single main .wp-block-image img { 
    max-width: 100%; max-height: none; 
}


/*----------------------------------------
II / page special formats
----------------------------------------*/
/*---------- page-book ----------*/
main .bookhistory table {
    width: 100%;
    border-collapse: collapse;
}
main .bookhistory thead,
main .bookhistory tbody {
    vertical-align: top;
}
main .bookhistory thead tr {
    line-height: 1.5;
    background-color: var(--color-beige-trans-alt);
}
main .bookhistory th,
main .bookhistory td {
    padding: .12rem 0;
    border-top: 1px solid var(--color-beige-trans);
    border-bottom: 1px solid var(--color-beige-trans);
}
main .bookhistory td:nth-child(1) {
    width: 60%;
}
main .bookhistory th:nth-child(2), main .bookhistory th:nth-child(3),
main .bookhistory td:nth-child(2), main .bookhistory td:nth-child(3) {
    width: 4em; 
    padding-right: .05rem;
    text-align: center; 
    color: var(--color-dnred);
}
main .bookhistory th:nth-child(2),
main .bookhistory td:nth-child(2) {
    padding-left: .05rem; padding-right: 0;
    border-right: 1px solid var(--color-beige-trans);
}
main .bookhistory em {
    font-size: .13rem; font-style: normal;
    color: var(--color-brown);
}

main .bookgallery {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    justify-content: center;
    font-size: 0;
}
main .bookgallery li {
    display: block;
    width: calc((100% - .45rem) / 4);
}
main .bookgallery li img {
    width: 100%; 
    padding: .05rem;
    border: 1px solid var(--color-beige);
}
@media (hover: hover) and (pointer: fine) {
    main .bookgallery li a:hover img { 
        background-color: var(--color-beige-trans-alt); 
    }
}
main h2#map + .bookgallery li { 
    width: calc((100% - .45rem) / 3);
}

/*---------- page-movie ----------*/
main .moviestaff {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    font-size: 0;
}
main .moviestaff li {
    position: relative;
    display: block;
    width: calc(50% - .1rem); height: 1.2rem;
    padding-left: .95rem;
    border-bottom: 1px solid var(--color-beige-trans);
    font-size: .14rem;
}
main .moviestaff li img {
    position: absolute;
    left: 0; top: 0;
    width: .8rem; height: 1rem;
    padding: 1px;
    border: 1px solid var(--color-beige);
}
main .moviestaff li h3,
main .moviestaff li h4 {
    margin: 0; 
    line-height: 1.6; text-align: left; 
    color: var(--color-dnred);
}
main .moviestaff li h3 {
    margin: -.02rem 0 .03rem; 
}

/*---------- page-home ----------*/
.page-home main {
    padding: 0;
    background: none;
}
main .homebanner {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    font-size: 0;
}
main .homebanner li {
    display: block;
    width: 100%;
    height: calc( (var(--inner-width) - .4rem) / 3 * 0.67 ); 
}
    main .homebanner li.large  { height: calc( var(--inner-width) / 3); }
    main .homebanner li.medium { width:  calc( (100% - .2rem) / 2 ); }
    main .homebanner li.small  { width:  calc( (100% - .4rem) / 3 ); }
main .homebanner li a {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    border: 1px solid var(--color-gold-trans);
    overflow: hidden;
}
main .homebanner li a::before {
    content: "";
    position: absolute;
    left: 3px; top: 3px;
    display: block;
    width: calc(100% - 6px); height: calc(100% - 6px);
    border: 1px solid var(--color-gold-trans);
    transition: all .2s ease-in-out;
}
main .homebanner li a img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (hover: hover) and (pointer: fine) {
    main .homebanner li a:hover {
        border-color: var(--color-gold);
    }
    main .homebanner li a:hover::before {
        left: 0; top: 0;
        width: 100%; height: 100%;
        border: 3px solid var(--color-gold-trans);
    }
}


/*----------------------------------------
III / comment list and respond
----------------------------------------*/
/*---------- comment list ----------*/
.cmt-list { 
    border-top: 2px solid var(--color-beige-trans); 
}
.cmt-list li {
    position: relative;
    min-height: .8rem;
    margin: .2rem 0; padding: 0 0 .2rem .75rem;
    border-bottom: 2px solid var(--color-beige-trans);
}
.cmt-list p {
    margin: 0;
    line-height: 1.8;
}
.cmt-list .avatar {
    position: absolute;
    left: 0; top: 0;
    width: .6rem; height: .6rem;
    padding: 2px;
    border: 1px solid var(--color-beige); 
    border-radius: 99rem;
}
.cmt-list .info {
    margin-bottom: .04rem;
    font-weight: 800; color: var(--color-dnred);
}
.cmt-list .info span {
    display: inline-block;
    font-size: .13rem; font-weight: normal; 
    color: var(--color-beige);
}
.cmt-list .info span:before { 
    content: "｜"; 
    margin: 0 .04rem; 
}
.cmt-list .info a { 
    color: var(--color-dnred); 
    text-decoration: underline;
}
.cmt-list .floor {
    position: absolute;
    right: 0; top: -.04rem;
    font-size: .2rem; font-weight: 800;
    text-align: right; color: var(--color-beige);
}
.cmt-list .floor sup { 
    font-size: .14rem; font-weight: normal; 
}

/*---------- comment navi ----------*/
.cmt-navi {
    display: flex;
    justify-content: right;
    gap: .05rem .05rem;
    font-size: 0; letter-spacing: 0;
}
div#comments + .cmt-navi { 
    margin-top: .5rem; 
}
.cmt-navi .page-numbers {
    min-width: .32rem; height: .32rem;
    padding: 0 .08rem;
    background-color: var(--color-gold);
    font-size: .14rem; line-height: .32rem; 
    text-align: center; color: var(--color-cream);
    border-radius: .08rem;
}
@media (hover: hover) and (pointer: fine) {
    .cmt-navi a.page-numbers:hover {
        background-color: var(--color-gold-trans);
    }
}
.cmt-navi .current {
    background-color: var(--color-dnred); 
    color: var(--color-cream);
}

/*---------- comment respond ----------*/
.cmt-respond {
    width: 100%; max-width: 6rem;
    margin: .4rem auto .2rem; 
}
.cmt-respond h2 {
    text-align: left; 
}
.cmt-respond .info,
.cmt-respond .content,
.cmt-respond .submit {
    position: relative;
    width: 100%;
    margin-bottom: .1rem;
}
.cmt-respond input[type="text"],
.cmt-respond textarea {
    display: block;
    width: 100%; height: .4rem;
    padding: .1rem;
    margin-bottom: .1rem;
    background-color: var(--color-beige-trans-alt);
    border: 1px solid var(--color-beige);
    border-radius: .08rem;
    resize: none;
}
.cmt-respond input[type="text"]:focus,
.cmt-respond textarea:focus {
    background-color: var(--color-cream);
    border-color: var(--color-dnred-lt);
}
.cmt-respond textarea {
    height: 1.5rem;
}
.cmt-respond .submit input[type="submit"] {
    position: absolute;
    right: 0; top: 0;
    width: 33%; height: .4rem;
    background-color: var(--color-gold);
    border: none; border-radius: .08rem;
    color: var(--color-cream);
    cursor: pointer;
}
.cmt-respond .submit label {
    position: relative;
    left: .3rem; top: 0;
    display: block;
    width: 50%; height: .4rem;
    line-height: .4rem;
}
.cmt-respond .submit label input[type="checkbox"] {
    position: absolute;
    left: -.3rem; top: .1rem;
    width: .2rem; height: .2rem;
    border: 1px solid var(--color-beige);
    border-radius: 99rem;
    cursor: pointer;
}
.cmt-respond .submit label input[type="checkbox"]:checked {
    border: 1px solid var(--color-gold);
}
.cmt-respond .submit label input[type="checkbox"]:checked::before {
    content: "";
    position: relative;
    left: .02rem; top: .02rem;
    display: block;
    width: .14rem; height: .14rem;
    background-color: var(--color-gold);
    border-radius: 99rem;
}
@media (hover: hover) and (pointer: fine) {
    .cmt-respond input[type="submit"]:hover { 
        background-color: var(--color-dnred); 
    }
}


/*----------------------------------------
IV / responsive
----------------------------------------*/
@media screen and (max-width: 760px) {
    /*---------- post formats ----------*/
    main .wp-block-image img { max-width: 100%; }
    main .bookhistory td:nth-child(1) { width: 46%; }
    main .moviestaff li { width: 100%; height: auto; min-height: 1.2rem; padding-bottom: .1rem; }
    .single main iframe { width: 100%; height: 70vw; }
    
    /*---------- comment ----------*/
    .cmt-list .info span { display: block; margin-top: -.01rem; }
    .cmt-list .info span::before { display: none; }
    
    /*---------- page-home ----------*/
    .page-home main {
        min-height: calc(100vh - 190px - 25vw);
        margin-top: -25vw;
        padding: 20px;
    }
    main .homebanner li a::before {
        display: none;
    }
}