@charset "utf-8";
/* CSS Document */

/*------------------------------------
        防炎提灯
--------------------------------------*/
.sp_only {
    display: none;
}

/*------- ファーストビュー -------*/
.bouenCont .anchor_caution{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    font-size: 15px;
    font-weight: bold;
    color: #ff1a1a;
    padding: 5px;
    background: #fff9cd;
    border: solid 1px #ff1a1a;
    margin-bottom: 10px;
    border-radius: 30px;
}
.bouenCont .anchor_caution::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../../_images/detail/bouen/icon-caution.gif) no-repeat;
}
.bouenCont .anchor_caution:hover{
    background: #fff;
}
.bouenCont .first_view{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 370px;
    padding: 10px 20px;
    background: url(../../_images/detail/bouen/bg-main.webp) no-repeat;
    margin-bottom: 50px;
    overflow: hidden;
}
.bouenCont .first_view::after{
    content: "";
    display: block;
    position: absolute;
    width: 190px;
    height: 135px;
    background: url(../../_images/detail/bouen/img-main-sticker.gif) ,#Fff;
    background-position: center;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-top-left-radius: 20px;
}
.bouenCont .first_view .copy{
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #fff;
    padding: 8px 25px;
    background: #c40f0f;
    border-radius: 50px;
    margin: 0 auto 10px;
}
.bouenCont .first_view .copy::before,
.bouenCont .first_view .copy::after{
    content: "";
    width: 14px;
    height: 20px;
    background: url(../../_images/detail/bouen/icon-fire.gif) no-repeat;
}
.bouenCont .first_view .h_bouen{
    position: relative;
    font-size: 58px;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    z-index: 0;
}
.bouenCont .first_view .h_bouen::after{
    content: ""attr(data-text)"";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 3px #fff;
    z-index: -1;
}
.bouenCont .first_view .h_bouen .red{
    color: #ff1e1e;
}
.bouenCont .first_view .h_bouen .grad{
    background: linear-gradient(to right,#4e63ff,#ff1c77);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bouenCont .first_view .h_bouen + p{
    display: flex;
    font-size: 13px;
    letter-spacing: 0.04em;
    justify-content: center;
    font-weight: bold;
    width: 470px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
}
.bouenCont .first_view ul{
    width: 470px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
}
.bouenCont .first_view ul li a{
    display: block;
    width: 215px;
    font-size: 17.5px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 10px 15px;
    border: solid 2px #ffffff73;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bouenCont .first_view ul li.estimate a{
    background: #ff4a4a;
}
.bouenCont .first_view ul li.contact a{
    background: #0d85ff;
}
.bouenCont .first_view ul li a:hover{
    opacity: 1;
}
.bouenCont .first_view ul li.estimate a:hover{
    background: #ff8c69;
}
.bouenCont .first_view ul li.contact a:hover{
    background: #54b6f7;
}

@media screen and (max-width: 768px) {
    .bouenCont .anchor_caution{
        margin: 0 20px 10px;
    }
    .bouenCont .first_view{
        background-position-x: center;
        justify-content: left;
    }
    .bouenCont .first_view::after{
        width: 25vw;
        height: 130px;
        background-size: 90%;
    }
    .bouenCont .first_view .copy{
        font-size: 18px;
    }
    .bouenCont .first_view .h_bouen{
        font-size: 8vw;
        letter-spacing: normal;
    }
    .bouenCont .first_view ul li {
        width: 48%;
    }
    .bouenCont .first_view ul li a{
        width: 100%;
        font-size: 16px;
    }
    .bouenCont .first_view .h_bouen + p,
    .bouenCont .first_view ul{
        margin-right: 25vw;
    }
}
@media screen and (max-width: 600px) {
      .bouenCont .first_view .h_bouen + p{
        margin-right: 0;
      }
    .bouenCont .first_view ul li {
        width: 100%;
    }


}
@media screen and (max-width: 480px) {
    .sp_only {
        display: inline;
    }
    .bouenCont .anchor_caution{
        font-size: 13px;
        margin: 0;
        border-radius: 0;
        border: none;
    }
    .bouenCont .first_view{
        padding: 10px 0;
    }
    .bouenCont .first_view::after{
        width: 30vw;
        border-radius: 0;
        height: 90px;
        bottom: 140px;
    }
        
    .bouenCont .first_view .copy{
        font-size: 15px;
        padding: 5px 15px;
    }
    .bouenCont .first_view .h_bouen{
        margin: 0 auto 5px;
    }
    .bouenCont .first_view .h_bouen + p{
        justify-content: left;
        width: 75%;
        margin-bottom: 20px;
    }
    .bouenCont .first_view ul{
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    .bouenCont .first_view ul li {
        width: 100%;
        margin-bottom: 10px;
    }
    .bouenCont .first_view ul li a{
        font-size: 15px;
        padding: 8px;
    }
    .bouenCont .first_view .copy::before,
    .bouenCont .first_view .copy::after{
        width: 10px;
        height: 15px;
        background-size: contain;
    }
}


/*------- コンテンツ -------*/
.bouenCont > section{
    margin-bottom: 50px;
}
.bouenCont .text_box{
    margin-bottom: 30px;
}
.bouenCont .text_box .small{
    font-size: 12px;
}
.bouenCont .link_btn{
    display: block;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 5px;
    background: #ff4848;
    border-radius: 8px;
}
.bouenCont .h_bouen_sub{
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.2em;
    text-align: center;
    padding: 10px;
    border-top: solid 1px;
    border-bottom: solid 1px;
    margin-bottom: 20px;
}
.bouenCont .h_bouen_sub + .text_box{
    text-align: center;
}


@media screen and (max-width: 768px) {
    .bouenCont .text_box{
        margin: 0 20px 30px;
    }
    .bouenCont .h_bouen_sub + .text_box{
        text-align: left;
    }
    .bouenCont .link_btn{
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .bouenCont .h_bouen_sub{
        font-size: 20px;
        letter-spacing: 0.04em;
    }
    .bouenCont .btn_box .link_btn{
        font-size: 16px;
    }

}

/*--- サイズ一覧 ---*/
.bouenCont .list_box{
    display: flex;
    justify-content: space-between;
    padding: 30px 10px 35px;
    background: #f5f5f5;
    margin-top: 20px;
}
.bouenCont .list_box li {
    width: 210px;
    flex-shrink: 0;
}
.bouenCont .list_box li .list_size{
    padding: 15px 10px;
    background: #fff;
    border: solid 1px ;
    border-radius: 10px;
    margin-bottom: 10px;
}
.bouenCont .list_box li .list_size .size_name{
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    color: #b42626;
    padding-bottom: 5px;
    border-bottom: solid 1px #222;
    margin-bottom: 10px;
}
.bouenCont .list_box li .list_size .size_box{
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 200px;
}
.bouenCont .list_box li .list_size .size_box img{
    width: 150px;
    height: auto;
}
.bouenCont .list_box li .list_size .size{
    font-size: 12px;
    line-height: 1.5em;
    padding: 10px 15px;
    background: #f5f5f5;
    margin-bottom: 5px;
}
.bouenCont .list_box li .list_size .detail{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

}
.bouenCont .list_box li .list_size .detail li{
    width: 90px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #2b2b2b;
}

@media screen and (max-width: 768px) {
    .bouenCont .list_box{
        width: 100%;
        justify-content: left;
        column-gap: 15px;
        padding: 30px;
        overflow-x: auto;
    }
}

@media screen and (max-width: 480px) {

}



/*--- 活用シーン ---*/
.bouenCont .h_scene{
    width: 475px;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding-bottom: 10px;
    border-bottom: solid 1px;
    margin-bottom: 15px;
}
.bouenCont .h_scene::before{
    content: "";
    display: block;
    margin-bottom: 15px;
    width: 70px;
    height: 30px;
}
.bouenCont .scene1 .h_scene::before{
    background: url(../../_images/detail/bouen/icon-scene01.gif) no-repeat;
    width: 60px;
    height: 30px;
}
.bouenCont .scene2 .h_scene::before{
    background: url(../../_images/detail/bouen/icon-scene02.gif) no-repeat;

}
.bouenCont .scene3 .h_scene::before{
    background: url(../../_images/detail/bouen/icon-scene03.gif) no-repeat;
}
.bouenCont .h_scene + p{
    margin-bottom: 30px;
}
.bouenCont .scene_box{
    width: 855px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 90px;
}
.bouenCont .scene_box dl{
    width: 480px;
}
.bouenCont .scene_box dl dt{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 5px;
    background: #080808;
    margin-bottom: 10px;
}
.bouenCont .scene_box dl dd ul{
    display: flex;
    justify-content: space-between;
}
.bouenCont .scene_box dl dd ul li {
    width: 155px;
}
.bouenCont .scene_box dl dd ul li div{
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    border:solid 1px;
    padding-top: 5px;
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
     .bouenCont .scene_cont section{
        margin: 0 20px 50px;
     }
     .bouenCont .h_scene{
        width: auto;
     }
    .bouenCont .scene_box{
        width: 100%;
    }
    .bouenCont .scene_box dl{
        width: 56%;
    }
    .bouenCont .scene_box div{
        width: 40%;
    }
    .bouenCont .scene_box dl dd ul li{
        width: 31%;
    }
    .bouenCont .scene_box dl dd ul li div{
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .bouenCont .scene_box{
        flex-direction: column-reverse;
        width: 100%;
        margin-bottom: 50px;
    }
    .bouenCont .scene_box dl{
        width: 100%;
    }
    .bouenCont .scene_box div{
        width: 70%;
        margin: 0 auto 20px;
    }
    .bouenCont .scene_box dl dd ul {
        width: 85%;
        margin: 0 auto;
    }
    .bouenCont .scene_box dl dd ul li{
        width: 30%;
    }
    .bouenCont .scene_box dl dd ul li div{
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .bouenCont .h_scene{
        font-size: 18px;
    }
    .bouenCont .scene_box dl dt{
        font-size: 16px;
    }
    .bouenCont .scene_box dl dd ul{
        width: 100%;
        overflow-x: auto;
        column-gap: 15px;
    }
    .bouenCont .scene_box dl dd ul li{
        width: 38%;
        flex-shrink: 0;
    }

}


/*--- 正規品です ---*/
.bouenCont .video_cont{
    padding: 30px 80px 50px;
    border: solid 1px #ff1b1b;
    border-radius: 20px;
    margin-bottom: 70px;
}
.bouenCont .video_cont .h_video{
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.14em;
    line-height: 1.2em;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: solid 1px #ff1b1b;
    margin-bottom: 15px;
}
.bouenCont .video_cont .h_video mark{
    background: linear-gradient(to bottom,transparent 60%,#fffc1c 60%);
}
.bouenCont .video_cont .h_video mark span{
    color: #ff1b1b;
}
.bouenCont .video_cont .h_video + p{
    margin-bottom: 15px;
    letter-spacing: 0.14em;
}
.bouenCont .video_cont .video_box{
    text-align: center;
    width: 550px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}
.bouenCont .video_cont .video_box iframe{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .bouenCont .video_cont{
        padding: 30px 20px 50px;
        margin: 0 20px 50px;
    }
    .bouenCont .video_cont .video_box{
        width: 85%;
    }
}

@media screen and (max-width: 480px) {
    .bouenCont .video_cont {
        padding: 20px 20px 30px;
    }
    .bouenCont .video_cont .h_video{
        font-size: 17px;
        letter-spacing: 0.04em;
        line-height: 1.5em;
    }
    .bouenCont .video_cont .video_box{
        width: 100%;
    }

}


/*--- 非正規品にご注意ください ---*/
.bouenCont .caution_cont {
    margin-bottom: 40px;
}
.bouenCont .caution_cont .h_caution{
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    padding: 5px;
    background: #de2b2b;
    border-radius: 10px;
    margin-bottom: 5px;
}
.bouenCont .caution_cont .caution_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px 35px 50px;
    background: #f5f5f5;
}
.bouenCont .caution_cont .caution_box .caution_img{
    position: relative;
}
.bouenCont .caution_cont .caution_box .caution_img::after{
    content: "事業所番号：N-1662";
    display: block;
    position: absolute;
    font-size: 13px;
    text-align: center;
    left: 0;
    right: 0;
    bottom: -33px;
    margin: auto;
}

.bouenCont .caution_cont .caution_box p{
    width: 485px;
    letter-spacing: 0.12em;
}
.bouenCont .btn_box{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 485px;
    margin: 0 auto;
}
.bouenCont .btn_box .link_btn{
    font-size: 18px;
    padding: 20px;
    border-radius: 100px;
}
.bouenCont .btn_box .btn_black{
    background: #464646;
}


@media screen and (max-width: 768px) {
    .bouenCont .caution_cont .h_caution{
        margin: 0 20px 5px;
    }
     .bouenCont .caution_cont .caution_box {
        padding: 15px 20px 40px;
     }

     .bouenCont .caution_cont .caution_box .caution_img{
        width: 40%;
     }
     .bouenCont .caution_cont .caution_box p{
        width: 56%;
     }
    .bouenCont .btn_box{
        width: 80%;
    }

}

@media screen and (max-width: 600px) {
    .bouenCont .caution_cont .caution_box .caution_img{
        width: 60%;
        margin: 0 auto;
    }
    .bouenCont .caution_cont .caution_box .caution_img::after{
        position: relative;
        bottom: 0;
    }
    .bouenCont .caution_cont .caution_box p{
        width: 100%;
    }
    .bouenCont .btn_box .link_btn{
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .bouenCont .caution_cont .sp_only{
        margin-bottom: 10px;
    }
    .bouenCont .caution_cont .caution_box .caution_img{
        width: 80%;
        margin-bottom: 10px;
    }
    .bouenCont .btn_box .link_btn{
        border-radius: 15px;
    }
}