html,body{
  color:#333333;
  font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:14px;
  font-weight: bold;
  margin:0;
  overflow-x: hidden;
  padding:0;
  word-break:break-strict;
  word-wrap:break-word;
}

html{
  width: 100%
}



h1, h2, h3, h4, h5, h6 {
  display: block;
  /*  line-height: 1em;*/
  margin: 0;
  padding:0;
}


a {text-decoration: none;}
a:link{ color:#384d98}

a:visited{color: #384d98}

a:hover{opacity: 0.9}

p{
  margin: 0 0 1em 0;
  padding:0;
  line-height: 1.57em
}

section{
  margin: 0 auto 60px;
}

header {
  margin:0 auto;
  padding: 10px;
  width: 100%;
}

header ul,
header li{
  list-style: none;
  list-style-position:inside;
  margin:0;
  padding:0;
}

#menuBtn {
  background-image: url(../img/btn-menu_open.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 40px;
  /*padding: 5px 10px;*/
  /* margin: 14px 12px 0 0; */
  height: 40px;
  text-align: center;
  width: 40px;
  z-index: 10000
}

#menuBtn.active{
  background-image: url(../img/btn-menu_close.png);
  background-repeat: no-repeat;
  background-position: center;
}


#global{
  background-color:rgba(35,24,21,0.8);
  clear: both;
  color: #fff;
  display: none;
  position: fixed;
  padding: 20px;
  top: 30px;
  right: 20px;
  margin: 0 auto;
  width: 240px;
  z-index: 9999;
}

#global ul li a{
   color: #fff;
   display: block;
   font-size: 112%;
   padding:10px 0;
   line-height: 1.2em;
   text-align: center;
   text-decoration: none;
 }

#global ul li:nth-of-type(-n+3) a{
   border-top: 1px solid #baedff;
}

#global ul li:nth-of-type(3) a {
  padding: 30px 0 0 0;
}

#global ul li:nth-of-type(4) a {
  /*border-bottom: 1px solid #baedff;*/
  padding: 10px 0 20px 0;
}

#global ul li a img {
  width: 180px;
  display: block;
  margin: auto;
}

#global nav ul{
  margin: 10px auto;
  overflow: hidden;
  padding:30px 0;
  width: 100%;
}

.h2Box {
  background-image: url(../img/bg-title.png);
  background-repeat: no-repeat;
  background-position: center;
  height: 120px;
  margin: 10px auto 30px;
  width: 228px;
}
h2 {
  font-size: 143%;
  line-height: 1.2em;
  padding-top: 50px;
  text-align: center;
}
h2 span{
  color: #ed1e79;
  display: block;
  font-size: 127%;
}

h3 {
  color: #00449b;
  font-size: 157%;
  line-height: 136%;
  margin-bottom: 30px;
  text-align: center;
}

h2,h3{

  font-family:"じゅん 501", "Jun 501";
}

.box {
  border-radius: 10px;
  padding: 40px 20px 30px 20px;
}

#about .box,
#mailinfo .box {
  background-color: #fff;
  background-image: url(../img/bg-triangle.png);
  background-repeat: repeat;
  background-position: -32px -11px;
  margin-bottom: 20px;
}

#about .box a,
#about .box a img {
  display: block;
}

#about .box .ver {
  background-color: #ffffe5;
  border-radius: 4px;
  margin-top: 10px;
  padding: 8px 0;
  text-align: center;
  width: 260px;
}
#about .box .googlePlay{
  margin-top: 20px;
}

#ability .box.step1 {
  background-color: #f2ffe5;
}
#ability .box.step2 {
  background-color: #e5ffff;
}
#ability .box.step3 {
  background-color: #eaeaff;
}
#ability .box.step4 {
  background-color: #ffeaea;
}

#ability .box {
  background: url(../img/bg-dot.png);
  background-repeat: repeat;
  background-position: -32px -56px;
  margin-top: 70px;
}

#ability .box img.number {
  display: block;
  margin: -70px auto 15px;
  width: 80px;
}

.goTop,
.goTop img {
  display: block;
}
.goTop{
  margin: 0 auto;
  width: 90px;
}

.logoEN {
  margin: 20px 0;
  text-align: center;
}

footer {
  background-color: #231815;
  color: #fff;
  font-size: 86%;
  font-weight: normal;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}

footer .copyRight {
  margin-bottom: 0;
}

/* メールが届かない方へ */
#resend #email{
  padding: 3px
}

/* 使い方ページ */
#usage img.desc {
  display: block;
  margin: 0 auto 10px;
}
#usage .localNav ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 50px auto;
  padding: 0;
  width: 580px;
}
#usage .localNav li{
  list-style: none;
  margin: 5px 0;
  padding: 0
}
#usage .localNav li a{display: block;}

/* ■■ここからPC限定■■ */
@media all and (min-width: 769px),print{

  body{
    background-image: url(../img/bg-pc.jpg);
    background-position: left top;
    background-size: 100%;
  }
  header .logo{
  padding-left: 40px;
  }

  .container {
    margin: 0 auto;
    width: 580px
  }

  .box {
    width: 540px;
  }

  #about .box .inner {
    background: url(../img/img-install.png);
    background-repeat: no-repeat;
    background-position: right top;
    width: 100%;
  }

  /* メールが届かない方へ */
  #resend #email{
    width: 300px
  }

  .contact dt{float: left;}
  .contact dd{float: right;}

  /* 使い方ページ */
  #usage .localNav ul {
    width: 580px;
  }

}

/* ■■ここからスマホ限定■■ */
@media only screen and (max-width: 768px){
  html{
    background-color:#82cddb;
  }
  body{
    background-image: url(../img/bg-sp_header.png), url(../img/bg-sp_footer.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left bottom;
    background-size: 100%;
  }

  img{ max-width: 100%; }
  header .logo{
  padding-left: 0px;
  }

  #menuBtn {
    right: 10px;
  }
   .container {
    margin: 0 auto;
    max-width: 580px;
    width: 94%;
  }

  #about .box .inner {
    margin: 0 auto;
    width: 260px;
  }
  /* メールが届かない方へ */
  #resend #email{
    width: 220px;
  }

  /* 使い方ページ */
  #usage .localNav ul {
    width: 100%;
  }
  #usage .localNav li {
    width: 32%;
  }

}