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


/*--------------------
　トップコンテンツ
--------------------*/
#topContents {
	position: relative;
	width: 100%;
	height: 435px;
	margin: 0;
	background: #fff;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* スライドの両端 */
.subArea1,
.subArea2 {
	position: absolute;
	width: 1000px;
	height: 400px;
	background: #333;
	opacity: .6;
	top: 0;
	z-index: 1;
}

/* スライド左右のボタン */
.slideButton1,
.slideButton2 {
	position: absolute;
	width: 50px;
	height: 80px;
	top: calc( 50% - 40px ) ;
	z-index: 2;
}

[class^="slideButton"]::before,
[class^="slideButton"]::after {
	position: absolute;
	content: "";
	width: 60px;
	height: 5px;
	background: #fff;
	z-index: 2;
}

[class^="slideButton"]::before {
	top: 17px;
	left: -5px;
}

[class^="slideButton"]::after {
	top: 56px;
	left: -5px;
}


.slideButton1::before,
.slideButton2::after {
	transform: rotate(135deg);
}
.slideButton1::after,
.slideButton2::before {
	transform: rotate(-135deg);
}




#slideBox {
	position: relative;
	opacity: 0;
}


#topContents li {
	position: relative;
	float: left;
	top: 0;
	left: 0;
}

#topContents li img {
	width: 800px;
	height: auto;
}


#topContents a {
	position: relative;
	display: block;
}

#topContents a::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}

/* ショートカット */
#shortCut {
	position: relative;
	height: 15px;
	margin: 10px auto;
	
}

#shortCut li {
	float: left;
	top: 0;
	margin-right: 10px;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	background: #ddd;
	opacity: 0.5;
}

#shortCut li:last-child {
	margin: 0;
}


#shortCut li.now,
#shortCut li:hover {
	opacity: 1.0;
	background: #888;
	
}



#topContents .debugbox {
	width: 200px;
	height: 100px;
	margin: 0 auto;
	border: 1px #aaa solid;
}


/*--------------------
　メインコンテンツ
--------------------*/



/*-------------------
　タイトル
--------------------*/

/* メッセージ */

#title .msg01 {
	position: absolute;
	top: 10px;
	left: 155px;
	height: 1px;
	color: #333;
	padding: 0 10px;
	font-size: 1.0em;
	opacity: 0;
	animation: animeFadeIn 1.0s 2.5s forwards;
}


/* リンク */
#title a {
	display: block;
	width: 640px;
	height: 160px;
}


#tbox {
	position: relative;
	display: block;
	width: 640px;
	height: 160px;
}


#tbox span {
	position: absolute;
	display: block;
	opacity: 0;
	
	/* debug用 */
*	border: 1px #aaa solid;
}


#logoQ {
	width: 144px;
	height: 144px;
	top: 10px;
	left: 0;
	background-position: 0 0;
	opacity: 0;
	animation: animeLogoQ 1.6s 2.0s forwards;
}


#logo1 {
	width: 87px;
	height: 89px;
	bottom: 4px;
	left: 159px;
	background-position: -159px -57px;
	

	animation:	animeLogo 1.0s 0.9s forwards,
				animeLogo2 1.0s ease-out 2.0s forwards;

}

#logo2 {
	width: 61px;
	height: 56px;
	bottom: 5px;
	left: 251px;
	background-position: -251px -89px;
	
	animation:	animeLogo 1.0s 1.1s forwards,
				animeLogo2 1.0s ease-out 2.0s forwards;
}

#logo3 {
	content: "";
	width: 91px;
	height: 93px;
	bottom: 5px;
	left: 309px;
	background-position: -309px -52px;

	opacity: 0;
	animation:	animeLogo 1.0s 1.3s forwards,
				animeLogo2 1.0s ease-out 2.0s forwards;
}

#logo4 {
	content: "";
	width: 87px;
	height: 87px;
	bottom: 6px;
	left: 399px;
	background-position: -399px -57px;

	animation:	animeLogo 1.0s 1.5s forwards,
				animeLogo2 1.0s ease-out 2.0s forwards;

}

#logo5 {
	width: 169px;
	height: 102px;
	bottom: 6px;
	left: 487px;
	background-position: -487px -42px;

	animation:	animeLogo 1.0s 1.7s forwards,
				animeLogo2 1.0s ease-out 2.0s forwards;
}


