header,footer,header#id_nav_menu_1,#original-menu{position:relative !important; z-index:3;}

#container_wp{background:url(/game/card_connect/2/original/disney/twisted/img/bg.png) center;}
#container_wp::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100% !important;
background:#fff;
visibility:visible !important;
opacity:.5;}
#container_bottom{padding:0 !important;}
.contents_elia{
position:relative;
width:100% !important;
max-width:480px;
background:url(/game/card_connect/2/original/disney/twisted/img/bg.png) center;
padding:0 !important;
box-shadow:0 0 10px #503030;
z-index:2;}
.contents_elia + hr{display:none !important;}
.f_mes.t_center{position:relative; background:#fff; padding:20px 0; margin:0 auto; z-index:2;}

#top-select,
#top-img,
#top-text{margin:20px auto !important;}

.btn_click,
.btn_print{
display:block;
width:96%;
aspect-ratio:74 / 15;
background-color:transparent;
background-size:100% auto;
background-position:top;
border:none;
cursor:pointer;
outline:none;
padding:0;
margin:20px auto;
filter:drop-shadow(5px 5px 5px rgba(0,0,0,.3));
appearance:none;
transition:.2s ease;}
.btn_print{background-image:url(/game/card_connect/2/original/disney/twisted/img/btn01.png) !important;}
.btn_click{background-image:url(/game/card_connect/2/original/disney/twisted/img/btn02.png) !important;}
.btn_click:hover,
.btn_print:hover{filter:drop-shadow(5px 5px 5px rgba(0,0,0,.3)) brightness(150%);}

.search{display:block; width:80%; margin:0 auto 20px; transition:.2s ease;}
.search:hover{filter:brightness(110%);}

/*
================================================================================================================
メイン
================================================================================================================
*/
#catch-sub{
position:relative;
width:60%;
max-width:200px;
background:#503030;
border-radius:40px;
padding:5px 20px;
margin:0 auto;
z-index:4;}

#ad{display:block !important; position:relative; background:#f8f1e2; z-index:1; border-top:3px solid #503030; border-bottom:3px solid #503030; padding:30px 10px 10px; margin-top:-17px;}
#ad > p{width:50%; margin:0 auto 10px;}
#about{background:#2d2d2d;}
#about .frame{width:calc(100% - 40px); background:#f8f1e2; border:3px solid #bf9d6d; border-radius:20px; margin:0 auto;}
#about .frame img{border-radius:20px;}
@media screen and (max-width:480px){#about .frame{width:calc(100% - 20px); border:2px solid #bf9d6d; border-radius:10px}}

#howto{background:#adbfc8; padding:0 0 20px;}
#howto .howto + .howto{margin-top:20px;}
#howto .price{width:86%; background:#fff; border:4px solid #0291aa; border-radius:10px; margin:20px auto 0;}
#howto .price > div{background:#0291aa; padding:10px 20px;}
#howto .price > p{font-size:clamp(0.625rem, 0.557rem + 0.34vw, 0.813rem); padding:10px 20px;}
#howto .price > p > span{display:block; color:#dc3285; margin:0 auto 10px;}
#howto .price > p > span a{color:#dc3285; text-decoration:underline;}
#howto .price > p > span a:hover{text-decoration:none;}
.twitter-tweet{margin:0 auto !important;}
@media screen and (max-width:480px){#howto .price{border:3px solid #0291aa;}}

#copy{background:#000; text-align:center; padding:20px;}
#copy img{width:60%;}

/*
================================================================================================================
スライド
================================================================================================================
*/
.swiper-main{position:relative; width:230px; margin:0 auto; overflow:visible;}
.swiper-main img{width:100%; border-radius:15px; filter:drop-shadow(3px 3px 0 #000);}

.swiper-thumb{margin:20px auto 0;}
.swiper-thumb .swiper-slide{border-radius:5px; cursor:pointer; transition:.2s ease;}
.swiper-thumb .swiper-slide:not(.swiper-slide-thumb-active) img{opacity:.6;}
.swiper-thumb img{width:100%; max-width:60px !important; border-radius:5px; transition:.2s ease;}

@media screen and (max-width:370px){
.swiper-main img{border-radius:10px;}
.swiper-thumb img{border-radius:3px;}}

.swiper-button-prev,
.swiper-button-next{
display:block;
position:absolute;
top:calc(50% - 25px);
width:40px;
height:51px;
background-size:100% auto;
cursor:pointer;
transition:.2s ease;
z-index:10;}
.swiper-button-prev{background-image:url(/game/card_connect/2/original/disney/twisted/img/slide_back.png); left:-120px;}
.swiper-button-next{background-image:url(/game/card_connect/2/original/disney/twisted/img/slide_next.png); right:-120px;}
.swiper-button-disabled{opacity:0;}

/*高さ調整*/
.swiper-main{height:100%;}
.swiper-main .swiper-slide:last-child:not(.swiper-slide-visible){pointer-events:none;}
@media screen and (min-width:481px){.swiper-main .swiper-slide:last-child{width:364px !important; transform:translate3d(-1907px, 0px, 0px) !important;}}
.swiper-slide{display:flex; height:unset; align-items:center;}
.swiper-thumb{padding-right:40px;}
.swiper-thumb .swiper-slide:last-child,
.swiper-thumb .swiper-slide:last-child img{width:72px !important; max-width:unset !important;}

/*全体調整*/
@media screen and (max-width:480px){
.swiper-main{width:190px;}
.swiper-main .swiper-slide:last-child{width:300px !important; transform:translate3d(-1575px, 0px, 0px) !important;}}
@media screen and (max-width:450px){
.swiper-button-prev{left:-110px;}
.swiper-button-next{right:-110px;}}
@media screen and (max-width:430px){
.swiper-button-prev{left:-100px;}
.swiper-button-next{right:-100px;}}
@media screen and (max-width:400px){
.swiper-button-prev{left:-60px;}
.swiper-button-next{right:-60px;}}

/*
================================================================================================================
タブ切り替え
================================================================================================================
*/
.no-show{display:none;}
.tab{position:relative; aspect-ratio:790/780;}
/*
.tab::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(/game/card_connect/2/original/disney/twisted/img/catch_select.png);
background-size:70px auto;
background-position:bottom 80px right 0;
background-repeat:no-repeat;
pointer-events:none;
z-index:10;}*/
#tab-menu{display:flex; margin:10px auto 0;}
#tab-menu p{width:calc((100% /3) - 10px); background:#fff; cursor:pointer; transition:.2s ease; opacity:.7;}
#tab-menu p:nth-child(2){margin:0 15px;}
#tab-menu p img{display:block; width:100%;  border-radius:5px; margin:0 auto;}
#tab-menu p:hover,
#tab-menu p.active{opacity:1;}
@media screen and (max-width:480px){
.tab{aspect-ratio:880/780;}
#tab-menu p{width:calc((100% /3) - 5px);}
#tab-menu p:nth-child(2){margin:0 7.5px;}}