@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 一覧 ◇◆◇
  
  
========================================================================================================================*/

.works-warp {
  background-color:#f2f2f2;
  text-align:center;
}

.list-loading,
.worksList-er {
  text-align:center;
}

.worksList-er img {
  width:100%;
  max-width:500px;
}

.works-list {
  margin-top:-25px;
}

.works-list li {
  width:350px;
  margin-left:25px;
  margin-top:25px;
  float:left;
  background-color:#fff;
  text-align:center;
  padding:10px;
  box-sizing:border-box;
}

.works-list li:first-child,
.works-list li:nth-child(3n+1) {
  clear:both;
  margin-left:0;
}

@media (max-width:767px) {
  .works-list {
    margin-top:-2.27272%;
  }
  
  .works-list li {
    width:31.81818%;
    margin-left:2.27272%;
    margin-top:2.27272%;
  }
}

@media (max-width:640px) {
  .works-list {
    margin-top:-1.5em;
  }
  
  .works-list li,
  .works-list li:first-child,
  .works-list li:nth-child(3n+1) {
    width:48.86363%;
    margin-left:2.27272%;
    clear:inherit;
  }
  
  .works-list li:nth-child(2n+1) {
    clear:both;
    margin-left:0;
  }
}


/*-----------------------------------------------------------------------------------
  代表実績
-----------------------------------------------------------------------------------*/

.ft-masterpiece-warp {
  background-color:#f2f2f2;
  padding-top:50px;
  padding-bottom:50px;
}

.ft-masterpiece-warp + footer {
  border-top:none;
}

.ft-masterpiece {
  max-width:1290px;
  margin-top:-1em;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}

.ft-masterpiece-list {
  width:1125px;
  margin-left:auto;
  margin-right:auto;
}

.ft-masterpiece-list li.col {
  width:350px;
  text-align:center;
  box-sizing:border-box;
}

.ft-masterpiece-list li.col > div {
  text-align:center;
  background-color:#fff;
  padding:10px;
  margin-left:12.5px;
  margin-right:12.5px;
  margin-top:25px;
  box-sizing:border-box;
}


@media (max-width:767px) {
  .ft-masterpiece-warp {
    padding-top:3em;
    padding-bottom:3em;
    padding-left:2%;
    padding-right:2%;
    box-sizing:border-box;
  }
  
  .ft-masterpiece {
    margin-top:0;
  }
  
  .ft-masterpiece-list {
    width:100%;
  }
  
  .ft-masterpiece-list li.col {
    width:27.333333%;
    margin-top:0 !important;
  }

  .ft-masterpiece-list li.col > div {
    margin-left:3%;
    margin-right:3%;
    margin-top:2.27272%;
  }
}

@media (max-width:640px) {
  .ft-masterpiece-warp {
    padding-top:2.5em;
    padding-bottom:2.5em;
  }

  .ft-masterpiece-list li.col {
    width:48.86363%;
  }

  .ft-masterpiece-warp .headline small {
    display:block;
    margin-right:0;
    margin-bottom:0.5em;
    margin-top:-0.5em;
  }
}


/* 矢印 ----------------------------------------*/

.ft-masterpiece-arrow .slick-prev:before,
.ft-masterpiece-arrow .slick-next:before {
  content:"";
}

.ft-masterpiece-arrow .slick-prev,
.ft-masterpiece-arrow .slick-next {
  font-size:0;
  color:#fff;
  display:inline-block;
	width:60px;
	height:60px;
	position:absolute;
	top:50%;
	z-index:1;
  margin-top:-30px;
  background-color:rgba(0,0,0,0.2);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:background-color ease 0.3s;
  -moz-transition:background-color ease 0.3s;
  -ms-transition:background-color ease 0.3s;
  -o-transition:background-color ease 0.3s;
  transition:background-color ease 0.3s;
  background-size:26px;
  background-position:center center;
  background-repeat:no-repeat;
}

.ft-masterpiece-arrow .slick-prev { left:10px; }
.ft-masterpiece-arrow .slick-next { right:10px; }

