@charset "utf-8";

.sen-w-l, 
.sen-w-r, 
.sen-h-l, 
.sen-h-r { position: absolute; background: #fff; box-shadow: 0 1px 2px rgba(255,255,255,.5); transition: 0.8s; z-index: 1000;}

@keyframes box-shadow3 {
100% { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.8), 0 0 10px rgba(0,255,108,.8), 0 0 14px rgba(0,255,108,.8), 0 0 20px rgba(0,255,108,.8);}
90%  { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 12px rgba(0,255,108,.4);}
85%  { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.8), 0 0 10px rgba(0,255,108,.8), 0 0 14px rgba(0,255,108,.8), 0 0 20px rgba(0,255,108,.8);}
68%  { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 12px rgba(0,255,108,.4);}
59%  { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.8), 0 0 10px rgba(0,255,108,.8), 0 0 14px rgba(0,255,108,.8), 0 0 20px rgba(0,255,108,.8);}
0%   { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 12px rgba(0,255,108,.4);}
}



.main1 .scrItem#p1-1, 
.main1 .scrItem#p1-2, 
.main1 .scrItem#p1-3, 
.main1 .scrItem#p1-4, 
.main1 .scrItem#p2-1, 
.main2 .scrItem#p2-1, 
.main3 .scrItem#p2-1,
.main4 .scrItem#p2-1, 
.main1 .scrItem#p2-2, 
.main2 .scrItem#p2-2, 
.main3 .scrItem#p2-2,
.main4 .scrItem#p2-2, 
.main1 .scrItem#p3-1, 
.main2 .scrItem#p3-1, 
.main3 .scrItem#p3-1, 
.main4 .scrItem#p3-1, 
.main5 .scrItem#p3-1, 
.main6 .scrItem#p3-1{ margin-top: -30px; opacity: 0;}

.scrItem#p3-1{ margin-top: 0px;}

.scrItem{ width:80px; height: 80px; margin-top: 0; position: absolute; z-index: 100000; transition: 1.6s;}

.scrItem#p1-1{ margin-left:35px;}
.scrItem#p1-2, 
.scrItem#p1-3, 
.scrItem#p1-4{ margin-left:-40px;}
.scrItem#p2-1{ margin-left:135px;}
.scrItem#p2-2{ margin-left:-45px;}
.scrItem#p3-1{ margin-left:calc(100% - 40px);}

@media screen and (max-width:852px) {
.scrItem#p1-1{ margin-left:0px;}
.scrItem#p2-1{margin-left: 60px;}

}

/**/
.sen-w-l{ width: 0%; height: 4px; bottom: -1px; left: 0;}
.sen-w-r{ width: 0%; height: 4px; bottom: -1px; right: 0;}
.sen-h-l{ width: 4px; height: 0%; top: 0px; left: -2px;}
.sen-h-r{ width: 4px; height: 0%; top: 0px; right: -2px;}

/*

*/
.main2 #main3 .sen-h-l, 
.main2 #main3 .sen-h-r, 
.main3 #main3 .sen-h-l, 
.main3 #main3 .sen-h-r, 
.main4 #main3 .sen-h-l, 
.main5 #main3 .sen-h-l, 
.main6 #main3 .sen-h-l, 
.main7 #main3 .sen-h-l, 
.main8 #main3 .sen-h-l, 
.main9 #main3 .sen-h-l, 
.main10 #main3 .sen-h-l, 
.main11 #main3 .sen-h-l, 
.main12 #main3 .sen-h-l, 
.main13 #main3 .sen-h-l, 
.main14 #main3 .sen-h-l, 
.main15 #main3 .sen-h-l, 
.main4 #main3 .sen-h-r, 
.main5 #main3 .sen-h-r, 
.main6 #main3 .sen-h-r, 
.main7 #main3 .sen-h-r, 
.main8 #main3 .sen-h-r, 
.main9 #main3 .sen-h-r, 
.main10 #main3 .sen-h-r, 
.main11 #main3 .sen-h-r, 
.main12 #main3 .sen-h-r, 
.main13 #main3 .sen-h-r, 
.main14 #main3 .sen-h-r, 
.main15 #main3 .sen-h-r{ height: calc(100% + 80px); animation: box-shadow2 30s infinite alternate;}


