@charset "UTF-8";
/* Index CSS Document */

#detail {
    padding: 0 0 125px;
}

.pl_detail--inner {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 70px;
}

.pl_detail--head {
    margin-bottom: 35px;
}

.pl_ttl--detail {
    font-size: 31px;
    font-weight: 700;
    line-height: 1.61290322em;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.l_news--item--cat {
    display: inline-block;
    padding: 3px 15px;
    background-color: #fff;
    border: 1px solid #707070;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 5px;
}

.pl_detail--date {
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.057em;
    line-height: 1;
}

.pl_detail--article {
    margin-bottom: 100px;
}

.pl_detial--article:last-child {
    margin-bottom: 0;
}

.pl_detail--article .img {
    margin-bottom: 30px;
}

.pl_detail--article .headline {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.pl_detail--article .txt p {
    font-size: 16px;
    letter-spacing: 0.075em;
    ;
    line-height: 1.85em;
    margin-bottom: 1.85em;
}

.pl_ttl--article .txt p:last-child {
    margin-bottom: 0;
}

.p_btn {
    margin: 0 auto;
}

@media screen and (max-width: 375px) {
    #detail {
        padding: 30px 0 45px;
    }

    .pl_detail--inner {
        width: 100%;
        margin-bottom: 35px;
    }

    /*
     - [x] [Styling] Category Labels as Pill Shapes
        - [x] Update `_index.css` for Top page
        - [x] Update `_news.css` for Archive page
        - [x] Update `_single.css` for Single page
    - [x] [Layout] Verify vertical placement above titles
        - [x] Verify `assets/layout/news.php`
        - [x] Verify `news.php`
        - [x] Verify `single.php`
    - [x] Final Verification across all pages
    */

    .pl_ttl--detail {
        font-size: 21px;
    }

    .pl_detail--article .img {
        margin-bottom: 25px;
    }

    .pl_detail--article .headline {
        font-size: 17px;
        margin-bottom: 15px;
    }

    .pl_detail--article .txt p {
        font-size: 16px;
    }
}

/*Youttubeレイアウト*/
.VideoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.VideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}