@charset "UTF-8";
#anpanman {
  /* 共通 */
  /* top_mv */
  /* top_product */
  /* top_study */
  /* top_play */
}
#anpanman .top_mv h1, #anpanman .top_mv h2, #anpanman .top_mv h3, #anpanman .top_mv p,
#anpanman .top_product h1,
#anpanman .top_product h2,
#anpanman .top_product h3,
#anpanman .top_product p,
#anpanman .top_study h1,
#anpanman .top_study h2,
#anpanman .top_study h3,
#anpanman .top_study p,
#anpanman .top_play h1,
#anpanman .top_play h2,
#anpanman .top_play h3,
#anpanman .top_play p {
  margin: 0;
}
#anpanman .top_mv img,
#anpanman .top_product img,
#anpanman .top_study img,
#anpanman .top_play img {
  display: block;
}
#anpanman .top_mv a,
#anpanman .top_product a,
#anpanman .top_study a,
#anpanman .top_play a {
  color: #000;
  display: block;
  outline: none;
  text-decoration: none;
}
#anpanman .top_mv a:hover,
#anpanman .top_product a:hover,
#anpanman .top_study a:hover,
#anpanman .top_play a:hover {
  opacity: 0.9;
}
#anpanman .top_mv ul,
#anpanman .top_product ul,
#anpanman .top_study ul,
#anpanman .top_play ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#anpanman .top_mv span,
#anpanman .top_product span,
#anpanman .top_study span,
#anpanman .top_play span {
  display: inline-block;
}
#anpanman .top_mv:not(.top_mv),
#anpanman .top_product:not(.top_mv),
#anpanman .top_study:not(.top_mv),
#anpanman .top_play:not(.top_mv) {
  padding-top: calc(8vw + 45px);
  margin-top: calc(-8vw - 45px);
  position: relative;
  z-index: 9;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  #anpanman .top_mv:not(.top_mv),
#anpanman .top_product:not(.top_mv),
#anpanman .top_study:not(.top_mv),
#anpanman .top_play:not(.top_mv) {
    padding-top: 125px;
    margin-top: -125px;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv:not(.top_mv),
#anpanman .top_product:not(.top_mv),
#anpanman .top_study:not(.top_mv),
#anpanman .top_play:not(.top_mv) {
    padding-top: 15vw;
    margin-top: -15vw;
  }
}
#anpanman .top_mv:not(.top_mv):before,
#anpanman .top_product:not(.top_mv):before,
#anpanman .top_study:not(.top_mv):before,
#anpanman .top_play:not(.top_mv):before {
  content: "";
  width: 110%;
  height: 16vw;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 45px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 769px) {
  #anpanman .top_mv:not(.top_mv):before,
#anpanman .top_product:not(.top_mv):before,
#anpanman .top_study:not(.top_mv):before,
#anpanman .top_play:not(.top_mv):before {
    min-height: 160px;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv:not(.top_mv):before,
#anpanman .top_product:not(.top_mv):before,
#anpanman .top_study:not(.top_mv):before,
#anpanman .top_play:not(.top_mv):before {
    width: 150%;
    height: 30vw;
    top: 7vw;
  }
}
#anpanman .top_mv:not(.top_mv):after,
#anpanman .top_product:not(.top_mv):after,
#anpanman .top_study:not(.top_mv):after,
#anpanman .top_play:not(.top_mv):after {
  content: "";
  width: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: top center;
  position: absolute;
  left: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv:not(.top_mv):after,
