@charset "UTF-8";
/* ############################################
	基本設定CSS
############################################ */

html {
	font-size: 62.5%;
}

body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
	font-size: 1.6rem;
	line-height: 1.5;
	word-wrap: break-word;
	word-break: break-all;
	color: #000000;
	background: #ffffff;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

.color-red {
	color: red;
}

/*==============================
	リンク
==============================*/

a {
	text-decoration: underline;
	color: red;
}

a:hover {
	text-decoration: none;
}

/*==============================
	画像
==============================*/

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*==============================
	改行調整
==============================*/

.nowrap {
	display: inline-block;
	width: max-content;
	white-space: nowrap;
	text-indent: initial;
}

/*==============================
	チェックボックス・ラジオボタン
==============================*/

input[type="checkbox"],
input[type="radio"] {
	z-index: -1;
	display: block;
	float: left;
	width: 1em;
	margin-right: -2rem;
	opacity: 0;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	position: relative;
	display: inline-block;
	padding-left: 1.9em;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
	line-height: 1.65em;
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 1.4em;
	height: 1.4em;
	content: " ";
	transform: translateY(-50%);
	text-align: center;
	border: solid 2px;
	border-color: #1b2a75;
	background: #ffffff;
}

input[type="checkbox"] + label.error:before,
input[type="radio"] + label.error:before {
	border-color: #e60012;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
	content: "";
	color: #ffffff;
	border-color: #1b2a75;
	background-color: #1b2a75;
	background-image: url(../img/check-solid.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80% 80%;
}

/*==============================
	テキスト入力ボックス
==============================*/

input[type="text"],
input[type="tel"],
input[type="email"] {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1em;
	display: block;
	width: 100%;
	padding: 0.5em 0.75em;
	text-decoration: none;
	color: inherit;
	border: none;
	border: solid 2px;
	border-color: #aaa5a4;
	border-radius: 4px;
	outline: 0;
	background: #f4f3f3;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

input[type="text"].error,
input[type="tel"].error,
input[type="email"].error {
	border-color: red;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder {
	color: #aaa5a4;
}

@media screen and (max-width:750px) {
	input[type="text"],
	input[type="tel"],
	input[type="email"] {
		font-size: 3.2vw;
	}
}

@media screen and (max-width:576px) {
	input[type="text"],
	input[type="tel"],
	input[type="email"] {
		font-size: 1.6rem;
		font-size: 5.2vw;
	}
}

/* ############################################
	javascript用CSS
############################################ */

/*==============================
	スライダー（swiper）
==============================*/

.swiper-wrap {
	position: relative;
}

.swiper {
	margin: 5% 0;
	/* position: relative; */
}

/* .swiper::before,
.swiper::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: 10;
	width: 50%;
	height: 100%;
	pointer-events: none; 
}

.swiper::before {
	left: 0;
	background: linear-gradient(to right, white 0%, transparent 100%);
}

.swiper::after {
	right: 0;
	background: linear-gradient(to left, white 0%, transparent 100%);
} */

.swiper-button-next {
	right: -3%;
	color: #1b2a75 !important;
}

.swiper-button-prev {
	left: -3%;
	color: #1b2a75 !important;
}

/*==============================
	アコーディオン（accordion）
==============================*/

.accordion {
	margin: 5% 0;
}

.accordion__head {
	font-size: 3.3rem;
	font-weight: bold;
	position: relative;
	padding: 0.5em 0;
	text-align: center;
	white-space: nowrap;
	color: #0d3482;
	border: solid 2px #0d3482;
	border-radius: 15px;
}

.accordion__head::after {
	position: absolute;
	top: 30%;
	right: 1.25em;
	display: block;
	width: 0.75em;
	height: 0.75em;
	content: "";
	transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
	transform: rotate(135deg);
	border-top: solid 2px #0d3482;
	border-right: solid 2px #0d3482;
}

.accordion__head.is-open::after {
	top: 40%;
	transform: rotate(-45deg);
}

.accordion__body {
	display: none;
	margin: 2.5% 0 0;
}

@media screen and (max-width:750px) {
	.accordion__head {
		font-size: 4.4vw;
		border-radius: 12px;
	}
}

@media screen and (max-width:576px) {
	.accordion__head {
		border-radius: 9px;
	}
}

/*==============================
	モーダルボックス
==============================*/

.modal {
	margin: 10% 0;
}

.modal__close,
.modal__open {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 3em;
	display: block;
	width: 80%;
	max-width: 450px;
	margin: 0 auto;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: none;
	background: #000000;
}

.modal__container {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	display: none;
	overflow: auto;
	width: 100%;
	height: 100%;
}

.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}

.modal__body {
	display: table;
	width: 100%;
	height: 100%;
}

.modal__main {
	display: table-cell;
	padding: 5%;
	text-align: center;
	vertical-align: middle;
}

.modal__content {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 93%;
	max-width: 600px;
	padding: 3.5%;
	color: #000000;
	background: #ffffff;
}

.modal__txt {
	font-size: 2.0rem;
	margin: 2.5% 0;
}

@media screen and (max-width:750px) {
	.modal__close,
	.modal__open {
		font-size: 3.2vw;
	}
}

@media screen and (max-width:576px) {
	.modal__close,
	.modal__open {
		font-size: 4.2vw;
	}
}

/*==============================
	バーコードリーダー
==============================*/

#interactive.viewport > canvas,
#interactive.viewport > video {
	width: 100%;
	max-width: 100%;
}

canvas.drawingBuffer {
	position: absolute;
	top: 0;
	left: 0;
}

/* ############################################
	コンテンツ用CSS
############################################ */

/*==============================
	コンテンツ（container）
==============================*/

/* .container {
	max-width: 750px;
	margin: 0 auto;
	background: url(../img/container_bg.jpg) repeat-y center top/100% auto;
} */

.container__preApp {
	max-width: 750px;
	margin: 0 auto;
	background: #fcce00 url(../img/container_bg.jpg) no-repeat center calc(88/750*100vw)/contain;
}

.container__preCard {
	max-width: 750px;
	margin: 0 auto;
	background: #fcce00 url(../img/container_bg.jpg) no-repeat center calc(88/750*100vw)/contain;
}

/*==============================
	メイン（main）
==============================*/

.main {
	overflow: hidden;
/* 	background: url(../img/main__bg.jpg) repeat-y center top/100% auto; */
}

.main__inner {
	margin: 0 6%;
	padding: 12% 0;
}

/*==============================
	セクション汎用（section）
==============================*/

.section + .section {
	margin-top: 12%;
}

/* 見出し */

.section__head {
	font-size: 5.2rem;
	font-weight: bold;
	padding: 0.5% 0;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0.25rem;
	color: #ffffff;
	border-radius: 15px 15px 0 0;
	background: #011f5d;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
}

@media screen and (max-width:750px) {
	.section__head {
		font-size: 7.0vw;
		border-radius: 12px 12px 0 0;
	}
}

@media screen and (max-width:576px) {
	.section__head {
		border-radius: 9px 9px 0 0;
	}
}

/* 本文 */

.section__body {
	padding: 5%;
	border: solid 6px #011f5d;
	border-top: none !important;
	border-radius: 0 0 15px 15px;
	background: #ffffff;
}

@media screen and (max-width:750px) {
	.section__body {
		border: solid 5px #011f5d;
		border-radius: 0 0 12px 12px;
	}
}

@media screen and (max-width:576px) {
	.section__body {
		border: solid 4px #011f5d;
		border-radius: 0 0 9px 9px;
	}
}

.section__head_image {
	padding: calc(25/648*100%) 0;
	text-align: center;
	white-space: nowrap;
	border-radius: 15px 15px 0 0;
	background: #011f5d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.section__head_image img {
	width: calc(557/648*100%);
	display: block;
}

@media screen and (max-width:750px) {
	.section__head_image {
		border-radius: 12px 12px 0 0;
	}
}

@media screen and (max-width:576px) {
	.section__head_image {
		border-radius: 9px 9px 0 0;
	}
}


/* リスト表示 */

.section__list {
	/* font-size: 2.4rem; */
	font-size: 1.65rem;
	margin-top: 5%;
}

.section__list-item {
	margin-left: 1em;
	text-indent: -1em;
}

@media screen and (max-width: 750px) {
	.section__list {
		font-size: 3.2vw;
	}
}

/* テキスト表示 */

.section__txt {
	font-size: 2.4rem;
}

@media screen and (max-width: 750px) {
	.section__txt {
		font-size: 3.2vw;
	}
}

.section__notes {
	/* font-size: 2.4rem; */
	font-size: 1.65rem;
	margin-top: 5%;
	text-align: center;
}

.section__notes span {
	/* font-size: 2.4rem; */
	font-size: 120%;
	font-weight: 700;
}

@media screen and (max-width: 750px) {
	.section__notes {
		font-size: 3.2vw;
	}
}


/*==============================
	固定表示専用（topfix）
==============================*/

.topfix {
	position: sticky;
	z-index: 100;
	top: 0;
	left: 0;
	max-width: 750px;
	/*	padding: 3%;	*/
	border: solid #011f5d 8px;
	background-color: #ff0000;
}

.topfix__inner {
	position: relative;
}

.topfix__str01,
.topfix__str02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 6.2%;
}

