body {
    background-color: rgb(230, 230, 230);
    font-size: 16px;
    line-height: 1.75em;
}

#bg {
    background-size: 320px;
    background-color: transparent;
}

#yodogawa,
#talk_body dt,
.profile_inner h3, 
.modal_content_inner h3,
#information .info_title, 
#information_free .info_title {
    font-family: 'GJ Futo Go B101', sans-serif;
}
#talk_body dd,
.profile_inner .desc p, 
.modal_content_inner .desc p,
#information li .info_desc, 
#information_free li .info_desc {
    font-family: 'GJ Gothic Medium BBB', sans-serif;
}

#talk_body dl, .info_taidan_txt dl {
    font-size: 1rem;
    max-width: 640px;
}

#talk_wrap h2 {
    height: 501px;
    margin-bottom: 0;
}
#talk_wrap h2 img {
    height: 100%;
    width: auto;
    max-width: 100%;
}

.next_post .next_title img {
    max-width: 90px
}



.bd_t, .bd_b {
    border-color: #e61740;
}

@media (max-width: 640px) {
    article {
        padding: 0;
    }
    .content_wrap {
        padding: 0 20px;
    }
    #yodogawa p  {
        line-height: 1.75;
        font-size: 1rem;
    }
    #yodogawa p small {
        font-size: 83.75%;
        display: inline-block;
    }
    #index_nav ul {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #index_nav li:last-child {
        margin-left: auto;
        margin-right: 15px;
    }
    #index_nav li {
        width: calc(33.3333% - 10px);
        border: 0 none transparent;
    }
    #index_nav a {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        height: 100%;
        padding: 0;
        box-sizing: border-box;
        align-items: flex-start;
        position: relative;
        padding-left: 15px;
    }
    #index_nav .title {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }
    #index_nav .title img {
    vertical-align: top;
    }
    #index_nav .date {
        transform: rotate(90deg);
        white-space: nowrap;
        width: 14em;
        text-align: left;
        position: absolute;
        top: 21%;
        left: 10px;
        transform-origin: left;
        color: #e61740;
        line-height: 1;
    }

    #talk_body .txt_box {
        max-width: 880px;
        padding: 40px 0;
    }
    #talk_body .txt_box .desc {
        max-width: 100%;
    }
    #talk_body .txt_box .desc > p {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    #talk_body .txt_box .desc > p img:first-child {
        width: calc(20 / 68 * 100%);
    }
    #talk_body .txt_box .desc > p img {
        width: calc(16 / 68 * 100%);
    }
    #information .info_title, 
    #information_free .info_title{
        max-width: 100%;
        display: block;
    }
    #information li .info_desc, 
    #information_free li .info_desc {
        max-width: 100%;
        line-height: 1.75;

    }
    #information .info_title p, 
    #information_free .info_title p {
        line-height: 1.5;
        font-size: 18px;
    }
    #information li .info_desc p, 
    #information_free li .info_desc p {
        line-height: 1.75;
    }
    
}


@media (min-width: 414px) {
    #index_nav {
        margin: 50px 0px;
    }
    #index_nav li {
        width: calc(25% - 10px);
        border: 0 none transparent;
    }
    #index_nav li:last-child {
        margin-left: 0;
        margin-right: 0;
    }
    #index_nav .date {
        top: 22%;
    }
}


@media (min-width: 641px) {
    article {
        max-width: 960px;
        padding: 0;
    }
    #yodogawa .inner {
        writing-mode: vertical-rl;
    }
    #yodogawa .inner p {
        margin-left: 1em;
        line-height: 1.75;
        margin-bottom: 0;
    }
    #yodogawa .inner p span.num {
        text-combine-upright: all;
    }
    #yodogawa .inner p small {
        font-size: 83.75%;
        display: inline-block;
        line-height: 1.75;
    }

    #talk_body .txt_box {
        max-width: 880px;
        padding: 40px 0;
    }
    #talk_body .txt_box .desc {
        max-width: 100%;
    }
    #talk_body .txt_box .desc > p {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: center;
    }
    #talk_body .txt_box .desc > p img:first-child {
        width: calc(20 / 164 * 100%);
    }
    #talk_body .txt_box .desc > p img {
        width: calc(16 / 164 * 100%);
    }

    #talk_body dd, 
    .info_taidan_txt dd {
        line-height: 1.75;
        width: 75%;
    }
    #index_nav ul {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #index_nav li {
        width: calc(1 / 8 * 100% - 10px);
        padding: 0 5px;
        border: 0 none transparent;
    }
    #index_nav a {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        height: 100%;
        padding: 0;
        box-sizing: border-box;
        align-items: flex-start;
        position: relative;
        padding-left: 15px;
    }
    #index_nav .title {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }
    #index_nav .title img {
    }
    #index_nav .date {
        transform: rotate(90deg);
        white-space: nowrap;
        width: 14em;
        text-align: left;
        position: absolute;
        top: 18.5%;
        left: 10px;
        transform-origin: left;
        color: #e61740;
        line-height: 1;
    }
    #information li, 
    #information_free li {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    #information .info_title, 
    #information_free .info_title{
        max-width: 100%;
        display: block;
    }
    #information li .info_desc, 
    #information_free li .info_desc {
        max-width: 100%;
        line-height: 1.75;

    }
    #information .info_title p, 
    #information_free .info_title p {
        line-height: 1.5;
        font-size: 20px;
    }
    #information li .info_desc p, 
    #information_free li .info_desc p {
        line-height: 1.75;
    }
}

@media (min-width: 961px) {
    
    #index_nav .date {
        top: 98px;
    }
}