@keyframes animeLogoQ {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes animeLogo {
	0% {
		transform: perspective(100px) rotatey(180deg) translateX(30px);

	}
	
	60% {
		transform: perspective(100px) rotatey(0deg) translateX(30px);
	}
	100% {
		opacity: 1;
		transform: perspective(100px)  rotateY(0deg) translateX(30px);

	}
}


@keyframes animeLogo2 {
	from { transform: translateX(30px); }
	to { transform: translateX(0px); }

}


.debug {
	position: fixed;
	color: #fff;
	width: 200px;
	height: 50px;
	background: #333;
	
	z-index: 100;
}



/*--------------------------------------
	誰でもホームページのオーナーに！！
--------------------------------------*/
#content-first {
}


#firstBox {
}

#firstBox ul {
	width: 100%;
	height: 230px;
	counter-reset: fs 0;
}

/* 特徴ボックス */
#firstBox ul li {
	float: left;
	position: relative;
	width: calc( 694px / 3  );
	height: 230px;
	border: 1px #aaa solid;
	margin-right: 15px;
	
	background: linear-gradient( top, #fff 0, #fff 40%, #ffb 100% );
	background: -webkit-linear-gradient( top, #fff 0, #fff 40%, #ffb 100% );
	background: -moz-linear-gradient( top, #fff 0, #fff 40%, #ffb 100% );
	background: -ms-linear-gradient( top, #fff 0, #fff 40%, #ffb 100% );
	
}


#firstBox ul li:last-child {
	margin-right: 0;
}

/* 見出し */
#firstBox ul li h4 {
	font-size: 1rem;
	color: #fff;
	line-height: 1.6;
	background: #46a;
	text-indent: 36px;
	margin: 5px 5px;
	border-radius: 5px;
	
}


#firstBox ul li h4::before {
	position: absolute;
	content: "";
	width: 50px;
	height: 50px;
	
	top: -15px;
	left: -20px;
	
	border-radius: 100%;
	box-shadow: 1px 1px 2px #a00;
	
	background: #f44;

	opacity: 0;

}

#firstBox ul li h4::after {
	position: absolute;
	content: "特徴 " counter(fs);
	counter-increment: fs 1;
	font-size: .9rem;
	font-weight: bold;
	text-indent: 0;
	text-shadow: 1px 1px 0 #333;
	width: 60px;
	color: #fff;
	top: 0px;
	left: -16px;

	opacity: 0;

}


li:first-child .animeFirstBox::before,
li:first-child .animeFirstBox::after {
	animation: animeFirstBox 1.2s forwards;
}



#firstBox ul li:nth-child(2) .animeFirstBox::before,
#firstBox ul li:nth-child(2) .animeFirstBox::after {
	animation: animeFirstBox 1.2s .4s forwards;
}


#firstBox ul li:nth-child(3) .animeFirstBox::before,
#firstBox ul li:nth-child(3) .animeFirstBox::after {
	animation: animeFirstBox 1.2s .8s forwards;
}



@keyframes animeFirstBox {
	0% {
		opacity: 0;
		transform: rotate(1000deg) scale(3,3);
		-webkit-transform: rotate(1000deg) scale(3,3);
		-moz-transform: rotate(1000deg) scale(3,3);
		-ms-transform: rotate(1000deg) scale(3,3);
	}

	30% {
		opacity: 1;
		transform: rotate(0) scale(.6,.6);
		-webkit-transform: rotate(0) scale(.6,.6);
		-moz-transform: rotate(0) scale(.6,.6);
		-ms-transform: rotate(0) scale(.6,.6);
	}

	50% {
		opacity: 1;
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
	100% {
		opacity: 1;
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
}





/* 説明 */
#firstBox ul li p {
	margin: 0 10px;
	font-size: 0.9rem;
}


#firstBox a {
	position: absolute;
	display: block;
	font-size: .9rem;
	text-align: center;
	color: #fff;
	background: #36a;
	background: linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -webkit-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -moz-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -ms-linear-gradient( top, #36a 0, #36a 30%, #137 100% );


	width: 80%;
	line-height: 1.8;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: 0 auto;
	
	border-radius: 4px;
}

#firstBox a:hover {
	background: #000;
	background: linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -webkit-linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -moz-linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -ms-linear-gradient( top, #000 0, #000 30%, #666 100% );


}



#content-first img {
	margin-bottom: 30px;
}

