@import url(https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap);

/*!
 * ress.css • v1.1.1
 * MIT License
 * github.com/filipelinhares/ress
 */

/* ========================================================

     Common

======================================================== */
html {

	box-sizing: border-box;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
*, ::before, ::after {
	box-sizing: inherit;
}
::before, ::after {
	text-decoration: inherit;
	vertical-align: inherit;
}
* {
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
	color: #000;
	font-style: normal;
	font: 16px/180% "M PLUS 1p",sans-serif;
	font-size: 1.3rem;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
hr {
	overflow: visible;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}
summary {
	display: list-item;
}
small {
	font-size: 80%;
}
[hidden], template {
	display: none;
}
abbr[title] {
	border-bottom: 1px dotted;
	text-decoration: none;
}
a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}
	a:active,
	a:hover {
		outline-width: 0;
		transition: .5s;
	}
code, kbd, pre, samp {
	font-family: monospace, monospace;
}
b, strong {
	font-weight: bolder;
}
dfn {
	font-style: italic;
}
mark {
	background-color: #ff0;
	color: #000;
	}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
li {
	list-style-type: none;
}
input {
	border-radius: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
	cursor: pointer;
}
[disabled] {
	cursor: default;
}
[type="number"] {
	width: auto;
}
[type="search"] {
	-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
textarea {
	overflow: auto;
	resize: vertical;
}
button,
input,
optgroup,
select,
textarea {
	font: inherit;
}
optgroup {
	font-weight: bold;

}
button {
	overflow: visible;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: 0;
	padding: 0;
}
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	outline: 1px dotted ButtonText;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}
button, select {
	text-transform: none;
}
button, input, select, textarea {
	background-color: transparent;
	border-style: none;
	color: inherit;
}
select {
	-moz-appearance: none;
	-webkit-appearance: none;
}
select::-ms-expand {
	display: none;
}
select::-ms-value {
	color: currentColor;
}
legend {
	border: 0;
	color: inherit;
	display: table;
	max-width: 100%;
	white-space: normal;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
	font: inherit;
}
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}
img {
	border-style: none;
	max-width: 100%;
	height: auto;
}
progress {
	vertical-align: baseline;
}
svg:not(:root) {
	overflow: hidden;
}
audio, canvas, progress, video {
	display: inline-block;
}

@media screen {
	[hidden~="screen"] {
		display:  block;
		isplay: inherit;
	}
	[hidden~="screen"]:not(:active):not(:focus):not(:target) {
		position: absolute !important;
		clip: rect(0 0 0 0) !important;
	}
}
[aria-busy="true"] {
	cursor: progress;
}
[aria-controls] {
	cursor: pointer;
}
[aria-disabled] {
	cursor: default;
}
::-moz-selection {
	background-color: #b3d4fc;
	color: #000;
	text-shadow: none;
}
::selection {
	background-color: #b3d4fc;
	color: #000;
	text-shadow: none;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
	@media screen and (max-width: 768px) {
		.pc {
			display: none;
		}
		.sp {
			display: block;
		}
	}
a:active img,
a:hover img {
	opacity: 0.5;
	transition: .5s;
}

/* ========================================================

     Rayout

======================================================== */
/* ------------------------------------------
     footer
------------------------------------------ */
.footer {	
	background-color: #e85382;
	text-align: center;
	padding: 33px;
}
	@media screen and (max-width:  750px) {
		.footer {
			padding-bottom: 16vw;
		}
	}
.footer__logo img {
	display: block;
	margin: 0 auto;
}
	@media screen and (max-width:  768px) {
		.footer__logo img {
			width: 105px;
		}
	}
.footer__copy {
	color: #fff;
	font-size: 20px;
	}
	@media screen and (max-width:  768px) {
		.footer__copy {
			font-size: 10px;
		}
	}

/* ------------------------------------------
     header
------------------------------------------ */
@keyframes animate {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-15px);
	}
}

/* ------------------------------------------
     main
------------------------------------------ */
.main {
	background-color: #ffe67a;
	margin: 0 auto;
}
.main__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 50px;
	position: relative;
}

/* ------------------------------------------
     MV
------------------------------------------ */
.title {
	padding: 0 0 35px;
	text-align: center;
	position: relative;
}
	@media screen and (max-width: 1024px) {
		.title {
			padding: 2vw 0 5.33333vw;
		}
	}
	@media screen and (max-width: 768px) {
		.title {
			padding: 5vw 0 3vw;
		}
	}
h1 {
	width: 700px;
	margin: 0 auto;
	padding-top: 50px;
}
	@media screen and (max-width: 1024px) {
		.title h1 {
			width: 70vw;
		}
	}
	@media screen and (max-width: 768px) {
		.title h1 {
			width: 88vw;
		}
	}
	@media screen and (max-width: 768px) {
		.title h1 {
			padding-top: 10px;
		}
	}
