@charset "utf-8";

hr {
    width: 95%;
}

h2{
    margin-top: -30px;
}

img{
    width: 100%;
}

body{
    background: #e3d7a3;
}

.entirety {
    width: 80%;
    max-width: 1000px;
    background: #e3d7a3;
    margin: auto;
}

.top {
    text-align: center;
    /*background: #ee1414;*/
}

.Bottom {
    font-size: 1em;
    /*background: #ee22aa;*/
}

.middle {
    display: flex;
    /*background: #00c3ff;*/
    /*flexアイテムを縦並びに変更*/
}

.left {
    width: 70%;
    /*border: 1px solid #000;*/
    /*background: #00ff9d;*/
}

.right {
    width: 25%;
    margin: 0 auto;
    /*border: 1px solid #000;*/
    /*background: #1900ff;*/
}

.picture {
    width: 30%;
    height: 50%;
    /*border: 1px solid #fff;*/
    /*object-fit: cover;*/
}

.case {
    display: flex;
    /*width: 100%;*/
    /*border: 1px solid saddlebrown;*/
}

.ch-name{
    font-size: 0.9em;
    text-align: right;
    vertical-align: bottom;
    margin: 0 10px;
}

.text {
    font-size: 1em;
    margin: 0 10px;
    /*border: skyblue;*/
}

.tag {
    font-size: 0.8em;
    margin: 0 10px;
}

.dating {
    font-size: 0.8em;
    text-align: right;
    margin: 0 10px;
    /*border: skyblue;*/
}

.detail {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

/*----------------*/

.case2 {
    flex-direction: column;
    /*border: 1px solid saddlebrown;*/
}

.ch-name2{
    font-size: 1.4em;
    text-align: right;
    margin: 3px;
    vertical-align: bottom;
}

.text2 {
    font-size: 2em;
    /*border: skyblue;*/
}

.tag2 {
    font-size: 2em;
}

.dating2 {
    font-size: 1.4em;
    text-align: right;
    /*border: skyblue;*/
}

.detail2 {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

/*----------------*/

.r-side-bar-1 {
    width: 90%;
    overflow-wrap: break-word;
    /*background: green;*/
}

.r-side-bar-2 {
    width: 90%;
    overflow-wrap: break-word;
    /*background: green;*/
}

.r-side-bar-3 {
    width: 90%;
    overflow-wrap: break-word;
    /*background: green;*/
}

.r-side-bar-1-li {
    margin: 5px;
    font-size: 1.3em;
    font-weight: bold;
}

.r-side-bar-2-li {
    margin: 5px;
    font-size: 1.3em;
    font-weight: bold;
}

.r-side-bar-3-li {
    margin: 5px;
    font-size: 1.3em;
    font-weight: bold;
}

.bottom{
    text-align: center;
    margin: auto;
}

.page{
    text-align: center;
    margin: auto;
}

.honbun{
    margin: auto;
}
/*モバイル表示*/
@media screen and (max-width: 580px) {
    hr{
        width: 100%;
    }

    .middle {
        flex-direction: column;
        /*background: #00c3ff;*/
        /*flexアイテムを縦並びに変更*/
    }

    .left {
        width: 100%;
        /**/
        border: none;
        /*background: #00ff9d;*/
    }

    .right {
        width: 90%;
        /**/
        border: none;
        /*background: #1900ff;*/
    }

    .case {
        flex-direction: column;
        /*border: 1px solid saddlebrown;*/
    }

    .text {
        font-size: 0.8em;
        border: skyblue;
    }

    .tag {
        font-size: 0.6em;
        border: skyblue;
    }

    .dating {
        font-size: 0.6em;
        border: skyblue;
    }

    .detail {
        flex-direction: column;
    }

    .picture {
        width: 100%;
        height: 100%;
        /*border: 1px solid #fff;*/
        /*object-fit: cover;*/
    }
}