/* プランの紹介 */
#planBox {
	position: relative;
	width: calc( 100% - 10px );
	height: 300px;
	
	background: #fff;
	
	border: 1px #aaa solid;
	margin-bottom: 10px;
	overflow: hidden;
}



/* 回転バー */
#pmsgBox div:first-of-type {
	position: absolute;
	top: -10px;
	left: -100px;
	width: 1000px;
	height: 120px;
	background: linear-gradient( left, #8fb 0, #fff 100% );
	background: -webkit-linear-gradient( left, #8fb 0, #fff 100% );
	background: -moz-linear-gradient( left, #8fb 0, #fff 100% );
	background: -ms-linear-gradient( left, #8fb 0, #fff 100% );
	z-index: 0;
	opacity: 0;
}

.animeRote {
	animation: animeRote 2.0s forwards;
}


/* 空 */
#pmsgBox::before {
	position: absolute;
	content: "";
	top: 0;
	width: 100%;
	height: 236px;
	background: url( "../img/index-planbg.jpg" ) no-repeat;
}



@keyframes animeRote {
	from {
		opacity: 0;
		transform: rotate(0);
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
	}
	to {
		opacity: 1;
		transform: rotate(-305deg);
		-webkit-transform: rotate(-305deg);
		-moz-transform: rotate(-305deg);
		-ms-transform: rotate(-305deg);
	}
}


/* プラン名 */
#pmsgBox div {
	position: relative;
	top: 0px;
	height: 64px;
	overflow: hidden;
	z-index: 10;
}



#pmsgBox p {
	position: absolute;
	color: #35f;
	font-size: 1.9rem;
	font-weight: bold;
	text-align: center;
	text-shadow: 1.1px 1.1px 0 #aaa;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;

	transform: scale(1, 1.3);
	-webkit-transform: scale(1, 1.3);
	-moz-transform: scale(1, 1.3);
	-ms-transform: scale(1, 1.3);


}

#pmsgBox p span {
	color: #f00;
	font-size: 1.6em;
	margin: 0 10px;
}



/* 文字アニメ */
.animePlanMsg {
	animation: animePlanMsg 1.6s .6s linear forwards;
}

@keyframes animePlanMsg {
	from {
		opacity: 0;
		transform: translateY(0) scale(1, 1.3);
		-webkit-transform: translateY(0) scale(1, 1.3);
		-moz-transform: translateY(0) scale(1, 1.3);
		-ms-transform: translateY(0) scale(1, 1.3);
	}
	to {
		opacity: 1;
		transform: translateY(-20px) scale(1, 1.3);
		-webkit-transform: translateY(-20px) scale(1, 1.3);
		-moz-transform: translateY(-20px) scale(1, 1.3);
		-ms-transform: translateY(-20px) scale(1, 1.3);
	}
	
}



/* 人物 */
#pmanBox div {
	position: absolute;
	height: 145px;
	background: url( "../img/price-plansp.png" ) no-repeat;
	background-size: 600px;
	bottom: 0;
	opacity: 0;
}

#pmanBox div span {
	position: absolute;
	display: block;
	width: 150px;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.6;
	color: #fff;
	text-shadow: 1px 1px 0 #333;
	top: -50px;
	border: 1px #aaa solid;
	border-radius: 8px;
	opacity: 0;
}

#pmanBox a {
	display: block;
	height: 100%;
}


/* 人物1 */
#pmanBox div:nth-of-type(1) {
	width: 126px;
	background-position: 0 0;
	right: 0;
}

.animePman01 {
	animation: animePman01 1.4s forwards;
}

