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

/* パソコン表示 classにpcがつく*/
.pc { display: block !important; }
.sp { display: none !important; }

/* スマホで表示される画像　classにspがつく */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


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

body{
	margin: 0;
}



.header{
	/*ロゴ部分*/
	display: flex;
	justify-content: center;
	align-items: center;
	
	/*ヘッダー背景*/
	background-color: #E6973E;
	padding-left: 30px;
    position: fixed; 
    top: 0; 
    z-index: 100; 
    width: 100%;
	height: 10%;
	
	
}

.header img{
	width:23%;
	position: fixed; 
	left:4%;
	top:2.8%;
}



.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(10px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



.pctop{
	display:block;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	text-align: center;
	
	margin-top: 9%;
	margin-bottom: 30%;
}

.pctop img{
	width:40%;
}





.sptop{
	display:block;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	padding-top:  29%;
	text-align: center;
	
}

.sptop img{
	width:75%;
	
}


.sptopcatch{
	display: block;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	padding-top:  70%;
	right: 0px;
	
	width: 50%;
	
	
}



/*------ 矢印　-----*/

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



            .yazirusi{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	padding-top:  97%;
	right: 80px;
	
	width: 3%;
	
}


.topillust{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 47%;

	
	width: 73%;
}


.setsumei{
	
	font-family: "YuGothic Bold","YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	
	color: #000000;
	line-height: 220%;
	
	position: relative;
	text-align: center;
	display: block;
}


.setsumeibun{

	margin: 0 auto;
	font-size:16px;
	padding-top: 157%;
}




.orproduct{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 120%;
	right: 18px;
	
	width: 80%;
	
}

.copyproduct{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 138%;
	left: 30px;
	
	width: 53%;
	z-index: 2;
}

.orprtop{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 131%;
	right: 20px;
	
	width: 35%;
}

.goproduct{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 158%;
	left: 30px;
	
	width: 49%;
}


.orbikou{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 169%;
	left: 15px;
	
	width: 87%;

}

.orbitop{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 179.5%;
	left: 20px;
	
	width: 35%;
}

.copybikou{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 186.5%;
	right: 30px;
	
	width: 54%;
	z-index: 2;
}

.gobikou{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 206.5%;
	right: 30px;
	
	width: 49%;
}


.orkentiku{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 218%;
	right: 30px;
	
	width: 76%;
}

.copykentiku{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 236.5%;
	left: 30px;
	
	width: 59%;
	z-index: 2;
}

.orketop{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 229.5%;
	right: 20px;
	
	width: 35%;
}

.gokentiku{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 256.5%;
	left: 30px;
	
	width: 49%;
}

.footer{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 272%;
}

.footerbotton{
	display: flex;
	justify-content: center;
	align-items: center;
	
	position:absolute;
	top: 336%;
	right: 20px;
	
	width: 69%;
}



.copyright{
	position: relative;
	text-align: center;
	top:1580px;
	
	/*文字*/
	font-family: "YuGothic","Hiragino Kaku Gothic W6","sans-serif";
	font-size: 11px;
	color: #ffffff;
	
	/*背景*/
	background-color: #E6973E;
	
	width:100%;
	padding-bottom: 10px;
	padding-top: 10px;
}