@charset "utf-8";

body,div,pre,p,blockquote,form,ul,ol,li,fieldset,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td
{
   margin:0;
   padding:0
}

body,div,pre,p,blockquote,form,ul,ol,li,fieldset,dl,dt,dd,h1,h2,h3,h4,h5,h6,table
{
   vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,menu,nav,section,main
{
   display:block;
   margin:0;
   padding:0
}

body,table
{
   font-size:12px;
   color:#313339
}

body
{
   background:#F3F6F7;
   font-family:'Noto Sans JP','Noto Sans','Noto Sans CJK JP','Hiragino Kaku Gothic Pro','メイリオ','ＭＳ Ｐゴシック',san-serif !important;
}

img
{
   border:0;
   vertical-align:middle
}

ul
{
   list-style:none
}

a
{
   text-decoration:none
}

button
{
    outline: none;
}

.hidden
{
   display:none;
}

.btn-hover:hover {
   opacity: .6;
   cursor: pointer;
}

header
{
   top:0;
   left:0;
   width:100%;
   text-align:center;
   transition:top .3s;
   z-index:2
}

body.loading::before
{
   content:'';
   display:block;
   background:rgba(0,0,0,.1);
   z-index:11;
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0
}

#logo
{
   position:absolute;
   top:0;
   left:20px;
   display: flex;
   height: 56px;
   align-items: center;
}

#logo img
{
   max-width:320px;
   max-height:46px;
   width:auto;
   height:auto
}

#catalog
{
   line-height:56px;
   font-weight:700;
   font-size:0
}

#catalog img
{
   vertical-align:middle
}

#searchform
{
   position:relative
}

#search
{
   width: 174px;
   border:none;
   border-bottom:1px solid #bac8d1;
   height:30px;
   box-sizing:border-box;
   background:url(../images/search.svg) no-repeat right 0 center / 16px 16px;
   padding:0 32px 0 16px;
   font-size:12px;
   letter-spacing:.166em;
   outline:none;
   -webkit-appearance:textfield;
   appearance:textfield
}

#search::placeholder
{
   color:#ADADB0
}

#search:-ms-input-placeholder
{
   color:#ADADB0
}

#search::-ms-input-placeholder
{
   color:#ADADB0
}

#searchsubmit
{
   -webkit-appearance:none;
   appearance:none;
   position:absolute;
   top:8px;
   right:0px;
   width:16px;
   height:16px;
   border:none;
   background:url(../images/search.svg) no-repeat right 0 center / 16px 16px;
   outline:none;
   cursor:pointer;
}
#header-1
{
    border-bottom: 1px solid #F3F6F7;
    background: #fff;
}
#header-2
{
   height:48px;
   width:100%;
   background-color:#fff;
   font-size:16px;
   color:#8D8D8D!important;
   z-index:3;
   box-shadow:0 6px 12px #980000 0 4px 4px #980000 0 0 2px red
}

#header-2 .nav-select
{
   height: 100%;
   max-width: 1280px;
   display: flex;
   align-items: center;
   padding:0 0 0 20px;
   margin: auto;
}

#header-2 .nav-item
{
   float:left
}

#header-2 .nav-item a
{
   font-weight:700;
   display: flex;
   align-items: center;
   position:relative;
   padding: 12px 15px;
   cursor: pointer;
   color: #5F5F5F;
   text-decoration: none;
}

#header-2 .nav-item .ae-and-rdata-management a.active:after {
   height:2.5px!important;
}
#header-2 .nav-item a.active:after
{
   bottom:0;
   left:0;
   content:"";
   display:block;
   height:3px;
   width:100%;
   position:absolute;
   background:#395370;
}

#header-2 .dropdown-menu a::after {
   height: 0!important;
}

#header-2 .dropdown-toggle::after {
   border: none;
   margin-left: 0!important;
}

#header-2 .nav-item a:not(.active):after
{
   background:none repeat scroll 0 0 transparent;
   bottom:0;
   content:"";
   display:block;
   height:3px;
   left:50%;
   position:absolute;
   background:#395370;
   transition:width .3s ease 0s,left .3s ease 0s;
   width:0
}

#header-2 .nav-item a:hover:after
{
   width:100%;
   left:0
}

#header-2 .nav-item.ae-data-only a.templates span,
#header-2 .nav-item a .bgms span
{
   margin-right:5px;
   width: 25px!important;
   height: 25px!important;
}

#header-2 .nav-item a.active
{
   color:#395370;
}

#header-2 .templates span
{
   background-image: url("/static/catalog/images/icon-template-none.svg");
}

#header-2 .templates.active span
{
   background-image: url("/static/catalog/images/icon-template.svg");
}

#header-2 .bgms span
{
   background-image: url("/static/catalog/images/icon-bgm-none.svg");
   width: 25px!important;
   height: 25px!important;
}

#header-2 .bgms.active span
{
   background-image: url("/static/catalog/images/icon-bgm.svg");
}

body.down #header-2,body.up #header-2
{
   position:fixed;
   top:0
}

.header-3-container
{
   position: relative;
   height:64px;
   width:100%;
   max-width: 1280px;
   background:#F3F6F7;
   line-height:30px;
   display:flex;
   flex-flow:row wrap;
   align-items:flex-start;
   margin: auto;
   padding:17px 20px;
   z-index:2
}
#header-3 .filter-settings {
    display: flex;
}

