@charset "utf-8";

/*
 * sytle.css
*/
.header {
  background-color: #fff;
}
.contents.nav {
  padding: 10px 0 20px;
}
.headH1 {
  display: inline-block;
  width: 26.45%;
  margin: 10px 3% 0 2%;
}
.headH1 img {
  max-width: 254px;
  width: 100%;
}
.headNav {
  display: inline-block;
  width: 21.25%;
  margin: 13px 0.5% 0;
}
.headNav img {
  max-width: 204px;
  width: 100%;
}
.fontBlue {
  color: #1682c9;
}
.fontOrange {
  color: #e95520;
}


/* =============================================================== */
.mainImg {
  float: left;
  margin: 0 3% 2%;
}
.movImg {
  float: left;
  margin: 10% 0 0 2%;
}
.main {
  padding: 42px 0 100px;
  background: url(../img/common/bg_wave_top.png) repeat-x center top;
  margin-top: -12px;
}
.contents {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.main .contents h2 {
  max-width: 569px;
  width: 61.84%;
  margin: 0 auto;
}
.contents.green {
  background-color: rgba(195, 255, 216, 0.5);
  border-radius: 5px;
  padding: 27px 0;
  position: relative;
}
.contents.pink {
  background-color: rgba(250, 190, 249, 0.5);
  border-radius: 5px;
  padding: 27px 0;
  position: relative;
}
.contents.blue {
  background-color: rgba(150, 233, 254, 0.5);
  border-radius: 5px;
  padding: 27px 0;
  position: relative;
}
.lead.mR {
  margin-right: 15%;
}

/* introduction */
.snapBox01 {
  margin-bottom: 15%;
}
.snapBox02 {
  margin-top: 2%;
}
.snap01 {
  max-width: 333px;
  width: 36.19%;
}
.snap02 {
  max-width: 345px;
  width: 37.5%;
}
.snap03 {
  max-width: 410px;
  width: 44.56%;
  margin-right: 2%;
}
.snap04 {
  max-width: 330px;
  width: 35.87%;
  margin-left: 2%;
}

/* hint */
.clm3Box {
  position: relative;
  font-size: 0;
  margin: 0 0 6%;
}
.circleTxt01 {
  display: inline-block;
  width: 35.54%;
  max-width: 327px;
  position: relative;
  right: -2%;
  z-index: 1;
}
.center {
  display: inline-block;
  width: 28.69%;
  max-width: 264px;
  position: relative;
  z-index: 3;
}
.circleTxt02 {
  display: inline-block;
  width: 35.54%;
  max-width: 327px;
  position: relative;
  left: -3%;
  z-index: 2;
}
.bgDott {
  background: url(../img/contents/dotto_2x.png) no-repeat center center;
  background-size: contain;
}
.main .contents h2.bgDott {
  max-width: none;
  width: 96%;
  margin: 0 auto;
  line-height: 1;
}
.main .contents h2.bgDott img {
  max-width: 520px;
  width: 58.87%;
  margin: 0 auto;
}
.sectionWrap {
  border-radius: 10px;
  border: 2px solid #fff;
  background-color: rgba(255, 252, 210, 0.35);
  width: 94%;
  margin: 2% auto 0;
  padding: 3% 0%;
  position: relative;
}
.notes {
  margin: 0 auto;
}
.notes.txt01 {
  width: 55.24%;
}
.notes.txt02 {
  width: 33.72%;
}
.notes.txt03 {
  width: 36.71%;
}
.notes.txt01 img {
  max-width: 480px;
  width: 100%;
}
.notes.txt02 img {
  max-width: 293px;
  width: 100%;
}
.notes.txt03 img {
  max-width: 319px;
  width: 100%;
}
.block {
  width: 18.99%;
  max-width: 165px;
  margin: 1% 3%;
}

/* tutorial */
.fontPurple {
  color: #ea4be9;
}
.clm2Txt {
  width: 49%;
  padding-left: 2%;
  text-align: left;
  float: left;
}
.clm2Image {
  width: 44.67%;
  padding: 2%;
  float: right;
}
.cont04sec {
  position: relative;
}
.cont04sec.pB {
  padding-bottom: 15%;
}
.blockTtl01 img {
  max-width: 378px;
  width: 100%;
}
.blockTtl02 {
  text-align: left;
  padding-left: 2%;
}
.blockTtl02 img {
  max-width: 492px;
  width: 53.47%;
}
.taL {
  text-align: left;
}
.clm3Box.imgBox {
  margin: 0;
}
.clm3Box.imgBox img {
  width: 29.45%;
  max-width: 271px;
  margin: 0 1.5% 3%;
}
.clm2Image img {
  max-width: 330px;
  width: 96%;
}
.blockTtl03 img {
  max-width: 340px;
  width: 100%;
}
.blockTtl04 img {
  max-width: 416px;
  width: 100%;
}

/* SP ========================================================================= */
@media only screen and (max-width: 750px) {
  .headH1 {
    display: inline-block;
    width: 96%;
    margin: 10px 3% 0 2%;
  }
  .headH1 img {
    max-width: 414px;
    width: 96%;
  }
  .main {
    padding-bottom: 30px;
  }
  .lead {
    font-size: 14px;
  }
  .main .contents h2 {
    width: 96%;
  }
  /* introduction */
  /* hint */
  .circleTxt01 {
    display: block;
    width: 54%;
    max-width: 350px;
    position: relative;
    right: 0;
    z-index: 1;
    margin: 0 auto;
  }
  .center {
    display: block;
    width: 48.43%;
    max-width: 310px;
    position: relative;
    z-index: 3;
    margin: -10% auto 0;
  }
  .circleTxt02 {
    display: block;
    width: 62.5%;
    max-width: 400px;
    position: relative;
    left: 0;
    z-index: 2;
    margin: -10% auto 0;
  }
  .notes.txt01 {
    width: 94%;
  }
  .notes.txt02 {
    width: 64%;
  }
  .notes.txt03 {
    width: 64%;
  }
  .bottomNavWrap {
    text-align: center;
    padding-bottom: 20px;
  }
  .bottomH1 img {
    max-width: 414px;
    width: 96%;
  }
  .bottomNav {
    margin-bottom: 1%;
    display: block;
  }
  .bottomNav img {
    max-width: 602px;
    width: 94%;
  }
  .main .contents h2.bgDott img {
    width: 96%;
  }
  /* tutorial*/
  .clm2Txt {
    width: 96%;
    padding-left: 2%;
    text-align: center;
    float: none;
  }
  .clm2Image {
    width: 96%;
    padding: 2%;
    float: none;
  }
  .mov04_01 {
    max-width: 411px;
    width: 96%;
  }
  .cont04sec.pB {
    padding-bottom: 20%;
  }
  .blockTtl02 {
    text-align: center;
    padding-left: 0;
  }
  .blockTtl01 img {
    width: 78%;
  }
  .blockTtl02 img {
    width: 96%;
  }
  .blockTtl03 img {
    width: 70%;
  }
  .blockTtl04 img {
    width: 80%;
  }
  .lead.mR.taL {
    text-align: center;
    margin-right: 0;
  }
  .clm3Box.imgBox img {
    width: 96%;
    max-width: 271px;
    margin: 0 1.5% 3%;
    display: block;
    margin: 3% auto;
  }
}
/* ============================================================================ */

/* キャラクターレイアウト */
.cat {
  position: absolute;
  top: 0;
  left: 14%;
  max-width: 103px;
  width: 11.85%;
  z-index: 4;
}
.clock {
  position: absolute;
  top: 18%;
  right: 2%;
  max-width: 116px;
  width: 13.35%;
}
.sushi {
  position: absolute;
  top: 60%;
  left: 1%;
  max-width: 154px;
  width: 17.72%;
}
.gym {
  position: absolute;
  top: 33%;
  right: 2%;
  max-width: 128px;
  width: 14.73%;
}
.judo {
  position: absolute;
  top: 1%;
  right: 4%;
  max-width: 109px;
  width: 11.84%;
}
.castle {
  position: absolute;
  top: 1.5%;
  left: 4%;
  max-width: 128px;
  width: 13.91%;
}
.dog {
  position: absolute;
  top: 45%;
  left: 7%;
  max-width: 151px;
  width: 16.41%;
}
.flower {
  position: absolute;
  top: 50%;
  left: 30%;
  max-width: 126px;
  width: 13.69%;
}
.penguin {
  position: absolute;
  bottom: 60%;
  right: 4%;
  max-width: 96px;
  width: 10.43%;
}
.camera {
  position: absolute;
  max-width: 82px;
  width: 8.91%;
  top: 14%;
  left: 3%;
}
.furseal {
  position: absolute;
  max-width: 81px;
  width: 8.8%;
  top: 28%;
  left: 3%;
}
.bus {
  position: absolute;
  max-width: 103px;
  width: 11.19%;
  top: 48%;
  left: 3%;
}
.birthday {
  position: absolute;
  max-width: 112px;
  width: 12.17%;
  top: 48%;
  left: 28%;
}
.grape {
  position: absolute;
  max-width: 59px;
  width: 6.41%;
  top: 48%;
  right: 28%;
}
.box {
  position: absolute;
  max-width: 94px;
  width: 10.21%;
  top: 48%;
  right: 3%;
}
.tanpopo {
  position: absolute;
  max-width: 73px;
  width: 7.93%;
  top: 28%;
  right: 3%;
}
.bird {
  position: absolute;
  max-width: 64px;
  width: 6.95%;
  top: 14%;
  right: 3%;
}
.dancer {
  position: absolute;
  max-width: 59px;
  width: 6.41%;
  bottom: -4%;
  right: 14%;
}
.torii {
  position: absolute;
  max-width: 109px;
  width: 11.84%;
  bottom: -4%;
  right: 0%;
}

/* SP ====================================================== */
@media only screen and (max-width: 750px) {
  .dog {
    top: inherit;
    bottom: 4%;
    left: 30%;
  }
  .flower {
    top: inherit;
    bottom: 3%;
    left: inherit;
    right: 30%;
  }
  .penguin {
    bottom: -2%;
    right: 3%;
  }
  .cat {
    position: absolute;
    top: 0;
    left: 14%;
    max-width: 103px;
    width: 11.85%;
    z-index: 4;
  }
  .clock {
    position: absolute;
    top: inherit;
    bottom: 0%;
    right: 2%;
    max-width: 116px;
    width: 13.35%;
  }
  .sushi {
    position: absolute;
    top: 72%;
    left: 1%;
    max-width: 154px;
    width: 17.72%;
  }
  .gym {
    position: absolute;
    top: inherit;
    top: -3%;
    right: 2%;
    max-width: 128px;
    width: 14.73%;
  }
  .dancer {
    position: absolute;
    max-width: 59px;
    width: 6.41%;
    bottom: -1%;
    left: 2%;
  }
  .torii {
    position: absolute;
    max-width: 109px;
    width: 11.84%;
    bottom: -1%;
    right: 2%;
  }
}

/* 3DS ====================================================== */
@media only screen and (max-width: 320px) {
  .bus { top: 53%; }
  .birthday { top: 53%; }
  .grape { top: 53%; }
  .box { top: 53%; }
}