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

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

[id^="content-plan"] {
	margin: 10px 0;
}




#carea {
		position: relative;
		margin-bottom: 30px;
		overflow: hidden;
}

#carea h2.phead-sp {
		padding: 5px;
		color: #fff;
		font-size: 1.4em;
		text-shadow: 1px 1px 1px #333;
		margin-bottom: 1px;
}

/* 金額表示 */
#carea h3 {
		top: 2px;
		font-size: 1.5em;
		width: auto;
		height: 30px;
		line-height: 32px;
		color: #fff;
		padding: 5px;
		text-shadow: 2px 2px 0 #222;
		box-shadow: 2px 2px 0 #333;
		margin-bottom: 5px;
		background-color: #666;
}

[id^="content-plan"]
	p.tax {
		color: #f00;
		font-size: 0.8em;
		text-align: right;
}



/* こんな方におすすめ */
#plan-img {
		position: relative;
		padding: 10px;
		height: 195px;
}

#plan-img li.chk-sp {
		position: relative;
		height: auto;
		margin-bottom: 40px;
		background: none;
		padding-left: 25px;
		font-size: 0.85em;
		font-weight: bold;
}

#plan-img li.chk-sp::before {
		content: "";
		position: absolute;
		width: 24px;
		height: 18px;
		background-position: -49px -6px;
		left: 0px;
}


/* キャッチ文字 */
#plan-img li.chk-sp span {
		position: relative;
		z-index: 0;
}

/* LINE */
#plan-img li.chk-sp span::before {
		position: absolute;
		content: "";
		height: 3px;
		background: #f88;
		left: -2px;
		bottom: 0;
		z-index: -1;
		animation: animeSp-Underline 2.0s forwards;
}

/* アンダーライン */
@keyframes animeSp-Underline {
	from {
		width: 0;
	}
	
	to {
		width: calc( 100% + 2px );
	}
}


/* 回答 */
#carea #plan-img li.chk-sp p {
		position: absolute;
		font-weight: normal;
		font-size: 1.0em;
		left: 30px;
		padding: 0;
		line-height: 1.4;
}



/* プラン見出し */
#content-plan01
	#carea h2.phead-sp {
		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% );
}

#content-plan02
	#carea h2.phead-sp {
		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% );
}

#content-plan03
	#carea h2.phead-sp {
		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% );
}

#content-plan04
	#carea h2.phead-sp {
		background: linear-gradient( top, #faa 0, #5b5 50%, #393 51%, #191 100% );
		background: -webkit-linear-gradient( top, #fa5 0, #fb7 50%, #d85 51%, #c54 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% );
}


/* エリア背景 */
#content-plan01
	#carea #plan-img {
		background: #dfe;
		background: linear-gradient( left, #cfc 0, #fff 80% );
		background: -webkit-linear-gradient( left, #cfc 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #cfc 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #cfc 0, #fff 80%, #fff 100% );
}

#content-plan02
	#carea #plan-img {
		background: #fdd;
		background: linear-gradient( left, #fcc 0, #fff 80% );
		background: -webkit-linear-gradient( left, #fcc 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #fcc 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #fcc 0, #fff 80%, #fff 100% );
}

#content-plan03
	#carea #plan-img {
		background: #cdf;
		background: linear-gradient( left, #cdf 0, #fff 80% );
		background: -webkit-linear-gradient( left, #cdf 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #cdf 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #cdf 0, #fff 80%, #fff 100% );
}

#content-plan04
	#carea #plan-img {
		background: #fda;
		background: linear-gradient( left, #fc7 0, #fff 80% );
		background: -webkit-linear-gradient( left, #fc7 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #fc7 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #fc7 0, #fff 80%, #fff 100% );
}


/* イメージ人物 */
#carea #plan-img::after {
		position: absolute;
		content: "";
		opacity: 0.1;
		animation: animeSp-Chars 1.6s forwards;
}

#content-plan01
	#carea ul#plan-img::after {
		width: 210px;
		height: 240px;
		right: 0px;
		bottom: 0px;
		z-index: 5;
}

#content-plan02
	#carea ul#plan-img::after {
		width: 260px;
		height: 240px;
		right: 0px;
		bottom: 0px;
		z-index: 5;
}



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



/*--------------------------------------
　料金イメージ
--------------------------------------*/
#varea {
		margin-bottom: 30px;
}


#varea h3.headStyle001 {
		width: auto;
		color: #fff;
		background: #292;
		background: linear-gradient( left, #282 0, #6a6 100% );
		background: -webkit-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
		background: -moz-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
		background: -ms-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
}



#varea ul.vbox{
}