.main4 #main4 .sen-w-l, 
.main5 #main4 .sen-w-l, 
.main6 #main4 .sen-w-l, 
.main7 #main4 .sen-w-l, 
.main8 #main4 .sen-w-l, 
.main9 #main4 .sen-w-l, 
.main10 #main4 .sen-w-l, 
.main11 #main4 .sen-w-l, 
.main12 #main4 .sen-w-l, 
.main13 #main4 .sen-w-l, 
.main14 #main4 .sen-w-l, 
.main15 #main4 .sen-w-l, 
.main4 #main4 .sen-w-r, 
.main5 #main4 .sen-w-r, 
.main6 #main4 .sen-w-r, 
.main7 #main4 .sen-w-r, 
.main8 #main4 .sen-w-r, 
.main9 #main4 .sen-w-r, 
.main10 #main4 .sen-w-r, 
.main11 #main4 .sen-w-r, 
.main12 #main4 .sen-w-r, 
.main13 #main4 .sen-w-r, 
.main14 #main4 .sen-w-r, 
.main15 #main4 .sen-w-r{ width: 50%; animation: box-shadow2 30s infinite alternate;}

.main4 #main4 .sen-h-l, 
.main5 #main4 .sen-h-l, 
.main6 #main4 .sen-h-l, 
.main7 #main4 .sen-h-l, 
.main8 #main4 .sen-h-l, 
.main9 #main4 .sen-h-l, 
.main10 #main4 .sen-h-l, 
.main11 #main4 .sen-h-l, 
.main12 #main4 .sen-h-l, 
.main13 #main4 .sen-h-l, 
.main14 #main4 .sen-h-l, 
.main15 #main4 .sen-h-l, 
.main4 #main4 .sen-h-r, 
.main5 #main4 .sen-h-r, 
.main6 #main4 .sen-h-r, 
.main7 #main4 .sen-h-r, 
.main8 #main4 .sen-h-r, 
.main9 #main4 .sen-h-r, 
.main10 #main4 .sen-h-r, 
.main11 #main4 .sen-h-r, 
.main12 #main4 .sen-h-r, 
.main13 #main4 .sen-h-r, 
.main14 #main4 .sen-h-r, 
.main15 #main4 .sen-h-r{ transition-delay: 1.0s; height: calc(100% + 160px); animation: box-shadow2 30s infinite alternate;}

.main6 #main6 .sen-w-l, 
.main7 #main6 .sen-w-l, 
.main8 #main6 .sen-w-l, 
.main9 #main6 .sen-w-l, 
.main10 #main6 .sen-w-l, 
.main11 #main6 .sen-w-l, 
.main12 #main6 .sen-w-l, 
.main13 #main6 .sen-w-l, 
.main14 #main6 .sen-w-l, 
.main15 #main6 .sen-w-l, 
.main6 #main6 .sen-w-r, 
.main7 #main6 .sen-w-r, 
.main8 #main6 .sen-w-r, 
.main9 #main6 .sen-w-r, 
.main10 #main6 .sen-w-r, 
.main11 #main6 .sen-w-r, 
.main12 #main6 .sen-w-r, 
.main13 #main6 .sen-w-r, 
.main14 #main6 .sen-w-r, 
.main15 #main6 .sen-w-r{ width: 50%; animation: box-shadow2 30s infinite alternate;}
.lineset2-2 .sen-w-l{ left: -2px; }
.lineset2-4 .sen-w-l{ left: 2px;}