body.down #header-3,body.up #header-3
{
   position:fixed;
   top:48px;
   width: 100%;
   z-index: 2;
}

.btn-filter
{
   font-size:12px;
   font-weight:500;
   color:#395370
}

#header-3 a.filter
{
   height:30px;
   background:#FFF;
   padding:0 30px;
   display:flex;
   align-items:center;
   box-shadow:0 2px 2px rgba(152,162,179,0.15),0 1px 5px rgba(152,162,179,0.15);
   border-radius:18px
}

#header-3 a .total-filter {
    margin: 0 4px;
}

#header-3 a.filter img,#header-3 a.reset-filter img
{
   margin-right:4px
}

#header-3 a.reset-filter
{
   margin-left:20px;
   display: flex;
}

#header-3 .filter-result
{
   margin-left:25px;
   padding-left:20px;
   font-size:14px;
   color:#1B1B1B;
   border-left:1px solid #C6C6C6;
}

#header-3 .search
{
   position:absolute;
   right:150px
}

#header-3 .sort
{
   position:absolute;
   right:20px
}

#header-3 .format_group_container {
   position: absolute;
   right: 650px;
   top: -2px;
}

#format_groups_search_input
{
   width: 300px;
   border:none;
   height:30px;
   box-sizing:border-box;
   background:url(../images/search.svg) no-repeat right 0 center / 25px 15px;
   padding: 0 25px 0 12px;
   font-size:12px;
   letter-spacing:.166em;
   outline:none;
   -webkit-appearance:textfield;
   appearance:textfield;
}

#format_groups_search_input::placeholder
{
   color:#ADADB0
}

#format_groups_search_input:-ms-input-placeholder
{
   color:#ADADB0
}

#format_groups_search_input::-ms-input-placeholder
{
   color:#ADADB0
}

.format_group_container .dropdown {
   position: relative;
   display: inline-block;
}

.format_group_container .dropdown-content {
   position: absolute;
   background-color: #f6f6f6;
   overflow: auto;
   border: 1px solid #ddd;
   z-index: 1;
}

.format_group_container .dropdown-content .format_group {
   color: black;
   padding: 4px 12px;
   text-decoration: none;
   display: block;
   text-align: left;
   cursor: pointer;
}

.format_group_container .dropdown .format_group:hover {background-color: #ddd;}

.format_group_container .form-group-list {
   max-height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
}

.hidden-important
{
   display:none!important;
}

#menu
{
   display:none
}

main
{
   width:1100px;
   margin:0 auto;
}

.content {
   background: #F3F6F7!important;
}

#header-3 {
   background: #F3F6F7;
}

#order
{
   -webkit-appearance:none;
   appearance:none;
   border:1px solid #CDD4DB;
   background:#fff url(../images/arrow-down.svg) no-repeat right 3px center;
   font-size:12px;
   width:110px;
   height:34px;
   box-sizing:border-box;
   color:#545454;
   padding:0 10px;
   border-radius:4px
}

#catalog22
{
   display:flex;
   flex-flow:row wrap;
   align-items:flex-start;
   margin-bottom: 7px;
   gap: 20px 28px;
}

#catalog22::after {
    content: "";
    width: var(--mg_right);
}

.catalog22c
{
   width: 100%;
   background:#fff;
   box-shadow: 0 0 5px rgba(0,0,0,0.3);
   text-decoration:none;
   display:block;
   color:#313339;
   position: relative;
   border-radius: 6px;
   padding-bottom: 12px;
}

.catalog22c1
{
   height:253px;
   display:flex;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center;
   font-size:0;
   background:#000;
   margin-bottom:12px;
   overflow:hidden;
   border-radius:2px 2px 0 0;
   position:relative
}

.catalog22c1 img
{
   max-width:253px;
   max-height:253px;
   transition:transform .3s
}

.catalog22c:hover .catalog22c1 img
{
   transform:scale(1.1)
}

.catalog22c1 .oldformat
{
   display:none;
   flex-flow:column wrap;
   justify-content:center;
   align-items:center;
   color:#fff;
   width:100%;
   height:100%;
   position:absolute;
   top:0;
   left:0;
   background:rgba(0,0,0,.8);
   box-sizing:border-box;
   padding:0 13px
}

.catalog22c:hover .oldformat
{
   display:flex
}

.catalog22c1 .oldformat h3
{
   font-size:14px;
   line-height:19px;
   text-align:center;
   margin-bottom:15px;
   text-align:center
}

.catalog22c1 .oldformat h3::before
{
   content:'';
   display:inline-block;
   background:url(../images/icon_warning.svg) no-repeat center;
   width:24px;
   height:22px;
   vertical-align:middle;
   margin-right:8px
}

.catalog22c1 .oldformat p
{
   font-size:12px;
   line-height:21px
}

.catalog22c2
{
   padding:0 12px;
   margin-bottom:12px;
   color:#212121;
   font-size:14px;
   line-height:20px;
   letter-spacing:.031em;
   height:20px;
   font-weight:700
}

