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

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

/*------------------------
　制作料金プランのご紹介
------------------------*/
#content-planlist01 {
}

#content-planlist01
	#plan-list {
		width: 100%;
}

/* 各プランラッパー */
#content-planlist01
	#plan-list div.plan-wrap {
		position: relative;
		width: 100%;
		margin-bottom: 50px;
}

/* 各プランボックス */
#content-planlist01
	#plan-list div.plan-wrap div.plan-box {
		position: relative;
		width: calc( 100% - 20px );
		padding: 10px;
		border: 1px #ccc solid;
		background: #fff;
		box-shadow: 2px 2px 0 #666;
		z-index: 2;
}


/* 詳細ページへのリンク */
#content-planlist01
	#plan-list div.plan-wrap a.planlink {
		display: block;
		position: relative;
		width: 90%;
		height: 40px;
		line-height: 42px;
		font-size: 1.0em;
		color: #fff;
		text-align: center;
		background: #36c;
		margin: 10px auto;
		border-radius: 10px;
		transition: 0.4s;
}

#content-planlist01
	#plan-list div.plan-wrap a.planlink::before {
		position: absolute;
		content: "";
		border-left: 8px #f33 solid;
		border-top: 8px transparent solid;
		border-bottom: 8px transparent solid;
		width: 0;
		height: 0;
		top: 0;
		bottom: 0;
		left: 15px;
		margin: auto 0;
		transition: 0.4s;

}


#content-planlist01
	#plan-list div.plan-wrap a.planlink:hover {
		background: #333;
}



/*--------------------------------------
 プラン画像イメージエリア
--------------------------------------*/
#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img {
		position: relative;
		width: 100%;
		height: 150px;
		margin-bottom: 10px;
		overflow: hidden;
}

/* 見出し */
#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img h3 {
		padding: 5px;
		color: #fff;
		font-size: 1.4em;
		text-shadow: 2px 2px 0 #333;
}


#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img p {
		position: relative;
		padding-left: 10px;
		margin-bottom: 5px;
}

/* 金額表示 */
#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img p:first-of-type {
		top: 2px;
		font-size: 1.6em;
		font-weight: bold;
		height: 36px;
		line-height: 38px;
		color: #fff;
		text-shadow: 2px 2px 0 #222;
		box-shadow: 2px 2px 0 #333;
		margin-bottom: 10px;
		background-color: #666;
}

#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img ul {
		font-size: 0.85em;
}

#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img li.chk-sp {
		margin: 0;
		padding-left: 30px;
		font-weight: bold;
		background: none;
}

#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img li.chk-sp::before {
		position: absolute;
		content: "";
		width: 24px;
		height: 18px;
		background-position: -49px -6px;
		left: 5px;
}


/* イメージ画像読み出し */
#content-planlist01
	#plan-list div.plan-wrap div.plan-box div.plan-img::after {
		position: absolute;
		background: url( "../img/price-plansp.png" ) no-repeat;
		background-size: 550px;
}


/* メッセージ */
#content-planlist01
	#plan-list div.plan-wrap div.plan-box p {
		width: 100%;
		font-size: 0.9em;
		margin-bottom: 25px;
}



/*--------------------------------------
　個々の設定
--------------------------------------*/

/* 見出し背景 */
#content-planlist01
	#plan-list div.plan01 div.plan-box div.plan-img h3 {
		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-planlist01
	#plan-list div.plan02 div.plan-box div.plan-img h3 {
		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-planlist01
	#plan-list div.plan03 div.plan-box div.plan-img h3 {
		background: linear-gradient( top, #88f 0, #99f 50%, #66f 51%, #44c 100% );
		background: -webkit-linear-gradient( top, #88f 0, #99f 50%, #66f 51%, #44c 100% );
		background: -moz-linear-gradient( top, #88f 0, #99f 50%, #66f 51%, #44c 100% );
		background: -ms-linear-gradient( top, #88f 0, #99f 50%, #66f 51%, #44c 100% );
}

#content-planlist01
	#plan-list div.plan04 div.plan-box div.plan-img h3 {
		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-planlist01
	#plan-list div.plan01 div.plan-box div.plan-img {
		background: #cfc;
		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-planlist01
	#plan-list div.plan02 div.plan-box div.plan-img {
		background: #cfc;
		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-planlist01
	#plan-list div.plan03 div.plan-box div.plan-img {
		background: #cfc;
		background: linear-gradient( left, #ccf 0, #fff 80% );
		background: -webkit-linear-gradient( left, #ccf 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #ccf 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #ccf 0, #fff 80%, #fff 100% );

}

#content-planlist01
	#plan-list div.plan04 div.plan-box div.plan-img {
		background: #cfc;
		background: linear-gradient( left, #fa5 0, #fff 80% );
		background: -webkit-linear-gradient( left, #fa5 0, #fff 80%, #fff 100% );
		background: -moz-linear-gradient( left, #fa5 0, #fff 80%, #fff 100% );
		background: -ms-linear-gradient( left, #fa5 0, #fff 80%, #fff 100% );

}





/* イメージ人物 */
#content-planlist01
	#plan-list div.plan01 div.plan-box div.plan-img::after {
		position: absolute;
		content: "";
		width: 116px;
		height: 130px;
		background-position: 0 0;
		right: 0px;
		bottom: 0px;
}

#content-planlist01
	#plan-list div.plan02 div.plan-box div.plan-img::after {
		position: absolute;
		content: "";
		width: 126px;
		height: 130px;
		background-position: -114px 0;
		right: 0px;
		bottom: 0px;
}

#content-planlist01
	#plan-list div.plan03 div.plan-box div.plan-img::after {
		position: absolute;
		content: "";
		width: 140px;
		height: 126px;
		background-position: -260px -10px;
		right: 0px;
		bottom: 0px;
}

#content-planlist01
	#plan-list div.plan04 div.plan-box div.plan-img::after {
		position: absolute;
		content: "";
		width: 126px;
		height: 136px;
		background-position: -420px 0;
		right: 0px;
		bottom: 0px;

}



/*--------------------------------------
　プランについての設定
--------------------------------------*/
#content-planlist01
	#plan-list div.plan-box .icon-box {
		position: relative;
		width: 100%;
		height: 40px;
}


/* アイコン見出し */
#content-planlist01
	#plan-list div.plan-box h5 {
		color: #222;
		line-height: 1.5;
		margin-bottom: 10px;
		text-align: center;
		text-shadow: 1px 1px 0 #eee;
		box-shadow: 2px 2px 0 #666;
		background-color: #8ea;
		
}

/* アイコンデータ */
#content-planlist01
	#plan-list div.plan-box .icon-box > div[class^="i-"] {
		position: absolute;
		background: url("../img/spicon-plans.png") no-repeat;
		background-size: 220px;
		width: 29px;
		height: 29px;
		left: 0;
		opacity: 0;
}