#anpanman .top_product:not(.top_mv):after,
#anpanman .top_study:not(.top_mv):after,
#anpanman .top_play:not(.top_mv):after {
    height: 100% !important;
    background-size: 100%;
  }
}
#anpanman .top_mv:not(.top_mv) h2,
#anpanman .top_product:not(.top_mv) h2,
#anpanman .top_study:not(.top_mv) h2,
#anpanman .top_play:not(.top_mv) h2 {
  width: 500px;
  margin: calc(-8vw - 45px) auto 0;
}
@media screen and (max-width: 1000px) {
  #anpanman .top_mv:not(.top_mv) h2,
#anpanman .top_product:not(.top_mv) h2,
#anpanman .top_study:not(.top_mv) h2,
#anpanman .top_play:not(.top_mv) h2 {
    margin-top: -125px;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv:not(.top_mv) h2,
#anpanman .top_product:not(.top_mv) h2,
#anpanman .top_study:not(.top_mv) h2,
#anpanman .top_play:not(.top_mv) h2 {
    width: 80%;
    margin: -15vw auto 0;
  }
}
#anpanman .top_mv:not(.top_mv) h2 img,
#anpanman .top_product:not(.top_mv) h2 img,
#anpanman .top_study:not(.top_mv) h2 img,
#anpanman .top_play:not(.top_mv) h2 img {
  width: 100%;
}
#anpanman .top_mv:not(.top_mv) > div,
#anpanman .top_product:not(.top_mv) > div,
#anpanman .top_study:not(.top_mv) > div,
#anpanman .top_play:not(.top_mv) > div {
  padding-bottom: 16.5vw;
}
@media screen and (max-width: 1000px) {
  #anpanman .top_mv:not(.top_mv) > div,
#anpanman .top_product:not(.top_mv) > div,
#anpanman .top_study:not(.top_mv) > div,
#anpanman .top_play:not(.top_mv) > div {
    padding-bottom: 165px;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv:not(.top_mv) > div,
#anpanman .top_product:not(.top_mv) > div,
#anpanman .top_study:not(.top_mv) > div,
#anpanman .top_play:not(.top_mv) > div {
    padding-bottom: 22vw;
  }
}
#anpanman .top_mv:not(.top_mv) > div .wrapper,
#anpanman .top_product:not(.top_mv) > div .wrapper,
#anpanman .top_study:not(.top_mv) > div .wrapper,
#anpanman .top_play:not(.top_mv) > div .wrapper {
  position: relative;
  z-index: 9;
}
#anpanman .top_mv:not(.top_mv) > div .wrapper ul,
#anpanman .top_product:not(.top_mv) > div .wrapper ul,
#anpanman .top_study:not(.top_mv) > div .wrapper ul,
#anpanman .top_play:not(.top_mv) > div .wrapper ul {
  display: flex;
  flex-wrap: wrap;
}
#anpanman .top_mv:not(.top_mv) > div .wrapper ul li,
#anpanman .top_product:not(.top_mv) > div .wrapper ul li,
#anpanman .top_study:not(.top_mv) > div .wrapper ul li,
#anpanman .top_play:not(.top_mv) > div .wrapper ul li {
  box-sizing: border-box;
}
#anpanman .top_mv {
  padding: 4.5% 0 28.4%;
  background: url(../img/mv_bg.png), linear-gradient(#00b3f9, #75d6fc);
  background-size: 100%;
  background-position: 12%;
  background-repeat: no-repeat;
  position: relative;
  padding: 12% 0 28.4%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv {
    padding: 5% 0 26.7%;
    background-position: top -20% center;
    padding: 22% 0 27.4%;
    background-position: top 60% center;
  }
}
#anpanman .top_mv h2 {
  margin-bottom: 2.6%;
  position: relative;
  z-index: 9;
}
#anpanman .top_mv h2 img {
  width: 29%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv h2 img {
    width: 34%;
    margin-bottom: -2%;
  }
}
#anpanman .top_mv .img_box {
  height: 30vw;
  position: relative;
}
@media screen and (min-width: 769px) {
  #anpanman .top_mv .img_box {
    min-height: 300px;
  }
}
#anpanman .top_mv .img_box img {
  position: absolute;
}
#anpanman .top_mv .img_box img:nth-child(1) {
  width: 17.5%;
  right: 25%;
  bottom: -10%;
}
#anpanman .top_mv .img_box img:nth-child(2) {
  width: 13.5%;
  top: 1%;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#anpanman .top_mv .img_box img:nth-child(3) {
  width: 10%;
  bottom: -7%;
  left: 27%;
}
#anpanman .top_mv .img_box img:nth-child(4) {
  width: 13.5%;
  right: 27%;
  top: 22%;
}
#anpanman .top_mv .img_box img:nth-child(5) {
  width: 10%;
  top: 3%;
  left: 30%;
}
#anpanman .top_mv .img_box img:nth-child(6) {
  width: 15%;
  left: 40%;
  bottom: 4%;
  transform: rotate(-15deg);
}
#anpanman .top_mv .banner {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 42%;
  z-index: 999;
}
@media screen and (min-width: 769px) {
  #anpanman .top_mv .banner {
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_mv .banner {
    width: 94%;
    top: 3%;
    right: 0;
    left: 0;
    margin: auto;
  }
}
#anpanman .top_mv .banner img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product .wrapper {
    width: 87%;
  }
}
#anpanman .top_product:before {
  background-color: #ffefe8;
}
#anpanman .top_product:after {
  height: 880px;
  background-image: url(../img/product_bg.png);
  top: 10%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product:after {
    background-image: url(../img/product_bg_sp.png);
    top: 10%;
  }
}
#anpanman .top_product > div {
  padding-top: 55px;
  background-color: #ffefe8;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div {
    padding-top: 5vw;
  }
}
#anpanman .top_product > div ul li,
#anpanman .product_cont .item_box > ul > li {
  width: 30%;
  background-color: #ff7533;
  border: 2px #ff7533 solid;
  border-radius: 30px;
  margin: 0 5% 50px 0;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #anpanman .top_product > div ul li:nth-child(3n),
