@charset "utf-8";

/*-------------------
スマホ縦
-------------------*/
@media screen and (max-width: 480px){

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 300%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}
/*-------------------
スマホ横
-------------------*/
@media screen and (min-width: 481px) and (max-width: 896px) {

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 200%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}
/*-------------------
タブレット
-------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 200%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}


/*-------------------
タブレット横
-------------------*/

@media screen and (min-width: 1025px) and (max-width: 1400px) {

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 200%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}




/*-------------------
ＰＣ
-------------------*/
@media all and (min-width: 1401px){

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 130%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}
/*-------------------
印刷用
-------------------*/
@media print{

  .construction-example-slide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    margin: 1% 0;
    margin-bottom: 3%;
  }

  .construction-example-box-slide{
    width: 100%;
  }

  .construction-example-box-photo{
    width: 100%;
    overflow: hidden;
  }

  .construction-example-box-photo img {
    width: 100%;
    vertical-align: bottom;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    vertical-align: bottom;
  }

  .construction-example-box-photo img:hover {
    width: 100%;
    vertical-align: bottom;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  .construction-example-slide ul {
    padding: 0;
    width: 130%;
    display: flex;
    flex-shrink: 0;
  }

  .construction-example-slide ul:first-child {
      animation: slide1 120s -60s linear infinite;
  }

  .construction-example-slide ul:last-child {
      animation: slide2 120s linear infinite;
  }

  .construction-example-slide li {
    display: inline-block;
    width: 100%;
    margin-right: 20px;
    list-style: none;
    text-align: center;
    background: rgba(255,255,255,1);
    border: none;
  }

}

/*----------------------------------
共通
----------------------------------*/
@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-200%);
    }
}