@charset "UTF-8";

html,
body {
  text-align: left;
  text-decoration: none;

}

body {

  -webkit-font-smoothing: antialiased;
  background: -webkit-linear-gradient(left, rgba(0, 0, 181, 1) 0%, rgba(36, 187, 210, 1) 50%, rgba(0, 0, 181, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 181, 1) 0%, rgba(36, 187, 210, 1) 50%, rgba(0, 0, 181, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: url(../img/common/basebacklogo.png);
  background-repeat: no-repeat;
  background-position: center top 58%;
  background-attachment: fixed;
}

@media screen and (min-width:320px) and (max-width:768px) {
  #wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: none;


  }
}


@-ms-viewport {
  width: auto;
  initial-scale: 1
}

@viewport {
  width: device-width;
  initial-scale: 1
}

/*FONT
------------------------------ */

p {
  font-family: 'Noto Sans Japanese', sans-serif;
}


/*INNER
------------------------------ */

.contents_inner {
  position: relative;
  width: 960px;
  height: auto;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width:320px) and (max-width:768px) {
  .contents_inner {
    position: relative;
    padding: 0 2% 0 2%;
    text-align: justify;
    width: 100%;
    margin-left: auto;
    margin-right: auto
  }
}

.alpha a:hover img {
  opacity: .9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)"
}

.pageTop {
  position: fixed;
  margin-bottom: 5px;
  right: 30px;
  z-index: 9500;
  cursor: pointer
}

@media screen and (min-width:320px) and (max-width:768px) {
  .pageTop {
    position: fixed;
    margin-bottom: 5px;
    right: 30px;
    z-index: 9500;
    cursor: pointer
  }
}


/*CLEARFIX
------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden
}

.clearfix {
  min-height: 1px
}

.wdt100 {
  width: 100%
}


@media screen and (min-width:320px) and (max-width:768px) {
  .rspsv {
    width: 100%
  }
}


/*BOX
------------------------------ */

.rightbox {
  float: right;
  height: auto
}

.leftbox {
  float: left;
  height: auto
}

@media screen and (min-width:320px) and (max-width:768px) {
  .rightbox {
    float: none;
    height: auto
  }

  .leftbox {
    float: none;
    height: auto
  }
}


/*TRIGGER
------------------------------ */


#trigger1 {
  position: absolute;
  margin-top: 50px;
  right: 0;
}

#trigger2 {
  position: absolute;
  margin-top: 50px;
  right: 0;
}

#trigger3 {
  position: absolute;
  margin-top: 50px;
  right: 0;
}

#trigger3 {
  position: absolute;
  margin-top: 50px;
  right: 0;
}



/*MAIM CONTENTS
------------------------------ */

.section_a {
  position: relative;
  padding-top: 0;
  width: 100%;
  margin: 0 auto;
  min-width: 960px;
  border-bottom: 5px solid #fff;
  height: 609px;


}

.moviebtn {
  position: relative;
  text-align: center;
  width: 257px;
  height: 55px;
  margin: 40px auto;
  z-index: 1000;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}

