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

#omikuji{width:150px;height:150px;margin:20px auto;
display:flex;justify-content: center; align-items: center;
transform-origin: center bottom;}
#omikuji img{width:77px;height:125px;}

#omikuji.start{animation: furi 1.5s linear infinite;}
#omikuji_result{
width:100%;max-width:500px;height:300px;margin:0 auto;
border:5px solid #FF0000;
display:flex;justify-content: center; align-items: center;
}

@keyframes furi {
  0% , 100%{
      transform: rotate(40deg);
  }
  50%{
      transform: rotate(-40deg);
  }
}


.btn{
    width: 96%;
    max-width: 300px;
    background-color: #002b41;
    border-radius: 20px;
    line-height: 44px;
    text-align: center;
    margin: 20px auto;
    color: #FFF;
    font-size: 28px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    cursor:pointer;
}
.btn.soon{
    background-color: #666;
    cursor:none;
   pointer-events: none;
}
.btn:hover{background-color: #007900;}
/* --------------------------------------*/
/* おみくじミッション                             */
/* --------------------------------------*/

/*ランク背景無効化*/
.kmmc_wrap,
.kmmc_wrap#bronze,
.kmmc_wrap#silver,
.kmmc_wrap#gold,
.kmmc_wrap#platinum{
background-color: #c4b827;
background-image:url("../img/mission/bg_left.png"),url("../img/mission/bg_right.png");
background-repeat:repeat-y;
background-size:25% auto;
background-position:left top,right top;
}


#mission_head{
width:100%;
text-align:center;
background-image:url("../img/mission/head_bg.jpg");
background-repeat:repeat;
background-size:auto;
background-position:center;
}
#mission_head img{width:100%;max-width:1625px;height:auto;vertical-align:bottom;}

#mission #main{background-color: #977c9a;}

#mission #period{
width:100%;
max-width: 1040px;
margin:0 auto;
padding: 10px;
background-color: #5b5b5b;
text-align:center;
color:#FFF;
font-weight:bold;
line-height:180%;
font-size:20px;
}
#mission #id_epass.no_login{
text-align:center;
padding:10px 5px;
background-color:#FFFFFF;
}
#mission #id_epass.no_login a{color: #FF0000;font-weight:bold;text-decoration:underline;}

#mission #omikuji_area{
    background-image:url("../img/mission/omikujibox_bg_left.png"),url("../img/mission/omikujibox_bg_right.png");
    background-repeat:no-repeat;
    background-size:35% auto;
    background-position:left center,right center;
    border-radius: 6px;
    margin:10px auto 20px;
}

#mission #omikuji_area .omikuji_box{
    width:calc(100% - 40px);
    max-width: 300px;
    margin:0 auto;
    position: relative;
}

#mission #omikuji_area .omikuji_box .atari_anim {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
}
#mission #omikuji_area .omikuji_box .atari_anim.hide {
    opacity: 0;
}

#mission #omikuji_area .omikuji_box img{
width:100%;height:auto;
}

#mission #omikuji_area #omikuji_level{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px
}


.btn{
    width: 96%;
    max-width: 300px;
    background-color: #ff571d;
    border-radius: 20px;
    line-height: 44px;
    text-align: center;
    margin: 20px auto 10px;
    color: #FFF;
    font-size: 28px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    cursor:pointer;
}
.btn.soon{
    background-color: #bbb;
    color: #FFF;
    cursor:none;
   pointer-events: none;
}
.btn.result{

    font-size: 22px;
}

