@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
*{margin:0;
  padding:0;
  -webkit-box-sizing:border-box; /*Safari Chrome*/
  -moz-box-sizing:border-box; /*Firefox*/
  box-sizing:border-box; }

html ,body{ width: 100%; height: 100%; font-size: 17px; background-color:#040831 /*#000*/; font-family: "微軟正黑體", "新細明體", Helvetica, Verdana, sans-serif, Arial; color: #f1e8f7; text-align: center; line-height: 1.6rem;}

img{ width:100%; height:auto; font-size: 0;}
body>table:nth-of-type(1) img{width:initial;}
p{ /*text-indent: 2rem;*/ font-weight:bold; text-align: left; padding: .5rem 0; -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1));}
h4{ font-size: 15px; text-align: center; -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1));}
h5{ font-size: 15px; font-weight:bold; color: #d875f7; text-align: left; line-height:1.5rem;  -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1));}
a{ width:100%; height:auto; display: block; }
a:hover{ cursor:pointer;}



/*像素比例尺*/
.ruler{ height:18px; background:url(../images/ruler.png) no-repeat left top; position: fixed; top:0; right:0; bottom:0; left:0; z-index:9999; display:none;}
.clear{ height:0; clear:both; font-size:0em!important;}
/*---debug---*/
/**{outline: 1px solid red;}*/

.wrapper{
	margin: 0 auto;
	width: 100%;
	height: auto;
	background-image: url(../images/bg.png);
	background-repeat:no-repeat;
	background-position: center top;
	overflow: hidden;
}

/*#particles-js{
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
  }*/

.container{
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 1000px;
	position: relative;

}


/*LOGO+下方選單*/
.logo{ 
	width:38%; 
	height: auto;
	max-width:300px;
	position: absolute;
	/* margin-left: 31%; */
	margin-top: 0%;
	z-index: 99;
}

.logo img{ width:100%; transition:all 0.3s ease-out; /*chrome*/-webkit-transition:all 0.3s ease-out; /*firefox*/-moz-transition:all 0.3s ease-out;}
.logo img:hover{ filter:brightness(120%); transform:translateY(-1.5px);}

/*社群按鈕*/
.menu_com{  width:10%; height:auto; max-width: 96px; position:absolute; right: 0%; top: 0; z-index:99;}
.menu_com ul { width:100%; display: flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row ; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: flex-start; -ms-justify-content: flex-start;} 
.menu_com li{ width:50%; max-width: 48px; }
.btn_com01 a{ background:url(../images/btn_fb_a.png) no-repeat left top; background-size:cover; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.btn_com01 a:hover{ background:url(../images/btn_fb_a2.png) no-repeat left top; background-size:cover;}
.btn_com02 a{ background:url(../images/btn_gamer_a.png) no-repeat left top;  background-size:cover; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.btn_com02 a:hover{ background:url(../images/btn_gamer_a2.png) no-repeat left top; background-size:cover;}


/*下載按鈕*/
.menu_download { width: 20%; height:200px; max-width: 200px; background: url("../images/btn_dl-2.png") no-repeat left top; background-size:100% auto; position: absolute; margin-top: 38%; margin-left: 7.5%; -webkit-filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); z-index:99;}
.menu_download ul{ width:100%; display: flex; display:-ms-flexbox; flex-direction:column; -ms-flex-direction:column ; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: flex-start; -ms-justify-content: flex-start;}
.menu_download li{ width:100%; max-width: 200px; }
.btn_down01 a{ background:url(../images/btn_dl_download_a.png) no-repeat left top; background-size:cover; transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out;}
.btn_down01 a:hover{ background:url(../images/btn_dl_download_a2.png) no-repeat left top; background-size:cover; filter:brightness(110%)}
.btn_down02 a{ background:url(../images/btn_dl_id_a.png) no-repeat left top; background-size:cover; transition: .5s ease-in-out; -webkit-transition: .5s ease-in-out;}
.btn_down02 a:hover{ background:url(../images/btn_dl_id_a2.png) no-repeat left top; background-size:cover; filter:brightness(110%);}


.character01{
	width: 80.1%;
	max-width: 801px;
	position: absolute;
	margin-top: 5.5%;
	margin-left: 46%;
	animation: fadeInRightBig 1s;
	-webkit-animation:  fadeInRightBig 1s;
	z-index: 1;

}


.character02{
	width: 81.4%;
	max-width: 864px;
	position: absolute;
	margin-top: 9%;
	margin-left: -30.5%;
	animation: fadeInLeftBig 1s;
	-webkit-animation: fadeInLeftBig 1s;
	z-index: 1;
}

/*火焰效果*/
.fire{
	margin: 0 auto;
	width: 100%;
	max-width: 2000px;
	height: auto;
	position:absolute;
	margin-top: 0; 
	margin-left: 0; 	
	z-index: 3;
	mix-blend-mode: screen; 
	pointer-events: none;
	overflow: hidden;
}


/*主標*/
.title_all{
	width: 100%;
	position: absolute;
	margin-top: 0%;
	margin-left: 0%;
	animation: titlezoomIn ease-in-out .8s;
    -webkit-animation: titlezoomIn ease-in-out .8s;
	z-index: 2;

}

.title{
	width: 70%;
	max-width: 650px;
	position: relative;
	margin-top: 12%;
	margin-left: 15%;
}

.zoomIn-slogan {
    animation: 0.6s bounceOut2 0.3s forwards ease-out;
	-webkit-animation: 0.6s bounceOut2 0.3s forwards ease-out;
    opacity: 0;
}

/*-----------主選單---------*/
.BTN{ margin: 0 auto; width:100%; height: auto; position: relative; padding-top:55.5%; padding-bottom:3%; z-index: 98; display: flex; list-style-type: none;}
.BTN ul{ width: 100%; display: flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row ; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: center; -ms-justify-content: center; }

.b01, .b02, .b03{ width:33%; max-width: 322px; position: relative; animation: titlezoomIn ease-in-out .8s; -webkit-animation: titlezoomIn ease-in-out .8s;}

.b01 a, .b02 a, .b03 a{ width:100%; height: auto; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; }
.b01 a{ background: url("../images/btn_01_a-2.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99; }
.b02 a{ background: url("../images/btn_02_a-2.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.b03 a{ background: url("../images/btn_03_a-2.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}

.b01 a:hover, .b01 a.hold, .b02 a:hover, .b02 a.hold, .b03 a:hover, .b03 a.hold{filter:brightness(120%);transform:translateY(-.5rem);}


/*浮動按鈕區*/
.btn_top_block{ width:100%;  max-width: 1000px; position:fixed; bottom:8rem; z-index: 999; animation: pageIn 1s; animation-delay: .5s; animation-fill-mode: both; -webkit-animation: pageIn 1s; -webkit-animation-delay: .5s; -webkit-animation-fill-mode: both; }

#scrolldiv1{ position: absolute; right: -2%; }
.btn_top_block ul { width:100%; display: flex; display:-ms-flexbox; flex-direction:column; -ms-flex-direction:column ; flex-wrap: nowrap; -ms-flex-wrap: nowrap; justify-content: flex-start; -ms-justify-content: flex-start;} 
.btn_top_block li{ width:100%; height: auto; max-width: 44px;}
.btn_top a{ background:url(../images/btn_top_a.png) no-repeat left top; background-size:cover; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.btn_top a:hover{ background:url(../images/btn_top_a2.png) no-repeat left top; background-size:cover;}
.btn_home a{ background:url(../images/btn_home_a.png) no-repeat left top; background-size:cover; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.btn_home a:hover{ background:url(../images/btn_home_a2.png) no-repeat left top; background-size:cover;}


/*內頁框架*/
.content{ width: 100%; height: auto; max-width:1000px; margin:0 auto; position: relative; z-index:99; animation: pageIn 1s; -webkit-animation: pageIn 1s;}
.content_text{
	margin: 0 auto;
	width: 78%; 
	height: auto; 
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack:center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
}

.mid_top, .mid_bottom{ width: 100%; height: auto; filter: brightness(1.2) saturate(110%) /*contrast(90%)*/;} 
.mid_top img:nth-of-type(2){ display:none;}
.mid_bottom img:nth-of-type(2){ display:none;}
.mid_center{ width: 100%; height: auto; background: url(../images/mid_center.png) repeat-y center top; background-size: 100%; filter: brightness(1.2) saturate(110%)/*contrast(90%)*/;}
.p_title{ margin: 0 auto; width: 100%; height: auto; max-width: 700px; padding-bottom: 1rem; }
.p_title img:nth-of-type(2){ max-width: 650px; display:none;}

.p_title_s6{width: 100%; height: auto; max-width: 111px; text-align:left;}
.p_title_s7{width: 100%; height: auto; max-width: 148px; text-align:left;}

.p_title_s3, .p_title_s4, .p_title_s5{
	margin: 0 auto; 
	width: 100%; 
	height: auto;
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:flex-start;/*for all browser*/
	-ms-flex-pack: start;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
}
.p_title_s3 img, .p_title_s4 img{width: 22%; height: auto; max-width: 118px; min-width: 118px; text-align:left; margin: .2rem .5rem.2rem 0;}
.p_title_s5 img{width: 22%; height: auto; max-width: 134px; min-width: 134px; text-align:left; margin: .2rem .5rem.2rem 0;}
.p_title_s3 p{ margin: 0 auto; text-align:center; text-indent: 2rem;  padding: 0 0 ; }
.p_title_s4 p{ text-align: left; text-indent: 0rem; margin-top: .5rem; padding: 0 0; }


/*內頁文案*/
.p_txt{ width: 100%; height: auto; margin: 0 auto; padding-bottom: 2rem;}
.p_txt2{ width: 100%; height: auto; margin: 0 auto;padding-bottom: 2rem;}
span{ color: #d875f7; text-align: center; line-height: 1.8rem; }
.span_date{ color: #f1e8f7;font-size:1.1rem;}
.span_red{ color: #e21a1a;}
.span_lightblue{ color: #61efe5;}
.span_blue{ color: #0c5fc7;}
.span_break{ color: #000;}


.date{	
	width: 100%; 
	height: auto; 
	margin: 0 auto;
	-webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); 	
}

.date_2{	
	width: 75%; 
	height: auto; 
	margin: 0 auto; 
	margin: .6rem 0 0 0;
	text-align:left;	
	-webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 1));
}

.date_a{ width:9rem; height:auto; white-space:nowrap; display:inline; font-size: 18px; color: #ff584b; line-height: 1.8rem; font-weight: bold;}
.date_b{ width:14rem; height:auto;  white-space:nowrap; display:inline; font-family: Arial; font-size: 23px; color: #f1e8f7; line-height: 1.8rem; font-weight: bold;}
.date_c{ width:11rem; height:auto;  white-space:nowrap; display:inline; font-family: Arial; font-size: 23px; color: #f1e8f7; line-height: 1.8rem; font-weight: bold;}

/*p1*/
.p1_im_01{ width:100%; height: auto; max-width: 670px; margin: 0 auto;}
.p1_p{ width:70%; height: auto; margin:0 auto;}
.p_txt_rows{ 
	width: 100%; 
	height: auto; 
	margin: 0 auto; 	
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack: center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	padding-bottom: 1rem;
}


/*p2*/
.p2_im_01{ width:30%; height: auto; max-width: 227px; margin: 0 auto; margin: 1rem 1rem;}
.p2_txt{ padding-left: 1.5rem;}
.p2_txt h1{ font-weight:bold; color:#d75817; text-align: left; margin-top: 1rem;}
.p2_txt p{ text-indent: 0rem; padding: 0 0;}


.item01_txt, .item02_txt, .item03_txt{ margin: 0 auto; width: 100%; height: auto; padding-left: 1rem; padding-bottom: .3rem;}
.item01_txt ol, .item02_txt ol{ list-style-type: decimal; width: 100%; height: 100%;}
.item03_txt ol{ list-style-type: disc; width: 100%; height: 100%;}
.item01_txt li, .item02_txt li, .item03_txt li{ font-weight:bold; text-align: left; }
.item01_txt{margin-top: 1rem;}


/*---側選單 p2---*/
.p2_btn{ margin: 0 auto; width:100%; height: auto; position: relative; padding-bottom:1rem;-webkit-filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); z-index:99;}
.p2_btn ul{ width: 100%; display: flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row ; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: center; -ms-justify-content: center;}

.p2_btn_1, .p2_btn_2, .p2_btn_3, .p2_btn_4, .p2_btn_5, .p2_btn_6, .p2_btn_7, .p2_btn_8{ width:25%; max-width: 204px; position: relative; }
.p2_btn_1 a, .p2_btn_2 a, .p2_btn_3 a, .p2_btn_4 a, .p2_btn_5 a, .p2_btn_6 a, .p2_btn_7 a, .p2_btn_8 a{ width:100%; height: auto; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; }
.p2_btn_1 a{ background: url("../images/p2_btn_1.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99; }
.p2_btn_2 a{ background: url("../images/p2_btn_2.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_3 a{ background: url("../images/p2_btn_3.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_4 a{ background: url("../images/p2_btn_4.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_5 a{ background: url("../images/p2_btn_5.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_6 a{ background: url("../images/p2_btn_6.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_7 a{ background: url("../images/p2_btn_7.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p2_btn_8 a{ background: url("../images/p2_btn_8.png")no-repeat top; background-size:cover; }

.p2_btn_1 a:hover, .p2_btn_2 a:hover, .p2_btn_3 a:hover, .p2_btn_4 a:hover, .p2_btn_5 a:hover, .p2_btn_6 a:hover, .p2_btn_7 a:hover, .p2_btn_8 a:hover{transform:translateY(-1.5px);}
.p2_btn_1 a:hover, .p2_btn_1 a.hold,
.p2_btn_2 a:hover, .p2_btn_2 a.hold,
.p2_btn_3 a:hover, .p2_btn_3 a.hold,
.p2_btn_4 a:hover, .p2_btn_4 a.hold,
.p2_btn_5 a:hover, .p2_btn_5 a.hold,
.p2_btn_6 a:hover, .p2_btn_6 a.hold,
.p2_btn_7 a:hover, .p2_btn_7 a.hold,
.p2_btn_8 a:hover, .p2_btn_8 a.hold{ filter: brightness(1.2) contrast(150%);}

/*p3*/
/*---側選單 p3---*/
.p3_btn{ margin: 0 auto; width:100%; height: auto; position: relative; padding-bottom:1rem; -webkit-filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); z-index:99;}
.p3_btn ul{ width: 100%; display: flex; display:-ms-flexbox; flex-direction:row; -ms-flex-direction:row ; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: center; -ms-justify-content: center;}

.p3_btn_1, .p3_btn_2, .p3_btn_3{ width:33%; max-width: 237px; position: relative; }
.p3_btn_1 a, .p3_btn_2 a, .p3_btn_3 a{ width:100%; height: auto; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; }
.p3_btn_1 a{ background: url("../images/p3_btn_1_a.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99; }
.p3_btn_2 a{ background: url("../images/p3_btn_2_a.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}
.p3_btn_3 a{ background: url("../images/p3_btn_3_a.png")no-repeat top; background-size:cover; position:relative; top:0%; left:0; z-index: 99;}

.p3_btn_1 a:hover, .p3_btn_2 a:hover, .p3_btn_3 a:hover{transform:translateY(-1.5px);}
.p3_btn_1 a:hover, .p3_btn_1 a.hold,
.p3_btn_2 a:hover, .p3_btn_2 a.hold,
.p3_btn_3 a:hover, .p3_btn_3 a.hold{ filter: brightness(1.2) contrast(150%);}



.table2{ 
	margin: 0 auto; 
	width: 100%; 
	height:auto;
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack:center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	font-size: 16px;
}

.p3_table_2{ 
	width: 70%; 
	height: auto; 
	margin: 0 auto; 
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack:center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	padding: 1rem 0;
}

.btn_store{ margin: 0 auto; width:30%; max-width:170px; height:auto; z-index:90;}
.btn_store a{ width: 100%; max-width:165px; height:auto;  background:url(../images/btn_store_a.png) no-repeat left top; background-size: cover; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;filter: brightness(80%) contrast(100%);}
.btn_store a:hover{ background:url(../images/btn_store_a2.png) no-repeat left top; background-size: cover; background-position:0 -2px; }

.p3_table_3{ 
	width: 100%; 
	height: auto; 
	margin: 0 auto; 
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack: center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	padding: 1rem 0;
}

.p3_table_4{ 
	width: 100%; 
	height: auto; 
	margin: 0 auto; 
	display: flex;/*for all browser*/
	display:-ms-flexbox;/*for ie10*/
	flex-direction: row;/*for all browser*/
	-ms-flex-direction:row;/*for ie10*/
	justify-content:center;/*for all browser*/
	-ms-flex-pack: center;/*for ie10*/
	flex-wrap: wrap; 
	-ms-flex-wrap: wrap;
	padding: 1rem 0;
}

.p3_table_b{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_b{ width: 50%;}
.p3_table_c{ height: auto;  font-weight: bold; color: #000000; background-color: #fff; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_c{ width: 50%;}
.p3_table_d{ height: auto;  font-weight: bold; color: #000000; background-color: #efe0fa; text-align: center; padding: .1rem 1rem; border: 1px solid black;}
.p3_table_d{ width: 50%;}

.p3_table_b2, .p3_table_b3{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .4em 1rem; border: 1px solid black;}
.p3_table_c2, .p3_table_c3{ height: auto;  font-weight: bold; color: #000000; background-color: #fff; text-align: center; padding: .4em 1rem; border: 1px solid black;}
.p3_table_d2, .p3_table_d3{ height: auto;  font-weight: bold; color: #000000; background-color: #efe0fa; text-align: center; padding: .4rem 1rem; border: 1px solid black;}
.p3_table_b2, .p3_table_c2, .p3_table_d2{ width: 30%;}
.p3_table_b3, .p3_table_c3, .p3_table_d3{ width: 70%;}

.p3_table_b4{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_b4, .p3_table_c4, .p3_table_d4{ width: 20%;}
.p3_table_b5{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_b5, .p3_table_c5, .p3_table_d5{ width: 60%;}
.p3_table_b6{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_b6, .p3_table_c6, .p3_table_d6{ width: 20%;}
.p3_table_c4, .p3_table_c5, .p3_table_c6{ height: auto;  font-weight: bold; color: #000000; background-color: #fff; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_d4, .p3_table_d5, .p3_table_d6{ height: auto;  font-weight: bold; color: #000000; background-color: #efe0fa; text-align: center; padding: .1rem 1rem; border: 1px solid black;}

.p3_table_5_b, .p3_table_5_b2, .p3_table_5_e{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_5_c, .p3_table_5_c2, .p3_table_5_e2{ height: auto;  font-weight: bold; color: #000000; background-color: #fff; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_5_d, .p3_table_5_d2{ height: auto;  font-weight: bold; color: #000000; background-color: #efe0fa; text-align: center; padding: .1rem 1rem; border: 1px solid black;}
.p3_table_5_b, .p3_table_5_c, .p3_table_5_d{ width: 25%;}
.p3_table_5_b2, .p3_table_5_c2, .p3_table_5_d2{ width: 75%;}
.p3_table_5_e, .p3_table_5_e2{ width: 100%;}

.p3_table_6_b, .p3_table_6_b2{ height: auto;  color: #fff; background-color: #736c9a; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_6_c, .p3_table_6_c2{ height: auto;  font-weight: bold; color: #000000; background-color: #fff; text-align: center; padding: .1em 1rem; border: 1px solid black;}
.p3_table_6_d, .p3_table_6_d2{ height: auto;  font-weight: bold; color: #000000; background-color: #efe0fa; text-align: center; padding: .1rem 1rem; border: 1px solid black;}
.p3_table_6_b, .p3_table_6_c, .p3_table_6_d{ width: 35%;}
.p3_table_6_b2, .p3_table_6_c2, .p3_table_6_d2{ width: 65%;}


.item02_txt a, .item03_txt a{ display: inline; }

.p3_im_01{max-width: 180px; margin: 1rem 1rem; -webkit-filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1)); filter: drop-shadow( 0px 1px 1px rgba(0, 0, 0, 1));}




@media (max-width:1025px){
	.logo{
		margin-top: 1.5%;
	}
	.menu_com{
		top: .5%;
		right: .5%;
	}
	#scrolldiv1{
		right: .5%;
	}
	.title{
		margin-top: 17%;
		margin-left: 18%;
	}
	.menu_download{
		margin-top:44%;
	}
	.BTN{
		display: flex;
		padding-top: 62.5%;
		padding-bottom: 0;
	}
	.b01, .b02, .b03{
		list-style-type: none;
	}
	.character01{
		margin-left: 40%;
	}
	.character02{
		margin-left: -22.5%;
	}
}


@media (max-width:1000px){
	.wrapper{ background: url(../images/bg_l.png) no-repeat center top / 100% auto; }
	.bird_left, .bird_right{display: none;}

	#scrolldiv1{ right: 2.5%; }
}

@media (max-width:950px){
	.p3_table_4{ width: 100%;}

}


@media (max-width:700px){

	.date_a{ width:100%; display:block;}
    .date_b{ width:100%; display:inline;}
    .date_c{ width:100%; display:inline;}

	.date_2{	
		width: 100%; 
		height: auto; 
		margin: 0 auto; 
		margin: .6rem 0 0 0;
		text-align: center;	
	}

	.p3_table_2{ width: 100%;}
	.btn_store{width:100%; }




}


@media (max-width:640px){
	.wrapper{ background: url(../images/bg_s.png) no-repeat center top / 100% auto; }

	.menu_com{width: 16%; margin-top:1%; right: 3%;}
	.menu_download{width: 26.5%; max-width: 110px; height: 110px; margin-top:115%; /*right: 1%;*/}
	.logo{width: 61%; margin-left:.5%;}


	.character01{display: none;}
	.character02{display: none;}
	.title_all{width: 132%; margin-left: -15%; margin-top: 41%;}
	.title{ margin-top: 25%;}

	.BTN{width: 100%; padding-top:140%; margin-left: 0; }
	.b01, .b02, .b03{ width:50%; }

	#scorolldiv1{ right: .5rem; }

	.content_text{width: 80%;}
	.mid_top img:nth-of-type(1){ display:none;}
	.mid_top img:nth-of-type(2){ display:block;}
	.mid_bottom img:nth-of-type(1){ display:none;}
	.mid_bottom img:nth-of-type(2){ display:block;}
	.mid_center{ width: 100%; height: auto; background: url(../images/mid_center_s.png) repeat-y center top; background-size: 100%;}
	
	.p_title img:nth-of-type(1){display:none;}
	.p_title img:nth-of-type(2){ display:block;}

	.menu_com{
		top: 0;margin-top: 3%;
	}
	.p2_btn_1, .p2_btn_2, .p2_btn_3, .p2_btn_4, .p2_btn_5, .p2_btn_6, .p2_btn_7,.p2_btn_8, .p3_btn_1, .p3_btn_2, .p3_btn_3{ width:50%;}
	.p2_im_txt{ width: 90%;}
	.p2_txt{ padding: 0rem;}


}


@media (max-width:550px){
	.date_2{	
		text-align: left;
		margin-left: .5rem;
	}
}



@media (max-width:400px){

	.span_break{ display:inherit;}


}