@media screen and (min-width:481px) {
.top{
    width: 700px;
    margin: auto;
    padding: 150px;
}
/*トップ写真のスライド*/
.img-top{
    width: 500px ;
    height: 300px ;
    margin: 100px;
    text-align: center;
}
.question{
    line-height: 40px;
    margin: auto;
    width: 450px;
    text-align: center;
    color: #fff;
    background-color: #2d6792;
}
.expl{
    margin: 30px;
}
/*１日の流れ*/

.day-title{
    text-align: center;
    color: #FFF;
    line-height: 50px;
    background-color: #2d6792;
}
/*項目*/
.transfer{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    top: 150px;
    color: #fff;
    background-color: #87CEFA;
}

.start{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    margin: auto;
    position: relative;
    left: 10px;
    color: #fff;
    background-color: #87CEFA;
}
.homework{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    left: 600px;
    top: -40px;
    color: #fff;
    background-color: #87CEFA;
}
.stretch{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    left: 300px;
    top: -90px;
    color: #fff;
    background-color: #87CEFA;
}
.program{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    top: -90px;
    color: #fff;
    background-color: #87CEFA;
}
.home{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    left: 300px;
    top: -150px;
    color: #fff;
    background-color: #87CEFA;
}
.back_home{
    text-align: center;
    line-height: 50px;
    width: 100px;
    height: 50px;
    position: relative;
    top: -150px;
    left: 600px;
    color: #fff;
    background-color: #87CEFA;
}
/*画像*/
.sta-img{
    width: 50px;
    height: 50px;
    position: relative;
    left: 400px;
    top: -130px;
}
.home-img{
    width: 50px;
    height: 50px;
    position: relative;
    left: 700px;
    top: -200px;
}
.home2-img{
    width: 50px;
    height: 50px;
    position: relative;
    left: 700px;
    top: -200px;
}
.str-img{
    width: 50px;
    height: 50px;
}
.pro-img{
    width: 90px;
    height: 50px;
    position: relative;
    left: -50px;
    top: -270px;
}
.back-img{
    width: 80px;
    height: 80px;
    position: relative;
    top: -190px;
    left: 700px;
}

/*線*/
hr{
    display: none;
}
.tra-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(160deg);
    width: 212px;
    position: relative;
    top: 70px;
    left: 95px;
}
.sta-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(20deg);
    width: 212px;
    position: relative;
    top: -30px;
    left: 394px;
}
.hom-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(160deg);
    width: 212px;
    position: relative;
    top: -90px;
    left: 393px;
}
.str-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(160deg);
    width: 212px;
    position: relative;
    top: -80px;
    left: 95px;
}
.pro-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(16deg);
    width: 212px;
    position: relative;
    top: -140px;
    left: 94.5px;
}
.home-hr{
    border: none;
    border-top: 5px dotted rgb(51, 162, 209);
    transform: rotate(20deg);
    width: 212px;
    position: relative;
    top: -145px;
    left: 394px;
}
/*スライド*/
.slide-container {
    width: 100%;
    height: 200px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}
}


/*--------------------------------スマホ------------------------------------*/
@media screen and (max-width:480px) {
        .top{
            margin: auto;
            position: relative;
            top: 100px;
        }
        /*トップ写真のスライド*/
        .img-top{
            width: 500px ;
            height: 300px ;
            margin: 100px;
            text-align: center;
        }
        .question{
            line-height: 35px;
            margin: auto;
            width: 350px;
            text-align: center;
            color: #fff;
            background-color: #2d6792;
        }
        .expl{
            margin: 40px;
            width: 300px;
        }
        /*１日の流れ*/
        .oneday{
            width: 300px;
            margin: 28px;
        }
        .day-title{
            color: #FFF;
            text-align: center;
            width: 300px;
            margin: 40px;
            line-height: 35px;
            background-color: #2d6792;
            position: relative;
            left: 40px;
        }
        /*項目*/
        .transfer{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            left: -25px;
            top: 150px;
            color: #fff;
            background-color: #87CEFA;
        }
        
        .start{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            margin: auto;
            position: relative;
            left: 10px;
            color: #fff;
            background-color: #87CEFA;
        }
        .homework{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            left: 240px;
            top: -43px;
            color: #fff;
            background-color: #87CEFA;
        }
        .stretch{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            left: 100px;
            top: -90px;
            color: #fff;
            background-color: #87CEFA;
        }
        .program{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            left: -25px;
            top: -90px;
            color: #fff;
            background-color: #87CEFA;
        }
        .home{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            left: 100px;
            top: -160px;
            color: #fff;
            background-color: #87CEFA;
        }
        .back_home{
            text-align: center;
            line-height: 50px;
            width: 100px;
            height: 50px;
            position: relative;
            top: -180px;
            left: 240px;
            color: #fff;
            background-color: #87CEFA;
        }
        /*画像*/
        .sta-img{
            width: 50px;
            height: 50px;
            position: relative;
            left: 200px;
            top: -100px;
        }
        .home-img{
            width: 50px;
            height: 50px;
            position: relative;
            left: 200px;
            top: -100px;
        }
        .home2-img{
            width: 50px;
            height: 50px;
            position: relative;
            left: 00px;
            top: -100px;
        }
        .str-img{
            width: 50px;
            height: 50px;
        }
        .pro-img{
            width: 90px;
            height: 50px;
            position: relative;
            left: 80px;
            top: -150px;
        }
        .back-img{
            width: 60px;
            height: 60px;
            position: relative;
            top: -200px;
            left: 200px;
        }
        
        
        
        
        
        /*線*/
        hr{
            display: none;
        }
        .tra-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(160deg);
            width: 100px;
            position: relative;
            top: 60px;
            left: 2px;
        }
        .sta-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(20deg);
            width: 100px;
            position: relative;
            top: -45px;
            left: 210px;
        }
        .hom-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(160deg);
            width: 100px;
            position: relative;
            top: -90px;
            left: 210px;
        }
        .str-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(160deg);
            width: 100px;
            position: relative;
            top: -100px;
            left: 1px;
        }
        .pro-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(16deg);
            width: 100px;
            position: relative;
            top: -140px;
            left: 0px;
        }
        .home-hr{
            border: none;
            border-top: 5px dotted rgb(51, 162, 209);
            transform: rotate(20deg);
            width: 100px;
            position: relative;
            top: -160px;
            left: 150px;
        }
        /*スライド*/
        .slide-container {
            width: 100%;
            height: 200px;
            margin: 50px auto;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .slide-wrapper {
          display: flex;
          animation: slide-flow 20s infinite linear 1s both;
        }
        .slide{
          width: 300px;
          object-fit:cover;
          border: 1px solid #ddd;
        }
        @keyframes slide-flow {
             0% {transform: translateX(0);}
         100% {transform: translateX(-100%);}
        }
        }