.topfix__str01 {
	margin: 3% 0 0 6.5%;
}

.topfix__str02 {
	margin: 3% 0 0 13.8%;
}

.topfix__str01 img {
	animation: 4s 0s bound ease-in infinite;
}

.topfix__str02 img {
	animation: 4s 0.1s bound ease-in infinite;
}

@media screen and (max-width:750px) {
	.topfix {
		border-width: 6px;
	}
}

@media screen and (max-width:576px) {
	.topfix {
		border-width: 4px;
	}
}

@keyframes bound {
	79%,
	90%,
	97%,
	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	85% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	94% {
		-webkit-transform: translateY(-4px);
		transform: translateY(-4px);
	}
	99% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
}

/*==============================
	ヘッダー専用（header）
==============================*/

.header__link {
	margin: 2% 4% 0;
	/* 	padding: 5%;
	border-radius: 4px;
	background: #fff100;
	border: #e10012 solid 8px;
*/
}

/* .header__link-tit {
	margin: 0 10% 3%;
} */

.header__link-btn {
	display: block;
	transition-property: opacity;
	transition-duration: 0.5s;
}

.header__link-btn:hover {
	opacity: 0.7;
}

/* .header__link-btn img {
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));
} */

/*==============================
	対象ブランド専用（brand）
==============================*/