#pmanBox div:nth-of-type(1) span {
	left: -15px;
	background: linear-gradient( top, #3b3 0, #5b5 50%, #393 51%, #191 100% );
	background: -webkit-linear-gradient( top, #3b3 0, #5b5 50%, #393 51%, #191 100% );
	background: -moz-linear-gradient( top, #3b3 0, #5b5 50%, #393 51%, #191 100% );
	background: -ms-linear-gradient( top, #3b3 0, #5b5 50%, #393 51%, #191 100% );
}

.animePmanTitle01 {
	animation: animePmanTitle 0.8s 1.4s forwards;
}


/* 人物2 */
#pmanBox div:nth-of-type(2) {
	width: 154px;
	background-position: -126px 0;
	right: 0;
}

.animePman02 {
	animation: animePman02 1.4s forwards;
}

#pmanBox div:nth-of-type(2) span {
	background: linear-gradient( top, #f88 0, #f99 50%, #c66 51%, #c44 100% );
	background: -webkit-linear-gradient( top, #f88 0, #f99 50%, #c66 51%, #c44 100% );
	background: -moz-linear-gradient( top, #f88 0, #f99 50%, #c66 51%, #c44 100% );
	background: -ms-linear-gradient( top, #f88 0, #f99 50%, #c66 51%, #c44 100% );
}

.animePmanTitle02 {
	animation: animePmanTitle 0.8s 1.8s forwards;
}

/* 人物3 */
#pmanBox div:nth-of-type(3) {
	width: 176px;
	background-position: -282px 0;
	left: 0;
}

.animePman03 {
	animation: animePman03 1.4s forwards;
}

#pmanBox div:nth-of-type(3) span {
	left: 25px;
	background: linear-gradient( top, #48f 0, #69f 50%, #16f 51%, #24c 100% );
	background: -webkit-linear-gradient( top, #48f 0, #69f 50%, #16f 51%, #24c 100% );
	background: -moz-linear-gradient( top, #48f 0, #69f 50%, #16f 51%, #24c 100% );
	background: -ms-linear-gradient( top, #48f 0, #69f 50%, #16f 51%, #24c 100% );
}
.animePmanTitle03 {
	animation: animePmanTitle 0.8s 2.2s forwards;
}

/* 人物4 */
#pmanBox div:nth-of-type(4) {
	width: 140px;
	background-position: -458px 0;
	left: 0;
}

.animePman04 {
	animation: animePman04 1.4s forwards;
}


#pmanBox div:nth-of-type(4) span {
	left: -10px;
	background: linear-gradient( top, #fa5 0, #fb7 50%, #d85 51%, #c54 100% );
	background: -webkit-linear-gradient( top, #fa5 0, #fb7 50%, #d85 51%, #c54 100% );
	background: -moz-linear-gradient( top, #fa5 0, #fb7 50%, #d85 51%, #c54 100% );
	background: -ms-linear-gradient( top, #fa5 0, #fb7 50%, #d85 51%, #c54 100% );
}

.animePmanTitle04 {
	animation: animePmanTitle 0.8s 2.6s forwards;
}


#pmanBox div a:hover {
	animation: animePmanHover .2s forwards;
}

@keyframes animePmanHover {
	from {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
	to {
		transform: scale(1.2, 1.2) translateY(12px);
		-webkit-transform: scale(1.2, 1.2) translateY(12px);
		-moz-transform: scale(1.2, 1.2) translateY(12px);
		-ms-transform: scale(1.2, 1.2) translateY(12px);
	}
}


/* 人物アニメ */
@keyframes animePman01 {
	from {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(-560px);
		-webkit-transform: translateX(-560px);
		-moz-transform: translateX(-560px);
		-ms-transform: translateX(-560px);
	}
	
}

@keyframes animePman02 {
	from {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(-370px);
		-webkit-transform: translateX(-370px);
		-moz-transform: translateX(-370px);
		-ms-transform: translateX(-370px);
	}
	
}


@keyframes animePman03 {
	from {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(350px);
		-webkit-transform: translateX(350px);
		-moz-transform: translateX(350px);
		-ms-transform: translateX(350px);
	}
}


@keyframes animePman04 {
	from {
		opacity: 0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(560px);
		-webkit-transform: translateX(560px);
		-moz-transform: translateX(560px);
		-ms-transform: translateX(560px);
	}
}


/* プランタイトル */
@keyframes animePmanTitle {
	from {
		opacity: 0;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(10px);
		-webkit-transform: translateY(10px);
		-moz-transform: translateY(10px);
		-ms-transform: translateY(10px);
	}
	
}


/* プラン概要 */
#plan-overview {
	padding: 20px;
	margin-bottom: 30px;
	
	border-radius: 5px;

	background: #eee;
}

#plan-overview ul {
	margin-bottom: 20px;
}

#plan-overview .caution {
	font-size: .8rem;
	color: #f22;
	margin: 0;
}


#plan-overview li {
	margin-bottom: 25px;
}

#plan-overview li:last-child {
	margin-bottom: 0;
}


#plan-overview [class^="plan0"] {
	
}

#plan-overview [class^="plan0"] p {
	float: left;
	line-height: 2.6;
	margin: 0;
}

#plan-overview [class^="plan0"] p:first-child {
	width: 130px;
	font-size: 1rem;
	font-weight: bold;
	text-indent: 0.5rem;
	color: #fff;
	background: #36a;
	background: linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -webkit-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -moz-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -ms-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	margin-right: 15px;
	
	border-radius: 4px;
	box-shadow: 2px 2px 1px #333;
}


#plan-overview [class^="plan0"] p:nth-child(2) {
	position: relative;
	width: 120px;
	font-weight: bold;
	text-align: right;
	font-size: 1.1rem;
	margin-right: 15px;
	
}

