@charset "UTF-8";


.l_cont_works > .wrapper{display: flex;max-width: 1440px;margin-right: auto;margin-left: auto;}
.area_h1_title::before{background: url(../img/bg_h1_title.jpg) no-repeat right center;background-size: cover;}
.area_h1_title h1::before,.area_h1_title .wrapper div.title::before{content: "Works";}
.area_h1_title .title_box h1.report::before,.area_h1_title .title_box div.title.report::before{content: "Report";}

.works_contents .list_items{display: grid;flex-wrap: wrap;grid-template-columns:repeat(2,1fr);}

time{color: #AFAFAF;display: block;}
a.keyword{display: inline-block;background: rgb(0 0 0 / .07);border-radius: 3px;padding: 0 15px;font-size: 14px;}  

.works_contents > .title_box h2{font-family: "Shippori Mincho", serif;font-weight: 500;font-weight: 500;text-align: center;font-size: 30px;padding-bottom: 40px;}
.works_contents .list_items li.disp_2{display: none;}
.works_contents .list_items li .image{width: 100%;margin-bottom: 10px;overflow: hidden;}
.works_contents .list_items li .image span{width: 100%;height: 100%;display: grid;place-content: center;background: #F0F0F0;}
.works_contents .list_items li .image span img{object-fit: cover;}
.works_contents .list_items li h3{font-size: 1rem;}
.works_contents .list_items li .text{font-size: 12px;padding-top: 10px;}
.top_box{display: flex;align-items: center;gap: 0 10px;margin-bottom: 5px;}
.top_box span{font-size: 13px;padding: 5px 7px;border: 1px solid #aaa;line-height: 1;}

.detail .works_contents .title_box{padding-bottom: 10px;border-bottom: 2px solid #BD7A50;}
.detail .works_contents .title_box .box{display: flex;align-items: center;}
.detail .works_contents .title_box h1{font-family: "Zen Kaku Gothic Antique", sans-serif;font-weight: 500;line-height: 1.4;padding-top: 10px;}
.detail .works_article{line-height: 1.8;}
.detail .works_article .area_first{padding-bottom: 20px;}
.detail .works_article .box h2{background: #BD7A50;font-size: 18px;color: #FFF;line-height: 1.2;letter-spacing: -0.05rem;}
.detail .works_article .box .image{margin-top: 20px;text-align: center;}
.detail .works_article .box .text{padding: 15px 10px 0;letter-spacing: -0.05rem;}
.detail .works_article .area_cont{display: flex;flex-direction: column;gap: 40px 0;}
.detail .works_article .area_first .image{text-align: center;}
.detail .works_article .area_first .text{padding: 10px;line-height: 2;}

.detail .menu_box{padding: 10px 20px 30px;}
.detail .menu_box .frame{border: 1px solid #ccc;padding: 25px 30px;max-width: 500px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: center;}
.detail .menu_box .frame .title{display: block;width: 100%;text-align: center;margin-bottom: 10px;font-weight: 500;font-size: 18px;font-family: "Zen Kaku Gothic Antique", sans-serif;}
.detail .menu_box .frame ul li{font-size: 14px;padding-bottom: 5px;}
.detail .menu_box .frame ul li a{transition: none;line-height: 1.2;display: inline-block;}
.detail .menu_box .frame ul li a::before{content: "・";}
.detail .menu_box .frame ul li a:hover{color: #BD7A50;text-decoration: underline;}

.detail .back.btn a{max-width: 360px;height: 50px;margin: 0 auto;}

.works_staff .frame{background: rgb(179 124 87 /.05);border-radius: 10px;padding: 25px 30px 30px;max-width: 700px;margin: 0 auto;}
.works_staff .personal_box{display: flex;align-items: center;gap: 0 40px;font-size: 18px;margin-bottom: 15px;}
.works_staff .personal_box .image{ border-radius: 100vh;width: 80px;height: 80px;overflow: hidden;}
.works_staff .personal_box h2 span{display: inline-block;margin-right: 10px;}
.works_staff .frame .text{font-size: 15px;line-height: 1.8;letter-spacing: -0.05rem;}

.area_side_menu{display: flex;flex-direction: column;}
.area_side_menu p.title{font-family: "Yu Gothic", sans-serif;font-weight: 600;border-bottom: 1px solid #BD7A50;padding: 10px 5px 9px;line-height: 1;}
.area_side_menu ul{padding: 10px 5px;}
.area_side_menu ul li a{display: block;}
.menu_search .cont{padding-top: 10px;}
.menu_search label{display: inline-block;height: 33px;width: calc(100% - 90px);}
.menu_search label input[type="search"]{height: 100%;width: 100%;padding: 5px;}
.menu_search .button input[type="submit"]{width: 80px;border: none;height: 34px;background: #BD7A50;color: #FFF;}



.menu_category ul{display: flex;flex-direction: column;gap: 10px 0;}
.menu_keyword ul{display: flex;flex-wrap: wrap;gap: 10px;}
.menu_keyword ul li a{background: rgb(0 0 0 / .07);border-radius: 3px;}

.works_contents .list_items li a{display:block;}
.works_contents .list_items li a:hover{opacity:0.8;}
.works_contents .list_items li .image img{-webkit-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.works_contents .list_items li a:hover .image img{transform:scale(1.1);}

@media screen and (max-width:500px) {
    .works_contents .list_items{display: flex;flex-direction: column;gap: 20px 0;}
    .works_contents .list_items li{width: 100%;}
    .area_h1_title h1.title.category{font-size: 21px;}

}

@media screen and (max-width:767px) {
    .l_cont_works .wrapper{padding-right: 20px;padding-left: 20px;}
    time{font-size: 14px;}
    .l_cont_column{padding-top: 50px;padding-bottom: 50px;}
    .l_cont_column > .wrapper{padding-right: 20px;padding-left: 20px;}

    .area_side_menu ul li a{font-size: 1rem;}

    .menu_keyword ul li a{padding: 4px 14px;}

    .works_contents .list_items li h3{font-size: 15px;}
    .works_contents .list_items li .image{height: 150px;}

    .l_cont_works.detail{padding-top: 20px;}
    .detail .works_contents .title_box h1{font-size: 20px;}
    .detail .works_contents .title_box .box{gap: 0 20px;}
    .detail .menu_box .frame{padding-right: 20px;padding-left: 20px;}
    .detail .menu_box .frame ul li{font-size: 13px;letter-spacing: -0.05rem;}
    .detail .works_article .box .text{padding-right: 0;padding-left: 0;}
    .detail .works_article .box h2 {font-size: 16px;padding: 6px 10px;}
    .detail .works_article .area_first .wrapper{padding-right: 0;padding-left: 0;padding-top: 10px;}
    .detail .works_article .area_first .text{font-size: 14px;padding-right: 0;padding-left: 0;}
    .detail .works_article .area_cont .box{scroll-margin-top: 70px;}

    .detail .back.btn{margin-top: 30px;}
    .detail .back.btn a{height: 40px;}
}

@media screen and (max-width:900px) {
    .l_cont_works > .wrapper{flex-direction: column;}
    .l_cont_column > .wrapper{flex-direction: column;gap: 40px 0;}
    .works_contents .list_items{gap: 20px 10px;}
    .area_side_menu{padding-top: 40px;padding-bottom: 35px;gap: 20px 0;}
}


@media screen and (max-width:1080px) {
    .detail .works_article .area_cont .box{scroll-margin-top: 80px;}
}

@media screen and (min-width:768px) {
    time{font-size: 15px;}
    .l_cont_works{padding-top: 70px;}

    .works_contents section{padding-top: 40px;}

    .l_cont_works > .wrapper{padding-right: 40px;padding-left: 40px;}
    .works_contents .list_items li .image{height: 200px;}

    .detail .works_contents .title_box h1{font-size: 24.81px;}
    .detail .works_contents .title_box .box{gap: 0 40px;}
    .detail .works_article .box h2{padding: 10px;}
    .detail .works_article .area_first .text{font-size: 17px;}

    .menu_category ul li a:hover{color: #BD7A50;}
    .menu_keyword ul li a{font-size: 13px;font-size: 13px;padding: 3px 5px;}
    .menu_keyword ul li a:hover{color: #BD7A50;background: rgb(179 124 87 / .1);}

}

@media screen and (min-width:901px) and (max-width:1080px) {
    .menu_search label{width: 100%;}
    .menu_search .button input[type="submit"]{margin-top: 10px;}
}

@media screen and (min-width:901px) {

    .l_cont_works > .wrapper{gap: 0 60px;}
    .l_cont_works > .wrapper{flex-direction: row;justify-content: space-between;padding-right: 40px;padding-bottom: 100px;padding-left: 40px;}
    .works_contents .list_items{gap: 40px 30px;}
    .area_side_menu{width: 200px;gap: 40px 0;}
    .works_contents{width: calc(100% - 230px);}

}


@media screen and (min-width:1081px) {

    .area_side_menu{width: 260px;}
    .works_contents{width: calc(100% - 320px);}

    .menu_search .button input[type="submit"]{width: 70px;}
    .menu_search label{width: calc(100% - 75px);}
    .detail .works_article .area_cont .box{scroll-margin-top: 95px;}
}


@media screen and (min-width:1180px) {

    .works_contents .list_items{grid-template-columns:repeat(3,1fr);}
}



@media screen and (min-width:1220px) {


}



@media screen and (min-width:1440px) {

}