@charset "UTF-8";

.mb1em { margin-bottom: 1em!important; }
.mb2em { margin-bottom: 2em!important; }
.mb3em { margin-bottom: 3em!important; }
.mb4em { margin-bottom: 4em!important; }
.mb5em { margin-bottom: 5em!important; }

.pagetitle { 
  width: 685px;
  height: 68px;
  margin-bottom: 15px;
  text-indent: -9999px;
}
#sp_application .pagetitle { background: url(images/sp_application/service_sp_application_title.png) no-repeat; }

.pagelead {
  font-size: 123%;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 15px;
}
.subtitle {
  background: url("/images/title_bg_common_blue.png") repeat scroll 0 bottom;
  color: #FFFFFF;
  font-size: 132%;
  height: auto;
  line-height: 1.4;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}

.install {
  width: 685px;
  height: 206px;
  margin-bottom: 15px;
  background: url(images/sp_application/top01.png) no-repeat 0 0;
  position: relative;
}
.install a {
  position: absolute;
  top: 51px;
  left: 201px;
  text-indent: -9999px;
  width: 461px;
  height: 100px;
}
.install a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  background-blend-mode: lighten;
}
.waribiki {
  color: #15489a;
  margin-bottom: 3em;
  font-size: 132%;
  line-height: 1.5;
}
.mintitle {
  color: #15489a;
  font-weight: bold;
  font-size: 123%;
  line-height: 1.4;
  border-bottom: 3px solid #03bbc0;
  margin-bottom: 1em;
  padding-bottom: 0.2em;
}
.rank_img {
  text-indent: -9999px;
  background: url(images/sp_application/rank.png) no-repeat 0 0;
  width: 685px;
  height: 199px;
  margin-bottom: 2em;
}
.rank_p {
  font-size: 123%;
  line-height: 1.4;
  margin-bottom: 2em;
}

.qa_list {}
.qa_list dt {
  color: #15489a;
  font-size: 140%;
  border: 1px solid #15489a;
  margin-top: 1em;
  padding: 0.9em 3em 0.9em 4.5em;
  position: relative;
  background: url(/service/images/sp_application/qa_arrow_down.png) no-repeat 97% 50%;
  cursor: pointer;
}
.qa_list dt.active {
  background-image: url(/service/images/sp_application/qa_arrow_up.png);
}
.qa_list dt span {
  color: #15489a;
  font-weight: bold;
}
.qa_list dt .head {
  position: absolute;
  left: 0.5em;
  font-size: 116%;
  top: 0.3em;
}
.qa_list dt .head_q {
  font-size: 100%;
  background: #15489a;
  color: #fff;
  display: inline-block;
  padding: 9px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-right: 5px;
}
.qa_list dd {
  display: none;
  background: #eef2f5;
  padding: 12px;
  font-size: 123%;
  line-height: 1.4;
}
.qa_list dd .head {
  font-size: 134%;
  color: #f5a200;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: inline-block;
}
.qa_list dd .head_a {
  font-size: 100%;
  background: #f5a200;
  color: #fff;
  display: inline-block;
  padding: 9px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-right: 5px;
  line-height: 1;
}
.qa_list dd .lead_d {
  font-size: 100%;
  background: #fff;
  padding: 0.5em;
  margin-top: -3em;
  margin-left: 5em;
  margin-bottom: 1em;
}
.qa_list dd .lead_d p {
  font-size: 100%;
}
.qa_list dd .lead_d strong {
  font-size: 100%;
  font-weight: bold;
}
dd.qa1 ol {
  position: relative;
}
dd.qa1 ol > li {}
dd.qa1 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa1-1.png) no-repeat center 0;
  width: 655px;
  height: 385px;
  text-indent: -9999px;
}
dd.qa1 ol > li:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 297px;
}
dd.qa1 ol > li:nth-of-type(2) a:hover {
  opacity: 0.7;
}
dd.qa1 ol > li:nth-of-type(3) {
  position: absolute;
  top: 0;
  left: 431px;
}
dd.qa1 ol > li:nth-of-type(3) a:hover {
  opacity: 0.7;
}
dd.qa1 ol > li:nth-of-type(4) {
  background: url(images/sp_application/qa1-2.png) no-repeat center 0;
  width: 655px;
  height: 234px;
  text-indent: -9999px;
}
dd.qa1 ol > li:nth-of-type(5) {
  background: url(images/sp_application/qa1-3.png) no-repeat center 0;
  width: 655px;
  height: 317px;
  text-indent: -9999px;
}
dd.qa1 ol > li:nth-of-type(6) {
  background: url(images/sp_application/qa1-4.png) no-repeat center 0;
  width: 655px;
  height: 541px;
  text-indent: -9999px;
}
dd.qa1 ol > li:nth-of-type(7) a {
  position: absolute;
  top: 84px;
  left: 298px;
  width: 277px;
  height: 80px;
  text-indent: -9999px;
}
dd.qa1 ol > li:nth-of-type(7) a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  background-blend-mode: lighten;
}

