/*
================================================================================================================
ポップアップ 共通
================================================================================================================
*/
/*colorboxカスタマイズ*/
#cboxLoadedContent{background:none;}
body#data_detail{background:none;}

/*
=========================
フレーム
=========================
*/
#waku{
position:relative;
width:calc(100% - 6px);
background:linear-gradient(to bottom, #6f6d7f 0%,#2d2d2d 100%);
font-family:"Noto Sans JP", sans-serif;
text-align:center;
border:1px solid #1b1919;
border-radius:0 15px 0 15px;
padding:10px 7px;
margin:0 auto 30px;}

/*
=========================
フレーム中身
=========================
*/
#waku-inner{
background:linear-gradient(10deg, rgba(171,180,190,0) 0%,rgba(171,180,190,0.7) 50%,rgba(171,180,190,0) 50%,rgba(171,180,190,0) 100%);}

/*見出し用*/
#waku .head{position:relative; width:100%; text-align:center; z-index:1;}

/*小見出し用*/
#waku .eng{
font-size:20px;
font-weight:400;
font-family:'Teko', sans-serif;
margin:5px 0 0;}

#waku .jpn{
font-size:15px;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
margin:5px 0;}

/*
================================================================================================================
ポップアップ アピールカード
================================================================================================================
*/
#apcard_detail #waku{max-width:690px;}

#waku #card_Num{
width:90%;
max-width:640px;
margin:20px auto 0;}

#waku #card_Num > p{
color:#fff;
background:#323232;
background:linear-gradient(to bottom, #323232 0%,#080b0c 100%);
font-size:13px;
font-weight:bold;
text-align:center;
padding:0 10px;}
#waku #card_Num > p:first-child{height:34px; line-height:30px;}
#waku #card_Num > p:nth-child(2){line-height:18px; padding:5px;}
#waku #card_Num > p + p{border-top:3px solid #666;}

#waku #card{
width:100%;
margin:20px auto;}
#waku #card > .inner{
width:110px;
background:#323232;
background:linear-gradient(to bottom, #323232 0%,#080b0c 100%);
text-align:center;
padding:5px;
margin:0 auto;}

#waku #message_area{
background-color:#313232;
border-top:3px solid #6e6e6e;
border-bottom:3px solid #6e6e6e;
padding:10px 0 20px;}

#waku #message_area ul{display:flex; flex-wrap:wrap;}
#waku #message_area ul li{width:45%; color:#fff; margin:0 2.5% 5px;}
#waku #message_area ul li .eng{transform: scaleY(0.8);}
#waku #message_area ul li .message{
background:rgba(33,106,121,0.7);
background:linear-gradient(to bottom, rgba(8,11,12,0.7) 0%,rgba(33,106,121,0.7) 100%);
font-size:12px;
text-align:center;
line-height:18px;
border:1px solid #c5c9cd;
padding:5px;}

@media screen and (max-width:480px){
#waku #message_area ul li .message{font-size:11px;}}

@media screen and (max-width:370px){
#waku #message_area ul li{width:95%;}}

/*
================================================================================================================
ポップアップ ジェネシスカード
================================================================================================================
*/
#gncard_detail #waku{
max-width:790px;
min-height:350px;}

#waku #nomal_area{
display:flex;
width:100%;
margin:20px auto 0;}

#waku #nomal_area #gncard_img{
width:217px;
background-image:url("../../images/playdata/popup/bg_bar01.png");
background-repeat:no-repeat;
background-position:left top 130px;
/*background-position:left top 150px;*/
padding:0 20px;}

#waku #nomal_area #gncard_img > .inner{
width:177px;
background:#323232;
background:-moz-linear-gradient(top, #323232 0%, #080b0c 100%);
background:-webkit-linear-gradient(top, #323232 0%,#080b0c 100%);
background:linear-gradient(to bottom, #323232 0%,#080b0c 100%);
padding:5px;}
#waku #nomal_area #gncard_img > .inner img{width:100%; max-width:167px;}

#waku #nomal_area ul{
width:calc(100% - 217px);
background-image:url("../../images/playdata/popup/bg_bar02.png") , url("../../images/playdata/popup/logo.png");
background-repeat:no-repeat , no-repeat;
background-position:right bottom 10px , right 20px bottom 60px;
padding-right:20px;}

#waku #nomal_area ul li .cat{
width:100%;
height:34px;
color:#fff;
background:#323232;
background:linear-gradient(to bottom, #323232 0%,#080b0c 100%);
font-size:13px;
font-weight:bold;
line-height:30px;
border:3px solid #666;
padding:0 10px;}
#waku #nomal_area ul li .inner{display:flex;}

#waku #nomal_area ul li #card_count.cat{width:130px;}

@media screen and (min-width:768px){
#waku #nomal_area ul li .inner > .cat:first-child{width:130px; font-size:12px;}
#waku #nomal_area ul li .inner > .cat:nth-child(2){width:calc(100% - 130px);}
#waku #nomal_area ul li .inner > .cat + .cat{border-left:none;}}

@media screen and (max-width:767px){
#waku #nomal_area ul li .inner{flex-wrap:wrap;}
#waku #nomal_area ul li .inner > .cat{width:100%;}
#waku #nomal_area ul li .inner > .cat + .cat{border-top:none;}

#waku #nomal_area #gncard_img{background-position:left top 160px; /*background-position:left top 180px;*/}
#waku #nomal_area ul{background-position:right bottom -25px , right 20px bottom 20px; /*background-position:right bottom -45px;*/}}

@media screen and (max-width:640px){
#waku #nomal_area{flex-wrap:wrap;}}

@media screen and (max-width:420px){
#waku #nomal_area ul{padding:0 10px  30px;}}