.button {
  outline: none;
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button:hover {
  background-color: rgba(150, 150, 100, 0.6);
}

.btntextarea {
  position: absolute;
  margin: 9pt auto;
  left: 0;
  right: 0;
  font-family: 'Times New Roman', sans-serif;
  letter-spacing: 0.1em;
  font-size: 15pt;
  font-weight: 500;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


.snklogo {
  position: absolute;
  left: 30px;
  bottom: 15px;
  z-index: 200;
}

.credit {
  position: relative;
  color: #fff;
  font-weight: 500;
  text-align: center;
  z-index: 100;
}

.sns {
  position: absolute;
  right: 30px;
  bottom: 20px;
  z-index: 1100;
}

.sns li {
  float: left;
  margin-left: 15px;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url(../img/loading.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 3000;
}



.header {
  position: fixed;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  z-index: 1200;
}

.globalnavi {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  transform: skewX(-5deg);
  font-size: 12pt;
  margin-top: 8px;
  margin-left: 20px;
  color: #fff;
  z-index: 1280;
}

.globalnavi ul li {
  float: left;
  margin-right: 15px;
}

.globalnavi ul li a:link {
  color: #fff;
}

.globalnavi ul li a:visited {
  color: #fff;
}

.globalnavi ul li a:hover {
  text-decoration: underline;
  color: #fbb03b;
}

.sociallist {
  position: absolute;
  margin-top: 10px;
  right: 20px;
  z-index: 600;
}

.sociallist li {
  float: left;
  margin-left: 3px;
}

.sociallist li:nth-child(4) {
  margin-left: 10px;
}


.topvideowrpinner {
  position: absolute;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  min-width: 960px;
}

#topvideo {
  position: absolute;
  top: -10%;

}



.section_b {
  position: relative;
  border-top: 0px solid #fff;
  height: auto;
  min-width: 900px;

}

.videowrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-width: 1200px;
  z-index: 195;
}

.dotback {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../img/common/09.png);
  opacity: 0.5;
  z-index: 180;
}


