@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style {
    border-color: #dddddd;
}

.hpb-parts-hl-style {
    padding-top: 0.3em !important;
    padding-bottom: 0.2em !important;
    padding-left: 0.2em !important;
    border-color: #549CE9;
}

.hpb-parts-cbox-style {
    border-color: #dddddd;
}

.hpb-parts-hr-style {
    border-color: #dddddd;
}

.hpb-parts-pbox-style {
    border-color: #dddddd;
}
.hpb-parts-pbox-style h4 {
    padding: 0px !important;
}

.hpb-parts-blist-style {
    border-color: #549CE9;
}
a.hpb-parts-blist-style:link {
    color: #549CE9;
}
a.hpb-parts-blist-style:visited {
    color: #549CE9;
}
a.hpb-parts-blist-style:hover {
    color: #f6f6f6;
    background-color: #549CE9;
}
a.hpb-parts-blist-style:active {
    color: #f6f6f6;
    background-color: #549CE9;
}


/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/

body {
    background-image : url(gazou/haikei.jpg);
    background-repeat : repeat ;
} 

table.slide {
  width: 640px;
}

td.main {
  width: 640px;
  height: 180px; 
}

div.scroller {
  width: 640px;
  height: 180px;
  overflow: hidden;
  position: relative;
}

div.scroller-item {
  display: flex;
  width: calc(640px * 6);
  animation: scroll 60s linear infinite;
}

div.scroller-item img {
  width: 100%;
  height: 180px
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-2560px);
  }
}


/* =======================================================
  レスポンシブル設定
======================================================= */
@media screen and (max-width: 768px) {

  .hpb-parts-hl-style {
      line-height: 100% !important;
  }

  table.slide {
      width: 100%;
  }

  td.main {
    width: 100%;
    height: auto;
  }

  div.scroller {
    width: 100%;
    height: auto;
  }

  div.scroller-item {
    display: flex;
    width: 600%;
    animation: scroll-mobile 60s linear infinite;
  }

  div.scroller-item img {
    width: 100%;
    height: auto;
  }

  @keyframes scroll-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-222%);
    }
  }
}