#contents.play {
  color: #000;
  width: 100%;
  overflow: hidden;
  background-color: #fbdce8;
}

#contents.play > header.page-header {
  background-image: url(../img/play/head_image.jpg);
  background-position: center top;
}

#contents.play > section.introduction header {
  background-image: url(../img/play/title_wave.png);
}

#contents.play > section.introduction header h2 {
  background-image: url(../img/play/title.png);
}

#contents.play > section.introduction div {
  background-image: url("../img/play/intro_bg.jpg");
  background-position: center bottom;
}

#contents.play > section.introduction span {
  left: 50%;
}

#contents.play > section.introduction span.inu {
  background-image: url(../img/play/intro_inu.png);
  width: 51px;
  height: 34px;
  top: 85px;
  margin-left: -360px;
}

#contents.play > section.introduction span.ki {
  background-image: url(../img/play/intro_ki.png);
  width: 100px;
  height: 110px;
  top: 10px;
  margin-left: -224px;
}

#contents.play > section.introduction span.taiyou {
  background-image: url(../img/play/intro_taiyou.png);
  width: 71px;
  height: 70px;
  top: 6px;
  margin-left: 112px;
}

#contents.play > section.introduction span.hito {
  background-image: url(../img/play/intro_hito.png);
  width: 55px;
  height: 112px;
  top: 26px;
  margin-left: 202px;
}

#contents.play > section.introduction span.kumo {
  background-image: url(../img/play/intro_kumo.png);
  width: 196px;
  height: 52px;
  margin-left: 324px;
  top: 32px;
}

#contents.play > section.introduction span.ball {
  position: absolute;
  display: block;
  background-image: url(../img/play/intro_ball.png);
  width: 40px;
  height: 20px;
  top: 107px;
  margin-left: -424px;
}

#contents.play > section.spotmap {
  padding: 40px 0 60px;
  background: url("../img/play/map_bg.jpg") center top;
}

#contents.play > section.spotmap h3 {
  text-align: center;
}

#contents.play > section.spotmap h3 span {
  display: inline-block;
  font-size: 16px;
  padding: 10px 30px;
  padding-left: 48px;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-image: url("../img/play/map_title_pin.png");
  background-position: 25px center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#contents.play > section.spotmap > div {
  position: relative;
  padding-top: 60px;
  width: 100%;
  left: 50%;
  max-width: 1920px;
  margin: 0 auto;
}

#contents.play > section.spotmap > div > a.btn {
  position: absolute;
  top: 86%;
  left: 16%;
}

#contents.play > section.spotmap div.map {
  position: relative;
  width: 100%;
}

#contents.play > section.spotmap div.map img {
  width: 100%;
}

#contents.play > section.spotmap p {
  position: absolute;
}

#contents.play > section.spotmap p.pin1 {
  left: 85%;
  top: 36%;
}

#contents.play > section.spotmap p.pin2 {
  left: 81%;
  top: 45%;
}

#contents.play > section.spotmap p.pin3 {
  left: 84.2%;
  top: 44.2%;
}

#contents.play > section.spotmap p.pin4 {
  left: 75.2%;
  top: 41.3%;
}

#contents.play > section.spotmap p.pin5 {
  left: 87.2%;
  top: 53.6%;
}

#contents.play > section.spotmap p.pin6 {
  left: 23%;
  top: 23.6%;
}

#contents.play > section.spotmap p.pin7 {
  left: 30%;
  top: 40%;
}

#contents.play > section.spotmap p.pin8 {
  left: 65.5%;
  top: 80%;
}

#contents.play > section.spotmap p.pin9 {
  left: 18%;
  top: 60%;
}

#contents.play > section.spotmap p a {
  position: absolute;
  display: block;
  top: -56px;
  left: -20px;
  width: 40px;
  height: 56px;
}

#contents.play > section.spotmap p a img {
  position: absolute;
  top: 0;
  left: 0;
}

#contents.play > section.spotlist {
  width: 100%;
  min-width: 980px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 50px 20px 20px;
  background-color: #fbdce8;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /** /div.spot */
}

#contents.play > section.spotlist h3 {
  text-align: center;
  margin-bottom: 45px;
}

#contents.play > section.spotlist div.illust {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
}

#contents.play > section.spotlist div.illust span.hana {
  background-image: url(../img/play/spot_hana.png);
  width: 170px;
  height: 102px;
  top: 75px;
  left: -455px;
}

#contents.play > section.spotlist div.illust span.kumo {
  background-image: url(../img/play/spot_kumo.png);
  width: 220px;
  height: 57px;
  top: -20px;
  left: -364px;
}

#contents.play > section.spotlist div.illust span.kira {
  background-image: url(../img/play/spot_kira.png);
  width: 252px;
  height: 136px;
  top: 106px;
  left: 216px;
}

#contents.play > section.spotlist div.illust span.tori {
  background-image: url(../img/play/spot_tori.png);
  width: 82px;
  height: 73px;
  top: 6px;
  left: 274px;
}

#contents.play > section.spotlist div.chara {
  position: relative;
  width: 1328px;
  margin: 0 auto;
  height: 0;
}

#contents.play > section.spotlist div.chara p {
  position: absolute;
  z-index: 1;
}

#contents.play > section.spotlist div.chara p:nth-of-type(1) {
  top: 613px;
  left: 1130px;
}

#contents.play > section.spotlist div.chara p:nth-of-type(2) {
  top: 1823px;
  left: 16px;
}

