@charset "UTF-8";
/* ===================================================================
CSS information
 file name  : creator.css author     : Ability Consultant style info : クリエイターズカバー
=================================================================== */
/* -----------------------------------------------------------
	.con_works
----------------------------------------------------------- */
.con_works .box_works { margin-top: 65px; overflow: hidden; }
@media only screen and (max-width: 767px) { .con_works .box_works { margin-top: 7%; } }
.con_works .box_works li { float: left; }
.con_works .box_works li a { display: block; text-decoration: none; padding-bottom: 80px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; -moz-transition: background 0.35s, color 0.35s; -o-transition: background 0.35s, color 0.35s; -webkit-transition: background 0.35s, color 0.35s; transition: background 0.35s, color 0.35s; }
@media only screen and (max-width: 767px) { .con_works .box_works li a { padding-bottom: 40%; } }
.con_works .box_works li a .photo img { width: 100%; }
.con_works .box_works li a .photo.video { position: relative; }
.con_works .box_works li a .photo.video:before { content: ""; width: 60px; height: 60px; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(../images/home/ic_play.png) no-repeat center/100% 100%; }
@media only screen and (max-width: 767px) { .con_works .box_works li a .photo.video:before { width: 3.5em; } }
@media only screen and (max-width: 767px) { .con_works .box_works li a .photo.video:before { height: 3.5em; } }
.con_works .box_works li a h4 { width: 90%; margin: 25px auto 0; font-weight: normal; }
@media only screen and (max-width: 767px) { .con_works .box_works li a h4 { margin: 6% auto 0; } }
.con_works .box_works li a .catch { width: 90%; margin: 5px auto 0; font-size: 87%; color: #a5a5a5; -moz-transition: color 0.35s; -o-transition: color 0.35s; -webkit-transition: color 0.35s; transition: color 0.35s; }
@media only screen and (max-width: 767px) { .con_works .box_works li a .catch { margin: 7% auto 0; } }
.con_works .box_works li a .tag { width: 90%; margin: 20px auto 0; font-size: 87%; color: #a5a5a5; -moz-transition: color 0.35s; -o-transition: color 0.35s; -webkit-transition: color 0.35s; transition: color 0.35s; }
@media only screen and (max-width: 767px) { .con_works .box_works li a .tag { margin: 7% auto 0; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) { .con_works .box_works li a .tag { font-size: 87%; } }
@media only screen and (max-width: 767px) { .con_works .box_works li a .tag { font-size: 67%; } }
.con_works .box_works li a .tag span { display: inline-block; border: 1px solid #d1d1d1; padding: .2em .7em; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; margin-right: .5em; margin-bottom: .5em; -moz-transition: border-color 0.35s; -o-transition: border-color 0.35s; -webkit-transition: border-color 0.35s; transition: border-color 0.35s; }
.con_works .box_works li a:hover { background: #afc223; color: #fff; }
.con_works .box_works li a:hover .catch { color: #fff; }
.con_works .box_works li a:hover .tag { color: #fff; }
.con_works .box_works li a:hover .tag span { border-color: #fff; }
@media only screen and (min-width: 1025px) { .con_works .box_works li { width: 25%; }
  .con_works .box_works li:nth-child(4n+1) { clear: left; }
  .con_works .box_works li:first-child + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * { clear: left; } }
@media only screen and (min-width: 1025px) and (max-width: 1920px) { .con_works .box_works li a { height: 430px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 430px; } }
@media only screen and (min-width: 1025px) and (max-width: 1680px) { .con_works .box_works li a { height: 400px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 400px; } }
@media only screen and (min-width: 1025px) and (max-width: 1600px) { .con_works .box_works li a { height: 380px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 380px; } }
@media only screen and (min-width: 1025px) and (max-width: 1440px) { .con_works .box_works li a { height: 360px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 360px; } }
@media only screen and (min-width: 1025px) and (max-width: 1366px) { .con_works .box_works li a { height: 350px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 350px; } }
@media only screen and (min-width: 1025px) and (max-width: 1280px) { .con_works .box_works li a { height: 350px; } }
@media only screen and (min-width: 1025px) { .ie8 .con_works .box_works li a { height: 350px; } }
@media only screen and (min-width: 1025px) and (max-width: 1140px) { .con_works .box_works li a { height: 350px; } }

@media print { .con_works .box_works li { width: 25%; }
  .con_works .box_works li:nth-child(4n+1) { clear: left; }
  .con_works .box_works li:first-child + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *, .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * { clear: left; } }
@media print { .con_works .box_works li a { height: 430px; } }
@media print { .ie8 .con_works .box_works li a { height: 430px; } }
@media print { .con_works .box_works li a { height: 400px; } }
@media print { .ie8 .con_works .box_works li a { height: 400px; } }
@media print { .con_works .box_works li a { height: 380px; } }
@media print { .ie8 .con_works .box_works li a { height: 380px; } }
@media print { .con_works .box_works li a { height: 360px; } }
@media print { .ie8 .con_works .box_works li a { height: 360px; } }
@media print { .con_works .box_works li a { height: 350px; } }
@media print { .ie8 .con_works .box_works li a { height: 350px; } }
@media print { .con_works .box_works li a { height: 350px; } }
@media print { .ie8 .con_works .box_works li a { height: 350px; } }
.ie8 .con_works .box_works li { width: 25%; }
.ie8 .con_works .box_works li:nth-child(4n+1) { clear: left; }
.ie8 .con_works .box_works li:first-child + * + * + * + *, .ie8 .con_works .box_works li:first-child + * + * + * + * + * + * + * + *, .ie8 .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + *, .ie8 .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *, .ie8 .con_works .box_works li:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * { clear: left; }
@media only screen and (max-width: 1920px) { .ie8 .con_works .box_works li a { height: 430px; } }
@media print { .ie8 .con_works .box_works li a { height: 430px; } }
.ie8 .ie8 .con_works .box_works li a { height: 430px; }
@media only screen and (max-width: 1680px) { .ie8 .con_works .box_works li a { height: 400px; } }
@media print { .ie8 .con_works .box_works li a { height: 400px; } }
.ie8 .ie8 .con_works .box_works li a { height: 400px; }
@media only screen and (max-width: 1600px) { .ie8 .con_works .box_works li a { height: 380px; } }
@media print { .ie8 .con_works .box_works li a { height: 380px; } }
.ie8 .ie8 .con_works .box_works li a { height: 380px; }
@media only screen and (max-width: 1440px) { .ie8 .con_works .box_works li a { height: 360px; } }
@media print { .ie8 .con_works .box_works li a { height: 360px; } }
.ie8 .ie8 .con_works .box_works li a { height: 360px; }
@media only screen and (max-width: 1366px) { .ie8 .con_works .box_works li a { height: 350px; } }
@media print { .ie8 .con_works .box_works li a { height: 350px; } }
.ie8 .ie8 .con_works .box_works li a { height: 350px; }
@media only screen and (max-width: 1280px) { .ie8 .con_works .box_works li a { height: 350px; } }
@media print { .ie8 .con_works .box_works li a { height: 350px; } }
.ie8 .ie8 .con_works .box_works li a { height: 350px; }
@media only screen and (max-width: 1140px) { .ie8 .con_works .box_works li a { height: 350px; } }
@media only screen and (max-width: 1024px) { .con_works .box_works li { width: 50%; }
  .con_works .box_works li:nth-child(odd) { clear: left; } }
.con_works .btn { margin-top: 50px; text-align: center; }
@media only screen and (max-width: 767px) { .con_works .btn { margin-top: 5%; } }
.con_works .btn a { display: block; text-decoration: none; color: #afc223; font-size: 114%; }
@media only screen and (min-width: 768px) and (max-width: 1199px) { .con_works .btn a { font-size: 114%; } }
@media only screen and (max-width: 767px) { .con_works .btn a { font-size: 100%; } }
.con_works .btn a span { position: relative; display: inline-block; vertical-align: middle; }
.con_works .btn a span:after { content: ""; width: 2em; height: 1px; background: #131313; display: inline-block; vertical-align: middle; margin-left: 1.5em; -moz-transition: background 0.35s, -moz-transform 0.35s; -o-transition: background 0.35s, -o-transform 0.35s; -webkit-transition: background 0.35s, -webkit-transform 0.35s; transition: background 0.35s, transform 0.35s; }
.con_works .btn a:hover span:after { background: #afc223; -moz-transform: translateX(1.5em); -ms-transform: translateX(1.5em); -webkit-transform: translateX(1.5em); transform: translateX(1.5em); }