@charset "utf-8";
/* iplus..CSS Document */
/* font(Noto Sans Japanese) */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*  General CSS*/

/* wrapper
------------------------------------------------------------*/
#wrapper {
  width: 100%;
  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
/* container
------------------------------------------------------------*/
#container {
  max-width: 750px;
  width: 100%;
  margin: auto;
  background-color: #ffffff;
}
/* header
------------------------------------------------------------*/
header {position: relative;}
header div {
  width: min(calc(514 / 750 * 100vw), 514px);
  position: absolute;
  top: 9.5%;
  left: 19%;
}
header h1 {
  width: min(calc(628 / 750 * 100vw), 628px);
  position: absolute;
  top: 17%;
  left: 12%;
}
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity 0.8s, transform 0.3s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 0.3s; /* フェード開始を0.5秒遅らせる */
}

/* main
------------------------------------------------------------*/
.cp-area {
  position: relative;
  background-color: #f9e2e5;
  padding: 18% 0 10%;
}
.cp-area .cp-title {
  width: 100%;
  position: absolute;
  top: -0.6%;
  background-image: url("../images/cp_title_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: 7% 9% 0;
}
.cp-area .cp-date {
  width: min(calc(657 / 750 * 100vw), 657px);
  margin: 0 auto 5%;
}
.cp-area .inner {
  padding: 0 6.5%;
}
.cp-area .note {
  margin-bottom: 28%;
}
.cp-area .note li {
	font-size: min(calc(26 / 750 * 100vw), 26px);
	padding-left: 1em;
	text-indent: -1em;
}
.cp-contents {
  width: 87%;
  padding-bottom: 7%;
  background-image: url("../images/cp_detail_bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto 5%;
}
.cp-contents .illustA {
  width: min(calc(662 / 750 * 100vw), 662px);
  position: absolute;
  top: -3%;
  left: 50%;
  transform: translateX(-50%);
}
.cp-detail {
  width: 90%;
  margin: auto;
  padding: 10% 0 5%;
}
.cp-btn-area {
  width: 90%;
  margin: 0 auto 7%;
}
.cp-btn-area p {
  width: 93%;
  margin: 0 auto 1%;
}
.cp-btn-area div {
  display: flex;
  justify-content: space-between;
}
.cp-btn-area div a {
  width: 48%;
}
#enjoy {
  position: relative;
  padding-top: 10%;
  margin-bottom: 5%;
}
#enjoy h4 {
  position: absolute;
  width: 83%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#enjoy .bg {
  padding: 34% 0 7%;
  width: 90%;
  margin: auto;
  background-image: url("../images/enjoy_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
#enjoy p {
  width: 75%;
  margin: 0 auto 4%;
}
#enjoy .gift {
	width: min(calc(528 / 750 * 100vw), 528px);
	margin: 0 auto 6%;
}
#enjoy .fee {
  width: 71%;
  margin: auto;
}
#premium {
  position: relative;
  padding-top: 10%;
  margin-bottom: 5%;
}
#premium h4 {
  position: absolute;
  width: 83%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#premium .bg {
  padding: 34% 0 7%;
  width: 90%;
  margin: auto;
  background-image: url("../images/premium_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
#premium p.detail {
  width: 75%;
  margin: 0 auto;
}
#premium ul {
  width: calc(522 / 588 * 100%);
  margin: 0 auto 4%;
}
#premium .comments {
  text-align: center;
  font-size: min(calc(26 / 750 * 100vw), 26px);
  margin-bottom: 4%;
}
#premium .fee {
  width: 79%;
  margin: auto;
}
.gift-note {
  width: 84%;
  margin: 0 auto;
  font-size: min(calc(26 / 750 * 100vw), 26px);
  padding-left: 1em;
  text-indent: -1em;
}
.about-usage {
  width: 87%;
  margin: 0 auto 8%;
}
.about-usage h4 {
  background: #ffffff;
  color: #7d6453;
  text-align: center;
  font-size: min(calc(30 / 750 * 100vw), 30px);
  padding: 1%;
  border-radius: 50px;
  margin-bottom: 3%;
}
.about-usage ul li {
  font-size: min(calc(24 / 750 * 100vw), 24px);
  padding-left: 1em;
  text-indent: -1em;
}
.illustB {
  text-align: center;
  margin-bottom: 8%;
}
.illustB img {
  width: 94%;
}
.x-cp {
  background: #dff0ee;
  border-radius: 50px;
  position: relative;
  padding: 52% 0 8%;
  margin-bottom: 8%;
}
.x-cp .illust {
  width: min(calc(500 / 750 * 100vw), 500px);
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.x-cp h4 {
  width: 78%;
  margin: 0 auto 3%;
}
.x-cp .cp-detail {
  margin-bottom: 5%;
}
.x-cp p {
  width: min(calc(468 / 750 * 100vw), 468px);
  margin: 0 auto 2%;
}
.x-cp a {
  display: block;
  width: min(calc(473 / 750 * 100vw), 473px);
  margin: auto;
}
.cp-area .shop {
  background-color: #ffffff;
  padding: 10% 0;
  border-radius: 50px;
}
.cp-area .shop .illust {
  width: min(calc(422 / 750 * 100vw), 422px);
  margin: 0 auto 6.5%;
}
.cp-area .shop p {
  width: 69%;
  margin: 0 auto 3%;
}
.cp-area .shop a {
  display: block;
  width: 71%;
  margin: auto;
}
.sns-area {
  width: 100%;
  background: url("../images/sns_bg.jpg") no-repeat;
  background-size: cover;
  padding: 13% 0;
}
.sns-area div {
  width: 79%;
  margin: 0 auto 8%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.sns-area div:last-child {
  margin-bottom: 0;
}
.sns-area div p {
  width: 76%;
}
.sns-area div a {
  display: block;
  width: 21%;
}
.sns-area div a:hover {
  transition: transform 0.6s;
  transform: rotate(360deg);
  opacity: 1;
}
.movie-area {
  position: relative;
  padding: 10% 0;
}
.movie-area .illust {
  width: min(calc(419 / 750 * 100vw), 419px);
  margin: 0 auto 3%;
}
.movie-area p {
  width: min(calc(597 / 750 * 100vw), 597px);
  margin: 0 auto 3%;
}
.movie-area .movie-img {
  width: min(calc(638 / 750 * 100vw), 638px);
  margin: auto;
}
/* footer
------------------------------------------------------------*/
footer .movie-copyright {
	background-color: #f9e2e5;
	color: #7e634c;
	text-align: center;
	font-size: min(calc(26 / 750 * 100vw), 26px);
	padding: 8% 0;
	margin-bottom: 8%;
}
footer .contact {
	text-align: center;
	font-size: min(calc(26 / 750 * 100vw),26px);
}
footer .contact dt {margin-bottom: 3%;}
footer .ff-copyright {
  text-align: center;
  font-size: min(calc(26 / 750 * 100vw), 26px);
  padding: 7% 0;
}