.title__parts {
	width: 120px;
	position: absolute;
	animation-name: animate;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
	@media screen and (max-width: 1024px) {
		.title__parts {
			width: 12.5vw;
		}
	}
	@media screen and (max-width: 768px) {
		.title__parts {
			width: 11vw;
		}
	}
	@media screen and (max-width: 750px) {
		.title__parts {
			display: none;
		}
	}
.title__parts.-parts01 {
	left: 80px;
	top: 10px;
	animation-delay: 200ms;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts01 {
			left: 10.5vw;
			top: 1.5vw;
		}
	}
.title__parts.-parts02 {
	right: 5px;
	top: 30px;
	width: 140px;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts02 {
			right: 2vw;
			top: 0;
			width: 13vw;
		}
	}
.title__parts.-parts03 {
	left: 30px;
	bottom: 0;
	width: 140px;
	animation-delay: 200ms;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts03 {
			left: 3vw;
			bottom: 1vw;
			width: 12.4vw;
		}
	}
.title__parts.-parts04 {
	left: 0;
	top: 180px;
	animation-delay: 200ms;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts04 {
			left: 0;
			top: 12vw;
		}
	}
.title__parts.-parts05 {
	right: 20px;
	bottom: 80px;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts05 {
			right: 3.5vw;
			bottom: 4vw;
		}
	}
.title__parts.-parts06 {
	right: 0;
	bottom: 210px;
}
	@media screen and (max-width: 768px) {
		.title__parts.-parts06 {
			bottom: 15vw;
		}
	}


/* ------------------------------------------
     cotents
------------------------------------------ */
.contents {
	max-width: 730px;
	margin: 0 auto;
}
	@media screen and (max-width: 768px) {
		.contents {
			width: 96%;
			margin: 0 auto;
		}
	}


/* ----- lead -----
--------------------------------- */
.lead {
	width: 80%;
	margin: 10px auto 0;
	padding: 20px;
}
	@media screen and (max-width: 750px) {
		.lead {
			padding: 0;
		}
	}
.lead img {
	width: 100%;
}


/* ----- movie -----
--------------------------------- */
.movie__section {
	display: flex;
	justify-content: center;
	margin: 30px auto;
}
	@media screen and (max-width: 750px) {
		.movie__section {
			margin-top: 0;
		}
	}
.movie__section iframe {
	width: 640px;
	height: 360px;
}
	@media screen and (max-width: 750px) {
		.movie__section iframe {
			width: 100%;
			height: auto;
			min-height: 240px;
		}
	}


/* ----- period -----
--------------------------------- */
.period__section dl {
	width: 100%;
	display: flex;
	margin: 0 auto;
}
	@media screen and (max-width: 750px) {
		.period__section dl {
			flex-wrap: wrap;
		}
	}
.period__section dt {
	width: 20%;
	background-color: #e85382;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	padding-top: 5px;
}
	@media screen and (max-width: 750px) {
		.period__section dt {
			width: 100%;
			border-bottom-left-radius: 0;
			border-top-right-radius: 10px;
		}
	}
.period__section dd {
	width: 80%;
	background-color: #fff;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}
	@media screen and (max-width: 750px) {
		.period__section dd {
			width: 100%;
			font-size: 2rem;
			border-top-right-radius: 0px;
			border-bottom-left-radius: 10px;
			padding: 15px 0;
		}
	}


/* ----- btn -----
--------------------------------- */
.btn a {
	display: block;
	background-color: #e85382;
	color: #fff100;
	width: 500px;
	font-size: 3.2rem;
	text-align: center;
	text-decoration: none;
	line-height: 3;
	border: 6px double #fff;
	border-radius: 10px;
	margin: 30px auto 0;
}
	@media screen and (max-width: 750px) {
		.btn a {
			width: 90%;
		}
	}
.btn a:hover {
	opacity: .8;
	transition: .3s all;
}

.contents__bg {
	background-color: #fff;
	border-radius: 10px;
	margin-top: 30px;
	padding: 30px 20px;
}
.contents__section {
	position: relative;
}
.contents__bg h2 {
	background-color: #e85382;
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	border-radius: 6px;
	margin: 50px auto 20px;
	padding: 0 20px 5px;
}
.contents__bg h2.ttl {
	margin-top: 0;
}
.contents__bg h2.prize__ttl {
	margin: 130px auto 50px;
	z-index: 5;
}
	@media screen and (max-width: 767px) {
		.contents__bg h2.prize__ttl {
			margin: 20px auto 30px;
		}
	}
.balloon {
	position: absolute;
	width: 22%;
	top: -98px;
	left: 20%;
	z-index: 10;
}
	@media screen and (max-width: 767px) {
		.balloon {
			width: 28%;
			top: -40px;
			left: 11%;
		}
	}
.balloon img {
	width: 100%;
}


/* ----- character -----
--------------------------------- */
.contents__section .chara__lead {
	font-size: 2rem;
	text-align: center;
	line-height: 1.2;
	margin: 0 auto 10px;
}
.chara__wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 50px;
}
.chara__wrap .character {
	background-color: #efefef;
	border-radius: 6px;
	width: 48%;
	margin: 15px 1% 0;
}
	@media screen and (max-width: 750px) {
		.chara__wrap .character {
			width: 100%;
			margin: 15px 0 0;
		}
	}
.chara__img {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 200px;
	padding: 20px 15px 0;
}
.chara__img img {
	height: 100%;
}
.chara__txt {
	padding: 15px;
}
.chara__txt dt {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left !important;
}
.chara__txt dd {
	font-size: 1.6rem;
	text-align: left !important;
}


/* ----- prize -----
--------------------------------- */
.contents__section .prize__lead {
	font-size: 2rem;
	text-align: center;
	line-height: 1.2;
	margin: 0 auto 10px;
}
.contents__section .prize__note {
	font-size: 1.6rem;
}


/* ----- howto -----
--------------------------------- */
ol {
	width: 94%;
	margin: 40px auto 0;
}
	@media screen and (max-width: 750px) {
		ol {
			width: 100%;
		}
	}
ol li {
	font-size: 2.2rem;
	line-height: 1.4;
	margin: 0 0 15px 2rem;
	list-style: none;
}
	@media screen and (max-width: 768px) {
		ol li {
			font-size: 1.8rem;
			margin-bottom: 10px;
		}
	}
ol li b {
	color: #e60012;
	font-size: 2.2rem;
	line-height: 1.4;
}


/* ----- howto -----
--------------------------------- */
.product__wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 20px;
}
.product__item {
	display: flex;
	flex-wrap: wrap;
	width: 23%;
	text-align: center;
	margin: 0 auto;
}
	@media screen and (max-width: 768px) {
		.product__item {
			width: 48%;
		}
	}
