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

/*    <!--PC用アニメーション-->*/
        #lineup .thumb{
            z-index: 1;
            position: relative;
        }
        #lineup .thumb .anim-thumb img{
            z-index: 397 !important;
            cursor: pointer;
        }
       .mask{
            position: absolute;
            background: rgba(0,0,0,0.7);
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 397;
        }
        #idig_anim_pc{
            width: 482px;
            height: 367px;
            background: white;
            margin-top: 3.63%;
            padding: 0;
            position: relative;
            z-index: 398;
        }
        #tag1, #tag2, #tag3{
           position: absolute;
            border-top-right-radius : 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-radius-topright: 10px;
            z-index: 3;
            opacity: 0.7;
            background-repeat: no-repeat;
            background-size: cover;
        }
        #tag1{
            top: -5%;
            left: 0;
            height: 5%;
            width: 22.47%;
            background-image: url( "../../img/idig/tag1.png");
        }
        #tag2{
            top: -5%;
            left: 24.25%;
            height: 5%;
            width: 22.47%;
            background-image: url("../../img/idig/tag2.png");
        }
        #tag3{
            top: -5%;
            left: 48.56%;
            height: 5%;
            width: 22.47%;
            background-image: url("../../img/idig/tag3.png");
        }
        #tag1:hover, #tag2:hover, #tag3:hover, #tag1.open, #tag2.open, #tag3.open{
            opacity: 1;
        }
        #tag1:hover, #tag2:hover, #tag3:hover{
            cursor: pointer;
        }
        #close{
            position: absolute;
            top: -5%;
            right: -0%;
            height: 5%;
            width: 3.63%;
            background-image: url("../../img/idig/close.png");
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 3;
        }
        #idig_anim_pc img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            vertical-align: bottom;
        }
        #kaiteki, #anzen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
        }
        #kinou_container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #kinou{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #box1, #box2, #box3, #box4, #box5{
            position: absolute;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
        }
        #box1{
            top: 16.98%;
            left: 4.11%;
            width:  11.37%;
            height: 7.26%;
        }
        #box1_1{
            position: absolute;
            top: 25%;
            left: 4.11%;
            width:  11.37%;
            height: 12.92%;
           opacity: 1;
            transform: translateY(0%);
            transition-duration:0.4s;
            display: block;
        }
        #box1_1 img{
            position: absolute;
            top: 0%;
            left: 0%;
            width:  100%;
            height: 100%;
           opacity: 1;
        }
        #box1_1.hidden{
            transform: translateY(-12.92%);
            opacity: 0;
            display: none;
        }
        #box2{
            top: 16.98%;
            left: 59.93%;
            width:  11.37%;
            height: 7.26%;
        }
        #box2_1{
            position: absolute;
            top: 25%;
            left: 59.93%;
            width:  11.37%;
            height: 12.92%;
           opacity: 1;
            transform: translateY(0%);
            transition-duration:0.4s;
            display: block;
        }
        #box2_1 img{
            position: absolute;
            top: 0%;
            left: 0%;
            width:  100%;
            height: 100%;
           opacity: 1;
        }
        #box2_1.hidden{
            transform: translateY(-12.92%);
            opacity: 0;
            display: none;
        }
        #box3{
            top: 45.68%;
            left: 4.11%;
            width:  11.37%;
            height: 9.62%;
        }
        #box3_1{
            position: absolute;
            top: 57.30%;
            left: 4.11%;
            width:  11.37%;
            height: 12.92%;
           opacity: 1;
            transform: translateY(0%);
            transition-duration:0.4s;
            display: block;
        }
        #box3_1 img{
            position: absolute;
            top: 0%;
            left: 0%;
            width:  100%;
            height: 100%;
           opacity: 1;
        }
        #box3_1.hidden{
            transform: translateY(-12.92%);
            opacity: 0;
            display: none;
        }
        #box4{
            top: 38.58%;
            left: 81.85%;
            width:  11.37%;
            height: 9.62%;
        }
        #box4_1{
            position: absolute;
            top: 48%;
            left: 81.85%;
            width:  11.37%;
            height: 12.92%;
           opacity: 1;
            transform: translateY(0%);
            transition-duration:0.4s;
            display: block;
        }
        #box4_1 img{
            position: absolute;
            top: 0%;
            left: 0%;
            width:  100%;
            height: 100%;
           opacity: 1;
        }
        #box4_1.hidden{
            transform: translateY(-12.92%);
            opacity: 0;
            display: none;
        }
        #box5{
            top: 77.08%;
            left: 51.37%;
            width:  11.37%;
            height: 7.26%;
        }
        #box5_1{
            position: absolute;
            top: 82.2%;
            left: 51.37%;
            width:  11.37%;
            height: 12.92%;
           opacity: 1;
            transform: translateY(0%);
            transition-duration:0.4s;
            display: block;
        }
        #box5_1 img{
            position: absolute;
            top: 0%;
            left: 0%;
            width:  100%;
            height: 100%;
           opacity: 1;
        }
        #box5_1.hidden{
            transform: translateY(-12.92%);
            opacity: 0;
            display: none;
        }
        .hidden{
            display: none;
        }
        .container_idiganim{
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 10;
        }
        