.videowrp_grad {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(-45deg, rgba(8, 83, 204, 0.8) 1%, rgba(255, 0, 0, 0.8) 55%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(8, 83, 204, 0.8) 1%, rgba(255, 0, 0, 0.8) 55%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: 192;
}

.sec_a_chara {
  position: absolute;
}

.chara_mai {
  bottom: 275px;
  right: 150px;
  z-index: 198;
}

.videowrp_all {
  position: relative;
  margin-top: 0;
  height: 602px;
  z-index: 150;
  overflow: hidden;

}

.chara_ioriandterry {
  bottom: 15px;
  right: -25px;
  z-index: 198;
}

.chara_kyo {
  bottom: 0px;
  right: 0;
  z-index: 198;
}

.fireobje {
  bottom: -10px;
  right: -50px;
  z-index: 205;
}

.titlogo {
  position: absolute;
  z-index: 305;
}

.titlogo2 {
  z-index: 304;
}

.titlogo3 {
  z-index: 303;
}

.titlogo4 {
  z-index: 300;
}

.titlogowrp {
  position: absolute;
  margin-top: 55px;
  z-index: 500;
}

.headcopy {
  margin-top: 20px;
  right: 150px;
  z-index: 1850;
}

.sec_a_obje {
  position: absolute;
}

.moviepromo {
  margin-top: 330px;
  left: 0px;
  z-index: 401;
}

.naviyuri {
  margin-top: 290px;
  left: -135px;
  z-index: 300;
}

.naviyuriserif {
  position: absolute;
  margin-top: -20px;
  margin-left: -17px;
}

.featurebtn {
  top: 340px;
  left: 220px;
  z-index: 1150;
}

.featurebtn li {
  float: left;
  margin-right: -25px;
}

.featurebtn li:nth-child(3) {
  margin-right: -200px;

}


.howtopict {
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 400;
}

.newswrp {
  position: relative;
  margin-left: 30px;
  padding: 20px 20px;
  width: 960px;
  margin: -98px auto;
  left: 0;
  right: 0;
  height: auto;
  background: rgba(0, 0, 30, 0.9);
  border: 5px solid #fff;
  z-index: 1100;

}

.newslistbtn {
  position: absolute;
  color:#fff;
  font-size: 8pt;
  font-weight: 600;
  right:0.5%;
  z-index: 200;
  cursor: pointer;
}
.newslistbtn a:link {
  color:#fff;
}
.newslistbtn a:visited {
  color:#fff;
}

.newswrp_border {
  overflow: hidden;
  background: transparent;
}

.newswrp_inner {
  position: relative;
  height: auto;
  padding: 20px 15px;
}

.tag {
  font-weight: 600;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  width: 77px;
  height: auto;
  color: #fff;
  font-size: 85%;
}

.tag_update {
	background-color: #f15a24;
}

.tag_notice {
	background-color: #176d9c;
}

.tag_campaign {
	background-color: #978012;
}

.tag_event {
	background-color: #af671a;
}

.tag_gacha {
	background-color: #a11c71;
}

.tag_maintenance {
	background-color: #5a1297;
}

.tag_important {
	background-color: #9e3219;
}

.tag_sof {
	background-color: #ff00ff;
}

.textarea_m {
  font-size: 11pt;

}

.textarea_mm {
  font-size: 12pt;

}

.textarea_s {
  font-size: 9pt;

}

.textarea_md {
  margin-top: -15px;
  font-size: 14pt;

}

.newslisttext {
  font-weight: 600;
  color: #fff;
}

.newslisttext a, a:hover, a:focus {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.newswrp_left {
  position: relative;
  width: 600px;
}

.newswrp_right {
  position: relative;

  width: 280px;
  height: auto;
}

.twwrp {
  position: relative;
  margin-top: 0;
  width: 265px;
  height: 165px;
  overflow: hidden;
  right: -10px;

}

.newslilst {
  overflow-Y: scroll;
  height: 155px;
}

.newslilst li {
  margin-bottom: 13px;
}


::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #222;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: #666
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #333;
}



.textarea_e {
  font-family: 'Oswald', sans-serif;
  transform: skewX(-5deg);

}

.newswrp_left_newstit {
  font-size: 14pt;
  margin-top: 0px;
  margin-left: 8px;
  padding-bottom: 5px;
  margin-bottom: 15px;
  color: #fff;
  border-bottom: 1px solid #fff;
  z-index: 197;
}


.charawrp {
  position: relative;
  margin-top: 0;
  max-width: 1560px;
  z-index: 400;
  transition: .3s;
}


.footer {
  position: relative;
  padding-top: 30px;
  height: auto;
  padding-bottom: 50px;
  width: 100%;
  min-width: 640px;
  z-index: 1400;
  background-color: rgba(0, 0, 0, 0.8);
}





@media screen and (min-width:320px) and (max-width:768px) {
  .header {
    position: fixed;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    z-index: 2500;
  }

  .sociallist {
    position: absolute;
    width: 450px;
    margin-top: 10px;
    right: 0;
    z-index: 600;
  }

  .sociallist li {
    float: left;
    margin-left: 2%;
  }

  .sociallist li:nth-child(1) {
    width: 22%;
    margin-left: 2%;
  }

  .sociallist li:nth-child(2) {
    width: 8%;
    margin-left: 2%;
  }

  .sociallist li:nth-child(3) {
    width: 8%;
    margin-left: 3%;
  }

  .sociallist li:nth-child(4) {
    width: 23%;
    margin-left: 3%;
  }

  .sociallist li:nth-child(5) {
    width: 23%;
    margin-left: 2%;
  }





  .howtopict {
    position: fixed;
    top: 0;
    width: 15%;
    left: 0;
    z-index: 1400;
  }

  .headcopy {
    position: relative;
    right: inherit;
    width: 90%;
    margin: -5% auto;

    z-index: 1850;
  }

  .titlogowrp {
    position: relative;
    margin: 7% auto;
    margin-bottom: 0;
    width: 90%;
    height: auto;
    z-index: 500;
  }

  .titlogo {
    position: relative;
    margin-top: -54.5%;
    z-index: 305;
  }

  .sec_a_obje {
    position: relative;
  }

  .titlogo2 {
    z-index: 304;
  }

  .titlogo3 {
    z-index: 303;
    margin-top: -54%;
  }

  .titlogo4 {
    z-index: 300;
  }


  .videowrp_all {
    position: relative;
    margin-top: 0;
    height: auto;
    z-index: 50;
    overflow: hidden;
  }


  .featurebtn {
    position: relative;
    top: 0px;
    left: 0;
    z-index: 1150;
  }

  .featurebtn li {
    float: left;
    margin-right: -2%;
    width: 35%;
  }

  .featurebtn li:nth-child(3) {
    margin-right: -200px;

  }

  .newslisttext {
    font-weight: 600;
    color: #fff;
    font-size: 12pt;
  }

  .newswrp_left {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .newslilst {
    overflow-Y: scroll;
    height: 155px;
    width: 100%;
    margin: 0 auto;
  }

  .newslilst li {
    margin-bottom: 13px;
  }

  .newswrp_right {
    position: relative;
    margin-top: 6%;
    width: 100%;
    height: auto;
    z
  }


  .section_b {
    position: relative;
    border-top: 0px solid #fff;
    height: auto;
    min-width: 100%;
    width: 100%;

  }

  .newswrp {
    position: relative;
    margin-left: 0;
    padding: 35px 30px;
    width: 90%;
    margin: -2% auto;
    left: 0;
    right: 0;
    height: auto;
    background: rgba(0, 0, 30, 0.9);
    border: 5px solid #fff;
    z-index: 1100;

  }
  .newslistbtn {
    position: absolute;
    color:#fff;
    font-size: 13pt;
    font-weight: 600;
    right:0.5%;    
    z-index: 200;
    cursor: pointer;
  }
  .newslistbtn a:link {
    color:#fff;
  }
.newslistbtn a:visited {
  color:#fff;
}
  .section_a {
    position: relative;
    min-width: 100%;
    width: 100%;
    height: auto;
    padding-top: 23%;
    border-bottom: none;
    margin-bottom: 0;
  }

  .sns {
    position: relative;
    left: 0;
    right: 0;
    width: 110px;
    margin: 0 auto;
    bottom: 90px;
    z-index: 1100;
  }

  .sns li {
    float: left;
    width: 30px;
    margin-left: 15px;
  }


  .snklogo {
    left: 0;
    right: 0;
    text-align: center;
    bottom: 40px;
    z-index: 200;
  }

  .footer {
    position: relative;
    padding-top: 30px;
    height: auto;
    padding-bottom: 50px;
    width: 100%;
    min-width: 100%;
    z-index: 1400;
    background-color: rgba(0, 0, 0, 0.8);
  }

}



@media screen and (min-width:320px) and (max-width:768px) {
  
  .twwrp {
    position: relative;
    margin-top: 5%;
    width: 95%;
    height: 365px;
    overflow:auto;
-webkit-overflow-scrolling:touch;
    right: 0;
    margin: 0 auto;
    z-index: 500;

  }

  .charawrp {
    position: relative;
    margin-top: 0;
    max-width: 50%;
    z-index: 400;
    transition: .3s;
  }
}



.mvp {
  margin-top: 20px;
  margin-left: 4px;
}

.gamedetail {
  margin-top: 50px;
  margin-left: 175px;
  z-index: 400;
}

.cattag {
  position: relative;
  text-align: center;
  z-index: 1800;
  width: 404px;
  margin: 95px auto;

}

.catshadow2 {
  position: relative;
  margin-top: -140px;
  text-align: center;
  z-index: 100;

}

.sec_c_aboutslide_slidebase {
  position: relative;
  width: 960px;
  height: auto;
  padding: 35px 50px;
  background: -webkit-linear-gradient(-45deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 154, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 154, 0.8) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 4px solid #fff;
}

.sec_c_aboutslide_img {
  margin-top: 0;
}

.sec_c_aboutslide_img li {
  float: left;
  margin-right: 25px;
}

.sec_c_aboutslide_img li:nth-child(2) {
  margin-right: -100px;
}

.sec_c_aboutslide {
  position: relative;
  width: 960px;
  z-index: 100;
}


.sec_g_aboutslide_slidebase {
  position: relative;
  width: 960px;
  height: 449px;

  background: -webkit-linear-gradient(-45deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 154, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 154, 0.8) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 4px solid #fff;
}

.sec_g_aboutslide_img {}

.sec_g_aboutslide_img li {
  position: relative;
  float: left;
  margin-right: 25px;
}

.sec_g_aboutslide_img li:nth-child(2) {
  margin-right: -100px;
}

.sec_g_aboutslide {
  position: relative;
  width: 960px;
  z-index: 200;
}


@media screen and (min-width:320px) and (max-width:768px) {
  .cattag {
    position: relative;
    text-align: center;
    z-index: 1800;
    width: 404px;
    margin: 1.2% auto;

  }

  .catshadow2 {
    position: relative;
    margin-top: -18%;
    text-align: center;
    margin-left: -20%;
    z-index: 100;

  }

  .sec_c_aboutslide_slidebase {
    position: relative;
    width: 100%;
    height: auto;
    padding: 8% 5% 3% 5%;
    background: -webkit-linear-gradient(-45deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 154, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 154, 0.8) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 4px solid #fff;
  }

  .sec_c_aboutslide_img {
    margin-top: 2%;
  }

  .sec_c_aboutslide_img li {
    position: relative;
    float: left;
    width: 49%;
    margin-right: 15px;
  }

  .sec_c_aboutslide_img li:nth-child(2) {
    margin-right: -100px;
  }

  .sec_c_aboutslide {
    position: relative;
    width: 85%;
    margin: 0 auto;
    z-index: 100;
  }



  .sec_g_aboutslide_slidebase {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 5%;
    background: -webkit-linear-gradient(-45deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 154, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 154, 0.8) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border: 4px solid #fff;
  }

  .sec_g_aboutslide_img {}

  .sec_g_aboutslide_img li {
    position: relative;
    float: left;
    margin-right: 25px;
  }

  .sec_g_aboutslide_img li:nth-child(2) {
    margin-right: -100px;
  }

  .sec_g_aboutslide {
    position: relative;
    width: 85%;
    margin: 0 auto;
    z-index: 100;
  }
}


.section_c {
  position: relative;
  margin-top: 5%;
  height: auto;
  min-width: 960px;
  padding-bottom: 50px;
  border-bottom: 6px solid #fff;
  z-index: 1002;
}

.sec_c_slidetit {
  position: relative;
  top: -20px;
  margin-bottom: 0;
}

.sec_c_aboutslide_slidetit {
  position: absolute;
  margin-top: -70px;
  margin-left: 260px;
}

.sec_c_aboutslide_fukidashi1 {
  position: absolute;
  margin-top: -25px;
  margin-left: -20px;
}

.sec_c_aboutslide_fukidashi2 {
  position: absolute;
  margin-top: 170px;
  right: 40px;
}

.sec_c_slidetextarea {
  font-weight: 600;
  text-align: center;
  line-height: 1.6em;
  color: #fff;
}

.sec_c_slidetextarea br {
  display: block;
}

.sectit {
  position: relative;
  text-align: center;
  margin-top: 5%;
  margin-bottom: 4%;
  z-index: 200;
}

.section_d {
  position: relative;
  margin-top: 0;
  height: auto;
  min-width: 960px;
  min-height: 1000px;
  padding-bottom: 100px;
  border-bottom: 6px solid #fff;


}

.border_l {
  position: absolute;
  margin-top: 30px;
  background-color: #fff;
  height: 467px;
  width: 5px;
  z-index: 2000;

}

.border_r {
  position: absolute;
  margin-top: 30px;
  right: 0;
  background-color: #fff;
  height: 467px;
  width: 5px;
  z-index: 2000;

}

.flashback {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 660px;
  margin-top: -50px;
  z-index: 800;
}

.titlogo_f {
  margin-top: -10%;
  z-index: 1000;
}

.sec_c_pickup {
  margin-top: 30px;
}

.sec_c_pickup li {
  float: left;
  width: 24%;
  margin-right: 1.35%;
  margin-bottom: 2%;
}

.sec_c_pickup li:nth-child(4) {
  margin-right: -50px;
}

.sec_c_pickup li:nth-child(6) {
  margin-right: -50px;
}

.badges_c {
  position: absolute;
  margin-top: -38px;
  left: -78px;
}


@media screen and (min-width:320px) and (max-width:768px) {
  .flashback {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    margin-top: -50px;
    z-index: 500;
  }

  .gamedetail {
    margin-top: -10%;
    width: 100%;
    margin-left: inherit;
    text-align: center;
    z-index: 600;
  }

  .sec_c_slidetextarea {
    font-weight: 600;
    margin-top: 3%;
    text-align: justify;
    line-height: 1.6em;
    color: #fff;
  }

  .sec_c_slidetextarea br {
    display: none;
  }

  .sec_c_slidetit {
    position: relative;
    top: 2%;
    margin-bottom: 0;
  }


  .section_c {
    position: relative;
    margin-top: 14%;
    width: 100%;
    height: auto;
    min-width: 100%;
    padding-bottom: 50px;
    border-bottom: 6px solid #fff;
    z-index: 1002;
  }

  .sec_c_aboutslide_fukidashi1 {
    position: absolute;
    width: 40%;
    margin-top: -10%;
    margin-left: -20px;
    z-index: 100;
  }

  .sec_c_aboutslide_fukidashi2 {
    position: absolute;
    width: 40%;
    margin-top: 85px;
    right: 1%;
    z-index: 100;
  }

  .sec_c_aboutslide_slidetit {
    position: absolute;
    width: 50%;
    right: -4%;
    margin: -14% auto;
    z-index: 110;
  }

  .sectit {
    position: relative;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
    z-index: 100;
  }

  .section_d {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-width: inherit;
    min-height: auto;
    padding-bottom: 50px;
    border-bottom: 6px solid #fff;
    z-index: 1002;
  }

  .badges_c {
    width: 25%;
    position: absolute;
    margin-top: -20px;
    left: -26px;
  }

  .sec_c_pickup {
    margin-top: 30px;
    width: 100%;
  }

  .sec_c_pickup li {
    float: left;
    width: 48%;
    margin-right: 2%;
    margin-bottom: 5%;
  }

  .sec_c_pickup li:nth-child(3) {
    margin-right: 2%;
  }

  .sec_c_pickup li:nth-child(6) {
    margin-right: 0;
  }

  .sec_c_pickup li:nth-child(even) {
    margin-right: -50px;
  }
}

.fixback_left {
  position: fixed;
  margin-top: 0;
  left: -70px;
  z-index: 0;
  opacity: 0.8;
}

.fixback_right {
  position: fixed;
  margin-top: 0;
  right: -70px;
  z-index: 0;
  opacity: 0.8;
}

.secd_mtml {
  position: relative;
  margin-top: -20px;
  margin-left: -20px;
}


@media screen and (min-width:320px) and (max-width:768px) {
  .fixback_left {
    position: fixed;
    margin-top: 0;
    left: -120px;
    z-index: 0;
  }

  .secd_mtml {
    width: 97%;

    margin: -5% auto;
    margin-left: 0;
  }


  .fixback_right {
    position: fixed;
    margin-top: 0;
    right: -120px;
    z-index: 0;
  }
}

.cattittag {
  position: relative;
  text-align: center;
  z-index: 1800 !important;
  width: 404px;
  margin: 0 auto;
}

.catshadow3 {
  position: absolute;
  margin-top: -43px;
  z-index: 50;
}

.flogo {
  text-align: center;
}

.footertext {
  text-align: center;
  margin-top: 15px;
  color: #fff;
  font-weight: 500;
}

.footertext a:link {
  color: #fff;
}

.footertext a:visited {
  color: #fff;
}

.footertext br {
  display: none;
}


.fsnklogo {
  text-align: center;
  margin-top: 20px;
}

.secheadcopy {
  position: relative;
  text-align: center;
  z-index: 200;
}

.img {
  position: relative;
  z-index: 200;
}

.storysp {
  position: relative;
  margin-left: -2.9%;
  width: 103%;
}

@media screen and (min-width:320px) and (max-width:768px) {
  .storysp {
    margin-left: 0%;
    width: 97%;
  }

  .footertext {
    text-align: center;
    margin-top: 15px;
    color: #fff;
    font-weight: 500;
    font-size: 14pt;
    line-height: 1.8em;
  }

  .footertext br {
    display: block;
  }
}

.story1copy {
  position: absolute;
  right: -20px;
  margin-top: 110px;
  z-index: 240;
}

.story_navi {
  position: absolute;
  margin-top: 10px;
  left: -100px;
}

.section_f {
  position: relative;
  margin-top: 0;
  height: auto;
  min-width: 960px;
  padding-bottom: 100px;
  border-bottom: 6px solid #fff;

}

.section_g,
.section_h {
  position: relative;
  margin-top: 0;
  height: auto;
  min-width: 960px;
  padding-bottom: 100px;
  border-bottom: 6px solid #fff;

}

@media screen and (min-width:320px) and (max-width:768px) {
  .story1copy {
    position: absolute;
    width: 40%;
    right: 90px;
    margin-top: 80px;
    z-index: 300;
  }

  .section_f {
    position: relative;
    margin-top: 0;
    height: auto;
    min-width: 100%;
    min-height: auto;
    padding-bottom: 50px;
    border-bottom: 6px solid #fff;
    z-index: 1002;
  }

  .section_g,
  .section_h {
    position: relative;
    margin-top: 0;
    height: auto;
    min-width: 100%;
    min-height: auto;
    padding-bottom: 50px;
    border-bottom: 6px solid #fff;
    z-index: 1002;
  }

}


.sec_f_contwrp {
  position: relative;
  margin-top: 3%;
  height: auto;
  min-height: 600px;
  width: 100%;
  z-index: 700;
}


.sec_f_cont3 {
  position: absolute;
  margin-top: 340px;
}

.sec_f_cont1 {
  position: absolute;
  margin-top: -4%;
  right: -20px;
  z-index: 50;
}

.sec_f_cont2 {
  position: absolute;
}

.sec_f_textarea {
  position: absolute;
  color: #fff;
  font-weight: 600;
  margin-top: 10%;
  margin-left: 3%;
  width: 530px;
  line-height: 1.6em;
}

.sec_f_subimg {
  position: absolute;
  right: -40px;
  margin-top: 180px;
  z-index: 100;
}

.sec_f_fukidashi1 {
  position: absolute;
  margin-top: -30px;
  margin-left: -35px;
  z-index: 100;
}

.sec_f_fukidashi2 {
  position: absolute;
  right: -70px;
  margin-top: 275px;
  z-index: 150;
}

.sec_f_cont3 {
  position: absolute;
}

.catbakudan {
  position: absolute;
  margin-top: 3%;
  right: -6%;
  z-index: 200;
}

.sec_g_charaslide {
  position: relative;

  left: 0;
}

.sec_g_max {
  position: absolute;
  margin-top: -25px;
  right: 10px;
  z-index: 300;
}

.sec_g_sdot {
  position: absolute;
  margin-top: 190px;
  right: -10px;
  z-index: 100;
}

.sec_g_dodchara {
  position: absolute;
  margin-top: 290px;
  right: 230px;
  z-index: 300;
}

.sec_g_textarea {
  position: absolute;
  margin-top: -24%;
  margin-left: 5%;
  color: #fff;
  font-weight: 600;
  width: 270px;
  line-height: 1.7em;
  text-align: justify;
}

.sec_g_copy {
  position: absolute;
  margin-top: 420px;
  margin-left: -15px;
  z-index: 300;
}

.sec_h_movlist {
  position: relative;
  margin-top: 5%;
  z-index: 200;
}

.sec_h_movlist li {
  text-align: center;
  margin-right: 4%;
}

.sec_h_movlist li:nth-child(2) {
  margin-right: -50px;
}


@media screen and (min-width:320px) and (max-width:768px) {
  .catbakudan {
    position: absolute;
    width: 40%;
    margin-top: 3%;
    right: -6%;
    z-index: 100;
  }

  .sec_g_copy {
    position: absolute;
    margin-top: 42.5%;
    width: 35%;
    margin-left: 10%;
    z-index: 200;
  }

  .sec_g_sdot {
    position: absolute;
    width: 40%;
    margin-top: 30%;
    right: -10px;
    z-index: 100;
  }

  .sec_g_charaslide {
    position: relative;
    margin-top: 0;
    margin-left: 8%;
  }

  .sec_g_textarea {
    position: relative;
    margin-top: -22%;
    color: #fff;
    font-weight: 600;
    width: 29%;
    font-size: 12pt;
    ;
    line-height: 1.5em;
    text-align: justify;
    margin-bottom: 0;
  }

  .sec_g_charaslide {
    position: relative;
    width: 100%;
    left: -8.1%;
  }

  .sec_g_max {
    position: absolute;
    width: 12%;
    margin-top: -27px;
    right: 5px;
    z-index: 300;
  }

  .sec_g_dodchara {
    position: absolute;
    width: 25%;
    margin-top: 38%;
    right: 35%;
    z-index: 300;
  }

  .sec_h_movlist {
    position: relative;
    margin-top: 5%;
    z-index: 100;
    width: 90%;
    margin: 0 auto;
  }

  .sec_h_movlist li {
    margin-right: 4%;
    width: 100%;

  }

  .sec_h_movlist li:nth-child(2) {
    margin-right: -50px;
  }


}




.newtag {
  position: absolute;
  margin-top: -3%;
  margin-left: -3%;
}

.spoverlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  background: -webkit-linear-gradient(left, rgba(0, 0, 181, 0.5) 0%, rgba(36, 187, 210, 0.5) 50%, rgba(0, 0, 181, 0.5) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(0, 0, 181, 0.5) 0%, rgba(36, 187, 210, 0.5) 50%, rgba(0, 0, 181, 0.5) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: 100;
}



.pagetopact {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 2000;
}

.sec_c_mt {
  margin-top: -10%;
  margin-bottom: 2%;
}

.sec_c_img {
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding-left: 3%;
  z-index: 200;
}

.eximg {
  position: absolute;
  right: 1%;
  margin-top: -6%;

  z-index: 100;
}

.sec_d_chrodetail {
  position: relative;
}

.sec_d_bakudan {
  z-index: 100;
}

.sec_f_mainimg {
  position: relative;
}

.sec_g_point {
  position: absolute;
  margin-top: 5%;
  left: 41%;
  z-index: 100;
}

@media screen and (min-width:320px) and (max-width:768px) {
  .sec_c_img {
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding-left: 3%;
  z-index: 200;
}
  .sec_g_point {
    position: absolute;
    width: 30%;
    margin-top: 4%;
    left: 41%;
    z-index: 100;
  }
}

.spmov {
  position: relative;
  text-align: center;
  width: 93%;
  margin: 10% auto;
  margin-bottom: 0%;
  border: 5px solid #fff;
  z-index: 200;
}


.newslistbtn {
  position: absolute;
  color:#fff;
  font-size: 8pt;
  font-weight: 600;
  right:0.5%;

  z-index: 200;
  cursor: pointer;
}
.newslistbtn a:link {
  color:#fff;
}
.newslistbtn a:visited {
  color:#fff;
}

@media screen and (min-width:320px) and (max-width:768px) {
  .newslistbtn {
  position: absolute;
  color:#fff;
  font-size: 13pt;
  font-weight: 600;
  right:0.5%;

  z-index: 100;
  cursor: pointer;
}
.newslistbtn a:link {
  color:#fff;
}
.newslistbtn a:visited {
  color:#fff;
}
}

.endservice {
  position: absolute;
  margin-top: 8%;
  right:0;
  width: 45%;
  z-index: 500;
}

@media screen and (min-width:320px) and (max-width:768px) {
  .endservice {
  position: relative;
  margin-top: 8%;
  right:0;
  width: 94%;
    margin: 0 auto;
  z-index: 500;
}
}