/* アイコン詳細 */
#content-planlist01
	#plan-list div.plan-box .icon-box div.i-page01 {
		background-position: 0 2px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-page02 {
		background-position: -29px 2px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-page03 {
		background-position: -58px 2px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-page04 {
		background-position: -87px 2px;
}


#content-planlist01
	#plan-list div.plan-box .icon-box div.i-mail01 {
		background-position: 0px -28px;
		width: 32px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-mail02 {
		background-position: -32px -28px;
		width: 32px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-mail03 {
		background-position: -64px -28px;
		width: 32px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-mail04 {
		background-position: -96px -28px;
		width: 32px;
}




#content-planlist01
	#plan-list div.plan-box .icon-box div.i-seo {
		background-position: 0px -61px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-sns {
		background-position: -32px -62px;

}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-sp {
		background-position: -63px -62px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-movie {
		background-position: -94px -62px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-favicon {
		background-position: -124px -62px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-analyze {
		background-position: -155px -62px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-maps {
		background-position: -188px -62px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div.i-news {
		background-position: 0px -94px;
		width: 30px;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"] p {
		display: none;
		z-index: 0;
}


/* アイコン位置調整 */
#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(1) {
		animation: animeIcon 1.0s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(2) {
		left: calc(34*1px);
		animation: animeIcon 1.0s 0.1s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(3) {
		left: calc(35*2px);
		animation: animeIcon 1.0s 0.15s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(4) {
		left: calc(34*3px);
		animation: animeIcon 1.0s 0.20s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(5) {
		left: calc(34*4px);
		animation: animeIcon 1.0s 0.25s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(6) {
		left: calc(34*5px);
		animation: animeIcon 1.0s 0.30s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(7) {
		left: calc(34*6px);
		animation: animeIcon 1.0s 0.35s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(8) {
		left: calc(34*7px);
		animation: animeIcon 1.0s 0.40s forwards;
}

#content-planlist01
	#plan-list div.plan-box .icon-box div[class^="i-"]:nth-child(9) {
		left: calc(34*8px);
		animation: animeIcon 1.0s 0.45s forwards;
}




@keyframes animeIcon {
	from {
		transform: translateY(-10px);
	}
	
	to {
		opacity: 1.0;
		transform: translateY(0);
	}
}



/*--------------------------------------
 オプションについて
--------------------------------------*/
#content-planlist01
	#plan-option {
		margin-bottom: 50px;
}

#content-planlist01
	#plan-option div.boxwrap {
	
}


#content-planlist01
	#plan-option div.boxa {
	width: 100%;
	height: auto;
}

#content-planlist01
	#plan-option div.boxb {
}



/*--------------------------------------
　プランの比較
--------------------------------------*/
#content-planlist01
	#plan-compare {
	
		margin-bottom: 50px;
}

#content-planlist01
	#plan-compare table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 1px 1px;
		background: #aaa;
}

#content-planlist01
	#plan-compare table th:first-child {
		width: 25%;
		background: #ccc;
}
#content-planlist01
	#plan-compare table th {
		font-size: 0.8em;
		width: calc( 75% / 4 );
		line-height: 2;
}

/* 見出し */
#content-planlist01
	#plan-compare table th:nth-child(2) {
		background: #8c3;
}

#content-planlist01
	#plan-compare table th:nth-child(3) {
		background: #faa;
}

#content-planlist01
	#plan-compare table th:nth-child(4) {
		background: #6af;
}

#content-planlist01
	#plan-compare table th:nth-child(5) {
		background: #fa5;
}

#content-planlist01
	#plan-compare table td {
		font-size: 0.8em;
		background: #fff;
}

#content-planlist01
	#plan-compare table td:nth-child(1) {
		font-size: 0.8em;
		font-weight: bold;
		padding: 5px;
}

#content-planlist01
	#plan-compare table td:nth-child(1) span {
	font-size: 0.8em;
}


#content-planlist01
	#plan-compare table td:not(:nth-child(1)) {
		text-align: center;
}

#content-planlist01
	#plan-compare div.compareMsg {
	margin: 10px 0;
	font-size: 0.9em;
}

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