@charset "utf-8";

/*
 *
 * Usage: Top layout
 *
 * Name: top.css
 *
 */



/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
.top {padding-bottom:145px;}
#mainVisual {position:relative; margin-bottom:150px;}
  #mainVisual #slide {
    position:relative; width:100%; padding-top:56.2%;
    margin-bottom:20px; overflow:hidden;
  }
    #mainVisual #slide li {
      -webkit-transition:all 1s ease;
      transition        :all 1s ease;
      position:absolute; top:0; left:0; text-align:center;
      opacity:0; visibility:hidden;
    }
    #mainVisual #slide li.active {
      opacity:1; visibility:visible;
    }
    #mainVisual #slide img {width:100%; max-width:100%; max-height:100%;}

  #mainVisual .pager {padding-left:36px;}
    #mainVisual .pager li {float:left; margin-right:2px;}
    #mainVisual .pager a  {
      -webkit-transition:all 1s ease;
      transition        :all 1s ease;
      background-color:#ccc;
      display:block; overflow:hidden; height:0; width:50px;
      padding-top:2px;
    }
    #mainVisual .pager li.active a {background-color:#000;}



#container #news {margin-bottom:100px;}
  #news .inner {padding:0 100px;}
    #news .inner dl {border-bottom:1px solid #ccc; margin-bottom:28px; padding-bottom:10px;}
    #news .inner dt {
      color:#aaa;
      width:100px; padding-left:15px;
      line-height:40px; height:40px;
    }
    #news .inner dd {
      margin:-32px 0 0 115px;
      line-height:180%;
      padding-right:15px;
    }

  #news .btn_more,
  #works .btn_more {text-align:center;}
    #news .btn_more a,
    #works .btn_more a {
      display:inline-block;
      position:relative;
      line-height:100%;
      padding:0 10px 10px 10px;
    }
    #news .btn_more a:after,
    #works .btn_more a:after {
      -webkit-transition:all 0.4s ease;
      transition        :all 0.4s ease;
      -webkit-transform:translateX(-50%);
      transform        :translateX(-50%);
      background-color:#000;
      content:''; display:block; width:0; height:1px;
      position:absolute; bottom:0; left:50%;
    }
    #news .btn_more a:hover:after,
    #works .btn_more a:hover:after {width:100%;}



#container #works {margin-bottom:0;}
  #works .inner {padding:0 100px;}

  #works .inner ul {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
  }
  #works .inner ul li {
    width: 280px;
    margin: 0 22px;
    letter-spacing:normal;
  }
  #works .inner ul li .img {margin-bottom:15px;}
  #works .inner ul li .img img {width:100%; height:auto; vertical-align:bottom;}




/*---------------------------------------------------------------------
Tablet layout
---------------------------------------------------------------------*/



/*---------------------------------------------------------------------
SP layout
---------------------------------------------------------------------*/
.sp #mainVisual {margin-bottom:50px;}
.sp #news .inner dl {border-bottom:1px solid #ccc; margin-bottom:28px; padding-bottom:10px;}
.sp #news .inner dt {width:auto; padding-left:0;}
.sp #news .inner dd {margin:0; padding-right:0;}

.sp #works .inner ul {
  justify-content: space-between;
}
.sp #works .inner ul li {width: calc(50% - 10px); margin: 0;}