@charset "UTF-8";

/* footer
----------------------------------------------- */
#footer{
	padding:20px 0;
	margin:10px 0 0 0;
	font-size:12px;
	background:#fff;
}

#footerIN{
	width:940px;
	margin:auto;
	position:relative;
}

#footer .footerLink a{
	display:inline-block;
	color:#1758AF;
	margin:0 30px 0 0;
}

#footer .copyright{
	padding:15px 0 0 0;
	text-align:center;
	color:#7c7c7c;
	font-size:10px;
}

#footer .poweredBy{
	position:absolute;
	right:0;
	bottom:0;
}


/* footer固定
----------------------------------------------- */
html, body{height:100%;}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -115px;
}

/* Set the fixed height of the footer here */
#push {height:115px;}
#footer{height:65px;}



/* header
----------------------------------------------- */
#an_header{
	position:relative;
	padding:5px 10px 20px 10px;
	border-top:12px solid #7ed5e1;
	background:url('../images/header_bg.png') #fff left 93% repeat-x;
}
#an_headerIN, #testmodeIN{width:980px; margin:auto;position:relative;}
#an_header h1{
	color:#777;
	font-weight:bold;
	font-size:28px;
	line-height:1;
	float:left;
	padding:2px 0 0 0;
}
.headerLink{
	float:right;
	font-size:13px;
	color:#777;
	padding:17px 0 0 0;
	cursor:pointer;
}
.headerLink a.link_login{ margin-left:5px;}

.headerLink img.user_image{
	vertical-align:4px;
	margin:0 8px 0 0;
	width:30px;
	height:auto;
}
.headerLink span{
	vertical-align:15px;
	color:#2bbdd1;
}

#logout_link{
	position:absolute;
	right:5px;
	top:68px;
	z-index:100;
}
#logout_wrap{display:inline-block; margin-left:10px; position:relative;}

#logout_link #menu_content_mypage{
	position:relative;
	border-radius:5px;
	margin:10px 0 0 0;
	color:#fff;
	text-align:left;
	width:260px;
	box-shadow: 3px 3px 0px #5f939b;
}
#logout_link #menu_content_mypage a{color:#fff;display:block;padding:15px;font-size:14px;border-bottom: 1px solid #91d7e0;background:url('../images/headermenu_bg.png') #62c5d3 93% 50% no-repeat;}
#logout_link #menu_content_mypage li:first-child a{border-radius:5px 5px 0 0;}
#logout_link #menu_content_mypage li:last-child a{ border:none;border-radius:0 0 5px 5px;}
#logout_link #menu_content_mypage a:hover{color:#62c5d3; background:url('../images/headermenu_bg_on.png') #fff 93% 50% no-repeat;}
#logout_link #menu_content_mypage img.icon_headermenu{ position:absolute; top:-15px; right:10px; z-index:-1;}