.brand {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.brand__head {
	font-size: 3.8rem;
    font-weight: bold;
    padding: 0.5% 0;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.25rem;
    color: #ffffff;
    background: #011f5d;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
    margin: 5rem auto 2rem;
}

.brand__logo {
	width: 23%;
	margin: 1%;
	border: 1px solid #dddddd;
}

@media screen and (max-width:576px) {
	.brand__head {
		font-size: 2rem;
	}
}

/*==============================
	キャンペーン専用（step）
==============================*/

.step + .step::before {
	display: block;
	margin: 5% 0 2.5%;
	padding-top: 8.5%;
	content: "";
	background: transparent url(../img/step__bg.png) no-repeat center center/auto 100%;
}

.step__link {
	display: block;
	margin: 2% 0 7% -10%;
}

.step__link img {
	max-width: 103%;
	/* filter: drop-shadow(2px 2px 2px #aaaaaa); */
	/* filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));	*/
}

.step:nth-child(2) .step__tit {
	margin-right: -10%;
}

/*==============================
	応募規約専用（terms）
==============================*/

.terms {
	font-size: 1.6rem;
}

.terms__tit {
	font-weight: bold;
}

.terms__txt {
	margin-bottom: 5%;
}

.terms__list {
	margin-bottom: 5%;
}

.terms__list-item {
	margin-left: 1em;
	text-indent: -1em;
}

.terms__list-item > .terms__list {
	margin-bottom: 0;
}

@media screen and (max-width: 750px) {
	.terms {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 576px) {
	.terms {
		font-size: 1.4rem;
	}
}

/*==============================
	購入期間専用（date）
==============================*/

.date__img {
	margin-right: -7%;
	margin-left: -7%;
}

/*==============================
	お問い合わせ専用（contact）
==============================*/

.contact__def {
	font-weight: bold;
	margin: 5% 0;
}

.contact__def-tit {
	font-size: 4.2rem;
	line-height: 1.2;
	margin-bottom: 2%;
}

.contact__def-data {
	font-size: 2.4rem;
}

@media screen and (max-width:750px) {
	.contact__def-tit {
		font-size: 5.7vw;
	}
	.contact__def-data {
		font-size: 3.2vw;
	}
}

/*==============================
	フッター専用（footer）
==============================*/
/* 
.footer {
	padding: 0 0 12%;
}

.footer__copy {
	font-size: 1.0rem;
	text-align: center;
	color: #ffffff;
} */

.footer {
	padding: 5% 7%;
	background: #1b2a75;
}

.footer__company {
	font-size: 2.4rem;
	margin-bottom: 2.5%;
	color: #ffffff;
}

.footer__copy {
	font-size: 1.0rem;
	text-align: center;
	color: #ffffff;
}

@media screen and (max-width: 750px) {
	.footer__company {
		font-size: 3.2vw;
	}
}

/*===========================================
	カードサンプル
===========================================*/

.card {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 10% 0;
	padding: 5%;
	border: solid 2px #aaa5a4;
	border-radius: 4px;
}

.card__img {
	width: 80%;
	margin-bottom: 5%;
	text-align: center;
}

.card__list {
	font-size: 2.4rem;
	width: 100%;
}

.card__list-item {
	margin-left: 1em;
	text-indent: -1em;
}

@media screen and (max-width: 750px) {
	.card__list {
		font-size: 3.2vw;
	}
}

/* ############################################
	フォーム用CSS
############################################ */

#form {
	margin-top: -21%;
	padding-top: 33%;
}

/*==============================
	メッセージ（form__message）
==============================*/

.form__message {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.2;
	margin: 10% 0;
	padding: 1.25em 0;
	text-align: center;
	border-width: 6px;
	border-style: solid;
}

.form__message--alert {
	color: #ff0000;
	border-color: #ff0000;
}

.form__message--info {
	color: #0064e6;
	border-color: #0064e6;
}

.form__message br.sp-show {
	display: none;
}

@media screen and (max-width:750px) {
	.form__message {
		font-size: 3.7vw;
		border-width: 5px;
	}
}

@media screen and (max-width:576px) {
	.form__message {
		font-size: 4.7vw;
		border-width: 4px;
	}
	.form__message br.sp-show {
		display: block;
	}
}

/*==============================
	テキスト（form__txt）
==============================*/

.form__txt {
	font-size: 2.4rem;
	font-weight: bold;
	margin: 10% 0;
	text-align: center;
}

@media screen and (max-width: 750px) {
	.form__txt {
		font-size: 3.2vw;
	}
}

/*==============================
	入力項目（form__title）
==============================*/

.form__field {
	margin: 10% 0;
}

/*==============================
	タイトル（form__title）
==============================*/

.form__title {
	font-size: 2.8rem;
	font-weight: bold;
	margin: 0 0 5px 5px;
}

@media screen and (max-width:750px) {
	.form__title {
		font-size: 3.8vw;
	}
}

@media screen and (max-width:576px) {
	.form__error {
		font-size: 4.8vw;
	}
}

/*==============================
	エラー詳細（form__error）
==============================*/

.form__error {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
	margin: 0 0 5px 5px;
	text-align: left;
	color: red;
}

@media screen and (max-width:750px) {
	.form__error {
		font-size: 2.5vw;
	}
}

@media screen and (max-width:576px) {
	.form__error {
		font-size: 3.5vw;
	}
}

/*==============================
	注意事項（form__list）
==============================*/

.form__list {
	font-size: 1.8rem;
	margin-top: 10px;
}

.form__list-item {
	margin-left: 1em;
	text-indent: -1em;
}

@media screen and (max-width: 750px) {
	.form__list-item {
		font-size: 2.3vw;
	}
}

@media screen and (max-width:576px) {
	.form__list-item {
		font-size: 3.3vw;
	}
}

/*==============================
	入力確認（form__confirm）
==============================*/

.form__confirm {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1em;
	display: block;
	width: 100%;
	padding: 0.65em 0.75em;
	text-decoration: none;
	color: inherit;
	border: none;
	border: solid 2px;
	border-color: #1b2a75;
	border-radius: 4px;
	outline: 0;
	background: #e6fff7;
}

@media screen and (max-width:750px) {
	.form__confirm {
		font-size: 3.2vw;
	}
}

@media screen and (max-width:576px) {
	.form__confirm {
		font-size: 1.6rem;
		font-size: 5.2vw;
	}
}

/*==============================
	同意確認（form__agree）
==============================*/

.form__agree {
	font-size: 2.8rem;
	font-weight: bold;
	margin: 10% 0;
	text-align: center;
}

@media screen and (max-width:750px) {
	.form__agree {
		font-size: 3.8vw;
	}
}

@media screen and (max-width:576px) {
	.form__agree {
		font-size: 4.2vw;
	}
}

/*==============================
	ボタン（form__navi）
==============================*/

.form__navi {
	margin: 10% 0;
	text-align: center;
}

.form__button {
	margin: 2% auto;
}

.form__button[disabled] {
	cursor: default;

	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
}

.form__button--back {
	width: 63%;
}

.form__button img {
	/* filter: drop-shadow(2px 2px 2px #aaaaaa); */
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));
}

