@charset "UTF-8";
/* ***********************************************************************

	foundation

*********************************************************************** */
/* body　bace */
html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	color: #502E13;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	font-family: "Noto Sans JP", YuGothic, sans-serif, Meiryo;
	line-height: 1.5;
	list-style: none;
	box-sizing: border-box;
}
.site_wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.site_wrap * {
	box-sizing: border-box;
}
@media all and (-ms-high-contrast: none) {
	.site_wrap {
		display: block;
	}
}
main {
	flex: 1;
}
p {
	line-height: 1.7;
}
a {
	color: initial;
	text-decoration: none;
	outline: none;
	cursor: pointer;
}
button {
	border: none;
	background: transparent;
	border: none;
}
input[type=text],
input[type=email],
input[type=submit],
input[type=reset],
input[type=search],
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	max-width: 100%;
	padding: 3px;
	border: none;
	border: 1px solid #BDBDBD;
	border-radius: 3px;
	border-radius: 0;
	box-sizing: border-box;
}
img {
	vertical-align: bottom;
	width: auto\9 ;
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
}
:where(h1, h2, h3, h4, h5, h6) {
	margin-block: unset;
	font-size: unset;
}

/* ***********************************************************************

	layout

*********************************************************************** */
/* header */
header {
	z-index: 90;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border-top: 5px solid #4D5AAF;
	box-shadow: 0px 2px 8px rgb(51 51 51 / 0.08);
}
header .header_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1400px;
	height: 60px;
}
.header_logo {
	margin-left: 20px;
}
.header_logo_link {
	display: block;
}
.header_logo_link img {
	width: auto;
	max-width: 100%;
	height: 32px;
}
.header_link_wrap {
	margin-right: 20px;
}
.header_link {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 16px;
	width: max-content;
	height: 36px;
	background: #fff;
	border:1px solid #4D5AAF;
	border-radius: 18px;
	color: #4D5AAF;
}
.header_link span {
	display: block;
	font-size: clamp(12px, 2vw, 14px);
	line-height: 1.15;
}
@media print, screen and (max-width: 350px) {
	.header_link span {
		font-size: 10px;
	}
}
.fixed {
	position: fixed;
	left: 0;
	right: 0;
}
@media print, screen and (min-width: 956px) {
	header .header_inner {
		height: 80px;
	}
	.header_logo_link img {
		height: 48px;
	}
	.header_link {
		padding: 0 24px;
		height: 48px;
		border-radius: 24px;
	}
	.header_link span {
		line-height: 1.35;
	}
}
@media (any-hover: hover) {
	.header_logo_link, .header_logo_link:hover {
		transition: opacity .3s ease-out;
	}
	.header_logo_link:hover {
		opacity: .7;
	}
	.header_link, .header_link:hover {
		transition: background .3s ease-out, color .3s ease-out;
	}
	.header_link:hover {
		background: #4D5AAF;
		color: #fff;
	}
}
/* footer */
footer {
	background: #F8EDDD;
	font-weight: 500;
	overflow: hidden;
}
.footer_wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 36px;
	gap: 40px;
	padding: 40px 20px;
	width: 100%;
	max-width: 1000px;
	border-top: 1px solid rgb(80 46 19 / 0.60);
}
.footer_wrap .footer_link_wrap {
	grid-column: 1/2;
	grid-row: 1/2;
}
.footer_wrap .footer_sns_wrap {
	grid-column: 1/2;
	grid-row: 2/3;
}
.footer_link_list .menu-item a {
	color: #502E13;
	font-size: .9em;
}	
.footer_link_list .menu-item + .menu-item {
	margin-top: 1em;
}
.footer_sns_list {
	display: flex;
	justify-content: center;
	gap: 20px;
}
@media screen and (min-width: 768px) {
	.footer_wrap {
		margin: 0 auto;
		padding: 40px 10px;
		grid-template-columns: 1fr 150px;
		grid-template-rows: auto;
	}
	.footer_wrap .footer_link_wrap {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.footer_wrap .footer_sns_wrap {
		grid-column: 2/3;
		grid-row: 1/2;
	}
	.footer_link_list {
		display: flex;
		flex-flow: row wrap;
		gap:20px;
	}
	.footer_link_list .menu-item + .menu-item {
		margin-top: 0;
	}
	.footer_sns_list {
		justify-content: flex-end;
	}
}
@media (any-hover: hover) {
	.footer_link_list .menu-item a,
	.footer_link_list .menu-item a:hover,
	.footer_sns_list .menu-item a,
	.footer_sns_list .menu-item a:hover {
		transition: opacity .3s ease-out;
	}
	.footer_link_list .menu-item a:hover,
	.footer_sns_list .menu-item a:hover {
		opacity: .7;
	}
}
/* copyright */
.copyright_wrap {
	position: relative;
	z-index: 1;
	padding: 20px 0;
	background: #D3C4AE;
}
.copyright_wrap .copyright {
	font-size: 12px;
	text-align: center;
}
/* btn-top */
#btn-top{
	position:fixed;
	width:42px;
	height:42px;
	right:20px;
	bottom:10px;
	background:rgb(77 90 175 / 1);
	border-radius: 20px;
	opacity:0.4;
	z-index:1;
}
#btn-top a{
	position:relative;
	display:block;
	width:42px;
	height:42px;
	text-decoration:none;
}
#btn-top a::before{
	content:'TOP';
	color:#fff;
	position:absolute;
	margin:auto;
	width:42px;
	height:20px;
	top:12px;
	bottom:0;
	right:0;
	font-size: 12px;
	text-align:center;
}
#btn-top a::after{
	content:' ';
	color:#fff;
	position:absolute;
	width:8px;
	height:8px;
	top:-12px;
	bottom:0;
	right:16px;
	margin:auto;
	transform:rotate(45deg);
	border-left:#fff 2px solid;
	border-top:#fff 2px solid;
}
@media (any-hover: hover) {
	#btn-top,
	#btn-top:hover {
		transition:opacity .3s ease-out;
	}
	#btn-top:hover {
		transition:opacity .3s;
	}
}
/* section */
.section {
	padding: 40px 0 80px;
	overflow: hidden;
}
.section_inner {
	padding: 0 20px;
	max-width: 1000px;
}
@media screen and (min-width: 768px) {
	.section {
		padding: 60px 0 80px 0;
	}
}
@media screen and (min-width: 1040px) {
	.section_inner {
		margin: 0 auto;
	}
}
/* ***********************************************************************

	mv

*********************************************************************** */
.mv_wrap {
	position: relative;
	background: #F9F7F6;
}
.mv {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 310px auto;
	margin: 0 auto;
	padding: 30px 20px 40px;
	max-width: 840px;
}
.mv_img  { grid-area: 2 / 1 / 3 / 2; }
.mv_copy { grid-area: 1 / 1 / 2 / 2; }
.mv_dl   { grid-area: 3 / 1 / 4 / 2; }
.mv_img {
	display: flex;
	justify-content: center;
	margin-top: 1em;
}
.mv_img img {
	width: 80%;
	width: clamp(200px, 80%, 260px);
	height: 310px;
	object-fit: cover;
	object-position: 50% 0;
}
.mv_copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
}
.mv_copy > * {
	max-width: max-content;
}
.mv_illust_wrap {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.mv_illust_wrap .illust_b1,
.mv_illust_wrap .illust_b2,
.mv_illust_wrap .illust_r1,
.mv_illust_wrap .illust_r2,
.mv_illust_wrap .illust_y1,
.mv_illust_wrap .illust_y2 {
	position: absolute;
}
.mv_illust_wrap .illust_b2,
.mv_illust_wrap .illust_r2,
.mv_illust_wrap .illust_y2 {
	display: none;
}
.mv_illust_wrap .illust_b1 {
	bottom: -90px;
	left: -270px;
	width: 600px;
	height: 500px;
}
.mv_illust_wrap .illust_r1 {
	top: 50%;
	left: calc(50% + 80px);
	translate: -50% -50%;
	width: 220px;
	height: 205px;
}
.mv_illust_wrap .illust_y1 {
	top: -180px;
	right: -260px;
	width: 460px;
	height: 535px;
}
@media screen and (min-width: 1000px) {
	.mv {
		display: grid;
		grid-template-columns: 240px 1fr;
		grid-template-rows: auto auto;
		grid-column-gap: 60px;
		grid-row-gap: 20px;
		padding: 50px 20px 60px;
	}
	.mv_img  { grid-area: 1 / 1 / 3 / 2; }
	.mv_copy { grid-area: 1 / 2 / 2 / 3; }
	.mv_dl   { grid-area: 2 / 2 / 3 / 3; }
	.mv_img {
		justify-content: flex-end;
		margin-top: 0;
	}
	.mv_img img {
		width: 210px;
		height: 100%;
		object-position: 100% 0;
	}
	.mv_copy {
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 10px;
	}
	.mv_copy .c-title_balloon {
		margin: 0;
	}
	.mv_dl {
		margin-bottom: 10px;
	}
	.mv_illust_wrap .illust_b2,
	.mv_illust_wrap .illust_r2,
	.mv_illust_wrap .illust_y2 {
		display: block;
	}
	.mv_illust_wrap .illust_b1 {
		bottom: -200px;
		left: calc(50% - 1040px);
	}
	.mv_illust_wrap .illust_b2 {
		top: -260px;
		left: calc(50% + 300px);
		width: 500px;
		height: 500px;
	}
	.mv_illust_wrap .illust_r1 {
		top: 50%;
		left: calc(50% - 440px);
		translate: -50% 0;
	}
	.mv_illust_wrap .illust_r2 {
		bottom: -60%;
		left: calc(50% + 80px);
		width: 630px;
		height: 440px;
	}
	.mv_illust_wrap .illust_y1 {
		top: -240px;
		left: calc(50% - 320px);
		translate: -50% 0;
	}
	.mv_illust_wrap .illust_y2 {
		bottom: -40px;
		left: calc(50% + 340px);
		translate: -50% 0;
		width: 280px;
		height: 280px;
	}
}

/* anchor_menu */
.anchor_menu_wrap {
	background: #808ACF;
}
.anchor_menu {
	display: flex;
	justify-content: space-between;
	gap: 3%;
	margin: 0 auto;
	padding:10px 20px;
	width: 100%;
	max-width: 1000px;
}
.anchor_menu .menu-item {
	width: 100%;
}
.anchor_menu .menu-item a {
	position: relative;
	display: block;
	padding:20px 5px 30px;
	width: 100%;
	height: 100%;
	background: #808ACF;
	border: 2px solid #FFF;
	border-radius: 5px;
	color: #fff;
	font-size: clamp(12px, 3.5vw, 16px);
	text-align: center;
	line-height: 1.15;
}
.anchor_menu .menu-item a::before {
	position: absolute;
	content: "";
	bottom: 10px;
	left: 50%;
	translate: -50% -50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid;
	border-right: 2px solid;
	color: inherit;
	rotate:135deg;
}
@media screen and (min-width: 765px) {
	.anchor_menu {
		gap: 20px;
	}
}
@media (any-hover: hover) {
	.anchor_menu .menu-item a,
	.anchor_menu .menu-item a:hover {
		transition: background .3s ease-out, color .3s ease-out;
	}
	.anchor_menu .menu-item a:hover {
		background: #fff;
		color: #808ACF;
	}
}

/* ***********************************************************************

	component

*********************************************************************** */
/* app_title */
.c-app_title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: clamp(30px, 6vw, 42px);
}
.c-app_title img {
	max-width: 80px;
	filter: drop-shadow(2px 2px 8px rgb(0 0 0 / 0.08));
}
/* title_balloon */
.c-title_balloon {
	margin:0 auto;
	padding:0.4em 2em;
	max-width: max-content;
	background: #4D5AAF;
	border-radius: 1.4em;
	color: #fff;
	font-size: clamp(13px, 3.5vw, 16px);
	font-weight: 600;
}
/* dl_card */
.c-dl_card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	padding: 20px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 2px 8px 0px rgb(51 51 51 / 0.08);
}
.c-dl_card.c-dl_card_purple {
	background: #DBDEED;
}
.c-dl_card_title {
	font-size: min(4.5vw, 18px);
	font-weight: 600;
}
.c-dl_Badge_link_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.c-dl_Badge_link a {
	display: block;
}
.c-dl_Badge_link a img {
	max-height:46px;
}
@media (any-hover: hover) {
	.c-dl_Badge_link a,
	.c-dl_Badge_link a:hover {
		transition: opacity .3s ease-out;
	}
	.c-dl_Badge_link a:hover {
		opacity: .7;
	}
}
/* section_title */
.c-section_title {
	position: relative;
	margin-bottom:60px;
	font-size: 1.9em;
	text-align: center;
}
.c-section_title .-subWord {
	position: absolute;
	top: 16px;
	left: 50%;
	translate: -50% 0;
	width: max-content;
	color: rgb(77 90 175 / 0.15);
	font-size: min(9.5vw, 38px);
	font-weight: 700;
	line-height: 1;
}
/* button */
.c-button_wrap {
	display: flex;
}
.c-button_wrap.-center {
	justify-content: center;
}
.c-button {
	display: block;
	position: relative;
	padding: 16px 30px 16px 20px;
	width: 260px;
	border: 1px solid #4D5AAF;
	border-radius: 30px;
	color: #4D5AAF;
	font-size: 1.1em;
	line-height: 1;
}
.c-button::before {
	position: absolute;
	content: "";
	display: block;
	top: 50%;
	right: 20px;
	rotate: 45deg;
	translate: 0 -50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #4D5AAF;
	border-right: 2px solid #4D5AAF;
	transition: right 0.3s ease-out, border 0.3s ease-out;
}
@media (any-hover: hover) {
	.c-button,
	.c-button:hover,
	.c-button:hover::before {
		transition: all 0.6s ease-out;
	}
	.c-button:hover {
		background: #4D5AAF;
		color: #fff;
	}
	.c-button:hover::before {
		right: 15px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
}
/* ***********************************************************************

	#about section01

*********************************************************************** */
#about {
	position: relative;
	background: repeat center/20px url(../images/bg-about.png);
}
#about .section_inner {
	position: relative;
	z-index: 1;
}
.about_list .about_item + .about_item {
	margin-top: 40px;
}
.about_item {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.about_item .about_text > * {
	padding-left: 40px;
}
.about_item .about_text .-point {
	display: flex;
	align-items: center;
	height:70px;
}
.about_item.about01 .about_text .-point {
	background: no-repeat left/contain url(../images/icon-about01.svg);
	color: #E88600;
}
.about_item.about02 .about_text .-point {
	background: no-repeat left/contain url(../images/icon-about02.svg);
	color: #EA1616;
}
.about_item.about03 .about_text .-point {
	background: no-repeat left/70px url(../images/icon-about03.svg);
	color: #0041F6;
}
.about_item .about_text .-point .-no {
	margin-left: 5px;
	font-size:2em;
	font-weight: 600;
}
.about_item .about_text h3 {
	margin-top: -10px;
	margin-bottom: 10px;
	font-size:1.2em;
	font-weight: 500;
}
.about_item .about_img {
	position: relative;
	width: min(100%, 322px);
	height: 300px;
}
.about_item .about_img .about_img_inner,
.about_item .about_img .about_img_inner::after {
	position: absolute;
	translate: -50% 0;
	width: 100%;
	height: 100%;
}
.about_item.about01 .about_img .about_img_inner,
.about_item.about03 .about_img .about_img_inner { 
	top: 0;
	left: calc(50vw + 60px);
}
.about_item.about02 .about_img .about_img_inner { 
	top: -20px;
	left: calc(50% - 60px);
}
.about_item .about_img .about_img_inner::after {
	content: "";
	z-index: -1;
}
.about_item.about01 .about_img .about_img_inner::after {
	top: -20px;
	left: calc(50% + 20px);
	background: no-repeat left/contain url(../images/img-about01_shadow.svg);
}
.about_item.about02 .about_img .about_img_inner::after {
	bottom: -20px;
	left: calc(50% - 20px);
	background: no-repeat left/contain url(../images/img-about02_shadow.svg);
}
.about_item.about03 .about_img .about_img_inner::after {
	top: -20px;
	left: calc(50% + 20px);
	background: no-repeat left/contain url(../images/img-about03_shadow.svg);
}
.about_item .about_img img {
	filter: drop-shadow(0px 2px 10px rgb(0 0 0 / 0.08));
}
.about_illust_wrap {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.about_illust_wrap img {
	max-width: none;
}
.about_illust_wrap .illust_top,
.about_illust_wrap .illust_center,
.about_illust_wrap .illust_bottom {
	position: absolute;
}
.about_illust_wrap .illust_top {
	top: 0;
	right: 55vw;
}
.about_illust_wrap .illust_center {
	top: 50%;
	left: 55vw;
	translate: 0 -50%;
}
.about_illust_wrap .illust_bottom {
	bottom: 0;
	right: 55vw;
}
@media screen and (min-width: 765px) {
	.about_list .about_item + .about_item {
		margin-top: 60px;
	}
	.about_item {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 50px;
	}
	.about_item.about02 {
		flex-direction: row-reverse;
	}
	.about_item .about_text h3 {
		font-size:1.9em;
	}
	.about_item .about_img {
		width: min(100%, 360px);
		height: 100%;
	}
	.about_item .about_img .about_img_inner {
		position: relative;
		left: 0 !important;
		translate: 0;
	}
	.about_item.about01 .about_img .about_img_inner::after,
	.about_item.about03 .about_img .about_img_inner::after {
		left: calc(50% + 20px);
	}
}
/* ***********************************************************************

	#how_to_use section02

*********************************************************************** */
.how_to_use_flow_title {
	position: relative;
	margin:90px 0 40px;
	font-size: clamp(18px, 3vw, 24px);
	text-align: center;
}
.how_to_use_flow_title .-titledeco {
	position: absolute;
	top: -35px;
	left: calc(50% - 80px);
	translate: -50% 0;
}
.how_to_list {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, auto);
	gap: 40px;
}
.how_to_list .how_to_item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap:10px;
}
.how_to_list .how_to_img {
	text-align: center;
}
.how_to_list h3 {
	font-size: 1.2em;
	font-weight: 600;
}
.how_to_list .how_to_text {
	display: grid;
}

