@charset "utf-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 768px) {

.sec01 {}
.sec01 .img { width: 50%; margin: auto auto 80px;}
.sec01 .img img { width: 100%; height: auto;}
.sec01 .msg { text-align: center; font-size: 3.0rem; margin: auto auto 60px;}
.sec01 .boxall { display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec01 .boxall .box { width: 32%; padding: 10px; box-sizing: border-box; box-shadow:0px 0px 6px 3px rgba(0,0,0,0.05);}
.sec01 .boxall .box h3 { text-align: center; background: #448BB9; color: #FFF; padding: 5px 0;}
.sec01 .boxall .box ol { margin: 10px 30px 0;}
.sec01 .boxall .box ol li {}

.sec01 .boxall .box .no01 {}
.sec01 .boxall .box .no01 li {}
.sec01 .boxall .box .no01 li:before { content: "1."; padding-right: 5px;}
.sec01 .boxall .box .no02 { counter-reset: number;}
.sec01 .boxall .box .no02 li {}
.sec01 .boxall .box .no02 li:before { counter-increment: number; content: counter(number) "."; padding-right: 5px;}


}







/* アニメーション設定 */
@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1520px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1520px 0;
    }
}



@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}
/*----------------------------------------------------*/






/*sp*/
@media only screen and (max-width: 767px) {

.sec01 {}
.sec01 .img { width: 80%; margin: auto auto 80px;}
.sec01 .img img { width: 100%; height: auto;}
.sec01 .msg { text-align: center; font-size: 2.4rem; margin: auto auto 60px;}
.sec01 .boxall { display: block; flex-wrap: wrap; justify-content: space-between;}
.sec01 .boxall .box { width: 100%; padding: 10px; margin: auto auto 5%; box-sizing: border-box; box-shadow:0px 0px 6px 3px rgba(0,0,0,0.05);}
.sec01 .boxall .box h3 { text-align: center; background: #448BB9; color: #FFF; padding: 5px 0;}
.sec01 .boxall .box ol { margin: 10px 30px 0;}
.sec01 .boxall .box ol li {}

.sec01 .boxall .box .no01 {}
.sec01 .boxall .box .no01 li {}
.sec01 .boxall .box .no01 li:before { content: "1."; padding-right: 5px;}
.sec01 .boxall .box .no02 { counter-reset: number;}
.sec01 .boxall .box .no02 li {}
.sec01 .boxall .box .no02 li:before { counter-increment: number; content: counter(number) "."; padding-right: 5px;}


}