#anpanman .product_cont .item_box > ul > li:nth-child(3n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li,
#anpanman .product_cont .item_box > ul > li {
    width: 46%;
    border-width: 1px;
    border-radius: 4vw;
    margin: 0 8% 6% 0;
  }
  #anpanman .top_product > div ul li:nth-child(2n),
#anpanman .product_cont .item_box > ul > li:nth-child(2n) {
    margin-right: 0;
  }
}
#anpanman .top_product > div ul li a > div,
#anpanman .product_cont .item_box > ul > li a > div {
  background-color: #fff;
}
#anpanman .top_product > div ul li a > div .img_box,
#anpanman .product_cont .item_box > ul > li a > div .img_box {
  padding: 30px 0;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li a > div .img_box,
#anpanman .product_cont .item_box > ul > li a > div .img_box {
    padding: 4vw 0;
  }
}
#anpanman .top_product > div ul li a > div .img_box img,
#anpanman .product_cont .item_box > ul > li a > div .img_box img {
  height: 166px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li a > div .img_box img,
#anpanman .product_cont .item_box > ul > li a > div .img_box img {
    height: 22vw;
  }
}
#anpanman .top_product > div ul li h3,
#anpanman .product_cont .item_box > ul > li h3 {
  padding: 14px 0;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li h3,
#anpanman .product_cont .item_box > ul > li h3 {
    padding: 2vw 0;
  }
}
#anpanman .top_product > div ul li h3 img,
#anpanman .product_cont .item_box > ul > li h3 img {
  height: 42px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li h3 img,
#anpanman .product_cont .item_box > ul > li h3 img {
    height: 6vw;
  }
}
#anpanman .top_product > div ul li h3.big,
#anpanman .product_cont .item_box > ul > li h3.big {
  padding: 8px 0;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li h3.big,
#anpanman .product_cont .item_box > ul > li h3.big {
    padding: 1vw 0;
  }
}
#anpanman .top_product > div ul li h3.big img,
#anpanman .product_cont .item_box > ul > li h3.big img {
  height: 54px;
}
@media screen and (max-width: 768px) {
  #anpanman .top_product > div ul li h3.big img,
#anpanman .product_cont .item_box > ul > li h3.big img {
    height: 8vw;
  }
}
#anpanman .top_study:before {
  background-color: #e0f6ec;
}
#anpanman .top_study:after {
  height: 600px;
  background-image: url(../img/study_bg.png);
  top: 10%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study:after {
    background-image: url(../img/study_bg_sp.png);
    top: 13%;
  }
}
#anpanman .top_study > div {
  padding-top: 80px;
  background-color: #e0f6ec;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div {
    padding-top: 5vw;
  }
}
#anpanman .top_study > div .wrapper {
  max-width: 890px;
}
#anpanman .top_study > div ul li,
#anpanman .study_cont .wrapper > ul > li {
  width: 47%;
  margin-right: 6%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li,
#anpanman .study_cont .wrapper > ul > li {
    width: 48%;
    margin-right: 4%;
  }
}
#anpanman .top_study > div ul li:nth-child(1) a,
#anpanman .study_cont .wrapper > ul > li:nth-child(1) a {
  border-color: #008bd5;
}
#anpanman .top_study > div ul li:nth-child(1) a h3,
#anpanman .study_cont .wrapper > ul > li:nth-child(1) a h3 {
  background-color: #008bd5;
}
#anpanman .top_study > div ul li:nth-child(2),
#anpanman .study_cont .wrapper > ul > li:nth-child(2) {
  margin: 0;
}
#anpanman .top_study > div ul li:nth-child(2) a,
#anpanman .study_cont .wrapper > ul > li:nth-child(2) a {
  border-color: #ff5757;
}
#anpanman .top_study > div ul li:nth-child(2) a h3,
#anpanman .study_cont .wrapper > ul > li:nth-child(2) a h3 {
  background-color: #ff5757;
}
#anpanman .top_study > div ul li a,
#anpanman .study_cont .wrapper > ul > li a {
  padding-bottom: 36px;
  background-color: #fff;
  border: 4px solid;
  border-radius: 30px;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a,