#plan-overview [class^="plan0"] p:nth-child(2)::after {
	position: absolute;
	content: "";
	width: 100%;
	border-bottom: 2px #f66 solid;
	left: 0;
	bottom: 2px;
	
}

#plan-overview [class^="plan0"] p:nth-child(2)::before {
	position: absolute;
	content: "￥";
	left: 0;
}


#plan-overview [class^="plan0"] p:nth-child(3) {
	width: 360px;
	font-size: .8rem;
	line-height: 1.65;

	border-bottom: 1px #aaa dotted;
	margin-right: 10px;
	
}


#plan-overview [class^="plan0"] p:last-child {
	width: 40px;
	line-height: 2.95;
}

#plan-overview [class^="plan0"] p:last-child a {
	display: block;
	color: #fff;
	font-size: .9rem;
	text-align: center;

	background: #36a;
	background: linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -webkit-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -moz-linear-gradient( top, #36a 0, #36a 30%, #137 100% );
	background: -ms-linear-gradient( top, #36a 0, #36a 30%, #137 100% );

	border-radius: 5px;
}

#plan-overview [class^="plan0"] p:last-child a:hover {

	background: #000;
	background: linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -webkit-linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -moz-linear-gradient( top, #000 0, #000 30%, #666 100% );
	background: -ms-linear-gradient( top, #000 0, #000 30%, #666 100% );


}





/* スマートフォンも対応！ */
#spbox .box1 {
	float: right;
	position: relative;
	width: 240px;
}

#spbox .box2 {
	float: left;
	width: 440px;
}

/* スマートフォン表示対応文字 */
#spbox .box1 .sphead {
	position: absolute;
	top: 0px;
	left: -14px;
	font-size: 0.9em;
	width: 230px;
	text-align: center;
	color: #fff;
	background: #38f;
	opacity: 0;
	text-shadow: 1px 1px 0 #333;
	box-shadow: 2px 2px 0 #36a;
	z-index: 1;
}



/* スマートフォン端末 */
#spbox .box1 [class^="spimg0"] {
	position: absolute;
	width: 64px;
	height: 130px;
	opacity: 0;
	
	background: url( "../img/index-sp.png" ) no-repeat;
	background-size: 200px;
}


#spbox .box1 .spimg01 {
	background-position: 0 0;
	top: 48px;
}

#spbox .box1 .spimg02 {
	width: 63px;
	background-position: -66px 0;
	top: 42px;
	left: 80px;
}

#spbox .box1 .spimg03 {
	width: 66px;
	background-position: -130px 0;
	top: 40px;
	left: 160px;
}

.animeSphead { 
	animation: animeSphead 2s forwards;
}

