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

.top {
	position: relative;
}

.text1 {
	font-size: 16px;
	text-align: center;
	line-height: 1.6em;
}


.text2 {
	position: absolute;
	top: 9em ;
	left: 9em;
	font-size: 20px;
}

.world_image {
	margin-top: 3em;
}


.coming {
	font-size: 25px;
	text-align: center;
	font-weight: 100;
	margin-top: 3em;
	margin-bottom: 2em;
	line-height: 1.5em;
}

.contents1 {
	margin-top: 7em;
}

.contents1 .img1 {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4em;
}

.contents1 .text1 {
	font-size: 16px;
	text-align: center;
	line-height: 1.8em;
	margin: 3em 0 1.5em 0;
}

.contents1 .illust {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.contents1 .illust .item {
	width: 50%;
}

.contents1 .illust .item img{
	width: 90%!important;
}

.illust_txt {
	font-size: 16px;
	text-align: center;
	line-height: 1.8em;
	margin-top: 1em;
	
}

.part1 {
	margin-top: 5em;
}

.angle {
	display: flex;
}

.item img {
	width: 30%;
}

.text3 {
	text-align: center;
	font-size: 16px;
	margin-bottom: 2em;
}

.text4 {
	text-align: center;
	font-size: 16px;
	margin-top: 3em;
}

.text5 {
	text-align: center;
	font-size: 16px;
	margin-top: 1em;
	margin-bottom: 2em;
}

.contents3 {
	display: flex;
	width: 100%;
	align-items: center;
}

.contents3 .img3_1 {
	width: 50%!important;
}

.contents3 .img3_2 {
	width: 40%;
}

.contents4 .img3 {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}


.text6 {
	text-align: center;
	font-size: 16px;
	margin-top: -1em;
}

.contents5 .img4 {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.part2 {
	margin: 5em 0 2em 0;
}

.contents6 {
	margin-bottom: 6em;
}


.text7 {
	text-align: center;
	font-size: 16px;
	margin: 2em 0;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}


.text8, .text9 {
	text-align: center;
	font-size: 16px;
	margin: 2em 0;
}

.text10 {
	font-size: 16px;
	margin-top: 2em;
	margin-bottom: 4em;
	border: solid #E5E5E5 1.5px;
	padding: 0.5em 0;
	border-radius: 5px;
	
}

.contents6 .img10 {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6em;
}

.howto {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.img7, .img8, .img9 {
	width: 33%;
}

.how1, .how2, .how3 {
	width: 29%;
	margin: 1em;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
	margin-bottom: 4em;
	
}

.gallery .pic {
	width: 21.5%;
	margin: 1em;
}

.cf {
	margin: 3em 0;
	
}

.disc_sp {
	display: none;
}

.cf_text {
	margin-bottom: 0.5em;
	margin-top: 1em;
}

.cf_text img {
	width: 20%!important;
}


@media screen and (min-width:600px) and (max-width:1024px) {
    /*Tablet*/
.how1, .how2, .how3 {
	margin: 0.5em;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
	
}

.gallery .pic {
	width: 21.5%;
	margin: 0.5em;
}

}



@media screen and (max-width:599px) {
    /*SmartPhone*/

.text1 {
	margin-top: 1em;
}


.text2 {
	width: 100%;
	top: 17.5em;
	left: 0;
	font-size: 15px;
}

.contents1 {
	margin-top: 7em;
}

.contents1 .img1 {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}

.contents1 .illust .item {
	width: 50%;
}

.contents1 .illust .item img{
	width: 100%!important;
}

.item img {
	width: 100%!important;
}

.text3 {
	text-align: center;
	font-size: 16px;
	margin-bottom: 2em;
}

.text4 {
	text-align: center;
	font-size: 16px;
	margin-top: 3em;
}

.text5 {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.contents3 {
	display: flex;
	width: 100%;
	align-items: center;
}

.contents3 .img3_1 {
	width: 100%!important;
}

.contents3 .img3_2 {
	width: 90%;
}

.contents4 .img3 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	
}


.text6 {
	text-align: center;
	font-size: 16px;
	margin-top: 1em;
}

.contents5 .img4 {
	width: 100%;
}

.contents6 {
	margin-bottom: 6em;
}

.text8, .text9 {
	text-align: center;
	font-size: 16px;
	margin: 2em 0;
}

.text10 {
	margin-bottom: 2em;
	
}

.contents6 .img10 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6em;
}

.howto {
	align-items: center;
}
	
.img7, .img8, .img9 {
	width: 60%;
	margin: 0;
}

.how1, .how2, .how3 {
	width: 40%;
	margin: 0;
}
	.img7 {
		order: 1;
	}
	
	.img8 {
		order: 3;
	}
	
	.img7 {
		order: 5;
	}
	
	.how1 {
		order: 2;
	}
	
	
	.how2 {
		order: 4;
	}
	
	
	.how1 {
		order: 6;
	}

.gallery {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
	
}

.gallery .pic {
	width: 50%;
	margin: 0;
}

.cf {
	margin: 3em 0;
	
}
	
	.disc {
		width: 50%+
	}
	
.cf_text img {
	width: 50%!important;
	}
	
.disc_sp {
	display: block;
}
	
.disc {
	display: none;
}

	

}