/*-------------------------------------------------------------------------------------------works_top_menu----------*/

.works #wrapper{
  padding-top: 20lvh;
}
.works .menu{
  position: relative;
  width: 100%;
}
.works .menu .tit{
  font-size: 26px;
  font-weight: bold;
  padding-bottom: 0;
  margin-bottom: 30px;
}
.works .menu ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.works .menu ul li{
  width: 47%;
  font-size: 15px;
}
.works .menu ul li a{
  display: block;
  margin-bottom: 4%;
  padding-bottom: 4%;
  border-bottom: 1px solid #ddd;
}
.works .menu ul li a .ico_arrow{
  width: 21px;
  height: 10px;
}

@media screen and (max-width:1100px){
  
  .works #wrapper{
    padding-top: 10lvh;
  }
  .works .cont:first-child{
    margin-bottom: -100px;
  }
  .works .menu{
    width: 100%;
  }
  .works .menu ul li{
    font-size: 14px;
  }
  
}

@media screen and (max-width:650px){
  
  .works #wrapper{
    padding-top: 5%;
  }
  .works .cont:first-child{
    margin-bottom: 0;
  }
  .works .menu .tit{
    font-size: 16px;
    margin-bottom: 3%;
  }
  .works .menu ul li{
    width: 100%;
    font-size: 13px;
  }
  .works .menu ul li a{
    margin-bottom: 3%;
    padding-bottom: 2%;
  }
}

  
/*-------------------------------------------------------------------------------------------single----------*/


.works_single #sp_nav_list,
.works_single #main_cont,
.works_single .video_area{
  width: 72%;
}
.works_single #side_visual{
  width: 28%;
}
.works_single #main_cont{
  margin-left: 28%;
}

.works_article .head .cat{
  display: inline-block;
  margin: 0 2% 2% 0;
  padding: 0 3%;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  color: #919394;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2em;
  border: 1px solid #ddd;
  background-color: #fff;
}
.works_article .head .tit{
  font-size: 36px;
  padding-top: 5%;
}
.works_article .date{
  padding-bottom: 150px;
  font-size: 13px;
  line-height: 3.3;
}
.works_article .date .member{
  padding-left: 5%;
  line-height: 2.5;
  color: #6c6e6f;
}
.works_article .date a{
  text-decoration: underline;
}
.works_article .date a:hover{
  text-decoration: none;
}
.works_article .read{
  position: relative;
  padding: 150px 0;
  line-height: 2.5;
}
.works_article .read::before,
.works_article .read::after{
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  background-color: #d5d6d6;
  width: 60px;
  height: 1px;
}
.works_article .read::before{
  top: 0;
}
.works_article .read::after{
  bottom: 0;
}
.works_article h4{
  padding-top: 150px;
  margin-bottom: 20px;
}
.works_article .cont p{
  margin-bottom: 100px;
}
.works_article .comment{
  font-size: 13px;
}
.wp-block-image{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wp-block-image img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/*youtube*/

.wp-block-embed__wrapper{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 56.25%;
}
.wp-block-embed__wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.wp-block-image,
.wp-block-embed__wrapper{
  margin-bottom: 70px;
}
.works_article .more_btn{
  margin: 100px 0 0 auto;
}

@media screen and (max-width:1100px){
  
 .works_single #sp_nav_list,
 .works_single #main_cont,
 .works_single .video_area{
   width: 84%;
 }
 .works_single #side_visual{
   width: 16%;
 }
 .works_single #main_cont{
   margin-left: 16%;
 }
 .works_article .head .tit{
   font-size: 32px;
 }
 .works_article .date{
   padding-bottom: 120px;
 }
 .works_article .read{
   padding: 120px 0;
 }
 .works_article h4{
   font-size: 26px;
 }
}

@media screen and (max-width:650px){
  
  .works_single #sp_nav_list,
  .works_single #main_cont,
  .works_single .video_area{
    width: 100%;
  }
  .works_single #side_visual{
    width: 100%;
  }
  .works_single #main_cont{
    margin-left: 0;
  }
  .works_article .head .cat{
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    padding: 0 4%;
    letter-spacing: 0.2em;
    font-size: 11px;
    color: #aaa;
  }
  .works_article .head .tit{
    font-size: 25px;
  }
  .works_article .date{
    padding-bottom: 35%;
  }
  .works_article .read{
    padding: 25% 0;
    font-size: 15px;
    letter-spacing: 0.12em;
    line-height: 2.3;
  }
  .works_article h4{
    font-size: 20px;
    padding-top: 40%;
    margin-bottom: 0;
  }
  .works_article .comment{
    font-size: 12px;
  }
  .wp-block-image,
  .wp-block-embed__wrapper{
    width: 110%;
    margin: 0 0 50px -5%;
  }
  .works_article .more_btn{
    padding-top: 20%;
  }
}


/*-------------------------------------------------------------------------------------------pagenation----------*/


.wp-pagenavi{/* 全体 */
  margin: 25% 0 0;
  font-size: 12px;
}
.pages{/* 左の表記 */
  margin-right: 20px;
}
.wp-pagenavi .current,
.wp-pagenavi a.page{/* ボタン */
  margin: 0 8px 8px 0;
  display: inline-block;
  border: solid 1px #eaeaea;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
}
.wp-pagenavi .current{/* カレント数字 */
  border: none;
  background: var(--color-yellow);
  color: #fff;
}
.wp-pagenavi a.page:hover{/* マウスオーバー */
  background: var(--font-gray);
  border-color: var(--font-gray);
  color: #fff;
}
.wp-pagenavi .first,
.wp-pagenavi .extend{/* ... */
  margin-right: 10px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink{/* 記号の削除 */
  display: none;
}