/* modal coin
----------------------------------------------- */
.popCoin{ width:546px; margin:auto; background:url('../images/coinmodal_bg.gif'); padding:12px; border-radius:30px; margin:-10px auto 15px auto;}
.popCoin .popCoinIN{ background:#fff; border-radius:20px; padding:12px;}
.popCoin .currentNum{border:none;background:#f18b97; border-radius:10px;}
.popCoin .currentNum, .popCoin .currentNum span{ color:#fff;}
.popCoin .currentNum img{width:50px; margin:0 8px;}
.popCoin p{font-size:20px;}
.popCoin p strong span{font-size:60px; font-weight:normal;}
.popCoin p span{font-size:24px;}
.popCoin p img{ width:auto;}
.popCoin h5{font-size:30px;font-weight:normal; color:#666;}
.popCoin h5 span.coinNum{ color:#f18b97; font-size:24px; display:inline-block; padding:0 10px;}
.popCoin h5 span.coinNum strong{font-size:60px; font-weight:normal;}


/* modal rank
----------------------------------------------- */
.popLevel{ width:546px; margin:auto; background:url('../images/coinmodal_bg.gif'); padding:12px; border-radius:30px; margin:-10px auto 15px auto;}
.popLevel .popLevelIN{ background:#fff; border-radius:20px; padding:12px;}
.popLevel .popLevelIN h5{border:none;background:#f18b97; border-radius:10px; color:#fff; font-size:28px; font-weight:normal; line-height:1; padding:10px;}
.popLevel .popLevelIN h5 img{width:70px; margin:0 8px; vertical-align:2px;}
.popLevel .popLevelIN div{font-size:20px; color:#666; padding:15px;}
.popLevel .popLevelIN p{line-height:0; margin:0;}
.popLevel .popLevelIN p img{width:100%;}


/* common
----------------------------------------------- */
h2.title{background:#7ed4e1; line-height:1; color:#fff; border-radius:3px 3px 0 0; font-size:24px; font-weight:normal; padding:13px 0; text-align:center; margin-top:30px;}
h2.title img{ margin:0 10px;}


/* portal
----------------------------------------------- */
body.eventportal #footer, body.eventportal #push {display:none;}
body.eventportal #wrap{margin:0;}
body.page #content{padding-bottom:250px;}
body.eventportal #content_portal h2{padding:0;}


body.eventportal #comment{background:url('../images/comment_bg.png') repeat-x;padding:5px;}
body.eventportal #comment #comment_box{width:980px;margin:auto;font-size:14px;line-height:1; color:#444;}
body.eventportal #comment #comment_box img{vertical-align:-8px;margin-right:8px;}
body.eventportal #comment #comment_box a{color:#444; text-decoration:underline; font-size:14px;}
body.eventportal #comment #comment_box a:hover{color:#62C5D3; text-decoration:underline; font-size:14px;}
body.eventportal #asobiba{position:relative; line-height:0; margin-top:50px;}
body.eventportal #asobiba .link01, body.eventportal #asobiba .link02, body.eventportal #asobiba .link03{position:absolute;}
body.eventportal #asobiba .link01{top:280px; left:310px;}
body.eventportal #asobiba .link02{top:120px; right:120px;}
body.eventportal #asobiba .link03{top:70px; left:100px;}


.item-header {
    display: block;
    width: 190px;
    height: 32px;
    border: hidden !important;
}

.item-header.new {
    background: url(../images/new.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 55px 25px;
}

.slide-bg {
    background-image: url(../images/slider_bg.png);
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto; 
    width: 670px;
    height: 264px;
    background-repeat: no-repeat;
    background-position: left center;
}

.slide-body {
    margin-left: 15px;
}

.slide-box {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 30px;
    position: relative;
}

.slider-area.type-b, .slider-area.type-c {
    margin-top: 25px;
}


.bx-wrapper .bx-pager.bx-default-pager a {
/*    background: #b3b3b3;*/
    background: #fff;
    background-image: url(../images/gray_dot.png);
}

.type-a .bx-wrapper .bx-pager.bx-default-pager a:hover, .type-a .bx-wrapper .bx-pager.bx-default-pager a.active {
/*    background: #fe4e48;*/
    background: #fff;
    background-image: url(../images/red_dot.png);
}

.type-b .bx-wrapper .bx-pager.bx-default-pager a:hover, .type-b .bx-wrapper .bx-pager.bx-default-pager a.active {
/*    background: #ae5da0;*/
    background: #fff;
    background-image: url(../images/purple_dot.png);
}

.type-c .bx-wrapper .bx-pager.bx-default-pager a:hover, .type-c .bx-wrapper .bx-pager.bx-default-pager a.active {
/*    background: #95e174;*/
    background: #fff;
    background-image: url(../images/green_dot.png);
}

.bx-wrapper .bx-prev  {
    background-image: url(../images/arrow_left.png);
    width: 48px;
    height: 48px;
    position: absolute;
    top: 95px;
    left: -44px;
	text-indent: -9999px;
}

.bx-wrapper .bx-next {
    background-image: url(../images/arrow_right.png);
    width: 48px;
    height: 48px;
    position: absolute;
    top: 95px;
    right: -55px;
	text-indent: -9999px;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: -33px;
}
.item {
    width: 207px !important;
}

.newsPick{
    font-size: 12px;
    background: rgba(218, 218, 218, 0);
    padding: .4em 1.6em;
    border-bottom: 2px dashed #bbeef5;
    background: #fff;
    color: #444;
}

.newsPickIn{
    width: 980px;
    margin: 0 auto;
}

.newsPick a,
.newsPick a:hover{
    text-decoration:underline;
}

.newsPick a:hover{
    color:#62C5D3;
}

/* portal modal
----------------------------------------------- */
#modal-content{
    background-image: url(../images/modal_bg.png);
    width: 460px;
    padding:20px;
    margin:0;
    position:absolute;
    display:none;
    z-index:3;
}

#modal-content-in{
    padding:20px;
    background:#f7feff;
}

/*IE8用の透明なオーバーレイ*/
#modal-overlay2{
   z-index:2;
   display:none;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:120%;
}

#modal-overlay{
   z-index:1;
   display:none;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:120%;
   background-color:rgba(0,0,0,0.75);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000)";
}

#modal-overlay:not(:target){
    filter: none;
    -ms-filter: none;    
}

#modal-close{
    background-image: url(../images/modal_close.png);
    width: 54px;
    height: 54px;
    position: absolute;
    top: -27px;
    right: -27px;
}

#dengon_title{margin: -30px 0 14px;}

.button-link{
   color:#00f;
   text-decoration:underline;
}
 
.button-link:hover{
   cursor:pointer;
   color:#f00;
}
#modal-content .item-image img{
    width:100%;
    height:auto;
}

#modal-content .item_text {
    color: #666666;
    font-size: 11pt;
    text-align: left;
    margin:0.6em 0;
}

#modal-content .button-check {
    background: url(../images/check_button.png) center no-repeat;
    height:56px;
}

