@charset "Shift-JIS";

* html body{behavior:url("/gate/p/css/csshover.htc");}

html{width:100%; min-width:320px !important; height:100%;}
body{
min-width:320px !important;
overflow-x:hidden;}

header,footer{z-index:10;}

* html div,* html ul{display:inline-block;}
* html div,* html ul{height:1%;}
div,ul{display:block; zoom:1;}

div{word-break:break-all; word-wrap:break-word;}
form,input{margin:0; padding:0;}
a,img{border:none;}
.clear{clear:both; margin:0; padding:0; height:0;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
li{list-style:none;}
.textindent{text-indent:-9999px; overflow:hidden;}
strong{font-weight:bold;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

*,*:after,*:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
border:0;}


br.pc{display:block;}
br.sp{display:none;}
@media (max-width:639px){
br.pc{display:none;}
br.sp{display:block;}
}
/* --------------------------------------*/
/* TOP                               */
/* --------------------------------------*/
#top_menu{
width:100%;
background-image:url("../img/topmenu_bg.jpg");
background-repeat:repeat-x;
background-size:auto;
background-position:center;
}

#top_menu ul{
display:flex;justify-content:flex-end; 
width:100%;max-width:1300px;height:40px;
margin:0 auto;
background-image:url("../img/topmenu_title.png");
background-repeat:no-repeat;
background-size:200px 28px;
background-position:left center;}
#top_menu ul li,
#top_menu ul li a{
color:#FFF;font-weight:bold;line-height:40px;text-decoration:none;
margin:0 5px;}

@media (max-width:639px){
#top_menu ul{background-size:120px 17px;}
#top_menu ul li{font-size:76.5%;margin:0 3px;}
}

/* --------------------------------------*/
/* MAIN                             */
/* --------------------------------------*/

.wrap{width:100%;padding:30px 0;
background-image:url(../img/main_bg.jpg);
  background-position:center bottom;
  background-repeat:repeat-x;
  background-size:40px auto;

}

#main{
width:100%;
max-width:1040px;
position: relative;
margin:0 auto 40px;
padding:30px;
background-color: #d1c0b7;
}

#main .Flg1 {/*三角形左上*/
  position: absolute;
  top: 0;
  left: 0;
  border-left: 40px solid #002b41;
  border-bottom: 40px solid transparent;
}
#main .Flg2 {/*三角形右下*/
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 40px solid transparent;
  border-bottom: 40px solid #002b41;
}

@media (max-width:639px){
#main{width: calc(100% - 20px);padding:20px 10px;}
#main .Flg1 {border-left: 20px solid #000;border-bottom: 20px solid transparent;}
#main .Flg2{border-left:20px solid transparent;border-bottom: 20px solid #000;}
}


/* --------------------------------------*/
/* name                             */
/* --------------------------------------*/
ul#profile {width:100%;display:flex;flex-wrap: wrap;margin-bottom:20px;}

ul#profile li#user_name{
font-size:24px;
font-weight:bold;
position: relative;
width:240px;
padding-top:30px;
}
ul#profile li#user_name::before{
position: absolute;
content: "name";
font-size:12px;
border-bottom:1px solid #000;
top:0;
left:0;
width:100%;
}

ul#profile li#user_data{width:calc(100% - 260px);margin-left:20px;}

ul#profile .num{
position: relative;
background-color:#FFF;
border-radius:6px;
line-height:36px;
width:calc(100% - 20px);
padding:2px 10px;
text-align:right;
}
ul#profile .num#konami_id{
margin-bottom:10px;
}
ul#profile .num#konami_id::before{
content: "KONAMI ID:";
position: absolute;
top:5px;
left:10px;
}
ul#profile .num#e_pass::before{
content: "参照中e-amusement pass:";
position: absolute;
top:5px;
left:10px;
}


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

ul#profile li#user_name,ul#profile li#user_data{width:100%;}

