@charset "utf-8";
/* 2019/07/25 16:30 update */

/* body{height:auto !important; position: relative;} */
.container.breadcrumb { display:none;}
.go_top {z-index: 100;}
.go_top a {background: #fd8833 none repeat scroll 0 0; border-radius: 20px; color: #ffffff !important; display: block; font-size: 18px; height: 40px; padding: 10px; text-align: center; width: 40px;}

/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
.clearfix {min-height: 1px;}
.clearfix:after {display:block; clear:both; height:0px; visibility:hidden; content:".";}
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible;}

/* Loader */
.wn-loader{background:#fff; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 200;}
 
/* Loader - Animation */
.wn-loader-animation {height: 110px; left: 50%; margin: -50px 0 0 -50px; position: absolute; top: 50%; width: 100px;}
.wn-loaderIcon {position: relative; width: 100%; margin: 0 auto; height: 100%; fill: #83bee8;
animation-name: icon_st0; animation-duration: 3.0s; animation-iteration-count: infinite;
-webkit-animation-name: icon_st0; -webkit-animation-duration: 3.0s; -webkit-animation-iteration-count: infinite;}
.wn-loaderIcon .st0{transform-origin: 50%;}

@keyframes icon_st0 {
	 0% {fill-opacity: 0.0; fill: #83bee8; transform: scale(0.0);}
	10% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.0);}
	15% {fill-opacity: 1.0; fill: #83bee8; transform: scale(1.0);}
	20% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	25% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	30% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	49% {fill-opacity: 0.0; fill: #83bee8; transform: scale(0.8);}
	50% {fill-opacity: 0.0; fill: #f48eb5; transform: scale(0.0);}
	60% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.0);}
	65% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(1.0);}
	70% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
	75% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
	80% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
   100% {fill-opacity: 0.0; fill: #f48eb5; transform: scale(0.8);}
}

@-webkit-keyframes icon_st0 {
	 0% {fill-opacity: 0.0; fill: #83bee8; transform: scale(0.0);}
	10% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.0);}
	15% {fill-opacity: 1.0; fill: #83bee8; transform: scale(1.0);}
	20% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	25% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	30% {fill-opacity: 1.0; fill: #83bee8; transform: scale(0.8);}
	49% {fill-opacity: 0.0; fill: #83bee8; transform: scale(0.8);}
	50% {fill-opacity: 0.0; fill: #f48eb5; transform: scale(0.0);}
	60% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.0);}
	65% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(1.0);}
	70% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
	75% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
	80% {fill-opacity: 1.0; fill: #f48eb5; transform: scale(0.8);}
   100% {fill-opacity: 0.0; fill: #f48eb5; transform: scale(0.8);}
}

.wn-Icon:before {width: 50%; height: 50%; background: #b71c25; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: '';}
.wn-Icon:after {background: #fff; width: 75%;height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.loading-text{color: #333333; font-weight: 700; width: 100%; text-align: center; margin: 0 0 0 9px; position: absolute; top: 90%;}
.loader_letter:nth-child(1){animation: bound 1.0s infinite; position: absolute; animation-delay: 0s; left: 0;}
.loader_letter:nth-child(2){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.1s; left: 12px;}
.loader_letter:nth-child(3){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.2s; left: 26px;}
.loader_letter:nth-child(4){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.3s; left: 40px;}
.loader_letter:nth-child(5){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.4s; left: 55px;}
.loader_letter:nth-child(6){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.5s; left: 64px;}
.loader_letter:nth-child(7){animation: bound 1.0s infinite; position: absolute; animation-delay: 0.6s; left: 78px;}
.loader_letter:nth-child(odd){color: #83bee8;}
.loader_letter:nth-child(even){color: #f48eb5;}
@keyframes bound{
	 0% {transform: translateY(0px);}
	50% {transform: translateY(-10px);}
	60% {transform: translateY(1px);}
	70% {transform: translateY(0px);}
   100% {transform: translateY(0px);}
}

/*** Event - WanNyan Mission ***/
#wrap_wn {font-family: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #6a3906; font-size: 16px; font-weight: 500; background: url(../img/event/cpn_wannyan/common/wn_bg_01.jpg) repeat; overflow: hidden;}

/* Contents Common */
#wrap_wn .event-detail{position: relative; padding: 0 0; margin: 0 0; /* overflow: hidden; */}
#wrap_wn .event-detail:first-of-type{padding: 0 0 5%; margin: 0 0 5%;}
#wrap_wn .event-detail .content-block{width: 100%; max-width: 970px; height: 100%; margin: 0 auto; position: relative; z-index: 10;}
#wrap_wn .event-detail .content-block .block-box{margin: 0; padding: 0; position: relative;}
#wrap_wn .event-detail .content-block .week{background: url(../img/event/cpn_wannyan/common/wn_content_bg_02.jpg) repeat; border-radius: 10px; padding: 15px;}
#wrap_wn .event-detail .content-block .week .itemList{background: url(../img/event/cpn_wannyan/common/wn_content_bg_03.jpg) repeat; border-radius: 0 0 10px 10px; padding: 30px;}
#wrap_wn .event-detail .content-block .week .itemList ul{width: 90%; margin: 0 auto;}
#wrap_wn .event-detail .content-block .week .itemList li{width: 100%; display: table; margin: 0 0 40px; position: relative; table-layout: fixed;}
#wrap_wn .event-detail .content-block .week .itemList ul li:last-child {margin: 0;}
#wrap_wn .event-detail .content-block .week .itemList .image{width: 50%; display: table-cell; position: relative;}
#wrap_wn .event-detail .content-block .week .itemList .image .ptIcon{position: absolute; width: 25%; top: -20px; left: -20px; z-index: 10; transform: rotate(-15deg);}
#wrap_wn .event-detail .content-block .week .itemList .image .reward{position: absolute; width: 30%; bottom: 5px; right: -15px; z-index: 10; transform: rotate(20deg);}

#wrap_wn .event-detail .content-block .week .itemList .image a:before {display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; margin: 0; border: 0 solid #fff;}
#wrap_wn .event-detail .content-block .week .itemList .image a:hover:before {top: 50%; left: 50%; width: 80px; height: 80px; border-radius: 50%; margin: -40px 0 0 -40px; border: 10px solid #fff;}
#wrap_wn .event-detail .content-block .week .itemList .image a:after {content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border: 1px solid transparent; border-left: 1px solid #fff; margin: 0;}

#wrap_wn .event-detail .content-block .week .itemList .image a:hover:after {top: 50%; left: 50%; width: 0; height: 0; border: 16px solid transparent; border-left: 26px solid #fff; margin: -16px 0 0 -10px;}
#wrap_wn .event-detail .content-block .week .wanWeek .image a:hover:before {border: 10px solid #83bee8;}
#wrap_wn .event-detail .content-block .week .wanWeek .image a:hover:after {border-left: 26px solid #83bee8;}
#wrap_wn .event-detail .content-block .week .nyanWeek .image a:hover:before {border: 10px solid #f48eb5;}
#wrap_wn .event-detail .content-block .week .nyanWeek .image a:hover:after {border-left: 26px solid #f48eb5;}

#wrap_wn .event-detail .content-block .week .itemList .image a,#wrap_wn .event-detail .content-block .week .itemList .image a::before,#wrap_wn .event-detail .content-block .week .itemList .image a::after{display: block; outline: 0px solid #e4dacc;  outline-offset: 0px; color: #fff; -webkit-transition: all .1s; transition: all .1s; transform-origin: 50%;}
#wrap_wn .event-detail .content-block .week .itemList .image a:hover{outline: 5px solid #ffffff;  outline-offset: -8px; color: #ffffff; display: block;}
#wrap_wn .event-detail .content-block .week .itemList .lead{width: 50%; display: table-cell; vertical-align: middle; font-size: 4.2rem; font-weight: 700; padding: 0 20px;}
#wrap_wn .event-detail .content-block .week .itemList .lead span{font-size: 2rem; display: block; margin: 0 0 5px;}
#wrap_wn .event-detail .content-block .week .itemList .lead span.name{font-size: 2.0rem; margin: -10px 0 5px;}
#wrap_wn .event-detail .content-block .week .itemList .lead span.pro{margin: 0;}
#wrap_wn .event-detail .content-block .week .wanWeek,#wrap_wn .event-detail .content-block .week .nyanWeek{padding: 50px 0;}
#wrap_wn .event-detail .content-block .week .wanWeek .image a:hover{outline: 5px solid #83bee8;  outline-offset: -8px; color: #83bee8;}
#wrap_wn .event-detail .content-block .week .nyanWeek .image a:hover{outline: 5px solid #f48eb5;  outline-offset: -8px; color: #f48eb5;}

#wrap_wn .event-detail .content-block .week .total_Item {position: relative; padding: 50px;}
#wrap_wn .event-detail .content-block .week .total_Item .ptIcon{position: absolute; width: 18%; top: -30px; left: -30px; z-index: 10; transform: rotate(-15deg);}
#wrap_wn .event-detail .content-block .week .total_Item .reward{position: absolute; width: 22%; top: 300px; right: -30px; z-index: 10; transform: rotate(20deg);}
#wrap_wn .event-detail .content-block .week .total_Item hr{margin: 30px 0; border: 0; height: 0; border-top: 2px solid rgba(126, 73, 18, 1); border-bottom: 0px;}
#wrap_wn .event-detail .content-block .week .total_Item ul{width: 820px; margin: 0 auto 20px;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots {bottom: -20px;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots li {display: inline-block !important; height: 20px !important; width: 20px !important; margin: 0 5px !important;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots li.slick-active button:before {color: #fd8833; opacity: 0.75;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots li button:before,#wrap_wn .event-detail .content-block .week .nyanWeek .slick-dots li button:before { width: 40px; height: 40px; font-size: 20px; line-height: 20px; color: #8f867a;}
#wrap_wn .event-detail .content-block .week .total_Item .image a:hover{outline: 5px solid #fd8833;  outline-offset: -8px; color: #fd8833;}
#wrap_wn .event-detail .content-block .week .total_Item .image a:hover:before {border: 10px solid #fd8833;}
#wrap_wn .event-detail .content-block .week .total_Item .image a:hover:after {border-left: 26px solid #fd8833;}

#wrap_wn .event-detail .content-block .week .total_Item .leadBox{}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox h3{margin-bottom: 20px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox h3.seacret{margin-top: 30px; margin-bottom: -10px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox hr{border-top: 6px dotted #6a3906; margin: 20px 0;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox p{font-size: 2.4rem; font-weight: 700; line-height: 1.4; margin: -5px 0 25px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox p span{font-size: 1.5rem; display: block; margin-top: 5px;}

#wrap_wn .event-detail .content-block .week .title{border-bottom: 3px solid #753912; padding: 10px 0 15px;}
#wrap_wn .event-detail .content-block .week .title h3{margin-bottom: 15px;}
#wrap_wn .event-detail .content-block .week .title p{color: #faf095; font-size: 2.4rem; font-weight: 700; margin: 0; text-align: center;}
#wrap_wn .event-detail .content-block .week .title span{color: #999; text-decoration: line-through;}
#wrap_wn .event-detail .content-block .week .title span.held{color: #fe6000; text-decoration: none; text-shadow: 1px 1px 2px #000;}
#wrap_wn .event-detail .content-block .week .title span.end{color: #999; text-decoration: none; text-shadow: 1px 1px 2px #000;}

/* Rep Only */
#wrap_wn .event-detail .content-block .reprint{background: url(../img/event/cpn_wannyan/common/wn_content_bg_02_rep.jpg) repeat !important;}

/* Link */
#wrap_wn a{color: #6a3906; }
#wrap_wn a:hover{color: #d61518;}
#wrap_wn .boxLink {display: block; width: 520px; margin: 0 auto; position: relative;}
#wrap_wn .boxLink a,#wrap_wn .boxLink a::before,#wrap_wn .boxLink a::after {display: block; background: #f69f39; text-align: center; color: #fff; padding: 10px; border: 2px #f69f39 solid; border-radius: 50px; font-size: 2.6rem; font-weight: 700; -webkit-transition: all .3s; transition: all .3s; margin: 0 0 10px;}
#wrap_wn .boxLink a:hover{background: #d61518; color: #fff; border: 2px #c01316 solid;}
#wrap_wn .boxLink span{position: absolute; right: 5%; top: 29%;}
#wrap_wn .perfect {width: 400px; margin: 0 auto;}
#wrap_wn .perfect a,#wrap_wn .perfect a::before,#wrap_wn .perfect a::after {background: #fd8833; color: #fff; border: 2px #e8680c solid; font-size: 2rem; margin: 0;}
#wrap_wn .perfect a:hover{background: #ffffff; color: #fd8833; border: 2px #e8680c solid;}

/* Contents Introduction */
#wrap_wn .intro{}
#wrap_wn .main-image{ width: 100%; background: url(../img/event/cpn_wannyan/common/wn_main_image_bg.jpg) repeat;}
/* 2018 */
#wrap_wn .main-image .main-image_Area{ background: url(../img/event/cpn_wannyan/cpn_wn201805/wn_main_image.jpg) no-repeat 50% 50%; width:100%; min-height: 544px; margin: 0 auto; position: relative; text-indent: -9999px;}
/* 2019 */
#wrap_wn .main-image .main-image_Area{ background: url(../img/event/cpn_wannyan/cpn_wn201908/wn_main_image.jpg) no-repeat 50% 50%; width:100%; min-height: 544px; margin: 0 auto; position: relative; text-indent: -9999px;}

/* Contents Outline */
#wrap_wn .event-detail .outline {margin: 2% auto;}
#wrap_wn .event-detail .outline h3{margin: 0 0 30px;}
#wrap_wn .event-detail .outline p{font-size: 2.8rem; text-align: center; font-weight: 700;}
#wrap_wn .event-detail .outline span{display: inline-block; line-height: 1.3;}
#wrap_wn .event-detail .outline span.l_blue{border-bottom: 4px dotted #83bee8;}
#wrap_wn .event-detail .outline span.l_pink{border-bottom: 4px dotted #f48eb5;}
#wrap_wn .event-detail .outline .date{}
#wrap_wn .event-detail .outline .date p{font-size: 20px;}
#wrap_wn .event-detail .outline .date span{background: #f69f39; color: #fff; border-radius: 5px; font-size: 1.3rem; font-weight: 700; padding: 3px 10px; display: inline-block; vertical-align: 2px; margin: 0 5px 0 0;}

/* Contents PlayerData */
#wrap_wn .event-detail .playData{}
#wrap_wn .event-detail .playData .entryArea{width: 100%; margin: 5% 0;}
#wrap_wn .event-detail .playData .entry{font-size: 18px; font-weight: 700; color: #fff;}
#wrap_wn .event-detail .playData .entryArea hr{border-top: none; border-bottom: 5px dotted #6a3906; width: 97%;}
#wrap_wn .event-detail .playData .name{background: url(../img/event/cpn_wannyan/common/wn_content_bg_01.jpg) repeat; border: 5px solid #4e372d; padding: 10px 20px; width: 98%; margin: 0 auto; font-size: 2.8rem !important; border-radius: 10px;}
#wrap_wn .event-detail .playData .name span{background: #f69f39; border-radius: 5px; padding: 5px 15px; font-size: 1.8rem; margin: 0 5px 0 0; vertical-align: 3px;}
#wrap_wn .event-detail .playData .data{margin: 0 0 20px;}
#wrap_wn .event-detail .playData .data:nth-last-of-type(){margin: 0;}
#wrap_wn .event-detail .playData .data h3 {display: inline-block; background: #f69f39; color: #fff; font-size: 1.6rem; font-weight: 700; padding: 10px 14px; max-width: 400px; border-left: 10px solid #fff; margin: 0 0 15px 10px;}

#wrap_wn .event-detail .playData .data ul{display: table; width: 100%; border-collapse: separate; border-spacing: 10px 0;}
#wrap_wn .event-detail .playData .data ul li{background: url(../img/event/cpn_wannyan/common/wn_content_bg_01.jpg) repeat; border: 5px solid #4e372d; border-radius: 10px; padding: 20px 15px; display: table-cell; width: 33%; position: relative;}
#wrap_wn .event-detail .playData .data p{font-size: 5.2rem; font-weight: 700; margin: 0; text-align: center;}
#wrap_wn .event-detail .playData .data p.score{color: #999;}
#wrap_wn .event-detail .playData .data p.score_1st{color: #83bee8;}
#wrap_wn .event-detail .playData .data p.score_2nd{color: #f48eb5;}
#wrap_wn .event-detail .playData .data p.score_total{color: #edc61f;}
#wrap_wn .event-detail .playData .data span{font-size: 30px; font-weight: 700; color: #999;}
#wrap_wn .event-detail .playData .data p.score_1st span{color: #83bee8;}
#wrap_wn .event-detail .playData .data p.score_2nd span{color: #f48eb5;}
#wrap_wn .event-detail .playData .data p.score_total span{color: #edc61f;}
#wrap_wn .event-detail .playData .data .data-ttl{background: #999; text-align: center; font-size: 22px; border-radius: 6px; padding: 3px 0; margin: 0 0 15px;}
#wrap_wn .event-detail .playData .data .ttl_1st{background: #83bee8;}
#wrap_wn .event-detail .playData .data .ttl_2nd{background: #f48eb5;}
#wrap_wn .event-detail .playData .data .ttl_total{background: #edc61f;}
#wrap_wn .event-detail .playData .data-notice{font-size: 14px; color: #d70000; margin: 15px 0 0 5px;}

#wrap_wn .event-detail .playData .end{}
#wrap_wn .event-detail .playData .end li{}
#wrap_wn .event-detail .playData .end li .ttl_1st,#wrap_wn .event-detail .playData .end li .ttl_2nd,#wrap_wn .event-detail .playData .end li .ttl_total{background: #999;}
#wrap_wn .event-detail .playData .end li p.score_1st,#wrap_wn .event-detail .playData .end li p.score_2nd,#wrap_wn .event-detail .playData .end li p.score_total,
#wrap_wn .event-detail .playData .end li p.score_1st span,#wrap_wn .event-detail .playData .end li p.score_2nd span,#wrap_wn .event-detail .playData .end li p.score_total span{color: #999;}
#wrap_wn .event-detail .playData .end li:before{width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0; background-color: rgba(120,120,120,0.75);}

/* Return WanNyan
#wrap_wn .event-detail .playData .return{display: table; width: 100%; height: 0; border-collapse: separate; border-spacing: 10px 0;}
#wrap_wn .event-detail .playData .return .ribbon{background: #ee623e; color: #6a3906; text-align: center; position: absolute; top: -2px; left: -10px; transform: rotate(-25deg); font-size: 1.2rem; line-height: 2.2em; padding: 2px 6px;}
#wrap_wn .event-detail .playData .return .ribbon:before {width: 0; height: 0; content: ""; position: absolute; top: 0px; right: 99%; border-width: 15px 8px; border-style: solid; border-color: #ee623e; border-left-color: transparent;}
#wrap_wn .event-detail .playData .return .ribbon:after {width: 0; height: 0; content: ""; position: absolute; top: 0px; left: 99%; border-width: 15px 8px; border-style: solid; border-color: #ee623e; border-right-color: transparent;}
#wrap_wn .event-detail .playData .return .none{background: #999; color: #666;}
#wrap_wn .event-detail .playData .return .none:before {border-color: #999; border-left-color: transparent;}
#wrap_wn .event-detail .playData .return .none:after {border-color: #999; border-right-color: transparent;}
#wrap_wn .event-detail .playData .return ul{display: table-cell; width: 33%; vertical-align: top;}
#wrap_wn .event-detail .playData .return ul:nth-child(3){display: table; width: 100%; height: 100%; border-collapse: separate; border-spacing: 0;}
#wrap_wn .event-detail .playData .return ul:nth-child(3) li{display: table-cell; vertical-align: middle;}
#wrap_wn .event-detail .playData .return ul li{padding: 15px 20px; display: block; width: 100%; height: auto; margin-bottom: 10px; position: relative; overflow: visible;}
#wrap_wn .event-detail .playData .return ul li:last-child{margin-bottom: 0;}
 */

/* No Login */
#wrap_wn .event-detail .playData .nologinArea{width: 100%; margin: 5% auto;}
#wrap_wn .event-detail .playData .nologinArea p{font-size: 1.3rem; font-weight: 700; margin: 5px 0; text-align: center;}

/* Event End */
#wrap_wn .event-detail .outline .event_endArea{text-align: center; font-size: 4rem; font-weight: 700; color: #6320a7; margin: 10px 0;}

/* Contents Howto */
#wrap_wn .event-detail .howto{}
#wrap_wn .event-detail .howto h3{margin-bottom: 25px;}
#wrap_wn .event-detail .howto p{font-size: 2.6rem; text-align: center; font-weight: 600; margin-bottom: 50px;}
#wrap_wn .event-detail .howto .flow{padding: 0; margin: 0;}
#wrap_wn .event-detail .howto .flow h4{margin: 0 0 30px;}
#wrap_wn .event-detail .howto .flow p{font-size: 2rem; line-height: 1.2; text-align: center; margin: 0; width: 320px; height: 60px; vertical-align: middle; display: table-cell;}
#wrap_wn .event-detail .howto .flow ul{width: 100%;}
#wrap_wn .event-detail .howto .flow ul:after{content: ""; clear: both; display: block;}
#wrap_wn .event-detail .howto .flow li{float: left; width: 31.3%; border: 3px solid #55320e; border-radius: 10px; background: #ece6dc; position: relative;}
#wrap_wn .event-detail .howto .flow li:nth-child(1){margin-right: 3%;}
#wrap_wn .event-detail .howto .flow li:nth-child(2){margin: 0;}
#wrap_wn .event-detail .howto .flow li:nth-child(3){margin-left: 3%;}
#wrap_wn .event-detail .howto .flow li:before,#wrap_wn .event-detail .flow li:after{content: ""; position: absolute; right: 0; left: 0; width: 0; height: 0; margin: auto;}
#wrap_wn .event-detail .howto .flow li:before{top: 134px; left: 300px; border-style: solid; border-color: transparent #55320e; border-width: 23px 0 23px 23px;}
#wrap_wn .event-detail .howto .flow li:after{top: 135px; left: 297px; border-style: solid; border-color: transparent #ece6dc; border-width: 22px 0 22px 22px; z-index: 10;}
#wrap_wn .event-detail .howto .flow li:last-child:before,#wrap_wn .event-detail .flow li:last-child:after{display: none;}
#wrap_wn .event-detail .howto .flow .Box{position: relative; padding: 10px;}
#wrap_wn .event-detail .howto .flow .Box .images{margin: 0; padding: 10px 0;}

/* Contents week_1 */
#wrap_wn .week_1{padding: 60px 0; margin: 0;}
#wrap_wn .week_1:before {content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 400%; margin: 0 -10% 0; background: url(../img/event/cpn_wannyan/common/wn_bg_02.jpg) repeat;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: 1;
}

/* Contents week_2 */
#wrap_wn .week_2{padding: 190px 0; margin: 0;}
#wrap_wn .week_2:before {content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 300%; margin: 0 -15% 0; background: url(../img/event/cpn_wannyan/common/wn_bg_03.jpg) repeat;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: 1;
}

/* Contents total */
#wrap_wn .total{padding: 50px 0 70px; margin: 0;}
#wrap_wn .total:before {content: ''; position: absolute; top: 0; left: 0; width: 150%; height: 200%; margin: 0 -10% 0; background: url(../img/event/cpn_wannyan/common/wn_bg_04.jpg) repeat;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: 1;
}
#wrap_wn .total .week{margin: 0 0 100px 0 !important;}
#wrap_wn .total .week:nth-last-of-type(1){margin: 0 !important;}
#wrap_wn .total h3{margin-bottom: 10px;}
#wrap_wn .total h4{margin: 0;}
#wrap_wn .total h4.list-On{margin: 0 0 50px;}
#wrap_wn .total h4.list-Off{margin: 0;}

/* Notice 共通 */
#wrap_wn .notice{padding: 7% 0; margin: 0 0;}
#wrap_wn .notice:before {content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 100%; margin: 0 -10% 0; background: url(../img/event/cpn_wannyan/common/wn_bg_01.jpg) repeat;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: 1;
}
#wrap_wn .notice h3{font-size: 34px; color: #492907; text-align: left; border-bottom: 2px solid #492907; font-weight: 600; margin-bottom: 25px; padding: 0 0 10px;}
#wrap_wn .notice ul{width: 100%;}
#wrap_wn .notice li{margin: 0 0 15px 25px; list-style: disc; line-height: 2.5rem;}
#wrap_wn .notice li:last-child{margin:  0 0 0 25px;}


/*responsive ==============================================================================*/
@media (max-width: 767px) {
/*smart phone*/
/*Event - Common*/
.sp_display{display:block !important;}
.pc_display{display:none !important;}
.share {margin:5% auto; position: static; text-align:right; z-index:10;}
.share .box-tbl {margin: 0 auto; max-width:60%;}
.share .box-tbl img {width:55px !important;}
.share .box-tbl .cell {text-align: center; padding:0 1%;}

/* Contents Common */
#wrap_wn .event-detail:first-of-type{padding: 0 0 8%; margin: 0 0 8%;}
#wrap_wn .event-detail .content-block{width: 90%; max-width: 768px;}
#wrap_wn .event-detail .content-block .week{padding: 5px;}
#wrap_wn .event-detail .content-block .week .itemList{border-radius: 0 0 5px 5px; padding: 20px 15px;}
#wrap_wn .event-detail .content-block .week .itemList ul{width: 100%; margin: 0 auto 10px;}
#wrap_wn .event-detail .content-block .week .itemList ul li{margin: 0 0 30px;}
#wrap_wn .event-detail .content-block .week .itemList .image{width: 100%; display: block; margin-bottom: 5px;}
#wrap_wn .event-detail .content-block .week .itemList .image .ptIcon{top: -5%; left: -4%; width: 20%;}
#wrap_wn .event-detail .content-block .week .itemList .image .reward{width: 25%; bottom: -5%; right: -5%;}
#wrap_wn .event-detail .content-block .week .itemList .image span{font-size: 36px;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots {bottom: -10px;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots li {height: 15px !important; width: 15px !important;}
#wrap_wn .event-detail .content-block .week .total_Item .slick-dots li button:before,#wrap_wn .event-detail .content-block .week .nyanWeek .slick-dots li button:before {width: 30px; height: 30px; font-size: 16px; line-height: 16px;}
#wrap_wn .event-detail .content-block .week .itemList .lead{display: block; width: 100%; font-size: 3rem; padding: 0;}
#wrap_wn .event-detail .content-block .week .itemList .lead span{font-size: 1.4rem; display: block; margin: 0;}
#wrap_wn .event-detail .content-block .week .itemList .lead span.name{font-size: 12px; margin: 0;}
#wrap_wn .event-detail .content-block .week .itemList .lead span.pro{margin: 0;}
#wrap_wn .event-detail .content-block .week .itemList .reward::before{top: 5%; right: -2%; position: absolute; padding: 12%;}

/* TotalItem */
#wrap_wn .event-detail .content-block .week .total_Item ul li{width: 100%; display: block; margin: 0 0 15px;}
#wrap_wn .event-detail .content-block .week .total_Item .image{width: 100%; display: block; margin: 0 0 15px;}
#wrap_wn .event-detail .content-block .week .total_Item .ptIcon{width: 20%; top: 1%; left: 1%;}
#wrap_wn .event-detail .content-block .week .total_Item .reward{width: 22%; top: 24%; right: 1%;}
#wrap_wn .event-detail .content-block .week .total_Item .lead{font-size: 20px; padding: 0;}
#wrap_wn .event-detail .content-block .week .total_Item .lead span{font-size: 14px; display: block; margin: 0 0 5px;}
#wrap_wn .event-detail .content-block .week .total_Item .lead span.name{font-size: 12px; margin: 0 0 10px;}
#wrap_wn .event-detail .content-block .week .total_Item .lead span.ruby{display: inline-block; font-size: 12px; margin: 0;}
#wrap_wn .event-detail .content-block .week .total_Item .lead span.pro{margin: 10px 0 0; padding: 0; font-size: 12px;}
#wrap_wn .event-detail .content-block .week .total_Item .reward::before{top: 63%; right: 0; position: absolute; padding: 55px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox h3{margin-bottom: 10px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox h3.seacret{margin-top: 0; margin-bottom: 0;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox p{font-size: 1.4rem; line-height: 1.6; margin: -5px 0 15px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox p span{font-size: 1.2rem; margin-top: 5px;}
#wrap_wn .event-detail .content-block .week .total_Item .leadBox hr{border-top: 3px dotted; margin: 15px 0;}
#wrap_wn .event-detail .content-block .week .title{border-bottom: 3px solid #753912; padding: 10px 0 15px;}
#wrap_wn .event-detail .content-block .week .title h3{width: 80%; margin: 0 auto 5px;}
#wrap_wn .event-detail .content-block .week .title p{font-size: 12px;}

/* Link */
#wrap_wn .boxLink {width: 100%; margin: 0 auto; max-width: 400px;}
#wrap_wn .boxLink a,#wrap_wn .boxLink a::before,#wrap_wn .boxLink a::after {font-size: 18px;}
#wrap_wn .perfect {max-width: 325px; display: block; margin: 0 auto 10px;}
#wrap_wn .perfect:last-of-type {margin: 0 auto;}
#wrap_wn .perfect a,#wrap_wn .perfect a::before,#wrap_wn .perfect a::after {width: 100%; max-width: 400px; margin: 0 auto; font-size: 1.4rem !important;}

/* Contents Introduction */
#wrap_wn .main-image{background: none;}
#wrap_wn .main-image .main-image_Area{min-height: auto; background-size: contain; padding: 53% 0 0;}

/* Contents Outline */
#wrap_wn .event-detail .outline {margin: 20px auto;}
#wrap_wn .event-detail .outline h3{margin: 0 0 15px;}
#wrap_wn .event-detail .outline p{font-size: 1.8rem;}
#wrap_wn .event-detail .outline span.l_blue{border-bottom: 2px dotted #83bee8;}
#wrap_wn .event-detail .outline span.l_pink{border-bottom: 2px dotted #f48eb5;}
#wrap_wn .event-detail .outline .date p{font-size: 1.6rem; margin: 0;}
#wrap_wn .event-detail .outline .date span{font-size: 1.2rem; padding: 2px 10px;}

/* Contents PlayerData */
#wrap_wn .event-detail .playData{margin-bottom: 20px;}
#wrap_wn .event-detail .playData .name{border: 3px solid #4e372d; padding: 12px 10px; width: 99%; margin: 0 auto; font-size: 16px !important; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#wrap_wn .event-detail .playData .name span{padding: 3px 5px; font-size: 1.1rem; margin: 0 5px 0 0; vertical-align: 1px;}
#wrap_wn .event-detail .playData .entryArea hr {border-bottom: 3px dotted #6a3906; margin: 10px 0;}
#wrap_wn .event-detail .playData .data ul{display: table; width: 100%; border-spacing: 2px;}
#wrap_wn .event-detail .playData .data ul li{border: 3px solid #4e372d; padding: 10px 6px;}
#wrap_wn .event-detail .playData .data p{font-size: 20px; line-height: 1.4;}
#wrap_wn .event-detail .playData .data span{font-size: 16px;}
#wrap_wn .event-detail .playData .data .data-ttl{font-size: 1.2rem; line-height: 1.5rem; margin: 0 0 5px;}
#wrap_wn .event-detail .playData .data-notice{font-size: 11px; margin: 5px 0 0 0;}
	
/* Return WanNyan
#wrap_wn .event-detail .playData .return{border-spacing: 2px;}
#wrap_wn .event-detail .playData .return .ribbon{top: -5px; left: -10px; transform: rotate(-15deg); padding: 0 3px; font-size: 1rem;}
#wrap_wn .event-detail .playData .return .ribbon:before {border-width: 11px 6px;}
#wrap_wn .event-detail .playData .return .ribbon:after {border-width: 11px 6px;}
#wrap_wn .event-detail .playData .return .none{background: #999; color: #666;}
#wrap_wn .event-detail .playData .return .none:before {border-color: #999; border-left-color: transparent;}
#wrap_wn .event-detail .playData .return .none:after {border-color: #999; border-right-color: transparent;}
#wrap_wn .event-detail .playData .return ul{display: table-cell; width: 33%; vertical-align: top;}
#wrap_wn .event-detail .playData .return ul:nth-child(3){display: table; width: 100%; height: 100%; border-collapse: separate; border-spacing: 0;}
#wrap_wn .event-detail .playData .return ul:nth-child(3) li{display: table-cell; vertical-align: middle;}
#wrap_wn .event-detail .playData .return ul li{margin-bottom: 5px;}
*/

/* No Login */
#wrap_wn .event-detail .playData .nologinArea p{font-size: 12px; margin: 5px 0 0;}

/* Event End */
#wrap_wn .event-detail .outline .event_endArea{font-size: 1.6rem;}

/* Contents Howto */
#wrap_wn .event-detail .howto h3{margin-bottom: 15px;}
#wrap_wn .event-detail .howto p{font-size: 1.6rem; margin-bottom: 20px;}
#wrap_wn .event-detail .howto .flow h4{margin: 0 auto 20px; width: 70%;}
#wrap_wn .event-detail .howto .flow p{font-size: 1.8rem; width: 100%; height: auto; display: block;}
#wrap_wn .event-detail .howto .flow li{float: none; width: 90%; max-width: 400px; border: solid 3px #55320e; min-height: 210px;}
#wrap_wn .event-detail .howto .flow li:nth-child(1){margin: 0 auto 10%;}
#wrap_wn .event-detail .howto .flow li:nth-child(2){margin: 0 auto 10%;}
#wrap_wn .event-detail .howto .flow li:nth-child(3){margin: 0 auto;}
#wrap_wn .event-detail .howto .flow li:before{top: 0; left: 0; bottom: -108.5%; border-style: solid; border-color: #55320e transparent; border-width: 18px 18px 0px 18px;}
#wrap_wn .event-detail .howto .flow li:after{top: 0; left: 0; bottom: -105%; border-style: solid; border-color: #ece6dc transparent; border-width: 19px 19px 0 19px; z-index: 10;}
#wrap_wn .event-detail .howto .flow .Box .images{margin: 0 auto; padding: 0; width: 80%;}

/* Contents week_1 */
#wrap_wn .week_1{padding: 10% 0; margin: 0;}
#wrap_wn .week_1:before {width: 150%; margin: 0;}

/* Contents week_2 */
#wrap_wn .week_2{padding: 15% 0; margin: 0;}
#wrap_wn .week_2:before {width: 150%; margin: 0 -25% 0;}

/* Contents total */
#wrap_wn .total .week{margin: 0 0 30px 0 !important;}
#wrap_wn .total{padding: 8% 0 11%; margin: 0;}
#wrap_wn .total:before {width: 150%; margin: 0;}
#wrap_wn .total h3{margin-bottom: 20px;}
#wrap_wn .total h4.list-On{margin: 0 0 25px;}
#wrap_wn .total h4.list-Off{margin: 0;}
#wrap_wn .total .secretItem{margin-bottom: 15px;}

/* Notice 共通 */
#wrap_wn .notice{padding: 12% 0; margin: 0 0;}
#wrap_wn .notice:before {width: 150%; margin: 0 -20% 0;}
#wrap_wn .notice h3{font-size: 24px; margin-bottom: 10px;}
#wrap_wn .notice li{margin: 0 0 10px 25px; font-size: 1.5rem; line-height: 1.5;}

}

@media (max-width: 560px) {/**/}
@media (max-width: 320px) {}
@media (min-width: 768px) and (max-width: 991px) {/*tablet*/}
@media (min-width: 992px) and (max-width: 1199px) {/* desk top */}
@media (min-width: 1200px) {/*desk top learge */}
@media (min-width: 768px) {/*sm~lg*/}

/*animated ==============================================================================*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}