#anpanman .study_cont .wrapper > ul > li a {
    padding-bottom: 5vw;
    border-width: 2px;
    border-radius: 3vw;
    overflow: hidden;
  }
}
#anpanman .top_study > div ul li a h3,
#anpanman .study_cont .wrapper > ul > li a h3 {
  width: 360px;
  padding: 24px 0;
  border-radius: 20px;
  margin: -35px auto 25px;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a h3,
#anpanman .study_cont .wrapper > ul > li a h3 {
    width: 100%;
    padding: 3vw 0;
    border-radius: 0;
    margin: 0 0 2.5vw;
  }
}
#anpanman .top_study > div ul li a h3 img,
#anpanman .study_cont .wrapper > ul > li a h3 img {
  height: 22px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a h3 img,
#anpanman .study_cont .wrapper > ul > li a h3 img {
    height: 9vw;
  }
}
#anpanman .top_study > div ul li a .img_box,
#anpanman .study_cont .wrapper > ul > li a .img_box {
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a .img_box,
#anpanman .study_cont .wrapper > ul > li a .img_box {
    margin-bottom: 3vw;
  }
}
#anpanman .top_study > div ul li a .img_box img,
#anpanman .study_cont .wrapper > ul > li a .img_box img {
  height: 214px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a .img_box img,
#anpanman .study_cont .wrapper > ul > li a .img_box img {
    height: 30vw;
  }
}
#anpanman .top_study > div ul li a p img,
#anpanman .study_cont .wrapper > ul > li a p img {
  height: 52px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #anpanman .top_study > div ul li a p img,
#anpanman .study_cont .wrapper > ul > li a p img {
    height: 8vw;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_play .wrapper {
    width: 87%;
  }
}
#anpanman .top_play:before {
  background-color: #f3f1fa;
}
#anpanman .top_play:after {
  height: 495px;
  background-image: url(../img/play_bg.png);
  top: 20%;
}
@media screen and (max-width: 768px) {
  #anpanman .top_play:after {
    background-image: url(../img/play_bg_sp.png);
    top: 15%;
  }
}
#anpanman .top_play > div {
  padding: 40px 0 80px !important;
  background-color: #f3f1fa;
}
@media screen and (max-width: 768px) {
  #anpanman .top_play > div {
    padding: 7vw 0 8.5vw !important;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_play ul,
#anpanman .play_cont .wrapper > ul {
    justify-content: center;
  }
}
#anpanman .top_play ul li,
#anpanman .play_cont .wrapper > ul li {
  width: 30%;
  margin-right: 5%;
}
@media screen and (min-width: 769px) {
  #anpanman .top_play ul li:nth-child(3n),
#anpanman .play_cont .wrapper > ul li:nth-child(3n) {
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  #anpanman .top_play ul li,
#anpanman .play_cont .wrapper > ul li {
    width: 46%;
    margin: 0 0 2.5vw;
  }
  #anpanman .top_play ul li:first-child,
#anpanman .play_cont .wrapper > ul li:first-child {
    margin-right: 8%;
  }
  #anpanman .top_play ul li:last-child,
#anpanman .play_cont .wrapper > ul li:last-child {
    margin-bottom: 0;
  }
}
#anpanman .top_play ul li .img_box img,
#anpanman .play_cont .wrapper > ul li .img_box img {
  width: 100%;
}
#anpanman .top_play ul li p,
#anpanman .play_cont .wrapper > ul li p {
  width: 97%;
  margin: -28% auto 0;
}
#anpanman .top_play ul li p img,
#anpanman .play_cont .wrapper > ul li p img {
  width: 100%;
}
#anpanman .banner_box {
  width: 100%;
  padding: 30px 0;
  background-color: #fffcd0;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #anpanman .banner_box {
    padding: 20px 0;
    display: block;
  }
}
#anpanman .banner_box a {
  width: 300px;
  display: block;
  margin: 0 40px;
}
@media screen and (max-width: 768px) {
  #anpanman .banner_box a {
    width: 87%;
    margin: 0 auto 10px;
  }
  #anpanman .banner_box a:last-child {
    margin-bottom: 0;
  }
}
#anpanman .banner_box a img {
  width: 100%;
}

/*# sourceMappingURL=index.css.map */