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

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

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

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

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

/* コラム */
.column {
	position: relative;
	font-size: .9rem;
	padding: 10px;
	border: 1px #aaa solid;
	margin-bottom: 30px;
}

.column .check {
	position: absolute;
	display: block;
	font-size: .7rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 50px;
	background: #f32;
	
	width: 50px;
	height: 50px;
	
	top: -5px;
	left: 0px;
	
	opacity: 0;
	border-radius: 70px;
}


.animeColumnCheck {
	animation: animeColumnCheck 1s forwards;
}



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

	40% {
		opacity: 1;
		transform: scale(.7,.7) rotate(-20deg);
		-webkit-transform: scale(.7,.7) rotate(-20deg);
		-moz-transform: scale(.7,.7) rotate(-20deg);
		-ms-transform: scale(.7,.7) rotate(-20deg);
	}
	
	100% {
		opacity: 1;
		transform: scale(1,1) rotate(-20deg);
		-webkit-transform: scale(1,1) rotate(-20deg);
		-moz-transform: scale(1,1) rotate(-20deg);
		-ms-transform: scale(1,1) rotate(-20deg);
		
	}
	
}

.column h4 {
	font-size: .9rem;
	color: #fff;
	line-height: 1.8;
	text-indent: 3rem;
	margin-bottom: 20px;
	text-shadow: 1px 1px 0 #888;
	border-radius: 5px;
	
	background: linear-gradient( top,  #36b 0, #36b 50%, #359 51%, #359 100% );
	background: -webkit-linear-gradient( top,  #36b 0, #36b 50%, #359 51%, #359 100% );
	background: -moz-linear-gradient( top,  #36b 0, #36b 50%, #359 51%, #359 100% );
	background: -ms-linear-gradient( top,  #36b 0, #36b 50%, #359 51%, #359 100% );

}

.column p {
	margin-bottom: 10px;
}

.column .liBox {
	line-height: 1.4;
	padding: 10px 20px;
	margin-bottom: 10px;
	border: 1px #aaa dotted;
	background: #ffe;
}

.column .liBox li {
	margin-bottom: 0;
}


/*--------------------------------------
	格安で高品質のホームページ制作
--------------------------------------*/

/*----------------------------
	ベースプランアニメ
----------------------------*/
#basePlanImg {
	position: relative;
	font-weight: bold;
	width: 100%;
	height: 500px;
	background: #fff;
	color: #333;
	overflow: hidden;
	border: 1px #aaa solid;
}

/* すべてのアニメーションの基準位置 */
#basePlanImg .box {
	position: relative;
}

.animeBasePlanImgBox {
	animation: animeSpBasePlanImgBox 1s 8s forwards;
}



@keyframes animeSpBasePlanImgBox {
	from {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}

	to {
		transform: translateY(25px);
		-webkit-transform: translateY(25px);
		-moz-transform: translateY(25px);
		-ms-transform: translateY(25px);
	}
}


/* 無駄のないプラン～の見出し */
#basePlanImg .after {
	position: absolute;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	color: #fff;
	
	background: #23a;
	background: linear-gradient( top, #35a 0, #35a 50%, #239 51%, #239 100% );
	background: -webkit-linear-gradient( top, #35a 0, #35a 50%, #239 51%, #239 100% );
	background: -moz-linear-gradient( top, #35a 0, #35a 50%, #239 51%, #239 100% );
	background: -ms-linear-gradient( top, #35a 0, #35a 50%, #239 51%, #239 100% );
	
	text-shadow: 1px 1px 0 #666;
	width: 98%;
	top: -20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;

}

/* 無駄のないプランで制作する事が可能ですアニメ */
.animeBasePlanImgAfter {
	animation: animeSpBasePlanImgAfter .6s 8.4s forwards;
}

@keyframes animeSpBasePlanImgAfter {
	0% {
		opacity: 0;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}

	100% {
		opacity: 1;
		transform: translateY(30px);
		-webkit-transform: translateY(30px);
		-moz-transform: translateY(30px);
		-ms-transform: translateY(30px);
	}
	
}


/* プラン選択文字列 */
#basePlanImg .select {
	position: absolute;
	font-size: 1.2rem;
	width: 88%;
	text-align: center;
	top: 30px;
	left: 0;
	right: 0;
	margin: 0 auto;
	opacity: 0;
}

/* プラン選択文字列 */
.animeBasePlanSelectStr {
	animation: animeSpBasePlanSelectStr 4s forwards;
}

@keyframes animeSpBasePlanSelectStr {
	0% {
		opacity: 0;
		transform: scale(0.1,0.1);
		-webkit-transform: scale(0.1,0.1);
		-moz-transform: scale(0.1,0.1);
		-ms-transform: scale(0.1,0.1);
	}

	10% {
		opacity: 1;
		transform: scale(1.2,1.2);
		-webikit-transform: scale(1.2,1.2);
		-moz-transform: scale(1.2,1.2);
		-ms-transform: scale(1.2,1.2);
	}

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

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


/* プランボックス */
#basePlanImg [class^="base"] {
	position: absolute;
	background: linear-gradient( top, #ffa 0, #fff 100% );
	background: -webkit-linear-gradient( top, #ffa 0, #fff 100% );
	background: -moz-linear-gradient( top, #ffa 0, #fff 100% );
	background: -ms-linear-gradient( top, #ffa 0, #fff 100% );

	width: 47%;
	height: 22px;
	text-align: center;
	line-height: 27px;
	border: 1px #aaa solid;
	top: 80px;
	overflow: hidden;
	
}

/* プラン見出し */
#basePlanImg [class^="base"] h5 {
	color: #fff;
	font-size: .8rem;
	font-weight: none;
	line-height: 1.4;
	text-shadow: 1px 1px 0 #333;
	background: #193;
	border: 2px #5c6 solid;
	padding-top: 1px;

}

/* 初期位置 */
#basePlanImg [class^="base"]:nth-child(1) {
	left: 2%;
}

#basePlanImg [class^="base"]:nth-child(2) {
	left: 0;
	transform: translateX(107%);
}

#basePlanImg [class^="base"]:nth-child(3) {
	top: 150px;
	left: 2%;
}

#basePlanImg [class^="base"]:nth-child(4) {
	top: 150px;
	left: calc( 47% + 2% + 2% );
}



/* 選択したもの以外を非表示 */
.animeBasePlan {
	animation: animeSp-FadeOut .5s 2s forwards;
}


/* 選択されたものを移動 */
.animeBasePlanSel {
	animation: animeSpBasePlanSel 3s 3s forwards;
}


@keyframes animeSpBasePlanSel {
	0% {
		width: 47%;
		height: 22px;
		transform: translate(0,0);
		-webkit-transform: translate(107%,0);
		-moz-transform: translate(0,0);
		-ms-transform: translate(0,0);
	}
	
	30% {
		width: 47%;
		height: 22px;
		transform: translate(5%,-60px);
		-webkit-transform: translate(5%,-60px);
		-moz-transform: translate(5%,-60px);
		-ms-transform: translate(5%,-60px);
	}
	
	90% {
		width: 90%;
		height: 130px;
		transform: translate(5%,-58px);
		-webkit-transform: translate(5%,-58px);
		-moz-transform: translate(5%,-58px);
		-ms-transform: translate(5%,-58px);
	}


	
	100% {
		width: 90%;
		height: 130px;
		transform: translate(5%,-58px);

		-webkit-transform: translate(5%,-58px);
		-moz-transform: translate(5%,-58px);
		-ms-transform: translate(5%,-58px);
	}
}

/* プランの見出しアニメ */
.animeBasePlanName {
	animation: animeSpBasePlanName .6s 4s forwards;
}

@keyframes animeSpBasePlanName {
	0% {
		background: #1a3;
		border: 2px #1a3 solid;
	}

	100% {
		background: #fa0;
		border: 2px #fc3 solid;
	}
}




#basePlanImg [class^="base-"] p {
	margin: 0;
	line-height: 1.5;
}

/* 制作内容見出し */
#basePlanImg [class^="base-"] p:first-of-type {
	color: #fff;
	font-size: .8rem;
	font-weight: bold;
	width: 80%;
	background: #45a;
	margin: 5px auto 10px auto;
	border-radius: 5px;
}

/* 制作内容の詳細 */
#basePlanImg [class^="base-"] p:nth-of-type(n+2) {
	position: relative;
	text-align: left;
	font-size: .8rem;
	text-indent: 3rem;
}