.form__button.form__button--entry,
.form__button.form__button--confirm {
	margin: 2% 0 7% -10%;
}

.form__button.form__button--entry img,
.form__button.form__button--confirm img {
	max-width: 103%;
}


/* ############################################
	アニメーションCSS
############################################ */

#animation {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 3%;
	border: solid #0d3482 8px;
	background-color: #e6117c;
}

.ani__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.ani__center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 400px;
	transform: translate(-50%, -50%);
	text-align: center;
}

#animation {
	opacity: 1;
}

#animation.js-animate {
	-webkit-animation-name: fadeOutUp;
	animation-name: fadeOutUp;
	animation-duration: 0.8s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
}

#ani_step01 {
	opacity: 1;
}

.js-animate #ani_step01 {
	-webkit-animation-name: bounceOut;
	animation-name: bounceOut;
	animation-duration: 0.7s;
	animation-delay: 1.2s;
	animation-fill-mode: forwards;
}

#ani_step02 {
	opacity: 0;
}

.js-animate #ani_step02 {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	animation-duration: 0.7s;
	animation-delay: 1.9s;
	animation-fill-mode: forwards;
}

#ani_step01 img,
#ani_step02 img {
	display: none;
}

/* bounceOut  */

@-webkit-keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
		opacity: 1;
	}
	50%,
	55% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}
}
@keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
		opacity: 1;
	}
	50%,
	55% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}
}