dd.qa2 ol {
  position: relative;
}
dd.qa2 ol > li {}
dd.qa2 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa2-1.png) no-repeat center 0;
  width: 655px;
  height: 441px;
  text-indent: -9999px;
}
dd.qa2 ol > li:nth-of-type(2) {
  background: url(images/sp_application/qa2-2.png) no-repeat center 0;
  width: 655px;
  height: 446px;
  text-indent: -9999px;
}
dd.qa2 ol > li:nth-of-type(3) {
  background: url(images/sp_application/qa2-3.png) no-repeat center 0;
  width: 655px;
  height: 270px;
  text-indent: -9999px;
}
dd.qa2 ol > li:nth-of-type(4) {
  background: url(images/sp_application/qa2-4.png) no-repeat center 0;
  width: 655px;
  height: 413px;
  text-indent: -9999px;
}
dd.qa2 ol > li:nth-of-type(5) {
  background: url(images/sp_application/qa2-5.png) no-repeat center 0;
  width: 655px;
  height: 175px;
  text-indent: -9999px;
}
dd.qa2 ol > li:nth-of-type(6) a {
  position: absolute;
  bottom: 37px;
  left: 256px;
  width: 380px;
  height: 40px;
  text-indent: -9999px;
}
dd.qa3 ol {
  position: relative;
}
dd.qa3 ol > li {}
dd.qa3 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa3-1.png) no-repeat 100% 0;
  width: 601px;
  height: 441px;
  text-indent: -9999px;
  margin-top: -4em;
  margin-left: 5.5em;
}
dd.qa3 ol > li:nth-of-type(2) {
  background: url(images/sp_application/qa3-2.png) no-repeat 100% 0;
  width: 601px;
  height: 248px;
  text-indent: -9999px;
  margin-left: 5.5em;
}
dd.qa3 ol > li:nth-of-type(3) {
  background: url(images/sp_application/qa3-3.png) no-repeat 100% 0;
  width: 601px;
  height: 441px;
  text-indent: -9999px;
  margin-left: 5.5em;
}
dd.qa3 ol > li:nth-of-type(4) {
  background: url(images/sp_application/qa3-4.png) no-repeat 100% 0;
  width: 601px;
  height: 433px;
  text-indent: -9999px;
  margin-left: 5.5em;
}
dd.qa3 ol > li:nth-of-type(5) {
  background: url(images/sp_application/qa3-5.png) no-repeat 100% 0;
  width: 601px;
  height: 344px;
  text-indent: -9999px;
  margin-left: 5.5em;
}
dd.qa4 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa4-1.png) no-repeat 50% 0;
  width: 655px;
  height: 733px;
  text-indent: -9999px;
}
dd.qa4 ol > li:nth-of-type(2) {
  background: url(images/sp_application/qa4-2.png) no-repeat 50% 0;
  width: 655px;
  height: 514px;
  text-indent: -9999px;
}
dd.qa5 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa5-1.png) no-repeat 50% 0;
  width: 655px;
  height: 664px;
  text-indent: -9999px;
}
dd.qa5 ol > li:nth-of-type(2) {
  background: url(images/sp_application/qa5-2.png) no-repeat 50% 0;
  width: 655px;
  height: 193px;
  text-indent: -9999px;
}
dd.qa7 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa7-1.png) no-repeat 50% 0;
  width: 655px;
  height: 574px;
  text-indent: -9999px;
}
dd.qa8 ol {
  display: flex;
}
dd.qa8 ol > li:nth-of-type(1) {
  background: url(images/sp_application/qa8-1.png) no-repeat 0 0;
  width: 328px;
  height: 589px;
  text-indent: -9999px;
}
dd.qa8 ol > li:nth-of-type(2) {
  background: url(images/sp_application/qa8-2.png) no-repeat 0 0;
  width: 328px;
  height: 589px;
  text-indent: -9999px;
}






