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

@media screen and (min-width: 768px){
    .sp_only{
        display:none !important;
    }
}

@media screen and (max-width: 767px){
    .pc_only{
        display: none !important;
    }
    
    .sp_only{
        display: block !important;
    }
}

.dice_area{
    position: relative;
    width: 100%;
    height: 50.834vw;
    height: 625px;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
    visibility: hidden;
}

.dice_area.active{
    visibility: visible;
}

@media screen and (max-width: 767px){
    .dice_area{
        max-width: inherit;
        height: 146.7vw;
    }
}

.dice_inner{
    width: 1000px;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

@media screen and (max-width: 767px){
    .dice_inner{
        width: 100%;
    }
}

.dice_logo{
    position: absolute;
    width: 324px;
    height: 253px;
    left: 50%;top: 43.1%;
    transform: translate(-50%,-50%);
}

.dice_logo>div{
    position: absolute;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px){
    .dice_logo{
        width: 69.33%;
        max-width: inherit;
        z-index: 1;
        top: 4vw;
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }
}

.dice_logo img{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: opacity 0.6s ease-in-out 1s;
    transition: opacity 0.6s ease-in-out 1s;
    opacity: 0;
}

@media screen and (max-width: 767px){
    .dice_logo img{
        -webkit-transition: opacity 0.6s ease-in-out 0.5s;
        transition: opacity 0.6s ease-in-out 0.5s;
    }
}

.dice_logo>div img:nth-child(2){
    -webkit-transition: opacity 0.6s ease-in-out 1.4s;
    transition: opacity 0.6s ease-in-out 1.4s;
}

@media screen and (max-width: 767px){
    .dice_logo>div img:nth-child(2){
        -webkit-transition: opacity 0.6s ease-in-out 0.9s;
        transition: opacity 0.6s ease-in-out 0.9s;
    }
}

.dice_logo>div img:nth-child(3){
    -webkit-transition: opacity 0.6s ease-in-out 1.6s;
    transition: opacity 0.6s ease-in-out 1.6s;
}

@media screen and (max-width: 767px){
    .dice_logo>div img:nth-child(3){
        -webkit-transition: opacity 0.6s ease-in-out 1.1s;
        transition: opacity 0.6s ease-in-out 1.1s;
    }
}

.dice_logo>div img:nth-child(4){
    -webkit-transition: none;
    transition: none;
    -webkit-transform-origin: center 70%;
    transform-origin: center 70%;
    -webkit-transform: scale(0.001);
    transform: scale(0.001);
    opacity: 1;
    z-index: -1;
}

.dice_area.show .dice_logo img{
    opacity: 1;
}

.dice_area.show .dice_logo>div img:nth-child(4){
    -webkit-animation: dice 0.5s ease-out 2.5s forwards;
    animation: dice 0.5s ease-out 2.5s forwards;
}

@media screen and (max-width: 767px){
    .dice_area.show .dice_logo>div img:nth-child(4){
        -webkit-animation: dice 0.4s ease-out 1.6s forwards;
        animation: dice 0.4s ease-out 1.6s forwards;
    }
}

@-webkit-keyframes dice{
    0%{-webkit-transform: scale(0.001);}
    60%{-webkit-transform: scale(1.05);}
    80%{-webkit-transform: scale(0.95);}
    100%{-webkit-transform: scale(1);}
}

@keyframes dice{
    0%{transform: scale(0.001);}
    60%{transform: scale(1.05);}
    80%{transform: scale(0.95);}
    100%{transform: scale(1);}
}

.dice_bg1,.dice_bg2,.dice_bg3,.dice_bg4,.dice_bg5{
    position: absolute;
    opacity: 0;
}

.dice_bg1 img,.dice_bg2 img,.dice_bg3 img,.dice_bg4 img,.dice_bg5 img{
    width: 100%;
    height: auto;
}

.dice_bg1{
    width: 83px;
    left: 81px;
    top: 32px;
    z-index: 1;
    transition: opacity 0.5s ease-out 0.4s;
}

.dice_bg2{
    width: 85px;
    left: -83px;
    top: 217px;
    z-index: 1;
    transition: opacity 0.5s ease-out 0.4s;
}

.dice_bg3{
    width: 67px;
    left: 148px;
    top: 487px;
    z-index: 1;
    transition: opacity 0.5s ease-out 0.4s;
}

.dice_bg4{
    width: 103px;
    left: 465px;
    top: 438px;
    z-index: 1;
    transition: opacity 0.5s ease-out 0.4s;
}

.dice_bg5{
    width: 127px;
    right: -19px;
    top: 162px;
    transition: opacity 0.5s ease-out 0.4s;
}

.dice_set{
    -webkit-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    opacity: 0;
}

body.ie11 .dice_set{
    display: none;
}

body.ie11 .simple_dice{
    display: block !important;
}

.dice{
    width: 10vw;
    height: 10vw;
    width: 124px;
    height: 124px;
    position: absolute;
    left: 159px;
    top: 301px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    -webkit-transform: rotateX(-20deg) rotateY(-30deg) translateZ(0px);
    transform: rotateX(-20deg) rotateY(-30deg) translateZ(0px);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.dice a{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.dice_area.show .dice_set,
.dice_area.show .dice_bg1,
.dice_area.show .dice_bg2,
.dice_area.show .dice_bg3,
.dice_area.show .dice_bg4,
.dice_area.show .dice_bg5{
    opacity: 1;
}

@media screen and (max-width: 767px){
    .dice{
        left: 10.3%;
        top: 0;
        width: 18.8vw;
        height: 18.8vw;
    }
}

@media screen and (min-width: 768px){
    .dice_set.d2{
        transition:opacity 0.5s ease-out 0.2s;
    }
    
    .dice_set.d3{
        transition:opacity 0.5s ease-out 0.25s;
    }
    
    .dice_set.d4{
        transition:opacity 0.5s ease-out 0.05s;
    }
    
    .dice_set.d5{
        transition:opacity 0.5s ease-out 0.15s;
    }
    
    .dice_set.d6{
        transition:opacity 0.5s ease-out 0.35s;
    }
    
    .dice_set.d7{
        transition:opacity 0.5s ease-out 0.3s;
    }
    
    .dice_set.d8{
        transition:opacity 0.5s ease-out 0.1s;
    }
    
    .dice_set.d9{
        transition:opacity 0.5s ease-out 0.35s;
    }
    
    .dice_set.d10{
        transition:opacity 0.5s ease-out 0.15s;
    }
    
    .dice_set.d12{
        transition:opacity 0.5s ease-out 0.2s;
    }
    
    .dice_set.d13{
        transition:opacity 0.5s ease-out 0.05s;
    }

    .dice_set.d14{
        transition:opacity 0.5s ease-out 0.1s;
    }

    .dice_set.d15{
        transition:opacity 0.5s ease-out 0.25s;
    }

    .dice_set.d16{
        transition:opacity 0.5s ease-out 0.3s;
    }
}

@media screen and (max-width: 767px){
    .dice_set.d1{
        transition:opacity 0.5s ease-out 0.2s;
    }
    
    .dice_set.d2{
        transition:opacity 0.5s ease-out 0.2s;
    }
    
    .dice_set.d3{
        transition:opacity 0.5s ease-out;
    }
    
    .dice_set.d4{
        transition:opacity 0.5s ease-out 0.05s;
    }
    
    .dice_set.d5{
        transition:opacity 0.5s ease-out;
    }
    
    .dice_set.d6{
        transition:opacity 0.5s ease-out 0.35s;
    }
    
    .dice_set.d7{
        transition:opacity 0.5s ease-out 0.1s;
    }
    
    .dice_set.d8{
        transition:opacity 0.5s ease-out 0.3s;
    }
    
    .dice_set.d9{
        transition:opacity 0.5s ease-out 0.05s;
    }
    
    .dice_set.d10{
        transition:opacity 0.5s ease-out 0.3s;
    }
    
    .dice_set.d11{
        transition:opacity 0.5s ease-out 0.15s;
    }
    
    .dice_set.d12{
        transition:opacity 0.5s ease-out 0.2s;
    }
    
    .dice_set.d13{
        transition:opacity 0.5s ease-out 0.15s;
    }

    .dice_set.d14{
        transition:opacity 0.5s ease-out 0.1s;
    }

    .dice_set.d15{
        transition:opacity 0.5s ease-out 0.1s;
    }

    .dice_set.d16{
        transition:opacity 0.5s ease-out 0.2s;
    }
}

.dice.d2{
    left: 265px;
    top: 439px;
    
}

.dice.d3{
    left: -9px;
    top: 432px;
}

.dice.d4{
    left: -115px;
    top: 295px;
}

.dice.d5{
    left: 53px;
    top: 163px;
}

.dice.d6{
    left: -53px;
    top: 25px;
    z-index: -1;
}

.dice.d7{
    left: 221px;
    top: 31px;
}

.dice.d8{
    left: 389px;
    top: -101px;
}

.dice.d9{
    left: auto;
    right: -112px;
    top: -5px;
}

.dice.d10{
    left: auto;
    right: 55px;
    top: -106px;
}

.dice.d11{
    left: auto;
    right: 223px;
    top: 26px;
}

.dice.d12{
    left: auto;
    right: 117px;
    top: 164px;
}

.dice.d13{
    left: auto;
    right: 73px;
    top: 338px;
}

.dice.d14{
    left: auto;
    right: -96px;
    top: 322px;
}

.dice.d15{
    left: auto;
    right: -34px;
    top: 475px;
}

.dice.d16{
    left: auto;
    right: 240px;
    top: 470px;
}

body.edge .dice.d1{
    top: 299px;
}

body.edge .dice.d2{
    top: 435px;
}

body.edge .dice.d3{
    top: 431px;
}

body.edge .dice.d6{
    left: -52px;
    top: 26px;
}

body.edge .dice.d12{
    top: 162px;
}

body.edge .dice.d13{
    top: 336px;
}

body.edge .dice.d14{
    right: -95px;
    top: 321px;
}

body.edge .dice.d15{
    right: -33px;
    top: 472px;
}

body.edge .dice.d16{
    top: 467px;
}

@media screen and (max-width: 767px){
    
    .dice_bg1{
        width: 42.4%;
        left: auto;
        right: 1%;
        top: 3vw;
    }
    
    .dice_bg2{
        width: 16.53%;
        left: 0;
        top: 19vw;
    }
    
    .dice_bg3{
        width: 12%;
        left: auto;
        right: 0;
        top: 112vw;
    }
    
    .dice.d1{
        left: 40%;
        right: auto;
        top: 90.4vw;
    }
    
    .dice.d2{
        left: 25.6%;
        top: 120.6vw;
    }
    
    .dice.d3{
        left: 3.5%;
        top: 9.8vw;
    }
    
    .dice.d4{
        left: -6%;
        top: 37.2vw;
    }
    
    .dice.d5{
        left: 70.4%;
        top: 58.5vw;
    }
    
    .dice.d6{
        display: none;
    }
    
    .dice.d7{
        left: 10.3%;
        top: 62.5vw;
    }
    
    .dice.d8{
        left: -5.7%;
        top: 122.5vw;
    }
    
    .dice.d9{
        top: 3.8vw;
        right: -8%;
    }
    
    .dice.d10{
        top: 116vw;
        right: -4.5%;
    }
    
    .dice.d11{
        left: 40%;
        right: auto;
        top: 60.5vw; 
    }
    
    .dice.d12{
        left: 10.3%;
        top: 92.4vw;
    }
    
    .dice.d13{
        left: 70.4%;
        right: auto;
        top: 88.4vw;
    }
    
    .dice.d14{
        top: 30.9vw;
        right: 1%;
    }
    
    .dice.d15{
        top: 86.4vw;
        right: -20%;
    }
    
    .dice.d16{
        left: 56%;
        right: auto;
        top: 118.3vw;
    }
}

@media screen and (min-width: 768px){
.dice_roll:hover{
    -webkit-transform: rotateX(-20deg) rotateY(180deg) translateZ(0px);
    transform: rotateX(-20deg) rotateY(180deg) translateZ(0px);
    z-index: 1;
}
}

.dice div{
    position: absolute;
    width:100%;
	height: 100%;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.dice div:nth-child(1){
    -webkit-transform: rotateX(90deg) translateZ(61px);
    transform: rotateX(90deg) translateZ(61px);
}

.dice div:nth-child(2){
    -webkit-transform: rotateY(0deg) translateZ(62px);
    transform: rotateY(0deg) translateZ(62px);
    -moz-transform: rotateY(0deg) translateZ(61px);
}

.dice div:nth-child(3){
    -webkit-transform: rotateY(-90deg) translateZ(62px);
    transform: rotateY(-90deg) translateZ(62px);
    -moz-transform: rotateY(-90deg) translateZ(61px);
}

.dice div:nth-child(4){
    -webkit-transform: rotateX(180deg) translateZ(62px);
    transform: rotateX(180deg) translateZ(62px);
    -moz-transform: rotateX(180deg) translateZ(62px);
}

.dice div:nth-child(5){
    -webkit-transform: rotateY(90deg) translateZ(61px);
    transform: rotateY(90deg) translateZ(61px);
}

.dice div:nth-child(6){
    -webkit-transform: rotateX(-90deg) translateZ(62px);
    transform: rotateX(-90deg) translateZ(62px);
}

body.edge .dice div:nth-child(1){
    -webkit-transform: rotateX(90deg) translateZ(61px);
    -moz-transform: rotateX(90deg) translateZ(61px);
    transform: rotateX(90deg) translateZ(61px);
}

body.edge .dice div:nth-child(2){
    -webkit-transform: rotateY(0deg) translateZ(61px);
    -moz-transform: rotateY(0deg) translateZ(61px);
    transform: rotateY(0deg) translateZ(61px);
    
}

body.edge .dice div:nth-child(3){
    -webkit-transform: rotateY(-90deg) translateZ(61px);
    -moz-transform: rotateY(-90deg) translateZ(61px);
    transform: rotateY(-90deg) translateZ(61px);
}

body.edge .dice div:nth-child(4){
    -webkit-transform: rotateX(180deg) translateZ(61px);
    -moz-transform: rotateX(180deg) translateZ(61px);
    transform: rotateX(180deg) translateZ(61px);
    
}

body.edge .dice div:nth-child(5){
    -webkit-transform: rotateY(90deg) translateZ(61px);
    -moz-transform: rotateY(90deg) translateZ(61px);
    transform: rotateY(90deg) translateZ(61px);
}

body.edge .dice div:nth-child(6){
    -webkit-transform: rotateX(-90deg) translateZ(61px);
    -moz-transform: rotateX(-90deg) translateZ(61px);
    transform: rotateX(-90deg) translateZ(61px);
}

body.edge .dice div img{
    width: 124px;
    height: 124px;
    display: block;
    -ms-transform: translate3d(0,0,-1px);
    -moz-transform: translate3d(0,0,-1px);
    transform: translate3d(0,0,-1px);
}

@media screen and (max-width: 767px){
    .dice div:nth-child(1){
        -webkit-transform: rotateX(90deg) translateZ(9.4vw);
        transform: rotateX(90deg) translateZ(9.4vw);
    }

    .dice div:nth-child(2){
        -webkit-transform: rotateY(0deg) translateZ(9.4vw);
        transform: rotateY(0deg) translateZ(9.4vw);
    }

    .dice div:nth-child(3){
        -webkit-transform: rotateY(-90deg) translateZ(9.4vw);
        transform: rotateY(-90deg) translateZ(9.4vw);
    }

    .dice div:nth-child(4){
        -webkit-transform: rotateX(180deg) translateZ(9.4vw);
        transform: rotateX(180deg) translateZ(9.4vw);
    }

    .dice div:nth-child(5){
        -webkit-transform: rotateY(90deg) translateZ(9.25vw);
        transform: rotateY(90deg) translateZ(9.25vw);
    }

    .dice div:nth-child(6){
        -webkit-transform: rotateX(-90deg) translateZ(9.4vw);
        transform: rotateX(-90deg) translateZ(9.4vw);
    }
}


.dice div:nth-child(4) img,
.dice div:nth-child(6) img{
-webkit-transform: scaleY(-1) scaleX(-1);
transform: scaleY(-1) scaleX(-1);
}

body.edge .dice div:nth-child(4) img,
body.edge .dice div:nth-child(6) img{
-webkit-transform: scaleY(-1) scaleX(-1);
transform: scaleY(-1) scaleX(-1);
}

.dice div img{
    width: 100%;
    height: auto;
    display: block;
    -ms-transform: translate3d(0,0,1px);
    -moz-transform: translate3d(0,0,1px);
}

.simple_dice{
    display: none;
}

.simple_dice{
    width: 172px;
    height: 170px;
    position: absolute;
    left: 135px;
    top: 278px;
    -webkit-transition:opacity 0.5s ease-out;
    transition:opacity 0.5s ease-out;
    opacity: 0;
}

.simple_dice.show{
    opacity: 1;
}

.simple_dice img{
    width: 100%;
    height: auto;
}

.simple_dice img.over{
    position: absolute;
    top: 0;
    left: 50%;
    width: 122px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}

@media screen and (min-width: 768px){
    .simple_dice.roll:hover img{
        opacity: 0;
    }
    
    .simple_dice.roll:hover img.over{
        opacity: 1;
        z-index: 1;
    }
}

.simple_dice.d2{
    left: 241px;
    top: 415px;
    -webkit-transition:opacity 0.5s ease-out 0.2s;
    transition:opacity 0.5s ease-out 0.2s;
}

.simple_dice.d3{
    left: -35px;
    top: 408px;
    -webkit-transition:opacity 0.5s ease-out 0.25s;
    transition:opacity 0.5s ease-out 0.25s;
}

.simple_dice.d4{
    left: -140px;
    top: 271px;
    -webkit-transition:opacity 0.5s ease-out 0.05s;
    transition:opacity 0.5s ease-out 0.05s;
}

.simple_dice.d5{
    left: 29px;
    top: 141px;
    -webkit-transition:opacity 0.5s ease-out 0.15s;
    transition:opacity 0.5s ease-out 0.15s;
}

.simple_dice.d6{
    left: -76px;
    top: 3px;
    -webkit-transition:opacity 0.5s ease-out 0.35s;
    transition:opacity 0.5s ease-out 0.35s;
}

.simple_dice.d7{
    left: 197px;
    top: 12px;
    -webkit-transition:opacity 0.5s ease-out 0.3s;
    transition:opacity 0.5s ease-out 0.3s;
}

.simple_dice.d8{
    left: 367px;
    top: -117px;
    -webkit-transition:opacity 0.5s ease-out 0.1s;
    transition:opacity 0.5s ease-out 0.1s;
}

.simple_dice.d9{
    left: auto;
    right: -138px;
    top: -26px;
    -webkit-transition:opacity 0.5s ease-out 0.35s;
    transition:opacity 0.5s ease-out 0.35s;
}

.simple_dice.d10{
    left: auto;
    right: 32px;
    top: -132px;
    -webkit-transition:opacity 0.5s ease-out 0.15s;
    transition:opacity 0.5s ease-out 0.15s;
}

.simple_dice.d11{
    left: auto;
    right: 200px;
    top: -1px;
}

.simple_dice.d12{
    left: auto;
    right: 95px;
    top: 135px;
    -webkit-transition:opacity 0.5s ease-out 0.2s;
    transition:opacity 0.5s ease-out 0.2s;
}

.simple_dice.d13{
    left: auto;
    right: 54px;
    top: 304px;
    -webkit-transition:opacity 0.5s ease-out 0.05s;
    transition:opacity 0.5s ease-out 0.05s;
}

.simple_dice.d14{
    left: auto;
    right: -118px;
    top: 292px;
    -webkit-transition:opacity 0.5s ease-out 0.1s;
    transition:opacity 0.5s ease-out 0.1s;
}

.simple_dice.d15{
    left: auto;
    right: -53px;
    top: 440px;
    -webkit-transition:opacity 0.5s ease-out 0.25s;
    transition:opacity 0.5s ease-out 0.25s;
}

.simple_dice.d16{
    left: auto;
    right: 223px;
    top: 434px;
    -webkit-transition:opacity 0.5s ease-out 0.3s;
    transition:opacity 0.5s ease-out 0.3s;
}