@charset "utf-8";

.el_pageTtl_cover{
    position: relative;
    z-index: -1;
}

.el_pageTtl_cover::after{
    content: '';
    display: inline-block;
    width: 460px;
    height: 0px;
    padding-top: 60%;
    background: url("../images/contents_img_work.svg") no-repeat 100% 0%/100%;
    position: absolute;
    top: 0;
    right: 0;
}

#flow.el_pageTtl_cover::after{
    background: url("../images/contents_img_flow.svg") no-repeat 100% 0%/100%;
}

#important.el_pageTtl_cover::after{
    background: url("../images/contents_img_important.svg") no-repeat 100% 0%/100%;
}

#communications.el_pageTtl_cover::after{
    background: url("../images/contents_img_communications.svg") no-repeat 100% 0%/100%;
}

.el_pageTtl{
    position: relative;
    z-index: 9;
    word-break: break-all;
}

.el_pageTtl .bgextend:first-of-type{
    font-size: 2.5rem;
    color: var(--main-color);
}

.el_pageTtl .bgextend:nth-of-type(2){
    font-family: "Outfit", sans-serif;
    font-size: 12rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 15px;
}

.el_under{
    font-weight: 600;
    font-size: 3rem;
}



@media screen and (max-width:1300px){
    .el_pageTtl .bgextend:nth-of-type(2){
        font-size: 8.5vw;
    }
}



@media screen and (max-width:1024px){
    .el_pageTtl .bgextend:first-of-type{
        font-size: 1.8rem;
    }
    
    .el_pageTtl .bgextend:nth-of-type(2){
        font-size: 8rem;
    }
    
    .el_under{
        font-size: 2.2rem;
    }
    
    .el_pageTtl_cover::after{
        width: 35%;
        min-width: 190px;
    }
}




@media screen and (max-width:449px){
    .el_pageTtl .bgextend:nth-of-type(2){
        font-size: 17vw;
    }
}







/*制作実績詳細*/
.el_imgThum{
    max-width: 1000px;
    height: 35vw;
    max-height: 560px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #000;
    text-align: center;
}

.el_imgThum img{
    width: 100%;
}

.el_imgThum__center{
    background-color: #fff;
}

.el_imgThum__center img{
    width: auto;
    height: 100%;
}

.el_figFull{
    width: 100%;
    margin: 20px auto;
}

.el_figFull img{
    width: 100%;
}

.el_worksImg{
    max-width: 1238px;
}

.el_figBorder{
    border: 1px solid #E5E5E5;
}

.el_detailTtl{
    text-align: center;
    margin: 30px auto;
    font-weight: 600;
    font-size: 2.5rem;
}

.el_listBorder{
    display: flex;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #D4D4D4;

}

.el_listBorder dt{
    font-weight: 700;
    width: 150px;
}

.el_listBorder dd{
    flex: 1;
}

.el_box .el_listBorder:last-of-type{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.el_fukidashiBox{
    background-color: #F5F5F5;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 60px;
    border: 1px solid #000;
}

.el_fukidashiBox::after{
    content: '';
    display: inline-block;
    border-right: 40px solid #F5F5F5;
    border-bottom: 40px solid transparent;
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%) rotate(135deg);
    border-radius: 0 10px 0 0;
}

.el_fukidashiBox::before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    position: absolute;
    left: 50%;
    bottom: -21px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 10px 0;
}


.ly_roundBG .bl_roundBG_in:nth-of-type(odd){
    background-color: #fff;
}

.ly_roundBG .bl_roundBG_in:nth-of-type(even){
    background-color: #F9F9F9;
}

.bl_roundBG_in{
    padding: 70px 230px 200px 230px;
    border-radius: 150px 150px 0 0;
}

.ly_roundBG .bl_roundBG_in:not(:first-of-type){
    margin-top: -130px;
}

.ly_roundBG .bl_roundBG_in:last-of-type{
    padding-bottom: 70px;
}

.bl_list{
    list-style: none;
    
}

.bl_list__deci{
    counter-reset: listnum;
    margin: 20px 0;
}

.bl_list__deci li{
    position: relative;
    padding-left: 48px;
    margin-bottom: 25px;
}

.bl_list__deci li::before{
    counter-increment: listnum;
	content: counter(listnum, decimal);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:0;
    left: 0;
    color: #fff;
    background-color: var(--main-color);
    font-weight: 700;
    border-radius: 100vh;
    width: 30px;
    height: 30px;
    font-family: "Outfit", sans-serif;
    font-size: 1.6rem;
}

.bl_list li:last-child{
    margin-bottom: 0;
}

.el_hekomiBox{
    border: 3px solid var(--main-color);
    padding: 50px 30px 30px 30px;
    border-radius: 10px;
    position: relative;
    margin: 60px 0 80px;
}

