@charset "UTF-8";

html,body,.visual_area {
height:100%;
}

.visual_area{ 
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
height: calc(100% - 150px);
}

.works_title{
margin: 0;
padding: 40px 5%;
background: none;
background-color: white;
}

.works_detail{
margin: 0;
padding: 60px 5% 100px;
background: url(../img/section_gray_bg.jpg) center top no-repeat;
background-color: #f1f1f1;
}

.works_title .works_name{
font-size:2.6rem;
text-align: left;
padding-bottom: 15px;
margin: 0;
background: none;
color: black;
line-height: 1.4em;
font-weight: bold;
}

.works_title .works_name+p{
font-size:1.2rem;
text-align: left;
padding-bottom: 0;
margin-bottom: 0;
font-weight: normal;
line-height: 1.6em;
}

.works_title .works_name+p a{
text-decoration: none;
color: black;
background: url(../img/popup_black.svg) right center no-repeat;
background-size: 10px 100%;
padding-right: 16px;
}

.works_name+p a:hover{
opacity: 0.6;
transition: .3s;
}

.works_detail dl{
display:flex;
flex-wrap:wrap;		
}

.works_detail dt{
padding: 40px 0;
width: 15%;
border-top: 1px solid #cdcdcd;
font-size: 1.4rem;
font-weight: bold;	
line-height: 1.8em;
}

.works_detail dd{
padding: 40px 0;
width: 85%;
border-top: 1px solid #cdcdcd;
font-size: 1.4rem;
font-weight: normal;	
line-height: 1.8em;
}

.works_detail dt:last-of-type,dd:last-of-type{
border-bottom: 1px solid #cdcdcd;
}

.works_img{
margin: 50px auto 0;
text-align: center;
}

.works_img img{
display:inline-block;
margin-bottom: 30px;
border: 1px solid #cdcdcd;
}

.works_img img:last-child{
margin-bottom: 0;
}

.works_links{
display:flex;
justify-content:center;
margin-top: 80px;
}

.works_links a,.works_links button{
width: 70px;
height: 70px;
background: black;
border-radius: 3px;
text-indent: -9999px;
margin: 0 1px;
border: 0;
cursor : pointer;
}

.works_links .disabled{
	opacity: 0.7;
	pointer-events: none;
}

.works_links .hvr-sweep-to-left{
background: url(../img/arrow_white.svg) center center no-repeat;
background-size: 7px 100%;
background-color: black;
transform:rotate(180deg);
}

.works_links .hvr-sweep-to-top{
background: url(../img/home_icon.svg) center center no-repeat;
background-size: 16px;
background-color: black;
}

.works_links .hvr-sweep-to-right{
background: url(../img/arrow_white.svg) center center no-repeat;
background-size: 7px 100%;
background-color: black;
}

/* スマホ用 */
@media screen and (max-width:640px){

.logo {
position: absolute;
top: 20px;
right: 20px;
}

.logo img{
width: 100px;
}

.visual_area{
background-size:cover;
height: 230px;
}

.works_title{
padding: 20px 5%;
}

.works_title .works_name{
font-size:2.2rem;
text-align: left;
padding-bottom: 10px;
margin: 0;
background: none;
color: black;
line-height: 1.4em;
font-weight: bold;
}

.works_detail{
margin: 0;
padding: 50px 5%;
background: url(../img/section_gray_bg.jpg) center top no-repeat;
background-color: #f1f1f1;
background-size: 100%;
}

.works_detail dl{
display: block;	
}

.works_detail dt{
padding: 20px 0 10px;
width: 100%;
border-top: 1px solid #cdcdcd;
font-size: 1.4rem;
font-weight: bold;	
line-height: 1.8em;
}

.works_detail dd{
padding: 0 0 20px;
width: 100%;
border-top: none;
font-size: 1.4rem;
font-weight: normal;	
line-height: 1.8em;
}

.works_detail dt:last-of-type{
border-bottom:none;
}

.works_img img{
width: 100%;
}

.works_links{
margin-top: 50px;
}
}