@keyframes animeSphead {
	0% {
		opacity: 0;
		transform: translateY(50px) scale(.6,.6);
		-webkit-transform: translateY(50px) scale(.6,.6);
		-moz-transform: translateY(50px) scale(.6,.6);
		-ms-transform: translateY(50px) scale(.6,.6);
	}

	20% {
		opacity: 1;
		transform: translateY(0) scale(1.2,1.2);
		-webkit-transform: translateY(0) scale(1.2,1.2);
		-moz-transform: translateY(0) scale(1.2,1.2);
		-ms-transform: translateY(0) scale(1.2,1.2);
	}

	50% {
		opacity: 1;
		transform: translateY(0) scale(1,1);
		-webkit-transform: translateY(0) scale(1,1);
		-moz-transform: translateY(0) scale(1,1);
		-ms-transform: translateY(0) scale(1,1);
	}


	100% {
		opacity: 1;
		transform: translateY(0) scale(1,1);
		-webkit-transform: translateY(0) scale(1,1);
		-moz-transform: translateY(0) scale(1,1);
		-ms-transform: translateY(0) scale(1,1);
	}
}


.animeSpimg01 {
	animation: animeSpimg 1.0s forwards;
}
.animeSpimg02 {
	animation: animeSpimg 1.0s 0.3s forwards;
}

.animeSpimg03 {
	animation: animeSpimg 1.0s 0.6s forwards;
}

@keyframes animeSpimg {
	from {
		opacity: 0;
		transform: translateX(-50px);
		-webkit-transform: translateX(-50px);
		-moz-transform: translateX(-50px);
		-ms-transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(-10px);
		-webkit-transform: translateX(-10px);
		-moz-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
	}
}



/* 箇条書きボックス */
#content-plan .box .box2 .box {
	border: 1px #aaa dotted;
	font-size: 0.9em;
	padding: 10px;
	background: #ffe;

	background: linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -webkit-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -moz-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -ms-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	
	border-radius: 10px;
}


/* ボックス内画像 */
#content-plan .box1 img {
	position: absolute;
	width: 240px;
	height: auto;
	top: 0;
	left: 0;
}


/* 開発画面アニメ */
#content-plan .box div img:first-child {
	top: 0;
	left: 0;
}

#content-plan .box div img:last-child {
	top: 30px;
	left: 40px;
}
.animeCoding01 {
	animation: animeCoding 1s 0.6s forwards;
}

.animeCoding02 {
	animation: animeCoding 1s forwards;
}

@keyframes animeCoding {
	from {
		transform: perspective(300px) rotateY(0deg);
		-webkit-transform: perspective(300px) rotateY(0deg);
		-moz-transform: perspective(300px) rotateY(0deg);
		-ms-transform: perspective(300px) rotateY(0deg);
	}
	
	to {
		transform: perspective(300px) rotateY(30deg);
		-webkit-transform: perspective(300px) rotateY(30deg);
		-moz-transform: perspective(300px) rotateY(30deg);
		-ms-transform: perspective(300px) rotateY(30deg);
	}
	
}


/*------------------------
　こんなお仕事してます
-------------------------*/

#content-jobs {
}

#content-jobs .box .box1 img {
	width: 240px;
	height: auto;
	box-shadow: 2px 2px 5px #333;
}


/* 箇条書きボックス */
#content-jobs .box .box2 .box {
	border: 1px #aaa dotted;
	font-size: 0.9em;
	padding: 10px;
	background: #ffe;
	background: linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -webkit-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -moz-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );
	background: -ms-linear-gradient( top, #fff 0, #fff 40%, #ffd 100% );



	border-radius: 5px;



}


/* 実績 */
#content-jobs #record {
	margin-bottom: 60px;
}

/* 実績アニメ設定 */
#content-jobs #record .box1 img {
	width: 210px;
	position: absolute;
	opacity: 0;
}

.animeRecord01 {
	animation: animeJobsImg01 1.0s forwards;
}

.animeRecord02 {
	animation: animeJobsImg02 2.0s 1.0s forwards;
}

@keyframes animeJobsImg01 {
	from {
		transform: translateX(60px);
		-webkit-transform: translateX(60px);
		-moz-transform: translateX(60px);
		-ms-transform: translateX(60px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
}

@keyframes animeJobsImg02 {
	from {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translate(30px,30px);
		-webkit-transform: translate(30px,30px);
		-moz-transform: translate(30px,30px);
		-ms-transform: translate(30px,30px);
	}
}


/* 便利屋 */
#help {
	margin-bottom: 100px;
}

#helpImg {
	position: relative;
	left: 0;
	width: 100%;
	height: 300px;
	
}