.catalog22c2 .video_name {
   display: inline-block;
   max-width: 100%;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

.catalog22c2.colorformat .video_name {
   max-width: calc(100% - 30px);
}

.catalog22c2 .video_color {
    display: none;
}

.catalog22c2.colorformat .video_color
{
   display:inline-block;
   background:url(../images/color_icon.svg) no-repeat center / contain;
   width:19px;
   height:19px;
   margin-left:6px
}

.catalog22c3
{
   display:flex;
   flex-flow:row wrap;
   justify-content:space-between;
   align-items:flex-start;
   line-height:14px;
   padding:0 8px;
   height: 26px;
   font-size: 12px;
}

.format_box-wrap {
   padding: 0 8px;
   height: 72px;
   overflow: hidden;
   display: flex;
}

.format_box-wrap .format_box {
   display: flex;
   flex-wrap: wrap;
}

.format_box-wrap .format_box .format-tag {
   border-radius: 4px;
   text-align: center;
   width: max-content;
   height: 20px;
   font-weight: 700;
   font-size: 10px;
   line-height: 6px;
   padding: 6px 10px 6px 10px;
   margin: 0 6px 6px 0;
}

.catalog22c31
{
   float: left;
   font-size:12px;
   box-sizing:border-box
}

.catalog22c31 i
{
   display:inline-block;
   background-repeat:no-repeat;
   vertical-align:middle;
   width:14px;
   height:14px;
   background-position:center;
   background-size:contain;
   margin-right:6px
}

.aspectnone
{
   background-image:url(../images/ratio-none.svg)
}

.aspect1
{
   background-image:url(../images/aspect.svg)
}

.aspect2
{
   background-image:url(../images/aspect_2.svg)
}

.aspect3
{
   background-image:url(../images/aspect_3.svg)
}

.aspect_group
{
   background-image:url(../images/aspect.svg)
}

.catalog22c32
{
   padding-left:20px;
   background:url(../images/time.svg) no-repeat left center / 14px 14px
}

.catalog22c33
{
   padding-left:20px;
   background:url(../images/pic.svg) no-repeat left center / 14px 14px
}

#catalog23
{
   text-align:center;
   line-height:40px;
   font-size:14px;
   letter-spacing:.07em;
   margin-bottom:40px
}

#catalog23 li.paginationjs-page a
{
   margin:0 4px;
   background:#C6C6C6;
   text-decoration:none;
   font-size:16px;
   color:#fff;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:40px;
   height:40px;
   border-radius:47px
}

#catalog23 span
{
   margin:0 4px;
   background:#fc9084;
   color:#fff;
   text-align:center;
   display:inline-block;
   min-width:30px
}

#catalog23 li.paginationjs-prev a
{
   display:inline-block;
   background:url(../images/pagenation-left.svg) no-repeat center / contain;
   width:22px;
   height:22px;
   vertical-align:middle;
   min-width:0
}

#catalog23 li.paginationjs-next a
{
   display:inline-block;
   background:url(../images/pagenation-right.svg) no-repeat center / contain;
   width:22px;
   height:22px;
   vertical-align:middle;
   min-width:0
}

#catalog23 span.dots
{
   color:#ADADB0;
   font-size:16px;
   background:none;
   min-width:0
}

#catalog23 li.paginationjs-prev.disabled a
{
   display:none
}

#catalog23 li.paginationjs-next.disabled a
{
   display:none
}

#catalog23 .paginationjs-page:not(.active) a:hover
{
   opacity:.6
}

#catalog23 .ellip
{
   width:2px;
   height:2px;
   display:inline-block;
   border:2px solid #C6C6C6;
   border-radius:3px
}

#catalog23 .ellip:not(:first-child)
{
   margin-left:4px
}

#footer1
{
   text-align:center;
   font-size:10px;
   line-height:15px;
   color:#ADADB0;
   letter-spacing:.3em;
   margin-bottom:7px
}

#single1
{
   width:968px;
   background:#fff;
   margin:30px auto;
   box-shadow:0 0 5px rgba(0,0,0,.3)
}

#detailwrap
{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index:10;
   background:rgba(18,10,10,.8);
   display:flex;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center
}

#detail
{
   width:968px;
   background:#fff;
   position:relative;
   border-radius:4px;
   max-height:80vh
}

#detailclose
{
   cursor:pointer;
   background:url(../images/close.svg) no-repeat center / contain;
   width:20px;
   height:20px;
   position:absolute;
   top:-13px;
   right:-34px
}
.detail11
{
   padding:24px 16px 24px 18px;
   display:flex;
   flex-flow:row wrap;
   justify-content:space-between;
   align-items:flex-start
}

.detail111 {
   width:400px;
   height:400px;
   background:#000;
   display: flex;
   justify-content: center;
   position: relative;
}

.detail111 img {
   object-fit: contain;
   max-width: 100%;
   max-height: 400px;
   width: auto;
   height: auto;
}

.detail112
{
   width:495px;
   height:400px;
   position:relative
}

.detail112 h3
{
   font-size:14px;
   line-height:20px;
   letter-spacing:.143em;
   color:#313339;
   font-weight:700;
   margin-bottom:10px
}

.detail1121 {
   font-size:20px;
   line-height:29px;
   letter-spacing:.077em;
   color:#313339;
   margin-bottom:18px;
   font-weight:700;
   display: flex;
   align-items: center;
}

.detail1121 .colorformat
{
   background:url(../images/color_icon.svg) no-repeat center / contain;
   vertical-align:middle;
   margin-left:10px;
   display:inline-block;
   min-width: 22px;
   width: 22px;
   height:22px
}

.detail1121 a
{
   display:inline-block;
   vertical-align:middle;
   background:url(../images/link.svg) no-repeat center / contain;
   min-width: 22px;
   width: 22px;
   height:22px;
   margin-left:10px
}

.detail1121 a:hover
{
   background-image:url(../images/link_o.svg)
}

.detail1122
{
   display:flex;
   flex-flow:row wrap;
   justify-content:space-between;
   align-items:flex-start;
   margin-bottom:18px
}

.detail1122c
{
   border:1px dotted #c6c6c8;
   border-radius:1px;
   padding:7px 8px;
   text-align:center;
   color:#313339;
   min-width:102px;
   box-sizing:border-box
}

.detail1122c i
{
   display:inline-block;
   background-repeat:no-repeat;
   background-position:center;
   background-size:contain;
   width:16px;
   height:16px;
   vertical-align:middle;
   margin-right:6px
}

.detail1122c .time
{
   background-image:url(../images/time.svg)
}

.detail1122c .material
{
   background-image:url(../images/pic.svg)
}

.detail1122c .aspect
{
   background-image:url(../images/aspect.svg)
}

.detail1122c .aspect.aspect2
{
   background-image:url(../images/aspect_2.svg)
}

.detail1122c .aspect.aspect3
{
   background-image:url(../images/aspect_3.svg)
}

.detail1122c .resolution
{
   background-image:url(../images/pc.svg);
   width:22px;
   height:20px
}

.detail1122c1
{
   border-bottom:1px dashed #ADADB0;
   font-size:12px;
   letter-spacing:.142em;
   line-height:20px;
   padding:0 5px 4px
}

.detail1122c2
{
   font-size:14px;
   line-height:20px;
   font-weight:700;
   padding:8px 5px 0
}

.detail1123
{
   margin-bottom:16px
}

.detail11231
{
   padding-bottom:7px;
   border-bottom:1px dotted #ADADB0
}

.detail11231 span
{
   font-size:12px;
   line-height:21px;
   display:inline-block;
   margin-bottom:9px;
   margin-right:10px;
   background:#f5f5f5;
   border-radius:6px;
   padding:0 8px
}

.detail1124
{
}

.detail1124 h3
{
   margin-bottom:8px
}

.detail1124 p
{
   font-size:12px;
   line-height:24px
}

.detail1125
{
   font-size:12px;
   line-height:18px;
   text-align:right;
   letter-spacing:.083em;
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   padding-top:7px;
   border-top:1px dotted #ADADB0
}

.detail1126
{
   border:2px solid #c8c8c8;
   padding:6px 10px 6px 45px;
   background:url(../images/icon_warning.svg) no-repeat 11px center;
   position:absolute;
   bottom:0;
   left:0;
   width:100%
}

.detail1126 p
{
   color:#777;
   font-size:11px;
   line-height:15px
}

#detail1.old-format #detail1124 p
{
   display:none
}

#detail1.old-format #detail1125
{
   bottom:100px
}

.detail12
{
   background:#f5f5f5;
   padding:8px 17px 7px;
   border-radius:0 0 4px 4px
}

.detail12 h3
{
   font-size:14px;
   line-height:20px;
   letter-spacing:.05em;
   font-weight:700;
   margin:0 32px 5px
}

.detail120
{
   height:0;
   position:relative
}

.detail1201
{
   position:absolute;
   top:0;
   left:0;
   cursor:pointer;
   background:url(../images/page_move.svg) no-repeat center / contain;
   width:22px;
   height:78px;
   transform:rotate(180deg)
}

.detail1201:hover
{
   background-image:url(../images/page_move_o.svg)
}

.detail1202
{
   position:absolute;
   top:0;
   right:0;
   cursor:pointer;
   background:url(../images/page_move.svg) no-repeat center / contain;
   width:22px;
   height:78px
}

.detail1202:hover
{
   background-image:url(../images/page_move_o.svg)
}

.detail121
{
   height:95px;
   display:flex;
   flex-flow:column wrap;
   justify-content:flex-start;
   align-items:flex-start;
   overflow:hidden;
   margin:0 32px
}

.detail121c
{
   border-radius:1px;
   background:#fff;
   width:250px;
   box-sizing:border-box;
   margin-right:11px;
   height:78px;
   padding:3px;
   display:flex;
   flex-flow:row wrap;
   justify-content:space-between;
   align-items:flex-start;
   color:#313339;
   text-decoration:none!important;
   box-shadow:0 0 7px rgba(186,200,209,.7)
}

.detail121c:last-child:nth-child(2)
{
   margin-right:359px
}

.detail121c:last-child:nth-child(3)
{
   margin-right:97px
}

.detail121c1
{
   width:70px;
   height:70px;
   display:flex;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center;
   background:#000;
   overflow:hidden
}

.detail121c1 img
{
   max-width:70px;
   max-height:70px;
   width:auto;
   height:auto;
   transition:transform .3s;
   object-fit: contain;
}

.detail121c:hover .detail121c1 img
{
   transform:scale(1.1)
}

.detail121c2
{
   width:164px
}

.detail121c21 .video_name
{
   font-size:14px;
   line-height:20px;
   font-weight:700;
   height:54px;
   display: inline-block;
   max-width: 100%;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

.detail121c21.colorformat .video_name
{
   max-width: calc(100% - 30px);
}

.detail121c21.colorformat .video_color
{
   display:inline-block;
   background:url(../images/color_icon.svg) no-repeat center / contain;
   vertical-align: top;
   width:18px;
   height:18px;
   margin-left:5px;
   margin-top: 1px;
}

.detail121c22
{
   display:flex;
   flex-flow:row wrap;
   justify-content:space-between;
   align-items:flex-start;
   line-height:14px;
   font-size:12px
}

.detail121c221
{
   width:60px;
   padding-left:20px;
   background:url(../images/aspect.svg) no-repeat left center / 14px 14px;
   letter-spacing:.083em
}

.detail121c221-noimage
{
   width:60px;
   padding-left:20px;
   letter-spacing:.083em
}

.detail121c221.aspect2
{
   background-image:url(../images/aspect_2.svg)
}

.detail121c221.aspect3
{
   background-image:url(../images/aspect_3.svg)
}

.detail121c222
{
   padding-left:20px;
   background:url(../images/time.svg) no-repeat left center / 14px 14px;
   letter-spacing:.05em
}

.detail121c223
{
   padding-left:20px;
   background:url(../images/pic.svg) no-repeat left center / 14px 14px;
   letter-spacing:.05em
}

@media screen and (max-width: 1109px) {

   main
   {
      width:98%
   }

   #catalog22
   {
      justify-content:space-evenly;
   }
}

@media screen and (min-width: 641px) {
   .sp
   {
      display:none
   }

   .imgswap :last-child
   {
      display:none
   }
}

@media screen and (max-width: 640px) {
   .pc
   {
      display:none
   }

   .imgswap :first-child
   {
      display:none
   }

   p,h1,h2,h3,h4,h5,h6
   {
      max-height:100%
   }

   body
   {
      -webkit-text-size-adjust:100%
   }
}

*,:before,:after
{
   box-sizing:border-box;
   margin:0;
   padding:0
}

.wrapper
{
   display:none;
   z-index:11;
   position:fixed;
   left:50%;
   top:50%;
   margin:-50px;
   width:100px;
   height:100px;
   background-color:transparent;
   border:none;
   -webkit-user-select:none
}

body.loading .wrapper
{
   display:block
}

.wrapper .box-wrap
{
   width:70%;
   height:70%;
   margin:calc((100% - 70%)/2) calc((100% - 70%)/2);
   position:relative;
   -webkit-transform:rotate(-45deg);
   transform:rotate(-45deg)
}

.wrapper .box-wrap .box
{
   width:100%;
   height:100%;
   position:absolute;
   left:0;
   top:0;
   background:rgba(135,0,0,0.6);
   background:linear-gradient(to right,#141562,#486fbc,#eab5a1,#8dd6ff,#4973c9,#d07ca7,#f4915e,#f5919e,#b46f89,#141562,#486fbc);
   background-position:0 50%;
   background-size:1000% 1000%;
   visibility:hidden
}

.wrapper .box-wrap .box.one
{
   -webkit-animation:moveGradient 15s infinite,oneMove 3.5s infinite;
   animation:moveGradient 15s infinite,oneMove 3.5s infinite
}

.wrapper .box-wrap .box.two
{
   -webkit-animation:moveGradient 15s infinite,twoMove 3.5s .15s infinite;
   animation:moveGradient 15s infinite,twoMove 3.5s .15s infinite
}

.wrapper .box-wrap .box.three
{
   -webkit-animation:moveGradient 15s infinite,threeMove 3.5s .3s infinite;
   animation:moveGradient 15s infinite,threeMove 3.5s .3s infinite
}

.wrapper .box-wrap .box.four
{
   -webkit-animation:moveGradient 15s infinite,fourMove 3.5s .575s infinite;
   animation:moveGradient 15s infinite,fourMove 3.5s .575s infinite
}

.wrapper .box-wrap .box.five
{
   -webkit-animation:moveGradient 15s infinite,fiveMove 3.5s .725s infinite;
   animation:moveGradient 15s infinite,fiveMove 3.5s .725s infinite
}

.wrapper .box-wrap .box.six
{
   -webkit-animation:moveGradient 15s infinite,sixMove 3.5s .875s infinite;
   animation:moveGradient 15s infinite,sixMove 3.5s .875s infinite
}

@-webkit-keyframes moveGradient {
   to
   {
      background-position:100% 50%
   }
}

@keyframes moveGradient {
   to
   {
      background-position:100% 50%
   }
}

@-webkit-keyframes oneMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes oneMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@-webkit-keyframes twoMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes twoMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@-webkit-keyframes threeMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes threeMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(0% 70% 70% 0 round 5%);
      clip-path:inset(0% 70% 70% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(0% 35% 70% round 5%);
      clip-path:inset(0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(35% 70% 35% 0 round 5%);
      clip-path:inset(35% 70% 35% 0 round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@-webkit-keyframes fourMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes fourMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@-webkit-keyframes fiveMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes fiveMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@-webkit-keyframes sixMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

@keyframes sixMove {
   0%
   {
      visibility:visible;
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   14.2857%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   28.5714%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   42.8571%
   {
      -webkit-clip-path:inset(70% 0 0 70% round 5%);
      clip-path:inset(70% 0 0 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   57.1428%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   71.4285%
   {
      -webkit-clip-path:inset(35% 0% 35% 70% round 5%);
      clip-path:inset(35% 0% 35% 70% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   85.7142%
   {
      -webkit-clip-path:inset(35% round 5%);
      clip-path:inset(35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }

   100%
   {
      -webkit-clip-path:inset(70% 35% 0% 35% round 5%);
      clip-path:inset(70% 35% 0% 35% round 5%);
      -webkit-animation-timing-function:cubic-bezier(0.86,0,0.07,1);
      animation-timing-function:cubic-bezier(0.86,0,0.07,1)
   }
}

.paginationjs-pages ul
{
   display:inline-flex
}

.paginationjs-pages ul li
{
   list-style:none
}

.paginationjs-pages ul li.active a
{
   background:transparent !important;
   color:#395370 !important;
   border:2px solid #395370;
}

.paginationjs-pages .paginationjs-ellipsis
{
   display:flex;
   align-items:center;
   margin: 0 8px;
}

.hidden-modal
{
   display:none
}

.number-select
{
   background:#fc9084;
   font-size:12px;
   line-height:18px;
   width:18px;
   text-align:center;
   height:18px;
   color:#fff;
   border-radius:9px;
   display: none;
}

.refine-modal
{
   position:fixed;
   top:105px;
   right:0;
   bottom:0;
   left:0;
   z-index:1050;
   overflow:hidden;
   outline:0;
   text-align:center;
   background:rgba(18,10,10,.5);
   display: none;
}

.refine-modal:before
{
   content:'';
   display:inline-block;
   height:100%;
   vertical-align:middle;
   margin-right:-4px
}

.refine-modal .modal-dialog
{
   width:calc(100vw - 100px);
   min-width:1060px;
   max-width:1220px;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
}

.refine-modal .modal-content
{
   position:relative;
   height:485px;
   background-color:#fff;
   -webkit-background-clip:padding-box;
   background-clip:padding-box;
   border:1px solid rgba(0,0,0,.2);
   border-radius:.3rem;
   outline:0
}

.modal-body
{
   padding: 12px 20px 0 20px;
}

.modal-refine-list
{
   overflow: overlay;
   height:400px;
   padding-right: 10px;
   overflow-x: hidden;
}

.modal-refine-list::-webkit-scrollbar {
    width: 6px;
}

.modal-refine-list::-webkit-scrollbar-thumb {
    background: #C6C6C6;
    border-radius: 6px;
    box-shadow: none;
}

.modal-refine-list::-webkit-scrollbar-track {
    background: #F4F4F4;
    border: none;
    border-radius: 6px;
    box-shadow: none;
}

.menu {
    width: 1015px;
    margin: 0 auto;
    padding: 0 10px;
}

.refine-modal .modal-body .modal-title
{
   display:flex;
   line-height:20px;
   padding:8px;
   border-bottom:2px solid #EBEEF1
}

.refine-modal .modal-body .refine-title
{
   font-weight:700;
   font-size:18px;
   color:#1B1B1B;
   margin-right:8px
}

.refine-modal .modal-body .reset-select
{
   font-size:12px;
   color:#395370;
   margin-left:8px;
   cursor: pointer;
   display: none;
}

.refine-modal .modal-body ul
{
   display:flex;
   list-style-type:none;
   letter-spacing:.071em;
   color:#313339;
   flex-flow:row wrap;
   align-items:flex-start;
   padding:15px 10px;
}

.refine-modal .modal-body li
{
   text-align:left;
   font-size:12px;
   line-height:144%;
   color:#1B1B1B;
   margin-bottom:11px;
   position:relative;
   margin-right: 12px;
}

.refine-modal .modal-body .cta li,
.refine-modal .modal-body .color li {
    width: 100%;
}

.refine-modal .modal-body li img
{
    margin-right: 5px;
}

.refine-modal .modal-body li label span
{
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   line-height: 1;
}

.refine-modal .modal-body li label span:hover
{
   color:#FC9084
}

.refine-modal .modal-body li input[type="checkbox"]
{
   display:none
}

.refine-modal .modal-body li input[type="checkbox"]+span::before
{
   content:'';
   display:inline-block;
   background:url(../images/checkbox-off.svg) no-repeat center / contain;
   min-width:14px;
   width: 14px;
   height:14px;
   vertical-align:middle;
   margin-right:5px;
   box-sizing:border-box;
   border-radius:2px
}

.refine-modal .modal-body li input[type="checkbox"]:checked+span
{
   color:#FC9084;
}

.refine-modal .modal-body li input[type="checkbox"]:checked+span::before
{
   border:2px solid #ff6450;
   background:#ff6450
}

.refine-modal .modal-body li input[type="checkbox"]:checked+span::after
{
   content:"";
   display:block;
   width:5px;
   height:11px;
   transform:rotate(40deg);
   border-bottom:2px solid #fff;
   border-right:2px solid #fff;
   position:absolute;
   top: 0px;
   left:4.5px
}

.refine-modal .modal-footer
{
   display:flex;
   justify-content: flex-start;
   height:68px;
   line-height:28px;
   padding:20px;
   font-size:12px;
   border-top:1px solid #EBEEF1
}

.refine-modal .modal-footer .clear-condition a
{
   color:#395370
}

.refine-modal .modal-footer button
{
   padding:7px 20px;
   border-radius:4px;
   height:32px;
   font-size:12px;
   line-height:0;
   margin-left:14px
}

.refine-modal .modal-footer .cancel
{
   background:#FFF;
   color:#395370;
   border:1px solid rgba(57,83,112,0.6)
}

.refine-modal .modal-footer .appli
{
   background:#FF6450;
   color:#FFF;
   border:none
}

.refine-modal .modal-footer .modal-footer-button
{
   position:absolute;
   right:20px;
}

.bgm-item {
    width:100%;
    height:80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 3px;
}
.bgm-item .bgm-container {
    display: flex;
    align-items: center;
    padding: 0 57px 0 37px;
    height: 100%;
    border-bottom: 1px solid #EBEEF1;
}

.bgm-item .btn-play {
    display: block;
}

.bgm-item .btn-pause {
    display: none;
}

.bgm-item.play .btn-play {
    display: none;
}

.bgm-item.play .btn-pause {
    display: block;
}

#bgms {
    width: 1070px;
    margin: 0 auto 30px;
    box-shadow: 0px 2px 2px rgba(152, 162, 179, 0.15), 0px 1px 5px rgba(152, 162, 179, 0.15);
    border-radius: 2px;
}

#bgms .audio-top .audio-name {
    font-size: 14px;
    color: #1B1B1B;
}

#bgms .audio-top .audio-mood {
    font-size: 12px;
    color: #8D8D8D;
}

#bgms .timeline-container {
    margin-left: 35px;
}

#bgms .audio-top {
    margin-bottom: 15px;
}

#bgms .audio-top .audio-mood {
    padding: 0 14px;
    margin-left: 14px;
    border-left: 1px solid #E8E8E8;
}

#bgms .timeline-container .audio-bottom {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#bgms .audio-bottom .audio-time {
    margin-right: 25px;
}

#bgms .audio-bottom .timeline-background {
    width: 760px;
    height: 4px;
    background: #E8E8E8;
    border-radius: 2px;
    position: relative;
}

#bgms .audio-timeline {
    position: relative;
}

#bgms .timeline-progress .current-timeline {
    width: 18px;
    height: 18px;
    position: absolute;
    background: #8D8D8D;
    border-radius: 50%;
    top: -7px;
    right: -9px;
}

#bgms .play .current-timeline {
    background: #395370 !important;
}

#bgms .audio-bottom .audio-duration {
    margin: 0 16px;
    min-width: 30px;
}