.main6 #main6 .sen-h-l, 
.main7 #main6 .sen-h-l, 
.main8 #main6 .sen-h-l, 
.main9 #main6 .sen-h-l, 
.main10 #main6 .sen-h-l, 
.main11 #main6 .sen-h-l, 
.main12 #main6 .sen-h-l, 
.main13 #main6 .sen-h-l, 
.main14 #main6 .sen-h-l, 
.main15 #main6 .sen-h-l, 
.main6 #main6 .sen-h-r, 
.main7 #main6 .sen-h-r, 
.main8 #main6 .sen-h-r, 
.main9 #main6 .sen-h-r, 
.main10 #main6 .sen-h-r, 
.main11 #main6 .sen-h-r, 
.main12 #main6 .sen-h-r, 
.main13 #main6 .sen-h-r, 
.main14 #main6 .sen-h-r, 
.main15 #main6 .sen-h-r{ transition-delay: 1.0s; height: calc(100% + 160px); animation: box-shadow2 30s infinite alternate;}


.main8 #main8 .sen-w-r, 
.main9 #main8 .sen-w-r, 
.main10 #main8 .sen-w-r, 
.main11 #main8 .sen-w-r, 
.main12 #main8 .sen-w-r, 
.main13 #main8 .sen-w-r, 
.main14 #main8 .sen-w-r, 
.main15 #main8 .sen-w-r{ width: 50%; animation: box-shadow2 30s infinite alternate;}


.main8 #main9 .sen-h-r, 
.main9 #main9 .sen-h-r, 
.main10 #main9 .sen-h-r, 
.main11 #main9 .sen-h-r, 
.main12 #main9 .sen-h-r, 
.main13 #main9 .sen-h-r, 
.main14 #main9 .sen-h-r, 
.main15 #main9 .sen-h-r{ transition-delay: 1.0s; height: calc(100% + 160px); animation: box-shadow2 30s infinite alternate;}







/**/
.line-set1{ width: 100%; padding:0 3%; display: flex; justify-content: space-between;}
.line-set1 > div{ width:14.28571429%; height: 100%; display: block; position: relative;}

#main3 .line-set1{ height: 200px;}
#main4 .line-set1{ height: 80px;}

/*線*/
.line-set1 > div.lineset1-1, 
.line-set1 > div.lineset1-3, 
.line-set1 > div.lineset1-5, 
.line-set1 > div.lineset1-7{ border-left: solid 1px #777; border-right: solid 1px #777;}
#main4 .line-set1 > div.lineset1-1, 
#main4 .line-set1 > div.lineset1-3, 
#main4 .line-set1 > div.lineset1-5, 
#main4 .line-set1 > div.lineset1-7{ border-bottom: solid 1px #777;}

/*---------*/
.line-set2{ width: 100%; display: flex; justify-content: space-between;}
.line-set2 > div{ width:calc(100% / 3 - 14.28571429% / 3); height: 100%; display: block; position: relative;}
.line-set2 > div.lineset2-1, 
.line-set2 > div.lineset2-5{ width: 10.142857143%;}

#main4 .line-set2{ height: 200px;}
#main5 .line-set2{ height: 80px;}
#main6 .line-set2{ height: 80px;}


/*線*/
.line-set2 > div.lineset2-2, 
.line-set2 > div.lineset2-4{ border-left: solid 1px #777; border-right: solid 1px #777;}
#main6 .line-set2 > div.lineset2-2, 
#main6 .line-set2 > div.lineset2-4{ border-bottom: solid 1px #777;}


/*---------*/
.line-set3{ width: 100%; display: flex; justify-content: space-between;}
.line-set3 > div{ height: 100%; display: block; position: relative;}
.line-set3 > div.lineset3-2{ width: 56%;}

.line-set3 > div.lineset3-1, 
.line-set3 > div.lineset3-3{ width: 22%;}

#main6 .line-set3{ height: 200px;}
#main7 .line-set3{ height: 80px;}
#main8 .line-set3{ height: 80px;}

/*線*/
.line-set3 > div.lineset3-2{ border-left: solid 1px #777; border-right: solid 1px #777; }
#main8 .line-set3 > div.lineset3-2{border-bottom: solid 1px #777;}


/*---------*/
.line-set4{ width: 100%; display: flex; justify-content: space-between;}
.line-set4 > div{ width: 50%; height: 100%; display: block; position: relative;}

#main9 .line-set4{ height: 200px;}
#main10 .line-set4{ height: 80px;}
#main11 .line-set4{ height: 80px;}
.line-set4 > div.lineset4-1{ border-right: solid 1px #777;}