.el_hekomiBox::before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-right: 3px solid var(--main-color);
    border-bottom: 3px solid var(--main-color);
    position: absolute;
    left: 50%;
    top: -23px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 10px 0;
}

.el_hekomiBox .bl_list{
    margin: 0;
}

.el_themeTxt{
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

.el_themeTxt span{
    background: linear-gradient(transparent 60%, var(--main-color) 40%);
}

.el_figHalf{
    width: 50%;
}

.el_figHalf img{
    width: 100%;
}

.el_figEighty{
    width: 80%;
}

.el_figEighty img{
    width: 100%;
}

.bl_screenShot_flex{
    display: flex;
    justify-content: space-between;
}

.bl_screenShot_flex figure img{
    width: 100%;
}

.bl_screenShot_flex .bl_screenShot_in:first-child{
    width: 55%;
    border-right: 1px solid #C9C9C9;
    padding-right: 5%
}

.bl_screenShot_flex .bl_screenShot_in:last-child{
    width: 40%;
}

.bl_worksNav{
    background-color: var(--main-color);
}

.bl_worksNav_flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

.bl_worksNav_flex dl{
    width: 48%;
}

.bl_worksNav_flex dt{
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.bl_worksNav_flex a:hover img{
    transform: scale(1.08);
}

.bl_worksNav_flex dt img{
    width: 100%;
    transition: 300ms all;
}

.bl_worksNav_flex dd{
    margin-top: 15px;
    font-weight: 700;
}

.el_worksNav_cat{
    background-color: #fff;
    display: inline-block;
    border-radius: 100vh;
    padding: 2px 15px;
    margin-bottom: 10px;
}

.bl_screenShot_cover{
    overflow: hidden;
    position: relative;
    max-height: 600px;
    transition: max-height 0.5s ease-in-out;
}

.bl_screenShot_cover::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
    to bottom,
    rgba(249, 249, 249, 0) 0%,
    rgba(249, 249, 249, 0.4) 80%,
    rgba(249, 249, 249, 1) 100%
  );
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.bl_screenShot_cover.isOpen {
    max-height: 5000px;
}

.bl_screenShot_cover.isOpen::after {
    opacity: 0;
}

.el_viweBtn input{
    position: absolute;
    white-space: nowrap;
    widows: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}

.el_viweBtn label{
    cursor: pointer;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 700;
    width: 100%;
    padding: 25px 0;
}

.el_viweBtn{
    text-align: center;
}

.el_viweBtn label::before{
    content: '+';
    display: inline-block;
    font-size: 2.5rem;
    vertical-align:baseline;
    padding-right: 15px;
}

.el_viweBtn label::after{
    content: 'すべて見る';
    display: inline-block;
}

.bl_screenShot_cover.isOpen + .el_viweBtn label::before{
    content: 'ー';
}

.bl_screenShot_cover.isOpen + .el_viweBtn label::after{
    content: '閉じる';
}





@media screen and (max-width:1300px){
    .bl_roundBG_in{
        padding: 70px 8% 200px 8%;
    }
    
}




@media screen and (max-width:1024px){
    .el_imgThum{
        height: 52vw;
        min-height: 220px;
    }
    
    .el_detailTtl{
        font-size: 1.9rem;
        margin: 20px auto 20px;
    }
    
    .bl_roundBG_in{
    border-radius: 40px 40px 0 0;
    padding: 40px 4.9% 80px;
}
    
    .ly_roundBG .bl_roundBG_in:not(:first-of-type){
    margin-top: -40px;
}
    
    .el_fukidashiBox{
        padding: 25px;
    }
    
    .el_hekomiBox{
        padding: 40px 25px 25px 25px;
    }
    
    .bl_list__deci li{
        padding-left: 42px;
    }
    
    .bl_list__deci li::before{
        font-size: 1.4rem;
        width: 27px;
        height: 27px;
    }
    
    .el_themeTxt{
    font-size: 2.2rem;
}
    
    
    .bl_screenShot_flex{
        display: block;
    }
    
    .bl_screenShot_flex div{
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
    

.bl_screenShot_flex div:last-child{
    width: 100%;
}
    
    .bl_worksNav_flex{
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    
    .bl_worksNav_flex dl{
        min-width: 250px;
        margin: 0 auto 30px;
    }
    
    .bl_worksNav{
        padding-bottom: 80px;
    }
    
    .el_figEighty{
    width: 100%;
}
    
    .bl_screenShot_flex .bl_screenShot_in:first-child{
        width: 100%;
        border-right: none;
    padding-right: 0;
    margin-bottom: 80px;
    }
    
    .bl_screenShot_flex .bl_screenShot_in:last-child{
        width: 100%;
    }
    
    .el_viweBtn label{
        font-size: 1.8rem;
    }
    
    .el_viweBtn label::before{
        font-size: 2rem;
        padding-right: 10px;
    }
    
    .bl_screenShot_cover{
        max-height:300px;
    }
    
    
}






/*制作時にやっていること*/
.bl_toolList{
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}

.bl_toolList dl{
    width: 22%;
    margin-right: 4%;
}

.bl_toolList dl:last-of-type{
    margin-right: 0;
}

.bl_toolList dt{
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    padding: 15px;
    color: #fff;
    background-color: #000;
    border-radius: 20px 0 0 20px;
    position: relative;
    margin-bottom: 15px;
}

.bl_toolList dt::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 42px solid #000;
    border-bottom: 42px solid transparent;
    position: absolute;
    top: 9px;
    right: -21px;
    transform: rotate(45deg);
}

.bl_toolList dl:last-of-type dt{
    border-radius: 20px;
}

.bl_toolList dl:last-of-type dt::after{
    display: none;
}

.bl_toolList dd{
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #000;
}





@media screen and (max-width:1024px){
    .bl_toolList dl{
        min-width: 42%;
        margin: 0 8% 20px 0;
    }
    
    .bl_toolList dl:nth-of-type(even){
        margin-right: 0;
    }
    
    .bl_toolList dt{
        font-size: 1.5rem;
        padding: 12px;
        border-radius: 15px 0 0 15px;
    }
    
    .bl_toolList dl:last-of-type dt{
        border-radius: 15px;
    }
    
    .bl_toolList dt::after{
        border-right:33px solid #000;
        border-bottom:33px solid transparent;
        top: 7px;
        right: -16px;
    }
    
    .bl_toolList dd{
        word-break: break-all;
    }
}






/*仕事で大事にしていること*/
.bl_ankerLink li{
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.bl_ankerLink li:last-child{
    margin-bottom: 0px;
}

.bl_ankerLink li a{
    color: #000;
}

.bl_ankerLink li::before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 3px solid var(--point-color);
    border-bottom: 3px solid var(--point-color);
    transform: rotate(45deg);
    position: absolute;
    top: 6px;
    left: 0;
}



.bl_figFlex{
    display: flex;
}

.bl_figFlex_txt{
    flex: 1;
}

.bl_figFlex_fig{
    width: 25%;
    margin-left: 100px;
    text-align: center;
}

.bl_figFlex_fig img{
    width: 100%;
}

.bl_figFlex_fig figcaption{
    text-align: center;
    margin-top: 20px;
}




@media screen and (max-width:1024px){
    .bl_figFlex{
        display: block;
    }
    
    .bl_figFlex_fig{
        margin-left: 0;
        max-width: 100%;
        margin: 30px auto;
    }
    
    .bl_figFlex_fig{
        width: 290px;
    }
    
    .bl_figFlex_fig img{
         width: 200px;
        max-width: 100%;
    }
    
    
}





/*コミュニケーションスタイル*/
.bl_comFlex{
    display: flex;
}

.bl_comFlex_in{
    width: 48%;
}

.bl_comFlex .bl_comFlex_in:first-child{
    margin-right: 4%;
}

.bl_comFlex_in dt{
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 30px;
}

.bl_comFlex .bl_comFlex_in:first-child dt{
    color: #EA265E;
}

.bl_comFlex .bl_comFlex_in:nth-child(2) dt{
    color: #0F41A5;
}





@media screen and (max-width:1024px){
    .bl_comFlex{
        display: block;
    }
    
    .bl_comFlex .bl_comFlex_in{
        width: 100%;
    }
    
    .bl_comFlex .bl_comFlex_in:first-child{
        margin-bottom: 60px;
    }
    
    .bl_comFlex_in dt{
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    
}






/*制作実績一覧*/
.bl_surchList{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #000;
}


.bl_surchList label{
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    background-color: #fff;
    border-radius: 30px 30px 0 0;
    width: 19.2%;
    max-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    margin-right: 1%;
    transition: 300ms all;
}

.bl_surchList input:checked + label,
.bl_surchList label:hover{
    background-color: var(--point-color);
    color: #fff;
}

.bl_surchList label:last-child{
    margin-right: 0;
}

.bl_siteList .bl_siteList_box{
    margin-bottom: 7.5%;
}

.bl_siteList_box_ttl{
    font-size: 1.6rem;
    margin-top: 15px;
    font-weight: 600;
}

.is-hide {
  display: none;
}

.bl_surchList input{
    position: absolute;
    white-space: nowrap;
    widows: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}



@media screen and (max-width:1024px){
    .bl_surchList label{
        font-size: 1.4rem;
        padding: 15px 0;
        min-width: 110px;
        margin-top: 15px;
    }
    
    .bl_siteList .bl_siteList_box{
    margin-bottom: 80px;
}
    
}