.svg .ft-masterpiece-arrow .slick-prev    { background-image:url(../../image/icon/white/prev.svg); }
.no-svg .ft-masterpiece-arrow .slick-prev { background-image:url(../image/icon/white/prev-s.png); }
.no-rgba .ft-masterpiece-arrow .slick-prev { background-image:url(../../image/icon/gray/prev-s.png); }
.no-rgba .ft-masterpiece-arrow .slick-prev:hover { background-image:url(../../image/icon/white/prev-s.png); }

.svg .ft-masterpiece-arrow .slick-next    { background-image:url(../../image/icon/white/next.svg); }
.no-svg .ft-masterpiece-arrow .slick-next { background-image:url(../../image/icon/white/next-s.png); }
.no-rgba .ft-masterpiece-arrow .slick-next { background-image:url(../../image/icon/gray/next-s.png); }
.no-rgba .ft-masterpiece-arrow .slick-next:hover { background-image:url(../../image/icon/white/next-s.png); }

.ft-masterpiece-arrow .slick-prev:hover,
.ft-masterpiece-arrow .slick-next:hover,
.no-rgba .ft-masterpiece-arrow .slick-prev:hover,
.no-rgba .ft-masterpiece-arrow .slick-next:hover {
  background-color:#00a08c;
}

.no-rgba .ft-masterpiece-arrow .slick-prev,
.no-rgba .ft-masterpiece-arrow .slick-next {
  background-color:#fff;
}

@media (max-width:767px) {
  .ft-masterpiece-arrow .slick-prev { left:-3.39113%; }
  .ft-masterpiece-arrow .slick-next { right:-3.39113%; }
}

@media (max-width:640px) {
  .ft-masterpiece-arrow {
    display:none;
  }
}


/* ドット ----------------------------------------*/

.ft-masterpiece .slick-dots {
  display:none !important;
}

@media (max-width:640px) {
  .ft-masterpiece .slick-dots {
    z-index:99;
    display:block !important;
  }
}


/*-----------------------------------------------------------------------------------
  スクリーンショット
-----------------------------------------------------------------------------------*/

.works-list li figure,
.ft-masterpiece-list li.col figure {
  width:100%;
  height:250px;
  position:relative;
  overflow:hidden;
  color:#fff;
}

.works-list li figure img,
.ft-masterpiece-list li.col figure img {
  vertical-align:bottom;
  position:absolute;
  left:0;
  top:0;
}

.works-list li figure a,
.ft-masterpiece-list li.col figure a {
  display:table;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
}

.works-list li figure a,
.works-list li figure a:hover,
.works-list li figure a:visited,
.ft-masterpiece-list li.col figure a,
.ft-masterpiece-list li.col figure a:hover,
.ft-masterpiece-list li.col figure a:visited {
  text-decoration:none;
  color:#fff;
}

.works-list li figure a span,
.ft-masterpiece-list li.col figure a span {
  display:table-cell;
  vertical-align:middle;
  position:relative;
  background-color:rgba(0,0,0,0.6);
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0;
  -webkit-transition:opacity ease 0.3s;
  -moz-transition:opacity ease 0.3s;
  -ms-transition:opacity ease 0.3s;
  -o-transition:opacity ease 0.3s;
  transition:opacity ease 0.3s;
}

.preload .works-list li figure a span,
.preload .ft-masterpiece-list li.col figure a span {
  filter:alpha(opacity=0) !important;
  opacity:0 !important;
  -moz-opacity:0 !important;
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -ms-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
}

.pc .works-list li figure:hover a span,
.pc .ft-masterpiece-list li.col figure:hover a span {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
  z-index:2;
}

.works-list li figure a span small.site-url--pc,
.ft-masterpiece-list li.col figure a span small.site-url--pc {
  display:inline-block;
  position:relative;
}

.pc .works-list li figure a span small.site-url--pc:after,
.pc .ft-masterpiece-list li.col figure a span small.site-url--pc:after {
  content:"";
  position:absolute;
  bottom:-0.25em;
  left:0;
  width:100%;
  height:2px;
  -webkit-transform:scaleX(0);
  -ms-transform:scaleX(0);
  transform:scaleX(0);
  background-color:#fff;
  -webkit-transition:all .4s ease;
  transition:all .4s ease;
}
  
.pc .works-list li figure:hover a span small.site-url--pc:after,
.pc .ft-masterpiece-list li.col figure:hover a span small.site-url--pc:after {
  -webkit-transform:scaleX(1);
  -ms-transform:scaleX(1);
  transform:scaleX(1);
}