#bgms .audio-timeline .timeline-progress {
    width: 0;
    height: 4px;
    background: #9CA9B7;
    border-radius: 2px;
    position: relative;
    top: -4px;
    left: 0;
}
.audio-volume {
    position: fixed;
    bottom: 20px;
    right: 39px;
    width: 40px;
    height: 40px;
}

.audio-volume-btn {
   width: 100%;
   height: 100%;
   border-radius: 20px;
   background:#6A7E94 url(../images/button_preview_sound.svg) no-repeat center;
}

.audio-volume-btn:hover {
   opacity: 0.6;
}

.volume-control {
    display: none;
    position: absolute;
    width: 28px;
    height: 78px;
    background: #6A7E94;
    border-radius: 2px;
    top: -82px;
    padding: 14px 0;
    left: 50%;
    transform: translate(-50%, 0px);
}

.bg-volume {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.volume-value {
    width: 3px;
    height: 50px;
    background: #ffffff;
    border-radius: 2px;
    position: relative;
    z-index: 2;
    left: 13px;
}

.volume-change {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: absolute;
    background: #ffffff;
    left: -3px;
    top: -4px;
}

.volume-background {
    width: 3px;
    height: 50px;
    border-radius: 2px;
    background: #C6C6C6;
    position: absolute;
    z-index: 1;
    left: 13px;
    top: 13px;
}

#bgms .btn-audio,
#bgms .audio-timeline,
#bgms .audio-volume {
    cursor: pointer;
}

