/* head_bg
----------------------------------*/

.head_bg {    
    background-image: url(../img/head_wave.svg),url(../img/works/head_bg.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: contain,cover;
    background-position: center bottom,right 0%;
}
@media (max-width: 575px) {
.head_bg {    
    background-image: url(../img/head_wave_s.svg),url(../img/works/head_bg_s.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: contain,cover;
    background-position: center bottom,center top;
}
}
.head_bg_details {    
    background-image: url(../img/head_wave.svg),url("../img/works/head_bg_details.jpg");
    background-repeat: no-repeat,no-repeat;
    background-size: contain,cover;
    background-position: center bottom,right 0%;
}
@media (max-width: 575px) {
.head_bg_details {    
    background-image: url(../img/head_wave_s.svg),url(../img/works/head_bg_details_s.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: contain,cover;
    background-position: center bottom,center top;
}
}



/* works_area
------------------------------------------------------------*/
.works_area {
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 5%;
    padding-top: 5%;
    color: #727171;
}
.works_mainread {
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 2%;
}
@media (max-width: 575px) {
.works_mainread {
    font-size: 15px;    
}
}
.works_img01 {
    position: absolute;
    top: 0vw;
    right: 10vw;
}
@media (max-width: 1199px) {
.works_img01 {
    position: absolute;
    top: 5vw;
    right: 5vw;
}
}
@media (max-width: 767px) {
.works_img01 {
    position: static;
    text-align: center;
    margin-right: auto;
    margin-left: auto;  
}
}
.works_list {
    display: flex;
    flex-wrap: wrap; /* 折返し可 */
    /*justify-content: space-between;*/
    margin-top: 5%;
}

/* 子要素 */
.works_list li {
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
	cursor: pointer;
	border-radius: 15px;
}
@media screen and (max-width: 767px) {
.works_list li {
    width: 48%;
    margin-left: 1%;
	margin-right: 1%;
}
}
@media screen and (max-width: 575px) {
.works_list li {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 30px;
}
}
.works_list_imgbox {
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
    border-radius: 15px;
    margin-right: 0px;
    margin-left: 0px;
}

.works_list_imgbox img{
 transition:1s all;
	width: 100%;
	height: auto;
	border-radius: 15px;
}
.works_list_imgbox img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
	border-radius: 15px;
}


.works_listttl {
    font-size: 17px;    
    color: #727171;
    margin-top: 10px;
	margin-bottom: 0px;
    text-align: center;
}
@media screen and (max-width: 575px) {
.works_listttl {
    font-size: 20px;  
    margin-top: 10px;
}
}

/* 詳細
------------------------------------------------------------*/
.works_ttl {
    position: relative;
    padding: 0.2rem 0 2rem;
    margin-bottom: 3.5rem;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: #727171;  
}	
@media (max-width: 575px) {
.works_ttl {    
    font-size: 18px;
}	
}
.works_ttl::before {
    position: absolute;
    border-bottom: 7px solid #8DBBE4;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    width: 15vw;
    content: '';
}
.works_imgbox {    
    border-radius: 15px;
}
.works_imgbox img {    
    border-radius: 15px;
}
.works_photolist {
    display: flex;
    flex-wrap: wrap; /* 折返し可 */
    /*justify-content: space-between;*/
    margin-bottom: 5%;
}

/* 子要素 */
.works_photolist li {
    width: 18%;
    margin-left: 1%;
    margin-right: 1%;
    overflow: hidden;    
    margin-bottom: 1%;
	cursor: pointer;
	border-radius: 15px;
}
@media screen and (max-width: 767px) {
.works_photolist li {
    width: 48%;
    margin-left: 1%;
	margin-right: 1%;
}
}
/*@media screen and (max-width: 575px) {
.works_photolist li {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 30px;
}
}*/