@charset "UTF-8";
@import url("default.sp.css");


/*--------------------
　コンテンツ
--------------------*/

[id^="content-"] {
	margin-bottom: 30px;
}

[id^="content-"] p {
	padding-left: 0.5em;
}

/*  僕の事 */
#content-mixq02 {
}

/* 小見出し */
#content-mixq02 h4 {
	position: relative;
	color: #fff;
	width: 85%;
	height: 24px;
	left: -15px;
	font-size: 1.0em;
	padding: 5px 0 5px 20px;
	background: #334;
	background: linear-gradient( left, #334 0, #667 100 );
	background: -webkit-linear-gradient( left, #334 0, #667 100% );
	background: -moz-linear-gradient( left, #334 0, #667 100% );
	background: -ms-linear-gradient( left, #334 0, #667 100% );
	margin-bottom: 10px;
	opacity: 0;
	text-shadow: 2px 2px 0 #000;
}

#content-mixq02 h4::after {
	position: absolute;
	content: "";
	left: 100%;
	top: 0;
	border: 17px transparent solid;
	border-top: 17px #667 solid;
	border-left: 17px #667 solid;
}

.animeH4 {
	animation: animeSp-H4 1.0s forwards;
}


@keyframes animeSp-H4 {
	from {
		opacity: 0;
		transform: translateX(-20px);
		-webkit-transform: translateX(-20px);
		-moz-transform: translateX(-40px);
		-ms-transform: translateX(-40px);
	}
	
	to {
		opacity: 1.0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}


/* 画像と文章 */
#content-mixq02 section > div {
	margin-bottom: 30px;
}


/* イメージボックス */
#content-mixq02 div div.ibox {
	position: relative;
	width: 80%;
	height: 350px;
	margin: 0 10%;
	overflow: hidden;
}


#content-mixq02 div div.ihospital {
	height: 230px;
	margin-bottom: 10px;
}

#content-mixq02 div div.itelbox {
	height: 230px;
	margin-bottom: 10px;
}

#content-mixq02 div div.ioffice,
#content-mixq02 div div.ibicycle {
	height: 220px;
	margin-bottom: 10px;
}


#content-mixq02 div div.ibye {
	height: 220px;
}

/* イメージ用 */
#content-mixq02 div div.ibox img {
	position: absolute;
	opacity: 0;
}

#content-mixq02 div div.ibox img.hospital {
	width: 250px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#content-mixq02 div div.ibox img.telbox {
	width: 400px;
}

#content-mixq02 div div.ibox img.office {
	width: 400px
}

#content-mixq02 div div.ibox img.bicycle {
	width: 400px
}


#content-mixq02 div div.ibox img.bye {
	width: 380px;
}




/* 下から上へのアニメーション */
.animeImgTop {
	animation: animeSp-ImgTop 2.0s forwards;
}

@keyframes animeSp-ImgTop {
	from {
			opacity: 0;
			transform: translateY( 0 );
			-webkit-transform: translateY( 0 );
			-moz-transform: translateY( 0 );
			-ms-transform: translateY( 0 );
	}
	to {
			opacity: 1.0;
			transform: translateY( -50px );
			-webkit-transform: translateY( -50px );
			-moz-transform: translateY( -50px );
			-ms-transform: translateY( -50px );
	}
}





/* 右から左へのアニメーション */
.animeImgLeft {
	animation: animeSp-ImgLeft 2.0s forwards;
}

@keyframes animeSp-ImgLeft {
	from {
			opacity: 0;
			transform: translateX( 0 );
			-webkit-transform: translateX( 0 );
			-moz-transform: translateX( 0 );
			-ms-transform: translateX( 0 );
	}
	to {
			opacity: 1.0;
			transform: translateX( -30px );
			-webkit-transform: translateX( -30px );
			-moz-transform: translateX( -30px );
			-ms-transform: translateX( -30px );
	}
}


/* 左から右へのアニメーション */
.animeImgRight {
	animation: animeSp-ImgRight 2.0s forwards;
}

@keyframes animeSp-ImgRight {
	from {
			opacity: 0;
			transform: translateX( -40px );
			-webkit-transform: translateX( -40px );
			-moz-transform: translateX( -40px );
			-ms-transform: translateX( -40px );
	}
	to {
			opacity: 1.0;
			transform: translateX( 0 );
			-webkit-transform: translateX( 0 );
			-moz-transform: translateX( 0 );
			-ms-transform: translateX( 0 );
	}
}


/* 上から下へのアニメーション */
.animeImgBottom {
	animation: animeSp-ImgBottom 2.0s forwards;
}

@keyframes animeSp-ImgBottom {
	from {
			opacity: 0;
			transform: translateY( -30px );
			-webkit-transform: translateY( -30px );
			-moz-transform: translateY( -30px );
			-ms-transform: translateY( -30px );
	}
	to {
			opacity: 1.0;
			transform: translateY( 0 );
			-webkit-transform: translateY( 0 );
			-moz-transform: translateY( 0 );
			-ms-transform: translateY( 0 );
	}
}


[id^="content-"] .btnStyle01 {
	margin-top: 30px;
}