ul#profile li#user_name{margin-bottom:20px;}
ul#profile li#user_data{margin:0;}

}

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

ul#profile li#user_data{font-size:14px;}
ul#profile .num#konami_id::before,ul#profile .num#e_pass::before{top:2px;font-size:12px;}

}


/* --------------------------------------*/
/* box                           */
/* --------------------------------------*/
.box{
width: 100%;
    background-color: #FFF;
border-radius:6px;
padding:20px;
color:#002b41;}

.box .inner{
width:100%;margin-bottom:10px;position: relative;
}

.box .howto{
position: absolute;
top:0;
bottom:inherit;
right:0;
border-bottom:#002b41 1px solid;
padding-bottom:2px;
font-size:14px;
}
.box .howto a{text-decoration:none;}

@media (max-width:639px){
.box{padding:10px;}
.box .inner{margin:0}
.box .howto{top:inherit;bottom:0;font-size:12px;}
}
@media (max-width:480px){
.box{padding:5px;}
}

/* --------------------------------------*/
/* point                           */
/* --------------------------------------*/

.box#point_area{margin-bottom:20px;}
.box #point{
width:calc(100% - 300px);
max-width:200px;
position: relative;
color:#FFF;
background-color:#002b41;
border-radius:20px;
line-height:44px;
font-size:28px;
font-weight:bold;
text-align:right;
padding:0 30px 0 150px;}

.box #point::before{
content: "応募ポイント：";
position: absolute;
top:0;
left:10px;
font-weight:normal;
font-size:20px;
}

.box #point::after{
content: "pt";
position: absolute;
top:0;
right:10px;
font-size:14px;
}

.box .notice{float:right;font-size:14px;}

@media (max-width:639px){
.box#point_area{margin-bottom:10px;}

.box #point{width:calc(100% - 150px);max-width:inherit;padding:0 30px 0 120px;}
.box #point::before{font-size:16px;}
.box .inner.point{padding-bottom:30px;margin-bottom:15px;}
.box .notice{font-size:11px;float:none;}
}

/* --------------------------------------*/
/* CMバナー                      */
/* --------------------------------------*/

#cm_area{
position: relative;
margin-top:30px;
box-sizing: border-box;
border-top:4px dotted #d1c0b7;
padding:20px 0 30px;
}
#cm_area .text{text-align:center;}
#cm_area .howto{position: absolute;top:inherit;bottom:0;right:0;}
#cm_area ul#bnr li{width:100%; margin-top:20px;}
#cm_area ul#bnr img{width:100%;height auto;}

#cm_area ul#bnr #no_cam{
width: fit-content;
margin:30px auto;
padding:10px 15px;
background-color:rgba(209,192,183,0.5);
text-align:center;
border-radius:6px;
}

/* --------------------------------------*/
/* rank                     */
/* --------------------------------------*/

#rank{
width:calc(100% - 300px);
max-width:200px;
position: relative;
color:#FFF;
background-color:#002b41;
border-radius:20px;
line-height:44px;
font-size:28px;
font-weight:bold;
text-align:right;
padding:0 30px 0 150px;}

#rank::before{
content: "ランク：";
position: absolute;
top:0;
left:10px;
font-weight:normal;
font-size:20px;
}

#rank span {
  position: absolute;top:-2px;right:0;
  font-size: 24px;
  line-height: 34px;
  position: relative;
  display: inline-block;
  width: 162px;
  height: 34px;
  transition: all .1s ease-in-out;
  text-align: center;
  text-decoration: none;
  color: #002b41;
  font-weight:bold;
  background-color: #FFF;
}
#rank span:before,
#rank span:after {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  content: '';
  border: 17px solid transparent;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
}
#rank span:before {
  right: 100%;
  border-right-color: #FFF;
}
#rank span:after {
  left: 100%;
  border-left-color: #FFF;
}

#get_point,
#now_point,
#next_point{
position: relative;
font-size:28px;
text-align:right;
margin-top:20px;}