/* 各ボックス設定 */
#varea ul.vbox li {
		position: relative;
		float: left;
		
		width: 22%;
		height: 270px;
		margin-right: 3%;
		
		border-radius: 5px;
}

#content-plan01
	#varea ul.vbox li {
		background: #cfc;
		border: 1px #6a6 solid;
}

#content-plan02
	#varea ul.vbox li {
		background: #fdd;
		border: 1px #a88 solid;
}

#content-plan03
	#varea ul.vbox li {
		background: #acf;
		border: 1px #48a solid;
}

#content-plan04
	#varea ul.vbox li {
		background: #fd9;
		border: 1px #fb8 solid;
}




#varea ul.vbox li:last-of-type {
		margin: 0;
}

/* 加算およびイコール設定 */
#varea ul.vbox li:after {
		position: absolute;
		text-align: center;
		font-weight: bold;
		font-size: 0.6em;
		width: 8px;
		height: 8px;
		top: 0;
		bottom: 0;
		left: 101.5%;
		margin: auto;
}


/* 加算 */
#varea ul.vbox li:not(:last-of-type):after {
		content: "＋";
}

/* 合計 */
#varea ul.vbox li:nth-of-type(3):after {
		content: "＝";
}


/* 見出し */
#varea ul.vbox li p:first-child {
		text-align: center;
		color: #fff;
		font-size: 0.75em;
		font-weight: bold;
		padding: 0;
		text-shadow: 1px 1px 0 #333;
}

#content-plan01
	#varea ul.vbox li p:first-child {
		background: #6a6;
}

#content-plan02
	#varea ul.vbox li p:first-child {
		background: #c77;
}

#content-plan03
	#varea ul.vbox li p:first-child {
		background: #47c;
}

#content-plan03
	#varea ul.vbox li:first-child p:first-child {
		font-size: 0.65em;
}

#content-plan04
	#varea ul.vbox li p:first-child {
		background: #fa5;
}


/* 金額 */
#varea ul.vbox li p:nth-of-type(2) {
		position: relative;
		text-align: center;
		font-size: 0.8em;
		width: 90%;
		height: 34px;
		line-height: 34px;
		color: #333;
		background: #ffc;
		margin: 10px auto;
		border-radius: 10px;
		border: 1px #cca solid;
		
}

/* コメント */
#varea ul.vbox li p:last-of-type {
		position: relative;
		bottom: 0;
		font-size: 0.8em;
		line-height: 1.4;
		height: 182px;
		padding: 1px 1px 1px 2px;
		margin: 3px;
		background: #fff;
		border: 1px #ccc solid;
}



/* 詳細リンク */
#varea ul.vbox li p:last-of-type a {
		display: block;
		position: relative;
		width: 100px;
		text-align: center;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		border: 1px #00f solid;
		border-radius: 8px;
}



/*--------------------------------------
　リードエリア
--------------------------------------*/
#rarea {
		margin-bottom: 50px;
}


/* 見出し */
#rarea h3 {
		font-size: 1.2em;
		color: #fff;
		background: #292;
		background: linear-gradient( left, #282 0, #6a6 100% );
		background: -webkit-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
		background: -moz-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
		background: -ms-linear-gradient( left, #282 0, #282 50%, #4c4 100% );
		text-shadow: 1px 1px 0 #333;
}

#rarea h3::after {
		border-bottom: 30px transparent solid;
		border-left: 30px #4c4 solid;
}



#rarea p {
}


/* 画像 */
#rarea div.box div:first-child {
		width: 100%;
}

#rarea div.box div:first-child img {
		width: 100%;
		border-radius: 5px;
}


/* 文章 */
#rarea div.box div:last-child {
}



