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


/*--------------------
　トップコンテンツ
--------------------*/
#topContents {
	background: #fff;
	width: 100%;
	overflow: hidden;
	
}


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


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

}

#topContents li img {
	width: 100%;
	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: 15px;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	background: #ddd;
	opacity: 0.5;
}

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

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




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


#topContents div.prev,
#topContents div.next {
	margin-top: 20px;
	display: inline-block;
	width: 50px;
	height: 20px;
	border: 1px #aaa solid;
	text-align: center;
}



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



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

/* メッセージ */
#title .msg01 {
	position: absolute;
	top: 5px;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 0.7em;
	opacity: 0;
	text-align: center;
	animation: animeSp-FadeIn 1.0s 2.5s forwards;
}




#tbox {
	position: relative;
	display: block;
	width: 320px;
	height: 70px;
	margin: 0 auto;
	top: 25px;

}

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




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


#logo1 {
	width: 50px;
	height: 50px;
	bottom: 3px;
	left: 66px;
	background-position: -66px -17px;
	
	animation:	animeSp-Logo 1.0s 0.9s forwards,
				animeSp-Logo2 1.0s ease-out 2.0s forwards;
}


#logo2 {
	width: 30px;
	height: 50px;
	bottom: 3px;
	left: 116px;
	background-position: -116px -17px;
	
	animation:	animeSp-Logo 1.0s 1.1s forwards,
				animeSp-Logo2 1.0s ease-out 2.0s forwards;
}

#logo3 {
	width: 40px;
	height: 50px;
	bottom: 3px;
	left: 144px;
	background-position: -144px -17px;

	animation:	animeSp-Logo 1.0s 1.3s forwards,
				animeSp-Logo2 1.0s ease-out 2.0s forwards;
}

#logo4 {
	width: 40px;
	height: 50px;
	bottom: 3px;
	left: 184px;
	background-position: -184px -17px;

	animation:	animeSp-Logo 1.0s 1.5s forwards,
				animeSp-Logo2 1.0s ease-out 2.0s forwards;

}

#logo5 {
	width: 76px;
	height: 50px;
	bottom: 3px;
	left: 226px;
	background-position: -226px -17px;

	animation:	animeSp-Logo 1.0s 1.7s forwards,
				animeSp-Logo2 1.0s ease-out 2.0s forwards;

	overflow: hidden;
}


@keyframes animeLogoQ {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes animeSp-Logo {
	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 animeSp-Logo2 {
	from { transform: translateX(30px); }
	to { transform: translateX(0px); }

}


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

/*------------------------
　初めて
------------------------*/
#content-first {
}


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


#firstBox {
	width: 100%;
}

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

/* 特徴ボックス */
#firstBox ul li {
	position: relative;
	border: 1px #aaa solid;
	padding: 10px;

	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:not(:last-child) {
	margin-bottom: 30px;

}

/* 見出し */
#firstBox ul li h4 {
	position: relative;
	font-size: 1rem;
	color: #fff;
	line-height: 1.8;
	background: #46a;
	text-align: center;
	text-shadow: 1px 1px 0 #333;

	margin-bottom: 10px;
	border-radius: 5px;
	
}

#firstBox ul li h4::before {
	position: absolute;
	content: "";
	width: 50px;
	height: 50px;
	
	top: -20px;
	left: -10px;
	
	border-radius: 100%;
	box-shadow: 1px 1px 0 #888;
	
	background: #f33;

	background: -webkit-linear-gradient( top, #f55 0, #f55 50%, #d11 100% );

	opacity: 0;
}

#firstBox ul li h4::after {
	position: absolute;
	content: "特徴 " counter(fs);
	counter-increment: fs 1;
	font-size: .9rem;
	width: 50px;
	color: #fff;
	top: -7px;
	left: -10px;
	opacity: 0;
}

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



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


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



@keyframes animeSpFirstBox {
	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 {
	line-height: 1.6;
	font-size: 0.9rem;
	margin-bottom: 50px;
	
}


#firstBox a {
	display: block;
	position: absolute;
	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: 40%;
	line-height: 2;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: 0 auto;
	
	border-radius: 4px;
	transition: .4s;
}





/* プランの紹介 */
#planBox {
	position: relative;
	width: calc( 100% - 6px );
	height: 380px;
	background: -webkit-linear-gradient( bottom, #acf 0, #fff 30%, #fff 100% );
	border: 1px #aaa solid;
	margin-bottom: 10px;
	overflow: hidden;
}

/* 回転バー */
#pmsgBox div:first-of-type {
	position: absolute;
	content: "";
	width: 1000px;
	height: 80px;
	top: 0px;
	left: -250px;

	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: animeSpRote 2.0s forwards;
}

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