#get_point,
#now_point{
color:#ac2300;
font-weight:bold;}

#get_point{padding:0 80px 0 350px;}

#now_point,#next_point{padding:0 30px 0 150px;}

#next_point{font-size:22px;}

#get_point::before{
color:#002b41;
content: "現在のランクで獲得出来る応募ポイント:";
position: absolute;
bottom:-2px;
left:10px;
font-weight:normal;
font-size:18px;
}

#now_point::before{
color:#002b41;
content: "現在のランクポイント:";
position: absolute;
bottom:-2px;
left:10px;
font-weight:normal;
font-size:18px;
}
#next_point::before{
color:#002b41;
content: "次のランクまであと:";
position: absolute;
bottom:-2px;
left:10px;
font-weight:normal;
font-size:18px;
}

#get_point::after{
content: "pt/100円";
position: absolute;
bottom:-2px;
right:10px;
color:#002b41;
font-size:16px;
}

#now_point::after,
#next_point::after{
content: "pt";
position: absolute;
bottom:-2px;
right:10px;
color:#002b41;
font-size:16px;
font-weight: normal;
}

#next_area{
position: relative;
/*margin-top:30px;*/
box-sizing: border-box;
/*border-top:4px dotted #d1c0b7;
padding:20px 0 30px;*/
}

#next_area ul{display:flex;flex-wrap: wrap;}
#next_area ul li{width:50%;}

#next_area #meter{
width:96%;
height:30px;
overflow:hidden;
border-radius:6px;
margin:10px auto;
}

#next_area #meter .progress{
height:100%;
position: absolute;
top:0;
left:0;
background-color:#ac2300;
}

#next_area #meter .bg{
width:100%;
height:100%;
display:block;
position: relative;
background-color:#ccc;
border:3px solid #000;
}

#next_area .up{
color:#ac2300;
font-size:14px;
text-align:center;}

#rank_area .text{
background-color: #d1c0b7;
border-radius:6px;
color:#002b41;
text-align:center;
font-size:18px;
line-height:160%;
padding:10px 5px;
}


@media (max-width:768px){
#next_area ul li{width:100%;}
#next_area #meter{width:100%;}
}

@media (max-width:639px){
.box#rank_area{margin-bottom:10px;}
#rank{width:calc(100% - 150px);max-width:inherit;padding:0 30px 0 120px;}
#rank::before{font-size:16px;}
#rank span {top:-4px;right:5px;font-size: 18px;line-height: 28px;height: 28px;}
#rank span:before,#rank span:after{border: 14px solid transparent;}
#rank span:before {right: 100%;border-right-color: #FFF;}
#rank span:after {left: 100%;border-left-color: #FFF;}

.box .inner.rank{padding-bottom:30px;margin-bottom:15px;}
#next_area .up{font-size:12px;}
#rank_area .text{text-align:left;font-size:12px;}
}

@media (max-width:599px){
#get_point{
width:calc(100% - 60px);
text-align:right;
margin-top:30px;
padding:15px 55px 0 0;}

#get_point::before{
content: "現在のランクで獲得出来る応募ポイント:\A";
white-space: pre;
bottom:20px;
left:0;
font-size:16px;
margin-bottom:10px;
}

#get_point::after{
bottom:-1px;
right:0;
font-size:13px;
}

}

/* --------------------------------------*/
/* HOW TOページ、過去のイベント一覧                       */
/* --------------------------------------*/

.howto_title,
.record_title{
color:#002b41;
font-size:28px;
font-weight:bold;
line-height:44px;
text-align:center;
margin:0 auto;
}

.howto_text{padding-top:20px;}

#record{padding:0 0 30px;}
#record ul#bnr li{width:100%; margin-top:20px;}
#record ul#bnr img{width:100%;height auto;}

.return{
width:96%;
max-width:300px;
background-color:#002b41;
border-radius:20px;
line-height:44px;
text-align:center;
margin:20px auto;}