#helpImg [class^="help"] {
	position: relative;
	width: 240px;
	height: 200px;
	opacity: 0;
}


/* 悩み背景 */
#helpImg .help01 {
	background: linear-gradient( top, #ccc 0, #fff 100% );
	background: -webkit-linear-gradient( top, #ccc 0, #fff 100% );
	background: -moz-linear-gradient( top, #ccc 0, #fff 100% );
	background: -ms-linear-gradient( top, #ccc 0, #fff 100% );
}

/* 解決背景 */
#helpImg .help02 {
	background: linear-gradient( bottom, #ffc 0, #fff 100% );
	background: -webkit-linear-gradient( bottom, #ffc 0, #fff 100% );
	background: -moz-linear-gradient( bottom, #ffc 0, #fff 100% );
	background: -ms-linear-gradient( bottom, #ffc 0, #fff 100% );
}

/* 悩み見出し */
#helpImg .help01 h5 {
	font-size: 1.4rem;
	color: #fff;
	line-height: 1.3;
	background: #36a;
	padding: 5px;
	text-shadow: 2px 2px 0 #333;
}

#helpImg .help01 h5 span {
	display: block;
	text-align: right;
}


/* 解決見出し */
#helpImg .help02 h5 {
	font-size: 2.2rem;
	color: #ffffff;
	line-height: 1.7;
	background: #fc6;
	padding: 5px;
	text-align: center;
	text-shadow: 1px 1px 0 #555;
}


#help #helpImg [class^="help"] img {
	position: absolute;
	box-shadow: none;
	bottom: 0;
}



/* 下矢印 */
.arrow-b {
	position: relative;
	width: 40px;
	height: 20px;
	margin: 20px auto 50px auto;
	background: #f00;
	opacity: 0;
	
}
.arrow-b::before {
	position: absolute;
	content: "";
	border-left: 40px transparent solid;
	border-right: 40px transparent solid;
	border-top: 30px #f00 solid;
	top: 100%;
	margin: 0 -50%;
	
}

/* お悩みアニメ */
.animeHelpImg01 {
	animation: animeHelpImg 1s .3s forwards;
}

.animeHelpImg02 {
	animation: animeHelpImg 1s .6s forwards;
}

.animeHelpImg03 {
	animation: animeHelpImgArrow 1s .6s forwards;
}


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


@keyframes animeHelpImgArrow {
	from {
		opacity: 0;
		transform: scale(0,0) rotate(1000deg);
		-webkit-transform: scale(0,0) rotate(1000deg);
		-moz-transform: scale(0,0) rotate(1000deg);
		-ms-transform: scale(0,0) rotate(1000deg);
	}
	
	to {
		opacity: 1;
		transform: scale(1,1) rotate(0);
		-webkit-transform: scale(1,1) rotate(0);
		-moz-transform: scale(1,1) rotate(0);
		-ms-transform: scale(1,1) rotate(0);
	}
	
}



/*------------------------
　共通
-------------------------*/

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

/* 画像ボックス */
.box .box1 {
	float: left;
	position: relative;
	width: 240px;
	min-height: 200px;
}


/* メッセージボックス */
.box .box2 {
	float: right;
	width: 470px;
}

/* ボックス内見出し */
.headbar {
	text-align: center;
	line-height: 1.6;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	box-shadow: 1px 1px 0px #333;
	border-radius: 5px;
	
	background: #1c2;
	background: linear-gradient( top, #1b2 0, #1b2 50%, #1a2 51%, #1a2 100% );
	background: -webkit-linear-gradient( top, #1b2 0, #1b2 50%, #1a2 51%, #1a2 100% );
	background: -moz-linear-gradient( top, #1b2 0, #1b2 50%, #1a2 51%, #1a2 100% );
	background: -ms-linear-gradient( top, #1b2 0, #1b2 50%, #1a2 51%, #1a2 100% );
	margin-bottom: 10px;
}


/* ボックス内リストマージン */ 
.box .list li {
	margin: 0 0 0px 22px;
}