@keyframes animeSpRote {
	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: #24f;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	transform: scale( 1, 1.3 );
	text-shadow: 1.5px 1.5px 0 #aaa;
	top: 40px;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
}

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



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

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

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

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

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



/* 人物1 */
#pmanBox div:nth-of-type(1) {
	width: 106px;
	background-position: 0 0;
	top: 100px;
	left: 5%;
}

.animePman01 {
	animation: animeSpPman01 1.4s forwards;
}

#pmanBox div:nth-of-type(1) span {
	left: -5px;
	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: animeSpPmanTitle 0.8s 1.4s forwards;
}

/* 人物2 */

#pmanBox div:nth-of-type(2) {
	width: 130px;
	background-position: -106px 0;
	top: 100px;
	right: 5%;
}

.animePman02 {
	animation: animeSpPman02 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: animeSpPmanTitle 0.8s 1.8s forwards;
}


/* 人物3 */

#pmanBox div:nth-of-type(3) {
	width: 130px;
	height: 110px;
	background-position: -212px 0;
	background-size: 450px;
	left: 5%;
	bottom: 0;
}

.animePman03 {
	animation: animeSpPman02 1.4s forwards;
}

#pmanBox div:nth-of-type(3) span {
	left: 0;
	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: animeSpPmanTitle 0.8s 2.2s forwards;
}

/* 人物4 */

#pmanBox div:nth-of-type(4) {
	width: 118px;
	height: 110px;
	background-position: -382px 0;
	right: 5%;
}

.animePman04 {
	animation: animeSpPman01 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: animeSpPmanTitle 0.8s 2.6s forwards;
}



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

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



/* プランタイトル */
@keyframes animeSpPmanTitle {
	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);
	}
}

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


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

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

#plan-overview .caution {
	font-size: .8rem;
	line-height: 1.4;
	color: #f22;
	margin: 0;
	
	border: 1px #f22 solid;
	padding: 5px;
}



/* プランの枠組み */
#plan-overview li {
	margin-bottom: 25px;
}

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


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

#plan-overview [class^="plan0"] p {
	line-height: 2;
	margin: 0;
}
#plan-overview a {
	display: block;
	color: #fff;
}


/* 見出し部分 */
#plan-overview [class^="plan0"] p:first-child {
	position: relative;
	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% );
	
	border-radius: 4px;
	box-shadow: 2px 2px 1px #333;
}




/* 金額 */
#plan-overview [class^="plan0"] p:nth-child(2) {
	position: relative;
	width: 136px;
	font-weight: bold;
	text-align: right;
	font-size: 1.2rem;
	margin: 10px 0 10px auto;
	
}

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


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

/* 説明部分 */
#plan-overview [class^="plan0"] p:nth-child(3) {
	font-size: .9rem;
	line-height: 1.4;
	margin-bottom: 20px;
}

#plan-overview [class^="plan0"] p:last-child {
	position: relative;
	font-size: .9rem;
	text-indent: 0.5rem;
	line-height: 2;
	
	width: 70px;
	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-left: auto;
	
	border-radius: 5px;

}

/* 矢印部 */
#plan-overview [class^="plan0"] p:last-child::before,
#plan-overview [class^="plan0"] p:last-child::after {
	position: absolute;
	content: "";
	width: 5px;
	top: 25%;
	border-top: 6px transparent solid;
	border-bottom: 6px transparent solid;
}

#plan-overview [class^="plan0"] p:last-child::before {
	border-left: 6px #ccc solid;
	right: 6px;
}
#plan-overview [class^="plan0"] p:last-child::after {
	border-left: 6px #fff solid;
	right: 11px;
}


/* スマートフォンも対応！ */
#spbox {
	position: relative;
	
}

#spbox .box2 .headsp {
	position: absolute;
	top: 0;
}

#spbox .box1 {
	position: relative;
	width: 220px;
	height: 200px;
	margin: 0 auto 20px auto;
}

#spbox .mbox {
	width: 100%;
}

/* スマートフォン表示対応文字 */
#spbox .box1 .sphead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	
	font-size: 0.9em;
	width: 220px;
	line-height: 1.8;
	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: 72px;
	height: 144px;
	opacity: 0;
	
	background: url( "../img/index-sp.png" ) no-repeat;
	background-size: 220px;
}


#spbox .box1 .spimg01 {
	background-position: 0 0;
	top: 58px;
	left: -30px;
}

#spbox .box1 .spimg02 {
	width: 70px;
	background-position: -72px 0;
	top: 52px;
	left: 30%;
}

#spbox .box1 .spimg03 {
	width: 74px;
	background-position: -142px 0;
	top: 50px;
	left: 74%;
}

.animeSphead { 
	animation: animeSpheadSp 1.4s forwards;
}