/* サーバーとかの解説部 */
#net {
		padding: 10px;
		border: 1px #aaa dotted;
		background: #ffd;

}

#net p {
		padding: 0 10px;
}



#net h4.head-sp {
		position: relative;
		height: 24px;
		font-size: 1.2em;
		line-height: 24px;
		padding: 2px 2px 0px 35px;
		color: #fff;
		background: linear-gradient( left , #333 0, #666 90%, #666 100% );
		background: -webkit-linear-gradient( left , #333 0, #666 90%, #666 100% );
		background: -moz-linear-gradient( left , #333 0, #666 90%, #666 100% );
		background: -ms-linear-gradient( left , #333 0, #666 90%, #666 100% );
		margin-bottom: 5px;
		border-radius: 10px;

}

/* 電球アイコン */
#rarea h4.head-sp::before {
		position: absolute;
		content: "";
		width: 16px;
		height: 16px;
		background-position: -108px -8px;
		left: 10px;
		top: 0;
		bottom: 0;
		margin: auto 0;
}




/*--------------------------------------
　プランの制作内容
--------------------------------------*/

/* 見出し */
#plan-info h4.ihead-sp {
		position: relative;
		color: #fff;
		line-height: 2;
		padding-left: 40px;
		margin-bottom: 10px;

		background: linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -webkit-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -moz-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -ms-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );

}

#plan-info h4.ihead-sp::before {
		position: absolute;
		content: "";
		width: 22px;
		height: 25px;
		left: 5px;
		top: -5px;
		bottom: 0;
		margin: auto 0;
		background-position: -164px 1px;
}

/* プラン画像見出し */
[id^="content-plan"]
	div.plan-imgStyle {
		position: relative;
		width: 40%;
		height: 120px;
		background: #ccc;
		background: -webkit-linear-gradient( left, #888 0, #888 60%, #ccc 100% );
		margin-bottom: 20px;
		
		border-radius: 3px 0 0 3px;

}

[id^="content-plan"]
	div.plan-imgStyle::after {
		position: absolute;
		content: "";
		border-left: 50px #ccc solid;
		border-bottom: 120px transparent solid;
		top: 0;
		left: 100%;
}

/* 画像エリア */
[id^="content-plan"]
	div.plan-imgStyle::before {
		position: absolute;
		content: "";
		width: 150%;
		height: 120px;
		top: 0;
		left: 100%;
		border-radius: 0 5px 5px 0;
}


/* 基本プラン */
#plan-info div.plan-imgStyle::before {
		background: url( "../img/plan-head01.jpg" ) no-repeat;
		background-position: -30px 0;

}


/* 追加オプション */
#plan-option div.plan-imgStyle::before {
		background: url( "../img/plan-head02.jpg" ) no-repeat;
		background-position: -50px 0;
}




[id^="content-plan"]
	.plan-imgStyle p {
		position: absolute;
		font-size: 1.0em;
		font-weight: bold;
		color: #fff;
		width: 230%;
		top: 10px;
		left: 0px;
		text-shadow: 2px 2px 1px #333;
		letter-spacing: 0.05em;
		opacity: 0;
		z-index: 1;
}

[id^="content-plan"]
	.plan-imgStyle p:first-child {
		top: 15px;
		left: 5px;
}

[id^="content-plan"]
	.plan-imgStyle p:nth-child(2) {
		font-size: 1.0em;
		top: 45px;
		left: 10px;
}

[id^="content-plan"]
	.plan-imgStyle p:nth-child(3) {
		font-size: 0.9em;
		color: #f33;
		top: 80px;
		left: 20px;
		text-shadow: 1px 1px 1px #333;
}

.animeFade01 {
		animation: animeSp-FadeIn 1.0s forwards;
}

.animeFade02 {
		animation: animeSp-FadeIn 1.6s 1.0s forwards;
}

.animeFade03 {
		animation: animeSp-FadeIn 1.6s 2.0s forwards;
}

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


/* アイコンデータ */
#plan-info ul {
		position: relative;
}


#plan-info ul li {
		position: relative;
		padding-left: 46px;
		line-height: 1.2;
		margin-bottom: 20px;
		width: calc( 100% - 50px );
		border-bottom: 1px #aaa dotted;
}