.product__item .products {
	width: 100%;
	margin-top: -35px;
	z-index: 0;
}
	@media screen and (max-width: 768px) {
		.product__item .products {
			margin-top: -30px;
		}
	}
.product__item .point {	
	width: 60%;
	margin: 0 auto;
	z-index: 10;
}
.product__item p {	
	width: 100%;
	line-height: 1.2;
	margin-bottom: 60px;
}
	@media screen and (max-width: 768px) {
		.product__item p {
			margin-bottom: 30px;
		}
	}


/* ----- target, rule -----
--------------------------------- */
ul {
	width: 94%;
	margin: 30px auto 50px;
}
ul li {
	font-size: 2rem;
	text-indent: -2rem;
	line-height: 1.4;
	margin: 0 0 12px 1rem;
	list-style: none;
}
	@media screen and (max-width: 768px) {
		.contents__section ul li {
			margin-bottom: 10px;
		}
	}
.happyou {
	width: 94%;
	margin: 0 auto;
	font-size: 2rem;
}
	@media screen and (max-width: 750px) {
		.happyou {
			line-height: 1.4;
		}
	}


/* ----- contact -----
--------------------------------- */
.contents__section dt {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}
.contents__section dd {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.2;
}
.contents__section p.tac {
	font-size: 1.6rem;
	text-align: center;
	margin: 10px auto 20px;
}
	@media screen and (max-width: 750px) {
		.contents__section p.tac {
			line-height: 1.2;
		}
	}


/* ----- banner -----
--------------------------------- */
.float {
	position: fixed;
	bottom: 50px;
	right: 0;
	z-index: 20;
}
	@media screen and (max-width: 750px) {
		.float {
			bottom: 0;
		}
	}
.float a {
	display: block;
	width: 260px;
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	padding: 20px;
}
	@media screen and (max-width: 750px) {
		.float a {
			display: flex;
			width: 100%;
			border-radius: 0;
			padding-bottom: 0;
		}
	}
.float img {
	width: 100%;
}
	@media screen and (max-width: 750px) {
		.float picture {
			width: 48%;
			margin-right: 2%;
		}
		.float .float_right {
			width: 50%;
		}
	}
.float .float_txt {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 10px;
}
	@media screen and (max-width: 750px) {
		.float .float_txt {
			font-size: 1.8rem;
		}
	}
.float .bnr_btn {
	background-color: #0099d9;
	color: #fff;
	font-size: 1.8rem;
	border-radius: 6px;
}
	@media screen and (max-width: 750px) {
		.float .bnr_btn {
			width: 90%;
			margin: 0 auto;
		}
	}
.float a:hover {
	opacity: .8;
	transition: .3s all;
}
body {
	width: auto;
}