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

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

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

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


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

/* 小見出し */
#content-mixq02
	h4 {
		position: relative;
		color: #fff;
		width: 500px;
		height: 24px;
		padding: 5px 0 5px 10px;
		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: "";
		right: -34px;
		top: 0;
		border: 17px transparent solid;
		border-top: 17px #667 solid;
		border-left: 17px #667 solid;
}

.animeH4 {
	animation: animeH4 1.0s forwards;
}


@keyframes animeH4 {
	from {
		opacity: 0;
		width: 300px;
		transform: translateX(-20px);
		-webkit-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
	}
	
	to {
		opacity: 1.0;
		width: 500px
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}

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




/* セット1*/
#content-mixq02
	div img:nth-child(1) {
		float: left;
		width: 300px;
}

#content-mixq02
	div div:nth-child(2) {
		float: right;
		width: 400px;
}

/* セット2*/
#content-mixq02
	div div:nth-child(1) {
		float: left;
		width: 400px;
}

#content-mixq02
	div img:nth-child(2) {
		float: right;
		width: 300px;
}


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


#content-mixq02
	div div.ioffice {
		height: 270px;
}

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


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


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

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

#content-mixq02
	div div.ibox img.hospital {
		width: 300px
}

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


#content-mixq02
	div div.ibox img.bye {
		width: 500px;
		left: -50px;
}


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

@keyframes animeImgTop {
	from {
			opacity: 0;
			transform: translateY( 0 );
			-webkit-transform: translateY( 0 );
			-moz-transform: translateY( 0 );
			-ms-transform: translateY( 0 );
	}
	to {
			opacity: 1.0;
			transform: translateY( -70px );
			-webkit-transform: translateY( -70px );
			-moz-transform: translateY( -90px );
			-ms-transform: translateY( -90px );
	}
}





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

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


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

@keyframes animeImgRight {
	from {
			opacity: 0;
			transform: translateX( -180px );
			-webkit-transform: translateX( -180px );
			-moz-transform: translateX( -180px );
			-ms-transform: translateX( -180px );
	}
	to {
			opacity: 1.0;
			transform: translateX( -80px );
			-webkit-transform: translateX( -80px );
			-moz-transform: translateX( -80px );
			-ms-transform: translateX( -80px );
	}
}


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

@keyframes animeImgBottom {
	from {
			opacity: 0;
			transform: translateY( -70px );
			-webkit-transform: translateY( -90px );
			-moz-transform: translateY( 0 );
			-ms-transform: translateY( 0 );
	}
	to {
			opacity: 1.0;
			transform: translateY( 0 );
			-webkit-transform: translateY( 0 );
			-moz-transform: translateY( -90px );
			-ms-transform: translateY( -90px );
	}
}


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