#contents.play > section.spotlist div.chara p:nth-of-type(3) {
  top: 3032px;
  left: 1176px;
}

#contents.play > section.spotlist div.spot {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;
  *zoom: 1;
}

#contents.play > section.spotlist div.spot:after {
  content: "";
  display: table;
  clear: both;
}

#contents.play > section.spotlist div.spot > p,
#contents.play > section.spotlist div.spot > div {
  width: 50%;
  height: 380px;
  float: left;
  position: relative;
  background-color: #FFF;
  overflow: hidden;
}

#contents.play > section.spotlist div.spot:nth-of-type(odd) p {
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-left-radius: 9px;
  border-top-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

#contents.play > section.spotlist div.spot:nth-of-type(odd) div {
  -moz-border-radius-topright: 9px;
  -webkit-border-top-right-radius: 9px;
  border-top-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
  -webkit-border-bottom-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

#contents.play > section.spotlist div.spot:nth-of-type(even) > p,
#contents.play > section.spotlist div.spot:nth-of-type(even) > div {
  float: right;
}

#contents.play > section.spotlist div.spot:nth-of-type(even) div {
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-left-radius: 9px;
  border-top-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

#contents.play > section.spotlist div.spot:nth-of-type(even) p {
  -moz-border-radius-topright: 9px;
  -webkit-border-top-right-radius: 9px;
  border-top-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
  -webkit-border-bottom-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

#contents.play > section.spotlist div.spot:last-of-type {
  margin-bottom: 0;
}

#contents.play > section.spotlist div.spot > span {
  position: absolute;
  display: block;
}

#contents.play > section.spotlist div.spot:nth-of-type(2) span {
  top: 256px;
  left: 3%;
}

#contents.play > section.spotlist div.spot:nth-of-type(3) span {
  top: 262px;
  right: 3%;
}

#contents.play > section.spotlist div.spot:nth-of-type(4) span {
  top: 222px;
  left: 29%;
}

#contents.play > section.spotlist div.spot:nth-of-type(5) span {
  top: 230px;
  left: 44%;
}

#contents.play > section.spotlist div.spot:nth-of-type(6) span {
  top: 240px;
  left: 2%;
}

#contents.play > section.spotlist div.spot:nth-of-type(7) span:nth-of-type(1) {
  top: 255px;
  left: 75%;
  margin-left: -262px;
}

#contents.play > section.spotlist div.spot:nth-of-type(7) span:nth-of-type(2) {
  top: 237px;
  left: 75%;
  margin-left: 180px;
}

#contents.play > section.spotlist div.spot:nth-of-type(8) span {
  bottom: 1px;
  left: 2%;
}

#contents.play > section.spotlist div.spot:nth-of-type(9) span:nth-of-type(1) {
  top: 225px;
  left: 50%;
  margin-left: 22px;
}

#contents.play > section.spotlist div.spot:nth-of-type(9) span:nth-of-type(2) {
  top: 270px;
  right: 40px;
}

#contents.play > section.spotlist div.spot:nth-of-type(10) span {
  top: 252px;
  left: 50%;
  margin-left: -180px;
}

#contents.play > section.spotlist div.spot > div {
  padding: 40px 70px 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#contents.play > section.spotlist div.spot > div dl {
  background-repeat: no-repeat;
  background-position: 0 0;
}

#contents.play > section.spotlist div.spot > div dl dt {
  padding: 10px 0 30px;
  padding-left: 68px;
  font-size: 24px;
  font-weight: bold;
}

#contents.play > section.spotlist div.spot > div dl dd {
  line-height: 1.8;
  font-size: 15px;
  padding-left: 10px;
}

#contents.play > section.spotlist div.spot > div.spot1 dl {
  background-image: url("../img/play/pin1.png");
}

#contents.play > section.spotlist div.spot > div.spot2 dl {
  background-image: url("../img/play/pin2.png");
}

#contents.play > section.spotlist div.spot > div.spot3 dl {
  background-image: url("../img/play/pin3.png");
}

#contents.play > section.spotlist div.spot > div.spot4 dl {
  background-image: url("../img/play/pin4.png");
}

#contents.play > section.spotlist div.spot > div.spot5 dl {
  background-image: url("../img/play/pin5.png");
}

#contents.play > section.spotlist div.spot > div.spot6 dl {
  background-image: url("../img/play/pin6.png");
}

#contents.play > section.spotlist div.spot > div.spot7 dl {
  background-image: url("../img/play/pin7.png");
}

#contents.play > section.spotlist div.spot > div.spot8 dl {
  background-image: url("../img/play/pin8.png");
}

#contents.play > section.spotlist div.spot > div.spot9 dl {
  background-image: url("../img/play/pin9.png");
}

#contents.play > section.spotlist div.spot > div > a {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -110px;
  bottom: 40px;
}

#contents.play > section.spotlist div.spot p {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#contents.play > section.spotlist div.spot:nth-of-type(2) p {
  background-image: url("../img/play/spot_1_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(3) p {
  background-image: url("../img/play/spot_2_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(4) p {
  background-image: url("../img/play/spot_3_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(5) p {
  background-image: url("../img/play/spot_4_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(6) p {
  background-image: url("../img/play/spot_5_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(7) p {
  background-image: url("../img/play/spot_6_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(8) p {
  background-image: url("../img/play/spot_7_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(9) p {
  background-image: url("../img/play/spot_8_pic.jpg");
}

#contents.play > section.spotlist div.spot:nth-of-type(10) p {
  background-image: url("../img/play/spot_9_pic.jpg");
}