/*        スマホレイアウト*/
    #idig_anim_sm{
        width: 270px;
        height: 580px;
        position: relative;
        z-index: 398;
    }
    #close_sm{
        background-image: url("../../img/idig/colse-sm.svg");
        background-repeat: no-repeat;
        background-size:contain;
        position: absolute;
        top: 0;
        right: -34px;
        width: 34px;
        height: 34px;
    }
    #tag1_sm, #tag2_sm, #tag3_sm{
        background-repeat: no-repeat;
        background-size:contain;
        position: absolute;
        opacity: 0.7;
    }
    #tag1_sm:hover, #tag2_sm:hover, #tag3_sm:hover, #tag1_sm.open, #tag2_sm.open, #tag3_sm.open{
    opacity: 1;
}
    #tag1_sm{
        background-image: url("../../img/idig/tag-sm1.svg");
        top: 42px;
        right: -34px;
        width: 34px;
        height: 86px;
    }
    #tag2_sm{
        background-image: url("../../img/idig/tag-sm2.svg");
        top: 136px;
        right: -34px;
        width: 34px;
        height: 86px;
    }
    #tag3_sm{
        background-image: url("../../img/idig/tag-sm3.svg");
        top: 230px;
        right: -34px;
        width: 34px;
        height: 86px;
    }
    #kaiteki_sm, #anzen_sm, #kinou_sm{
        width: 100%;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    #kinou_sm{
        background-color: #00A19C;
            
        }  
    .moji-container{
        position: relative;
    }
    #moji1, #moji2, #moji3, #moji4, #moji5{
        position: absolute;
        width: 50%;
        padding-bottom: 54.5%;
        z-index: 398;
        opacity: 0;
        transition-duration: 0.4s;
    }
    .moji-container img{
    width: 100%;
    height: 100%;
    z-index: 399;
}
    #moji1{
        top: 0%;
        left: 0%;
    }
    #moji2{
        top: 0%;
        right: 0%;
    }    
    #moji3{
        position: absolute;
        left: 0%;
        transform: translateY(49%);
    }
    #moji4{
        transform: translateY(49%);
        right: 1px;
    }
    #moji5{
        transform: translateY(98%);
        left: 0;
    }
        #moji1.opacity1, #moji2.opacity1, #moji3.opacity1, #moji4.opacity1, #moji5.opacity1{
            opacity: 1;
        }
    #idig_anim_sm.sm{
        width: 214px;    
        height: 460px;
        }



/*プリローダー*/
/*//ローディング部分の回転エフェクト定義*/
@-moz-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/*//ローディング画面の背景部分*/
#loading {
  width: 100vw;
  height: 100vh;
  background-color: #f6f7f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400; }

/*//ローディング回転部分*/
#loading-main:after, #loading-main:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin-left: -50%;
  position: absolute;
  top: 40%;
  left: 50%;
  border-radius: 110%; }

#loading-main {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 45%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 405; }
  #loading-main:after {
    -moz-animation: loading 0.75s linear infinite;
    -webkit-animation: loading 0.75s linear infinite;
    animation: loading 0.75s linear infinite;
    border: 1px solid transparent;
    border-top-color: #666; }
  #loading-main:before {
    border: 1px solid rgba(51, 51, 51, 0.15); }