@charset "utf-8";

body {
    background-color: #000;
}
body:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(../images/comment/bg_pc.jpg) center no-repeat;
    background-size:cover;
}

.comment-wrapper {
    max-width: 1180px;
    margin: auto;
    padding: 8% 2% 4%;
}
.comment-ttl {
    position: relative;
    max-width: 636px;
    width: 100%;
    margin-bottom: 6%;
    z-index: 1;
}
.comment-ttl:after {
    content: "";
    display: inline-block;
    width: 282px;
    height: 168px;
    background-image: url(../images/comment/ttl_deco.png);
    background-size: cover;
    position: absolute;
    top: -48%;
    left: -14%;
    z-index: -1;
}

.comment-box {
    margin-bottom: 10%;
}
.comment-box-txt {
    margin-bottom: 2%;
    font-size: 23px;
    font-weight: 500;
    color: #FFF;
}
.comment-box-txt-small {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.5;
    color: #FFF;
}
.comment-box-name {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 42px;
    font-weight: 600;
    text-align: right;
    color: #FFF;
}
.comment-box-pro {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    display: block;
    font-size: 21px;
    font-weight: 500;
}

.note-txt {
    font-size: 21px;
    font-weight: 500;
    color: #FFF;
    text-align: right;
}


@media screen and (max-width:768px) {
    body:before{
        background:url(../images/comment/bg_sp.jpg);
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    .comment-wrapper {
        padding: 15% 4% 4%;
    }
    .comment-ttl:after {
        top: -40%;
        left: -25%;
    }
    .comment-ttl {
        max-width: none;
        width: 74%;
        margin-bottom: 14%;
    }
    
    .comment-box {
        margin-bottom: 15%;
    }
    .comment-box-txt-small {
        font-size: 22px;
    }
    .comment-box-txt {
        font-size: 15px;
    }
    .comment-box-name {
        font-size: 26px;
    }
    .comment-box-pro {
        font-size: 15px;
    }
    
    .note-txt {
        font-size: 13px;
    }
}