@keyframes animeSpheadSp {
	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: animeSp-Spimg 1.0s forwards;
}
.animeSpimg02 {
	animation: animeSp-Spimg 1.0s 0.3s forwards;
}

.animeSpimg03 {
	animation: animeSp-Spimg 1.0s 0.6s forwards;
}

@keyframes animeSp-Spimg {
	from {
		opacity: 0;
		transform: translateX(-50px);
		-webkit-transform: translateX(-50px);
		-moz-transform: translateX(-50px);
		-ms-transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(5%);
		-webkit-transform: translateX(5%);
		-moz-transform: translateX(5%);
		-ms-transform: translateX(5%);
	}
}





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

	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-plan .box .box1 {
	position: relative;
	width: 280px;
	height: 200px;
	left: 0;
	right: 0;
	margin: 20px auto ;
}


/* ボックス内画像 */
#content-plan .box 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: animeSp-Coding 1.6s 0.6s forwards;
}

.animeCoding02 {
	animation: animeSp-Coding 1.6s forwards;
}

@keyframes animeSp-Coding {
	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(20deg);
		-webkit-transform: perspective(300px) rotateY(20deg);
		-moz-transform: perspective(300px) rotateY(20deg);
		-ms-transform: perspective(300px) rotateY(20deg);
	}
	
}



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

#content-jobs {
}

/* ホームページ制作 */
#record {
	position: relative;
	margin-bottom: 60px;
}


#record .headsp {
	position: absolute;
	top: 0;
}


#record .box1 {
	width: 240px;
	height: 216px;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0px auto 40px auto;
}


#record img {
	width: 100%;
	box-shadow: 2px 2px 5px #333;
	overflow: hidden;
}


/* 箇条書きボックス */
#content-jobs .box .box {
	border: 1px #aaa dotted;
	font-size: 0.9em;
	padding: 10px;
	background: #ffd;
	
	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;
}


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

.animeRecord01 {
	animation: animeSp-JobsImg01 1.0s forwards;
}

.animeRecord02 {
	animation: animeSp-JobsImg02 2.0s 1.0s forwards;
}

@keyframes animeSp-JobsImg01 {
	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 animeSp-JobsImg02 {
	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 .box1 {
	width: 100%;
	height: 150px;
	top: 50px;
	margin-bottom: 80px;
}


#help {
	position: relative;
	margin-bottom: 100px;
}

#help #helpImg {
	position: relative;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 60px;
}

#help #helpImg [class^="help"] {
	position: absolute;
	width: 44%;
	height: 100%;
	background: #ccc;
	border: 1px #aaa solid;
	opacity: 0;
}

/* 悩み背景 */
#help #helpImg .help01 {
	background: linear-gradient( bottom, #aaa 0, #fff 70% );
	background: -webkit-linear-gradient( bottom, #aaa 0, #fff 70% );
	background: -moz-linear-gradient( bottom, #aaa 0, #fff 70% );
	background: -ms-linear-gradient( bottom, #aaa 0, #fff 70% );
}

/* 解決背景 */
#help #helpImg .help02 {
	right: 0;
	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% );
}


/* 悩み見出し */
#help #helpImg .help01 h5 {
	font-size: 1rem;
	color: #fff;
	height: 50px;
	line-height: 1.45;
	background: #36a;
	padding: 5px;
	text-shadow: 2px 2px 0 #333;
}
#help #helpImg .help01 h5 span {
	display: block;
	text-align: right;
}


/* 解決見出し */
#help #helpImg .help02 h5 {
	font-size: 1.4rem;
	color: #fff;
	height: 50px;
	line-height: 50px;
	background: #fe6;
	padding: 5px;
	text-align: center;
	text-shadow: 1px 1px 0 #555;
}


#help .headsp {
	position: absolute;
	top: 0;
}



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

/* 右矢印 */
.arrow-b {
	position: absolute;
	width: 30px;
	height: 60px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
}


.arrow-b::before {
	position: absolute;
	content: "";
	border-left: 30px #f22 solid;
	border-top: 30px transparent solid;
	border-bottom: 30px transparent solid;
	top: 0;
	bottom: 0;
	left: 0;
}

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

.animeHelpImg02 {
	animation: animeSpHelpImg 1s .3s forwards;
}

.animeHelpImg03 {
	animation: animeSpHelpImgArrow 1s .3s forwards;
}


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


@keyframes animeSpHelpImgArrow {
	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: 20px;
}
/* ボックス1 */
.box .box1 {
	position: relative;
	width: 240px;
	width: 100%;
}


/* ボックス2 */
.box .box2 {
	width: 100%;
}



/* ボックス内見出し */
.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 {
	font-size: 0.85em;
	margin: 0 0 0px 22px;
}