@charset "UTF-8";
/**
 * トピックス
 * 
 * 
 */
/* ==========================================================================
   あーなちゃん
   ========================================================================== */
/* body#character {overflow-x: hidden;} */
body, p {
  margin: 0;
}

#contWrapper {
  width: 100%;
  position: relative;
}

#ci {
  position: absolute;
  top: 0;
  right: 17px;
  width: 199px;
  height: 55px;
}

#cont1 {
  height: 457px;
  background: url(img/bg1.gif) no-repeat center 0;
  position: relative;
}

#cont2 {
  height: 402px;
  background: url(img/bg2.gif) no-repeat center 0;
  position: relative;
}

#cont3 {
  height: 684px;
  background: url(img/bg3.gif) no-repeat center 0;
  position: relative;
}

#cont4 {
  height: 513px;
  background: url(img/bg4.gif) no-repeat center 0;
  position: relative;
}

#cont5 {
  height: 646px;
  background: url(img/bg5.gif) no-repeat center 0;
  position: relative;
}

#cont6 {
  height: 257px;
  background: url(img/bg6.gif) no-repeat center 0;
  position: relative;
}

.cont {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

#img1 {
  position: absolute;
  top: 30px;
  left: 129px;
}

#img2 {
  position: absolute;
  top: -121px;
  left: 113px;
}

#img3 {
  position: absolute;
  top: 119px;
  left: 588px;
}

#img4 {
  position: absolute;
  top: 85px;
  left: 130px;
}

#img5 {
  position: absolute;
  top: 55px;
  left: 195px;
}

#fb {
  position: absolute;
  top: 125px;
  left: 320px;
}

#img6 {
  position: absolute;
  top: 5px;
  left: 315px;
}

#img7 {
  position: absolute;
  top: 11px;
  left: 891px;
}

#img_bnr {
  border: 3px solid #fff;
  position: absolute;
  top: 225px;
  left: 32%;
}

#copyright-ana {
  position: absolute;
  top: 175px;
  left: 5px;
}

.sp-item {
  display: none;
}

.pc-item {
  display: block;
}

@media screen and (max-width: 767px) {
  .sp-item {
    display: block;
  }

  .pc-item {
    display: none;
  }

  body {
    width: 100%;
  }

  #ci {
    top: 0;
    right: 1vw;
    width: auto;
    height: auto;
  }

  #cont1 {
    height: 457px;
    background: url(img/bg1.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont2 {
    height: 402px;
    background: url(img/bg2.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont3 {
    height: 110vh;
    background: url(img/bg3.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont4 {
    height: 90vh;
    background: url(img/bg4.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont5 {
    height: 90vh;
    background: url(img/bg5.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont6 {
    height: 23vh;
    background: url(img/bg6.gif) no-repeat 55% 0;
    position: relative;
  }

  #cont3, #cont4, #cont5 {
    background: none;
  }

  .cont {
    width: 90%;
  }

  #img1 {
    top: 15vw;
    left: 0;
  }
  #img1 img {
    width: 100%;
    height: auto;
  }

  #img2 {
    top: -45vw;
    left: -4vw;
  }
  #img2 img {
    width: 95%;
    height: auto;
  }

  #img3 {
    top: 15vw;
    left: 0;
  }
  #img3 .img1 {
    width: 46%;
    height: auto;
    margin: 0 auto 6vw;
    display: block;
  }
  #img3 .img2 {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  #img4 {
    border: 3px solid #ddd;
    border-radius: 8px;
    padding: 10vw;
    top: 0vw;
    left: 0px;
  }
  #img4 img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  #img5 {
    top: 10vw;
    left: 0;
  }
  #img5 img {
    width: 100%;
    height: auto;
  }

  #img_bnr {
    top: 40vw;
    left: 0;
  }
  #img_bnr img {
    width: 100%;
    height: auto;
  }

  #fb {
    top: 23vw;
    left: 0;
  }
  #fb span iframe {
    display: block;
    margin: 0 auto;
    width: 100% !important;
  }

  #img6 {
    top: 5vw;
    left: 0px;
  }
  #img6 img {
    width: 70%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  #img7 {
    display: none;
  }

  #copyright-ana {
    top: 30vw;
    left: 5px;
  }
}