@charset "UTF-8";

.wrap {
    width: 100%;
    border-top: #a8a8a8 1px solid;
    background-image: url(../images/common/shida_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    background-attachment: fixed;
    }



/* main */
main {
    width: 960px;
}

main h1,
main h2 {
    font-family: 'Macondo', cursive;
    font-size: 2.5rem;
    /* 37px */
    display: flex;
    color: #6a6367;
    margin-bottom: 50px;
}

main h1::before,
main h2::before {
    content: "";
    display: inline-block;
    margin-right: 12px;
    border-top-right-radius: 38px;
    color: #fff;
    padding-left: 38px;
    background-color: #ffcbcb;
}

/* category */
.works_year01{
    width: 100%;
    border-top: #616161 1px solid;
    border-bottom: #616161 1px solid;
    padding: 20px 0 ;
    display: flex;
    font-size: 1.5rem;
    justify-content: space-between;
    margin-bottom: 50px;
}

.works_year01 p{
    font-size: 1.5rem;/* 24px */
}


/* works */
.works{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
}

/* <ul class="works jc_l"> */
/* 現在は左寄せ（.jc_l）
掲載数が3つになったら.jc_c(センター)並びに変更する */
.jc_c{
    justify-content: center;
}

.jc_l{/* 選択中 */
    justify-content: left;
}


.works .works_list,
.works .p_works_list{
    width: 250px;
    margin: 0 35px;
    margin-bottom: 60px;
}

.works .works_list:last-child,
.works .p_works_list:last-child{
    margin-bottom: 100px;
}



/* works サムネイル */
.works .works_list .w_tmb01,
.works .works_list .w_tmb02,
/* .works .works_list .w_tmb03,
.works .works_list .w_tmb04,
.works .works_list .w_tmb05,
.works .works_list .w_tmb06, */
.works .p_works_list .p_w_tmb01,
.works .p_works_list .p_w_tmb02/* （,）復活の際はカンマ注意 */
/* .works .p_works_list .p_w_tmb03,
.works .p_works_list .p_w_tmb04,
.works .p_works_list .p_w_tmb05,
.works .p_works_list .p_w_tmb06 */{
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
    border: #c4c4c4 1px solid;
}

/* 背景拡大 */
.works .works_list .w_tmb01 a,
.works .works_list .w_tmb02 a,
/* .works .works_list .w_tmb03 a,
.works .works_list .w_tmb04 a,
.works .works_list .w_tmb05 a,
.works .works_list .w_tmb06 a, */
.works .p_works_list .p_w_tmb01 a,
.works .p_works_list .p_w_tmb02 a/* （,）復活の際はカンマ注意 */
/* .works .p_works_list .p_w_tmb03 a,
.works .p_works_list .p_w_tmb04 a,
.works .p_works_list .p_w_tmb05 a,
.works .p_works_list .p_w_tmb06 a */{
    width: 250px;
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    color: transparent;
    transition: all .5s;
}

.works .works_list .w_tmb01 a:hover,
.works .works_list .w_tmb02 a:hover,
/* .works .works_list .w_tmb03 a:hover,
.works .works_list .w_tmb04 a:hover,
.works .works_list .w_tmb05 a:hover,
.works .works_list .w_tmb06 a:hover, */
.works .p_works_list .p_w_tmb01 a:hover,
.works .p_works_list .p_w_tmb02 a:hover/* （,）復活の際はカンマ注意 */
/* .works .p_works_list .p_w_tmb03 a:hover,
.works .p_works_list .p_w_tmb04 a:hover,
.works .p_works_list .p_w_tmb05 a:hover,
.works .p_works_list .p_w_tmb06 a:hover */{
    transform: scale(1.2);
    transition: all .5s;
}

/* works サムネイル画像 */
.works .works_list .w_tmb01 a{
    background-image: url(../images/works/work_2022_tmb02.jpg);
}

.works .works_list .w_tmb02 a{
    background-image: url(../images/works/work_2022_tmb01.jpg);
}

/* .works .works_list .w_tmb03 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .works_list .w_tmb04 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .works_list .w_tmb05 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .works_list .w_tmb06 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
} */



/* p_w_tmb06 サムネイル画像 */
.works .p_works_list .p_w_tmb01 a{
    background-image: url(../images/works/p_work_2022_tmb02.jpg);
}

.works .p_works_list .p_w_tmb02 a{
    background-image: url(../images/works/p_work_2022_tmb01.jpg);
}

/* .works .p_works_list .p_w_tmb03 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .p_works_list .p_w_tmb04 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .p_works_list .p_w_tmb05 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
}

.works .p_works_list .p_w_tmb06 a{
    background-image: url(../images/works/p_work_2022_09_tmb.jpg);
} */


/* works pworks 共通カテゴリー */
.works .works_list .category_title,
.works .p_works_list .category_title{
    color: #fff;
    font-size: 0.875rem;/* 14px */
    padding: 5px 10px;
    background-color: #6a6367;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 15px;
}

.works .works_list .copy a,
.works .p_works_list .copy a{
    transition: all .3s;
}

.works .works_list .copy a:hover,
.works .p_works_list .copy a:hover{
    transition: all .3s;
    opacity: 0.5;
}


/* --- スマホ0~640pxまで --- */
@media screen and (max-width:640px) {
.wrap{
    border: none;
}

header{
    border-bottom: #a8a8a8 1px solid;
}

main {
    width: 100%;
    padding: 40px 20px 0 20px;
    box-sizing: border-box;
    }

main h1,
main h2 {
    font-size: 2rem;/* 37px */
    display: flex;
    color: #6a6367;
    margin-bottom: 35px;
}

main h1::before,
main h2::before {
    content: "";
    display: inline-block;
    margin-right: 14px;
    border-top-right-radius: 38px;
    color: #fff;
    padding-left: 30px;
    background-color: #ffcbcb;
}


/* works */
.works{
    width: 100%;
    display: block;
    flex-wrap: wrap;
    box-sizing: border-box;
   }
   
   /* <ul class="works jc_l"> */
   /* 現在は左寄せ（.jc_l）
   掲載数が3つになったら.jc_c(センター)並びに変更する */
   .jc_c{
       justify-content: start;
   }
   
   .jc_l{/* 選択中 */
       justify-content: start;
   }
   
   
   .works .works_list,
   .works .p_works_list{
       width: 250px;
       margin: 0 auto;
       margin-bottom: 60px;
   }
   
   .works .works_list:last-child,
   .works .p_works_list:last-child{
       margin-bottom: 100px;
   }

   
}