@charset "utf-8";

/* header */
#header {
  background-color: #FFFFFF;
}

/* main */
#main {
  margin: 0 0 64px;
}
#main .inner {
  background-color: #FEFCDF;
  background-image: url(../img/bg_1.png);
  width: 720px;
}
#main h1 {
  background-color: #FEFCDF;
  background-image: url(../img/bg_1.png);
  margin: 0;
  padding: 0;
  text-align: center;
}
#main h1 img {
  width: 720px;
}

/* lead */
#lead {
  margin: 0 auto;
  padding: 32px 0 48px;
  text-align: center;
  width: 720px;
}
#lead p {
  font: 700 2.6rem/1.6em source-han-sans-japanese, sans-serif;
  font-feature-settings: "palt";
}
#lead p .marker1 {
  background: linear-gradient(transparent 45%, rgba(253,238,33,0.80) 45%);  
}

/* pbox */
.pbox {
  margin: 0 auto;
  text-align: center;
  width: 720px;
}
.pbox h2 {
  padding: 0;
  margin: 0;
  line-height: 0px;
}
.pbox p {
  font: 700 2rem/1.6em source-han-sans-japanese, sans-serif;
  padding: 16px 0 0;
  margin: 0 0 16px;
}
.pbox h3 {
  padding: 10px 0 8px;
  margin: 0 0 16px;
  background-color: #34356C;
}
#present1 {
  margin: 0 auto 32px;
}
#present1 ul li {
  list-style: none;
  margin: 0 0 16px;
  background-color: #E5007F;
  padding: 12px 0;
  background-image: url(../img/bg_2.png);
}
#present2 .sample {
  margin: 0 0 24px;
}
#present2 .notice {
  font-size: 1.3rem;

}

/* comics */
.comics {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.comics .cb {
  margin: 0 auto 32px;
  -ms-flex-preferred-size: 210px;
  flex-basis: 210px;
}
.comics .cb img {
  margin: 0 0 8px;
  display: block;
  width: 100%;
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.50);
  box-shadow: 1px 1px 5px rgba(0,0,0,0.50);
}
.comics .cb a {
  color: #FDFE7B;
  background-color: #E5007F;
  background-image: url(../img/cursor.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  display: block;
  font: 700 2.4rem/1em source-han-sans-japanese, sans-serif;
  text-align: center;
  text-decoration: none;
  padding: 14px 0 16px;
  opacity: 1.0;
}
.comics .cb a:hover {
  opacity: 0.6;
}

/* appli info */
#app_info {
  text-align: center;
  margin: 0 auto;
  padding: 32px 0;
  width: 25%;
}
#app_info p a img {
  width: 100%;
}

/* inview */
.zoom {
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transition: .8s;
}
.zoom_tg {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transition: .8s;
}
.upfadein {
  opacity: 0;
  transform: translate(0,60px); 
  -webkit-transform: translate(0,60px);
  transition: .6s;
}
.upfadein_tg {
  opacity: 1.0;
  transform: translate(0,0); 
  -webkit-transform: translate(0,0);
  transition: .6s;
}