.how_to_list.-ex .how_to_img img {
	width: min(100%, 300px);
}
.how_to_list.-ex h3 {
	color: #4D5AAF;
	text-align: center;
}
.how_to_list.-flow .how_to_img {
	padding: 1em;
	height: 200px;
	background: #F8EDDD;
	border-radius: 10px;
	text-align: center;
}
.how_to_list.-flow .how_to_img img {
	height: 100%;
}
@media screen and (min-width: 765px) {
	.how_to_list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		gap: max(5%, 10px);
	}
}
/* ***********************************************************************

	#download section03

*********************************************************************** */
#download {
	position: relative;
	background: #F8EDDD;
}
#download.section {
    padding: 40px 0 40px;
    overflow: hidden;
}
.download_wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 310px auto;
	margin: 0 auto;
	padding: 30px 20px 40px;
	max-width: 840px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0px 2px 8px rgb(51 51 51 / 0.08);
}
.download_title   { grid-area: 1 / 1 / 2 / 2; }
.download_img     { grid-area: 3 / 1 / 4 / 2; }
.download_copy    { grid-area: 2 / 1 / 3 / 2; }
.download_dl_card { grid-area: 4 / 1 / 5 / 2; }
.download_title   {
	font-size: clamp(20px, 5.5vw, 28px);
	text-align: center;
}
.download_img {
	display: flex;
	justify-content: center;
	margin-top: 1em;
}
.download_img img {
	width: 80%;
	width: clamp(200px, 80%, 260px);
	height: 310px;
	object-fit: cover;
	object-position: 50% 0;
}
.download_copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin-top: 1em;
}
.download_copy > * {
	max-width: max-content;
}
.download_copy .c-title_balloon {
    font-size: clamp(11px, 3.5vw, 16px);
}
@media screen and (min-width: 860px) {
	.download_wrap {
		display: grid;
		grid-template-columns: 190px 1fr;
		grid-template-rows: auto 1fr auto;
		grid-column-gap: 40px;
		grid-row-gap: 10px;
		padding: 40px 60px;
	}
	.download_title   { grid-area: 1 / 1 / 2 / 3; }
	.download_img     { grid-area: 2 / 1 / 4 / 2; }
	.download_copy    { grid-area: 2 / 2 / 3 / 3; }
	.download_dl_card { grid-area: 3 / 2 / 4 / 3; }
	.download_title {
		margin-bottom: 20px;
	}
	.download_img {
		justify-content: flex-end;
		margin-top: 0;
	}
	.download_img img {
		width: 100%;
		max-width: 170px;
		height: 100%;
		object-position: 100% 0;
	}
	.download_copy {
		align-items: flex-start;
		margin-top: 10px;
	}
	.download_copy .c-title_balloon {
		margin: 0;
	}
	.download_dl_card.c-dl_card {
		justify-content: flex-start;
		margin-bottom: 10px;
		max-width: 460px;
		height: max-content;
	}
}
/* ***********************************************************************

	#notFound

*********************************************************************** */
.page-notFound {
	background: repeat center/20px url(../images/bg-about.png);
}
.page-notFound .footer_wrap {
	border-top-width: 0px;
}
/* ***********************************************************************

	other

*********************************************************************** */
/* utility */
.sp-none,
.br-pc {
	display: none;
}
.pc-none {
	display: block;
}
.inlineBlock {
	display: inline-block;
}
.u-fs-l {
	font-size: 1.2em;
}
.u-fs-s {
	font-size: .8em;
}
.u-fw-b {
	font-weight: 600;
}
.u-bl-c {
	display: grid;
	place-content: center;
}
.u-mt-2em {
	margin-top:2em;
}

@media screen and (min-width: 768px) {
	.br-pc {
		display: inline-block;
	}
	.sp-none {
		display: block;
	}
	.pc-none {
		display: none;
	}
	.u-pcfs-l {
		font-size: 1.2em;
	}
}

/* Animation */
.fadeIn{
	animation-name: fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
	filter: blur(10px);
	transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
  }
}
.slideLeftRight{
	animation-name: LRAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes LRAnime{
	from {
		opacity: 0;
		transform: translate3d(-20px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.slideBottomUp{
	animation-name: BUAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes BUAnime{
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@media screen and (min-width: 768px) {
	.how_to_list .how_to_item:nth-child(2) {
		animation-delay: .2s;
	}
	.how_to_list .how_to_item:nth-child(3) {
		animation-delay: .4s;
	}
}
.svgfadeUp{
	animation-name: svgAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	transform-origin: top left;
	opacity:0;
}
@keyframes svgAnime{
	from {
		transform: translate3d(0, 20px, 0) skewY(12deg);
		opacity:0;
	}
	to {
		transform: translate3d(0, 0, 0) skewY(0);
		opacity:1;
	}
}