/* �E�摜�P���Ɠ����T�C�Y��width */
div.bannerDiv{
   border: 1px solid rgb(0,0,139);
   overflow: hidden;
   width:800px;
   margin: 0px;
}

/* �Ewidth�͑S���̉摜�T�C�Y
�@ �E�]����0�idiv�T�C�Y�ڂ����ς���UL���W�J�����悤�ɐݒ�j
*/
ul.bannerUl{
   list-style: none;
   width: 2400px;
   margin:0px;
   padding:0px;
}

/* �Efloat�ʼn�����
�@ �E�摜�P���Ɠ����T�C�Y��width
*/
ul.bannerUl > li{
   float: left;
   width: 800px;
   margin: 0px;
}

ul li img{
   vertical-align: bottom;
}

    .purun {
      -webkit-animation: purun 0.65s linear 0s 1;
      animation: purun 0.65s linear 0s 1;
    }
    @-webkit-keyframes purun {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0.2%); }
      30%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 1%); }
      50%  { -webkit-transform: scale(1.0, 1.0) translate(0%, -1%); }
      70%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0.2%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes purun {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      15%  { transform: scale(1.0, 1.0) translate(0%, 0.2%); }
      30%  { transform: scale(1.0, 1.0) translate(0%, 0.5%); }
      50%  { transform: scale(1.0, 1.0) translate(0%, -0.5%); }
      70%  { transform: scale(1.0, 1.0) translate(0%, 0.2%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

.sec-howto{padding:0;text-align:center;background:#FFFFCA}
.sec-howto .sec__head .inner{display:inline-block;position:relative;text-align:center}
.sec-howto .sec__head .ttl{color:#5fc8e6}
.sec-howto .sec__head .img{position:absolute;top:-9px;right:-144px}
.sec-howto .sec__lead{margin-top:37px;color:#5fc8e6}
.sec-howto .step{position:relative;width:800px;margin:55px auto 0}
.sec-howto .step .item-wrap{overflow:hidden;position:relative;border-radius:50px;background: transparent linear-gradient(180deg, #A2E7FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;}
.sec-howto .step .item{position:absolute;bottom:0;left:0;width:100%;height:410px;margin:0;padding:76px 0 48px}
.sec-howto .step .item .img{position:absolute;bottom:-10px;right:50%;left:50%;transform: translate(-50%, 0);width:100%;}
.sec-howto .step .item .num,
.sec-howto .step .item .ttl,
.sec-howto .step .item .txt{-webkit-transition:all .3s cubic-bezier(.68,-.55,.265,1.55);transition:all .3s cubic-bezier(.68,-.55,.265,1.55);opacity:0;-webkit-transform:scale(.1);transform:scale(.1)}
.sec-howto .step .item .ttl,
.sec-howto .step .item .txt{-webkit-transform-origin:0 50%;transform-origin:0 50%}
.sec-howto .step .item .item-ttl{position:relative;display:inline-block}
.sec-howto .step .item .item-ttl span{display:block}
.sec-howto .step .item .item-ttl .num{position:absolute;top:-4px;left:0}
.sec-howto .step .item .item-ttl .inner{margin:0 0 0 75px;min-height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
.sec-howto .step .item .item-ttl .inner span{text-align:left}
.sec-howto .step .item--has-note .item-ttl .inner{display:block}
.sec-howto .step .item .txt{margin-top:6px}
.sec-howto .step .item .is-active .num,
.sec-howto .step .item .is-active .ttl,
.sec-howto .step .item .is-active .txt{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.sec-howto .step .item .is-active .item-ttl .num{-webkit-transition-delay:.45s;transition-delay:.45s}
.sec-howto .step .item .is-active .item-ttl .ttl{-webkit-transition-delay:.5s;transition-delay:.5s}
.sec-howto .step .item .is-active .item-ttl .txt{-webkit-transition-delay:.55s;transition-delay:.55s}
.sec-howto .step .item--01 .img{right:61px;bottom:-10px}
.sec-howto .step .item--04 .img{right:133px}

.sec-howto2{padding:0;text-align:center;background:#FFFFCA}
.sec-howto2 .sec__head .inner{display:inline-block;position:relative;text-align:center}
.sec-howto2 .sec__head .ttl{color:#5fc8e6}
.sec-howto2 .sec__head .img{position:absolute;top:-9px;right:-144px}
.sec-howto2 .sec__lead{margin-top:37px;color:#5fc8e6}
.sec-howto2 .step{position:relative;width:800px;margin:55px auto 0}
.sec-howto2 .step .item-wrap{overflow:hidden;position:relative;border-radius:50px;background: transparent linear-gradient(180deg, #A2E7FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;}
.sec-howto2 .step .item{position:absolute;bottom:0;left:0;width:100%;height:410px;margin:0;padding:76px 0 48px}
.sec-howto2 .step .item .img{position:absolute;bottom:-10px;right:50%;left:50%;transform: translate(-50%, 0);width:100%;}
.sec-howto2 .step .item .num,
.sec-howto2 .step .item .ttl,
.sec-howto2 .step .item .txt{-webkit-transition:all .3s cubic-bezier(.68,-.55,.265,1.55);transition:all .3s cubic-bezier(.68,-.55,.265,1.55);opacity:0;-webkit-transform:scale(.1);transform:scale(.1)}
.sec-howto2 .step .item .ttl,
.sec-howto2 .step .item .txt{-webkit-transform-origin:0 50%;transform-origin:0 50%}
.sec-howto2 .step .item .item-ttl{position:relative;display:inline-block}
.sec-howto2 .step .item .item-ttl span{display:block}
.sec-howto2 .step .item .item-ttl .num{position:absolute;top:-4px;left:0}
.sec-howto2 .step .item .item-ttl .inner{margin:0 0 0 75px;min-height:56px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
.sec-howto2 .step .item .item-ttl .inner span{text-align:left}
.sec-howto2 .step .item--has-note .item-ttl .inner{display:block}
.sec-howto2 .step .item .txt{margin-top:6px}
.sec-howto2 .step .item .is-active .num,
.sec-howto2 .step .item .is-active .ttl,
.sec-howto2 .step .item .is-active .txt{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.sec-howto2 .step .item .is-active .item-ttl .num{-webkit-transition-delay:.45s;transition-delay:.45s}
.sec-howto2 .step .item .is-active .item-ttl .ttl{-webkit-transition-delay:.5s;transition-delay:.5s}
.sec-howto2 .step .item .is-active .item-ttl .txt{-webkit-transition-delay:.55s;transition-delay:.55s}
.sec-howto2 .step .item--01 .img{right:61px;bottom:-10px}
.sec-howto2 .step .item--04 .img{right:133px}

.item-wrap {
   height: 500px!important;
}