@charset "UTF-8";

/* 全体のレイアウト */
#journalContent {
    text-align: center;
    background-color: #FFF;
    letter-spacing: 0;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #191919;
}
.journalContent__inner{
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* タイトル */
.journalHead h2,
.journal__list__area h2{
    font-family: "dapifer", serif;
    font-weight: 400;
    font-style: normal;
}

/* ヘッダー */
.journalHead h2{
    font-size: 55px;
    font-weight: 500;
    text-align: center;
    padding:35px 0;
    line-height: 1;
    border-top: 1px #191919 solid;
    border-bottom: 1px #191919 solid;
}

/* メタデータ */
.metadisc__area .day{
    display: block;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    padding: 50px 60px 40px;
}
.metadisc__area .j_title{
    font-size: 36px;
    font-weight: 600;
    padding: 0 60px 0;
    border: none;
    margin: 0 0 20px;
}
.metadisc__area .fv__text{
    padding: 80px 60px 70px;
}

/* index__area */
.index__area{
    padding: 70px 120px 0;
    margin-bottom: 70px;
    overflow: hidden;
    font-weight: 600;
    counter-reset: number 0;
}
.index__area  ul{
    padding-top: 15px;
}
.index__area li{
    padding: 30px 0 25px;
    border-top: 1px #707070 solid;
}
.index__area li:last-child{
    border-bottom: 1px #707070 solid;
}
.index__area li:before{
    counter-increment: number 1;
    content: counter(number) "."; 
}

/* profile__area */
.profile__area{
    padding: 60px 60px;
}
.profile__area dt{
    text-align: center;
    margin-bottom: 60px;
    overflow: hidden;
}
.profile__area dd{
    font-size: 26px;
}


/* コンテンツ */
.journalContent__inner h2 {
    padding: 40px 0;
    margin: 0;
    line-height: 1;
    border-top: 1px #333 solid;
    border-bottom: 1px #333 solid;
}
.journalContent__inner .content__box{
    padding: 60px 60px 80px;
}
.journalContent__inner .content__box h4{
    font-size: 36px;
    font-weight: 600;
    padding: 0;
    margin:0 0 30px;
}
.journalContent__inner .content__box h5{
    font-weight: 600;
    margin-bottom: 60px;
    font-size: 1em;
    position: relative;
    /*padding-left: 1em;*/
}
.journalContent__inner .content__box h5::before{
    content: "―";
    /*position: absolute;
    left: 0;*/
}
.journalContent__inner .content__box p{
    padding-bottom:60px;
}
.journalContent__inner figure{
    text-align: center;
    margin-bottom: 70px;
    overflow: hidden;
}
.journalContent__inner figure span{
    display: block;
    overflow: hidden;
}
.journalContent__inner figure figcaption{
    text-align: left;
    font-size: 26px;
    font-weight: 400;
    margin-top: 15px;
}


/* journal__list__area */
.journalContent__inner .journal__list__area h2{
    margin-top: 60px;
    border-bottom: none;
    padding: 80px 0 65px;
    font-size: 32px;
    text-align: center;
}
.journal__list{
    padding: 0 60px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.journal__list dl{
    width: 47.62%;
    margin-bottom: 110px;
    position: relative;
}
.journal__list dt figure{
    margin: 0 0 20px;
    overflow: hidden;
}
.journal__list dt figure img{
    transition: all 0.6s ease;
}
.journal__list dd{
    padding: 0;
    margin: 0;
    font-size: 26px;
    font-weight: 400;
}
.journal__list .day{
    display: block;
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 35px;
}
.journal__list dd.link,
.journal__list dd.link a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 0;
    text-indent: -9999px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* toTop */
.toTop{
    padding-bottom: 180px;
}
.toTop a{
    display: block;
    width: 80%;
    background-color: #191919;
    color: #FFF;
    text-align: center;
    padding: 21px 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    margin: 0 auto;
    border-radius: 70px;
}


@media (min-width: 751px) {
    .sp-image {
        display: none;
    }

    body #bb10th::before{
        background: #fdf000;
    }
    .journal__list dl:hover dt figure img{
        transform: scale(1.1);
    }
}

/* スマートフォン用スタイル */
@media (max-width: 750px) {
    .pc-image {
        display: none;
    }
    .sp-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    #journalContent {
        font-size: 3.73vw;
    }
    body .block-topic-page--article figure,
    body .block-topic-page--article figure img{
        padding: 0;
    }

    /* ヘッダー */
    .journalHead h2{
        font-size: 7.33vw;
        padding:4.66vw 0;
    }

    .metadisc__area .day{
        font-size: 3.2vw;
        padding: 6.66vw 8vw 5.33vw;
    }
    .metadisc__area .j_title{
        font-size: 4.8vw;
        padding: 0 8vw;
        margin-bottom: 2.66vw;
    }
    .metadisc__area .fv__text{
        padding: 10.66vw 8vw 9.33vw;
    }

    .index__area{
        padding: 9.33vw 16vw 0;
        margin-bottom:9.33vw;
    }
    .index__area ul{
        padding-top: 2vw;
    }
    .index__area li{
        padding: 4vw 0 3.33vw;
    }

    .profile__area{
        padding: 8vw 8vw;
    }
    .profile__area dt{
        margin-bottom: 8vw;
        padding: 0 18%;
    }
    .profile__area dd{
        font-size: 3.46vw;
    }

    .journalContent__inner h2 {
        padding: 5.33vw 0;
    }
    .journalContent__inner .content__box{
        padding: 8vw 8vw 10.66vw;
    }
    .journalContent__inner .content__box h4{
        font-size: 4.8vw;
        margin:0 0 4vw;
    }
    .journalContent__inner .content__box h5{
        margin-bottom: 8vw;
    }
    .journalContent__inner .content__box p{
        padding-bottom:8vw;
    }
    .journalContent__inner figure{
        margin-bottom: 9.33vw;
    }
    .journalContent__inner figure figcaption{
        font-size: 3.46vw;
        margin-top: 2vw;
    }

    .journalContent__inner .journal__list__area h2{
        margin-top: 8vw;
        padding: 10.66vw 0 8.66vw;
        font-size: 4.26vw;
    }
    .journal__list{
        padding: 0 8vw 10.66vw;
    }
    .journal__list dl{
        margin-bottom: 14.66vw;
    }
    .journal__list dt figure{
        margin: 0 0 2.66vw;
    }
    .journal__list dd{
        font-size: 3.46vw;
    }
    .journal__list .day{
        font-size: 3.2vw;
        margin-bottom: 4.66vw;
    }

    .toTop{
        padding-bottom: 24vw;
    }
    .toTop a{
        padding: 2.8vw 0;
        font-size: 4.53vw;
        border-radius: 9.33vw;
    }


}
h1.block-topic-page--article-header{display: none;}


/*******************************
    animation
*******************************/
.fadein{
    transition: all 1.8s ease;
    opacity: 0;
}
.fade__under{
    transform: translateY(40%);
    transition: all 1.4s ease;
}
.fade__box.fade__under{
    transform: translateY(0);
    opacity: 1;
    overflow: hidden;
}
.fade__box.fade__under span{
    transform: translateY(60%);
    opacity: 0;
    transition: all 1.5s ease;
    display: block;
}

.fadein.scrollin{
    opacity: 1;
}
.fade__under.scrollin{
    opacity: 1;
    transform: translateY(0);
}
.fade__box.fade__under.scrollin span{
    opacity: 1;
    transform: translateY(0);
}