/* ページ数など */
#basePlanImg [class^="base-"] p:nth-of-type(n+2) span {
	display: block;
	position: absolute;
	width: 10px;
	top: 0;
	right: 30%;
}


#basePlanImg [class^="base-"] p span {
	font-size: .8rem;
}


/* ◯◯したい！ */
#basePlanImg .msg {
	position: relative;
	width: 180px;
	height: 70px;
	top: 175px;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: #fff;
	border: 1px #aaa solid;
	border-radius: 4px;
	opacity: 0;
	z-index: 1;
}

.animeBasePlanFadeIn {
	animation: animeSp-FadeIn 1s 5.2s forwards;
}

#basePlanImg .msg li {
	position: absolute;
	list-style: disc;
	top: 5px;
	left: 10px;
	width: 180px;
	height: 20px;
	overflow: hidden;
}

#basePlanImg .msg li p {
	position: absolute;
	opacity: 0;
	font-size: 0.7rem;
	font-weight: bold;
	top: 20px;
}

#basePlanImg li:nth-child(1) {
	top: 5px;
}

#basePlanImg li:nth-child(2) {
	top: 25px;
}


#basePlanImg li:nth-child(3) {
	top: 45px;
}

/* ○○したいメッセージアニメ */
.animeBasePlanMsg {
	animation: animeSpBasePlanMsg 2.6s 5s forwards;
}