#plan-info ul li[class^="i-"]::before {
		position: absolute;
		content: "";
		background: url("../img/spicon-plans.png") no-repeat;
		background-size: 250px;
		width: 33px;
		height: 32px;
		left: 0;
		top: -2px;
}

/* アイコン見出し */
#plan-info ul li h5 {
		width: 170px;
		padding: 5px;
		background: #ddd;
		color: #333;
		box-shadow: 2px 2px 0px #888;
		
		font-size: 1.0em;
		margin-bottom: 10px;
}


/* 解説 */
#plan-info ul li p {
		margin-bottom: 10px;
		font-size: 1.0em;
}



/* アイコン詳細 */
#plan-info ul li.i-page01::before {
		background-position: 0 2px;
}

#plan-info ul li.i-page02::before {
		background-position: -33px 2px;
}

#plan-info ul li.i-page03::before {
		background-position: -66px 2px;
}

#plan-info ul li.i-page04::before {
		background-position: -99px 2px;
}


#plan-info ul li.i-mail01::before {
		background-position: 0px -32px;
		width: 36px;
}

#plan-info ul li.i-mail02::before {
		background-position: -36px -32px;
		width: 36px;
}

#plan-info ul li.i-mail03::before {
		background-position: -72px -32px;
		width: 36px;
}

#plan-info ul li.i-mail04::before {
		background-position: -108px -32px;
		width: 36px;
}



#plan-info ul li.i-seo::before {
		background-position: 0px -70px;
}

#plan-info ul li.i-sns::before {
		background-position: -36px -71px;

}

#plan-info ul li.i-sp::before {
		background-position: -71px -71px;
}

#plan-info ul li.i-movie::before {
		background-position: -106px -71px;
}

#plan-info ul li.i-favicon::before {
		background-position: -141px -71px;
}

#plan-info ul li.i-analyze::before {
		background-position: -176px -71px;
}

#plan-info ul li.i-maps::before {
		background-position: -214px -71px;
}


/*--------------------------------------
　プランのオプション料金表
--------------------------------------*/

[id^="plan-option"] {
		margin-bottom: 50px;
}


/* 見出し */
[id^="plan-option"] h4[class^="ohead"] {
		position: relative;
		color: #fff;
		line-height: 2;
		padding-left: 40px;
		margin-bottom: 10px;

		background: linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -webkit-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -moz-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
		background: -ms-linear-gradient( top, #444 0, #444 50%, #333 51%, #333 100% );
}

/* アイコン */
[id^="plan-option"] h4::before {
		position: absolute;
		content: "";
		width: 24px;
		height: 25px;
		left: 5px;
		top: -2px;
		bottom: 0;
		margin: auto 0;
		background-position: -249px 1px;
}

[id^="plan-option"] h4.ohead2-sp::before {
		background-position: -206px 1px;
		width: 24px;
		top: -4px;
}


/* 料金表テーブル */
[id^="plan-option"] table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 1px;
		background: #aaa;
}

[id^="plan-option"] table th {
		font-size: 0.7em;
		background: #ccc;
}

[id^="plan-option"] table th:first-child {
		width: 22%;
}


[id^="plan-option"] table th:nth-child(2) {
		width: 55%;
}

[id^="plan-option"] table th:nth-child(3) {
		width: 23%;
}

[id^="plan-option"] table td {
		background: #fff;
		font-size: 0.7em;
		padding: 2px;
		height: 100px;
		line-height: 1.9em;
}

[id^="plan-option"] table td:first-child {
}

[id^="plan-option"] table td:nth-child(2) {
}

[id^="plan-option"] table td:nth-child(2) p {
		margin-top: 5px;
}



[id^="plan-option"] table td:last-child {
		font-size: 0.7em;
		padding-left: 5px;
}

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

/* 見出し */
[id^="content-plan"]
	h3.headStyle {
		position: relative;
		width: 85%;
		height: 30px;
		padding-left: 10px;
		line-height: 30px;
		margin-bottom: 10px;
}

[id^="content-plan"]
	h3.headStyle::after {
		position: absolute;
		content: "";
		left: 100%;
}

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