@charset "UTF-8";

@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}


/*PC*/
@media print, screen and (min-width: 768px) {
#works {
position:relative;
margin: 0 auto 160px;
z-index: 5;
}

#works .slider{
width: 90%;
position: relative;
margin:80px auto;
}

#works .slider .slick-slide{
margin:0 3px;
}

#works .red_ttl2{
width: 90%;
font-size: 2rem;
font-weight: 700;
line-height: 1;
margin: 0 auto 40px;
position: relative;
padding-left:20px;
box-sizing: border-box;
}

#works .red_ttl2::before{
content: "";
position: absolute;
top: 12px;
left: 0;
width: 10px;
height: 10px;
background: #6F59C5;
}

#works .box {
width: 55%;
margin: 0 auto 80px;
}
#works .mokuji{
width: 100%;
margin: 0 auto 30px;
}
#works .mokuji a{
width: 100%;
position: relative;
display: block;
color: #fff;
background-color: #443E6E;
border: 1px solid #443E6E;
text-align: center;
font-size: 1rem;
letter-spacing: 0.05em;
padding: 10px 30px;
box-sizing: border-box;
border-radius: 6px;
transition: 0.3s;
}
#works .mokuji a::after {
position: absolute;
content: "";
background-image: url("../images/com/btn-arrow-g.svg");
background-size: cover;
width: 30px;
height: 30px;
top: 50%;
left: 93%;
transform: translate(-50%, -50%);
transition: 0.3s;
}


#works table {
width: 95%;
margin:auto;
line-height: 1.2;
font-size:.9rem;
border-top: solid 1px #cccccc;
border-left: solid 1px #cccccc;
}
#works table tr:nth-child(2n) {
background: rgba(210, 194, 254, 0.05);
}
#works table td {
display: block;
vertical-align: middle;
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
padding:15px 30px;
box-sizing: border-box;
}



}
/*sp*/
@media only screen and (max-width: 767px) {
#works {
position:relative;
margin: 0 auto 160px;
z-index: 5;
}

#works .slider{
width: 90%;
position: relative;
margin:30px auto;
}

#works .slider .slick-slide{
margin:0 5px;
}

#works .slider .slick-slide img{
width: 100%;
height: auto;
}

#works .red_ttl2{
width: 90%;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
margin: 0 auto 20px;
position: relative;
padding-left:20px;
box-sizing: border-box;
}

#works .red_ttl2::before{
content: "";
position: absolute;
top: 8px;
left: 0;
width: 10px;
height: 10px;
background: #6F59C5;
}

#works .box {
width: 90%;
margin: 0 auto 40px;
}
#works .mokuji{
width: 100%;
margin: 0 auto 20px;
}
#works .mokuji a{
width: 100%;
position: relative;
display: block;
color: #fff;
background-color: #443E6E;
border: 1px solid #443E6E;
text-align: center;
font-size: 1rem;
letter-spacing: 0.05em;
padding: 10px 30px;
box-sizing: border-box;
border-radius: 6px;
transition: 0.3s;
}
#works .mokuji a::after {
position: absolute;
content: "";
background-image: url("../images/com/btn-arrow-g.svg");
background-size: cover;
width: 30px;
height: 30px;
top: 50%;
left: 93%;
transform: translate(-50%, -50%);
transition: 0.3s;
}


#works .red_ttl{
width: 90%;
margin: 0 auto 30px;
text-align: center;
}

#works table {
width: 95%;
margin:auto;
line-height: 1.4;
border-top: solid 1px #cccccc;
border-left: solid 1px #cccccc;
font-size:.8rem;
}
#works table tr:nth-child(2n) {
background: rgba(210, 194, 254, 0.05);
}
#works table td {
display: block;
vertical-align: middle;
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
padding: 15px;
box-sizing: border-box;
}


}