@charset "Shift-JIS";

/*
================================================================================================================
カードコネクト
================================================================================================================
*/
#main{
position:relative;
width:100%;
background-color:#fff;
background-image:url(../../images/event/card_connect/bg.jpg);
background-position:top center;
background-repeat:no-repeat;
text-align:center;
padding:0 0 50px 0;
margin:20px auto 0;}
#main img{width:100%; max-width:980px;}

#main #menu{display:flex; margin:20px auto 0; justify-content:center;}
#main #menu a{display:block; width:50%; filter:drop-shadow(0px 0px 6px rgba(0,0,0,0.5));}
#main #menu a:hover{opacity:0.7;}
#main #menu a img{max-width:478px;}

#main #selection{
background-image:url(../../images/event/card_connect/new01.png) , url(../../images/event/card_connect/new_bg.png);
background-position:top,top;
background-repeat:no-repeat,no-repeat;
background-size:100% , 100%;}

#main p{
width:100%;
max-width:860px;
display:block;
background-color:rgba(255,255,255,0.7);
box-shadow:0px 0px 14px 3px #cececd;
border:2px solid #fff;
border-radius:10px;
padding:20px;
margin:0 auto;}
#main p img{width:100%; max-width:800px !important;}
#main p.cc{
background-image:url(../../images/event/card_connect/chara.png);
background-position:right bottom;
background-repeat:no-repeat;}

#main #title{
width:100%;
height:42px;
background-image:url(../../images/event/card_connect/bg03.png) , url(../../images/event/card_connect/bg02.png) , url(../../images/event/card_connect/bg01.png);
background-position:right , left , top center;
background-repeat:no-repeat , no-repeat , repeat;
box-shadow:0px 7px 2px -2px rgba(153,187,195,0.6);}
#main #title img{width:100%; max-width:340px !important;}

#main #notice{
width:100%;
max-width:860px;
color:#613000;
background-color:#fff5a1;
font-size:14px;
border:2px solid #fff;
text-align:left;
margin:0 auto 50px;}
#main #notice strong{
display:block;
color:#fff;
background-color:#00aeba;
font-size:16px;
text-align:center;
padding:5px 0;}
#main #notice .inner{padding:20px;}
#main #notice .inner span{
display:block;
color:#ed1e79;
font-size:15px;
font-weight:bold;}

#main a.link_btn{
display:block;
width:100%;
max-width:860px;
border:2px solid #57a3a9;
border-radius:5px;
margin:0 auto;}
#main a.link_btn:hover{opacity:0.7;}
#main a.link_btn img{width:100%; max-width:980px;}

@media screen and (max-width:980px){
#main img{width:90%;}
#main p,
#main #notice,
#main a.link_btn{width:92%;}}

@media screen and (max-width:700px){
#main #menu{margin:10px auto 0;}
#main p.cc{background-size:160px;}}

@media screen and (max-width:640px){
#main{background-size:100%;}
#main p{padding:10px 5px;}
#main #notice .inner{padding:10px;}}

@media screen and (max-width:550px){
#main p.cc{background-size:120px;}}

@media screen and (max-width:480px){
#main #title{line-height:38px;}
#main #title img{
max-width:270px !important;
filter:drop-shadow(0px 3px 2px #000000);}}

@media screen and (max-width:400px){
#main{padding:0 0 30px 0;}
#main p.cc{background-size:90px;}
#main #title{line-height:36px;}
#main #title img{max-width:240px !important;}
#main #notice{font-size:12px; margin:0 auto 30px;}
#main #notice .inner span{font-size:13px;}
#main #notice strong{font-size:14px;}}