#refine-condition.formats .bgm_categorys {
    display: none;
}

#refine-condition.formats .menu:not(.bgm_categorys) {
    display: block;
}

#refine-condition.bgms .bgm_categorys {
    display: block;
}

#refine-condition.bgms .menu:not(.bgm_categorys) {
    display: none;
}

/*------------PDF------------*/

.view_configuration_table {
    width: 280px;
    height: 34px;
    background: #395370;
    border-radius: 5px;
    font-size: 14px;
    color: #FFFFFF!important;
    display: block;
    text-align: center;
    line-height: 32px;
    text-decoration: none!important;
}

.view_configuration_table:hover {
   color: #FFFFFF!important;
   text-decoration: none!important;
}

.container {
    width: 650px;
    height: auto;
    margin: auto;
    background-color: #fff;
    padding: 30px;
}

.container .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.container .header .title {
    font-weight: bold;
    font-size: 36px;
    color: #000;
}

.container .header .download_pdf {
    width: 120px;
    height: 20px;
    background: #141414;
    border-radius: 2px;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.format_scene table,
.format_info table {
    border: 1px solid #C4C4C4;
    border-spacing: 0;
    text-align: center;
}

.format_scene table th,
.format_info table th {
    background: #395370;
    color: #fff;
    font-size: 16px;
    border: 1px solid #C4C4C4;
    line-height: 2;
}

.format_info table td {
    font-size: 16px;
    border: 1px solid #C4C4C4;
    font-weight: bold;
    line-height: 3;
}
.format_destination {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 16px;
}

.format_destination h3 {
    display: inline;
}

.format_destination span {
    display: block;
    margin-right: 10px;
    background: #E5E5E5;
    border-radius: 4px;
    padding: 5px 8px;
}

.catalog-item-container {
   width: 253px;
   position: relative;
}

.catalog-item-set-container {
   margin-bottom:30px;
   width: 250px;
   position: relative;
}

.catalog-item-set-container .tripple-border {
    position: absolute;
    top: 16px;
    right: -4px;
    bottom: 10px;
    border-radius: 4px 4px 8px 4px;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    width: 245px;
    height: 100%;
}

.catalog-item-set-container .tripple-border:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: -8px;
    left: -5px;
    right: 8.5px;
    bottom: 7.5px;
    border-radius: 4px 4px 6px 4px;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.catalog-item-set-container .catalog22c {
   width: 238px!important;
}
.catalog-item-set-container .catalog22c1 {
   height: 238px!important;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header-2 .header-navigation-icon {
   display: flex!important;
   align-items: center;
}

#header-2 .header-navigation-icon .text {
    width: calc(100% - 32px);
    height: 20px;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    font-feature-settings: 'palt' on, 'liga' off;
    color: #5F5F5F;
    flex: none;
    flex-grow: 0;
    margin-left: 6px;
}

#header-2 .dropdown-menu.management .dropdown-item.selected a {
    background: #E8E8E8;
    font-weight: 700;
    color: #1B1B1B;
}