/* bounceIn  */

@-webkit-keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
		opacity: 1;
	}
	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
		opacity: 1;
	}
	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}
	to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

/* fadeOutUp */

@-webkit-keyframes fadeOutUp {
	from {
		opacity: 1;
	}
	to {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		opacity: 0;
	}
}

@keyframes fadeOutUp {
	from {
		opacity: 1;
	}
	to {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		opacity: 0;
	}
}

/* ---------------------------------
	アカウント表示
--------------------------------- */

.form__account {
	overflow: hidden;
	margin: 4% 0;
	border: solid 2px #777777;
	background: #ffffff;
}

.form__accounthead {
    font-weight: bold;
	text-align: center;
    padding: 0.25em 0.25em 0.4em;
	background: #777777;
	color: #ffffff;
	font-size: 2.4rem;
	line-height: 1.4;
}

.form__accountbody {
	padding: 1% 2%;
	text-align: center;
	font-size: 4.2rem;
	font-weight: bold;
}

@media screen and (max-width: 750px) {
	.form__accounthead {
		font-size: 3.4vw;
	}
	.form__accountbody {
		font-size: 6.2vw;
	}
}

@media screen and (max-width: 576px) {
	.form__accounthead {
		font-size: 4.4vw;
	}
	.form__accountbody {
		font-size: 7.2vw;
	}
}