@charset "UTF-8";

#feature-journal .feature-journal-guest-item {
    background: #f8f8f8;
}
#feature-journal .feature-journal-guest-item #item-list{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
#feature-journal .feature-journal-guest-item__img .image{
    width: 100%;
    aspect-ratio: 6 / 4;
    background-color: #999999;
}

#feature-journal .bg_none::before {
    display: none !important;
}

#feature-journal .bg {
    position: relative;
}

#feature-journal .bg::before {
    position: absolute;
    display: block;
    content: "";
    background: #f5e9de;
    z-index: -1;
}

#feature-journal .feature-journal-article-img figcaption {
    color: #006450;
}
#feature-journal .feature-journal-guest-list-img{
    background: initial;
}
#feature-journal .is-comingsoon .feature-journal-guest-list-img{
    background: #ececec;
}

/*hacobune-univideo*/
#feature-journal .hacobune-app-container {
    padding: 0;
}

#feature-journal .hacobune-unit-video-outline {
    padding: 0;
}

/*pc*/
@media screen and (min-width: 768px) {
    #feature-journal .feature-journal-guest-item:before {
        background: #f8f8f8;
    }
    #feature-journal .feature-journal-guest-profile dd{
        line-height: 1.6 !important;
    }
    #feature-journal .bg_left::before {
        left: 50%;
        right: auto !important;
        transform: translateX(-50vw) !important;
    }

    #feature-journal .bg_right::before {
        left: auto !important;
        right: 50%;
        transform: translateX(50vw) !important;
    }

    #feature-journal .bg_left::before,
    #feature-journal .bg_right::before {
        height: 250px;
        width: calc(50vw + 600px);
        top: 160px;
    }

    /*vol5_1*/
    #feature-journal.vol5_1 .feature-journal-article-headline.bg.bg_left::before {
        top: 100px;
        height: 140px;
    }
    #feature-journal.vol5_1 .feature-journal-article-headline.bg:nth-of-type(2):before{
        top: 160px;
        height: 140px;
    }
    #feature-journal.vol5_1 .feature-journal-article-headline.bg.bg_right{
        padding-top: 132px;
    }
    #feature-journal.vol5_1 .feature-journal-article-sec p {
        margin-top: 55px;
    }

        /*vol5_2*/
    #feature-journal.vol5_2 .feature-journal-article-headline.bg.bg_left::before {
        top: 100px;
        height: 140px;
    }
        #feature-journal.vol5_2 .feature-journal-article-headline.bg.bg_right::before {
        top: 100px;
        height: 160px;
    }

    /*vol5_3*/
    #feature-journal.vol5_3 .feature-journal-article-headline.bg.bg_left::before {
        top: 100px;
        height: 140px;
    }
    #feature-journal.vol5_3 .feature-journal-article-headline.bg.bg_right::before {
        top: 100px;
        height: 140px;
    }
    #feature-journal.vol5_3 .feature-journal-article-sec p {
        margin-top: 50px !important;
    }

    /*vol5_4*/
    #feature-journal.vol5_4 .feature-journal-article-img {
      max-width: 800px;
    }
    #feature-journal.vol5_4 .feature-journal-article-headline.bg.bg_left::before {
        top: 100px;
        height: 140px;
    }
    #feature-journal.vol5_4 .feature-journal-article-headline.bg.bg_right::before {
        top: 100px;
        height: 140px;
    }
    #feature-journal.vol5_4 .feature-journal-article-sec p {
        margin-top: 50px !important;
    }

    /*vol5_5*/
    #feature-journal.vol5_5 .feature-journal-article-ttl {
        margin-right: -100px;
        letter-spacing: 0.02em;
    }
    #feature-journal.vol5_5 .feature-journal-article-img {
      max-width: 800px;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-left {
        margin-left: 0;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-right {
        margin-right: 0;
    }
    #feature-journal.vol5_5 .feature-journal-article-headline.bg.bg_left::before {
        top: 162px;
        height: 140px;
    }
    #feature-journal.vol5_5 .feature-journal-article-headline.bg.bg_right::before {
        top: 160px;
        height: 140px;
    }
    #feature-journal.vol5_5 .feature-journal-article-sec p {
        margin-top: 50px !important;
    }
    /*vol5_6*/
	#feature-journal.vol5_6 .bg_left::before, #feature-journal.vol5_6 .bg_right::before {
        height: 160px;
    }
    #feature-journal.vol5_6 .sec01,
	#feature-journal.vol5_6 .sec02 {
    position: relative;
     }
	#feature-journal.vol5_6 .sec01 {
    text-align: left;
    margin-left: 0;
    }
    #feature-journal.vol5_6 .sec01 figcaption {
    position: absolute;
    right: 0;
    top: 80px;
    width: 450px;
    }
    #feature-journal.vol5_6 .sec02 {
    margin-right: 0;
    }
    #feature-journal.vol5_6 .sec02 figcaption {
    position: absolute;
    right: 15px;
    bottom: 80px;
    width: 430px;
    }
    #feature-journal.vol5_6 .sec03 {
    width: 90%;
    margin: 75px auto 0;
    }
    #feature-journal.vol5_6 .sec04 {
    width: 90%;
    margin-left: 0;
    }

        /*vol5_7*/
    #feature-journal.vol5_7 .feature-journal-article-img {
      max-width: 800px;
    }
    #feature-journal.vol5_7 .feature-journal-article-headline.bg.bg_left::before {
        top: 162px;
        height: 140px;
    }
    #feature-journal.vol5_7 .feature-journal-article-headline.bg.bg_right::before {
        top: 160px;
        height: 140px;
    }
    #feature-journal.vol5_7 .feature-journal-article-sec p {
        margin-top: 50px !important;
    }
    /* vol5_8 */
    #feature-journal.vol5_8 .bg_left::before, #feature-journal .bg_right::before {
        height: 140px;
    }
     /* vol5_8 */
}
/*sp*/
@media screen and (max-width: 767px) {
    #feature-journal {
        overflow: hidden;
    }

    /*bg*/
    #feature-journal .feature-journal-article-sec:nth-child(odd) .feature-journal-article-headline:before {
        left: auto;
    }

    #feature-journal .bg_left::before {
        left: -30px;
        height: 110px;
        width: calc(100% + 40px);
        top: 105px;
    }

    /* vol5_8 */
    #feature-journal.vol5_8 .bg_left::before {
        height: 150px;
        width: calc(100% + 47px);
    }
    #feature-journal .bg_right::before {
        height: 150px;
        width: calc(100% + 47px);
        top: 105px;
    }
    /* vol5_8 */

    #feature-journal .bg_right::before {
        height: 110px;
        width: calc(100% + 40px);
        top: 105px;
    }

    /*img*/
    #feature-journal .img-center img {
        width: 100vw;
        margin: 0 calc(50% - 50vw);
    }

    #feature-journal .img-margin img {
        width: 90%;
    }

    #feature-journal .img-left img {
        width: 95vw;
        margin-left: calc(50% - 50vw);
    }

    /* vol5_8 */
    #feature-journal.vol5_8 .img-left.sec_03 img {
        width: 64vw;
        margin-left: calc(50% - 80vw);
    }
    #feature-journal.vol5_8 .img-right.sec_03 img {
        width: 64vw;
        margin-right: calc(50% - 80vw);
    }
    #feature-journal .feature-journal-article-yokoku p {
        text-align: left;
    }
     /* vol5_8 */

    #feature-journal .img-right img {
        width: 95vw;
        margin-right: calc(50% - 50vw);
    }

    /*vol5_1*/
    #feature-journal.vol5_1 .bg_left::before {
        top: 42px;
        height: 142px;
        left: -80px !important;
    }

    #feature-journal.vol5_1 .bg_right::before {
        top: 77px;
        height: 140px;
        left: 42px !important;
        }

    #feature-journal .feature-journal-guest-item #item-list li.list-item {
        width: calc((100% - 40px) / 2) !important;
    }

    /*vol5_2*/
    #feature-journal.vol5_2 .feature-journal-article-headline.bg.bg_left::before {
        left: -80px;
        top: 40px;
        height: 150px;
    }
    #feature-journal.vol5_2 .feature-journal-article-headline.bg.bg_right::before {
        right: -90px;
        height: 150px;
        top: 40px;
        left: inherit;
    }

    /*vol5_3*/
    #feature-journal.vol5_3 .feature-journal-article-headline.bg.bg_left::before {
        left: -80px;
        top: 70px;
        height: 150px;
    }
    #feature-journal.vol5_3 .feature-journal-article-headline.bg.bg_right::before {
        right: -90px;
        height: 150px;
        top: 40px;
        left: inherit;
    }

    /*vol5_4*/
    #feature-journal.vol5_4 .ttl-wide {
      margin-right: -15px;
      width: calc(100% + 15px);
    }
    #feature-journal.vol5_4 .feature-journal-article-headline.bg.bg_left::before {
        left: -80px;
        top: 70px;
        height: 150px;
    }
    #feature-journal.vol5_4 .feature-journal-article-headline.bg.bg_right::before {
        right: -90px;
        height: 133px;
        top: 88px;
        left: inherit;
    }

    /*vol5_5*/
    #feature-journal.vol5_5 .ttl-wide {
      margin-right: -15px;
      width: calc(100% + 15px);
    }
    #feature-journal.vol5_5 .feature-journal-article-headline.bg.bg_left::before {
        left: -80px;
        top: 105px;
        height: 150px;
    }
    #feature-journal.vol5_5 .feature-journal-article-headline.bg.bg_right::before {
        right: -90px;
        height: 133px;
        top: 88px;
        left: inherit;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-vertical:has(img) {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-left.img-vertical {
        text-align: left;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-right.img-vertical {
        text-align: right;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-vertical img {
        width: 84vw;
        margin: 0;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-vertical figcaption {
        width: calc(84vw - 15px);
        padding-inline: 15px;
    }
    #feature-journal.vol5_5 .feature-journal-article-img.img-vertical + .feature-journal-article-img.img-vertical figcaption {
        width: calc(100% - 30px);
    }
    /*vol5_6*/
    #feature-journal.vol5_6 .feature-journal-article-headline.bg.bg_left::before {
    left: -80px;
    top: 104px;
    height: 150px;
    }
    #feature-journal.vol5_6 .feature-journal-article-headline.bg.bg_right::before {
    right: -80px;
    top: 104px;
    height: 150px;
    }
    #feature-journal.vol5_6 .feature-journal-article-img figcaption {
        margin-top: 12px;
    }
    #feature-journal.vol5_6 .feature-journal-article-img:has(img) {
    width: 100%;
    }
    #feature-journal.vol5_6 .feature-journal-article-img.is-aspect-portrait.sec01-1 img {
    width: 310px;
    margin-left: calc(100% - 110vw);
    }
	#feature-journal.vol5_6 .sec01 .is-aspect-portrait img {
    width: 310px;
    margin-right: calc(100% - 110vw);
    }
	#feature-journal.vol5_6 .sec02 .is-aspect-portrait img {
    width: 350px;
    }
    #feature-journal.vol5_6 .sec02 figcaption {
    width: 100%;
    word-break: break-all;
    }
    #feature-journal.vol5_6 .feature-journal-article-img.sec03-1 img {
    width: 340px;
    margin-left: calc(100% - 102vw);
    }
	#feature-journal.vol5_6 .feature-journal-article-img.sec03 img {
    width: 340px;
    margin-right: calc(100% - 102vw);
    }
    #feature-journal.vol5_6 .feature-journal-article-img.sec04-1 img {
    width: 240px;
    margin-left: calc(100% - 128vw);
    }
	#feature-journal.vol5_6 .feature-journal-article-img.sec04 img {
    width: 240px;
    margin-right: calc(100% - 128vw);
    }

    /*vol5_7*/
    #feature-journal.vol5_7 .feature-journal-article-headline.bg.bg_left::before {
        left: -80px;
        top: 105px;
        height: 150px;
    }
    #feature-journal.vol5_7 .feature-journal-article-headline.bg.bg_right::before {
        right: -90px;
        height: 133px;
        top: 75px;
        left: inherit;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-vertical:has(img) {
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-left.img-vertical {
        text-align: left;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-right.img-vertical {
        text-align: right;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-vertical img {
        width: 70vw;
        margin: 0;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-vertical figcaption {
        width: calc(84vw - 15px);
        padding-inline: 15px;
    }
    #feature-journal.vol5_7 .feature-journal-article-img.img-vertical + .feature-journal-article-img.img-vertical figcaption {
        width: calc(100% - 30px);
    }
    #feature-journal.vol5_7 .feature-journal-article-yokoku p {
        letter-spacing: -0.04em;
    }
}