@keyframes animeSpBasePlanMsg {
	0% {
		opacity: 0;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}

	100% {
		opacity: 1;
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
		-moz-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
	}
	
}

/* 矢印 */
#basePlanImg .arrow {
	position: absolute;
	width: 30px;
	height: 20px;
	background: #f33;
	
	left: 80px;
	top: 160px;

	left: 0;
	right: 0;
	margin: 0 auto;
	
	opacity: 0;
	box-shadow: 3px 3px #aaa;
}

.animeBasePlanArrow {
	animation: animeSpBasePlanArrow .8s 6s forwards;
}

#basePlanImg .arrow::before,
#basePlanImg .arrow::after {
	content: "";
	position: absolute;
	border-top: 30px #f33 solid;
	border-left: 30px transparent solid;
	border-right: 30px transparent solid;
	
	top: 100%;
	left: -15px;
}

#basePlanImg .arrow::before {
	border-top: 30px #aaa solid;
	top: calc( 100% + 3px );
	left: -12px;
}



@keyframes animeSpBasePlanArrow {
	0% {
		opacity: 0;
		height: 20px;
	}
	
	
	100% {
		opacity: 1;
		height: 100px;
	}
}


/* プラン(after) */
#basePlanImg .base-af {
	top: 300px;
	left: 5%;
	width: 90%;
	height: 160px;
	opacity: 0;
}



#basePlanImg .base-af p:nth-of-type(5) {
	color: #f33;
	font-weight: bold;
	opacity: 0;
}


#basePlanImg .base-af p:nth-of-type(6) {
	color: #f33;
	font-weight: bold;
	opacity: 0;
}



/* アフタープランボックスアニメ */
.animeBasePlanAfter {
	animation: animeSpBasePlanAfter .6s 7s forwards;
}
@keyframes animeSpBasePlanAfter {
	0% {
		opacity: 0;
		transform: scale(.5,.5);
		-webkit-transform: scale(.5,.5);
		-moz-transform: scale(.5,.5);
		-ms-transform: scale(.5,.5);
	}

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


/* ページ数 */
#basePlanImg .base-af p:nth-of-type(2) span {
	color: #f00;
	font-weight: bold;
	opacity: 0;
}

/* ページ数アニメ */
.animeBasePlanScale01 {
	animation: animeSpBasePlanScale 1s 7.6s forwards;
}