.return a{
color:#FFF;
font-size:28px;
font-weight:bold;
display:block;
text-decoration:none;
}

@media (max-width:639px){
.howto_title,
.record_title,.return a{font-size:18px;}
}

@media (max-width:480px){
.howto_text{font-size:14px;}
}


/* --------------------------------------*/
/* おみくじミッション                             */
/* --------------------------------------*/

#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;}

.wrap#mission{
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 #main{background-color: #977c9a;}

#mission #period{
width: calc(100% - 20px);
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 #period .title{color:#c4b827;font-size:24px;}


#mission ul#profile{flex-wrap: nowrap;}
#mission ul#profile li{position: relative;
    background-color: #FFF;
    border-radius: 6px;
    line-height: 36px;
    width: calc(100% - 20px);
    padding: 2px 10px;
    text-align: right;}
#mission ul#profile li#konami_id {
    width: calc(100% / 3 - 20px);
    margin-right: 20px;
}
#mission ul#profile li#e_pass{
    width: calc((100% / 3) * 2);
}

#mission ul#profile li#konami_id::before {
    content: "KONAMI ID:";
    position: absolute;
    top: 5px;
    left: 10px;
}
#mission ul#profile li#e_pass::before {
    content: "参照中e-amusement pass:";
    position: absolute;
    top: 5px;
    left: 10px;
}
#mission #now_point{
    padding: 35px 30px 0 150px;
    margin:0;
}
#mission #now_point::before {
    color: #002b41;
    content: "現在の累計運気ポイント:";
    position: absolute;
    bottom: -2px;
    left: 0;
    font-weight: normal;
    font-size: 18px;
}
#mission .now_point_notice{font-size: 16px;margin-top:15px;}

#mission #next{font-weight:bold;padding-left:10px;font-size: 16px;}

#mission #next_area .up {text-align: right;font-weight:bold;color:#000;font-size: 18px;}
#mission #next_area .up span{color: #ac2300;font-size: 24px;}

#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:40px auto;
}

#mission #omikuji_area .omikuji_box{
    width:calc(100% - 40px);
    max-width: 300px;
    margin:0 auto;
}
#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:40px auto;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%;
}


@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 .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.png");
}
#omikuji_pop.bronze_2{
    background-image:url("../img/mission/result/bronze_2.png");
}
#omikuji_pop.bronze_3{
    background-image:url("../img/mission/result/bronze_3.png");
}
#omikuji_pop.silver_1{
    background-image:url("../img/mission/result/silver_1.png");
}
#omikuji_pop.silver_2{
    background-image:url("../img/mission/result/silver_2.png");
}
#omikuji_pop.silver_3{
    background-image:url("../img/mission/result/silver_3.png");
}
#omikuji_pop.gold_1{
    background-image:url("../img/mission/result/gold_1.png");
}
#omikuji_pop.gold_2{
    background-image:url("../img/mission/result/gold_2.png");
}
#omikuji_pop.gold_3{
    background-image:url("../img/mission/result/gold_3.png");
}
#omikuji_pop.platinum_1{
    background-image:url("../img/mission/result/platinum_1.png");
}
#omikuji_pop.platinum_2{
    background-image:url("../img/mission/result/platinum_2.png");
}
#omikuji_pop.platinum_3{
    background-image:url("../img/mission/result/platinum_3.png");
}


#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;
}
#omikuji_pop #present .check{
margin-top:-10px;
font-size:18px;
line-height:140%;
font-weight: normal;
}
@media screen and (max-width: 800px){
#omikuji_pop #present{font-size:24px; line-height:120%;}
#omikuji_pop #present .check{font-size:12px;}
}
@media screen and (max-width: 480px){
#omikuji_pop #present{font-size:16px;}
#omikuji_pop #present .check{
    margin-top:-5px;
    font-size: 7px;
    line-height: 120%;}
}