.pc .works-list li figure img,
.pc .ft-masterpiece-list li.col figure img {
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition:all .4s ease;
  transition:all .4s ease;
}

.csstransforms.pc .works-list li figure a:hover img,
.csstransforms.pc .ft-masterpiece-list li.col figure a:hover img {
  -webkit-transform:scale(1.1);
  -ms-transform:scale(1.1);
  transform:scale(1.1);
}

.lte-ie8 .works-list li figure a span,
.lte-ie8 .ft-masterpiece-list li.col figure a span {
  display:none;
}

@media (max-width:767px) {
  .works-list li figure,
  .ft-masterpiece-list li.col figure {
    height:180px;
  }
  
  .works-list li figure .site-url--pc,
  .ft-masterpiece-list li.col figure .site-url--pc { display:none !important; }
  
  .works-list li figure a span,
  .ft-masterpiece-list li.col figure a span {
    -webkit-transition:none;
    -moz-transition:none;
    -ms-transition:none;
    -o-transition:none;
    transition:none;
    text-align:left;
    width:100%;
    padding-left:0.75em;
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#fff;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-opacity:1;    
    font-size:75%;
    box-sizing:border-box;
  }
}

@media (max-width:640px) {
  .works-list li figure,
  .ft-masterpiece-list li.col figure {
    height:220px;
  }
}

@media (max-width:500px) {
  .works-list li figure,
  .ft-masterpiece-list li.col figure {
    height:160px;
  }
}

@media (max-width:400px) {
  .works-list li figure,
  .ft-masterpiece-list li.col figure {
    height:140px;
  }
}


/*-----------------------------------------------------------------------------------
  タイトル・短い説明
-----------------------------------------------------------------------------------*/

.works-list li figcaption,
.ft-masterpiece-list li.col figcaption {
  text-align:left;
  padding:0.75em 0.5em 0.5em 0.5em;
}

.works-list li figcaption .site-url--sp,
.ft-masterpiece-list li.col figcaption .site-url--sp {
  display:none;
}

.works-list li figcaption .shiduke,
.ft-masterpiece-list li.col figcaption .shiduke {
  font-size:87.5%;
  color:#969696;
}

.works-list li figcaption .sitename,
.ft-masterpiece-list li.col figcaption .sitename {
  display:block;
  font-size:115%;
}

.works-list li figcaption .sitename small,
.ft-masterpiece-list li.col figcaption .sitename small {
  font-size:75%;
  margin-left:0.25em;
}

@media (max-width:767px) {
  .works-list li figcaption,
  .ft-masterpiece-list li.col figcaption {
    padding:0.5em 0.25em 0.25em 0.25em;
  }

  .works-list li figcaption .site-url--sp,
  .ft-masterpiece-list li.col figcaption .site-url--sp {
    color:#0f64b9;
    text-decoration:underline;
    display:inherit;
    word-wrap:break-word;
  }

  .works-list li figcaption .site-url--sp:after,
  .ft-masterpiece-list li.col figcaption .site-url--sp:after {
    content:"";
    width:11px;
    height:11px;
    display:inline-block;
    margin-left:0.5em;
    vertical-align:middle;
    background-image:url(../../image/icon/blue/blank.png);
    background-repeat:no-repeat;
    background-position:right center;
  }
}

@media (max-width:640px) {
  .works-list li figcaption,
  .ft-masterpiece-list li.col figcaption {
    padding:0.5em 0.15em 0.25em 0.15em;
  }
}


/*-----------------------------------------------------------------------------------
  サイトを見る
-----------------------------------------------------------------------------------*/

.works-list li .site-view,
.ft-masterpiece-list li.col .site-view {
  width:100%;
  margin-top:0.5em;
  padding-left:1em;
  padding-right:1em;
  font-size:87.5%;
}

.works-list li .txtlink-url[target="_blank"]:after,
.ft-masterpiece-list li.col .txtlink-url[target="_blank"]:after {
  background-image:url(../../image/icon/white/blank.png);
}

@media (max-width:500px) {
  .works-list li .site-view,
  .ft-masterpiece-list li.col .site-view {
    font-size:93.8%;
  }
}