.btn a{display:block;width:100%;height:100%;text-decoration:none;color: #FFF;}
.btn:hover{background-color: #f0dc21;color: #ff571d;}
.btn a:hover{color: #ff571d;}

#mission #omikuji_area .guide{margin:20px auto 0;text-align: center;}

/*おみくじ結果表示*/
#omikuji_result{
width:100%;max-width:500px;height:300px;margin:0 auto;
border:5px solid #FF0000;
display:flex;justify-content: center; align-items: center;
}

/*おみくじ開催概要*/
#mission #howto_area{width: 100%;  max-width:1040px;margin:0 auto 40px;text-align:center;}

#mission #howto_area .text{
    background-color:#a40000;
    background-image:url("../img/mission/howto_textbg_left.jpg"),url("../img/mission/howto_textbg_right.jpg");
    background-repeat:no-repeat;
    background-size:70px auto;
    background-position:left bottom,right bottom;
    margin:20px auto;
    padding:10px;
    color:#FFF;
    font-weight:bold;
    font-size:22px;
    text-align:center;
    line-height:180%;
}
#mission #howto_area img{width:100%;max-width:750px;height:auto;}
#mission #howto_area .title img{width:100%;max-width:inherit;height:auto;}
#mission #howto_area .kikan, #mission #howto_area .tokuten {text-align: left;}
#mission #howto_area .tokuten .img {max-width: 860px;margin: 20px auto;}
#mission #howto_area .tokuten .img img{width:100%;max-width:initial;height:auto;}

@media screen and (max-width: 768px){
#mission_head{background-size:80px;}
#mission ul#profile{flex-wrap:wrap;}
#mission ul#profile li#konami_id,
#mission ul#profile li#e_pass{width: 100%;}
#mission ul#profile li#konami_id {margin:0 0 10px 0;}
#mission #next{font-size: 14px;padding:20px 0 0 0;}

#mission #now_point{padding: 0 30px 0 150px;}
#mission .now_point_notice{font-size: 12px;margin-top:5px;}
#mission #howto_area .text{font-size:18px;}

.btn.result{font-size: 18px;}
}

@media (max-width: 639px){
#mission #period{font-size:14px;padding: 5px;}
#mission #period .title{font-size:20px;}

#mission #omikuji{width:calc(100% - 60px);}
#mission #omikuji_area .omikuji_box{max-width: 200px;}
.btn.kuji {font-size: 20px;line-height: 36px;}
#mission #omikuji_area #omikuji_level{font-size:16px;}
#mission #omikuji_area .guide{font-size: 12px;text-align: left;}

#mission #howto_area {font-size:14px;}
#mission #howto_area .text{font-size:14px;padding:5px 3px;}
}

@media screen and (max-width: 480px){
#mission_head{background-size:40px;}
#mission ul#profile li#konami_id::before,
#mission ul#profile li#e_pass::before {
    top: 2px;
    font-size: 12px;
}
}
@media screen and (max-width: 320px){
#mission ul#profile li#e_pass {
   padding:30px 10px 2px;
}
}

/*おみくじアニメーション*/
.kuji_start {
    animation:
    rote 600ms alternate forwards,
    UpDown 400ms infinite 600ms alternate;
}

@keyframes rote {/* 左に135度回転 */
   0% {
       transform:rotate(0deg);
   }
   100% {
       transform:rotate(-135deg);
   }
}
@keyframes UpDown{ /* 上下に振る */
/* 開始地点 */
0%{
/* Y軸0px */
transform: translateY(0) rotate(-135deg);
}
/* 終了地点 */
100%{
/* Y軸50px */
transform: translateY(50px) rotate(-135deg);
}
}

/* --------------------------------------*/
/* おみくじ結果                          */
/* --------------------------------------*/
/*
================================================================================================================
IN POP WINDOW
================================================================================================================
*/
#omikuji_pop{
    position: relative;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    border-radius:10px;}
#omikuji_pop img{width:100%;height:auto;}

#omikuji_pop.bronze_1{
    background-image:url("../img/mission/result/bronze_1.jpg");
}
#omikuji_pop.bronze_2{
    background-image:url("../img/mission/result/bronze_2.jpg");
}
#omikuji_pop.bronze_3{
    background-image:url("../img/mission/result/bronze_3.jpg");
}
#omikuji_pop.silver_1{
    background-image:url("../img/mission/result/silver_1.jpg");
}
#omikuji_pop.silver_2{
    background-image:url("../img/mission/result/silver_2.jpg");
}
#omikuji_pop.silver_3{
    background-image:url("../img/mission/result/silver_3.jpg");
}
#omikuji_pop.gold_1{
    background-image:url("../img/mission/result/gold_1.jpg");
}
#omikuji_pop.gold_2{
    background-image:url("../img/mission/result/gold_2.jpg");
}
#omikuji_pop.gold_3{
    background-image:url("../img/mission/result/gold_3.jpg");
}
#omikuji_pop.platinum_1{
    background-image:url("../img/mission/result/platinum_1.jpg");
}
#omikuji_pop.platinum_2{
    background-image:url("../img/mission/result/platinum_2.jpg");
}
#omikuji_pop.platinum_3{
    background-image:url("../img/mission/result/platinum_3.jpg");
}

#omikuji_pop #present{
    position: absolute;
    right:4%;
    bottom:4%;
    width:65%;
    height:42%;
    text-align:center;
    font-weight:bold;
    font-size:30px;
    line-height:160%;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/**注意書き**/
#mission  .check{
font-size:14px;
line-height:140%;
font-weight: normal;
}
@media screen and (max-width: 800px){
#omikuji_pop #present{font-size:24px; line-height:120%;}
#mission  .check{font-size:12px;}
}
@media screen and (max-width: 480px){
#omikuji_pop #present{font-size:16px;}
}