#header-2 .ae-and-rdata-management .dropdown-item a{
   border-radius: 0!important;
}
#header-2 .ae-and-rdata-management .dropdown-item {
   padding: 0!important;
}

#header-2 .dropdown-item {
   padding: 5px 12px;
   font-size: 12px;
}

#header-2 .dropdown-item a {
   font-size: 12px!important;
}

#header-2 .dropdown-item:active {
   background: #F4F4F4;
}

.dropdown-menu.management .dropdown-item:not(.selected):hover a {
    background-color: #F4F4F4;
}
.dropdown-menu.management .dropdown-item a {
    padding: 6px 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
    letter-spacing: 0.05em;
    font-feature-settings: 'palt' on;
    color: #5F5F5F;
    border-radius: 4px;
    width: 100%;
    min-width: 157px;
    height: 32px;
}

.dropdown-menu.management .dropdown-item.selected a {
    background: #E8E8E8;
    font-weight: 700;
    color: #1B1B1B;
}

.dropdown-menu.management .dropdown-item a .icon {
    margin-right: 6px;
}

#header-2 .nav-item a span.icon img {
   width: 22px!important;
   height: 22px!important;
}

main a {
   color: #313339!important;
   text-decoration: none!important;
}

#top #header-1 a, #top #header-3 a {
   color: #313339!important;
   text-decoration: none!important;
}