#modal-content #dengon_pt1{height:60px; background:url(../images/modal_pt1.png) center no-repeat;}
#modal-content .get_coin {
    height: 65px;
    padding: 22px 70px 0 0;
    color: #ff6666;
    font-size:40px;
    text-align:center;
    font-weight:bold;
    background:url(../images/modal_pt2.png) center no-repeat;
}
/* portal footer
----------------------------------------------- */
#top_footer{position:fixed; width:100%; background:#7ed5e1; line-height:1; bottom:0; left:0;}
#top_footer #top_copyright{ background:#fff; text-align:center; padding:5px 0;color:#7c7c7c;font-size:10px;}
#top_footer #top_footerIN{padding:10px 0; width:980px; margin:auto; position:relative;}
#top_footer #top_footerIN .link01{ position:absolute; left:0; top:-50px;}
#top_footer #top_footerIN .link02{ position:absolute; right:0; top:-95px;}
#top_footer #top_footerIN ul{padding-left:185px; position:relative;}
#top_footer #top_footerIN ul li{ display:inline-block; vertical-align:top;}
#top_footer #top_footerIN ul li .coinBOX{background:url('../images/topfooter/bg_coin.png') no-repeat; display:block; width:474px; height:74px;}
#top_footer #top_footerIN ul li .coinBOX span{ display:block; text-align:right; font-size:36px; font-weight:bold; color:#333; padding:18px;}
#top_footer #top_footerIN ul li .stageBOX{background:url('../images/topfooter/bg_stage.png') no-repeat; display:block; width:219px; height:70px;}
#top_footer #top_footerIN ul li .stageBOX img{ margin:3px 0 0 116px;}


