@charset "utf-8";
/* CSS Document */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
/*-----------------------------------------------------------------------------
	PC SP 共通
-----------------------------------------------------------------------------*/
html{
	font-size:62.5%;/*16px × 62.5% = 10px*/
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #ffffff;
}

a{
	color: #000;
}
img{
	max-width:100%;
	vertival-align:bottom;
}

.flex{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.flex_wrap{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

.flex_center{
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.slider01{
	visibility: hidden;
}

.slider01.slick-initialized{
	visibility: visible;
}


.fadeUp1{
animation-name:fadeUp1Anime;
animation-duration:0.4s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUp1Anime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }

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


.fadeUp1Trigger{
    opacity: 0;
}

.fadeUp2{
	animation-name:fadeUp2Anime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUp2Anime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}

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

.fadeUp2Trigger{
    opacity: 0;
}

.fadeUp3{
	animation-name:fadeUp3Anime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUp3Anime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}

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

.fadeUp3Trigger{
    opacity: 0;
}

.fadeUp4{
	animation-name:fadeUp4Anime;
	animation-duration:1.6s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUp4Anime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}

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

.fadeUp4Trigger{
    opacity: 0;
}

.fadeUp5{
	animation-name:fadeUp5Anime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUp5Anime{
	from {
		opacity: 0;
		transform: translateY(150px);
	}

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

.fadeUp5Trigger{
    opacity: 0;
}


.fadeUp6{
	animation-name:fadeUp6Anime;
	animation-duration:2.4s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUp6Anime{
	from {
		opacity: 0;
		transform: translateY(150px);
		}

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

.bold{
	font-weight: bold;
}

.slider{
	margin: 0 auro;	
} 
/*-----------------------------------------------------------------------------
	PC
-----------------------------------------------------------------------------*/
@media screen and (min-width:750px){
    header{
		max-width: 750px;
		width: 750px;
		display: block;
		margin:0 auto;
	}

	body{
		max-width: 750px;
		width: 750px;
		display: block;
		background-color:#ffe9fd;
		margin: 0 auto;
		position: relative;
   		z-index: -1;
	}

	#wrap{
		max-width: 750px;
		overflow: hidden;
	}

	.inner{
		position: relative;
		width: 670px;
		margin: 0 auto;
	}

	.pc{
		display: block;
	}

	.sp{
		display: none;
	}

}
/*-----------------------------------------------------------------------------
	SP
-----------------------------------------------------------------------------*/
@media screen and (max-width:749px){
	body{
		width: 100%;
		display: block;
		background-color:#ffe9fd;
		margin: 0 auto;
		position: relative;
    	z-index: -1;
	}
	#wrap{
		width: 100%;
		overflow: hidden;
	}
	.inner{
		position: relative;
		width: 93.3%;
		margin: auto;
	}
	.inner2{
		position: relative;
		width: 86.6%;
		margin: auto;
	}

	.pc {
		display: none;
	}

	.sp{
		display: block;
	}
	
}