#detailwrap a {
   color: #313339;
}

a:focus{
   background: none!important;
}

select#order:focus {
   outline: 1px solid #CDD4DB!important;
   border: 1px solid #CDD4DB!important;
   background: none!important;
}

.content.r_data .header-3-container .search {
   right: 20px!important;
}

.content.r_data .header-3-container .sort {
   display: none!important;
}

#detailwrap.r_format_set .detail1122c.duration {
   display: none!important;
}

#refine-condition .modal-body .modal-refine-list {
   margin-left: 0!important;
   margin-right: 0!important;
   display: block!important;
}
#refine-condition .modal-body {
   padding: 12px 20px 0 20px;
}

#detailwrap.r_format_set .detail1124 {
   display: none!important;
}

.content #catalog2 div.r_format_set {
   display: none;
}

.content.r_data #catalog2 div.ae_data {
   display: none;
}

.content.r_data #catalog2 div.r_format_set {
   display: block;
}


.content.r_data #catalog2 div.r_format_set .catalog22c2.colorformat .video_color {
   display: none!important;
}

.r-template {
   position: relative;
   flex-direction: column;
}

.thumbnail-slider-controller .go-to-left,
.thumbnail-slider-controller .go-to-right
{
    cursor: pointer;

}

.thumbnail-slider-controller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    width: 100%;
    padding: 0 4px;
}

.thumbnail-slider-container .slide-indicator {
    margin-right: 6px;
    margin-bottom: 4px;
    content: url("../../img/gsap/icon_thumbnail_slide.svg");
    cursor: pointer;
}

.thumbnail-slider-container .slide-indicator.active {
    content: url("../../img/gsap/icon_active_thumbnail_slide.svg");
}

.thumbnail-slider-container {
   background: rgba(0, 0, 0, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 24px;
   width: 100%;
   position: absolute;
   bottom: -24px;
}

#detailwrap .detail111.r-template {
   display: none;
}

#detailwrap.r_format_set .detail111.r-template {
   display: flex!important;
}

#detailwrap.r_format_set .detail111.ae-template {
   display: none;
}