@media only screen and (max-width: 800px) {

  .main_menu_wrap {
    margin: 0 auto;
    padding-bottom: 20px;
  }
  .pagetitle { 
    width: 320px;
    height: 89px;
    margin-right: auto;
    margin-left: auto;
  }
  #sp_application .pagetitle  { background-position: 0 -68px; }

  .pagelead { padding: 0 7px; }
  .subtitle {
    text-align: center;
    font-size: 130%;
  }
  .install {
    width: 320px;
    height: 251px;
    background-position: 0 -206px;
  }
  .install a {
    top: 137px;
    left: 6px;
    width: 307px;
    height: 100px;
  }
  .rank_img {
    width: 320px;
    height: 766px;
    background-position: 0 -199px;
  }
  .mintitle {
    font-size: 145%;
    word-break: break-all;
    margin-bottom: 0.6em;
  }

  .qa_list dt {
    padding-right: 2em;
    background-position: 97% 0.9em;
  }
  .qa_list dd ol {
    position: relative;
    margin: 0 -12px;
  }

  dd.qa1 ol > li:nth-of-type(1) {
    background-position: 0 -385px;
    width: 320px;
    height: 468px;
  }
  dd.qa1 ol > li:nth-of-type(2) {
    top: 5px;
    left: 182px;
  }
  dd.qa1 ol > li:nth-of-type(3) {
    top: 48px;
    left: 182px;
  }
  dd.qa1 ol > li:nth-of-type(4) {
    background-position: 0 -234px;
    width: 320px;
    height: 309px;
  }
  dd.qa1 ol > li:nth-of-type(5) {
    background-position: 0 -317px;
    width: 320px;
    height: 464px;
  }
  dd.qa1 ol > li:nth-of-type(6) {
    background-position: 0 -541px;
    width: 320px;
    height: 1520px;
  }
  dd.qa1 ol > li:nth-of-type(7) a {
    top: 379px;
    left: 21px;
    width: 277px;
    height: 80px;
  }

  .qa_list dd.qa2 .lead_d {
    margin-top: 0;
    margin-left: 0;
  }
  dd.qa2 ol > li:nth-of-type(1) {
    background-position: 0 -441px;
    width: 320px;
    height: 486px;
  }
  dd.qa2 ol > li:nth-of-type(2) {
    background-position: 0 -446px;
    width: 320px;
    height: 498px;
  }
  dd.qa2 ol > li:nth-of-type(3) {
    background-position: 0 -270px;
    width: 320px;
    height: 314px;
  }
  dd.qa2 ol > li:nth-of-type(4) {
    background-position: 0 -413px;
    width: 320px;
    height: 445px;
  }
  dd.qa2 ol > li:nth-of-type(5) {
    background: url(images/sp_application/qa2-5.png) no-repeat 0 -175px;
    width: 320px;
    height: 360px;
  }
  dd.qa2 ol > li:nth-of-type(6) a {
    bottom: 10px;
    left: 18px;
    width: 286px;
    height: 108px;
  }
  dd.qa3 ol > li:nth-of-type(1) {
    background-position: 0 -441px;
    width: 320px;
    height: 490px;
    margin-top: 0;
    margin-left: 0;
  }
  dd.qa3 ol > li:nth-of-type(2) {
    background-position: 0 -248px;
    width: 320px;
    height: 285px;
    margin-left: 0;
  }
  dd.qa3 ol > li:nth-of-type(3) {
    background-position:  0 -441px;
    width: 320px;
    height: 476px;
    margin-left: 0;
  }
  dd.qa3 ol > li:nth-of-type(4) {
    background-position: 0 -433px;
    width: 320px;
    height: 579px;
    margin-left: 0
  }
  dd.qa3 ol > li:nth-of-type(5) {
    background-position: 0 -344px;
    width: 320px;
    height: 643px;
    margin-left: 0;
  }
  dd.qa4 ol > li:nth-of-type(1) {
    background-position: 0 -733px;
    width: 320px;
    height: 846px;
  }
  dd.qa4 ol > li:nth-of-type(2) {
    background-position: 0 -514px;
    width: 320px;
    height: 596px;
  }
  dd.qa5 ol > li:nth-of-type(1) {
    background-position: 0 -664px;
    width: 320px;
    height: 1008px;
  }
  dd.qa5 ol > li:nth-of-type(2) {
    background-position: 0 -193px;
    width: 320px;
    height: 251px;
  }
  .qa_list dd.qa6 .lead_d {
    margin: 0;
    line-height: 1.6;
  }
  .qa_list dd.qa7 .lead_d {
    margin: 0;
    line-height: 1.6;
  }
  dd.qa7 ol > li:nth-of-type(1) {
    background-position: 0 -574px;
    width: 320px;
    height: 557px;
  }
  dd.qa8 ol {
    display: block;
  }
  dd.qa8 ol > li:nth-of-type(1) {
    background-position: 0 -589px;
    width: 320px;
    height: 631px;
  }
  dd.qa8 ol > li:nth-of-type(2) {
    background-position: 0 -589px;
    width: 320px;
    height: 568px;
  }



}