@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 {
  height: 100%;
  font-size: 17px;
  background-color: #5ea6be;
  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: 0.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;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-size: cover;
}

#page_wrapper.wrapper {
  margin: 0 auto;
  width: 100%;
  height: auto;
  background-image: url(../images/bg_wrapper.webp);
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-size: 120%;
}

/*#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;
  flex: 1;
}

/*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: 0.3s ease-in-out;
  -webkit-transition: 0.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: 0.3s ease-in-out;
  -webkit-transition: 0.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: 10%;
  margin-left: 70%;
  -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: 0.5s ease-in-out;
  -webkit-transition: 0.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: 0.5s ease-in-out;
  -webkit-transition: 0.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%);
}

.character {
  position: absolute;
  width: 150%;
  transform: translate(-12%, 0%);
}

/*火焰效果*/
.fire {
  margin: 0 auto;
  width: 100%;
  max-width: 2000px;
  height: 100%;
  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 0.8s;
  -webkit-animation: titlezoomIn ease-in-out 0.8s;
  z-index: 2;
}

.title {
  width: 70%;
  max-width: 650px;
  position: relative;
  margin-top: 28%;
  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: 62.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 0.8s;
  -webkit-animation: titlezoomIn ease-in-out 0.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(-0.5rem);
}

/*浮動按鈕區*/
.btn_top_block {
  width: 100%;
  max-width: 1000px;
  position: fixed;
  bottom: 8rem;
  z-index: 999;
  animation: pageIn 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  -webkit-animation: pageIn 1s;
  -webkit-animation-delay: 0.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: 0.3s ease-in-out;
  -webkit-transition: 0.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: 0.3s ease-in-out;
  -webkit-transition: 0.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%)*/;
}

.mid_center img {
  filter: brightness(0.8) !important;
}

.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: 0.2rem 0.5rem.2rem 0;
}
.p_title_s5 img {
  width: 22%;
  height: auto;
  max-width: 134px;
  min-width: 134px;
  text-align: left;
  margin: 0.2rem 0.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: 0.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: 0.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: 0.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: 50%;
  /* 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: 0.3s ease-in-out;
  -webkit-transition: 0.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: #5ea6be;
  text-align: center;
  padding: 0.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: 0.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: 0.1rem 1rem;
  border: 1px solid black;
}
.p3_table_d {
  width: 50%;
}

.p3_table_b2,
.p3_table_b3 {
  height: auto;
  color: #fff;
  background-color: #5ea6be;
  text-align: center;
  padding: 0.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: 0.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: 0.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: #5ea6be;
  text-align: center;
  padding: 0.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: #5ea6be;
  text-align: center;
  padding: 0.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: #5ea6be;
  text-align: center;
  padding: 0.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: 0.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: 0.1rem 1rem;
  border: 1px solid black;
}

.p3_table_5_b,
.p3_table_5_b2,
.p3_table_5_e {
  height: auto;
  color: #fff;
  background-color: #5ea6be;
  text-align: center;
  padding: 0.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: 0.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: 0.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: #5ea6be;
  text-align: center;
  padding: 0.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: 0.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: 0.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: 1600px) {
  .BTN {
    padding-top: 55.5%;
  }
}
@media (max-width: 1025px) {
  .logo {
    margin-top: 1.5%;
  }
  .menu_com {
    top: 0.5%;
    right: 0.5%;
  }
  #scrolldiv1 {
    right: 0.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: 0.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% 100%;
  }
  .character {
    position: absolute;
    width: 150%;
    transform: translate(-15%, 22%);
  }
  .menu_com {
    width: 16%;
    margin-top: 1%;
    right: 3%;
  }
  .menu_download {
    width: 26.5%;
    height: 110px;
    margin-top: 25%;
  }
  .logo {
    width: 61%;
    margin-left: 0.5%;
  }

  .character01 {
    display: none;
  }
  .character02 {
    display: none;
  }
  .title_all {
    width: 132%;
    margin-left: -15%;
    margin-top: 41%;
  }
  .title {
    margin-top: 17%;
    margin-left: 14%;
  }
  .BTN {
    width: 100%;
    padding-top: 100%;
    margin-left: 0;
  }
  .b01,
  .b02,
  .b03 {
    width: 50%;
  }

  #scorolldiv1 {
    right: 0.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: 0.5rem;
  }
}

@media (max-width: 400px) {
  .span_break {
    display: inherit;
  }
}