/* スマートフォン対応アニメ */
.animeBasePlanScale02 {
	animation: animeSpBasePlanScale 1s 8.0s forwards;
}

/* 更新システムアニメ */
.animeBasePlanScale03 {
	animation: animeSpBasePlanScale 1s 8.2s forwards;
}

@keyframes animeSpBasePlanScale {
	0% {
		opacity: 0;
		transform: scale(2,2);
		-webkit-transform: scale(2,2);
		-moz-transform: scale(2,2);
		-ms-transform: scale(2,2);
	}

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

/* 追加もおまかせ的な */
#basePlanImg .addopt {
	display: none;

}
.animeBasePlanAddOption01 {
}
.animeBasePlanAddOption02 {
}


/* ホームページ制作アニメ*/
#planImg {
	position: relative;
	width: 100%;
	height: 100px;
	background: #000;
	color: #fff;
	overflow: hidden;
	border: 1px #aaa solid;
}

#planImg div:not(:last-of-type) {
	position: relative;
	height: 1.6rem;
	overflow: hidden;
}

#planImg p {
	position: absolute;
	font-size: .95rem;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	top: 2.1rem;
	
}

#planImg div:nth-of-type(1) {
	top: 20px;
	left: 5px;
}

#planImg div:nth-of-type(2) {
	font-size: 1.6rem;
	top: 30px;
	left: 5px;
}


/* 円 */
#planImg div:nth-of-type(3) {
	position: absolute;
	width: 80px;
	height: 80px;
	border-radius: 65px;
	background: #2c6;
	overflow: hidden;
	top: 10px;
	right: 2px;
	opacity: 0;
}


#planImg div:nth-of-type(3) img {
	position: absolute;
	width: 65px;
	top: 5px;
	left: 10px;
	opacity: 0;
}

/* 背景 */
.animePlanImg01 {
	animation: animePlanImg01 2s 1s forwards;
}

@keyframes animePlanImg01 {
	from {
		color: #fff;
		background: #000;
	}
	
	to {
		color: #000;
		background: #fff;
	}
}

/* 文字 */
.animePlanImg02 {
	animation: animePlanImg02 1.6s forwards;
}

@keyframes animePlanImg02 {
	from {
		transform: translateY(0) scale(1,1.);
		-webkit-transform: translateY(0) scale(1,1.4);
		-moz-transform: translateY(0) scale(1,1.2);
		-ms-transform: translateY(0) scale(1,1.2);
	}
	
	to {
		transform: translateY(-1.6rem) scale(1,1.2);
		-webkit-transform: translateY(-1.6rem) scale(1,1.4);
		-moz-transform: translateY(-1.6rem) scale(1,1.2);
		-ms-transform: translateY(-1.6rem) scale(1,1.2);
	}
}


/* 円 */
.animePlanImg03 {
	animation: animePlanImg03 1s 2s forwards;
}

@keyframes animePlanImg03 {
	0% {
		opacity: 0;
		transform: translateX(-700px) scale(4,4);
		-webkit-transform: translateX(-700px) scale(4,4);
		-moz-transform: translateX(-700px) scale(4,4);
		-ms-transform: translateX(-700px) scale(4,4);
	}
	
	40% {
		opacity: 1;
		transform: translateX(0) scale(0.7,0.7);
		-webkit-transform: translateX(0) scale(0.7,0.7);
		-moz-transform: translateX(0) scale(0.7,0.7);
		-ms-transform: translateX(0) scale(0.7,0.7);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1,1);
		-webkit-transform: translateX(0) scale(1,1);
		-moz-transform: translateX(0) scale(1,1);
		-ms-transform: translateX(0) scale(1,1);
	}
	
}

/* 人 */
.animePlanImg04 {
	animation: animePlanImg04 1s 2.8s forwards;
}

@keyframes animePlanImg04 {
	0% {
		opacity: 0;
		transform: translateY(120px);
		-webkit-transform: translateY(120px);
		-moz-transform: translateY(120px);
		-ms-transform: translateY(120px);
	}
	
	40% {
		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		-moz-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
	}
	
	
	100% {
		opacity: 1;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}
	
}