/* mypage
----------------------------------------------- */
.event_box .event_mark .event_open_mark_on{background:#faa7b1;}
.event_box .event_mark .event_open_mark_off{background:#999;}

.event_box th .event_info {color: #faa7b1;}
.event_box td .event_name {color:#000;}
.event_box td .description {color:#777;}
.event_box_hover td .event_name {color:#000;}

.noticeLink a span{background:#faa7b1;}

/* mypage user rank
----------------------------------------------- */
.user_name{padding:15px 0;}
.user_name img{width:auto; height:auto; margin:0;}

.user_name .user_coinBOX{
    width:295px;
    float:right;
    text-align:center;
    font-weight:normal;
    margin:90px 0 0 0;
    background:url('../images/coinmodal_bg.gif');
    padding: 12px;
    border-radius: 30px;
}

.user_name .user_coinBOXin{background:#FFF2F4; border-radius: 20px; padding: 30px 0;}
.user_name .user_coinBOX div img{ vertical-align:-10px;}
.user_name .user_coinBOX div span{display:inline-block; font-size:15px; color:#666; line-height:1.5;}
.user_name .user_coinBOX p{font-size:56px; color:#faa7b1; font-weight:bold;padding:15px 0 6px 0;}
.user_name .user_coinBOX div.total_coin{ color:#999; font-size:12px; padding-bottom:14px;}
.user_name .user_coinBOX a{display:inline-block;}

.user_name .user_rankBOX{width:600px; float:left;}
.user_name .user_rankBOX img.card{width:600px; height:auto;}
.user_name .user_rankBOX .link_help{width:600px; text-align:right;}
.user_name .user_rankBOX .link_help li{display:inline-block; vertical-align:middle; padding-left:5px;}
.user_name .user_rankBOX .link_help li a{display:inline-block; margin-top:9px;}


/* page common
----------------------------------------------- */
body.page{background:url('../images/bg.gif');}
body.page #content{ background:none; width:980px;}

body.page #main{width:720px; float:left;}
body.page #sidebar{width:240px; float:right;}

body.page #pankuzu{padding:15px 0; margin:0; float:left;}
body.page #pankuzu a{text-decoration:none;}
body.page #pankuzu img{margin-right:10px; vertical-align:-3px;}

body.page .social_link{float:right; padding:15px 0 0 0;}
body.page .social_link li{vertical-align:top;}
body.page .social_link li a{display:inline-block;width:auto;padding:0;}
body.page .social_link li a img{ height:auto;}



body.page #main #box{ background:#fff; border:6px solid #62c5d3; border-radius:5px; padding:0 17px; color:#666; font-size:14px; line-height:1.6;}
body.page #main #box h2.title{border-radius:3px; margin-top:15px;}


body.page #main #box p.sub{ padding:20px 13px;}
body.page #main #box p.lead{ padding:20px 13px; font-size:18px;}

body.page #main #box .link{text-align:center; padding:33px 0;}

body.page #main .link_pagetop{text-align:right; padding-top:10px; padding-right:30px;}
body.page #main .link_pagetop a{color:#62c5d3;}
body.page #main .link_pagetop a img{ margin-right:7px; vertical-align:-3px;}

body.page #main #link_sns{padding:25px 0;}
body.page #main #link_sns li{ display:inline-block; float:left; margin:0 2px;}
body.page #main #link_sns li:first-child, body.page #main #link_sns li:last-child{ margin:0;}


/* page sidebar
----------------------------------------------- */
body.page #sidebar{padding:25px 0 0 0;}
body.page #sidebar .title{ padding:20px 0 0 0;}
body.page #sidebar .links li{margin-top: 5px; line-height:0;}
body.page #sidebar .box_fb, body.page #sidebar .box_tw{margin-top:15px;}
body.page #sidebar .box_tw{background:#f4a2ae; border:1px solid #f4a2ae;}
body.page #sidebar .box_tw .name{ padding:8px;}
body.page #sidebar .box_tw .name a{ color:#fff; font-size:12px;}
body.page #sidebar .box_tw .name a img{ vertical-align:-13px; margin-right:5px;}
body.page #sidebar .foot{margin-top:10px;}
body.page #sidebar .foot li{background:url('../images/sidebar/icon_foot.png') left 5px no-repeat; font-size:12px; padding-left:8px; margin: 0 0 7px;}
body.page #sidebar .foot li a{color:#444; text-decoration: underline;}
body.page #sidebar .foot li a:hover{ color:#62C5D3; text-decoration:underline;}
body.page #sidebar .mypageBOX{background:url('../images/sidebar/mypage_bg.png') left top no-repeat;height:82px; padding:50px 18px 0 18px;}
body.page #sidebar .mypageBOX_login{background:url('../images/sidebar/mypage_bg.png') left top no-repeat;}
body.page #sidebar .mypageBOX_logout{background:url('../images/sidebar/mypage_bg_login.png') left top no-repeat;}
body.page #sidebar .mypageBOX span{background:url('../images/sidebar/mypage_mi.png') left top no-repeat; width:104px; display:inline-block; font-size:20px; font-weight:bold; text-align:right; padding:22px 7px 20px 1px; margin-left:7px; color:#333;}
body.page #sidebar .mypageBOX_login img{ width:76px; vertical-align:-14px;}
body.page #sidebar .mypageBOX_logout a{ display:block; text-align:center; padding:17px 0;}
body.page #sidebar .mypageBOX_logout a img{ width:auto;}


/* page about
----------------------------------------------- */
body.about #main #box h3{
	background:#f7feff;
	border:1px solid #62c5d3;
	border-left:20px solid #62c5d3;
	padding:7px 13px;
	border-radius: 3px;
	font-size:20px;
	color:#62c5d3;
	line-height:1;
}

body.about #main #box h4{
	color:#62c5d3;
	font-weight:normal;
	font-size:18px;
	border-bottom:4px solid #c0e8ed;
	line-height:1;
	padding:6px 0;
}
body.about #main #box h4 .icon{display:inline-block; width:14px; height:14px; background:#62c5d3; margin-right:10px;}

body.about #main #box .col{padding-bottom:15px;}
body.about #main #box a{ color:#444; text-decoration:underline;}
body.about #main #box a:hover{ color:#62C5D3; text-decoration:underline;}
body.about #main #box .col .col_small{width:255px; float:left;}
body.about #main #box .col .col_small img{ border:5px solid #c0e8ed; border-radius:5px; width:260px;}
body.about #main #box .col .col_medium{width:378px; float:right;}
body.about #main #box .col .col_medium p{padding:15px 0;}
body.about #main #box .link{border-top:1px dashed #62c5d3;}
body.about .btn_top{text-align: center; margin:60px 0 -120px;}


/* page faq
----------------------------------------------- */
body.faq #main #box h3{
	background:#f7feff;
	border:1px solid #7ed5e1;
	border-radius: 5px;
	font-size:20px;
	color:#666;
	line-height:1;
	margin-top:20px;
}
body.faq #main #box h3 th{background:#7ed5e1;padding:10px 0;width:125px;text-align:center;vertical-align:top;}
body.faq #main #box h3 td{padding:10px 25px;}

body.faq #main #box .answer{padding-top:10px;}
body.faq #main #box .answer th{padding:10px 0;width:125px;text-align:center;vertical-align:top;}
body.faq #main #box .answer td{padding:10px 5px 10px 25px;font-size:18px;vertical-align:top;}
body.faq #main #box .answer td a{ color:#444; text-decoration:underline;}
body.faq #main #box .answer td a:hover{ color:#62C5D3; text-decoration:underline;}
body.faq #main #box .link_pagetop{border-bottom:1px dashed #62c5d3; padding-bottom:15px; padding-right:5px;}

body.faq #main #box .col{padding-top:15px; margin-right:-10px;}
body.faq #main #box .col .col_small{width:240px; float:left; margin-right:10px;}
body.faq #main #box .col .col_small img{ border:5px solid #c0e8ed; border-radius:5px; width:440px; height:auto;}
body.faq .btn_top{text-align: center; margin:60px 0 -120px;}

/* page news
----------------------------------------------- */

.page-news .lists{
    margin-bottom:24px;
}

.page-news .list{
    border-bottom: 1px dashed #ccc;
    padding:20px;
    font-size:16px;
    display:none;
}

.page-news .list.active{
    display:block
}

.page-news .list a{
    text-decoration:underline;
    color:#62c5d3;
}

.page-news .date{
    width: 80px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #ccc;
    display: inline-block;
    padding: .1em .8em;
    margin-right: .5em;
    vertical-align: middle;
}

.page-news .txt {
    font-size: 14px;
    display: inline-block;
    width:520px;
    vertical-align: middle;
}

.page-news .btn-wrap{
    text-align:center;
    margin-bottom:24px;
}

.page-news .btn-wrap .btn {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    background: #7ED4E1;
    border-radius: 3px;
    padding: 1em 2em;
    box-shadow: 2px 2px 0px 1px #6DB8C2;
    position:relative;
    z-index:2;
}

.page-news .banners{
    margin-top:32px;
}

.page-news .banners__item{
    margin-top:20px;
    display:block;
}

.page-news .banners__item--first{
    margin-top:0;
}

.page-news .banners__item img{
    max-width:100%;
}

.page-news .btn_top{text-align: center; margin:60px 0 -120px;}


/* modal total login
----------------------------------------------- */
.pop_container_prof h4{ margin-top:-20px;}
.pop_container_prof h4 img{width:360px; border-bottom:1px solid #c9c9c9; padding-bottom:10px;}

.freespace p{font-size:14px; text-align:left; color:#4a4a4a; line-height:2;  padding:20px 0; width:316px; margin:auto;}


/* page login
----------------------------------------------- */
#login_box{width:410px; margin:auto; padding:30px 0 0 0;}
#login_box #login_boxIN{border:1px solid #7ed5e1; padding:25px;}
#login_box #login_boxIN h4 img{ width:100%; height:auto; padding-bottom:10px; border-bottom:1px solid #c9c9c9;}
#login_box #login_boxIN p, #login_box #login_boxIN h4{ color:#000;}
#login_box #login_boxIN p{font-size:13px}
#login_box #login_boxIN a{ display:block; font-size:18px; font-weight:bold; color:#fff; text-align:center; padding:25px 0; line-height:1; background:#ff6b7c; margin:0 20px;}
#login_box #login_boxIN .note{ text-align:center; font-size:11px; padding:20px 0 0 0;}


/* coin join
----------------------------------------------- */
.pop_container_login .ans_btn a{font-size:20px;padding: 25px 0;border-radius:0;border:none;}
.pop_container_login .ans_btn a.btn_yes{background:#ff6b7c;}
.pop_container_login .ans_btn a.btn_no{background:#72d0de;}


/* password remind
----------------------------------------------- */
.password_remind{width:360px; margin:30px auto; border:1px solid #7ed5e1; padding:25px 25px 45px 25px;}
.password_remind h5{padding:30px 0; font-size:24px;}
.password_remind input[type="password"]{width:95%;}
.password_remind input[type="submit"]{ display:block; font-size:18px; font-weight:bold; color:#fff; text-align:center; padding:25px 0; line-height:1; background:#ff6b7c; margin:20px; width:90%; border:none; border-radius:0;}
.password_remind h2 img{width:360px; border-bottom:1px solid #c9c9c9; padding-bottom:10px;}


/* modal profile
----------------------------------------------- */
.pop_container_prof span.notes_must{display:none !important;}
.pop_container_prof span.points_must{display:none !important;}