@charset "UTF-8";
/* CSS Document */
#wrapper {
  position: relative; }
  #wrapper .slider {
    margin: 30px 0 20px; }
  #wrapper .slider img {
    width: 100%;
    height: auto; }
  #wrapper .single-item {
    max-width: 600px;
    margin: 0 auto 50px; }
  #wrapper .slick-prev::before, #wrapper .slick-next::before {
    font-size: 24px; }
  #wrapper .lazy-item .slick-next,
  #wrapper .thumb-item-nav .slick-next,
  #wrapper .multiple-item .slick-next,
  #wrapper .center-item .slick-next {
    right: 20px;
    z-index: 99; }
  #wrapper .lazy-item .slick-prev,
  #wrapper .thumb-item-nav .slick-prev,
  #wrapper .multiple-item .slick-prev,
  #wrapper .center-item .slick-prev {
    left: 15px;
    z-index: 100; }
  #wrapper .single-item .slick-prev::before,
  #wrapper .single-item .slick-next::before {
    color: #666; }
  #wrapper .slick-dots {
    bottom: -25px; }
  #wrapper .multiple-item li {
    margin: 0 5px; }
  #wrapper .thumb-item {
    max-width: 700px;
    margin: 0 auto 5px;
    padding: 0 5px; }
  #wrapper .thumb-item-nav {
    max-width: 700px;
    margin: 0 auto; }
  #wrapper .thumb-item-nav li {
    margin: 5px; }
  #wrapper .lazy-item {
    width: 400px;
    margin: 0 auto 50px; }
  #wrapper .lazy-item li {
    margin: 0 5px; }
  @media screen and (max-width: 767px) {
    #wrapper .slider li {
      padding: 0 10px; } }
  #wrapper .slick_container {
    width: 100%;
    /* 任意の値 */
    margin: 0 auto;
    /* 任意の値 */
    position: relative; }
  #wrapper .slick-prev, #wrapper .slick-next {
    width: 48px;
    /* 画像幅 */
    height: 48px; }
  #wrapper .slick-prev:before, #wrapper .slick-next:before {
    content: ""; }
  #wrapper button.slick-prev, #wrapper button.slick-next {
    z-index: 2; }
  #wrapper .slick-prev {
    left: 50px;
    /* 任意の値 */ }
  #wrapper .slick-next {
    right: 50px;
    /* 任意の値 */ }
  #wrapper .slick-arrow {
    z-index: 10;
    /* 値は適当に */ }

.topslide {
  background: url(../slide/slide_bg2.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  padding: 0;
  z-index: 1;
  min-height: 600px; }

#slider {
  max-width: 450px;
  margin-top: 10%; }

.catchcopy {
  position: absolute;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  z-index: 10; }
  .catchcopy .inner {
    width: 165px;
    margin: 0 auto; }
    .catchcopy .inner h2 {
      display: block;
      margin-top: 50%; }
      .catchcopy .inner h2 img {
        width: 100%; }

@media screen and (max-width: 1100px) {
  .catchcopy {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 10; }
    .catchcopy .inner {
      width: 150px;
      margin: 0 auto; }
      .catchcopy .inner h2 {
        display: block;
        margin-top: 60px; }
        .catchcopy .inner h2 img {
          width: 100%; } }
@media screen and (max-width: 979px) {
  .catchcopy {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 10; }
    .catchcopy .inner {
      width: 100px;
      margin: 0 auto; }
      .catchcopy .inner h2 {
        display: block;
        margin-top: 10%; }
        .catchcopy .inner h2 img {
          width: 100%; } }
@media screen and (min-width: 979px) and (max-width: 1169px) {
  .topslide {
    position: relative;
    min-height: 300px; }

  #slider {
    position: relative;
    width: 400px; } }
@media screen and (min-width: 768px) and (max-width: 978px) {
  .topslide {
    position: relative;
    min-height: 300px; }

  #slider {
    position: relative;
    width: 300px; } }
@media screen and (max-width: 767px) {
  #slider {
    margin: 0;
    padding: 0; }

  .topslide {
    position: relative;
    min-height: 300px; }

  #slider {
    position: absolute;
    width: 280px;
    right: 0;
    top: 0; }

  .catchcopy {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 10; }
    .catchcopy .inner {
      width: 100px;
      margin: 0 auto; }
      .catchcopy .inner h2 {
        display: block;
        margin-top: 20px; }
        .catchcopy .inner h2 img {
          width: 100%; } }
@media screen and (max-width: 479px) {
  .topslide {
    background: url(../slide/slide_bg_s2.jpg) no-repeat top left;
    background-size: cover;
    max-height: 300px; }

  .topslide {
    position: relative;
    min-height: 300px; }

  #slider {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    top: 134px; }

  .catchcopy {
    position: absolute;
    width: 100px;
    right: 12%;
    margin-left: auto;
    margin-right: auto;
    z-index: 10; }
    .catchcopy .inner {
      width: 100px;
      margin: 0 auto; }
      .catchcopy .inner h2 {
        display: block;
        margin-top: 20px; }
        .catchcopy .inner h2 img {
          width: 100%; } }

/*# sourceMappingURL=slider.css.map */