@charset "utf-8";

/* --------------------------------------------------

基本スタイル

-------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    outline: none;
}
body{text-align:left;}
.wrapper {
    max-width: 1500px;
    margin: auto;
    overflow: hidden;
}
.wrapper ul {
    list-style: none;
}
.wrapper a {
    cursor: pointer;
}
.wrapper a.hover {
    opacity: 0.6;
}
.wrapper img {
    width: 100%;
    height: auto;
    vertical-align: top;
}
.wrapper .ctaBtn{display:block;width:70%; margin: 3% auto;}
.wrapper .slider {
    display: none;
    height: auto !important;
}
.wrapper .slick-initialized {
    display: block;
}
.wrapper .slick-prev {
    left: -55px;
}
.wrapper .slick-next {
    right: -55px;
}
.wrapper .slick-prev,
.wrapper .slick-next {
    width: 50px;
    height: 50px;
}
.wrapper .slick-prev:before,
.wrapper .slick-next:before {
    font-size: 50px;
}
.wrapper .slider .slick-dots li {
    margin: 0px 0px !important;
}
.wrapper .slider .slick-dots li button::before {
    opacity: 1 !important;
    color: #ffffff !important;
}
.wrapper .slider .slick-dots li.slick-active button::before {
    color: #9B9B9B !important;
}
.wrapper .clearfix::after {
	display: block;
	clear: both;
	content: "";
}

/* --------------------------------------------------

各コンテンツ

-------------------------------------------------- */
.wrapper .off {
    position: fixed;
    bottom: 0%;
    right:5%;
    z-index: 10;
    width: 40%;
    max-width:1000px;
}
.wrapper .off .apply {
    float: left;
    width: 70%;
    display: none;
    margin-top:3%;
}
.wrapper .off .qualvaBtn,
.wrapper .off .chapBtn {
    float: right;
    width: 25%;
}
.wrapper .service {
    margin-top: -4%;
}
.wrapper .supplement {
    margin-top: -2%;
}
.wrapper .service2 {
    margin-top: -4%;
}
.wrapper .reports {
    position: relative;
}
.wrapper .reports .slider{
    position: absolute;
    top: 28%;
    left: 23.5%;
    width: 53%;
}
.wrapper .reports .slider img{
margin:auto 10px;
}
.slick-prev, .slick-next{ }
.wrapper .reports .slider .slick-dots {
    bottom: -30% !important;
}.wrapper .risk .slider .slick-dots {
    bottom: -10% !important;
}
.wrapper .example {
    margin-top: -3.5%;
}
.wrapper .risk {
    padding: 3% 23%;
    background: linear-gradient(90deg, #CAEBFA 0%, #DAF0FB 100%) no-repeat 50% 50% / 100% 100%;
}
.wrapper .risk  img{
    margin: 0 10px;
}
.wrapper > .apply {
width: 50%;
margin:-10% auto 15%;
    background-color: #ffffff;
}
.wrapper .start {
width:68%;
margin:-13% auto 15%;
}
.wrapper .campaign {
    margin-top: -2.1%;
}

@media screen and (max-width: 1200px) {
body{max-width:1200px;}
.wrapper{overflow:hidden;max-width1200px;height:100%;}
.wrapper div {margin: 0 -150px;}
.wrapper .off , .wrapper .reports div,.wrapper .risk div,.wrapper .free div{margin:0;}
}

#section15 dl dt p { font-size: 19px; padding-top: 15px; }
#section15 dl dd { font-size: 14px; }
div#container { padding: 0;}



#orderInfo{position: relative;margin: 0 auto 5%;}
#orderInfo table{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:45%;font-weight:bold;}
#orderInfo table , #orderInfo td, #orderInfo th {border: 1px solid #666;border-collapse: collapse;}
#orderInfo td, #orderInfo th {padding: 3px;width: 30px;height: 3em;text-align:center;}
#orderInfo th {background: #f0e6cc;}
#orderInfo .end {background: #CCC;}
#orderInfo .today {background: #FFFFFC;color: #900;font-size: 110%;}

/* --------------------------------------------------

シミュレーションツール

-------------------------------------------------- */
#container #container2020 {
    margin-top: -2px;
}
/* chart */
#simulation .chart {
    padding-bottom: 40px;
    background-color: #caebf9;
    padding-top: 10px;
}
#simulation .chart h2 {
    padding: 85px 0px 50px;
}
#simulation .chart .frame {
    width: 1000px;
    padding: 65px 85px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 15px;
    box-sizing: border-box;
}
#simulation .chart .frame h4 {
    font-family: erbaum,sans-serif;
    font-weight: 300;
    color: #3B5E66;
    font-size: 40px;
}
#simulation .chart .frame .let {
    font-size: 20px;
    letter-spacing: -0.5px;
}
#simulation .chart .frame .human {
    display: flex;
    justify-content: center;
    padding: 30px 0px 60px;
}
#simulation .chart .frame .human li {
    text-align: center;
    cursor: pointer;
}
#simulation .chart .frame .human li:hover {
    opacity: 0.8;
}
#simulation .chart .frame .human li:nth-child(n + 2) {
    padding-left: 10px;
}
#simulation .chart .frame .human li .image-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 174px;
    padding-bottom: 20px;
}
#simulation .chart .frame .human li .image-outer .image-inner {
    width: 80%;
    background-color: #4D4D4D;
    border: 2px solid #ffffff;
    border-radius: 50%;
    position: relative;
    transition-duration: 0.6s;
}
#simulation .chart .frame .human li.active .image-outer .image-inner {
    width: 100%;
    background-color: #E4E4E4;
    border: 2px solid #5C7880;
}
#simulation .chart .frame .human li .image-outer .image-inner::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;
    opacity: 0.6;
    transition-duration: 0.6s;
}
#simulation .chart .frame .human li.active .image-outer .image-inner::after {
    opacity: 0;
}
#simulation .chart .frame .human li .image-outer .image-inner img {
    border: 2px solid #4D4D4D;
    border-radius: 50%;
    box-sizing: border-box;
}
#simulation .chart .frame .human li.active .image-outer .image-inner img {
    border: 2px solid #ffffff;
}
#simulation .chart .frame .human li span {
    font-size: 20px;
}
#simulation .chart .frame .wrap {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}
#simulation .chart .frame .wrap .left .radar-outer {
    width: 460px;
    height: 445px;
    margin-top: 30px;
    background: url("/user_data/sitedesign2020pc/images/index/simulation-radar.png") center center no-repeat;
    background-size: contain;
}
#simulation .chart .frame .wrap .left .radar-outer .radar-inner {
    width: 72%;
    height: 100%;
    margin: auto;
}
#simulation .chart .frame .wrap .left .risks {
    padding: 30px 0px 0px 50px;
}
#simulation .chart .frame .wrap .left .risks li:first-child {
    padding-bottom: 16px;
}
#simulation .chart .frame .wrap .left .risks li .color {
    display: inline-block;
    width: 50px;
    height: 20px;
    vertical-align: bottom;
}
#simulation .chart .frame .wrap .left .risks li.human-risk .color {
    background-color: #8094A0;
}
#simulation .chart .frame .wrap .left .risks li.goods-area .color {
    background-color: rgba(237, 162, 59, 0.3);
    border: 1px solid #9a9a9a;
    box-sizing: border-box;
}
#simulation .chart .frame .wrap .left .risks li span {
    font-size: 18px;
    letter-spacing: -0.5px;
    padding-left: 14px;
}
#simulation .chart .frame .wrap .right {
    width: 330px;
}
#simulation .chart .frame .wrap .right .goods-zoom {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
}
#simulation .chart .frame .wrap .right .goods-zoom li {
    width: 25%;
    cursor: pointer;
}
#simulation .chart .frame .wrap .right .goods-zoom li:hover {
    opacity: 0.8;
}
#simulation .chart .frame .wrap .right .goods-zoom li .image {
    max-width: 76px;
    height: 76px;
    margin: auto;
    border: 3px solid transparent;
    box-sizing: border-box;
    transition-duration: 0.6s;
}
#simulation .chart .frame .wrap .right .goods-zoom li.active .image {
    border: 3px solid #333333;
}
#simulation .chart .frame .wrap .right .goods-zoom li.zeta .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-zeta.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.alpha .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-alpha.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.delta .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-delta.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.epsilon .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-epsilon.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.gamma .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-gamma.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.lambda .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-lambda.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.omega .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-omega.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.theta .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-theta.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li.sigma .image {
    background: url("/user_data/sitedesign2020pc/images/index/simulation-goods-sigma.png") center center no-repeat;
    background-size: cover;
}
#simulation .chart .frame .wrap .right .goods-zoom li .name {
    font-family: erbaum, sans-serif;
    font-weight: 400;
    font-size: 8px;
    letter-spacing: -0.5px;
    text-align: center;
}
#simulation .chart .frame .wrap .right .bottom {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
}
#simulation .chart .frame .wrap .right .bottom .bottom_l .judgment {
    padding-top: 10px;
}
#simulation .chart .frame .wrap .right .bottom .bottom_l .optimal-btn {
    max-width: 220px;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    padding: 9px 0px;
    color: #ffffff;
    background-color: #333333;
    border-radius: 10px;
    cursor: pointer;
}
#simulation .chart .frame .wrap .right .bottom .bottom_l .optimal-btn:hover {
    background-color: #5c5c5c;
}
#simulation .chart .frame .wrap .right .bottom .bottom_r {
    width: 90px;
}
#simulation .chart .frame .wrap .right .bottom .bottom_r .name {
    text-align: center;
    font-family: erbaum,sans-serif;
    font-weight: 400;
    color: #3B5E66;
    font-size: 23px;
    letter-spacing: -0.5px;
    padding-top: 16px;
}
/* service_flow */
#simulation .service_flow .bg {
    margin: -35px 0px;
    padding: 55px 0px 80px;
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-bk.jpg") top center/cover no-repeat;
}
#simulation .service_flow .bg p {
    text-align: center;
    font-size: 23px;
}
#simulation .service_flow .bg .flow-slider {
    margin: 100px auto 0px;
    width: 1000px;
}
#simulation .service_flow .bg .flow-slider * {
    outline: none;
}
#simulation .service_flow .bg .flow-slider .wrap {
    position: relative;
    cursor: w-resize;
}
#simulation .service_flow .bg .flow-slider .wrap .gif {
    position: absolute;
    top: 37%;
    left: 16%;
    width: 200px;
}
#simulation .service_flow .bg .flow-slider .wrap .gif_center {
    left: 41.7%;
}
#simulation .service_flow .bg .flow-slider .slick-dots {
    bottom: auto;
    top: calc(-10% + 3px);
    display: flex;
    height: 10%;
    justify-content: flex-end;
}
#simulation .service_flow .bg .flow-slider .slick-dots li {
    width: 16.666%;
    height: 100%;
    margin: 0px;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(1) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab1_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(2) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab2_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(3) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab3_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(4) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab4_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(5) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab5_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li:nth-child(6) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab6_off.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(1) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab1_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(2) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab2_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(3) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab3_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(4) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab4_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(5) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab5_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li.slick-active:nth-child(6) {
    background: url("/user_data/sitedesign2020pc/images/index/service_flow-slide-tab6_on.png") center bottom/contain no-repeat;
}
#simulation .service_flow .bg .flow-slider .slick-dots li * {
    display: none;
}


#loading-wrapper { 
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #CCC5C1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    transition: all 0.3s; 
    z-index: 10000;
}
#loading-wrapper img { 
    width: 200px  ;
    position: absolute;
    top: 10%;
}
#loading-wrapper .lead { 
    color: red;
    font-size: 22px;
    padding-top: 80px;
} 
#loading-wrapper p { 
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    padding-top: 30px;
} 
.loader {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
  @-webkit-keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
  }
  @keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
  }

  .completed {
    opacity: 0;
    visibility: hidden;
  }